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

/*
	header
-----------------------------------------------------------------------------------------------*/
@media print, screen and (min-width:813px){
	#headerWrapper .titMenu.people{
		color: var(--clrBase);
	}
	#headerWrapper .titMenu.people::after{
		opacity: 1;
	}
}


/*
	kv
-----------------------------------------------------------------------------------------------*/
#kvWrapper{
	height: calc(100vh - 90px);
	min-height: 600px;
	margin: 10px;
	position: relative;
	overflow: hidden;
}
#kvWrapper .inBox{
	display: flex;
	align-items: center;
	width: var(--wBase);
	height: 100%;
	padding: 0 30px;
	margin: 0 auto;
}
@media print, screen and (min-width:813px){
	.laboratoryPage #kvWrapper .inBox{
		justify-content: flex-end;
	}
}

/* tit
============================== */
#kvWrapper .titArea{
	position: relative;
	z-index: 3;
}
@media print, screen and (min-width:813px){
	.laboratoryPage #kvWrapper .titArea{
		transform: translateX(-20px);
	}
}

/* num */
.numKv{
	display: block;
	width: fit-content;
	border-bottom: 1px solid currentColor;
	color: var(--clrBase);
	font-size: 1.8rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.2rem;
	padding-bottom: 10px;
	margin-bottom: 20px;
	overflow: hidden;
}
.numKv span{
	display: block;
}

/* titKv */
.titKv{
	color: #fff;
	font-size: 4.6rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 130%;
	text-shadow: 0 0 5px rgb(000 000 000 / 30%);
}
.titKv span > span{
	display: block;
	height: 60px;
	padding-top: 60px;
	overflow: hidden;
}

/* ph
============================== */
#kvWrapper .phBox::after{
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
#kvWrapper .kvPh{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* anm
============================== */
/* ph */
#kvWrapper .phBox::after{
	animation: anmW0 0.8s linear 0.5s forwards;
}

/* num */
.numKv{
	opacity: 0;
	animation: anmFadeIn 0.8s ease 0.9s forwards;
}
.numKv span{
	opacity: 0;
	animation: anmFadeUp 1s ease 1.1s forwards;
}

/* titKv pc */
.titKv span.pc > span:nth-of-type(1){
	animation: anmTitKvPc 1s ease 2.3s forwards;
}
.titKv span.pc > span:nth-of-type(2){
	animation: anmTitKvPc 1s ease 2.8s forwards;
}
.titKv span.pc > span:nth-of-type(3){
	animation: anmTitKvPc 1s ease 3.3s forwards;
}
.titKv span.pc > span:nth-of-type(4){
	animation: anmTitKvPc 1s ease 3.8s forwards;
}
.titKv span.pc > span:nth-of-type(5){
	animation: anmTitKvPc 1s ease 4.3s forwards;
}
@keyframes anmTitKvPc{
	from{
		padding-top: 60px;
	}
	to{
		padding-top: 0;
	}
}

/* titKv sp */
.titKv span.sp > span:nth-of-type(1){
	animation: anmTitKvSp 1s ease 2.3s forwards;
}
.titKv span.sp > span:nth-of-type(2){
	animation: anmTitKvSp 1s ease 2.8s forwards;
}
.titKv span.sp > span:nth-of-type(3){
	animation: anmTitKvSp 1s ease 3.3s forwards;
}
.titKv span.sp > span:nth-of-type(4){
	animation: anmTitKvSp 1s ease 3.8s forwards;
}
.titKv span.sp > span:nth-of-type(5){
	animation: anmTitKvSp 1s ease 4.3s forwards;
}
@keyframes anmTitKvSp{
	from{
		padding-top: 40px;
	}
	to{
		padding-top: 0;
	}
}

/*
	プロフィールエリア
-----------------------------------------------------------------------------------------------*/
#peopleWrapper{
	width: calc(100% - 20px);
	background: var(--pattern01);
	border-top: 3px solid var(--clrBase);
	border-bottom: 3px solid var(--clrBase);
	padding: 50px 0;
	margin: 0 auto 100px auto;
}
#peopleWrapper .ctsArea{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* txtArea
============================== */
#peopleWrapper .txtArea{
	width: 740px;
}

