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

/* ==========================================================================
	インタビュー　共通
========================================================================== */
/* 
	kv
---------------------------------------------------- */
#peopleKvWrapper{
	height: calc(100vh - 100px);
	min-height: 600px;
	margin-bottom: 80px;
	position: relative;
	overflow: hidden;
}
/* 写真エリア
============================== */
#peopleKvWrapper::before{
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: absolute;
}
/* コンテンツ幅用箱
============================== */
.peopleKvWrapperInBox{
	width: var(--wBase);
	height: 100%;
	margin-inline: auto;
	padding-inline: 30px;
	position: relative;
}
/* プロフィール
============================== */
.peopleKvProfileBox{
	display: grid;
	grid-auto-rows: auto;
	width: fit-content;
	background-color: #fff;
	border: 1px solid #000;
	position: absolute;
	bottom: 60px;
	left: 30px;
}
@media print, screen and (min-width:813px){
	/* --- インタビューナンバー --- */
	.peopleKvNum{
		grid-column-start: 1;
		grid-row-start: 1;
		grid-row: span 2;
		align-self: stretch;
	}
	/* --- キャッチコピー --- */
	.peopleKvTit{
		grid-column-start: 2;
		grid-row-start: 1;
	}
	/* --- 職種・名前 --- */
	.peopleKvPerson{
		grid-column-start: 2;
		grid-row-start: 2;
		align-self: start;
	}
}
/* --- インタビューナンバー --- */
.peopleKvNum{
	border-right: 1px solid #000;
	writing-mode: vertical-rl;
	text-align: center;
	font-size: 2.2rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	letter-spacing: 0.05rem;
	padding: 10px;
}
/* --- キャッチコピー --- */
.peopleKvTit{
	border-bottom: 1px solid #000;
	color: var(--clrMRed);
	font-size: 4.6rem;
	line-height: 120%;
	padding: 40px;
}
/* --- 職種・名前 --- */
.peopleKvPerson{
	padding: 20px 40px;
}
.peopleKvPerson > span{
	display: inline-block;
}
.peopleKvPerson .job{
	font-size: 1.3rem;
	margin-right: 10px;
}
.peopleKvPerson .name{
	font-size: 2.4rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	translate: 0 0.08em;
}
/* --- 職種・名前 --- */
.peopleKvPerson .notes{
	font-size: 1rem;
	margin-left: 20px;
}
/* アニメーション
============================== */
#peopleKvWrapper::before{
	scale: 1.2;
	filter: blur(20px);
	animation: anmPeopleKvPh 0.8s var(--anmBaseCB) 0.6s forwards;
}
@keyframes anmPeopleKvPh{
	0%  {
		scale: 1.2;
		filter: blur(20px);
	}
	100%{
		scale: 1;
		filter: blur(0);
	}
}
.peopleKvProfileBox{
	opacity: 0;
	animation: anmFadeLeft 0.8s var(--anmBaseCB) 0.7s forwards,
			   anmFadeIn 0.8s ease 0.7s forwards;
}

/* 
	インタビューエリア
---------------------------------------------------- */
#peopleInterviewWrapper{
	padding-bottom: 130px;
}
.peopleInterviewBox{
	position: relative;
}
/* 写真
============================== */
.peopleInterviewPh{
	display: block;
	position: absolute;
	opacity: 0;
	z-index: 0;
}
/* 本文
============================== */
.peopleInterviewTxt{
	width: 570px;
	background-color: #fff;
	text-align: justify;
	font-size: 1.7rem;
	line-height: 200%;
	letter-spacing: 0.15rem;
	padding-block: 60px;
	position: relative;
	z-index: 1;
}
/* 1ブロック
============================== */
@media print, screen and (min-width:813px){
	.peopleInterviewBox:nth-of-type(1){
		padding-top: 60px;
	}
	/* --- 写真 --- */
	.peopleInterviewBox:nth-of-type(1) .peopleInterviewPh{
		top: 0;
		right: 0;
	}
	/* アニメーション */
	.peopleInterviewBox:nth-of-type(1) .peopleInterviewPh.jsAnmStart{
		animation: anmFadeRight var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
	}
	/* --- 本文 --- */
	.peopleInterviewBox:nth-of-type(1) .peopleInterviewTxt{
		padding-right: 60px;
	}
}
/* 2ブロック
============================== */
@media print, screen and (min-width:813px){
	.peopleInterviewBox:nth-of-type(2){
		padding-bottom: 60px;
	}
	/* --- 写真 --- */
	.peopleInterviewBox:nth-of-type(2) .peopleInterviewPh{
		bottom: 0;
	}
	/* アニメーション */
	.peopleInterviewBox:nth-of-type(2) .peopleInterviewPh.jsAnmStart{
		animation: anmFadeLeft var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
	}
	/* --- 本文 --- */
	.peopleInterviewBox:nth-of-type(2) .peopleInterviewTxt{
		padding-left: 60px;
		margin-left: auto;
	}
}

