@charset "utf-8";

/* =====================================================
recruitment
===================================================== */
#recruitment{
	margin-bottom: 7.5rem;
}
.contentsflex.external_links{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:1.875rem;
	margin-bottom: 1.25rem;
}
.external_link{
	width: calc((100% - 1.875rem) / 2);
}
.external_links .external_link a{
	position: relative;
	border-radius: 5px;
	background: #FFF;
	display: flex;
	align-items: center;
	height: 7.5rem;
	padding: 2.5rem 5.5rem 2.5rem 3.75rem;
}

/* message */
#message{
	margin-bottom: 7.5rem;
}
#message .contentsflex{
	display: flex;
	justify-content: space-between;
}
#message .contentsflex .flexleft{
	width: 35.875rem;
}
#message .contentsflex .flexleft .contentsimg{
	border-radius: 5px;
	overflow: hidden;
}
#message .contentsflex .flexright{
	width: 39rem;
}
#message .contentsflex .flexright h3{
	font-size: 2.125rem;
	line-height: 1.6;
	margin-top: -0.625rem;
	margin-bottom: 1.75rem;
}
#message .contentsflex .flexright p{
	font-size: 1rem;
	line-height: 2;
	letter-spacing: 0.1em;
	margin-bottom: 2.5rem;
}
#message .contentsflex .flexright p.person{
	font-size: 1.25rem;
}
#message .contentsflex .flexright p.person span{
	font-size: 0.875rem;
	margin-left: 1.125rem;
}

/* schedule */
#schedule{
	margin-bottom: 6.25rem;
}
.recruitment_schedule p{
	font-size: 1.25rem;
	margin-bottom: 1.875rem;
}
.schedule_imagewrap{
	width: 100%;
}

/* process */
#process{
	margin-bottom: 6.25rem;
}
.recruitment_process{
	border-radius: 5px;
	background: #FFF;
	display: flex;
	align-items: center;
	min-height: 6.25rem;
	padding: 1.875rem 3.75rem;
	margin-bottom: 1.25rem;
}
.step{
  font-family: "antonia-variable",sans-serif;
  font-variation-settings: 'wght' 500, 'opsz' 48;
	font-size: 20px;
	line-height: 0.6;
	letter-spacing: 0.03em;
}
.processdetail{
	display: flex;
	align-items: center;
	margin-left: 3.125rem;
}
.processlabel{
	border-right: 1px solid #ccd2de;
	font-size: 1.25rem;
	width: 11rem;
	margin-right: 5.3125rem;
}
.processdetail p{
	flex: 1;
}

/* faq */
.recruitment_faq{
	border-radius: 5px;
	background: #FFF;
	display: block;
	padding: 1.875rem 2.5rem;
	margin-bottom: 1.25rem;
}
.faq_question{
	position: relative;
	display: flex;
}
.faq_question .question_icon,.faq_answer .answer_icon{
	width: 4.375rem;
	margin-left: 1.25rem;
}
.faq_question p,.faq_answer p{
	flex: 1;
}
.faq_answerwrap{
	display: none;
}
.faq_answer{
	position: relative;
	display: flex;
	border-top: 1px solid #ccd2de;
	margin-top: 1.875rem;
	padding-top: 1.875rem;
}
.faq_answer .answer_icon{
	color: #B89E7E;
}
.faq_question .ac_icon{
	position:relative;
	display:block;
	width:2.5rem;
	height:1.5rem;
	border: 1px solid #143369;
	border-radius:0.75rem;
	background:#143369;
	flex-shrink:0;
}
.recruitment_faq.is-open .faq_question .ac_icon{
	border: 1px solid #143369;
	background:#FFF;
}
.faq_question .ac_icon::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:0.625rem;
	height:1px;
	background:#FFF;
	transform:translate(-50%,-50%);
}
.faq_question .ac_icon::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:1px;
	height:0.625rem;
	background:#FFF;
	transform:translate(-50%,-50%);
	transition:.3s;
}
.recruitment_faq.is-open .ac_icon::before{
	background: #143369;
}
.recruitment_faq.is-open .ac_icon::after{
	background: #143369;
	transform:translate(-50%,-50%) rotate(90deg);
}

