@charset "utf-8";
/**-----------------------------**
 * CHARACTER
**-----------------------------**/
#character .cont_h2{
	padding-top: 239px;
}
#character .cont_h2_txt--eng{
	width: 441px;
	padding-top: 81px;
	background-image: url(../img/top/character_contTitle.svg);
}
#character .contentIn{
	width: 100%;
}
@media screen and (max-width: 767px){
	#character .cont_h2{
		padding-top: 112px;
	}
	#character .cont_h2_txt--eng{
		width: 100%;
		padding-top: 48px;
	}
}

.characterCont{
	width: 107.6924%;/* 100% + 80[40*2] = 1120 */
	margin-left: -3.8462%;/* -40 */
	position: relative;
	display: flex;
}
.characterSwiperWrap{
	width: 92.8572%;/* 1040 */
	padding-left: 10.7143%;/* 120 */
	padding-right: 17.8572%;/* 200 */
	margin-left: auto;
}
.characterSwiperInWrap{
	width: 100%;
	max-width: calc(720px * 1.6);
	position: relative;
	margin: 0 auto;
}

.characterMain__img{
	width: 80%;/* 576 */
	margin: 0 auto;
}

.characterMain__img img{
	width: 100%;
}
.characterDetail{
	width: 100%;
	padding: 0 5.5556%;
	position: relative;
}

.characterName{
	margin-bottom: 24px;
}
.characterName__eng{
	display: block;
	font-size: 58px;
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 0.85;
	font-weight: 700;
	margin-bottom: 24px;
}
.characterName__ja{
	font-size: 20px;
	line-height: 1;
}
.characterCV{
	font-size: 1;
	font-size: 16px;
}
.characterCV span{
	display: inline-block;
	font-family: 'Roboto Condensed', sans-serif;
	color: #d62b40;
	padding-right: 10px;
}
.characterDetail__text{
	padding-top: 32px;
	font-size: 16px;
	line-height: 2;
}

@media screen and (max-width: 767px){
	.characterCont{
		width: 100%;
		margin-left: unset;
		flex-direction: column;
	}
	.characterSwiperWrap{
		width: 100%;
		padding-left: unset;
		padding-right: unset;
	}
	.characterSwiperInWrap{
		max-width: 100%;
	}
	.characterMain__img{
		width: 100%;
	}
	.characterDetail{
		padding: 0 7.334%;
	}

	.characterName{
		margin-bottom: 16px;
	}
	.characterName__eng{
		font-size: 3.0rem;
		margin-bottom: 14px;
	}
	.characterName__ja{
		font-size: 1.4rem;
	}
	.characterCV{
		font-size: 1.2rem;
	}
	.charaCV span{
		padding-right: 1em;
	}
	.characterDetail__text{
		padding-top: 24px;
		font-size: 1.2rem;
	}
}



/**
* Thumb
**/
.characterThumbs{
	width: 6.6667%;/* 80 */
}
@media screen and (min-width:768px){
	.characterThumbs{
		order: -1;
	}
}
.swiper-pagination-bullets.swiper-pagination-horizontal.characterThumbLists,
.characterThumbLists{
	width: 100%;
	max-width: calc(80px * 1.6);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
	bottom: unset;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.characterThumbList,
.characterThumbList{
	width: 100%;
	height: auto;
	position: relative;
	opacity: 1;
	border-radius: unset;
	display: block;
	margin: unset;
}
.characterThumb{
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 100%;
	border: unset;
	background-color: #1d1d1d;
	transition: .3s ease;
}
.characterThumb:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #d62b40;
	mix-blend-mode: multiply;
	opacity: 0;
	transition: .3s ease;
}
.swiper-pagination-bullet-active .characterThumb{
	background-color: #d62b40;
}
.swiper-pagination-bullet-active .characterThumb:after{
	opacity: 1;
}
@media screen and (hover:hover) and (pointer: fine){
	.characterThumb:hover::before,
	.characterThumb:hover::after{
		opacity: 0;
	}
}
.characterThumb img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 767px){
	.characterThumbs{
		width: 100%;
		padding: 0 7.334%;
		margin-top: 32px;
	}
	.swiper-pagination-bullets.swiper-pagination-horizontal.characterThumbLists,
	.characterThumbLists{
		max-width: 100%;
		gap: 8px;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.characterThumbList,
	.characterThumbList{
		width: calc((100% - (8px * 4)) / 5);
	}
}


/**
 * .slidenavWrap (swiper->navigation)
 */
 .characterSwiper__navWrap{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}
.slidenavWrap{
	width: 100%;
	padding-top: 127.5%;/* 918 */
	position: relative;
}
.slide-change-btn{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: .3s ease;
	width: 40px;
	height: 80px;
	pointer-events: auto;
}
.slide-change-btn.swiper-button-disabled{
	opacity: 0;
	pointer-events: none;
}
.slide-change-btn.--next{
	right: -24px;
	background-image: url(../img/common/arrow_next.svg);
}
.slide-change-btn.--next:hover{
	transform: translateX(8px);
}
.slide-change-btn.--prev{
	left: -24px;
	background-image: url(../img/common/arrow_prev.svg);
}
.slide-change-btn.--prev:hover{
	transform: translateX(-8px);
}

@media screen and (max-width: 767px){
	.characterSwiper__navWrap{
		display: none;
	}
	.slidenavWrap{
		position: absolute;
		width: 74.4%;
		margin: 12.8% auto 0;
	}
	.slide-change-btn{
		width: 24px;
		height: 48px;
	}
	.slide-change-btn.--next{
		right: -12px;
	}
	.slide-change-btn.--prev{
		left: -12px;
	}
}