/* 
	メッセージエリア
---------------------------------------------------- */
#peopleMessageWrapper{
	display: flex;
	flex-wrap: wrap;
	border: 5px solid #000;
}
/* タイトル
============================== */
.peopleMessageTit{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #000;
	position: relative;
}
.peopleMessageTit img{
	position: absolute;
	top: calc(50% - 10px);
	left: 20px;
	translate: 0 -50%;
}
/* 写真
============================== */
.peopleMessagePh{
	width: 470px;
	border-right: 1px solid #000;
	padding: 30px;
}
/* 本文エリア
============================== */
.peopleMessageTxtArea{
	width: calc(100% - 470px);
}
.peopleMessageTxtBox{
	padding: 30px;
}
.peopleMessageTxtBox:not(:last-of-type){
	border-bottom: 1px solid #000;
}
/* --- タイトル --- */
.peopleMessageTxtBox .tit{
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 10px;
}
/* --- 本文 --- */
.peopleMessageTxtBox .txt{
	text-align: justify;
	font-size: 1.6rem;
}

/* 
	INDEX
---------------------------------------------------- */
/* タイトル
============================== */
.peopleIndexTit{
	border-bottom: 5px solid #000;
	font-size: 3.6rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	margin-bottom: 50px;
}
.peopleIndexTit span{
	display: inline-block;
	translate: -2px 1px;
}
/* リスト
============================== */
.peopleIndexList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.peopleIndexList li{
	position: relative;
}
.peopleIndexList a{
	display: block;
}
/* --- 数字 --- */
.peopleIndexList .num{
	font-size: 4.6rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	padding-left: 23px;
	position: absolute;
	top: -20px;
	transition: var(--comTransition);
	z-index: 1;
}
.peopleIndexList .num::before{
	content: " ";
	display: block;
	width: 14px;
	height: 11px;
	background: var(--icoArrowMRed);
	position: absolute;
	top: 3px;
	left: 0;
}
/* --- 写真 --- */
.peopleIndexList figure{
	overflow: hidden;
	z-index: 0;
}
.peopleIndexList img{
	transition: var(--comTransition);
}
/* hover時 */
@media (any-hover: hover){
	.peopleIndexList a:hover img{
		scale: var(--cmnScale);
	}
}
/* --- 名前・職種 --- */
.peopleIndexList .name,
.peopleIndexList .job{
	font-weight: 500;
	transition: var(--comTransition);
}
.peopleIndexList .name{
	font-size: 2rem;
	font-family: var(--fEn);
	line-height: 90%;
	margin-top: 15px;
}
.peopleIndexList .job{
	font-size: 1.6rem;
	line-height: 120%;
	margin-top: 10px;
}
/* hover時 */
@media (any-hover: hover){
	.peopleIndexList a:hover{
		color: var(--clrMRed);
	}
}