/* name */
#peopleWrapper .name{
	display: flex;
	align-items: center;
	font-size: 2.2rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 100%;
	margin-bottom: 10px;
}
#peopleWrapper .name .sizeS{
	display: inline-block;
	font-size: 1.4rem;
	padding-left: 3px;
	transform: translateY(3px);
}
#peopleWrapper .name .job{
	display: inline-block;
	background-color: #333;
	color: #fff;
	font-size: 1.3rem;
	font-family: var(--fNot);
	font-weight: 400;
	line-height: 100%;
	padding: 8px 10px;
	margin-left: 20px;
}


/*
	インタビューエリア
-----------------------------------------------------------------------------------------------*/
.interviewArea{
	display: flex;
	justify-content: space-between;
	position: relative;
}

@media print, screen and (min-width:813px){
	/* type01
	============================== */
	.interviewArea.type01{
		flex-direction: row-reverse;
	}

	/* ph */
	.interviewArea.type01 figure{
		width: 410px;
	}

	/* txtBox */
	.interviewArea.type01 .txtBox{
		width: 490px;
	}

	/* type02
	============================== */
	/* ph */
	.interviewArea.type02 figure{
		width: calc((100vw - 1140px)/2 + 650px);
		min-width: 650px;
		background-color: #bdc9c9;
		text-align: right;
		position: absolute;
		top: 0;
		right: 560px;
	}
	.interviewArea.type02 figure img{
		object-fit: cover;
		width: 650px;
		height: 500px;
	}

	/* txtBox */
	.interviewArea.type02 .txtBox{
		width: 470px;
		margin-left: auto;
	}

	/* type03
	============================== */
	.interviewArea.type03{
		flex-direction: column;
		padding-bottom: 130px;
	}

	/* txtBox */
	.interviewArea.type03 .txtBox{
		width: 860px;
		background-color: #fff;
		padding: 50px 50px 0 50px;
		margin: -80px auto 0 auto;
		position: relative;
		z-index: 1;
	}
}


/*
	1日のスケジュール
-----------------------------------------------------------------------------------------------*/
#scheduleWrapper{
	background: var(--pattern01);
	border-top: 3px solid var(--clrBrown10);
	border-bottom: 3px solid var(--clrBrown10);
	padding: 70px 0;
	margin-bottom: 40px;
}

/* list
============================== */
.listSchedule{
	display: flex;
	justify-content: space-between;
	gap: 0 20px;
	position: relative;
}
.listSchedule li{
	flex: 1;
	position: relative;
	z-index: 1;
}
.listSchedule li > *{
	position: relative;
	z-index: 3;
}

/* 矢印・線 */
.listSchedule::before,
.listSchedule::after,
.listSchedule li::before{
	content: " ";
	display: block;
	position: absolute;
	z-index: 1;
}
.listSchedule::before{
	width: calc(100% - 20px);
	height: 2px;
	background-color: var(--clrGrayL);
	top: 37px;
	left: 10px;
}
.listSchedule::after{
	border-top: 4px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 4px solid var(--clrGrayL);
	border-left: 6px solid var(--clrGrayL);
	top: 31px;
	right: 0;
}

/* 肉球 */
.listSchedule li::before{
	width: 30px;
	height: 24px;
	background: url(/cms/npf/brand/recruit//images/ico_paw_d.svg) no-repeat center center / 18px 19px, #fff;
	top: 25px;
	left: -5px;
	z-index: 2;
}

/* time */
.listSchedule .time{
	display: inline-block;
	color: var(--clrGrayD);
	font-size: 1.6rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 100%;
	margin-bottom: 50px;
}

/* tit */
.listSchedule .tit{
	color: var(--clrBrownD);
	font-size: 1.8rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 120%;
	letter-spacing: 0.05rem;
}
@media print, screen and (min-width:813px){
	.listSchedule .tit span{
		font-size: 1.5rem;
	}
	.developmentPage .listSchedule .tit{
		min-height: 45px;
	}
}

/* txt */
.listSchedule .txt{
	text-align: justify;
	font-size: 1.3rem;
	line-height: 150%;
	margin-top: 10px;
}

/* anm
============================== */
@media print, screen and (min-width:813px){
	.listSchedule li.jsAnmStart:nth-of-type(1){
		animation: anmFadeRightS 0.8s ease 0.5s forwards;
	}
	.listSchedule li.jsAnmStart:nth-of-type(2){
		animation: anmFadeRightS 0.8s ease 0.7s forwards;
	}
	.listSchedule li.jsAnmStart:nth-of-type(3){
		animation: anmFadeRightS 0.8s ease 0.9s forwards;
	}
	.listSchedule li.jsAnmStart:nth-of-type(4){
		animation: anmFadeRightS 0.8s ease 1.1s forwards;
	}
	.listSchedule li.jsAnmStart:nth-of-type(5){
		animation: anmFadeRightS 0.8s ease 1.3s forwards;
	}
	.listSchedule li.jsAnmStart:nth-of-type(6){
		animation: anmFadeRightS 0.8s ease 1.5s forwards;
	}
	.listSchedule li.jsAnmStart:nth-of-type(7){
		animation: anmFadeRightS 0.8s ease 1.7s forwards;
	}
}


/*
	入社を希望する方へのメッセージ
-----------------------------------------------------------------------------------------------*/
#messageWrapper{
	border-top: 1px solid var(--clrBase);
	border-bottom: 1px solid var(--clrBase);
	margin-bottom: 100px;
	position: relative;
	z-index: 2;
}
.ctsArea.messageArea{
	display: flex;
	align-items: center;
	min-height: 340px;
	padding-top: 70px;
	padding-bottom: 70px;
	position: relative;
}

