@charset "utf-8";
.inMain{
	padding-top: 160px;
}
@media screen and (max-width:768px){
	.inMain{
		padding-top: calc(240 / var(--vw-min) * 100vw);
	}
}
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
#character{
	padding-top: 80px;
	z-index: 2;
	overflow: hidden;
}
#character .cont_h2{
	position: relative;
	z-index: 1;
	color: #FFF;
}
#character .cont_h2Txt--txt:before{
	background: linear-gradient(180deg, #FFF 0%, #FFF 20%, transparent 20%, transparent 60%, #FFF 60%, #FFF 100%);
}

#character .contentIn{
	width: 100%;
	max-width: 100%;
	position: relative;
	z-index: 1;
	padding-top: 80px;
}

.characterContent{
	width: 86.6667%;/* 1040 */
	max-width: calc(clamp(1040px, 86.6667vw, 1664px) + (100vw - clamp(1200px, 100vw, 1920px) - (100vw - clamp(1200px, 100vw, 1920px)) / 2));
	position: relative;
	margin-left: auto;
	display: flex;
}

@media screen and (max-width:768px){
	#character{
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	#character .contentIn{
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	.characterContent{
		width: 100%;
		max-width: 100%;
		display: block;
	}
}



/**
* characterThumbWrap
**/
.characterThumbWrap{
	display: flex;
	justify-content: center;
	width: 19.2307%;/* 200 */
}

.characterThumbLists{
	height: calc((min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent))) * 7) + (min(calc(4 / var(--vw-min) * 100vw), calc(4px * var(--max-percent))) * 6));
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 0 auto;
	margin-top: -5%;
	gap: min(calc(4 / var(--vw-min) * 100vw), calc(4px * var(--max-percent)));
}
.characterThumbList{
	width: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-top: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	position: relative;
}
.characterThumbList:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: url(../img/character/character_frame.svg) no-repeat center / contain;
}
.btn_characterThumb{
	width: 80%;
	height: 80%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #a5968c;
}
.btn_characterThumb--img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.btn_characterThumb--img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (hover:hover) and (pointer: fine){
	.btn_characterThumb:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--color-orange);
		opacity: 0;
		transform: scale(40%);
		transition: opacity .3s ease, transform .4s ease;
	}
	.btn_characterThumb:hover::before{
		opacity: 80%;
		transform: scale(100%);
	}
}

/* current */
.btn_characterThumb--img:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-orange);
	mix-blend-mode: color;
	opacity: 0;
	transition: opacity .3s ease;
}
.btn_characterThumb.--is-current .btn_characterThumb--img:after{
	opacity: 1;
}


@media screen and (max-width:768px){
	.characterThumbWrap{
		display: block;
		width: 100%;
		padding: 0 calc(32 / var(--vw-min) * 100vw);
		position: relative;
		z-index: 2;
	}
	.characterThumbLists{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		height: auto;
		gap: calc(10 / var(--vw-min) * 100vw);
	}
	.characterThumbList{
		width: calc(126 / var(--vw-min) * 100vw);
		padding-top: calc(126 / var(--vw-min) * 100vw);
	}
}




/**
* characterSwiperWrap
**/
.characterSwiperWrap{
	width: 80.7693%;/* 840 */
	padding-right: calc(100vw - clamp(1200px, 100vw, 1920px) - (100vw - clamp(1200px, 100vw, 1920px)) / 2);
	background: #FFF url(../img/common/textur_wh.jpg) repeat center;
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
	margin-left: auto;
}
.characterSwiperInWrap{
	width: 100%;
	position: relative;
}

.characterSwiperInWrap__bg{
	position: absolute;
	top: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	left: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	right: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	bottom: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}

.characterSwiperListCont{
	position: relative;
	width: 100%;
	padding-bottom: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	padding-right: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	display: flex;
}

.character_mainImage{
	width: 50%;
}
.character_mainImage img{
	width: 100%;
}

.character_detailWrap{
	width: 50%;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-right: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}

@media screen and (max-width:768px){
	.characterSwiperWrap{
		width: 93.6%;/* 702 */
		margin-top: calc(33 / var(--vw-min) * 100vw);
		padding-right: 0;
	}
	.characterSwiperInWrap__bg{
		top: calc(12 / var(--vw-min) * 100vw);
		left: calc(12 / var(--vw-min) * 100vw);
		right: calc(12 / var(--vw-min) * 100vw);
		bottom: calc(12 / var(--vw-min) * 100vw);	
	}
	.characterSwiperListCont{
		padding-top: calc(12 / var(--vw-min) * 100vw);
		padding-bottom: calc(24 / var(--vw-min) * 100vw);
		padding-right: calc(48 / var(--vw-min) * 100vw);
		padding-left: calc(48 / var(--vw-min) * 100vw);
		flex-direction: column;
	}
	.character_mainImage{
		width: calc(600 / var(--vw-min) * 100vw);
		margin-left: auto;
	}
	.character_detailWrap{
		width: 100%;
		padding-top: 0;
		padding-right: 0;
	}
}


/**
* names
**/
.character_names{
	padding-bottom: min(calc(32 / var(--vw-min) * 100vw), calc(32px * var(--max-percent)));
}

/* catch */
.character_catch{
	color: #a5968c;
	line-height: 1.25;
	margin-bottom: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}
.character_catch > span{
	display: inline-block;
	position: relative;
	padding: 0 min(calc(22 / var(--vw-min) * 100vw), 22px);
}
.character_catch > span:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(calc(10 / var(--vw-min) * 100vw), 10px);
	background: url(../img/common/deco_side-l.svg) no-repeat center / contain;
}
.character_catch > span:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(calc(10 / var(--vw-min) * 100vw), 10px);
	background: url(../img/common/deco_side-r.svg) no-repeat center / contain;
}


