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

recruit.css

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

.recruit main{
	overflow-x: hidden; /* フォールバック */
	overflow-x: clip;   /* モダンブラウザ向け */
}


span.anchorlink#an_beginner {
	position: relative;
	top: -120px;
	display: block;
}
@media screen and (max-width: 767px) {
span.anchorlink#an_beginner {
	top: -70px;
}
}



/* modal-video *********************************/
.modal-video-body{
  max-width: 1280px; /*1280px 1920px*/
}
.modal-video{
  background-color: rgba(0,0,0,0.8);
}



/* sec *************************************************************/
.sec_hd{
	position: relative;
	padding: 0;
}
.sec_lead{
	padding-top: 8%;
}
.sec_interview{
	padding-top: 8%;
}
.sec_story{
	padding: 8% 0;
	margin-top: 8%;
	background-color: #f7f7f7;
}
.sec_career{
	padding-top: 8%;
}
.sec_welfare{
	padding: 8% 0;
	margin-top: 8%;
	background-color: #f7f7f7;
}
.sec_btn{
	padding: 8% 0;
}


@media screen and (max-width: 767px) {
.sec_lead{
	padding-top: 12%;
}
.sec_interview{
	padding-top: 15%;
}
.sec_story{
	padding: 15% 0;
	margin-top: 15%;
}
.sec_career{
	padding-top: 15%;
}
.sec_welfare{
	padding: 15% 0;
	margin-top: 15%;
}
.sec_btn{
	padding: 15% 0;
}
}



/* 共通変更 *************************************************************/
.sec_btn .btn_cmn_arrow{
	max-width: 300px;
	margin: 0 auto;
}



/* h1〜 *************************************************************/
h1.h1_ttl{
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	font-size: 18px;
	font-size: clamp(14px, 1.8vw, 18px);
	text-align: center;
	color: #fff;
}
h1.h1_ttl .en{
	display: block;
	font-size: 310%;
	padding-bottom: 0.1em;
}

h2.h2_ttl{
	font-size: 34px;
	font-size: clamp(22px, 3.4vw, 34px);
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 1.2em; /*0.8em*/
}

h3.h3_ttl{
	font-size: 30px;
	font-size: clamp(20px, 3vw, 30px);
	color: #333;
	text-align: center;
	margin-bottom: 1em;
}
h3.h3_ttl.only_btm_img{
	margin-bottom: 1.6em;
}

h3.h3_ttl .en{
	display: block;
	font-size: 50%;
	color: #006fb5;
	margin-bottom: 1em;
}

h4.h4_story{
	font-size: 34px;
	font-size: clamp(22px, 3.2vw, 34px);
	color: #006fb5;
	text-align: center;
	line-height: 1.5em;
	margin-bottom: 0.5em;
}
h4.h4_carrer{
	font-size: 15px;
	font-size: clamp(12px, 1.5vw, 15px);
	color: #e55561;
	text-align: center;
	line-height: 1;
	margin: -2.2em 0 1.5em;
}
h4.h4_carrer .num{
	display: block;
	font-size: 450%;
	font-weight: 200;
	font-style: italic;
}

h5.h5_talk{
	font-size: 28px;
	font-size: clamp(18px, 2.8vw, 28px);
	color: #006fb5;
	line-height: 1.5em;
	margin-bottom: 0.8em;
}
h5.h5_carrer{
	font-size: 18px;
	font-size: clamp(15px, 1.7vw, 18px);
	color: #333;
	line-height: 1.5em;
	text-align: justify;
	margin-bottom: 1em;
}

p.lead{
	font-size: 18px;
	font-size: clamp(14px, 1.8vw, 18px);
	text-align: center;
	line-height: 2.2em;
}


@media screen and (max-width: 767px) {
h1.h1_ttl .en{
	font-size: 250%;
}
h3.h3_ttl .en{
	font-size: 60%;
}

.sec_lead .align_c_l,
.sec_story .align_c_l{
	text-align: justify;
}
.sec_lead .align_c_l .resp_autowrap,
.sec_story .align_c_l .resp_autowrap{
	display: inline;
}
}




/* fig_hd *************************************************************/
.fig_hd{

}
.fig_hd img{
	width: 100%;
	height: auto;
}
.fig_hd .pc{}
.fig_hd .sp{ display: none;}


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





