#chara{width:100%; max-width:1200px; font-family:'Noto Sans JP', sans-serif; margin:0 auto;}
#chara img{width:100%;}

/*
================================================================================================================
キャラ一覧
================================================================================================================
*/
#chara #list{display:flex; flex-wrap:wrap;}
@media screen and (max-width:640px){#chara #list{width:calc(100% + 20px); margin-left:-10px;}}

#chara #list > ul{
position:relative;
width:calc(20% - 10px);
background:#000;
margin:5px;
border-left:10px solid #aaff00;
box-shadow:1px 4px 0 #000 , -1px 4px 0 #000;
cursor:pointer;}
@media screen and (max-width:1300px){#chara #list > ul{width:calc(25% - 10px);}}
@media screen and (max-width:1000px){#chara #list > ul{width:calc((100% / 3) - 10px);}}
@media screen and (max-width:640px){#chara #list > ul{border-left:5px solid #aaff00;}}
@media screen and (max-width:620px){#chara #list > ul{width:calc(50% - 10px);}}

#chara #list > ul li:nth-child(2){
position:absolute;
display:flex;
top:0;
left:0;
width:100%;
height:100%;
font-size:16px;
line-height:1.1rem;
text-shadow:0 0 3px #000 , 0 0 3px #000 , 0 0 5px #000;
font-weight:700;
justify-content:flex-start;
align-items:flex-end;
padding:5px 0 5px 5px;
z-index:2;}
@media screen and (min-width:621px) and (max-width:760px){#chara #list > ul li:nth-child(2){font-size:13px;}}
@media screen and (max-width:500px){#chara #list > ul li:nth-child(2){font-size:13px;}}
@media screen and (max-width:470px){#chara #list > ul li:nth-child(2){font-size:11px;}}

#chara #list > ul::before,
#chara #list > ul::after{
position:absolute;
display:flex;
content:"";
top:0;
left:-10px;
width:calc(100% + 10px);
height:100%;
justify-content:center;
align-items:center;
transition:all .2s ease;
pointer-events:none;
opacity:0;
z-index:3;}
#chara #list > ul::before{background:rgba(0,0,0,.8);}
#chara #list > ul::after{content:"MORE >"}
#chara #list > ul:hover::before,
#chara #list > ul:hover::after{opacity:1;}
@media screen and (max-width:640px){#chara #list > ul::before,#chara #list > ul::after{left:-5px; width:calc(100% + 5px);}}

/*
================================================================================================================
キャラプロフィール
================================================================================================================
*/
#profile > * + *{margin-top:20px !important;}

/*プロフィール SP版横幅*/
@media screen and (max-width:800px){#profile{width:calc(100% + 40px); margin-left:-20px;}}
@media screen and (max-width:580px){#profile{width:calc(100% + 20px); margin-left:-10px;}}

/*
===============================
メインビジュアルエリア
===============================
*/
.visual{position:relative; aspect-ratio:1200 / 550; background-color:rgba(0,0,0,.5); background-image:url(../images/chara/page/bg.png); background-position:center;}
.visual::before{
display:block;
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:30%;
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);
pointer-events:none;
z-index:3;}
.visual::after{
display:block;
content:"";
position:absolute;
top:-2.5px;
left:-2.5px;
width:calc(100% + 5px);
height:calc(100% + 5px);
background-image:url(../images/chara/page/cat01.png) , url(../images/chara/page/cat02.png) , url(../images/chara/page/cat03.png) , url(../images/chara/page/cat04.png);
background-position:top left , top right , bottom right , bottom left;
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
pointer-events:none;
z-index:5;}
@media screen and (max-width:800px){.visual::after{top:0; left:0; width:100%; height:100%;}}
@media screen and (max-width:640px){
.visual{background-size:10px auto;}
.visual::after{background-size:30px auto , 30px auto , 30px auto , 30px auto;}}

/*キャラ画像*/
.swiper-chara{overflow:hidden; text-align:center; z-index:2;}
.swiper-chara .swiper-slide{overflow:hidden;}
@media screen and (max-width:980px){.swiper-chara img{width:140% !important; margin-left:-20%;}}
@media screen and (max-width:640px){.swiper-chara img{width:180% !important; margin-left:-40%;}}

/*キャラ名*/
.chara-name{
position:absolute;
display:flex;
top:0;
left:0;
width:100%;
height:100%;
text-align:right;
text-shadow:0 0 3px #000 , 0 0 3px #000 , 0 0 5px #000;
justify-content:flex-end;
align-items:flex-end;
padding:0 20px 25px 0;
z-index:4;}
.chara-name > ul li{font-weight:700; letter-spacing:1px;}
.chara-name .ruby{font-size:18px;}
.chara-name .name{font-size:48px; margin-top:5px; line-height:3rem;}
.chara-name .name p{font-size:24px; margin-top:10px; line-height:1.5rem;}
.chara-name .cv{font-size:24px; color:#c3f359; margin-top:10px;}
.chara-name .cv::before{display:inline-block; content:"CV:"; margin-right:2px;}
@media screen and (max-width:700px){
.chara-name .ruby{font-size:16px;}
.chara-name .name{font-size:36px; margin-top:0;}
.chara-name .name p{font-size:18px; margin-top:0;}
.chara-name .cv{font-size:22px;}}
@media screen and (max-width:540px){
.chara-name{padding:0 15px 20px 0;}
.chara-name .ruby{font-size:14px;}
.chara-name .name{font-size:30px; line-height:1.8rem;}
.chara-name .name p{font-size:14px;}}
@media screen and (max-width:440px){
.chara-name .ruby{font-size:13px;}
.chara-name .name{font-size:20px;}
.chara-name .name p{font-size:13px;}
.chara-name .cv{font-size:16px;}}

/*
===============================
ページャー
===============================
*/
.chara-nav{
position:absolute;
display:flex;
top:0;
left:-5%;
width:110%;
height:100%;
justify-content:space-between;;
align-items:center;
pointer-events:none;
z-index:10;}
@media screen and (max-width:1340px){.chara-nav{left:-1%; width:102%;}}
@media screen and (max-width:800px){.chara-nav{left:2%; width:96%;}}

@media screen and (max-width:1200px){.chara-nav.fixed{position:fixed; width:99%; height:100vh; left:.5%;}}
/*@media screen and (max-width:800px){.chara-nav{height:100vh;}}*/

.chara-nav li{width:0; height:0; border-style:solid; filter:drop-shadow(0 0 2px #e6c253) drop-shadow(0 0 2px #e6c253); cursor:pointer; pointer-events:auto; transition:all .2s ease;}
.chara-nav li:nth-child(1){border-top:50px solid transparent; border-bottom:50px solid transparent; border-right:40px solid #ffffb1; border-left:0;}
.chara-nav li:nth-child(2){border-top:50px solid transparent; border-bottom:50px solid transparent; border-left:40px solid #ffffb1; border-right:0;}
.chara-nav li:nth-child(1):hover{transform:translateX(-5px)}
.chara-nav li:nth-child(2):hover{transform:translateX(5px)}
@media screen and (max-width:1200px){
.chara-nav li:nth-child(1){border-top:40px solid transparent; border-bottom:40px solid transparent; border-right:30px solid #ffffb1;}
.chara-nav li:nth-child(2){border-top:40px solid transparent; border-bottom:40px solid transparent; border-left:30px solid #ffffb1;}}
@media screen and (max-width:640px){
.chara-nav li:nth-child(1){border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:20px solid #ffffb1;}
.chara-nav li:nth-child(2){border-top:30px solid transparent; border-bottom:30px solid transparent; border-left:20px solid #ffffb1;}}

/*
===============================
キャラ絵スライド用ボタン
===============================
*/
@media screen and (max-width:800px){.swiper-thumb{width:calc(100% - 20px); margin:0 auto;}}

.swiper-thumb .btn{position:relative; text-align:center; padding:5px 0 20px; /*margin:0 10px;*/ cursor:pointer; transition:all .2s ease;}
.swiper-thumb .btn:hover{filter:brightness(110%); transform:translateY(-5px);}
.swiper-thumb .btn::after{
display:block;
content:"";
position:absolute;
left:calc(50% - 45px);
bottom:5px;
width:90px;
color:#021700;
background:#c6fe87;
font-size:9px;
font-weight:700;
text-align:center;
border-radius:5px 0 5px 0;
padding:2px 0;}
.swiper-thumb .btn.sdvx1::after{content:"BOOTH";}
.swiper-thumb .btn.sdvx2::after{content:"infinite infection";}
.swiper-thumb .btn.sdvx3::after{content:"GRAVITY WARS";}
.swiper-thumb .btn.sdvx4::after{content:"HEAVENLY HAVEN";}
.swiper-thumb .btn.sdvx5::after{content:"VIVID WAVE";}
.swiper-thumb .btn.sdvx6::after{content:"EXCEED GEAR";}
.swiper-thumb .btn.sdvx7::after{content:"∇";}
.swiper-thumb .btn img{max-width:80px; border-radius:50%; border:4px solid #c6fe87;}
@media screen and (max-width:640px){
.swiper-thumb .btn::after{left:calc(50% - 40px); width:80px;}
.swiper-thumb .btn img{max-width:60px;}}

.swiper-thumb .swiper-slide-thumb-active .btn{pointer-events:none;}
.swiper-thumb .swiper-slide-thumb-active .btn::after{background:#fff;}
.swiper-thumb .swiper-slide-thumb-active .btn img{border:4px solid #fff;}

/*サムネイル スクロール*/
.swiper-scrollbar{position:relative; margin-top:10px;}
.swiper-scrollbar::after{
position:absolute;
content:"";
top:0;
bottom:0;
left:0;
width:100%;
height:8px;
background-color:rgba(0,0,0,.8);
border-radius:5px;
margin:auto;}
.swiper-scrollbar-drag{
position:relative;
height:8px;
background-color:#c6fe87;
background-clip:content-box;
border-radius:5px;
/*padding:8px 0;*/
transition:background .2s ease;
cursor:pointer;
z-index:3;}
.swiper-scrollbar-drag:active{background-color:#c6fe87;}

/*
===============================
キャラ情報エリア
===============================
*/
.chara-data{position:relative; width:100%; background:rgba(0,0,0,.7); font-optical-sizing:auto; border-radius:20px; border:3px solid #118e2e; padding:10px;}
.chara-data > .inner{color:#021700; background:#eaf2e5; border-radius:10px; padding:50px;}
.chara-data > .inner > *:not(.comment){max-width:800px; margin:0 auto;}
@media screen and (max-width:800px){
.chara-data{border-radius:0; border-left:none; border-right:none; padding:30px 0;}
.chara-data > .inner{border-radius:0; padding:30px;}}
@media screen and (max-width:640px){.chara-data > .inner{padding:30px 10px;}}

/*誕生日･身長*/
.chara-data .status{color:#021700; margin:50px auto !important;}
.chara-data .status li{position:relative;}
.chara-data .status li::before{
display:flex;
width:90px;
color:#fff;
background:#021700;
font-size:16px;
text-align:center;
border-radius:5px;
justify-content:center;
align-items:center;
z-index:3;}
.chara-data .status li.birthday::before{content:"誕生日";}
.chara-data .status li.height::before{content:"身長";}
.chara-data .status li::after{
display:block;
content:"";
position:absolute;
top:calc(50% - 1px);
left:0;
width:100%;
height:2px;
background:#021700;
z-index:2;}
.chara-data .status li + li{margin-top:10px;}
.chara-data .status li p{position:relative; background:#eaf2e5; font-size:24px; text-align:right; line-height:1.5rem; padding-left:20px; z-index:4;}
.chara-data .status li p span.birthday2{font-size:16px;}
@media screen and (min-width:801px){
.chara-data .status li{display:flex; height:36px; justify-content:flex-end; align-items:center;}
.chara-data .status li::before{position:absolute; top:0; left:0; height:36px;}
.chara-data .status li p span + span{display:inline-block; margin-left:10px;}}
@media screen and (max-width:800px){
.chara-data .status{max-width:480px; margin:30px auto !important;}
.chara-data .status li + li{margin-top:20px;}
.chara-data .status li::before{width:100%; padding:5px 0;}
.chara-data .status li::after{display:none;}
.chara-data .status li p{text-align:center; padding-left:0; margin-top:15px}
.chara-data .status li p span{display:block;}}
@media screen and (max-width:640px){
.chara-data .status{margin:20px auto !important;}
.chara-data .status li + li{margin-top:10px;}
.chara-data .status li::before{font-size:14px;}
.chara-data .status li p{font-size:18px; margin-top:5px}
.chara-data .status li p span.birthday2{font-size:13px;}}

/*セリフ*/
.chara-data .comment{color:#c3f359; font-family:"Noto Serif JP", serif; font-size:30px; line-height:2.5rem; text-align:center; text-shadow:0 0 2px #021700 , 0 0 3px #021700 , 0 0 5px #021700;}
@media screen and (min-width:1201px){width:calc(100% + 40px); margin-left:-20px;}}
@media screen and (max-width:980px){.chara-data .comment{font-size:24px; line-height:2rem;}}
@media screen and (max-width:480px){.chara-data .comment{font-size:20px; line-height:1.8rem;}}
@media screen and (max-width:370px){.chara-data .comment{font-size:18px; text-shadow:0 0 2px #021700 , 0 0 2px #021700 , 0 0 3px #021700;}}

/*紹介文*/
.chara-data .about{font-size:15px; line-height:1.8rem; letter-spacing:.5px;}
@media screen and (max-width:640px){.chara-data .about{font-size:13px; line-height:1.4rem;}}

/*
================================================================================================================
フェード
================================================================================================================
*/
.fade{
animation-name:fadeIn;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-duration:.5s;}

#list.fade{animation-delay:1s;}
#profile.fade{animation-delay:.2s;}

@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}}