/***********************************************************************************************************************

recruit.css

***********************************************************************************************************************/
.recruit{

}

.recruit main{
	/*overflow: hidden;*/
}



/* sec *********************************/
.sec_hd{
	position: relative;
}
.sec_lead{
	padding: 8% 0 0;
}
.sec_charm{
	margin-top: 8%;
	padding: 8% 0;
	background-color: #f7f7f7;
}
.sec_job{
	padding: 10% 0 0;
}
.sec_interview{
	margin-top: 8%;
	padding: 8% 0;
	background-color: #f7f7f7;
}


@media screen and (max-width: 767px) {
.sec_lead{
	padding: 12% 0 0;
}
.sec_charm{
	padding: 12% 0;
}
.sec_job{
	padding: 16% 0 0;
}
.sec_interview{
	margin-top: 16%;
	padding: 12% 0;
}
}



/* hd_main *********************************/
.hd_main{
}
.hd_main img{
	width: 100%;
	height: auto;
}
.hd_main .pc{}
.hd_main .sp{ display: none;}


p.p_hd_ttl{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	padding: 0;
	margin: 0;
	font-size: 40px;
	font-size: clamp(20px, 4vw, 40px);
	font-weight: 600;
	color: #fff;
	text-align: center;
}
p.p_hd_ttl .en{
	display: block;
	font-size: 16px;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1;
}


@media screen and (max-width: 767px) {
.hd_main .pc{ display: none;}
.hd_main .sp{ display: block;}
}




/* list_subnavi *********************************/
.list_subnavi{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	width: 100%;
	max-width: 540px;
	margin: 8% auto 0;
}
.list_subnavi.ft{
	padding-bottom: 8%;
}

.list_subnavi li{
	width: 49%;
}
.list_subnavi li.active .btn_arrow{
	background-color: #000;
	background-image: none;
}


@media screen and (max-width: 767px) {
.list_subnavi.ft{
	padding-bottom: 12%;
}
}



/*** h1〜  **********************************/
h1.h1_ttl{
	font-size: 54px;
	font-size: clamp(30px, 5.4vw, 54px);
	font-weight: 900;
	text-align: center;
	margin-bottom: 0.4em;
}
h2.h2_ttl{
	font-size: 44px;
	font-size: clamp(24px, 4.4vw, 44px);
	font-weight: 800;
	text-align: center;
	line-height: 1.5em;
	margin-bottom: 0.8em;
}

h3.h3_ttl{
	font-size: 26px;
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 700;
	margin-bottom: 1.2em;
}

h4.h4_choice{
	font-size: 24px;
	font-size: clamp(20px, 2.4vw, 24px);
	font-weight: 700;
	color: #004da0;
	margin-bottom: 0.5em;
}

h4.h4_job{
	font-size: 26px;
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 700;
	margin-bottom: 0.3em;
}
h4.h4_outline{
	font-size: 22px;
	font-size: clamp(17px, 2.2vw, 22px);
	font-weight: 700;
	margin-bottom: 0.8em;
}

h5.h5_interview{
	font-size: 16px;
	font-size: clamp(14px, 1.6vw, 16px);
	font-weight: 700;
	margin-bottom: 0.8em;
}
h5.h5_interview .name{
	font-size: 150%;
}

p.p_lead{
	text-align: center;
}


@media screen and (max-width: 767px) {
p.p_lead{
	text-align: justify;
}
p.p_lead .resp_autowrap{
	display: inline;
}
p.p_lead br.only_pc{
	display: none;
}
}



/*************************************************************************************
*************************************************************************************

採用情報ページ

*************************************************************************************
**************************************************************************************/
.recruit_recruit{
}


/*** 
choice_box
job_box
**********************************/
.choice_box{
	margin-top: 5%;
}
.job_box{
	margin-top: 5%;
}


@media screen and (max-width: 767px) {
.choice_box{
	margin-top: 10%;
}
.job_box{
	margin-top: 10%;
}
}



