/*
================================================================================================================
汎用
================================================================================================================
*/
.small{font-size:12px;}
@media screen and (max-width:480px){.small{font-size:11px;}}

/*リスト関連*/
ul.list{width:100%; text-align:left; margin:0 auto;}
ul.list > li{display:block; position:relative; padding-left:18px; line-height:150%;}
ul.list > li + li{margin-top:5px;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}
ul.list > li > a{color:#ff6a7a; text-decoration:underline;}
ul.list > li > a:hover{text-decoration:none;}

ul.list.ast{font-family:'Noto Sans JP', sans-serif;}

ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#fff; border-radius:50%;}
ul.list.ast > li::before{content:"※";}

ul.list.num > li:first-child::before{content:"1.";}
ul.list.num > li:nth-child(2)::before{content:"2.";}
ul.list.num > li:nth-child(3)::before{content:"3.";}
ul.list.num > li:nth-child(4)::before{content:"4.";}
ul.list.num > li:nth-child(5)::before{content:"5.";}
ul.list.num > li:nth-child(6)::before{content:"6.";}

ul.list.ast.small > li{padding-left:14px; font-weight:500;}

ul.list.dot > li > a{color:#e26086; transition:all .2s ease;}
ul.list.dot > li > a:hover{color:#df0031; text-decoration:underline;}

ul.list.box{background:#181818; padding:20px; margin:20px auto;}
@media screen and (max-width:480px){ul.list.box{padding:10px;}}

/*
================================================================================================================
ロケテスト
================================================================================================================
*/
.info,#info{
position:relative;
width:96%;
max-width:1300px;
font-family:'Noto Sans JP', sans-serif;
margin:40px auto;
z-index:5;}

/*
=========================
見出し
=========================
*/
.title{display:flex; position:relative; width:100%; text-align:center; margin:80px auto 10px; filter:drop-shadow(0 0 4px #d6981d) drop-shadow(0 0 4px #000); transform:translateZ(0);}
.title p{height:110px; background-size:auto 100%; background-size:auto 100%;}
.title p:nth-child(1){width:360px; background-image:url(../img/title/bar_left.png);}
.title p:nth-child(2){width:calc(100% - 720px); background-image:url(../img/title/bar_bg.png);}
.title p:nth-child(3){width:360px; background-image:url(../img/title/bar_right.png); background-position:right;}
.title > div{position:absolute; left:0; top:25px; width:100%;}
.title > div img{width:280px; min-width:280px;}
@media screen and (max-width:640px){
.title{margin:50px auto 10px;}
.title p{height:70px;}
.title p:nth-child(1){width:230px;}
.title p:nth-child(2){width:calc(100% - 460px);}
.title p:nth-child(3){width:230px;}
.title > div{top:16px;}
.title > div img{width:200px; min-width:200px;}}
@media screen and (max-width:480px){
.title{margin:30px auto 5px;}
.title p{height:50px;}
.title p:nth-child(1){width:165px;}
.title p:nth-child(2){width:calc(100% - 230px);}
.title p:nth-child(3){width:165px;}
.title > div{top:9px;}
.title > div img{width:160px; min-width:160px;}}

/*
=========================
マップ リンク
=========================
*/
a.map{display:block; width:70px; margin:20px auto 0; filter:drop-shadow(0 0 5px #000) drop-shadow(0 0 5px #000);}
a.map img{transition:all .2s ease;}
a.map:hover img{filter:brightness(200%) invert(50%) brightness(200%);}

/*
================================================================================================================
カード紹介
================================================================================================================
*/
.card{position:relative;}
.card > strong{
display:flex !important;
width:100%;
min-height:110px;
text-align:center;
margin:0 auto !important;
justify-content:center;
align-items:center;
pointer-events:none;}
@media screen and (max-width:1200px){.card > strong{font-size:18px !important;}}
@media screen and (max-width:800px){.card > strong{min-height:95px; font-size:16px !important;}}
@media screen and (max-width:480px){
.card > strong{font-size:14px !important;}
.card.battle > strong{min-height:70px; padding-top:5px; align-items:flex-start;}
.card.support > strong{min-height:unset; margin:0 auto 10px !important;}}
@media screen and (max-width:370px){.card > strong{text-align:left; padding-right:70px;}}

.card > strong .br-sp{display:none;}
@media screen and (max-width:680px){.card > strong .br-sp{display:block;}}
@media screen and (max-width:370px){.card > strong .br-sp,br{display:none;}}

/*切り替えボタン*/
.tab{position:absolute; top:0; right:0;}
@media screen and (max-width:520px){.tab{top:-10px; right:-10px;}}
@media screen and (max-width:480px){.tab{top:-15px; right:-5px;}}

.tab > ul > li{
display:block;
position:relative;
width:40px;
aspect-ratio:1 / 1.4;
background:linear-gradient(to bottom,  #d59d1a 0%,#a27201 100%);
border-radius:5px;
box-shadow:0 0 4px #000;
cursor:pointer;
transition:all .2s ease;}
.tab > ul > li.select{z-index:2; pointer-events:none;}
.tab > ul > li:nth-child(1){margin-left:-30px;}
.tab > ul > li:nth-child(2){margin-top:-10px;}
@media screen and (max-width:800px){.tab > ul > li{width:35px;}}
@media screen and (max-width:480px){
.tab > ul > li{width:30px;}
.tab > ul > li:nth-child(1){margin-left:-20px;}}

.tab > ul > li:not(.select){filter:grayscale(100%); opacity:.8; z-index:1;}
.tab > ul > li::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../img/card_btn01.png);
background-size:50% auto;
background-position:center;
background-repeat:no-repeat;}
.tab > ul > li:nth-child(2)::before{background-image:url(../img/card_btn02.png);}
@media screen and (max-width:480px){.tab > ul > li::before{background-size:70% auto;}}

/*カードメインエリア*/
.no-show{display:none;}
.tab-inner > ul{display:flex; position:relative; max-width:1100px; flex-wrap:wrap; justify-content:center; margin:0 auto;}
.tab-inner > ul::after{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%;}
.tab-inner > ul > li{margin:15px 0;}
.tab-inner > ul > li img{filter:drop-shadow(0 0 2px rgba(0,0,0,.4)) drop-shadow(0 0 3px rgba(0,0,0,.7)); transform:translateZ(0); pointer-events:none;}
@media screen and (max-width:480px){.tab-inner > ul > li{margin:5px 0;}}

/*バトルカード*/
.battle .tab-inner > ul > li{width:calc((100% / 3) - 20px);}
@media screen and (min-width:701px){.battle .tab-inner > ul > li:nth-child(3n - 1){margin:15px 30px;}}
@media screen and (max-width:700px){
.battle .tab-inner > ul > li{width:calc(50% - 15px);}
.battle .tab-inner > ul > li:nth-child(even){margin-left:30px;}}
@media screen and (max-width:480px){
.battle .tab-inner > ul > li{width:calc(50% - 5px);}
.battle .tab-inner > ul > li:nth-child(even){margin-left:10px;}}
@media screen and (max-width:420px){
.battle .tab-inner > ul{width:70%; max-width:210px;}
.battle .tab-inner > ul > li{width:100%;}
.battle .tab-inner > ul > li:nth-child(even){margin-left:0;}}

/*サポートカード*/
@media screen and (min-width:701px){
.support .tab-inner > ul > li{width:calc((100% / 2) - 15px);}
.support .tab-inner > ul > li:nth-child(even){margin-left:30px;}}
@media screen and (max-width:700px){
.support .tab-inner > ul{width:70%; max-width:400px;}
.support .tab-inner > ul > li{width:100%;}}
@media screen and (max-width:420px){
.support .tab-inner > ul{width:100%; max-width:300px;}}

/*
================================================================================================================
フレーム
================================================================================================================
*/
.frame,
.frame > *,
.frame > * > *{position:relative; width:100%; height:100%;}

.frame{
color:#fff;
background-color:#242424;
background-image: url(../img/frame/bg02.png) , url(../img/frame/bg01.png);
background-repeat:repeat-x , repeat;
background-position:top , bottom;
background-size:auto 120% , auto;
border-radius:50px;
text-shadow:0 0 4px #000,0 0 4px #000;
margin:0 auto;
filter:drop-shadow(0 0 4px #000);
transform:translateZ(0);}
@media screen and (max-width:480px){.frame{background-size:auto 120% , 50px auto;}}

.frame > .frame-border > .inner{text-align:center; line-height:150%; padding:50px; z-index:5;}
.frame > .frame-border > .inner > .min-height{display:flex; min-height:150px; align-items:center; justify-content:center;}
@media screen and (max-width:800px){.frame > .frame-border > .inner{font-size:14px; padding:30px;}}
@media screen and (max-width:480px){.frame > .frame-border > .inner{padding:30px 20px;}}
@media screen and (max-width:420px){.frame > .frame-border > .inner{font-size:12px;}}

.frame > .frame-border > .inner strong{display:block; color:#d59d1a; font-size:26px; font-weight:700; line-height:150%; margin:0 auto 20px;}
@media screen and (max-width:480px){.frame > .frame-border > .inner strong{font-size:18px;}}
@media screen and (max-width:370px){.frame > .frame-border > .inner strong{font-size:16px;}}

/*
=========================
装飾
=========================
*/
.frame::before,
.frame::after,
.frame > *::before,
.frame > *::after,
.frame > * > *::before{display:block; content:""; position:absolute; pointer-events:none;}

/*上下ボーダー*/
.frame::before{
top:0;
left:30px;
width:calc(100% - 60px);
height:100%;
background-image:url(../img/frame/border/01.png) , url(../img/frame/border/03.png);
background-repeat:repeat-x , repeat-x;
background-position:top , bottom;
background-size:auto , auto;}
/*左右グラデ*/
.frame::after{
top:30px;
left:0;
width:10px;
height:calc(100% - 60px);
background:linear-gradient(to bottom, #bfb56a 0%,#885b35 50%,#9b8637 100%);
z-index:2;}
.frame > .frame-border::before{
top:30px;
right:0;
width:9px;
height:calc(100% - 60px);
background:linear-gradient(to bottom, #bfb56a 0%,#885b35 50%,#9b8637 100%);
z-index:2;}
/*左右ボーダー*/
.frame > .frame-border::after{
top:30px;
left:0;
width:100%;
height:calc(100% - 60px);
background-image:url(../img/frame/border/02.png) , url(../img/frame/border/04.png);
background-repeat:repeat-y , repeat-y;
background-position:right , left;
z-index:3;}
/*角丸*/
.frame > .frame-border > .inner::before{
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../img/frame/radius/01.png) , url(../img/frame/radius/02.png) , url(../img/frame/radius/03.png) , url(../img/frame/radius/04.png);
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
background-position:top left , top right , bottom right , bottom left;
z-index:4;}