@charset "utf-8";
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
#character.content{
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}
#character .cont_h2{
	max-width: var(--max-width);
	padding-left: min(8.3334%, calc(100px * var(--max-percent)));
	padding-right: min(8.3334%, calc(100px * var(--max-percent)));
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width:767px){
	#character .cont_h2,
	#character .contentIn{
		padding-left: 0;
		padding-right: 0;
	}
}

/**
* characterSelectLists
**/
.characterSelector{
	width: 100%;
	max-width: var(--max-width);
	padding-left: min(8.3334%, calc(100px * var(--max-percent)));
	padding-right: min(8.3334%, calc(100px * var(--max-percent)));
	margin: 0 auto;
}

.characterSelectLists{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.characterSelectList,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.characterSelectList {
	width: max(7%, 70px);
	height: auto;
	margin: 0.5%;
	border-radius: unset;
	opacity: 1;
	background: unset;
}

.btn_characterSelect img{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
	transition: .3s ease;
}
.btn_characterSelect:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--color-blue);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: .3s ease;
}

@media (hover: hover) and (pointer: fine){
	.btn_characterSelect:hover img{
		transform: scale(1.075);
	}
	.btn_characterSelect:hover:after{
		opacity: 40%;
	}
}

/* active */
.characterSelectList.swiper-pagination-bullet-active .btn_characterSelect:after{
	opacity: 1;
}

@media screen and (max-width:767px){
	.characterSelector{
		padding-left: var(--sp-size-40);
		padding-right: var(--sp-size-40);
	}
	.characterSelectList,
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.characterSelectList {
		width: min(9.3334vw, 70px);
		margin: min(0.6667vw, 5px);
	}
}



.characterContIn{
	width: 100%;
	position: relative;
}

/**
* characterSwiper
**/
.characterSwiper{
	width: 100%;
	max-width: var(--max-width);
	padding-left: min(8.3334%, calc(100px * var(--max-percent)));
	padding-right: min(8.3334%, calc(100px * var(--max-percent)));
}
.characterMainList{
	width: 100%;
}
.characterMain{
	width: 100%;
	display: flex;
	align-items: center;
}


.characterMain__contWrap{
	width: 57%;/* 570 */
	position: relative;
	padding-top: calc(6px + 5%);
}
.characterMain__cont{
	width: 100%;
}
.characterMain__cont{
	position: relative;
	padding: 40px;
	text-shadow: 2px 2px 3px #FFF, -2px -2px 3px #FFF, -2px 2px 3px #FFF, 0px 0px 6px #FFF, 2px 2px 3px #FFF, -2px -2px 3px #FFF, -2px 2px 3px #FFF, 0px 0px 6px #FFF;
}
.characterMain__cont:after{
	background: url(../img/character/characte_contbg.jpg) no-repeat center / cover;
}
.characterMain__contIn{
	position: relative;
	z-index: 2;
	line-height: 2;
}

.characterName{
	padding-bottom: 40px;
	position: relative;
}
.characterName:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 9px;
	background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue) 22%, transparent 22%, transparent 56%, var(--color-blue) 56%, var(--color-blue) 100%);
}
.characterName__name{
	font-weight: 700;
	font-size: 32px;
	line-height: 1.25;
	color: var(--color-blue);
	margin-bottom: 12px;
}
.characterName__cv{
	display: inline-flex;
	align-items: center;
}
.characterName__cv_cv{
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #fff;
	font-family: var(--font-eng);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-blue);
	margin-right: 12px;
}
.characterName__cv_txt{
	display: inline-block;
	font-size: 22px;
	line-height: 1;
	color: var(--color-blue);
	font-weight: 700;
}
.btn_comment{
	display: inline-block;
	margin-left: 10px;
	width: 25px;
	height: 22px;
	-webkit-mask: url(../img/common/icon_fukidashi.svg) no-repeat center / contain;
	mask: url(../img/common/icon_fukidashi.svg) no-repeat center / contain;
	background-color: var(--color-blue);
	transition: .3s ease;
}

@media (hover: hover) and (pointer: fine){
	.btn_comment:hover{
		transform: scale(1.075);
	}
}

.characterText{
	font-size: 18px;
	font-weight: 500;
	line-height: 2;
	padding-top: 24px;
}

