#main-inner{font-family:"Yuji Syuku", serif;}

#card p.mes{color:#fff;}

/*
================================================================================================================
カードテーブル
================================================================================================================
*/
.card_table{width:98%;margin:0 auto;display:flex;flex-wrap:wrap;}
/*縦*/
.card_table.battle{max-width:1280px;}
/*横*/
.card_table.support{max-width:1600px;}

/*一覧サムネイル*/
.card_table .thumb{position:relative;width:calc(25% - 10px);margin:0 5px 20px;cursor:pointer;}
.card_table .thumb a.popup{position:absolute;z-index:2000;top:0;bottom:0;left:0;right:0;}
.card_table .thumb.card0{filter:brightness(40%);pointer-events:none;}
.card_table .thumb.card0 a{cursor:auto;}

.cardset{width:100%;transition:.2s ease-in;}
.cardset ul.card{position:relative;display:flex;justify-content:center;align-items:center;}
.cardset ul.card li{z-index:1;}
.cardset ul.card li.front{position:absolute;top:0;left:0;z-index:100;}
.card_table .thumb:hover .cardset{filter:brightness(120%);}

/*.cardset ul.card li:not([class]){margin-left:-100%;}*/

@media screen and (max-width:979px){.card_table .thumb{width:calc((100% / 3) - 10px);}}
@media screen and (max-width:699px){.card_table .thumb{width:calc(50% - 10px);}}
@media screen and (max-width:480px){}
@media screen and (max-width:320px){}

/*
================================================================================================================
バッジ表示
================================================================================================================
*/
ul.badge{width:100%;margin:0 auto;display:flex;justify-content:center;align-items:center;}
ul.badge li{aspect-ratio:11 / 12;position:relative;background-position:center top;background-repeat:no-repeat;}
ul.badge li.level,ul.badge li.heart-icn{width:22%;}
ul.badge li.slot1,ul.badge li.slot2{width:28%;}

