@charset "utf-8";

#contents::after{content:''; position:fixed; top:0; left:0; width:100vw; height:100%; background:url(/img/system/sp/bg.jpg) center top no-repeat; background-size:100% auto; z-index:-1;}

.pagetitle{position:relative; height:calc(76/640*100vw); margin:calc(57/640*100vw) 0 calc(77/640*100vw); background:url(/img/system/sp/title.png) center no-repeat; background-size:auto 100%; text-indent:200%; z-index:10;}

nav.category{display:flex; flex-wrap:wrap; justify-content:center; position:relative; margin:0 16.719vw calc(41/640*100vw); z-index:10;}
/*nav.category label{width:calc(194/640*100vw); height:calc(42/640*100vw); margin:0 calc(8.5/640*100vw) 2.969vw; font-size:0; background:url(/img/system/nav_category.png) left top no-repeat; background-size:99.844vw auto; cursor:pointer;}*/


nav.category label{width:calc(194/640*100vw); height:calc(42/640*100vw); margin:0 calc(8.5/640*100vw) 2.969vw; font-size:0; background:url(/img/system/nav_category01.png) no-repeat left top / 100% auto; cursor:pointer;}
nav.category label[data-label*='育成']{background-image:url(/img/system/nav_category02.png); background-position:left calc(0/640*100vw);}
nav.category label[data-label*='シナリオ']{background-image:url(/img/system/nav_category03.png); background-position:left calc(0/640*100vw);}
























#bt,#tr,#sc{position:fixed; left:-9999px;}
#bt:checked ~ nav.category label[data-label*='戦闘']{background-position:left calc(-50/640*100vw); pointer-events:none;}
#tr:checked ~ nav.category label[data-label*='育成']{background-position:left calc(-50/640*100vw); pointer-events:none;}
#sc:checked ~ nav.category label[data-label*='シナリオ']{background-position:left calc(-50/640*100vw); pointer-events:none;}

#battle,
#training,
#scenario{opacity:0; position:fixed; left:-9999px; width:100vw; transition:opacity 0.6s;}
#bt:checked ~ main #battle{display:block; opacity:1; left:0; position:static;}
#tr:checked ~ main #training{display:block; opacity:1; left:0; position:static;}
#sc:checked ~ main #scenario{display:block; opacity:1; left:0; position:static;}

main h3 {height:calc(93/640*100vw); background:url(/img/system/sp/h3.png) center top no-repeat; background-size: 100vw auto; margin-bottom:2.5vw;}
main #battle .slide02 h3 {background-position:0 calc(-100/640*100vw);}
main #battle .slide03 h3 {background-position:0 calc(-200/640*100vw);}
main #training .slide01 h3 {background-position:0 calc(-300/640*100vw);}
main #training .slide02 h3 {background-position:0 calc(-400/640*100vw);}
main #training .slide03 h3 {background-position:0 calc(-500/640*100vw);}
main #scenario .slide01 h3 {background-position:0 calc(-600/640*100vw);}