/* accent */ 
.characterMain__contAccentWrap{
	position: absolute;
	top: -6px;
	left: -6px;
	right: -6px;
	bottom: -6px;
	pointer-events: unset;
}
.characterMain__contAccent{
	position: absolute;
	left: 0;
	right: 0;
	height: 12px;
}
.characterMain__contAccent.-t{
	top: 0;
}
.characterMain__contAccent.-b{
	bottom: 0;
}
.characterMain__contAccent:before,
.characterMain__contAccent:after{
	content: '';
	position: absolute;
	top: 0;
	width: 12px;
	height: 12px;
	mask: url(../img/common/icon_star.svg) no-repeat center / contain;
	-webkit-mask: url(../img/common/icon_star.svg) no-repeat center / contain;
	background-color: var(--color-blue);
}
.characterMain__contAccent:before{
	left: 0;
}
.characterMain__contAccent:after{
	right: 0;
}

/* inFrame */
.characterMain__inFrameWrap{
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	bottom: 8px;
	overflow: hidden;
	pointer-events: none;
	z-index: 3;
}
.characterMain__inFrame_line{
	position: absolute;
}
.characterMain__inFrame_line.-x{
	top: 0;
	bottom: 0;
	left: 10px;
	right: 10px;
}
.characterMain__inFrame_line.-x:before,
.characterMain__inFrame_line.-x:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: var(--color-blue);
}
.characterMain__inFrame_line.-x:before{
	top: 0;
}
.characterMain__inFrame_line.-x:after{
	bottom: 0;
}
.characterMain__inFrame_line.-y{
	top: 10px;
	bottom: 10px;
	right: 0;
	left: 0;
}
.characterMain__inFrame_line.-y:before,
.characterMain__inFrame_line.-y:after{
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	background-color: var(--color-blue);
}
.characterMain__inFrame_line.-y:before{
	left: 0;
}
.characterMain__inFrame_line.-y:after{
	right: 0;
}

.characterMain__inFrame_side{
	position: absolute;
	left: 0;
	right: 0;

}
.characterMain__inFrame_side::before,
.characterMain__inFrame_side::after{
	content: '';
	position: absolute;
	width: 48px;
	height: 1px;
	background-color: var(--color-blue);
}

.characterMain__inFrame_side.-t{
	top: 0;
}
.characterMain__inFrame_side.-t::before{
	left: -38px;
	transform: rotate(-48deg);
	transform-origin: right bottom;
}
.characterMain__inFrame_side.-t::after{
	right: -38px;
	transform: rotate(48deg);
	transform-origin: left bottom;
}

.characterMain__inFrame_side.-b{
	bottom: 0;
}
.characterMain__inFrame_side.-b::before{
	left: -38px;
	transform: rotate(48deg);
	transform-origin: right top;
}
.characterMain__inFrame_side.-b::after{
	right: -38px;
	transform: rotate(-48deg);
	transform-origin: left top;
}


.characterMain__imageWrap{
	order: -1;
	width: 39%;/* 390px */
	flex-shrink: 0;
}
.characterMain__imageWrap img{
	width: 100%;
}


