@charset "utf-8";
/* ==================================================================
CSS information
style info : MODAL
================================================================== */


/* --------------------------------------------------------
.OVER WRITE
-------------------------------------------------------- */
.pagebutton--close { right: calc(48/750*100%); }
@media screen and (min-width: 641px) {
	.pagebutton--close { right: calc(50/1300*100%); margin-top: calc(-37/1300*100%); }
}
@media screen and (min-width: 1401px) {
}

/* --------------------------------------------------------
.secCharacter
-------------------------------------------------------- */
.secCharacter { position: relative; }

.sCha__charimage ,
.sCha__detail , 
.sCha__type__wrap , 
.sCha__btnChange ,
.sCha__ci__item { position: absolute; }

.sCha__bg { width: 100%; position: relative; border-radius: 6px; overflow: hidden; }

.sCha__charimage ,
.sCha__ci__item { top: 0; right: 0; width: 100%; transform: translateX(0px); }
.sCha__ci__item.off { opacity: 0; }

.sCha__typeSlider__wrap { position: relative; }
.sCha__typeSlider { position: relative; }

.sCha__detail { width: 100%; top: 0; left: 0; margin-top: 30%; }
.sCha__de__name { width: 100%; }
.sCha__de__text { width: 100%; margin-top: calc(28/610*100%); padding: 0 20px; color: #FFFFFF; text-shadow: 1px 1px 4px #000000; }

.sCha__type__wrap { left: 0; bottom: 0; width: 100%; border-radius: 6px; overflow: hidden; transform-style: preserve-3d; }
.sCha__type { position: relative; width: 100%; padding-top: calc(80/610*100%); }
.sCha__type.off { opacity: 0; display: none; }
.sCha__type.on { display: block; }
.sCha__type__bg { background: rgba(0,0,0,0.8); width: 100%; height: 0; padding-top: calc(50/610*100%); position: relative; right: calc(105/610*100%); transform: skewX(45deg); box-shadow:0px 0px 30px 0px rgba(0,0,0,0.5);}
.sCha__type__list { width: 100%; position: absolute; left: calc(37/610*100%); bottom: 0; margin-bottom: calc(14/610*100%); 
	display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; }
.sCha__type__list li { width: calc(102/610*100%); position: relative; }
.sCha__type__list li a { display: block; position: relative; }
.sCha__type__list li .on { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; }
.sCha__type__list li.active .on { opacity: 1; }
.sCha__type__list li img { vertical-align: top; }

.sCha__btnChange { right: calc(10/610*100%); bottom: 0; margin-bottom: calc(14/610*100%); width: calc(96/610*100%); }
.sCha__btnChange .btn3d { position: absolute; top: 0; left: 0; width: 100%; }
.sCha__btnChange .off { opacity: 0; }

#leo .c2d { width: calc(438/610*100%); right: calc(-20/610*100%); margin-top: calc(15/610*100%); }
#leo .c3d { width: calc(359/610*100%); right: calc(35/610*100%); margin-top: calc(-4/610*100%); }
#leo .sCha__type__bg { background: rgba(21,128,159,0.8); }
#emma .c2d { width: calc(427/610*100%); right: calc(-12/610*100%); margin-top: calc(23/610*100%); }
#emma .c3d { width: calc(342/610*100%); right: calc(62/610*100%); margin-top: calc(-10/610*100%); }
#emma .sCha__type__bg { background: rgba(224,43,150,0.8); }
#balan .c2d { width: calc(615/610*100%); right: calc(46/610*100%); margin-top: calc(-119/610*100%); }
#balan .c3d { width: calc(556/610*100%); right: calc(-61/610*100%); margin-top: calc(-88/610*100%); }
#lance .c2d { width: calc(771/610*100%); right: calc(-19/610*100%); margin-top: calc(1/610*100%); }
#lance .c3d { width: calc(792/610*100%); right: calc(-245/610*100%); margin-top: calc(-74/610*100%); }
#tim .c2d { width: calc(407/610*100%); right: calc(-7/610*100%); margin-top: 20%; }
#tim .c3d { width: calc(322/610*100%); right: calc(48/610*100%); margin-top: 20%; }

@media screen and (min-width: 641px) {
	.secCharacter { width: calc(1200/1300*100%); }
	
	.sCha__detail { width: calc(600/1200*100%); left: calc(76/1200*100%); margin-top: calc(197/1200*100%); }
	.sCha__de__name { }
	.sCha__de__text { margin-top: calc(9/600*100%); margin-left: 10px; padding: 0; }
	
	.sCha__type__wrap { width: calc(610/1200*100%); }
	.sCha__type { }
	.sCha__type__bg { right: calc(140/610*100%); }
	.sCha__type__list { left: calc(90/610*100%); margin-bottom: calc(20/610*100%); }
	.sCha__type__list li { width: calc(84/610*100%); cursor: pointer; }
	.sCha__type__list li { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; }
	.sCha__type__list li:hover { -webkit-transform: scale(1.1); transform: scale(1.1);}
	
	.sCha__btnChange { right: calc(14/1200*100%); margin-bottom: calc(16/1200*100%); width: calc(88/1200*100%); cursor: pointer;}
	.sCha__btnChange { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; }
	.sCha__btnChange:hover { -webkit-transform: scale(1.10); transform: scale(1.10);}
	
	#leo .c2d { width: calc(380/1200*100%); right: calc(160/1200*100%); margin-top: calc(38/1200*100%); }
	#leo .c3d { width: calc(311/1200*100%); right: calc(173/1200*100%); margin-top: calc(-2/1200*100%); }
	#emma .c2d { width: calc(371/1200*100%); right: calc(168/1200*100%); margin-top: calc(26/1200*100%); }
	#emma .c3d { width: calc(296/1200*100%); right: calc(194/1200*100%); margin-top: calc(-3/1200*100%); }
	#balan .c2d { width: 30%; right: calc(100/1200*100%); margin-top: 0; }
	#balan .c3d { width: 30%; right: calc(3/1200*100%); margin-top: 0; }
	#lance .c2d { width: 40%; right: calc(62/1200*100%); margin-top: 0; }
	#lance .c3d { width: 40%; right: calc(3/1200*100%); margin-top: 0; }
	#tim .c2d { width: calc(407/1200*100%); right: calc(117/1200*100%); margin-top: calc(249/1200*100%); }
	#tim .c3d { width: calc(322/1200*100%); right: calc(121/1200*100%); margin-top: calc(398/1200*100%); }

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