ul.badge li.level{background-size:100% auto;background-image:url(../img/card/level_bg.webp);}
ul.badge li.level .level-num,
ul.badge li.heart-icn .heart-num{
position:absolute;
left:50%;
transform:translateX(-50%);
width:100%;
line-height:normal;
font-weight:bold;
font-size:clamp(1rem, 0.9091vw + 0.8182rem, 1.5rem);
text-align:center;
letter-spacing:-2px;
z-index:4;}
ul.badge li.level .level-num p,
ul.badge li.heart-icn .heart-num p{
background:linear-gradient(90deg, #fff77b, #ff9600);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 1px #000) drop-shadow(1px 1px 1px #000) drop-shadow(-1px -1px 1px #000) drop-shadow(1px -1px 1px #000) drop-shadow(-1px 1px 1px #000);}

ul.badge li.level .level-num{bottom:25%;} 
ul.badge li.level .gauge{position:absolute;bottom:-5%;width:100%;height:20px;background-color:#4a4a4a;mask-image:url(../img/card/level_mask.webp);mask-size:100% auto;mask-position:bottom;mask-repeat:no-repeat;}
ul.badge li.level .gauge p{height:100%;background-image:linear-gradient(90deg, #fff77b, #ff9600);}

ul.badge li.heart-icn{background-size:90% auto;background-image:url(../img/mypage/profile/icn/heart.png);}
ul.badge li.heart-icn .heart-num{bottom:-3%;}    

ul.badge li.slot1::before,
ul.badge li.slot2::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:100% auto;}

.card_table.support ul.badge > li.level,
.card_table.support ul.badge > li.heart-icn{display:none;}

/*バッジフレーム*/        
ul.badge li.battle01::before{background-image:url(../img/mypage/badge/battle01.webp);}
ul.badge li.battle02::before{background-image:url(../img/mypage/badge/battle02.webp);}
ul.badge li.support01::before{background-image:url(../img/mypage/badge/support01.webp);}
ul.badge li.support02::before{background-image:url(../img/mypage/badge/support02.webp);}
/*.card_table .thumb.card0 ul.badge li,
.card_table .thumb.card1 ul.badge li.slot1,
.card_table .thumb.card1 ul.badge li.slot2,
.card_table .thumb.card2 ul.badge li.slot2{filter:brightness(40%);}*/
ul.badge li.no_badge{filter:brightness(40%);}/*バッジを伏せている状態*/

/*
================================================================================================================
カードPOP
================================================================================================================
*/
.mfp-content .cardset.battle{max-width:900px;margin:0 auto;}

.mfp-content .cardset ul.card{justify-content:space-evenly;}
.mfp-content .cardset ul.card li{position:static;width:calc(50% - 20px);margin:0;}
.mfp-content .cardset ul.card li p{width:100%;height:80px;}
.mfp-content .cardset ul.card li p img{width:auto;height:100%;}
.mfp-content .guide{display:none;}

.mfp-content .cardset ul.badge{font-family:"Yuji Syuku", serif; max-width:500px;}
.mfp-content .cardset ul.badge li.level .level-num,
.mfp-content .cardset ul.badge li.heart-icn .heart-num{font-size:clamp(1.25rem, 1.9887vw + 0.8523rem, 2.3438rem);}
.mfp-content .cardset ul.badge li.level .level-num{/*bottom:15%;*/ bottom:25%;}
.mfp-content .cardset ul.badge li.heart-icn .heart-num{bottom:-20%;}

.mfp-content .cardset.support li.level,
.mfp-content .cardset.support li.heart-icn{display:none;}

@media screen and (max-width:799px){
.mfp-content .cardset ul.card{justify-content:center;}
.mfp-content .cardset.battle{max-width:400px;}
.mfp-content .cardset.support{max-width:600px;}
.mfp-content .cardset ul.card li{width:100%;cursor:pointer;}
.mfp-content .cardset ul.card li.front{position:absolute;top:0;left:0;z-index:100;}
.mfp-content .guide{
display:block;
position:absolute;
bottom:-30px;
left:50%;
transform:translateX(-50%);    
width:fit-content;
font-family:"Yuji Syuku", serif;
font-weight:bold;
font-size:clamp(1rem, 1.25vw + 0.75rem, 1.375rem);
white-space:nowrap;
background:linear-gradient(90deg, #fff77b, #ff9600);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 1px #000) drop-shadow(1px 1px 1px #000) drop-shadow(-1px -1px 1px #000) drop-shadow(1px -1px 1px #000) drop-shadow(-1px 1px 1px #000);}
}
@media screen and (max-width:320px){
.mfp-content .cardset ul.card li p{height:50px;}
}

/*
================================================================================================================
.magnificPopupカスタム
================================================================================================================
*/
.mfp-wrap img{width:100%;}
.mfp-inline-holder .mfp-content{width:calc(100% - 160px);}

button.mfp-close, button.mfp-arrow{z-index:99998 !important;transition:.2s ease-in;}

button.mfp-arrow{background-size:contain;background-position:center;background-repeat:no-repeat;}
button.mfp-arrow::before,button.mfp-arrow::after{border:none;}
button.mfp-arrow-left{background-image:url(../img/card/pop_prev.webp);}
button.mfp-arrow-right{background-image:url(../img/card/pop_next.webp);}

button.mfp-close{
position:fixed; /* スクロールしても追従させる場合はfixed、画面内固定ならabsolute */
top:20px !important;
right:20px !important;
width:60px;
height:85px;
text-indent:100%;white-space:nowrap;overflow:hidden;
background-size:auto 100%;background-position:center;background-repeat:no-repeat;background-image:url(../img/card/pop_close.webp);}

@media screen and (max-width:899px){
.mfp-inline-holder .mfp-content{width:calc(100% - 90px);overflow:visible;}
button.mfp-arrow{width:50px;}
button.mfp-close{width:50px;height:70px;top:-70px;}
}
@media screen and (max-width:320px){
.mfp-inline-holder .mfp-content{width:calc(100% - 80px);}
button.mfp-arrow{width:40px;}
}

ul.badge.card0 li,
ul.badge.card1 li.slot1,
ul.badge.card1 li.slot2,
ul.badge.card2 li.slot2{filter:brightness(40%);}

.mes{
width:100% !important;
background:rgba(0, 0, 0, .6);
font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
text-align:center;
padding:40px 10px;
margin:20px auto;
color:#fff;}