@charset "utf-8";
/*-----------------------------------------------
 * CHARACTER 
-------------------------------------------------*/
/* @media screen and (min-width:768px){
	.contentBG__earringSet.-decoFooter{
		top: 0;
		left: 0;
		margin-top: -290px;
		margin-left: 50px;
		z-index: 1;
	}
	.contentBG__earringSet:after{
		display: none;
	}
} */
@media screen and (max-width: 767px) {
    .pHeader--logo {
        width: calc(380 / var(--vw-min) * 100vw);
		margin-bottom: var(--sp-size-24);
    }
}
@media screen and (min-width:768px){
	.pMain{
		padding-top: 110px;
	}
	.contentBG__earring {
		position: absolute;
		right: -40px;
	}
	.cont_h2{
		z-index: unset;
	}
}
@media screen and (max-width: 767px) {
	.pMain{
		padding-bottom: calc(200 / var(--vw-min) * 100vw);
	}
    .contentBG__earring.-sizeM	 {
		position: absolute;
		right: calc(-68 / var(--vw-min) * 100vw);
		padding-top: calc(296 / var(--vwcalc));
        z-index: 2;
	}
}

/* h2 deco */
.cont_h2--deco.-character{
	width: 107px;
	height: 93px;
	top: 0;
	left: 0;
	margin-left: 340px;
	margin-top: -90px;
	background-image: url(../img/common/deco_h2-bg1.png);
}
@media screen and (max-width: 767px) {
    .cont_h2--deco.-character{
	width: calc(100 / var(--vw-min) * 100vw);
	height: calc(93 / var(--vw-min) * 100vw);
	margin-left: calc(440 / var(--vw-min) * 100vw);
	margin-top: calc(-90 / var(--vw-min) * 100vw);
	}
}
/* h2 line */
#character .cont_h2--line {
    width:100%;
}
@media screen and (max-width: 767px) {
    #character .cont_h2--line {
        width: 100%;
    }
}
#character .contetIn__bg::after{
	content: "";
	width: 100%;
	height: min(calc(760 / var(--vw-min) * 100vw), 760px);
	position: absolute;
	top: min(calc(120 / var(--vw-min) * 100vw), 120px);
	margin: auto;
	background: url(../img/character/chara_bg.jpg) no-repeat center center;
	background-size: cover;
	opacity: 0.2;
}
@media screen and (max-width:767px){
	#character .contetIn__bg::after{
		height: calc(940 / var(--vw-min) * 100vw);
		top: calc(144 / var(--vw-min) * 100vw);
	}
}
.characterContent{
	position: relative;
	z-index: 10;

}
#character .contentIn__Cont{
	z-index: unset;
}
#character .contentIn__ContIn{
	width: 100%;/* 880 */
}
@media screen and (max-width: 767px) {
    .contentIn__ContIn {
        padding-bottom: calc(140 / var(--vw-min) * 100vw)
    }
}


