@charset "UTF-8";
/* CSS Document */

#ctsWrapper.interviewPage{
	padding-top: 80px;
}


/*
	kv
-----------------------------------------------------------------------------------------------*/
#kvWrapper{
	height: 550px;
	margin-bottom: 130px;
	position: relative;
}
#kvWrapper .ctsArea{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}

/* ph
============================== */
#kvWrapper .phArea{
	width: calc((100vw - 1200px)/ 2 + 800px);
	min-width: 800px;
	height: 100%;
	position: absolute;
	z-index: 1;
	overflow: hidden;
}
#kvWrapper .phArea img{
	object-fit: cover;
	object-position: center top;
	width: 100%;
	height: 100%;
}

/* dataBox
============================== */
#kvWrapper .dataBox{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 320px;
	position: relative;
	z-index: 2;
}

/* nameEn */
#kvWrapper .dataBox .nameEn{
	background: var(--clrGrd);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 8rem;
	font-family: var(--fEn);
	font-weight: 100;
	font-style: italic;
	line-height: 70%;
	letter-spacing: 0;
	white-space: nowrap;
	padding: 10px;
	transform: translateX(15px);
}

/* nameJp */
#kvWrapper .dataBox .nameJp{
	width: 100%;
	background-color: #333;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 150%;
	padding: 10px;
	margin-top: 20px;
}

/* txt */
#kvWrapper .dataBox .txtHS{
	margin-top: 50px;
}

/* anm
============================== */
/* ph */
#kvWrapper .phArea{
	opacity: 0;
	animation: anmFadeLeft 1s ease 0.5s forwards;
}
#kvWrapper .phArea img{
	opacity: 0;
	animation: anmBlur 1.5s ease 0.5s forwards;
}

/* dataBox */
#kvWrapper .dataBox{
	opacity: 0;
	animation: anmFadeRight 1s ease 0.5s forwards, anmBlur 1.5s ease 0.5s forwards;
}


/*
	インタビューエリア
-----------------------------------------------------------------------------------------------*/
#interviewWrapper{
	padding-bottom: 210px;
}
.listInterview{
	display: flex;
	flex-direction: column;
	gap: 130px 0;
}
.listInterview li{
	display: flex;
	align-items: center;
	gap: 0 80px;
	position: relative;
}

/* ph
============================== */
.listInterview [class ^= phArea]{
	position: relative;
}
.listInterview [class ^= phArea]::after{
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--clrGrd);
	position: absolute;
	left: 30px;
	z-index: -1;
}
@media print, screen and (min-width:813px){
	.listInterview .phAreaMain::after{
		width: calc(100% + (100vw - 1140px)/2);
		min-width: calc(100% + 30px);
		height: calc(100% + 60px);
		top: 50%;
		transform: translateY(-50%);
	}
}

/* item
============================== */
.listInterview .item{
	position: absolute;
}

@media print, screen and (min-width:813px){
	/* INTERVIEW 01
	============================== */
	/* txtArea */
	.listInterview li:nth-of-type(1) .txtArea{
		width: 550px;
	}

	/* ph */
	.listInterview li:nth-of-type(1) .phAreaMain::after{
		width: calc((100% + 190px) + (100vw - 1140px)/2);
		min-width: calc(100% + 220px);
	}

	/* item */
	.listInterview li:nth-of-type(1) .item{
		top: calc(50% - 270px);
		right: -10px;
		transform: translateY(-50%);
	}

	/* INTERVIEW 02
	============================== */
	.listInterview li:nth-of-type(2){
		flex-direction: row-reverse;
	}

	/* txtArea */
	.listInterview li:nth-of-type(2) .txtArea{
		width: 480px;
	}

	/* ph */
	.listInterview li:nth-of-type(2) .phAreaMain::after{
		left: auto;
		right: 30px;
	}

	/* INTERVIEW 03
	============================== */
	.listInterview li:nth-of-type(3){
		flex-direction: column-reverse;
		align-items: flex-end;
		gap: 110px 0;
	}

	/* txtArea */
	.listInterview li:nth-of-type(3) .txtArea{
		width: 740px;
	}

	/* phSub */
	.listInterview li:nth-of-type(3) .phAreaSub{
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.listInterview li:nth-of-type(3) .phAreaSub::after{
		top: 30px;
	}

	/* item */
	.listInterview li:nth-of-type(3) .item{
		bottom: -95px;
		left: 195px;
	}
}

/* anm
============================== */
.listInterview li.jsAnmStart{
	opacity: 1;
}
@media print, screen and (min-width:813px){
	.listInterview li .txtArea,
	.listInterview li [class ^= phArea]{
		opacity: 0;
	}
	.listInterview li.jsAnmStart:nth-of-type(1) .txtArea,
	.listInterview li.jsAnmStart:nth-of-type(2) .phAreaMain{
		animation: anmFadeLeft 1s ease 0.5s forwards;
	}
	.listInterview li.jsAnmStart:nth-of-type(1) .phAreaMain,
	.listInterview li.jsAnmStart:nth-of-type(2) .txtArea,
	.listInterview li.jsAnmStart:nth-of-type(3) .txtArea,
	.listInterview li.jsAnmStart:nth-of-type(3) .phAreaMain{
		animation: anmFadeRight 1s ease 0.5s forwards;
	}
}


/*
	1日の流れ
-----------------------------------------------------------------------------------------------*/
#oneDayWrapper{
	padding: 80px 0;
}
#oneDayWrapper .titItalicM{
	margin-top: -105px;
}