/* 飾り文字
============================== */
.messageArea::before{
	content: "MESSAGE TO\APROSPECTIVE EMPLOYEES";
	display: block;
	height: 100%;
	border-left: 1px solid var(--clrBase);
	writing-mode: vertical-rl;
	white-space: pre;
	text-align: right;
	color: var(--clrGrayL);
	font-size: 1.8rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 120%;
	padding: 30px 15px;
	position: absolute;
	top: 0;
	left: -63px;
	transform: rotate(180deg);
}

/* ph
============================== */
#messageWrapper figure{
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 50px;
}
#messageWrapper figure img{
	opacity: 0;
}

/* txtBox
============================== */
#messageWrapper .txtBox{
	width: 620px;
	margin-left: auto;
}

/* tit */
#messageWrapper .titBase{
	margin-bottom: 20px;
}
#messageWrapper .titBase::first-letter{
	color: var(--clrBase);
}

/* anm
============================== */
/* 飾り文字 */
.messageArea.jsAnmStart::before{
	animation: anmTitItem 1s ease 1s forwards;
}
@keyframes anmTitItem{
	from{
		color: var(--clrGrayL);
	}
	to{
		color: var(--clrBase);
	}
}

/* ph */
.messageArea.jsAnmStart img{
	animation: anmFadeUp 1s ease 0.5s forwards;
}


/*
	INDEX
-----------------------------------------------------------------------------------------------*/
.titIndex{
	text-align: center;
	color: var(--clrGrayL);
	font-size: 4rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 100%;
	letter-spacing: 0.2rem;
	margin-bottom: 70px;
}


