/*
================================================================================================================
テーマ変更
================================================================================================================
*/
/*先行楽曲*/
dl.cell dt{background-color:#ffc000; text-shadow:1px 2px 3px #826200,1px 2px 2px #826200;}
@media screen and (max-width:1200px){dl.cell dd::before{color:#ffc000;}}
@media screen and (max-width:370px){dl.cell dd::before{
color:#fff;
background-color:#ffc000;
text-shadow:1px 2px 3px #826200,1px 2px 2px #826200;}}

#lightning .section .cat > strong{color:#000; font-family:'M PLUS 1', sans-serif; /*text-shadow:1px 1px 1px rgba(0,0,0,.3) , 2px 2px 1px rgba(0,0,0,.3); font-weight:500 !important;*/}
#lightning .section .cat > strong span{color:#0ff;}
#lightning .section .cat .inner img{filter:drop-shadow(2px 2px 3px rgba(0,0,0,.4));}

/*段位認定 極*/
#lightning .section > h2,
#lightning .section > h3{color:#fff; background-color:#f86000; font-family:'Noto Sans JP', sans-serif; font-weight:700;}
#lightning .section > h2 span{color:#ffea00;}
#lightning .section p{color:#f86000; font-family:'Noto Sans JP', sans-serif; /*text-shadow:0 0 5px rgba(0,0,0,.5) , 1px 1px 1px rgba(0,0,0,.3);*/}
#lightning .section p span{color:#ff00c6 !important;}
#lightning .section .cat{background-color:rgba(0,0,0,.2); border-radius:5px;}
#lightning .section .cat .inner{background-color:rgba(0,0,0,.5); border-radius:5px; border:1px solid #fff;}
#lightning .section .cat .inner p{color:#fff !important; font-weight:700;}
#lightning .section .cat .inner p > span{display:inline-block; color:#fc0 !important; padding:0 5px;}
#lightning .section .cat .inner p > a{color:#00edff;}

/*録画機能*/
#lightning .link a{background-color:#0084ff;}
#lightning .link a.term{background-color:#fe5a00;}
#lightning .link a.term:hover{background-color:#fdb901;}
#lightning .link a:hover{background-color:#00ccff;}

/*
================================================================================================================
LIGHTNING MODEL 設置店検索
================================================================================================================
*/
a.shop-link{
display:block;
width:100%;
max-width:380px;
background-color:#fff;
border:1px solid #000;
margin:40px auto 0;}
a.shop-link img{width:100%; transition:opacity .5s ease-in-out;}
a.shop-link img:hover{opacity:.5;}

@media screen and (max-width:480px){
a.shop-link{width:70%; margin:30px auto 0;}}

/*
================================================================================================================
LIGHTNING MODEL プレミアムエリア
================================================================================================================
*/
#premium-area{border:1px solid #000; border-bottom:none;}
#premium-area li{display:flex; flex-wrap:wrap; color:#000; background-color:#fff; border-bottom:1px solid #000;}
#premium-area li p{padding:3px 5px;}
#premium-area li p:first-child{width:200px; background-color:#ffa300; font-weight:bold; border-right:1px solid #000;}
#premium-area li p:last-child{width:calc(100% - 200px);}
@media screen and (max-width:500px){
#premium-area li p:first-child,
#premium-area li p:last-child{width:100%;}
#premium-area li p:last-child{border-right:1px solid #000; border-top:1px solid #000;}}

/*
================================================================================================================
筐体別説明
================================================================================================================
*/
.model{
display:flex;
width:100%;
margin:0 auto;}
.model .cat{
width:50%;
text-align:center;
padding:0 5px;}
.model .cat strong{display:block; color:#fff; background-color:#2a98ff; font-size:14px; padding:5px; margin:10px auto;}
.model .cat img{width:100%; max-width:490px;}

@media screen and (max-width:800px){
.model{flex-wrap:wrap; max-width:500px;}
.model .cat{width:100%;}}

/*
================================================================================================================
LIGHTNING MODEL 段位認定 極
================================================================================================================
*/
#lightning .section.frame{text-align:center !important;}

#lightning .section > h2{
display:block;
width:100%;
font-size:20px;
padding:10px 0;
margin:0 auto 10px;}

#lightning .section p{
font-size:15px;
line-height:25px;
text-align:left;}

#lightning .section > img{width:96%; max-width:640px; padding:10px 0;}

#lightning .section .cat{padding:20px; margin:20px auto;}
#lightning .section .cat:last-child{margin:20px auto 0;}
#lightning .section .cat > strong{
display:block;
font-size:20px;
font-weight:bold;
text-align:left;
margin:0 auto 10px;}

#lightning .section .cat .inner{text-align:center; padding:10px 20px;}
#lightning .section .cat .inner img{width:100%; /*max-width:734px;*/ max-width:640px; margin:10px 0;}
#lightning .section .cat .inner p{width:100%; max-width:734px; margin:0 auto;}
#lightning .section .cat .inner p.cat01{font-size:12px; line-height:20px;}
#lightning .section .cat .inner p.cat02{text-align:center;}
#lightning .section .cat .inner p.cat03{max-width:450px;}

@media screen and (max-width:640px){
#lightning .section .cat > strong{font-size:18px;}
#lightning .section p{font-size:14px;}}

@media screen and (max-width:540px){
#lightning .section .cat .inner p.cat03 b{display:block; padding:0 5px; margin:5px auto 3px;}
#lightning .section .cat .inner p.cat03 span{display:none;}}

@media screen and (max-width:480px){
#lightning .section > h2{font-size:16px; padding:5px 0;}
#lightning .section .cat > strong{font-size:16px;}
#lightning .section .cat{padding:10px;}
#lightning .section .cat .inner{padding:10px;}}

@media screen and (max-width:420px){
#lightning .section .cat > strong{font-size:15px;}
#lightning .section p{font-size:12px; line-height:20px;}
#lightning .section .cat .inner p.cat01{font-size:11px;}
#lightning .section .cat .inner p.cat02{text-align:left;}}

/*
================================================================================================================
LIGHTNING MODEL 録画機能 HOWTO
================================================================================================================
*/
#lightning .section > h3{
display:block;
font-size:18px;
padding:7px 10px;
margin:0 auto 20px;}
#lightning .section > h3 br{display:none;}

#lightning .link{display:flex; justify-content:center; margin:20px auto 40px;}
#lightning .link a{
display:block;
width:calc(50% - 20px); 
max-width:500px;
color:#fff;
font-size:14px;
font-weight:bold;
text-align:center;
border-radius:5px;
padding:10px 0;
margin:0 auto;
transition:all 0.3s ease;}
#lightning .link a:hover{text-decoration:none;}

@media screen and (max-width:420px){
#lightning .link{flex-wrap:wrap;}
#lightning .link a{width:100%; margin:0 auto;}
#lightning .link a:first-child{margin:0 auto 10px;}}

/*利用規約*/
#lightning .section > ul{text-align:left; font-size:14px; line-height:20px;}
#lightning .section > ul li{position:relative; margin:0 auto 10px;}
#lightning .section > ul li > span{display:block; padding:10px;}

#lightning .section > ul.notice li{padding-left:17px;}
#lightning .section > ul.notice li::before{
display:block;
content:"※";
position:absolute;
top:0;
left:0;}

#lightning .section > ul.notice2 li{padding-left:17px;}
#lightning .section > ul.notice2 li::before{
display:block;
color:red;
content:"※";
position:absolute;
top:0;
left:0;}

@media screen and (max-width:480px){#lightning .section > h3{font-size:15px;}}
@media screen and (max-width:420px){#lightning .section > ul{font-size:12px;}}
@media screen and (max-width:370px){
#lightning .section > h3{font-size:13px;}
#lightning .section > h3 br{display:block;}}

/*
================================================================================================================
LIGHTNING MODEL ランダムレーンチケット HOWTO
================================================================================================================
*/
ul#ramdom,
ul#ramdom > li > ul{display:flex; flex-wrap:wrap; background-color:#fff; color:#000; border:1px solid #000; border-right:none; border-bottom:none;}
ul#ramdom{max-width:640px; margin:10px auto;}
ul#ramdom li{text-align:left; padding:3px 5px;}
ul#ramdom li:nth-child(odd){font-weight:bold;}
ul#ramdom > li:nth-child(odd){width:250px; background-color:#ffa300;}
ul#ramdom > li:nth-child(even){width:calc(100% - 250px);}
ul#ramdom > li > ul{max-width:380px; margin:5px auto 5px 0;}
ul#ramdom > li > ul > li:nth-child(odd){width:80px; background-color:#ccc;}
ul#ramdom > li > ul > li:nth-child(even){width:calc(100% - 80px);}

ul#ramdom li:first-child,
ul#ramdom li + li{border-right:1px solid #000;}
ul#ramdom li{border-bottom:1px solid #000;}
@media screen and (max-width:680px){
ul#ramdom > li:nth-child(odd),
ul#ramdom > li:nth-child(even){width:100%;}}
@media screen and (max-width:480px){
ul#ramdom > li > ul > li:nth-child(odd),
ul#ramdom > li > ul > li:nth-child(even){width:100%;}}

/*
================================================================================================================
アシスタント機能
================================================================================================================
*/
ul#assistant{display:flex; color:#000; background:#fff; border:1px solid; flex-wrap:wrap;}
ul#assistant img{width:100%;}
ul#assistant > li{padding:5px; border-top:1px solid;}
ul#assistant > li > p{display:flex; width:100%; height:100%; align-items:center;}
ul#assistant > li:nth-child(odd){width:150px; border-right:1px solid #000;}
ul#assistant > li:nth-child(even){width:calc(100% - 150px);}

ul#assistant > li:nth-child(1),
ul#assistant > li:nth-child(2){color:#fff; background:#444; font-weight:bold; text-align:center; border-top:none;}
ul#assistant > li:nth-child(1) > p,
ul#assistant > li:nth-child(2) > p{justify-content:center;}

@media screen and (max-width:480px){
ul#assistant > li:nth-child(odd){width:100px;}
ul#assistant > li:nth-child(even){width:calc(100% - 100px);}}

/*
================================================================================================================
カジュアル大会機能
================================================================================================================
*/
ul#taikai{display:flex; color:#000; background:#fff; border:1px solid; border-top:none; flex-wrap:wrap; margin:10px auto;}
ul#taikai > li{border-top:1px solid;}
ul#taikai > li > p{display:flex; width:100%; height:100%; align-items:center; padding:5px;}
ul#taikai > li:nth-child(odd){width:130px; font-weight:bold; border-right:1px solid; background:#ccc;}
ul#taikai > li:nth-child(even){width:calc(100% - 130px);}

@media screen and (max-width:640px){
ul#taikai > li{width:100% !important;}
ul#taikai > li:nth-child(odd){border-right:none;}}