@media screen and (max-width:767px){
	.characterContIn{
		margin-top: var(--sp-size-12);
		padding-bottom: var(--sp-size-8);
	}
	.characterSwiper{
		padding-left: var(--sp-size-32);
		padding-right: var(--sp-size-32);
		padding-bottom: var(--sp-size-24);
	}
	.characterMain{
		flex-direction: column;
	}

	.characterMain__contWrap{
		padding-top: var(--sp-size-32);
		margin-top: 0;
		padding-left: var(--sp-size-8);
		padding-right: var(--sp-size-8);
		width: 100%;
	}
	.characterMain__cont{
		padding: var(--sp-size-40);		
	}

	.characterName{
		padding-bottom: 0;
	}
	.characterName:after{
		content: unset;
	}
	.characterName__name{
		font-size: var(--sp-size-40);
		margin-bottom: var(--sp-size-12);
	}
	.characterName__cv_cv{
		width: var(--sp-size-40);
		height: var(--sp-size-40);
		font-size: var(--sp-size-26);
		margin-right: var(--sp-size-12);
	}
	.characterName__cv_txt{
		font-size: var(--sp-size-28);
	}
	.btn_comment{
		width: min(5.0667vw, 38px);
		height: min(4.5334vw, 34px);
		margin-left: var(--sp-size-8);
	}

	.characterText{
		font-size: var(--sp-size-24);
		padding-top: var(--sp-size-32);
	}

/* accent */ 
	.characterMain__contAccentWrap{
		position: absolute;
		top: calc(var(--sp-size-6) * -1);
		left: calc(var(--sp-size-6) * -1);
		right: calc(var(--sp-size-6) * -1);
		bottom: calc(var(--sp-size-6) * -1);
	}
	.characterMain__contAccent{
		height: var(--sp-size-12);
	}
	.characterMain__contAccent:before,
	.characterMain__contAccent:after{
		width: var(--sp-size-12);
		height: var(--sp-size-12);
	}

/* inFrame */
	.characterMain__inFrameWrap{
		top: var(--sp-size-8);
		left: var(--sp-size-8);
		right: var(--sp-size-8);
		bottom: var(--sp-size-8);
	}
	.characterMain__inFrame_line.-x{
		left: var(--sp-size-10);
		right: var(--sp-size-10);
	}
	.characterMain__inFrame_line.-x:before,
	.characterMain__inFrame_line.-x:after{
		height: var(--sp-size-2);
	}
	.characterMain__inFrame_line.-y{
		top: var(--sp-size-10);
		bottom: var(--sp-size-10);
	}
	.characterMain__inFrame_line.-y:before,
	.characterMain__inFrame_line.-y:after{
		width: var(--sp-size-2);
	}
	.characterMain__inFrame_side::before,
	.characterMain__inFrame_side::after{
		width: var(--sp-size-48);
		height: var(--sp-size-2);
	}
	.characterMain__inFrame_side.-t::before{
		left: max(-5.0667vw, -38px);
	}
	.characterMain__inFrame_side.-t::after{
		right: max(-5.0667vw, -38px);
	}
	.characterMain__inFrame_side.-b::before{
		left: max(-5.0667vw, -38px);
	}
	.characterMain__inFrame_side.-b::after{
		right: max(-5.0667vw, -38px);
	}

	.characterMain__imageWrap{
		width: min(52vw, 390px);
		margin: 0 auto;
	}
}

/**
* prevnextWrap
**/
.swiper-prevnextWrap{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 2;
}
.swiper-prevnextWrap button{
	pointer-events: auto;	
}
@media screen and (max-width:767px){
	.swiper-prevnextWrap{
		bottom: unset;
		height: min(106.6667vw, 800px);
	}
	.swiper-prevnextInWrap{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
}


/** is-ani **/
.characterSelectLists{
	opacity: 0;
	transform: translateY(25%);
	transition: opacity .3s ease, transform .4s ease;
}

.characterMain__cont{
	transform: translateY(10%);
	opacity: 0;
	transition: .6s ease .1s;
}
.characterName__name{
	opacity: 0;
	transform: translateY(10px);
	transition: .4s cubic-bezier(.25,.46,.45,.94) .4s;
}
.characterName__cv{
	opacity: 0;
	transform: translateY(20px);
	transition: .4s cubic-bezier(.25,.46,.45,.94) .45s;
}
.characterName:after{
	opacity: 0;
	transform: translateY(20px);
	transition: .4s cubic-bezier(.25,.46,.45,.94) .5s;
}
.characterText{
	opacity: 0;
	transform: translateY(20px);
	transition: .4s cubic-bezier(.25,.46,.45,.94) .55s;
}

.characterMain__imageWrap{
	opacity: 0;
	transform: translate(25%,0);
	transition: .4s ease .4s;
}
@media screen and (max-width:767px){
	.characterMain__imageWrap{
		opacity: 0;
		transform: translate(0,5%);
	}
}

.characterMainList.swiper-slide-active .characterName__name,
.characterMainList.swiper-slide-active .characterName__cv,
.characterMainList.swiper-slide-active .characterName:after,
.characterMainList.swiper-slide-active .characterText{
	opacity: 1;
	transform: translateY(0%);
}


#character .contentIn.is-ani .characterSelectLists{
	opacity: 1;
	transform: translateY(0%);
}
#character .contentIn.is-ani .characterMainList.swiper-slide-active .characterMain__cont{
	transform: translateY(0%);
	opacity: 1;
}
#character .contentIn.is-ani .characterMainList.swiper-slide-active .characterMain__imageWrap{
	opacity: 1;
	transform: translate(0%,0);
}