/*** list_choice **********************************/
.list_choice{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.list_choice li{
	width: 30%;
}
.list_choice li .ph_cohice{
	margin-bottom: 1.5em;
}

.list_choice li img{
	width: 100%;
	height: auto;
}


@media screen and (max-width: 767px) {
.list_choice li{
	width: 90%;
	margin: 5% auto 0;
}
.list_choice li:first-child{
	margin-top: 0;
}
}



/*** job_flow_box **********************************/
.job_flow_box{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.job_flow_box_time{
	width: 64%;
}
.job_flow_box_photo{
	width: 32%;
	align-self: flex-start;
	position: sticky;
	top: 100px;
}



/*** job_timeline **********************************/
.job_timeline{
}
.job_timeline li{
	position: relative;
	padding-top: 2em;
}
.job_timeline li:first-child{
	padding-top: 0;
}
.job_timeline li::before{
	content: "";
	position: absolute;
	top: 1em;
	left: 5px;
	width: 1px;
	height: 100%;
	background-color: #ccc;
}

.job_timeline dl dt{
	position: relative;
	font-size: 20px;
	font-size: clamp(16px, 2.0vw, 20px);
	color: #f29600;
	padding-left: 20px;
	margin-bottom: 0.7em;
}
.job_timeline dl dt::before{
	content: "";
	position: absolute;
	top: 0.5em;
	left: 1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #f29600;
}

.job_timeline dl dd{
	margin-left: 5em;
}


@media screen and (max-width: 767px) {
.job_timeline dl dd{
	margin-left: 3em;
}
}




/*** list_interview **********************************/
.list_interview{
}
.list_interview li{
	margin-top: 5%;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.list_interview li .inner{
	padding: 3em;
}

.list_interview li p.font14{
	padding: 0;
	margin: 0;
}





/*************************************************************************************
*************************************************************************************

募集要項ページ

*************************************************************************************
**************************************************************************************/
.recruit_outline{
}

.sec_flow .list_ft_btn{
	margin-top: 3em;
}
.sec_flow .btn_arrow{
	background-color: #f29600;
}
.sec_flow .btn_arrow:hover{
	background-color: #004da0;
}

.sec_flow .list_ft_btn li.tel{
	background-color: #000;
}



/* sec *********************************/
.sec_outline{
	padding: 8% 0 0;
}
.sec_flow{
	margin-top: 8%;
	padding: 8% 0;
	background-color: #f7f7f7;
}


@media screen and (max-width: 767px) {
.sec_outline{
	padding: 12% 0 0;
}
.sec_flow{
	margin-top: 16%;
	padding: 12% 0;
}
}


/*** atc_outline **********************************/
.atc_outline{
	margin-top: 5%;
}

@media screen and (max-width: 767px) {
.atc_outline{
	margin-top: 10%;
}
}



/*** float_outline **********************************/
.float_outline{
	font-size: 16px;
	font-size: clamp(14px, 1.6vw, 16px);
	border-top: 1px solid #e5e5e5;
}
.float_outline tr{
	border-bottom: 1px solid #e5e5e5;
}
.float_outline th{
	width: 10em;
	font-weight: 700;
	text-align: center;
	padding: 1.5em 0;
}
.float_outline td{
	color: #4d4d4d;
	padding: 1.5em 0;
}


@media screen and (max-width: 767px) {
.float_outline th{
	display: block;
	width: auto;
	text-align: left;
	padding: 1.5em 0 0;
}
.float_outline td{
	display: block;
	width: auto;
	padding: 0.8em 0 1.5em;
}
}



/*** list_flow **********************************/
.list_flow{
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	margin: 8em auto 3em;
}
.list_flow li.txt{
	width: calc(29% - 2em);
	padding: 0 1em 2em;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.list_flow li.arrow{
	width: 4%;
	background: url("/common/img/btn_arrow/btn_arrow_blue.svg") center center / contain no-repeat;
}


.list_flow li.txt p{
	padding: 0;
	margin: 0;
	text-align: center;
	line-height: 1.5em;
}
.list_flow li.txt p.num{
	font-size: 30px;
	font-size: clamp(20px, 3vw, 30px);
	margin: -0.8em 0 0.3em;
}
.list_flow li.txt p.ttl{
	font-size: 22px;
	font-size: clamp(20px, 2.2vw, 22px);
	font-weight: 700;
	margin-bottom: 0.5em;
}



@media screen and (max-width: 639px) {
.list_flow{
	flex-flow: column;
	margin-top: 4em;
}
.list_flow li.txt{
	width: auto;
}
.list_flow li.arrow{
	position: relative;
	width: 100%;
	height: 70px;
	background: none;
}
.list_flow li.arrow::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%) rotate(90deg);
	background: url("/common/img/btn_arrow/btn_arrow_blue.svg") center center / contain no-repeat;
}
}






/*************************************************************************************
*************************************************************************************

print

*************************************************************************************
**************************************************************************************/

@media print {

}