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

/*
	社員を知る
-----------------------------------------------------------------------------------------------*/
.peopleIdxList{
	display: flex;
	flex-wrap: wrap;
	gap: 80px 78px;
}
.peopleIdxList li{
	width: 328px;
}
.idxLink{
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	transition: var(--trstCmn);
}
/* INTERVIEW00 */
.idxDeco{
	color: var(--clGold);
	font-family: var(--ffEn);
	font-size: 1.0rem;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 110%;
	left: -16px;
	position: absolute;
	text-align: center;
	top: -33px;
	z-index: 1;
}
.idxDecoNum{
	display: block;
	font-size: 5.0rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 100%;
	margin-right: 4px;
}
/* 写真 */
.idxImg{
	background-color: var(--clGray);
	position: relative;
	overflow: hidden;
}
.idxImg .ph{
	width: 100%;
	transition: all 0.45s;
}
@media screen and (812px < width){
	.peopleIdxList li:nth-of-type(3n-1) .ph{
		animation-delay: 0.6s;
	}
	.peopleIdxList li:nth-of-type(3n) .ph{
		animation-delay: 0.8s;
	}
}

.idxData{
	display: flex;
	flex-direction: column;
	padding: 26px 0 18px;
	position: relative;
}
/* 職業 */
.idxJob{
	align-items: center;
	background: var(--clNavy);
	color: #fff;
	display: inline-flex;
	font-size: 1.2rem;
	font-weight: 700;
	left: -10px;
	line-height: 100%;
	padding: 7px 10px;
	position: absolute;
	top: -13px;
}
/* 部署 */
.idxDep{
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: .1em;
}
/* 名前 */
.idxName{
	font-family: var(--ffEn);
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 100%;
	margin: 6px 0;
}
/* 入社年 */
.idxJoin{
	font-size: 1.0rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}

/* VIEW */
.idxLink .txtView{
	width: fit-content;
	font-family: var(--ffEn);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 100%;
	position: absolute;
	bottom: -6px;
	right: 10px;
}
/* hover */
.idxLink::after{
	content: ' ';
	display: block;
	width: 100%;
	height: 1px;
	background-color: rgb(0 0 0 / 0.3);
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all 0.3s;
}
@media (any-hover: hover){
	.idxLink:hover{
		background-color: rgb(255 255 255 / 1);
	}
	.idxLink:hover::after{
		width: 0;
		right: 0;
		left: auto;
	}
	.idxLink:hover .ph{
		scale: 1.05;
	}
}

/* 
	SP
-----------------------------------------------------------------------------------------------*/
@media screen and (width <= 812px){
	/*
		社員を知る
	-----------------------------------------------------------------------------------------------*/
	.peopleIdxList{
		flex-direction: column;
		gap: 45px;
	}
	.peopleIdxList li{
		margin: 0 auto;
		width: calc(100% - 20px);
	}
	.idxLink{
		height: 100%;
	}
	/* INTERVIEW00 */
	.idxDeco{
		font-size: 1.0rem;
		letter-spacing: .1em;
		line-height: 110%;
		left: -10px;
		text-align: left;
		top: -24px;
	}
	.idxDecoNum{
		font-size: 3.0rem;
	}
	/* 写真 */
	.peopleIdxList li:nth-of-type(3n-1) .ph,
	.peopleIdxList li:nth-of-type(3n) .ph{
		animation-delay: var(--anmDurationBase);
	}

	.idxData{
		padding: 25px 0 16px;
	}
	/* 職業 */
	.idxJob{
		font-size: 1.1rem;
		padding: 8px 10px;
		top: -14px;
	}
	/* 部署 */
	.idxDep{
		font-size: 1.1rem;
	}
	/* 名前 */
	.idxName{
		font-size: 1.8rem;
		margin: 5px 0;
	}

	/* VIEW */
	.idxLink .txtView{
		font-size: 1rem;
		bottom: -5px;
		right: 5px;
	}
}