@charset "UTF-8";

/*--------------共通--------------*/

#under { color: #201e2c; }
#under p { font-size: 15px; }

#under .wrap { max-width: 1080px; margin: 0 auto; }
@media screen and (max-width: 899px) {
	#under .wrap { margin: 0 15px; }
}

.tit { font-family: "Frutiger", "Myriad", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ StdN", "Hiragino Kaku Gothic StdN", "MS UI Gothic", "ＭＳ ゴシック", sans-serif; font-weight: bold; }

.pc { display: block !important; }
.sp { display: none !important; }

.br-pc { display:block; }
.br-tb { display:none; }
.br-sp { display:none; }
@media screen and (max-width: 899px){	
  .br-pc { display:none; }
  .br-tb { display:block; }
  .br-sp { display:block; }
}
@media screen and (max-width: 767px){	
  .br-pc { display:none; }
  .br-tb { display:block; }
  .br-sp { display:block; }
	
  .pc { display: none !important; }
  .sp { display: block !important; }
	
  #under p { font-size: 13px; }
}

/*.clearfix::after { content: ""; display: block; clear: both; }*/

/*--------------keyimages--------------*/

#recruit .keyimages { background: url(../img/recruit/bgKeyimages.jpg) no-repeat 0 100%; background-size: cover; background-position: 50% 20%; height: 360px; }
#recruit .keyimages .wrap { max-width: 1080px; padding: 0 10px; margin: 0 auto; box-sizing: border-box; }
#recruit .keyimages h2 { color: #fff; text-align: center; font-size: 50px; padding-top: 160px; }
#recruit .keyimages h2 span { font-size: 18px; font-weight: bold; display: block; }


/*ハンバーガーが現れるサイズ*/
@media screen and (max-width: 899px) {
	#recruit .keyimages h2 { padding-top: 130px; }

}
/*スマホ*/
@media screen and (max-width: 767px) {
	#recruit .keyimages { height: 200px; }
	#recruit .keyimages h2 { font-size: 30px; padding-top: 50px; }
}

/*--------------pankuzu_box--------------*/
.pankuzu_box { width: 100%; line-height: 49px; font-size: 13px; text-align: left; }


/*--------------recruit共通--------------*/

#recruit {
	text-align: center;
}
#recruit a {text-decoration: none;color: #201e2c;}
#recruit ul li {list-style-type: none;}
#recruit h4 { font-size:31px; font-weight:bold; text-align: center; margin-bottom: 45px; }
#recruit h4 span { display: block; color: #3fb1fb; font-size: 18px;}

/*--------------recruitIntro--------------*/

#recruitIntro h3 { font-size:31px; font-weight:bold; text-align: center; margin-top: 75px; margin-bottom: 45px; }
#recruitIntro h3 span { position: relative; z-index: 20; }
#recruitIntro h3 span::after {
	position: absolute;
    content: "";
    height: 10px;
    background: #3fb1fb;
    width: 100%;
    bottom: -5%;
    right: 0;
    z-index: -11;
    transform: skewX(-10deg); }
#recruitIntro div { color: #494949; font-size: 23px; font-weight: bold; text-align: center; margin-bottom: 40px;}
#recruitIntro p { color: #494949; text-align: left; font-weight: bold; width: 770px; margin: 0 auto 75px ; }

/*ハンバーガーが現れるサイズ*/
@media screen and (max-width: 899px) {
	#recruitIntro p { width: 80%; }
}

/*スマホ*/
@media screen and (max-width: 767px) {	
	#recruitIntro h3 { font-size:22px; margin-top: 45px; }
	#recruitIntro div { font-size:16px; }
}

/*--------------interview--------------*/
#interview .blue { color: #fff; font-size: 25px; font-weight: bold; text-align: left; width: 860px; margin: 0 auto; padding: 30px 20px 20px 140px; background: url("../img/recruit/imgRecruit1_01.png") #1f56c7 no-repeat 45px 20px ; }
#interview .blue span { font-size: 15px; font-weight: bold; padding-left: 30px; }