#program{
	margin-bottom: 6.25rem;
}
.programhead .leadtext{
	font-size: 1rem;
	line-height: 2;
	width: 39rem;
	margin-left: auto;
}
.programinfo{
	display: flex;
	justify-content: space-between;
	margin-top: 3.125rem;
	margin-bottom: 5rem;
}
.programinfo_detail{
	/*
	border-top: 1px solid #ccd2de;
	border-bottom: 1px solid #ccd2de;
	*/
	display: flex;
	align-items: center;
	width: 18.125rem;
	padding: 1.375rem 0;
}
.programinfo_detail:nth-of-type(1){
	width: 31.875rem;
	border-right: 1px solid #ccd2de;
}
.programinfo_detail:nth-of-type(2){
	width: 25rem;
	border-right: 1px solid #ccd2de;
}
.programinfo_label{
	border-radius: 5px;
	background: #B89E7E;
	color: #FFF;
	font-size: 0.875rem;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5.375rem;
	height: 4.625rem;
	margin-right: 1.25rem;
}
.programinfo_info{
	font-size: 1rem;
	line-height: 1.8;
}
.flow h3{
	font-size: 1.25rem;
	margin-bottom: 1.875rem;
}
.flow_timeline{
	display: flex;
	margin-bottom: 1.25rem;
}
.flow_timeline .timelineleft{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 9.375rem;
	margin-right: 1.25rem;
}
.flow_timeline .timelineleft::after{
	position: absolute;
	bottom: calc((100% - 4rem) * -1);
	left: -52%;
	right: 0;
	margin: 0 auto;
	background: #B89E7E;
	border-radius: 2px;
	content: "";
	display: block;
	width: 2px;
	height: calc(100% - 3.2rem);
}
.flow_timeline.flowend .timelineleft::after{
	display: none;
}
.flow_timeline .timelineleft .time{
	display: flex;
	align-items: center;
}
.flow_timeline .timelineleft .time img{
	width: 2.5rem;
	height: 2.5rem;
	margin-right: 1.25rem;
}
.flow_timeline .timelineleft span{
	width: 3.75rem;
}
.flow_timeline .timelineright{
	border-radius: 5px;
	background: #FFF;
	display: flex;
	align-items: center;
	padding: 1.875rem 2.5rem;
	flex: 1;
}
.flow_timeline.flowend .timelineright{
	background: none;
}
.flow_timeline.flowend .timelineright .flowlabel{
	width: auto;
}
.flow_timeline .timelineright .flowlabel{
	font-size: 1.25rem;
	line-height: 1.5;
	margin-left: 1.25rem;
}
.flow_timeline .timelineright p{
	/*border-left: 1px solid #ccd2de;*/
	font-size: 1rem;
	line-height: 2;
	padding-left: 1.6125rem;
}
.flow_timeline.flowend .timelineright p{
	border: none;
	padding-left: 0.625rem;
}
#pagehead .headflex .page_info.clerk h1 {
	line-height: 1.2;
	letter-spacing: -0.075em;
}

.flowflex{
	display: flex;
	justify-content: space-between;
}
.flowflex .flowflexleft{
	width: 12.5rem;
}
.flowflex .flowflexright{
	flex: 1;
}

