/* ============================
	Character
============================ */

#character .box-body { display:flex; justify-content:center; flex-direction:row; align-items: flex-start /*center*/; }

#chr-stand { margin:-20px 40px 0 0; background-position:center center; background-repeat:no-repeat; background-size:cover; /* for gsap */ opacity:0; transform: scale(0.9); }
.chara1 #chr-stand { width:271px; background-image:url(../img/character/chara1_st.png); aspect-ratio:407 / 1221; }
.chara2 #chr-stand { width:285px; background-image:url(../img/character/chara2_st.png); aspect-ratio:428 / 1188; }
.chara3 #chr-stand { width:257px; background-image:url(../img/character/chara3_st.png); aspect-ratio:386 / 1196; }
.chara4 #chr-stand { width:377px; background-image:url(../img/character/chara4_st.png); aspect-ratio:566 / 1131; }
.chara5 #chr-stand { width:488px; background-image:url(../img/character/chara5_st.png); aspect-ratio:733 / 1066; margin:0; }
.chara6 #chr-stand { width:344px; background-image:url(../img/character/chara6_st.png); aspect-ratio:517 / 1162; }


#chr-box-r { width:420px; text-align:left; }
#chr-name-box { margin-bottom:1.0em; padding-bottom:1.4em; border-bottom:#555 1px solid; }
#chr-name { margin-bottom:0.3em; font-size:300%; line-height:120%; font-weight:700; letter-spacing:0.05em; }
.chara5 #chr-name,
.chara6 #chr-name { letter-spacing:-0.1em; }
#chr-cv { font-size:120%; line-height:120%;font-weight:700; letter-spacing:0.05em; }
#chr-cv .cv { display:inline-block; margin-right:0.5em; padding:0.1em 0.4em; background-color:var(--cl-winered); font-size:90%; color:#fff; }
#chr-txt { margin-bottom:2.5em; font-size:115%; line-height:200%; }


#chr-nav { width:100%; display:flex; flex-wrap:wrap; }
#chr-nav li { width:calc(100% / 3); aspect-ratio:1 / 1; }
#chr-nav li a { display:block; background-position:center center; background-repeat:no-repeat; background-size:cover; /* hover */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #chr-nav li a:hover { opacity:0.7; } }
#chr-nav li:nth-child(1) a { background-image:url(../img/character/chara1_tmb.jpg); }
#chr-nav li:nth-child(2) a { background-image:url(../img/character/chara2_tmb.jpg); }
#chr-nav li:nth-child(3) a { background-image:url(../img/character/chara3_tmb.jpg); }
#chr-nav li:nth-child(4) a { background-image:url(../img/character/chara4_tmb.jpg); }
#chr-nav li:nth-child(5) a { background-image:url(../img/character/chara5_tmb.jpg); }
#chr-nav li:nth-child(6) a { background-image:url(../img/character/chara6_tmb.jpg); }
.chara1 #chr-nav li:nth-child(1) a,
.chara2 #chr-nav li:nth-child(2) a,
.chara3 #chr-nav li:nth-child(3) a,
.chara4 #chr-nav li:nth-child(4) a,
.chara5 #chr-nav li:nth-child(5) a,
.chara6 #chr-nav li:nth-child(6) a { filter:brightness(0.5); }


/* -- Media Queries -- */

@media all and (max-width: 767px) {

#character .box-body { display:block; margin-top:-1.5em; }
#chr-stand { margin:0 auto 1vw auto!important; }
:root {
	--stmxw:488;
}
.chara1 #chr-stand { width:calc(271% / var(--stmxw) * 100); }
.chara2 #chr-stand { width:calc(285% / var(--stmxw) * 100); }
.chara3 #chr-stand { width:calc(257% / var(--stmxw) * 100); }
.chara4 #chr-stand { width:calc(377% / var(--stmxw) * 100); }
.chara5 #chr-stand { width:calc(var(--stmxw) / var(--stmxw) * 90%); }
.chara6 #chr-stand { width:calc(344% / var(--stmxw) * 100); }
#chr-box-r { width:100%; margin:0; }
#chr-name-box { font-size:3.0vw; }
#chr-name { text-align:center; }
#chr-cv { text-align:center; font-size:140%; }
#chr-nav { width:90%; margin:0 5%; }

}