/* ==========================================================================
	お客様窓口課〈窓口〉
========================================================================== */
/* 
	kv
---------------------------------------------------- */
.supportPage #peopleKvWrapper::before{
	background-image: url("../images/bg_people_support_kv_pc.png");/* pc画像は2倍書き出し */
}
.outreachPage #peopleKvWrapper::before{
	background-image: url("../images/bg_people_outreach_kv_pc.png");/* pc画像は2倍書き出し */
}
.liaisonPage #peopleKvWrapper::before{
	background-image: url("../images/bg_people_liaison_kv_pc.png");/* pc画像は2倍書き出し */
}
.headquartersPage #peopleKvWrapper::before{
	background-image: url("../images/bg_people_headquarters_kv_pc.png");/* pc画像は2倍書き出し */
}

/* プロフィール
============================== */
/* --- キャッチコピー --- */
.peopleKvTit{
	margin-top: -1.05em;
}
.peopleKvTit .l1Txt1{
	text-indent: -0.05em;
	letter-spacing: -0.13em;
}
.peopleKvTit .l1Txt2{
	text-indent: -0.05em;
}
.peopleKvTit .l1Txt3{
	text-indent: -0.1em;
}
.peopleKvTit .l1Txt4{
	text-indent: -0.15em;
}
.peopleKvTit .l1Txt5{
	text-indent: -0.15em;
	letter-spacing: -0.2em;
}
.peopleKvTit .l1Txt6{
	text-indent: -0.1em;
	letter-spacing: -0.2em;
}
.peopleKvTit .l2Txt1{
	text-indent: -0.2em;
	letter-spacing: -0.3em;
	margin-right: 0.1em;
}
.peopleKvTit .l2Txt2{
	letter-spacing: -0.15em;
}
.peopleKvTit .l2Txt3{
	text-indent: -0.2em;
	letter-spacing: -0.2em;
	margin-right: 0.1em;
}
.peopleKvTit .l2Txt4{
	letter-spacing: -0.1em;
}
.peopleKvTit .l2Txt5{
	text-indent: -0.1em;
	letter-spacing: -0.15em;
}
.peopleKvTit .l2Txt6{
	text-indent: -0.25em;
	letter-spacing: -0.2em;
}

/* 
	インタビューエリア
---------------------------------------------------- */
/* 2ブロック
============================== */
	@media print, screen and (min-width:813px){
	.supportPage .peopleInterviewBox:nth-of-type(2){
		/* ブロック1:((本文h - 写真h) + 60px) */
		margin-top: -230px;
	}
}



