/*
================================================================================================================
オレカバトルトーナメント
================================================================================================================
*/
#top{
width:calc(100% + 40px);
aspect-ratio:12/8;
background-image:url(../img/tournament/top.webp);
background-size:100% auto;
margin:-12% auto 0 -20px;}
@media screen and (max-width:640px){#top{width:calc(100% + 20px); margin:-10% auto 0 -10px;}}

/*入れ子調整*/
.box{margin-top:-15%;}

/*大見出し*/
.title.big p{color:#f6f0cd; font-family:"RocknRoll One", sans-serif; font-size:24px; font-weight:bold; padding:0 0 5px}
.title.big,.title.big p{filter:drop-shadow(1px 1px 0 #3d3100) drop-shadow(-1px -1px 0 #3d3100) drop-shadow(-1px 1px 0 #3d3100) drop-shadow(1px -1px 0 #3d3100) drop-shadow(2px 2px 0 #000);}
@media screen and (max-width:640px){.title.big p{font-size:20px;}}
@media screen and (max-width:480px){.title.big p{font-size:18px;}}
@media screen and (max-width:370px){.title.big p{font-size:16px;}}

.rule{
background:rgba(255,0,0,.2);
border:3px solid #f00;
border-radius:10px;
padding:10px;
margin:20px auto;}
.rule + .rule{margin-top:0;}
.red{color:#a10000}
.center{display:block; text-align:center;}
@media screen and (max-width:500px){.center{text-align:left;}}

/*参加資格*/
ul.grade{display:flex; flex-wrap:wrap; align-items:center; border:1px solid #888; border-radius:5px; padding:10px; margin:20px auto 0;}
ul.grade > li{padding:5px; font-weight:bold;}
ul.grade > li:nth-child(odd){width:200px;}
ul.grade > li:nth-child(even){width:calc(100% - 200px);}
ul.grade > li img{display:block; width:100%; max-width:200px; margin:0 auto;}
ul.grade > li .ast{font-weight:normal;}
@media screen and (max-width:550px){ul.grade > li{width:100% !important;}}

/*優勝特典*/
img.card{display:block; width:80%; max-width:500px; margin:20px auto 0;}

/*参加特典*/
.benefit{font-weight:bold; text-align:center; border:1px solid #888; border-radius:5px; padding:10px; margin:20px auto 10px;}
.benefit > p{width:100%; background:#d5c79d; border-radius:5px; margin:0 auto 10px;}
.benefit ul{display:flex;}
.benefit ul > li{width:25%;}
.benefit ul > li > img{display:block; width:70%; border-radius:10px; margin:0 auto;}
@media screen and (max-width:480px){.benefit ul > li > img{width:96%;}}

/*
================================================================================================================
開催店舗リスト
================================================================================================================
*/
#shop-list{border:1px solid;}
#shop-list > ul{display:flex; background:#fff;}
#shop-list > ul + ul{border-top:1px solid;}
#shop-list > ul > li{display:flex; font-size:13px; text-align:center; padding:5px; align-items:center; justify-content:center;}
#shop-list > ul > li img{display:block; width:100%; max-width:140px; margin:0 auto;}

#shop-list > ul > li:nth-child(1),
#shop-list > ul > li:nth-child(5){width:140px;}
#shop-list > ul > li:nth-child(2),
#shop-list > ul > li:nth-child(3){width:50px;}
#shop-list > ul > li:nth-child(6){width:60px;}
#shop-list > ul > li:nth-child(4){width:calc(100% - 440px); line-height:140%; text-align:left; justify-content:flex-start;}
#shop-list > ul > li:nth-child(4) > ul{font-size:11px;}
#shop-list > ul > li:nth-child(4) > ul > li:nth-child(1){font-size:14px; font-weight:bold;}

@media screen and (min-width:801px){#shop-list > ul > li + li{border-left:1px solid;}}
@media screen and (max-width:800px){
#shop-list > ul{flex-wrap:wrap;}
#shop-list > ul:nth-child(2){border-top:none;}
#shop-list > ul > li{font-size:12px;}
#shop-list > ul > li:nth-child(1){width:140px; font-weight:bold;}
#shop-list > ul > li:nth-child(2),
#shop-list > ul > li:nth-child(3),
#shop-list > ul > li:nth-child(6){width:calc((100% - 140px) / 3 );}
#shop-list > ul > li:nth-child(4),
#shop-list > ul > li:nth-child(5){width:100%;}
#shop-list > ul > li:nth-child(1){order:1;}
#shop-list > ul > li:nth-child(2){order:2;}
#shop-list > ul > li:nth-child(3){order:3;}
#shop-list > ul > li:nth-child(4){order:5; border-top:1px dotted #888; border-bottom:1px dotted #888;}
#shop-list > ul > li:nth-child(5){order:6;}
#shop-list > ul > li:nth-child(6){order:4;}
#shop-list > ul > li:nth-child(2)::before{content:"受付時間："; font-size:11px;}
#shop-list > ul > li:nth-child(3)::before{content:"開始時間："; font-size:11px;}}
@media screen and (min-width:561px) and (max-width:800px){
#shop-list > ul > li:nth-child(1),
#shop-list > ul > li:nth-child(2),
#shop-list > ul > li:nth-child(3),
#shop-list > ul > li:nth-child(6){background:#98cbff;}}
@media screen and (max-width:560px){
#shop-list > ul > li:nth-child(1){width:100%; background:#98cbff;}
#shop-list > ul > li:nth-child(2),
#shop-list > ul > li:nth-child(3){width:calc(50% - 30px);}
#shop-list > ul > li:nth-child(6){width:60px;}
#shop-list > ul > li:nth-child(4) > ul > li:nth-child(1){font-size:12px;}
#shop-list > ul > li img{max-width:100px;}}

#shop-list ul.head li{background:#008aff; font-size:12px; font-weight:bold; text-align:center !important; justify-content:center !important; padding:5px 0;}
@media screen and (max-width:800px){#shop-list ul.head li{display:none;}}