/* charaName */
.character_name{
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	line-height: 1.6667;
}

.character_cv{
	padding-top: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}
.character_cv--cv{
	display: inline-block;
	font-family: var(--font-en);
	color: var(--color-orange);
	padding-right: min(calc(12 / var(--vw-min) * 100vw), 12px);
}


/* text */
.character_text{
	position: relative;
	line-height: 2;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 20%) 0px, rgba(0, 0, 0, 20%) 1px, transparent 1px);
    background-repeat: repeat;
    background-size: min(calc(32 / var(--vw-min) * 100vw), 32px) min(calc(32 / var(--vw-min) * 100vw), 32px);
	border-bottom: 1px solid rgba(0, 0, 0, 20%);
}

.character_faceLists{
	display: flex;
	gap: min(calc(22 / var(--vw-min) * 100vw), calc(22px * var(--max-percent)));
	margin-top: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.character_faceList{
	width: 28.8889%;
}
.character_faceList img{
	width: 100%;
}


.character_name-en{
	font-family: var(--font-en-hand);
	font-size: min(calc(48 / var(--vw-min) * 100vw), 48px);
	color: var(--color-brown);
	width: calc(100% + min(calc(64 / var(--vw-min) * 100vw), calc(64px * var(--max-percent))));
	margin-left: max(calc(-12 / var(--vw-min) * 100vw), calc(-12px * var(--max-percent)));
	padding-top: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
}


.chara_mark{
	width: min(calc(120 / var(--vw-min) * 100vw), 120px);
	height: min(calc(120 / var(--vw-min) * 100vw), 120px);
	position: absolute;
	top: 0;
	right: 0;
	background: url(../img/common/mark1.png) no-repeat center / contain;
	margin-top: min(calc(16 / var(--vw-min) * 100vw), calc(16px * var(--max-percent)));
	margin-right: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
}

@media screen and (max-width:768px){
	.character_names{
		padding-bottom: calc(48 / var(--vw-min) * 100vw);
	}

	/* catch */
	.character_catch{
		margin-bottom: calc(16 / var(--vw-min) * 100vw);
	}
	.character_catch > span{
		padding: 0 calc(26 / var(--vw-min) * 100vw);
	}
	.character_catch > span:before{
		width: calc(16 / var(--vw-min) * 100vw);
	}
	.character_catch > span:after{
		width: calc(16 / var(--vw-min) * 100vw);
	}
	

	/* charaName */
	.character_name{
		font-size: calc(32 / var(--vw-min) * 100vw);
		line-height: 1.5;
	}
	.character_cv{
		padding-top: calc(12 / var(--vw-min) * 100vw);
	}

	
	/* text */
	.character_text{
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 20%) 0px, rgba(0, 0, 0, 20%) var(--sp-size-2), transparent var(--sp-size-2));
		background-size: calc(48 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw);
		border-bottom-width: var(--sp-size-2);
	}
	
	.character_faceLists{
		gap: calc(24 / var(--vw-min) * 100vw);
		justify-content: center;
		margin-top: calc(32 / var(--vw-min) * 100vw);
	}
	.character_faceList{
		width: calc(184 / var(--vw-min) * 100vw);
	}

	.character_name-en{
		font-size: calc(72 / var(--vw-min) * 100vw);
		margin-top: calc(32 / var(--vw-min) * 100vw);
	}
	.chara_mark{
		width: calc(184 / var(--vw-min) * 100vw);
		height: calc(184 / var(--vw-min) * 100vw);
		margin-top: calc(28 / var(--vw-min) * 100vw);
		margin-right: calc(30 / var(--vw-min) * 100vw);
	}
}



/** SCROLL ANIMATION **/
.characterSwiperWrap{
	transform: translateX(100%);
	transition: transform .8s ease;
}
.is-ani .characterSwiperWrap{
	transform: translateX(0%);
}

.character_mainImage,
.character_catch,
.character_name,
.character_cv,
.character_text,
.character_name-en{
	opacity: 0;
	transform: translateY(25px);
	transition: transform .3s cubic-bezier(.17,.67,.45,1.03) .4s, opacity .3s ease .4s;
}
.is-ani .swiper-slide-active .character_mainImage,
.is-ani .swiper-slide-active .character_catch,
.is-ani .swiper-slide-active .character_name,
.is-ani .swiper-slide-active .character_cv,
.is-ani .swiper-slide-active .character_text,
.is-ani .swiper-slide-active .character_name-en{
	opacity: 1;
	transform: translateY(0px);
}


.character_faceList{
	opacity: 0;
	transform: translateX(12.5%) rotate(30deg);
	transition: transform .6s cubic-bezier(.17,.67,.45,1.03) .4s, opacity .3s ease .4s;
}
.is-ani .swiper-slide-active .character_faceList{
	opacity: 1;
	transform: translateX(0%) rotate(0deg);
}
.character_faceList:nth-of-type(3){
	transition-delay: .5s, .5s;
}
.character_faceList:nth-of-type(2){
	transition-delay: .6s, .6s;
}
.character_faceList:nth-of-type(1){
	transition-delay: .7s, .7s;
}

.characterThumbList{
	transform: translateY(12.5%);
	opacity: 0;
	transition: transform .6s cubic-bezier(.17,.67,.45,1.03) .6s, opacity .3s ease .6s;
}
.is-ani .characterThumbList{
	opacity: 1;
	transform: translateY(0%);
}