@charset "utf-8";

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

.pagetitle{position:relative; height:calc(74/640*100vw); margin:calc(57/640*100vw) 0 calc(44/640*100vw); text-indent:200%; background:url(/img/character/title.png) center no-repeat; background-size:auto 100%; z-index:100;}
nav.category{display:flex; position:relative; z-index:10; justify-content:center; margin-bottom:calc(40/640*100vw);}
nav.category a{background:url(/img/news/sp/nav_category.png) left top no-repeat; background-size:calc(582/640*100vw) auto; width:calc(135/640*100vw); height:calc(38/640*100vw); margin:0 calc(7.5/640*100vw); font-size:0;}

.mainslide .swiper-container{width:120vw; overflow:visible; position:relative; left:-10vw;}
.mainslide .swiper-container .swiper-slide{opacity:0; transform:scale(0.7) translateY(-35vw); transition:transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 0.6s; z-index:10; height:151.5vw; font-size:50px; text-align:left;}
.mainslide .swiper-container .swiper-slide img{opacity:0;}

.mainslide .swiper-slide.swiper-slide-prev{opacity:1; transform:scale(0.7); z-index:20;}
.mainslide .swiper-slide.swiper-slide-next{opacity:1; transform:scale(0.7); z-index:20;}

.mainslide .swiper-slide.swiper-slide-duplicate-active,
.mainslide .swiper-slide.swiper-slide-active{opacity:1; transform:scale(1); z-index:30; transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 0.6s;}

.mainslide .swiper-slide.swiper-slide-duplicate-active::before,
.mainslide .swiper-slide.swiper-slide-active::before{-webkit-filter:drop-shadow(0 0 13px rgba(6,199,255,1)); filter:drop-shadow(0 0 13px rgba(6,199,255,1)),;}
/*非公開キャラ 白シャドウ*/




.mainslide .swiper-slide.swiper-slide-duplicate-next,
.mainslide .swiper-slide.swiper-slide-duplicate-prev,
.mainslide .swiper-slide.swiper-slide-prev{opacity:1; transform:scale(0.7) translateY(-35vw); z-index:20;}
.mainslide .swiper-slide.swiper-slide-next{opacity:1; transform:scale(0.7) translateY(-35vw); z-index:20;}