#interview .table01 { width: 860px; margin: 0 auto; }
#interview .table01 tr { background-color: #e8eef0; }
#interview .table01 th { vertical-align: top; padding: 45px 0 45px 45px; }
#interview .table01 td { font-size: 33px; font-weight: bold; text-align: left; vertical-align: top; padding: 30px 45px 0 45px ; }
#interview .table01 td span { color: #1f56c7; font-size: 15px; font-weight: bold; display: block; }

#interview .table02 { width: 860px; margin: 0 auto 75px; }
#interview .table02 tr { background-color: #e8eef0; }
#interview .table02 th { text-align: left; width: 325px; vertical-align: top ; padding: 45px; }
#interview .table02 td h5 { text-align: left; }
#interview .table02 td p { text-align: left; }
#interview .table02 td h5 { font-size: 20px; font-weight: bold; position: relative; padding-left: 30px; margin-bottom: 10px; }
#interview .table02 td h5::before {
	position: absolute;
    content: "";
    height: 4px;
    background: #3baffd;
    width: 12px;
	left: 10px;
	top: 50%;
}
#interview .table02 td p { padding-bottom: 15px; }
#interview .table02 td { vertical-align: top; padding: 0 45px 45px; }
/*#interview .table02 td:nth-child(1) { padding: 0 45px 45px; }
#interview .table02 td:nth-child(2) { padding: 0 45px 45px; }*/

#interview .blue02 { color: #fff; font-size: 25px; font-weight: bold; text-align: left; width: 860px; margin: 0 auto; padding: 30px 20px 20px 140px; background: url("../img/recruit/imgRecruit2_01.png") #1f56c7 no-repeat 45px 20px ; }
#interview .blue02 span { font-size: 15px; font-weight: bold; padding-left: 30px; }
#interview .blue03 { color: #fff; font-size: 25px; font-weight: bold; text-align: left; width: 860px; margin: 0 auto; padding: 30px 20px 20px 140px; background: url("../img/recruit/imgRecruit3_01.png") #1f56c7 no-repeat 45px 20px ; }
#interview .blue03 span { font-size: 15px; font-weight: bold; padding-left: 30px; }

/*ハンバーガーが現れるサイズ*/
@media screen and (max-width: 899px) {
	#interview .blue { width: 100%; }
	#interview .table01 { width: 100%; }
	#interview .table02 { width: 100%; }
	#interview .blue02 { width: 100%; }
	#interview .blue03 { width: 100%; }
}

/*スマホ*/
@media screen and (max-width: 767px) {
	#interview .table01 th { display: block; padding: 45px 15px; }
	#interview .table01 td { display: block; font-size: 22px; padding: 0; text-align: center; }
	#interview .blue { background: url("../img/recruit/imgRecruit1_01.png") #1f56c7 no-repeat 25px 20px ; padding: 15px 0 15px 110px ; }
	#interview .blue span { display: block; padding-left: 0; }
	#interview .table02 th { display: block; padding: 45px; text-align: center; }
	#interview .table02 th img { width: 100%; }
	#interview .table02 td { display: block; padding: 15px 30px; }
	
	#interview .blue02 { background: url("../img/recruit/imgRecruit2_01.png") #1f56c7 no-repeat 25px 20px ; padding: 15px 0 15px 110px ; }
	#interview .blue02 span { display: block; padding-left: 0; }
	#interview .blue03 { background: url("../img/recruit/imgRecruit3_01.png") #1f56c7 no-repeat 25px 20px ; padding: 15px 0 15px 110px ; }
	#interview .blue03 span { display: block; padding-left: 0; }
}

/*--------------job--------------*/
#job { width: 100%; background-color: #e8eef0; margin:75px auto 10px; padding-bottom: 100px; }
#job h5 { font-size: 31px; font-weight:bold; text-align: center; margin-bottom: 30px; padding-top: 50px; }
#job h5 span { color: #3fb1fb; font-size: 18px; display: block; }
#job div { width: 810px; margin: 0 auto 50px ; }

#job table { width: 810px; margin: 0 auto }
#job table tr { border-bottom: #b3b3b3 1px solid; }
#job table th { font-weight: bold; width: 170px; text-align: left; padding: 25px; }
#job table th span { font-size: 13px; display:  block; margin-left: -15px;}
#job table td { text-align: left; padding: 25px 25px 25px 70px ; }
#job table td i{ color: #f30017; }
#job .tableMap { padding-bottom: 0; }
#job .tableBprderNone { border-bottom: none; }

