@charset "utf-8";
/* ===================================================================
     recruit CSS
=================================================================== */

.page_ttl_recruit {
	color: #fff;
	font-weight: normal;
	padding: 6px 0 0 2%;
}
#recruit .pan li,
#recruit .pan li a {
	color: #fff;
}
#recruit .pan li::after {
	border-color: #fff;
}


/* -----------------------------------------------------------
	override
----------------------------------------------------------- */
#recruit footer {
	margin-top: 0;
}
@media screen and (max-width: 767px) {
#recruit footer {
	padding-top: 0;
}
}

/* -----------------------------------------------------------
	recruit main
----------------------------------------------------------- */
.recruit_mainpic {
	background: url("../img/main_pic.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	height: 740px;
}
.recruit_mainpic_text {
	width: 298px;
    margin: -158px 0 0 -149px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 60;
}

/* first be */
.recruit_box {
	margin-bottom: 24px;
	overflow: hidden;
}
.recruit_box_in {
	width: 940px;
	margin: 0 auto;
	padding: 100px 0 80px;
    position: relative;
}
.bg_recruit_01 {
	width: 405px;
	height: 641px;
	position: absolute;
	top: -112px;
	left: -33%;
}
.bg_recruit_02 {
	width: 468px;
	height: 641px;
	position: absolute;
	top: -106px;
	right: -39%;
}
.recruit_text {
	line-height: 2.4;
	text-align: center;
	margin-bottom: 46px;
}



/* index top message */
.index_topm {
	width: 940px;
	height: 356px;
	margin: 0 auto;
	position: relative;
}
.index_topm_fig {
	width: 418px;
	position: absolute;
	top: 53px;
	right: 30px;
	z-index: 50;
}
.index_topm_fig img {
	margin-bottom: 44px;
}
.index_topm_pic {
	width: 636px;
	position: absolute;
	top: 0;
	left: 40px;
}
.index_topm_link {
	width: 220px;
	float: right;
}
.index_topm_link a {
	display: block;
	text-align: center;
	padding: 10px 0;
	line-height: 1;
	color: #2c2c2c;
	border: 1px solid #2c2c2c;
}
.index_topm_link a:hover {
	opacity: 0.7;
}

/* icon */
.recruit_icon {
	width: 60px;
}

/* title */
.recruit_ttl {
	font-size: 18px;
	font-weight: normal;
    line-height: 1;
	text-align: center;
}
.recruit_ttl span {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 50px;
	letter-spacing: 0.03em;
	padding-bottom: 4px;
    display: inline-block;
}

/* -----------------------------------------------------------
	interview
----------------------------------------------------------- */
.interview {
	background: url("../../img/bg_stripe.jpg") repeat;
}
.interview .recruit_ttl {
	margin: 2% 0 48px;
	background: url("../img/bg_white.png") no-repeat;
	background-position: left bottom;
}
@media screen and (min-width: 1601px) {
.interview .recruit_ttl {
	background: url("../img/bg_white.png") no-repeat;
	background-size: cover;
	background-position: left bottom;
}
}
.interview_in {
	background:
		url("../img/bg_interview_tek.png"),
		url("../img/bg_interview_tek.png");
	background-repeat:
		repeat-y,
		repeat-y;
	background-position:
		top 136px left -40px,
		top 0  right -20px;
}

/* human */
.interview_list {
	width: 940px;
	margin: 0 auto;
	padding-bottom: 30px;
}
.interview_list li {
	width: 292px;
	float: left;
	text-align: center;
	margin: 0 32px 43px 0;
}
.interview_list li:nth-child(3n) {
	margin-right: 0;
}
.interview_list li a {
	display: block;
}

.interview_year {
	width: 78px;
	padding: 6px 4px;
	background: #EB6039;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	text-align: center;
}
.interview_pic {
	width: 258px;
	margin-top: -24px;
}
.interview_list li:first-child .interview_pic {
	margin-top: -47px;
}
.interview_name_plate {
	margin-top: -86px;
}
.interview_name_plate p {
	text-align: center;
	color: #EB6039;
	font-size: 17px;
	margin-top: -62px;
    margin-left: -22px;
}
.interview_name_plate p span {
	font-size: 13px;
}

/* -----------------------------------------------------------
	training
----------------------------------------------------------- */
.training {
	padding: 56px 0;
	background: url("../img/bg_training.jpg") no-repeat;
	background-size: cover;
	background-position: center;
}
.training_in {
	width: 940px;
	margin: 0 auto;
	padding: 30px 0 40px;
	background: #fff;
}
.training .recruit_ttl {
	margin-bottom: 36px;
}
.training_text {
	width: 80%;
	margin: 0 auto 36px;
	text-align:center;
	line-height: 1.8;
}
.training_step {
	width: 80%;
	margin: 0 auto;
	padding: 30px 0;
	text-align: center;
	background: url("../../img/bg_stripe.jpg") repeat;
}
.training_step img {
	width: 640px;
}

/* -----------------------------------------------------------
	tour & guideline
----------------------------------------------------------- */
.tourguide {
	color: #fff;
	background: #EB6039;
}
.tourguide .recruit_ttl span {
	font-size: 30px;
}
.tour {
	width: 50%;
	float: left;
	padding: 40px 0;
	background: url("../img/bg_tour.jpg") no-repeat;
	background-size: cover;
	background-position: center;
}
.tour .recruit_ttl {
	margin-bottom: 30px;
}
.tour_text {
	width: 420px;
	margin: 0 auto;
	text-align: center;
}
.guideline {
	width: 50%;
	float: right;
	padding: 40px 0;
	background: #EB6039;
}
.guideline .recruit_ttl {
	margin-bottom: 45px;
}
.guideline_link {
	width: 260px;
	margin: 0 auto;
}
.guideline_link a {
	display: block;
	text-align: center;
	padding: 10px 0;
	line-height: 1;
	color: #fff;
	border: 1px solid #fff;
}
.guideline_link a:hover {
	color: #EB6039;
	background: #fff;
	border: 1px solid #fff;
}


/* -----------------------------------------------------------
	group_photo
----------------------------------------------------------- */
.group_photo {
	padding-top: 50px;
	text-align: center;
}
.group_photo img {
	width: 900px;
}


@media screen and (min-width: 768px) and (max-width: 940px) {
/* -----------------------------------------------------------
	recruit main
----------------------------------------------------------- */
/* first be */
.recruit_box_in {
	width: 100%;
}
.bg_recruit_01 {
	width: 35%;
    height: auto;
    top: -144px;
    left: -13%;
}
.bg_recruit_02 {
	width: 35%;
    height: auto;
    top: -45px;
    right: -13%;
}
.recruit_text {
	width: 50%;
	margin: 0 auto;
}

/* index top message */
.index_topm {
	width: 100%;
}
.index_topm_fig {
	width: 310px;
    top: 122px;
    /*left: 86px;*/
}
.index_topm_pic {
	right: -40px;
}

/* -----------------------------------------------------------
	interview
----------------------------------------------------------- */
.interview_list {
	width: 90%;
}
.interview_list li {
	width: calc(96% / 3);
	margin-right: 2%;
}
.interview_list li:first-child .interview_pic {
	margin-top: -25px;
}
.interview_year {
	width: 66px;
	font-size: 11px;
}
.interview_name_plate {
	margin-top: -60px;
}
.interview_name_plate p {
	font-size: 16px;
	line-height: 1.3;
	margin-top: -46px;
}

/* -----------------------------------------------------------
	training
----------------------------------------------------------- */
.training_in {
	width: 90%;
}
.training_text {
	width: 90%;
}
.training_step {
	width: 90%;
}
.training_step img {
	width: 90%;
}

/* -----------------------------------------------------------
	tour & guideline
----------------------------------------------------------- */
.tour_text {
	width: 90%;
}

/* -----------------------------------------------------------
	group_photo
----------------------------------------------------------- */
.group_photo img {
	width: 80%;
}

}
@media screen and (max-width: 767px) {
/* -----------------------------------------------------------
	recruit main
----------------------------------------------------------- */
.recruit_mainpic {
	background: url("../img/main_pic_smp.jpg") no-repeat;
	background-position: center;
    background-size: cover;
	height: 450px;
}
.recruit_mainpic_text {
	width: 180px;
	margin: -95px 0 0 -90px;
}
/* first be */
.recruit_box {
	margin-bottom: 60px;
}
.recruit_box_in {
	width: 100%;
	padding: 120px 0 120px;
	margin-bottom: 50px;
	position: static;
	background:
		url("../img/bg_recruit_top_01_smp.png"),
		url("../img/bg_recruit_top_02_smp.png");
	background-repeat: no-repeat;
	background-size:
		300px,
		300px;
	background-position:
		top  right,
		bottom  left;
}
.bg_recruit_01 {
	display: none;
	/*width: 35%;
    height: auto;
    top: 30px;
    left: -13%;*/
}
.bg_recruit_02 {
	display: none;
	/*width: 35%;
    height: auto;
    top: -45px;
    right: -13%;*/
}
.recruit_text {
	width: 78%;
	margin: 0 auto;
}

/* index top message */
.index_topm {
	width: 100%;
	height: auto;
}
.index_topm_fig {
	width: 100%;
	position: static;
	margin-top: -20px;
    left: 0;
	text-align: center;
}
.index_topm_fig img {
	width: 270px;
	margin-bottom: 20px;
}
.index_topm_pic {
	width: 428px;
	right: -40px;
	position: static;
}
.index_topm_link {
	margin: 0 auto;
	float: none;
}


/* -----------------------------------------------------------
	recruit main
----------------------------------------------------------- */
/* icon */
.recruit_icon {
	width: 40px;
}

/* title */
.recruit_ttl {
	font-size: 16px;
}
.recruit_ttl span {
	font-size: 32px;
}

/* -----------------------------------------------------------
	interview
----------------------------------------------------------- */
.interview_in {
	background: url("../img/bg_interview_tek.png");
	background-repeat: repeat-y;
	background-position: top center;
}
.interview .recruit_ttl {
	background-position: left bottom 22px;
}

.interview_list {
	width: 90%;
}
.interview_list li {
	width: calc(96% / 2);
	margin-right: 4%;
	margin-bottom: 50px;
}
.interview_list li:first-child .interview_pic {
	margin-top: -25px;
}
.interview_list li:nth-child(3n) {
	margin-right: 4%;
}
.interview_list li:nth-child(2n) {
	margin-right: 0;
}
.interview_list li:last-child {
	margin-bottom: 20px;
}

.interview_pic {
	width: 100%;
}
.interview_year {
	font-size: 10px;
	line-height: 1.3;
	width: 38px;
	padding: 2px 2px;
}
.interview_name_plate {
	margin-top: -34px;
}
.interview_name_plate img {
	height: 56px;
}
.interview_name_plate p {
	font-size: 14px;
	line-height: 1.3;
	margin-top: -41px;
    margin-left: -13px;
}
.interview_name_plate p span {
	font-size: 10px;
}

/* -----------------------------------------------------------
	training
----------------------------------------------------------- */
.training_in {
	width: 94%;
}
.training_text {
	width: 90%;
}
.training_step {
	width: 90%;
}
.training_step img {
	width: 90%;
}

/* -----------------------------------------------------------
	tour & guideline
----------------------------------------------------------- */
.tourguide .recruit_ttl span {
	font-size: 32px;
}
.tour {
	width: 100%;
	float: none;
}
.tour_text {
	width: 90%;
}
.guideline {
	width: 100%;
	float: none;
}
.guideline_link {
	width: 90%;
}

/* -----------------------------------------------------------
	group_photo
----------------------------------------------------------- */
.group_photo img {
	width: 90%;
}

}