/* charaBtn */
.characterChangeLists{
	display: flex;
}
.characterChangeList{
	width: min(calc(80 / var(--vw-min) * 100vw), 80px);
	height: min(calc(80 / var(--vw-min) * 100vw), 80px);
	margin-right: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width: 767px) {
	.characterChangeList{
		width: calc(98 / var(--vw-min) * 100vw);
		height:calc(98 / var(--vw-min) * 100vw);
		margin-right:calc(24 / var(--vw-min) * 100vw);
	}
}
.charaBtn{
	display: block;
	position: relative;
	transition: all .3s ease;
}
.charaBtn::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: max(calc(-8 / var(--vw-min) * 100vw), -8px);
	right: max(calc(-8 / var(--vw-min) * 100vw), -8px);
	background: linear-gradient(-90deg,rgba(255, 245, 90, 1) 0%, rgba(181, 255, 255, 1) 100%);
	/*clip-path: polygon(100% 0, 100% 74%, 75% 100%, 0 100%, 0 0);*/
	-webkit-mask: url(../img/character/thum_base.svg) no-repeat center center / contain;
	mask: url(../img/character/thum_base.svg) no-repeat center center / contain;
	z-index: -1;
	transition: all .3s ease;
}
.thumBoxWrap{
	display: block;
	/*filter: drop-shadow(1px 0 0 #000)
    drop-shadow(-1px 0 0 #000)
    drop-shadow(0 1px 0 #000)
    drop-shadow(0 -1px 0 #000);*/
}
@media screen and (max-width: 767px) {
	.thumBoxWrap{
	/*filter: drop-shadow(calc(2 / var(--vw-min) * 100vw) 0 0 #000)
    drop-shadow(calc(-2 / var(--vw-min) * 100vw) 0 0 #000)
    drop-shadow(0 calc(2 / var(--vw-min) * 100vw) 0 #000)
    drop-shadow(0 calc(-2 / var(--vw-min) * 100vw) 0 #000);*/
}
}
.thumBox{
	display: block;
	/*clip-path: polygon(100% 0, 100% 74%, 75% 100%, 0 100%, 0 0);*/
	-webkit-mask: url(../img/character/thum_base.svg) no-repeat center center / contain;
	mask: url(../img/character/thum_base.svg) no-repeat center center / contain;
	background-color: #FFF;
	overflow: hidden;
	transition: all .3s ease;
	transition-delay: .1s;
}
.thumBox::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	-webkit-mask: url(../img/character/thum_frame.svg) no-repeat center center / contain;
	mask: url(../img/character/thum_frame.svg) no-repeat center center / contain;
	background-color: #000;
	position: absolute;
	z-index: 10;
	pointer-events: none;
	left: 0;
	top: 0;
}
@media screen and (max-width: 767px) {
	.thumBox::after{
		-webkit-mask: url(../img/character/thum_frame_sp.svg) no-repeat center center / contain;
		mask: url(../img/character/thum_frame_sp.svg) no-repeat center center / contain;
	}
}

.thumBox img{
	width: 100%;
	height: auto;
	transition: all .3s ease;
}
/* active hover */
.charaBtn:hover,
.charaBtn.is-active{
	margin-top: min(calc(5 / var(--vw-min) * 100vw), 5px);
}
.charaBtn:hover::after,
.charaBtn.charaBtn.is-active::after{
	bottom: max(calc(-4 / var(--vw-min) * 100vw), -4px);
	right:  max(calc(-4 / var(--vw-min) * 100vw), -4px);
}
.charaBtn:hover .thumBox,
.charaBtn.is-active .thumBox{
	background-color: #fff55a;
}
.charaBtn.charaBtn:hover .thumBox img,
.charaBtn.charaBtn.is-active .thumBox img{
	transform: scale(1.1);
}

/* detail */
.characterDetail__contIn{
	display: flex;
	align-items: center;
    justify-content: center;
	position: relative;
	margin-top: min(calc(60 / var(--vw-min) * 100vw), 60px);
}
@media screen and (max-width:767px){
	.characterDetail__contIn{
		flex-direction: column;
		margin-top: calc(90 / var(--vw-min) * 100vw);
	}
}
/* face */
.characterDetail__faceImage{
	position: absolute;
	right: 0;
	top: 0;
	width: min(calc(250 / var(--vw-min) * 100vw), 250px);
	opacity: 0;
	transform: translateY(min(calc(40 / var(--vw-min) * 100vw), 40px));
	transition: transform .4s ease, opacity .4s ease;
	transition-delay: .5s;
}
/* face active */
.characterDetailList.swiper-slide-active .characterDetail__faceImage{
	opacity: 1;
	transform: translateY(0);
}
.characterDetail__faceImage img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:767px){
	.characterDetail__faceImage{
		bottom: 0;
		margin: auto;
		width: min(calc(200 / var(--vw-min) * 100vw), 200px);
		display: flex;
		align-items: center;
	}
}

/* name */
.charaName{
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	margin-bottom:  min(calc(30 / var(--vw-min) * 100vw), 30px);
	opacity: 0;
	transform: translateY(min(calc(40 / var(--vw-min) * 100vw), 40px));
	transition: transform .4s ease, opacity .4s ease;
	transition-delay: .5s;
}
@media screen and (max-width:767px){
	.charaName{
		left: calc(48 / var(--vw-min) * 100vw);
	}
}
/* name active */
.characterDetailList.swiper-slide-active .charaName{
	opacity: 1;
	transform: translateY(0);
}
.charaName__name{
	font-size: min(calc(48 / var(--vw-min) * 100vw), 48px);
	color: #c78ce4;
	font-weight: bold;
}
.charaName__cv{
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: bold;
}
.charaName__cv--cv{
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 500;
	color:#fd87bb;
	font-family: var(--font-en);

}
/* stand */
.characterDetail__ImageWrap{
	width: min(calc(370 / var(--vw-min) * 100vw), 370px);
	transform: translateX(max(calc(-40 / var(--vw-min) * 100vw), -40px));
	opacity: 0;
	transition: transform .4s ease, opacity .4s ease;
	transition-delay: .5s;
}
/* stand active */
.characterDetailList.swiper-slide-active .characterDetail__ImageWrap{
	opacity: 1;
	transform: translateX(0);
}
@media screen and (max-width:767px){
	.characterDetail__ImageWrap{
		width: calc(380 / var(--vw-min) * 100vw);
		margin-top: calc(96 / var(--vw-min) * 100vw);
	}
}