/*ハンバーガーが現れるサイズ*/
@media screen and (max-width: 899px) {
	#job table td { padding-left: 50px; }
	#job div { width: 750px; }
	#job table th span { font-size: 11px; }
}

/*スマホ*/
@media screen and (max-width: 767px) {
	#job { width: 100%; margin-bottom: 45px; }
	#job .wrap { margin: 0 15px; max-width: 90%; }
	#job h5 { font-size: 22px; margin-bottom: 30px; }
	#job h5 span { font-size: 16px; }
	#job div { width: 100%; }
	
	#job table { width: 100%; }
	#job table th { color: #fff; background-color: #737373; width: 100%; display: block; text-align: center; padding: 15px; }
	#job table td { font-size: 13px; display: block; padding: 15px; }
}


/*--------------p-home__sec2　崩れましたので--------------*/

.p-home__sec2 div p { text-align: center; }

/*--------------mail--------------*/
#mail {margin: 0 auto; padding: 60px 0;}
#mail p a {text-decoration: underline;font-size: 15px;letter-spacing: 0.03em;line-height: 1.8em;}
#recruit .submit {text-align: center;position: relative; margin-bottom: 15px;display: inline-block;width: 234px;
    height: 42px;}
#recruit .mw_wp_form .horizontal-item {
    margin: 0 0 0 0 !important;
    display: inline-block;
}
#recruit .mwform-radio-field label {
    font-weight: normal;
    margin-bottom: 0;
}

#recruit .submit input {position: relative;
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 18px;
    display: inline-block;
    text-align: center;
    width: 234px;
    height: 42px;
    background: rgb(58,166,238);
    background: linear-gradient(
129deg, rgba(58,166,238,1) 0%, rgba(31,86,199,1) 100%);
    -webkit-appearance: none;
    border-radius: 5px;}
#recruit .submit input:hover {background-color: #2b975b;transition:all .5s ease;}
#recruit .submit:after {
        position: absolute;
    content: "";
    top: 15px;
    right: 13px;
    width: 29px;
    height: 8px;
    background: url(../img/contact/arrow.png);
    background-repeat: no-repeat;
    z-index: 10;
    margin: 0;
    padding: 0;
}
#recruit label.error {color: #fe0030;}
#recruit #mail dt {
	position: relative;
}
#recruit #mail form .center {
	text-align: center;
	padding: 20px 0;
}

/*確認画面*/
#formWrap {max-width: 800px;margin: 0 auto;padding-top: 50px;}
#formWrap p {margin-bottom: 2em;}
#formWrap table {width: 100%;border-top: 1px solid #ccc;margin-bottom: 2em;}
#formWrap tr {border-bottom: 1px solid #ccc;}
#formWrap th {padding: 20px 0;width: 30%;font-weight: bold;text-align: left;}
#formWrap td {padding: 10px 0;width: 70%;}
#formWrap .submit {
    text-align: center;
    position: relative;
    margin-bottom: 15px;
    display: block;
    width: 234px;
    height: 42px;
    margin: 0 auto;
	margin-bottom: 15px;
}
#submitSec {padding: 60px 0;}
.completed {padding: 50px 0;}

