@charset "utf-8";

/*------------------------------------------
pagehead
------------------------------------------*/
.pagehead.interview{
	background-image:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)),url("../images/interview/bg_pagehead.jpg");
}
/*------------------------------------------
interview_unit
------------------------------------------*/
.interview_unit{
	margin-top:50px;
	padding-bottom:100px;
}
.interview_unit .ttl h3{
	font-size:2rem;
	display:flex;
	align-items:center;
	white-space: nowrap;
}
.interview_unit .ttl h3::after{
	content: "";
	flex-grow: 1;
	height: 1px;
	background-color: var(--gray);
	margin-left: 15px;
}
@media (max-width: 768px) {
	.interview_unit .ttl h3{
		font-size:1.4rem;
	}
}
.interview_unit .content{
	display:flex;
	align-items:start;
	gap:50px;
	margin-top:30px;
}
.interview_unit .content .img{
	flex:1;
}
.interview_unit .content .txt{
	flex:2;
}

.interview_unit .content .txt .name .dep{
	font-size:1.3rem;
}
.interview_unit .content .txt .name .name{
	font-size:2rem;
	font-weight:600;
}
.interview_unit .content .txt .name .name span{
	font-size:1.3rem;
	margin-left:20px;
}
.interview_unit .content .txt .name .catch{
	font-size:2.4rem;
	font-weight:700;
	margin:30px 0 60px;
}
.interview_unit .content .txt .int_unit h4{
	font-size:1.8rem;
	font-weight:700;
	color:var(--blue);
	margin:40px 0 15px;
}
@media (max-width: 768px) {
	.interview_unit .content{
		flex-direction:column;
	}
	.interview_unit .content .img{
		max-width:250px;
		margin:auto;
	}
	.interview_unit .content .txt .name .dep{
		font-size:1.2rem;
	}
	.interview_unit .content .txt .name .name{
		font-size:1.7rem;
	}
	.interview_unit .content .txt .name .catch{
		font-size:2rem;
		margin:30px 0 60px;
	}
	.interview_unit .content .txt .int_unit h4{
		font-size:1.6rem;
		margin:30px 0 15px;
	}
}
.flow_wrap{
	display:flex;
	gap:30px
}
.flow_wrap .flow{
	flex:1;
	border:1px solid var(--lightgray);
	padding:10px;
}
.flow_wrap .flow h5{
	margin:0 0 8px;
}
.flow_wrap .flow h6{
	margin:0 0 8px;
}
.flow_wrap .flow h6.hbd{
	border-top:1px dotted #ccc;
	margin-top:10px;
	padding-top:10px;
}
.flow_wrap .flow dt{
	background:var(--lightgray);
	padding:8px;
	display:flex;
	gap:30px;
	border-radius:8px;
}
.flow_wrap .flow dd{
	padding:10px;
	font-size:1.5rem;
}
@media (max-width: 768px) {
	.flow_wrap{
		flex-direction:column;
		gap:15px
	}
	.flow_wrap .flow dt{
		font-size:1.4rem;
	}
	.flow_wrap .flow dd{
		padding:6px;
		font-size:1.3rem;
	}
}