.characterDetail__ImageWrap img{
	width:100%;
	height: auto;
}
/* profile */
.characterDetail__DetailWrap{
	position: absolute;
	left: 0;
	top:  min(calc(190 / var(--vw-min) * 100vw), 190px);
	width: min(calc(320 / var(--vw-min) * 100vw), 320px);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: bold;
	opacity: 0;
	transform: translateY(min(calc(40 / var(--vw-min) * 100vw), 40px));
	transition: transform .4s ease, opacity .4s ease;
	transition-delay: .5s;
}
/* profile active */
.characterDetailList.swiper-slide-active .characterDetail__DetailWrap{
	opacity: 1;
	transform: translateY(0);
}
@media screen and (max-width:767px){
	.characterDetail__DetailWrap{
		position: relative;
		left: unset;
		top:  unset;
		width: 100%;
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-top:calc(48 / var(--vw-min) * 100vw);
	}
}
/* text */
.characterText{
	line-height: 2;
	margin-bottom:  min(calc(30 / var(--vw-min) * 100vw), 30px);
}
@media screen and (max-width:767px){
	.characterText{
		margin-bottom:  calc(48 / var(--vw-min) * 100vw);
	}
}
.profileBox{
	display: flex;
	line-height: 2;
}
.profileBox:not(:last-child){
	margin-bottom: min(calc(8 / var(--vw-min) * 100vw), 8px);
}
.profileBox dt{
	color:#fd87bb;
	margin-right: min(calc(15 / var(--vw-min) * 100vw), 15px);
}
@media screen and (max-width:767px){
	.profileBoxWrap{
		display: flex;
		flex-direction: row;
        flex-wrap: wrap;
		width: 80%;
	}
	.profileBox{
		margin-right: calc(48 / var(--vw-min) * 100vw);
		line-height: 1;
	}
	.profileBox:not(:last-child){
		margin-bottom: calc(18 / var(--vw-min) * 100vw);
	}
}
/* en name */
.charaName_enBlock{
	position: absolute;
	left: 0;
	width: 100%;
	height: min(calc(760 / var(--vw-min) * 100vw), 760px);
    top: min(calc(120 / var(--vw-min) * 100vw), 120px);
    margin: auto;
	z-index: 1;
	overflow: hidden;
}
.charaName_enTxt{
	position: absolute;
	left: 0;
	bottom: 0;
	height: calc(187 / var(--vw-min) * 100vw);
	max-height: 187px;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
	-webkit-mask-position: left top;
	mask-repeat: no-repeat;
	mask-size: 100%;
	mask-position: left top;
	background-image: linear-gradient(45deg, rgb(194,173,208) 0%, rgb(246,153,195) 100%);
	transform: translateY(min(calc(40 / var(--vw-min) * 100vw), 40px));
	opacity: 0;
}
.charaName_enBlock.-changed .charaName_enTxt{
	transition: transform .4s ease, opacity .4s ease;
}
.charaName_enTxt img{
	width: 100%;
}
@media screen and (max-width:767px){
	.charaName_enBlock{
		height: calc(940 / var(--vw-min) * 100vw);
		top: calc(144 / var(--vw-min) * 100vw);
	}
	.charaName_enTxt{
		width: calc(178 / var(--vw-min) * 100vw);
		height: auto;
		max-height: unset;
		-webkit-mask-position: right top;
		mask-position: right top;
	}
}
/* chara */
@media screen and (min-width:768px){
	.charaName_enTxt[data-chara="1"]{
		width: min(calc(454 / var(--vw-min) * 100vw), 454px);
		-webkit-mask-image: url(../img/character/chara1_name_en.svg);
		mask-image: url(../img/character/chara1_name_en.svg);
	}
	.charaName_enTxt[data-chara="2"]{
		width: min(calc(545 / var(--vw-min) * 100vw), 545px);
		-webkit-mask-image: url(../img/character/chara2_name_en.svg);
		mask-image: url(../img/character/chara2_name_en.svg);
	}
	.charaName_enTxt[data-chara="3"]{
		width: min(calc(257 / var(--vw-min) * 100vw), 257px);
		-webkit-mask-image: url(../img/character/chara3_name_en.svg);
		mask-image: url(../img/character/chara3_name_en.svg);
	}
	.charaName_enTxt[data-chara="4"]{
		width: min(calc(376 / var(--vw-min) * 100vw), 376px);
		-webkit-mask-image: url(../img/character/chara4_name_en.svg);
		mask-image: url(../img/character/chara4_name_en.svg);
	}
}

