@charset "utf-8";
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
@media screen and (min-width:769px){
	.pMain{
		padding-top: min(calc(125 / var(--vw-min) * 100vw), calc(125px * var(--max-percent)));
	}
}

.pContent{
	width: min(calc(1040 / var(--vw-min) * 100vw), calc(1040px * var(--max-percent)));
	min-width: min(1040px, 100%);
}
.pContentIn{
	padding: 0 11.5385%;/* 0 120 */
	min-height: min(calc(392 / var(--vw-min) * 100vw), 392px);
	position: relative;
}


.pContentTitle{
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 11.5385%;
	z-index: 2;
}

.pContentIncont{
	width: 100%;/* 800 */
}

@media screen and (max-width:768px){
	.pContent{
		width: 100%;
		min-width: 100%;
		padding-top: calc(30 / var(--vw-min) * 100vw);
	}
	.pContentIn{
		display: block;
		padding: 0;
	}
	.pContentTitle{
		margin-left: calc(48 / var(--vw-min) * 100vw);
	}
	.pContentTitle--title{
		font-size: calc(64 / var(--vw-min) * 100vw);
	}
	.pContentIncont{
		width: 100%;
		padding-top: 0;
	}
}




/*-----------------------------------------------
 * CHARACTER - Cont
-------------------------------------------------*/
.characterCont{
	width: 100%;
	display: flex;
	align-items: center;
}
@media screen and (max-width:768px){
	.characterCont{
		flex-direction: column;
	}
}

/**
* Detail
**/
.characterName{
	display: flex;
	align-items: center;
	padding-bottom: min(calc(48 / var(--vw-min) * 100vw), 48px);
}
.characterName--name{
	display: inline-block;
	font-size: min(calc(48 / var(--vw-min) * 100vw), 48px);
	font-weight: 700;
	line-height: 1;
	padding-right: min(calc(24 / var(--vw-min) * 100vw), 24px);
}
.characterName--cv{
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.characterName--cv__title{
	display: inline-block;
	font-family: var(--font-en-main);
	font-size: min(calc(17 / var(--vw-min) * 100vw), 17px);
	font-weight: 500;
	padding-right: 1em;
	position: relative;
}
.characterName--cv__title:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(calc(15 / var(--vw-min) * 100vw), 15px);
	height: min(calc(15 / var(--vw-min) * 100vw), 15px);
	margin: auto 0;
	-webkit-mask: url(../img/common/icon_star.svg) no-repeat center / contain;
	mask: url(../img/common/icon_star.svg) no-repeat center / contain;
	background-color: #fff;
}
.characterName--cv__name{
	display: inline-block;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	padding-left: 0.25em;
}

@media screen and (max-width:768px){
	.characterDetail{
		width: 100%;
		padding: 0 calc(24 / var(--vw-min) * 100vw);
	}
	.characterName{
		padding-bottom: calc(64 / var(--vw-min) * 100vw);
	}
	.characterName--name{
		font-size: calc(40 / var(--vw-min) * 100vw);
		padding-right: calc(12 / var(--vw-min) * 100vw);
	}
	.characterName--cv__title{
		font-size: calc(15 / var(--vw-min) * 100vw);
	}
	.characterName--cv__title:after{
		width: calc(14 / var(--vw-min) * 100vw);
		height: calc(14 / var(--vw-min) * 100vw);
	}
	.characterName--cv__name{
		font-size: calc(15 / var(--vw-min) * 100vw);
	}
}




/**
* Image
**/
.characterImage{
	width: 52.5%;/* 420 */
	padding-right: 5%;/* 40 */
	position: relative;
	flex-shrink: 0;
	order: -1;
}
.characterImageCont{
	width: 87.3685%;/* 332 */
	position: relative;
	margin-left: auto;
}

.characterImage__bg{
	position: absolute;
	width: 72.2892%;/* 240 */
	top: 0;
	left: 0;
}
.characterImage__bg img{
	width: 100%;
}
.characterImage__img{
	width: 64.4579%;/* 214 */
	position: relative;
	margin-left: auto;
}
.characterImage__img img{
	width: 100%;
}
@media screen and (max-width:768px){
	.characterImage{
		width: 100%;
		padding-right: unset;
		padding-left: calc(91 / var(--vw-min) * 100vw);
	}
	.characterImageCont{
		width: calc(261 / var(--vw-min) * 100vw);
		height: calc(372 / var(--vw-min) * 100vw);
		margin-left: unset;
	}
	.characterImage__bg{
		width: calc(192 / var(--vw-min) * 100vw);
		position: relative;
		padding-top: calc(16 / var(--vw-min) * 100vw);
	}
	.characterImage__img{
		width: calc(164 / var(--vw-min) * 100vw);
		position: absolute;
		top: 0;
		right: 0;
	}
}



/**
* InPage - Loading
**/
/* ページの内容 */
.characterDetailIn{
	opacity: 0;
	filter: blur(4px);
	transition: opacity .45s ease, filter .8s cubic-bezier(.31,.57,.62,1) .2s;
}


.characterName span{
	opacity: 0;
	filter: blur(4px);
	transition: opacity .3s ease, filter .8s cubic-bezier(.31,.57,.62,1), transform .4s cubic-bezier(.31,.57,.62,1);
}
.characterName--name{
	transform: translateY(20%);
}
.characterName--cv{
	transform: translateY(-70%);
}


.characterImage__img{
	transform: translateX(-16%);
	opacity: 0;
	filter: blur(6px);
	transition: opacity .4s ease, filter .8s cubic-bezier(.31,.57,.62,1), transform .6s cubic-bezier(.31,.57,.62,1);
}
.characterImage__bg{
	transform: scale(92%);
	opacity: 0;
	filter: blur(8px);
	transition: opacity .4s ease, filter 1s cubic-bezier(.31,.57,.62,1), transform 1s cubic-bezier(.31,.57,.62,1);
}


body.--load.--is-loaded .characterDetailIn{
	opacity: 1;
	filter: blur(0px);
	transition-delay: .4s;
}
body.--load.--is-loaded .characterName span{
	opacity: 1;
	transform: translateY(0%);
	filter: blur(0px);
	transition-delay: .4s;
}

body.--load.--is-loaded .characterImage__img{
	opacity: 1;
	transform: translateX(0%);
	filter: blur(0px);
}
body.--load.--is-loaded .characterImage__bg{
	opacity: 1;
	transform: scale(100%);
	filter: blur(0px);
	transition-delay: .05s;
}


.pBg_img img{
	object-position: 100% 100%;
}