main .mainslide .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 .mainslide .swiper-button-prev {position: absolute; left: calc(92/640*100vw); bottom: calc(500/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 .mainslide .swiper-button-next {position: absolute; right: calc(92/640*100vw); bottom: calc(500/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 .mainslide .swiper-button-disabled {opacity: 0 !important;}

.profile {position: absolute; left: calc(30/640*100vw); bottom:calc(80/640*100vw); z-index: 100; width: calc(580/640*100vw); overflow: hidden; text-align: left; transition:opacity 0.5s ease-out;}
.profile.sacred {opacity:0;}

.profile .swiper-container{ width: calc(580/640*100vw); background: url(/img/character/profile.png) left top no-repeat,url(/img/character/bg_profile.png) center top no-repeat; background-size:100% auto,cover;}
.profile .swiper-container::after{content: ''; background: #5a6471; height: 1px; width: calc(520/640*100vw); position: absolute; left: calc(30/640*100vw); top: 0; z-index: 100;}
.profile .swiper-container::before{content: ''; background: #5a6471; height: 1px; width: calc(520/640*100vw); position: absolute; left: calc(30/640*100vw); bottom: 0;}

.profile .profile_window {opacity: 0 !important;}
.profile .profile_window.swiper-slide-active {opacity: 1 !important;}

.profile .profile_window div{padding-bottom:calc(45/640*100vw);}
.profile::after{content: ''; width: calc(20/640*100vw); height: 1px; position: absolute; left: 1px; bottom: 0; background: #fff; z-index: 100;}
.profile::before{content: ''; width: calc(20/640*100vw); height: 1px; position: absolute; right: 1px; bottom: 0; background: #fff; z-index: 100;}
.profile .title{position: relative; z-index: 100;}
.profile .title::after{content: ''; width: calc(20/640*100vw); height: 1px; position: absolute; left: 1px; top: 0; background: #fff;}
.profile .title::before{content: ''; width: calc(20/640*100vw); height: 1px; position: absolute; right: 1px; top: 0; background: #fff;}

.profile .profile_window h2{position: relative; padding-top: calc(48/640*100vw);}
.profile .profile_window h2 img {width: 100%; height: auto;}
.profile .profile_window p{margin-bottom:calc(30/640*100vw);}
.profile .profile_window p img {width: 100%; height: auto;}
.profile dl dt img {width: calc(44/640*100vw); height: auto;}
.profile dd {font-size: calc(23/640*100vw); line-height: calc(32/640*100vw); color: #fff; letter-spacing: 0.2em; padding-left: calc(20/640*100vw);}
.profile dl {display: flex; float: left; padding-left: calc(40/640*100vw);}
.profile ul.voice {display: flex; padding: 0 calc(16/640*100vw) 0 calc(8/640*100vw);}
.profile ul.voice li a{display:inline-block; margin-top:calc(-12/640*100vw);}
.profile ul.voice li img {width: calc(73/640*100vw); height: auto;}

.swiper-wrapper{transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);}
.profile .swiper-wrapper{transition-delay: 0.03s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);}
.swiper-wrapper * {backface-visibility: hidden;}


/* 個別 */
.mainslide .swiper-container .swiper-slide::before{content:''; background: url("/img/character/01/chara.png") left top no-repeat; width:calc(1400/640*100vw); height:calc(1900/640*100vw); position: absolute; left:50%; top:50%; margin:calc(-882/640*100vw) 0 0 calc(-700/640*100vw); background-size: cover; z-index:10; transition:0.6s;}
.mainslide .swiper-container .swiper-slide[data-profile='2']::before{background-image: url("/img/character/02/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='3']::before{background-image: url("/img/character/03/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='4']::before{background-image: url("/img/character/04/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='5']::before{background-image: url("/img/character/05/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='7']::before{background-image: url("/img/character/07/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='8']::before{background-image: url("/img/character/08/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='9']::before{background-image: url("/img/character/09/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='10']::before{background-image: url("/img/character/10/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='11']::before{background-image: url("/img/character/11/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='12']::before{background-image: url("/img/character/12/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='13']::before{background-image: url("/img/character/13/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='14']::before{background-image: url("/img/character/14/chara.png");}
.mainslide .swiper-container .swiper-slide[data-profile='15']::before{background-image: url("/img/character/15/chara.png");}



@media screen and (max-width:640px){

}


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

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

.swiper-wrapper{transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }


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


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


.pagetitle {height: 74px; margin: 127px 0 20px;}

#charaslide {width: 1400px; margin: 0 auto;}

.mainslide .swiper-container {width: 1600px; left: -100px;}
.mainslide .swiper-container .swiper-slide {opacity: 0; transform: scale(0.5) translate(0,0); z-index: 10; height: 708px;}
.mainslide .swiper-slide.swiper-slide-duplicate-active,
.mainslide .swiper-slide.swiper-slide-active{opacity: 1; transform: scale(1); z-index: 30;}
.mainslide .swiper-slide.swiper-slide-duplicate-next,
.mainslide .swiper-slide.swiper-slide-duplicate-prev,
.mainslide .swiper-slide.swiper-slide-prev{opacity: 1; transform: scale(0.6) translate(-75px,0); z-index: 20;}
.mainslide .swiper-slide.swiper-slide-next{opacity: 1; transform: scale(0.6) translate(75px,0); z-index: 20;}

.mainslide .swiper-slide.swiper-slide-next + .swiper-slide {opacity: 1;}
.mainslide .swiper-container .swiper-slide::before{width: 765px; height: 1001px; margin:-368px 0 0 -444px;}
.mainslide .swiper-slide.prevshow{opacity: 1;}

main .mainslide .swiper-button-prev {left: calc(50+49); bottom:inherit; background-size: auto; height: 67px; width:71px; top: 280px; transition: 0.5s;}
main .mainslide .swiper-button-next {right:calc(50+49); bottom:inherit; background-size: auto; height: 67px; width:71px; top: 280px; transition: 0.5s;}
main .mainslide .swiper-button-prev:hover,
main .mainslide .swiper-button-next:hover {filter: brightness(1.2);}


.profile {left:inherit; right: 0; bottom:inherit; top: -87px; width: 440px;}

.profile .swiper-container{ width: 440px;}
.profile .swiper-container::after,
.profile .swiper-container::before{ width: 400px; position: absolute; left: 20px;}

.profile .profile_window div {padding: 0 0 45px;}
.profile::after,
.profile::before{width: 15px;}
.profile .title::after,
.profile .title::before{width: 15px;}

.profile .profile_window h2{margin-bottom:4px; padding-top:35px;}
.profile .profile_window h2 img {width: 440px !important;}
.profile .profile_window p{margin-bottom:30px;}
.profile dl dt img {width: 34px !important; height: 23px !important;}
.profile dd {font-size: 18px; line-height:25px; padding-left: 14px; word-break: break-all;}
.profile dl {padding-left: 32px;}
.profile ul.voice {padding: 0 12px 0 6px; display: block;}
.profile ul.voice li a{display:inline-block; width:59px; height:45px; margin-top:-12px; background:url(/img/character/btn_voice.png); }
.profile ul.voice li img {display: none;}

#sitefooter {background: rgba(0,0,0,0.9);}


/* 個別 */
.mainslide .swiper-container .swiper-slide::before{width:1400px; height:1900px; margin:-775px/*-658px*/ 0 0 -701px;}

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


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

}