main .swiper-slide a {pointer-events: none; display: block; position: relative; width: calc(580/640*100vw); margin: 0 auto calc(30/640*100vw);}
main .swiper-slide a::after{content: ''; width: 100%; height: 100%; border: 1px solid #ffd053; position: absolute; left: 0; top: 0;}
main .swiper-slide p {font-size: calc(24/640*100vw); line-height: calc(35/640*100vw); color: #fff; letter-spacing: 0.2em; background: #222d41; padding: calc(22/640*100vw) 0; text-shadow: 0 0 7px #06c7ff,0 0 7px #06c7ff;}
main .swiper-slide p.long {letter-spacing: 0.13em;}
main .swiper-container {width: 100vw; padding: 0 0 calc(154/640*100vw);}
main .swiper-pagination {font-size: calc(20/640*100vw); color: #96d2f0; padding: 0; line-height: calc(67/640*100vw); width: 100vw; position: absolute; left: 0; bottom: calc(50/640*100vw);}
main .swiper-button-prev {position: absolute; left: calc(30/640*100vw); bottom: calc(50/640*100vw); background:url(/img/cmn/btn_prev.png) left top no-repeat; background-size: calc(71/640*100vw) calc(67/640*100vw); height: calc(67/640*100vw); width: calc(71/640*100vw); top: inherit;}
main .swiper-button-next {position: absolute; right: calc(30/640*100vw); bottom: calc(50/640*100vw); background:url(/img/cmn/btn_next.png) left top no-repeat; background-size: calc(71/640*100vw) calc(67/640*100vw); height: calc(67/640*100vw); width: calc(71/640*100vw); top: inherit;}
main .swiper-button-disabled {opacity: 0 !important;}



@media screen and (min-width:641px){
/* 

    PC
    
***********************************************************************************/

#contents,
#wrapper{min-height:100vh;}


#contents::after{background:url(/img/system/bg.png) center top no-repeat; background-size:cover; position:fixed; left:0; top:0; z-index:-1;}

.pagetitle{height:76px; margin:127px 0 20px; background:url(/img/system/title.png) center top no-repeat;}

nav.category{margin-bottom:24px;}
nav.category label{background:url(/img/system/nav_category01.png) no-repeat -1px top; width:194px; height:42px; margin:0 8.5px;transition:filter 0.3s; backface-visibility:hidden;}
nav.category label:hover{filter:brightness(1.4);}
nav.category label[data-label*='育成']{background-position:left top;}
nav.category label[data-label*='シナリオ']{background-position:-1px top;}
#bt:checked ~ nav.category label[data-label*='戦闘']{background-position:-1px -50px; pointer-events:none;}
#tr:checked ~ nav.category label[data-label*='育成']{background-position:-1px -50px; pointer-events:none;}
#sc:checked ~ nav.category label[data-label*='シナリオ']{background-position:-1px -50px; pointer-events:none;}

main{padding-bottom:0;}

#battle,
#training,
#scenario{width: 1126px;}

main h3{height:90px; background:url(/img/system/h3.png) center top no-repeat; background-size:auto 700px; margin-bottom:10px;}
main #battle .slide02 h3 {background-position: center -100px;}
main #battle .slide03 h3 {background-position: center -200px;}
main #training .slide01 h3 {background-position: center -300px;}
main #training .slide02 h3 {background-position: center -400px;}
main #training .slide03 h3 {background-position: center -500px;}
main #scenario .slide01 h3 {background-position: center -600px;}

main .swiper-slide a {pointer-events: auto;}
main .swiper-container {width: 1126px; padding-bottom: 120px;}
main .swiper-slide a {width: 714px; margin: 0 auto 0; pointer-events: auto;}
main .swiper-slide a::before{content: ''; background: url(/img/cmn/btn_zoom.png) left top no-repeat; position: absolute; right: -7px; bottom: -7px; width: 63px; height: 63px;}
main .swiper-slide p {font-size: 20px; line-height: 32px; background:none; padding:0 0; text-shadow: 0 0 12px #06c7ff,0 0 12px #06c7ff; display: flex; justify-content: center; align-items: center; align-content: center; position: relative; height: 94px}
main .swiper-slide p::after{content: ''; background: url(/img/system/bg_text.png) center top no-repeat; height: 101px; position: absolute; left: 50%; top: -6px; z-index: -1; width: 1200px; margin-left: -600px;}
main .swiper-slide p span {padding: 15px 0;}
main .swiper-slide a {transition: 0.5s;}
main .swiper-slide a:hover {backface-visibility: hidden; filter: brightness(1.2);}
main .swiper-pagination {font-size: 17px; line-height: 67px; bottom: 50px; width: 100%;}
main .swiper-button-prev {left: 49px; bottom:inherit; background-size: auto; height: 67px; width:71px; top: 280px; transition: 0.5s;}
main .swiper-button-next {right:49px; bottom:inherit; background-size: auto; height: 67px; width:71px; top: 280px; transition: 0.5s;}
main .swiper-button-prev:hover,
main .swiper-button-next:hover {filter: brightness(1.2);}


}
@media screen and (max-width:1920px) and (min-width:1401px){


}
@media screen and (min-width:1921px){

}