@media screen and (max-width:812px){
	/* ==========================================================================
		インタビュー　共通
	========================================================================== */
	/* 
		kv
	---------------------------------------------------- */
	#peopleKvWrapper{
		height: calc(100vh - 75px);
		min-height: 550px;
		margin-bottom: 50px;
	}
	/* コンテンツ幅用箱
	============================== */
	.peopleKvWrapperInBox{
		display: flex;
		flex-direction: column;
		max-width: 500px;
		padding: 20px 20px 50px 20px;
	}
	/* プロフィール
	============================== */
	.peopleKvProfileBox{
		display: flex;
		flex-direction: column;
		width: 100%;
		position: static;
		margin-top: auto;
	}
	/* --- インタビューナンバー --- */
	.peopleKvNum{
		order: 1;
		border-right: none;
		border-bottom: 1px solid #000;
		writing-mode: horizontal-tb;
		text-align: left;
		font-size: 1.6rem;
		padding: 10px 15px;
	}
	/* --- キャッチコピー --- */
	.peopleKvTit{
		order: 2;
		font-size: 2.8rem;
		padding: 15px;
	}
	/* --- 職種・名前 --- */
	.peopleKvPerson{
		order: 3;
		padding: 10px 15px;
	}
	.peopleKvPerson .job{
		font-size: 1.2rem;
		margin-right: 8px;
	}
	.peopleKvPerson .name{
		font-size: 1.8rem;
	}
	/* --- 職種・名前 --- */
	.peopleKvPerson .notes{
	font-size: .8rem;
	margin-left: 10px;
}
	/* アニメーション
	============================== */
	.peopleKvProfileBox{
		opacity: 0;
		animation: anmFadeUp 0.8s var(--anmBaseCB) 0.7s forwards,
				anmFadeIn 0.8s ease 0.7s forwards;
	}

	/* 
		インタビューエリア
	---------------------------------------------------- */
	#peopleInterviewWrapper{
		display: flex;
		flex-direction: column;
		gap: 40px 0;
		padding-bottom: 60px;
	}
	/* 写真
	============================== */
	.peopleInterviewPh{
		margin-bottom: 20px;
		position: static;
	}
	/* アニメーション */
	.peopleInterviewBox .peopleInterviewPh.jsAnmStart{
		animation: var(--anmFadeIn);
	}
	/* 本文
	============================== */
	.peopleInterviewTxt{
		width: 100%;
		font-size: 1.5rem;
		line-height: 170%;
		letter-spacing: 0.1rem;
		padding-block: 0;
	}

	/* 
		メッセージエリア
	---------------------------------------------------- */
	#peopleMessageWrapper{
		flex-direction: column;
	}
	/* タイトル
	============================== */
	.peopleMessageTit{
		height: 40px;
	}
	.peopleMessageTit img{
		width: 230px;
		top: calc(50% - 3px);
		left: -10px;
	}
	/* 写真
	============================== */
	.peopleMessagePh{
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #000;
		padding: 15px;
	}
	/* 本文エリア
	============================== */
	.peopleMessageTxtArea{
		width: 100%;
	}
	.peopleMessageTxtBox{
		padding: 20px 15px;
	}
	/* --- タイトル --- */
	.peopleMessageTxtBox .tit{
		font-size: 1.6rem;
	}
	/* --- 本文 --- */
	.peopleMessageTxtBox .txt{
		font-size: 1.5rem;
	}

	/* 
		INDEX
	---------------------------------------------------- */
	/* タイトル
	============================== */
	.peopleIndexTit{
		font-size: 2.8rem;
		margin-bottom: 36px;
	}
	.peopleIndexTit span{
		translate: -1px 1px;
	}
	/* リスト
	============================== */
	.peopleIndexList{
		gap: 40px 14px;
	}
	.peopleIndexList li{
		width: calc((100% - 14px)/2);
	}
	/* --- 数字 --- */
	.peopleIndexList .num{
		font-size: 2.8rem;
		padding-left: 20px;
		top: -18px;
	}
	/* --- 名前・職種 --- */
	.peopleIndexList .name{
		font-size: 1.6rem;
		margin-top: 10px;
	}
	.peopleIndexList .job{
		font-size: 1.2rem;
		margin-top: 5px;
	}


	/* ==========================================================================
		お客様応援課〈渉外〉
	========================================================================== */
	.peopleKvProfileBoxShogai .peopleKvTit{
		margin-top: -1.5em;
	}

	/* ==========================================================================
		お客様応援課〈LA〉
	========================================================================== */
	.peopleKvProfileBoxLa .peopleKvTit{
		font-size: 2.65rem;
	}

	/* ==========================================================================
		お客様窓口課〈窓口〉
	========================================================================== */
	/* 
		kv
	---------------------------------------------------- */
	.supportPage #peopleKvWrapper::before{
		background-image: url("../images/bg_people_support_kv_sp.png");/* pc画像は2倍書き出し */
	}
	.outreachPage #peopleKvWrapper::before{
		background-image: url("../images/bg_people_outreach_kv_sp.png");/* pc画像は2倍書き出し */
	}
	.liaisonPage #peopleKvWrapper::before{
		background-image: url("../images/bg_people_liaison_kv_sp.png");/* pc画像は2倍書き出し */
	}
	.headquartersPage #peopleKvWrapper::before{
		background-image: url("../images/bg_people_headquarters_kv_sp.png");/* pc画像は2倍書き出し */
	}

	/* プロフィール
	============================== */
	/* --- キャッチコピー --- */
	.peopleKvTit{
		margin-top: -0.9em;
	}

	/* 
		インタビューエリア
	---------------------------------------------------- */
	/* 2ブロック
	============================== */
	.supportPage .peopleInterviewBox:nth-of-type(2){
		/* ブロック1:((本文h - 写真h) + 60px) */
		margin-top: 0;
	}
}