@media screen and (max-width:812px){
	/*
		kv
	-----------------------------------------------------------------------------------------------*/
	#kvWrapper{
		height: calc(100svh - 70px);
		min-height: 500px;
	}
	#kvWrapper .inBox{
		justify-content: flex-start;
		align-items: flex-end;
		padding: 0 20px 50px 20px;
	}

	/* tit
	============================== */
	/* num */
	.numKv{
		font-size: 1.5rem;
		margin-bottom: 15px;
	}

	/* titKv */
	.titKv{
		font-size: 2.8rem;
	}
	.titKv span > span{
		height: 40px;
		padding-top: 40px;
	}

	/*
		プロフィールエリア
	-----------------------------------------------------------------------------------------------*/
	#peopleWrapper{
		width: 100%;
		padding: 30px 0;
		margin-bottom: 60px;
	}
	#peopleWrapper .ctsArea{
		flex-direction: column;
		gap: 20px 0;
	}

	/* ph
	============================== */
	#peopleWrapper figure{
		width:130px; 
	}

	/* txtArea
	============================== */
	#peopleWrapper .txtArea{
		width: 100%;
	}

	/* name */
	#peopleWrapper .name{
		display: block;
		text-align: center;
		font-size: 2rem;
		margin-bottom: 18px;
	}
	#peopleWrapper .name .sizeS{
		font-size: 1.2rem;
		transform: translateY(0);
	}
	#peopleWrapper .name .job{
		display: block;
		width: fit-content;
		font-size: 1.2rem;
		padding: 5px 8px;
		margin: 7px auto 0 auto;
	}


	/*
		インタビューエリア
	-----------------------------------------------------------------------------------------------*/
	.interviewArea{
		flex-direction: column;
		align-items: center;
		gap: 30px 0;
	}
	.interviewArea figure{
		width: 100vw;
	}


	/*
		1日のスケジュール
	-----------------------------------------------------------------------------------------------*/
	#scheduleWrapper{
		padding: 40px 0;
		margin-bottom: 50px;
	}

	/* list
	============================== */
	.listSchedule{
		flex-direction: column;
		gap: 30px 0;
	}
	.listSchedule li{
		width: 100%;
		padding-left: 30px;
	}

	/* 矢印・線 */
	.listSchedule::before,
	.listSchedule::after{
		content: none;
	}
	.listSchedule li::after{
		content: " ";
		display: block;
		width: 2px;
		height: calc(100% + 10px);
		background-color: var(--clrGrayL);
		position: absolute;
		top: 10px;
		left: 8px;
		z-index: 1;
	}
	.listSchedule li:last-of-type:after{
		height: calc(100% - 10px);
	}

	/* 肉球 */
	.listSchedule li::before{
		width: 18px;
		height: 30px;
		background-position: center top;
		top: -1px;
		left: 0;
	}

	/* time */
	.listSchedule .time{
		font-size: 1.5rem;
		margin-bottom: 15px;
	}

	/* tit */
	.listSchedule .tit{
		font-size: 1.6rem;
	}

	/* txt */
	.listSchedule .txt{
		margin-top: 8px;
	}


	/*
		入社を希望する方へのメッセージ
	-----------------------------------------------------------------------------------------------*/
	#messageWrapper{
		margin-bottom: 60px;
	}
	.ctsArea.messageArea{
		flex-direction: column;
		min-height: initial;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* 飾り文字
	============================== */
	.messageArea::before{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100px;
		border-left: none;
		writing-mode: horizontal-tb;
		text-align: left;
		font-size: 1.6rem;
		padding: 0;
		position: relative;
		top: auto;
		left: auto;
		transform: rotate(0deg);
		z-index: 2;
	}
	.messageArea::after{
		content: " ";
		display: block;
		width: 100vw;
		height: 1px;
		background-color: var(--clrBase);
		position: absolute;
		top: 100px;
		left: 50%;
		transform: translateX(-50%);
	}

	/* ph
	============================== */
	#messageWrapper figure{
		width: 150px;
		top: 100px;
		right: 20px;
		bottom: auto;
		left: auto;
		transform: translateY(-100%);
	}

	/* txtBox
	============================== */
	#messageWrapper .txtBox{
		width: 100%;
		padding: 30px 0;
	}

	/* tit */
	#messageWrapper .titBase{
		margin-bottom: 10px;
	}


	/*
		INDEX
	-----------------------------------------------------------------------------------------------*/
	.titIndex{
		font-size: 3.6rem;
		margin-bottom: 20px;
	}
}

/* landscape / iPad mini */
@media screen and (max-width:812px) and (min-width: 520px){
	/*
		kv
	-----------------------------------------------------------------------------------------------*/
	#kvWrapper .kvPh{
		display: none;
	}

	/*  営業 */
	.salesPage #kvWrapper{
		height: 500px;
		background: url(/cms/npf/brand/recruit//images/bg_people_sales_kv_tbl.png) no-repeat center top / cover;
	}

	/* 開発 */
	.developmentPage #kvWrapper{
		height: 500px;
		background: url(/cms/npf/brand/recruit//images/bg_people_development_kv_tbl.png) no-repeat center top / cover;
	}

	/* マーケティング */
	.marketingPage #kvWrapper{
		height: 500px;
		background: url(/cms/npf/brand/recruit//images/bg_people_marketing_kv_tbl.png) no-repeat center top / cover;
	}

	/* 研究 */
	.laboratoryPage #kvWrapper{
		height: 500px;
		background: url(/cms/npf/brand/recruit//images/bg_people_laboratory_kv_tbl.png) no-repeat center top / cover;
	}

	/*
		上司からみた○○さん
	-----------------------------------------------------------------------------------------------*/
	/* 飾り
	============================== */
	.commentArea::before,
	.commentArea::after{
		width: 70vw;
	}
}