/* list_interview *************************************************************/
.list_interview{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.list_interview li{
	width: 48%;
}

.list_interview li .photo{
	transition: all .3s linear;
}
.list_interview li:hover .photo{
	cursor: pointer;
	opacity: 0.7;
}


@media screen and (max-width: 639px) {
.list_interview li{
	width: 100%;
	margin-bottom: 8%;
}
.list_interview li:last-child{
	margin-bottom: 0;
}
}




/* name_box *************************************************************/
dl.name_box{
	display: flex;
	justify-content: flex-start;
	flex-flow: wrap;
	align-items: center;
	margin-top: 1em;
}
dl.name_box dt{
	width: 1.7em;
	font-size: 55px;
	font-size: clamp(35px, 5.5vw, 55px);
	font-style: italic;
	color: #006fb5;
}
dl.name_box dd{

}
dl.name_box dd .department{
	display: block;
	font-size: 13px;
	font-size: clamp(11px, 1.3vw, 13px);
}
dl.name_box dd .name{
	font-size: 24px;
	font-size: clamp(17px, 2.4vw, 24px);
	font-weight: 600;
	color: #333;
}
dl.name_box dd .en{
	font-size: 12px;
	font-size: clamp(10px, 1.2vw, 12px);
	color: #006fb5;
	font-weight: 400;
	padding-left: 1em;
}




/* mv_nakatec *************************************************************/
.mv_nakatec{
	width: 100%;
	max-width: 800px;
	margin: 8% auto 0;
}



/* story_ttlBox *************************************************************/
.story_ttlBox{
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	align-items: center;
}
.story_ttlBox_photo{
	width: 58.3333333%;
}
.story_ttlBox_txt{
	width: 41.6666667%;
}
.story_ttlBox_txt .inner{
	width: 86%; /*73.3333333%*/
	max-width: 440px;
	margin: 0 auto;
}

.story_ttlBox_photo img{
	width: 100%;
	height: auto;
}


@media screen and (max-width: 767px) {
.story_ttlBox_photo{
	width: 100%;
}
.story_ttlBox_txt{
	width: 90%;
	margin: 5% auto 0;
}
.story_ttlBox_txt .inner{
	width: 100%;
	max-width: 100%;
}
}




/* story_bg_white *************************************************************/
.story_bg_white{
	width: 90%;
	padding: 8% 0 5%;
	margin: -3% auto 0;
	background-color: #fff;
}
.story_inner{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}

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



/* list_men *************************************************************/
.list_men{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
}
.list_men li{
	width: 29.411765%;
	text-align: center;
}
.list_men li figcaption{
	font-size: 13px;
	font-size: clamp(10px, 1.3vw, 13px);
	color: #666;
	padding: 1em 0 0;
}
.list_men li figcaption .big{
	display: block;
	font-family: "BIZ UDGothic", sans-serif;
	font-weight: 700;
	font-size: 160%;
	color: #333;
	padding-bottom: 0.2em;
}



/* talk_wrap *************************************************************/
.talk_wrap{
	padding-top: 7%;
}


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




/* talk_box *************************************************************/
.talk_box{
}
.talk_box_photo{
	float: right;
	width: 32.272727%;
	padding-left: 3em;
}
.talk_box_txt{
}

.talk_box_txt p{
	text-align: justify;
	padding: 0 0 1.8em;
}

.talk_box_txt p .name{
	font-family: "BIZ UDGothic", sans-serif;
	font-weight: 700;
	color: #006fb5;
}


@media screen and (max-width: 767px) {
.talk_box{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.talk_box_photo{
	float: none;
	width: 100%;
	padding-left: 0;
	margin-bottom: 2em;
}
.talk_box_txt{
	width: 100%;
}
}




/* list_talk *************************************************************/
.list_talk{
}
.list_talk li{
}
.list_talk li:last-child{
	padding-top: 1em;
}

@media screen and (max-width: 767px) {
.list_talk{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.list_talk li{
	width: 49%;
}
.list_talk li:last-child{
	padding-top: 0;
}
}



/* fig_carrer *************************************************************/
.fig_carrer{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}




/* list_carrer *************************************************************/
.list_carrer{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin-top: 10%;
}
.list_carrer li{
	width: calc(31.6666667% - 4em);
	padding: 0 2em 2em;
	border-radius: 0 2em 0 2em; 
	background: #FFFEE5;
background: linear-gradient(120deg, rgba(255, 254, 229, 1) 0%, rgba(252, 229, 242, 1) 100%);
}

.list_carrer li dl{
	font-size: 14px;
	font-size: clamp(12px, 1.4vw, 14px);
}
.list_carrer li dl dt{
	color: #e55561;
	font-weight: 600;
	text-align: justify;
}
.list_carrer li dl dd{
	position: relative;
	color: #666;
	line-height: 1.5em;
	text-align: justify;
	margin-top: 0.4em;
	padding-left: 0.6em;
}
.list_carrer li dl dd:before{
	content: "";
	display: block;
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background-color: #e55561;
}


@media screen and (max-width: 767px) {
.list_carrer{
	margin-top: 15%;
}
.list_carrer li{
	width: calc(100% - 4em);
	margin-top: 10%;
}
.list_carrer li:first-child{
	margin-top: 0;
}
}



/* list_welfare *************************************************************/
.list_welfare{
	display: flex;
	justify-content: flex-start;
	flex-flow: wrap;
}
.list_welfare li{
	width: 23.3333333%;
	margin-right: 2.2222222%;
	margin-top: 3em;
}
.list_welfare li:nth-child(4n){
	margin-right: 0;
}
.list_welfare li figure{
	margin-bottom: 0.8em;
}

.list_welfare li p.font14{
	line-height: 1.6em;
}
.list_welfare li p.font14 strong{
	color: #333;
}


@media screen and (max-width: 767px) {
.list_welfare{
	justify-content: space-between;
}
.list_welfare li{
	width: 48%;
	margin-right: 0;
	margin-top: 2em;
}
}




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

recruit-form

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

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

@media screen and (max-width: 767px) {
.sec_beginner{
	margin-top: 15%;
	padding-bottom: 15%;
}
.sec_form{
	padding: 12% 0;
}
}



/* h1〜 *************************************************************/
h2.h2_beginner{
	font-size: 28px;
	font-size: clamp(20px, 2.8vw, 28px);
	line-height: 1.5em;
	color: #006fb5;
	text-align: center;
	margin-bottom: 0.8em;
}



/* icon_beginner *************************************************************/
i.icon_beginner{
	position: relative;
	top: -12px;
	display: block;
	width: 34px;
	margin: 0 auto 3%;
}




/* beginner_box *************************************************************/
.beginner_box{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin-top: 5em;
}
.beginner_box_txt{
	width: calc(100% - 610px);
	max-width: 550px;
}
.beginner_box_flow{
	width: 580px; /*48.3333333%*/
}


@media screen and (max-width: 1024px) {
.beginner_box{
	margin-top: 0;
}
.beginner_box_txt{
	width: 100%;
	max-width: 100%;
}
.beginner_box_flow{
	width: 100%;
	margin-top: 2em;
}
}




/* list_flow *************************************************************/
.list_flow{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	align-items: center;
	margin-bottom: 2em;
}
.list_flow li{
	padding: 1em 0 1.2em;
}
.list_flow li.number{
	width: 31.034483%;
	border-radius: 10px;
	background: #4DB1DC;
background: linear-gradient(180deg, rgba(77, 177, 220, 1) 0%, rgba(4, 105, 168, 1) 100%);
}

.list_flow li.arrow{
}
.list_flow li.arrow span{
	display: block;
	width: 0;
	height: 0;
	border-left: 8px solid #97d5f4;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.list_flow li dl{
	
}
.list_flow li dl dt{
	text-align: center;
}
.list_flow li dl dd{
	font-size: 16px;
	font-size: clamp(13px, 1.5vw, 16px);
	font-weight: 600;
	line-height: 1.8em;
	text-align: center;
	color: #fff;
	padding-top: 1em;
}
.list_flow li dl dd .big{
	font-size: 150%;
}
.list_flow li dl dd .big02{
	font-size: 180%;
}

.list_flow li dl dt img{
	width: 90%;
	max-width: 150px;
	margin: 0 auto;
}



@media screen and (max-width: 639px) {
.list_flow li{
	padding: 1em 0;
}
.list_flow li.number{
	width: 100%;
}
.list_flow li.arrow{
	margin: 0 auto;
}
.list_flow li.arrow span{
	transform: rotate(90deg);
}

.list_flow li dl{
	display: flex;
	justify-content: center;
	flex-flow: wrap;
	align-items: center;
}
.list_flow li dl dt{
	width: 100px;
}
.list_flow li dl dd{
	width: 150px;
	padding-top: 0;
}
}