@media print, screen and (min-width:813px){
	/* page02
	============================== */
	.interviewPage.page02 .cmnListFlow{
		gap: 0 20px;
	}
	.interviewPage.page02 .cmnListFlow li{
		width: calc((100% - 120px)/7);
	}

	/* page04
	============================== */
	.interviewPage.page04 .cmnListFlow{
		gap: 0 20px;
	}
	.interviewPage.page04 .cmnListFlow li{
		width: calc((100% - 140px)/8);
	}
}


/*
	入社を希望している方へ
-----------------------------------------------------------------------------------------------*/
#messageWrapper{
	padding: 3px 0;
	margin-bottom: 100px;
}
#messageWrapper .ctsArea{
	display: flex;
	gap: 0 3px;
}

/* txtArea
============================== */
#messageWrapper .txtArea{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 550px;
	background-color: #fff;
	padding: 60px;
}

/* phArea
============================== */
#messageWrapper .phArea{
	display: flex;
	gap: 0 3px;
}
#messageWrapper .phArea img{
	object-fit: cover;
}

/* box */
#messageWrapper .phArea .box{
	display: flex;
	flex-direction: column;
	gap: 3px 0;
}
#messageWrapper .phArea .box img{
	height: calc(100% / 2);
}


@media screen and (max-width:812px){
	#ctsWrapper.interviewPage{
		padding-top: 30px;
	}
	
	
	/*
		kv
	-----------------------------------------------------------------------------------------------*/
	#kvWrapper{
		height: auto;
		margin-bottom: 80px;
	}
	#kvWrapper .ctsArea{
		flex-direction: column;
		justify-content: flex-start;
	}
	
	/* ph
	============================== */
	#kvWrapper .phArea{
		width: 100%;
		min-width: initial;
		height: 400px;
		position: relative;
	}
	
	/* dataBox
	============================== */
	#kvWrapper .dataBox{
		align-items: center;
		width: 100%;
		margin-top: 20px;
	}
	
	/* nameEn */
	#kvWrapper .dataBox .nameEn{
		font-size: clamp(4rem, 10vw, 8rem);
		transform: translateX(0);
	}
	
	/* nameJp */
	#kvWrapper .dataBox .nameJp{
		text-align: center;
		padding: 8px;
		margin-top: 10px;
	}
	
	/* txt */
	#kvWrapper .dataBox .txtHS{
		margin-top: 20px;
	}
	
	/* anm
	============================== */
	/* ph */
	#kvWrapper .phArea{
		animation: anmFadeIn 1s ease 0.5s forwards;
	}
	
	/* dataBox */
	#kvWrapper .dataBox{
		animation: anmFadeUp 1s ease 0.5s forwards, anmBlur 1.5s ease 0.5s forwards;
	}
	
	
	/*
		インタビューエリア
	-----------------------------------------------------------------------------------------------*/
	#interviewWrapper{
		padding-bottom: 160px;
	}
	.listInterview{
		gap: 80px 0;
	}
	.listInterview li{
		flex-direction: column;
		gap: 30px 0;
	}
	
	/* ph
	============================== */
	.listInterview [class ^= phArea]{
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.listInterview [class ^= phArea]::after,
	.listInterview .phAreaMain::after{
		width: 100%;
		height: 100%;
		top: 10px;
		left: 10px;
	}

	/* INTERVIEW 01
	============================== */
	/* item */
	.listInterview li:nth-of-type(1) .item{
		width: 100px;
		top: -60px;
		right: -5px;
		z-index: -1;
	}

	/* INTERVIEW 03
	============================== */
	/* phSub */
	.listInterview li:nth-of-type(3) .phAreaSub{
		width: 115px;
		height: 150px;
		position: absolute;
		right: 30px;
		bottom: -90px;
	}
	/* item */
	.listInterview li:nth-of-type(3) .item{
		width: 80px;
		bottom: -115px;
		right: 110px;
	}
	
	/* anm
	============================== */
	
	
	/*
		1日の流れ
	-----------------------------------------------------------------------------------------------*/
	#oneDayWrapper{
		padding: 60px 0;
	}
	#oneDayWrapper .titItalicM{
		margin-top: -80px;
	}
	
	
	/*
		入社を希望している方へ
	-----------------------------------------------------------------------------------------------*/
	#messageWrapper{
		padding: 4px 0;
		margin-bottom: 60px;
	}
	#messageWrapper .ctsArea{
		flex-direction: column;
		align-items: center;
		gap: 4px 0;
	}
	
	/* txtArea
	============================== */
	#messageWrapper .txtArea,
	#messageWrapper .phArea{
		width: calc(100% + 32px);
		max-width: 460px;
	}
	#messageWrapper .txtArea{
		padding: 40px 20px;
	}
	
	/* phArea
	============================== */
	#messageWrapper .phArea{
		flex-direction: column-reverse;
		gap: 4px 0;
	}
	
	/* box */
	#messageWrapper .phArea .box{
		flex-direction: row;
		gap: 0 4px;
	}
	#messageWrapper .phArea .box img{
		width: calc((100% - 4px)/2);
		height: initial;
	}

	/* anm
	============================== */
	#messageWrapper .txtArea.jsAnmStart,
	#messageWrapper .phArea.jsAnmStart{
		animation: anmFadeUp 1s ease 0.5s forwards;
	}
}