@media screen and (max-width:767px){
	.charaName_enTxt[data-chara="1"]{
		height: calc(445 / var(--vw-min) * 100vw);
		-webkit-mask-image: url(../img/character/chara1_name_en-s.svg);
		mask-image: url(../img/character/chara1_name_en-s.svg);
	}
	.charaName_enTxt[data-chara="2"]{
		height: calc(536 / var(--vw-min) * 100vw);
		-webkit-mask-image: url(../img/character/chara2_name_en-s.svg);
		mask-image: url(../img/character/chara2_name_en-s.svg);
	}
	.charaName_enTxt[data-chara="3"]{
		height: calc(257 / var(--vw-min) * 100vw);
		-webkit-mask-image: url(../img/character/chara3_name_en-s.svg);
		mask-image: url(../img/character/chara3_name_en-s.svg);
	}
	.charaName_enTxt[data-chara="4"]{
		height: calc(376 / var(--vw-min) * 100vw);
		-webkit-mask-image: url(../img/character/chara4_name_en-s.svg);
		mask-image: url(../img/character/chara4_name_en-s.svg);
	}
}


.charaName_enBlock.-changed[data-nowchara="1"] .charaName_enTxt[data-chara="1"]{
	opacity: 1;
	transform: translateY(0);
}
.charaName_enBlock.-changed[data-nowchara="2"] .charaName_enTxt[data-chara="2"]{
	opacity: 1;
	transform: translateY(0);
}
.charaName_enBlock.-changed[data-nowchara="3"] .charaName_enTxt[data-chara="3"]{
	opacity: 1;
	transform: translateY(0);
}
.charaName_enBlock.-changed[data-nowchara="4"] .charaName_enTxt[data-chara="4"]{
	opacity: 1;
	transform: translateY(0);
}


/* arrow */
.arrowBlock{
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: min(calc(760 / var(--vw-min) * 100vw), 760px);
	pointer-events: none;
}
@media screen and (max-width:767px){
	.arrowBlock{
		bottom: unset;
		top: calc(440 / var(--vw-min) * 100vw);
		height: calc(95 / var(--vw-min) * 100vw);
		z-index: 100;
	}
}


.arrowBtn{
	width: min(calc(80 / var(--vw-min) * 100vw), 80px);
	height: min(calc(91 / var(--vw-min) * 100vw), 91px);
	transition: all .4s ease;
	margin: auto;
	top: 0;
	bottom: 0;
	pointer-events: all;
	z-index: 5;
}
.swiper-button-prev{
	left: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.swiper-button-next{
	right: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:767px){
	.arrowBtn{
		width: calc(80 / var(--vw-min) * 100vw);
		height: calc(91 / var(--vw-min) * 100vw);
	}
}
.swiper-button-next::after,
.swiper-button-prev::after{
	display: none;
}
.swiper_arrow{
	display: block;
	width: 100%;
	height: 100%;
	transition: all .4s ease;
}
.swiper_arrow.-prev{
	background: url(../img/character/arrow_left.png) no-repeat center center / contain;
}
.swiper_arrow.-next{
	background: url(../img/character/arrow_right.png) no-repeat center center / contain;
}
@media screen and (min-width:768px){
	/* hover */
	.swiper-button-prev:hover{
		left: min(calc(15 / var(--vw-min) * 100vw), 15px);
	}
	.swiper-button-next:hover{
		right: min(calc(15 / var(--vw-min) * 100vw), 15px);
	}
	.swiper-button-next:hover .swiper_arrow,
	.swiper-button-prev:hover .swiper_arrow{
		transform: rotateX(180deg);
	}
}