@media screen and (max-width: 767px) {
	#recruitment{
		margin-bottom: 3.125rem;
	}
	.contentsflex.external_links{
		display: block;
		margin-bottom: 0.3125rem;
	}
	.external_link{
		width: 100%;
		margin-bottom: 0.3125rem;
	}
	.external_links .external_link a{
		font-size: 0.4375rem;
		padding: 0.8125rem 0.625rem;
		height: auto;
	}
	
	
	/* message */
	#message{
		margin-bottom: 1.875rem;
	}
	#message .contentsflex{
		display: block;
	}
	#message .contentsflex .flexleft{
		border-radius: 5px;
		overflow: hidden;
		margin-bottom: 1.25rem;
	}
	#message .contentsflex .flexleft,#message .contentsflex .flexright{
		width: 100%;
	}
	#message .contentsflex .flexright h3{
		font-size: 0.75rem;
		margin-top: 0;
		margin-bottom: 0.9375rem;
	}
	#message .contentsflex .flexright p{
		font-size: 0.4375rem;
		margin-bottom: 0.625rem;
	}
	#message .contentsflex .flexright p.person{
		font-size: 0.5rem;
	}
	#message .contentsflex .flexright p.person span{
		font-size: 0.375rem;
		margin-left: 0.3125rem;
	}
	
	/* schedule */
	#schedule{
		margin-bottom: 3.125rem;
	}
	.recruitment_schedule p{
		font-size: 0.4375rem;
		margin-bottom: 0.625rem;
	}
	.schedule_imagewrap{
		width: 100%;
		overflow: auto;
		padding-bottom: 0.325rem;
		margin-bottom: 0.325rem;
	}
	.schedule_imagewrap .schedule_image{
		width: 31.875rem;
	}
	.recruitment_schedule  p.note{
		font-size: 0.3125rem;
	}
	
	/* process */
	#process{
		margin-bottom: 3.125rem;
	}
	.recruitment_process{
		padding: 0.78125rem;
		margin-bottom: 0.3125rem;
		align-items: flex-start;
		min-height: 0;
	}
	.step{
		font-size: 0.4375rem;
		line-height: 2;
	}
	.processdetail{
		display: block;
		margin-left: 0.5rem;
		width: auto;
	}
	.processlabel{
		border: none;
		font-size: 0.5rem;
		width: 100%;
		margin-bottom: 0.3125rem;
	}
	.processdetail p{
		font-size: 0.4375rem;
	}
	
	/* faq */
	#faq{
		margin-bottom: 3.125rem;
	}
	.recruitment_faq{
		background: #FFF;
		padding: 0.78125rem;
		margin-bottom: 0.3125rem;
	}
	.faq_question{
		position: relative;
		display: flex;
		align-items: center;
	}
	.faq_question .question_icon,.faq_answer .answer_icon{
		font-size: 0.5625rem;
		width: auto;
		margin-left: 0.125rem;
		margin-right: 0.625rem;
	}
	.faq_question p{
		font-size: 0.5rem;
		padding-right: 0.25rem;
	}
	.faq_answer p{
		font-size: 0.4375rem;
		padding-right: 0.25rem;
	}
	.faq_answerwrap{
		display: none;
	}
	.faq_answer{
		margin-top: 0.9375rem;
		padding-top: 0.9375rem;
	}
	.faq_answer .answer_icon{
		color: #B89E7E;
	}
	.faq_question .ac_icon{
		width:1.25rem;
		height:0.75rem;
	}
	.faq_question .ac_icon::before{
		width:0.3125rem;
	}
	.faq_question .ac_icon::after{
		height:0.3125rem;
	}
	
	#program{
		margin-bottom: 3.125rem;
	}
	.programhead .leadtext{
		font-size: 0.4375rem;
		width: 100%;
	}
	.programinfo{
		display: block;
		margin-top: 0.9375rem;
		margin-bottom: 1.25rem;
	}
	.programinfo_detail:first-child{
		width: 100%;
	}
	.programinfo_detail{
		width: 100%;
		padding: 0.625rem 0;
		margin-bottom: -1px;
	}
	.programinfo_label{
		font-size: 0.375rem;
		width: 2.3125rem;
		height:stretch;
		/* height: 1.875rem; */
		margin-right: 0.3125rem;
	}
	.programinfo_info{
		font-size: 0.4375rem;
		letter-spacing: 0;
	}
	.flow h3{
		font-size: 0.4375rem;
		margin-bottom: 0.9375rem;
	}
	.flow_timeline{
		display: flex;
		margin-bottom: 0.625rem;
	}
	.flow_timeline .timelineleft{
		position: relative;
		display: block;
		width: 1.25rem;
		margin-right: 0.625rem;
		margin-left: 0.375rem;
	}
	.flow_timeline .timelineleft::after{
		position: absolute;
		top: 2.15rem;
		left: 0;
		right: 0;
		width: 2px;
		height: calc(100% - 2rem);
	}
	.flow_timeline.flowend .timelineleft::after{
		display: none;
	}
	.flow_timeline .timelineleft .time{
		position: relative;
		background: #F2F3F5;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 1.25rem;
		text-align: center;
		z-index: 10;
	}
	.flow_timeline .timelineleft .time img{
		width: 0.9375rem;
		height: 0.9375rem;
		margin:0 auto;
	}
	.flow_timeline .timelineleft span{
		font-size: 0.4375rem;
		width: 1.25rem;
		text-align: center;
	}
	.flow_timeline .timelineright{
		display: block;
		padding: 0.75rem 0.9375rem;
	}
	.flow_timeline.flowend .timelineright{
		background: none;
	}
	.flow_timeline.flowend .timelineright .flowlabel{
		width: auto;
	}
	.flow_timeline .timelineright .flowlabel{
		font-size: 0.5rem;
		width: 100%;
		margin-left: 0;
		margin-bottom: 0.3125rem;
	}
	.flow_timeline .timelineright p{
		border-left: none;
		font-size: 0.4375rem;
		width: 100%;
		padding-left: 0;
	}
	.flow_timeline.flowend .timelineright p{
		padding-left: 0;
	}

	.flowflex{
		display: block;
	}
	.flowflex .flowflexleft{
		width: 100%;
	}

}