@media screen and (min-width: 768px) {
	#recruit #mail .form {
		max-width: 890px;
		margin: 0 auto;
	}
	#recruit #mail .wrap .reCAPTCHA-txt {
		text-align: center;
		margin-top: 50px;
	}
	#recruit #mail .wrap .reCAPTCHA-txt a {
		text-decoration: underline;
	}
	#recruit #mail form dt span {
    position: absolute;
    top: 50%;
    right: 45px;
    transform: translate3d(0, -50%, 0);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 46px;
    background-color: #f30017;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
		font-weight: bold;
}
	#recruit #mail form dt .nini {
    position: absolute;
    top: 50%;
    right: 45px;
    transform: translate3d(0, -50%, 0);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 46px;
    background-color: #737373;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
		font-weight: bold;
}
	#recruit #mail form {
		padding-top: 50px;
		text-align: left;
	}
    #recruit #mail dl {width: 100%;letter-spacing: -0.4em;}
    #recruit #mail dt {padding: 20px 0;width: 30%;display: inline-block;letter-spacing: normal;vertical-align: top;font-weight: bold;}
    #recruit #mail dt span {color: #fff;padding-left:10px;font-weight: normal;}
    #recruit #mail dd {padding: 10px 0;width: 60%;display: inline-block;letter-spacing: normal;vertical-align: top;}
    #recruit #mail dd input,#recruit #mail dd textarea {width: 100%;padding: 20px;border: 1px solid #a7a7a7;background-color: #fff;border-radius: 5px;}
	
	#recruit #mail dl .postalCode input {
		width: 45%;
	}
	#recruit #mail dl .postalCode .yuubin {padding-right: 20px;}
	#recruit #mail .address .left {float: left;width: 30%;}
	#recruit #mail .address .left span {right: -142px;}
	#recruit #mail .address .right {float: right;width: 70%;}
	#recruit #mail .address .clear {clear: both;}
	#formWrap .ttl {
		position: relative;
		font-size: 29px;
		font-weight: bold;
		text-align: center;
		padding-bottom: 50px;
		color: #575c67;
		width: 560px;
    	margin: 0 auto;}
	#formWrap .ttl:before {
	position: absolute;
		content: "";
		top: 20px;
		left: 0;
		width: 144px;
		height: 2px;
		background-image: url(../images/recruit/imgMail.png);}
	#formWrap .ttl:after {
		position: absolute;
		content: "";
		top: 20px;
		right: 0;
		width: 144px;
		height: 2px;
		background-image: url(../images/recruit/imgMail.png);
	}
	
	#recruit #mailSec input[type="radio"] {
    width: auto;
}
	#recruit #mail .radio input {
    width: auto;
}
}

@media screen and (max-width: 767px) {
	#recruit h3 {font-size: 22px;}
	#tel .tel {font-size: 30px;    padding-left: 30px;
    padding-right: 40px;text-align: center;}
	#tel .tel2 {font-size: 16px;}
	#tel .tel img {padding-top: 10px;padding-right: 10px;}
	#tel .tel:before,#tel .tel:after {height: 100px;}
	#mail ul li:before {top: 12px;}
	#recruit #mail .wrap .reCAPTCHA-txt {
		margin-top: 20px;
	}
	#recruit #mail .wrap .reCAPTCHA-txt a {
		text-decoration: underline;
	}
	#recruit .postalCode {display: flex;}
	#recruit .postalCode .yuubin {padding-top: 5px;}
	#recruit #mail dl {width: 100%;}
    #recruit #mail dt {padding: 20px 0 10px;font-weight: bold; text-align: left;}
    
	#recruit #mail form dt span {
		right: 0 ;
	}
	#recruit #mail form dt span {
    text-align: center;
    width: 46px;
    background-color: #d01406;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
	margin-left: 10px;
}
	#recruit #mail form dt .nini {
    text-align: center;
    width: 46px;
    background-color: #c4ccba;
    color: #1f2b20;
    display: inline-block;
    padding: 0 5px;
		margin-left: 10px;
}
	#recruit #mail input[type="radio"] {
		width: auto;
	}
    #recruit #mail dd {padding: 0 0 10px;margin: 0;}

    #recruit #mail dd input,#recruit #mail dd textarea {width: 100%;padding: 10px;background: #fff;border: 1px solid #a7a7a7;border-radius: 5px;}
	#recruit #mail .postalCode input {width: 100%;}
	#formWrap {
		padding-top: 20px;
	}
	#formWrap .ttl {
		position: relative;
    	font-size: 24px;
    	font-weight: bold;
    	text-align: center;
    	padding-bottom: 20px;
   		color: #575c67;
    	margin: 0 auto;
	}
	#formWrap .ttl:before {
		position: absolute;
		content: "";
		top: 20px;
		left: 0;
		width: 80px;
		height: 2px;
		background-image: url(../images/recruit/imgMail.png);	
	}
	#formWrap .ttl:after {
		position: absolute;
		content: "";
		top: 20px;
		right: 0;
		width: 80px;
		height: 2px;
		background-image: url(../images/recruit/imgMail.png);
	}
    #formWrap th {width: 100%;display: block;padding: 10px 0 0;}
    #formWrap td {width: 100%;display: block;padding: 0 0 10px;}
}