@charset "UTF-8";
/* CSS Document */

/* *************************************************************************
              COMMON  LAYOUT
************************************************************************* */

img { max-width: 100%; }


.recruit .head { background-color: initial; }

.recruit .head .logo { height: 100px; background-image: url("../images/common/logo_bg.png"); }

.recruit .head .logo a {
	width: 240px;
	height: 62px;
	margin: 10px 0 0 0;
	float: left;
}

.recruit .head .logo img {
	margin: 20px 0 0 57px;
}

.recruit .head .menu ul {
	width: auto;
	margin: 25px 20px 0 0;
	padding: 0 20px;
	background-color: #3466A2;
	height: 60px;
	border-radius: 30px;
	float: right;
}

.recruit .main {
	width: 100%;
	height: 750px;
	margin: 0;
	padding: 0;
	float: left;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.recruit .intro {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.recruit .intro .copy {
	width: 100%;
	min-height: 200px;
	margin: 0;
	padding: 40px 0 0;
	float: left;
	background-image: url("../images/environment/title_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	color: #3466A4;
	font-size: 280%;;
	font-weight: 700;
	line-height: 1.0em;
}

.recruit .intro .copy span {
	font-size: 40%;
	font-weight: 400;
}

.recruit .intro .message {
	width: 80%;
	margin: 50px 10%;
	float: left;
	text-align: center;
	color: #3466A4;
	font-size: 180%;;
	font-weight: 400;
	line-height: 1.7em;
}

.recruit .barnner {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 100px 0;
	float: left;
	background-image: initial;
}

.recruit .barnner .btn {
	width: 34%;
	height: 6vw;
	margin: 0 8%;
	float: left;
}

.recruit .barnner .btn a {
	width: 100%;
	height: 100%;
	display: block;
	border: #3466A2 3px solid;
	color: #FFF;
	border-radius: 4vw 0;
	box-sizing: border-box;
	font-size: 150%;
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 5.8vw;
	padding: 0;
	font-weight: 500;
	background-image: url("../images/common/arr_bar_wh.png");
	background-repeat: no-repeat;
	background-position: center right 3vw;
	background-size: 20px;
	transition: ease 0.5s all;
	background-color: #3466A2;
}

.recruit .barnner .btn a:hover {
	background-color: #FFF;
	color: #3466A2;
	background-image: url("../images/common/arr_bar_nv.png");
}

/* *************  READ MORE  ************************************* */

.recruit .button {
	border-radius: 25px;
}



/* *************************************************************************
              FRONTPAGE  LAYOUT
************************************************************************* */

.recruit .frontpage .main { background-image: url("../images/top/main_img.jpg"); }

.recruit .frontpage .main img {	margin: 290px 0 0 150px; }

.recruit .frontpage .environment {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	background-image: url("../images/top/bg_01.jpg");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}

.recruit .frontpage .environment .filter {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	background-color: rgba(52,102,162,0.3);
}

.recruit .frontpage .environment .photo {
	width: 60%;
	margin: 50px;
	padding: 0;
	float: right;
	z-index: 0;
}

.recruit .frontpage .environment .box {
	width: 35%;
	margin: -350px 0 100px 10%;;
	padding: 50px 0;
	float: left;
	z-index: 99;
	background-color: #FFF;
	color: #3466A2;
}

.recruit .frontpage .environment .box h2 { text-align: center;margin: 0 0 50px; }

.recruit .frontpage .environment .box p { margin: 0 3em 50px; }


.recruit .frontpage .interview {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.recruit .frontpage .interview .main {
	width: 100%;
	height: 800px;
	margin: 0;
	padding: 0;
	float: left;
	background-image: url("../images/top/iv-main.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 0;
}

.recruit .frontpage .interview .main .title {
	width: 350px;
	margin: 70px 5% 0 0;
	padding: 0;
	float: right;
}

.recruit .frontpage .interview .main .title h2 {
	width: 100%;
	margin: 0;
	padding: 1em 0;
	border-top: #FFF 1px solid;
	border-bottom: #FFF 1px solid;
	text-align: center;
	font-size: 30px;
	text-shadow: 3px 3px 3px #000;
}

.recruit .frontpage .interview .main .title .en {
	color: #FFF;
	font-weight: 400;
	text-align: right;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 105%;
	margin: 0 1em 0 0;
	padding: 0;
	text-shadow: 3px 3px 3px #000;
}

.recruit .frontpage .interview .iv_list {
	width: 50%;
	margin: -100px 25% 70px;
	padding: 0;
	float: left;
	z-index: 99;
}

.recruit .frontpage .interview .iv_list dl {
	width: 48%;
	margin: 0 1%;
	padding: 0;
	float: left;
}

.recruit .frontpage .interview .iv_list dl dd {
	margin: -4.8vw 3vw 0 0;
	text-align: right;
}

.recruit .frontpage .interview .iv_list dl dd img {
	width: 80%;
	max-width: 420px;
}

/* *************************************************************************
              ENVIRONMENT  LAYOUT
************************************************************************* */

.recruit .envi_page .main { background-image: url("../images/environment/main_img.jpg"); }

.recruit .envi_page .detail {
	width: 100%;
	margin: 0;
	padding: 50px 0;
	float: left;
}

.recruit .envi_page .detail .box {
	width: 40%;
	margin: 0 5%;
	padding: 0;
	float: left;
}

.recruit .envi_page .detail .box .photo {
	width: 95%;
	margin: 0;
	padding: 0;
	z-index: 0;
}

.recruit .envi_page .detail .box dl {
	width: 70%;
	max-width: 600px;
	color: #346693;
	background-color: #E6FAFC;
	z-index: 99;
}

.recruit .envi_page .detail .box dl dt {
	width: 90%;
	margin: 1em 5%;
	font-size: 130%;
	text-align: center;
	font-weight: 700;
}

.recruit .envi_page .detail .box dl dd {
	width: 90%;
	margin: 0 5% 1.5em;
}

.recruit .envi_page .detail .box.sec01 { margin-top: 50px; }
.recruit .envi_page .detail .box.sec01 .photo { float: left; }
.recruit .envi_page .detail .box.sec01 dl { float: right;margin-top: -29vw; }

.recruit .envi_page .detail .box.sec02 .photo { float: left; }
.recruit .envi_page .detail .box.sec02 dl { float: right;margin-top: -5vw; }

.recruit .envi_page .detail .box.sec03 { margin-top: 50px; }
.recruit .envi_page .detail .box.sec03 .photo { float: left; }
.recruit .envi_page .detail .box.sec03 dl { float: right;margin-top: -5vw; }

.recruit .envi_page .detail .box.sec04 { margin-top: 100px; }
.recruit .envi_page .detail .box.sec04 .photo { float: right; }
.recruit .envi_page .detail .box.sec04 dl { float: left;margin-top: -30vw; }

.recruit .envi_page .detail .box.sec05 { margin-top: 50px; }
.recruit .envi_page .detail .box.sec05 .photo { float: left; }
.recruit .envi_page .detail .box.sec05 dl { float: right;margin-top: -5vw; }

.recruit .envi_page .detail .box.sec06 { margin-top: 50px; }
.recruit .envi_page .detail .box.sec06 .photo { float: right; }
.recruit .envi_page .detail .box.sec06 dl { float: left;margin-top: -5vw; }


/* *************************************************************************
              INTERVIEW  LAYOUT
************************************************************************* */

.recruit .interview .main { background-image: url("../images/interview/main-img.jpg"); }

.recruit .interview .detail {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	color: #3466A4;
}

.recruit .interview .detail .photo {
	width: 50%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.recruit .interview .detail.block01 .photo,
.recruit .interview .detail.block03 .photo { float: left; }

.recruit .interview .detail.block02 .photo { float: right; }

.recruit .interview .detail .photo img { width: 100%;max-width: 800px;margin: 0 auto; }

.recruit .interview .detail .title {
	width: 80%;
	margin: 2vw 5%;
	padding: 0 5%;
	float: left;
	font-size: 200%;
	font-weight: 600;
}

.recruit .interview .detail .title span { font-size: 200%;margin-left: 0.2em; }

.recruit .interview .detail p {
	width: 80%;
	margin: 0 5%;
	padding: 2vw 5%;
	float: left;
	font-size: 130%;
	font-weight: 700;
	border-top: #3466A4 1px solid;
	border-bottom: #3466A4 1px solid;
}

.recruit .interview .detail p.profile {
	width: 70%;
	margin: 1em 15% 3em;
	padding: 0;
	font-size: 100%;
	border: none;
}

.recruit .interview .detail p.profile span { font-size: 105%; }

/* *************************************************************************
              INTERVIEW DETAIL  LAYOUT
************************************************************************* */

.recruit .interviewdetail .main {
	background-position: center;
	background-size: cover;
	margin: 0 0 10vw;
}

.recruit .interviewdetail.num01 .main { background-image: url("../images/interview01/main_img.jpg"); }
.recruit .interviewdetail.num02 .main { background-image: url("../images/interview02/main_img.jpg"); }
.recruit .interviewdetail.num03 .main { background-image: url("../images/interview03/main_img.jpg"); }

.recruit .interviewdetail .main .box {
	width: 500px;
	height: 300px;
	margin: 150px 0 0;
	float: left;
	background-color: #3466A4;
	border-radius: 0 150px 150px 0;
	color: #FFF;
	font-weight: 700;
}

.recruit .interviewdetail .main .box .title {
	width: 80%;
	margin: 4vw 5% 2vw 15%;
	padding: 0;
	float: left;
	font-size: 200%;
}

.recruit .interviewdetail .main .box .title span { font-size: 200%;margin-left: 0.2em; }

.recruit .interviewdetail .main .box p.profile {
	width: 80%;
	margin: 1em 5% 0 15%;
	padding: 0;
	font-size: 100%;
	border: none;
}

.recruit .interviewdetail .main .copy {
	width: 80%;
	margin: 100px 10% 0;
	float: left;
	color: #3466A4;
	font-weight: 700;
	font-size: 200%;
	line-height: 1.7em;
	text-shadow: 2px 2px 2px #FFF;
}

.recruit .interviewdetail .detail {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.recruit .interviewdetail .detail .photo {
	width: 50%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.recruit .interviewdetail .detail .photo img {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
}

.recruit .interviewdetail .detail .glid {
	width: 45%;
	margin: 0 5% 0 0;
	padding: 0;
	text-align: center;
	text-align: justify;
	color: #3466A4;
}

.recruit .interviewdetail .detail .glid h2 {
	width: 80%;
	margin: 50px 5%;
	padding: 0.5em 5%;
	border-bottom: #3466A4 1px dashed;
}

.recruit .interviewdetail .detail .glid p {
	width: 80%;
	margin: 1em 5%;
	padding: 0 5%;
}

.recruit .interviewdetail .detail.block01 .photo,
.recruit .interviewdetail .detail.block03 .photo { float: left; }
.recruit .interviewdetail .detail.block01 .glid,
.recruit .interviewdetail .detail.block03 .glid{ float: right; }

.recruit .interviewdetail .detail.block02 .photo { float: right; }
.recruit .interviewdetail .detail.block02 .glid { float: left; }

.recruit .interviewdetail .nav {
	width: 100%;
	margin: 50px 0;
	float: left;
}

.recruit .interviewdetail .nav ul {
	width: 50%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}

.recruit .interviewdetail .nav ul li {
	float: left;
	width: 50%;
}

.recruit .interviewdetail .nav ul li a {
	width: 90%;
	margin: 0 5%;
	padding: 0.7em 0;
	background-color: #3466A4;
	border: #3466A4 1px solid;
	box-sizing: border-box;
	font-size: 120%;
	font-weight: 700;
	color: #FFF;
	text-align: center;
	display: block;
	background-image: url("../images/common/arr_wh.png");
	background-repeat: no-repeat;
	background-position: center right 20px;
	transition: ease 0.5s all;
}

.recruit .interviewdetail .nav ul li.act a {
	background-color: #FFF;
	color: #3466A4;
	background-image: url("../images/common/arr_act.png");;
}

.recruit .interviewdetail .nav ul li a:hover {
	background-color: #FFF;
	color: #3466A4;
	background-image: url("../images/common/arr_bar_nv.png");
}

/* *************************************************************************
             GUIDELINE  LAYOUT
************************************************************************* */

.contents.guideline {
	width: 100%;
	margin: 150px 0 50px;
}

.contents.guideline h1 {
	width: 100%;
	font-size: 180%;
	color: #3466A4;
	text-align: center;
	letter-spacing: 0.3em;
	margin: 0 auto 30px;
	float: left;
	padding: 0;
}

.contents.guideline table {
	width: 100%;
	border-top: #666 1px solid;
	border-left: #666 1px solid;
	border-right: #666 1px solid;
	box-sizing: border-box;
	border-collapse: collapse;
}

.contents.guideline th,
.contents.guideline td {
	border-bottom: #666 1px solid;
	padding: 0.5em 1em;
}

.contents.guideline th {
	border-right: #666 1px solid;
	background-color:rgba(52,102,164,0.1);
	color: #3466A4;
	text-align: center;
	letter-spacing: 0.3em;
	width: 250px;
}



/* **********************************************************************
        MOBILE  LAYOUT
************************************************************************* */
@media screen and (max-width:1300px) {

.recruit .interview .main { height: 600px; }

.recruit .interviewdetail .main .box {
	width: 35%;
	height: 240px;
	margin: 150px 0 0;
	float: right;
	border-radius: 120px 0 0 120px;
}

}

/* **********************************************************************
        WIDTH 1100px
************************************************************************* */

@media screen and (max-width:1100px) {

.recruit .frontpage .interview .main,
.recruit .envi_page .main,
.recruit .interviewdetail .main { height: 500px; }

.recruit .envi_page .detail .box dl dt { font-size: 120%;text-align: justify; }
.recruit .envi_page .detail .box.sec01 dl { margin-top: -33vw; }
.recruit .envi_page .detail .box.sec04 dl { margin-top: -35vw; }

.recruit .interview .detail { margin: 50px 0 0; }
.recruit .interviewdetail .main .box { margin: 120px 0 0; }
.recruit .interviewdetail .main .copy { margin: 0 10% 0; }

}

/* **********************************************************************
        WIDTH 980px
************************************************************************* */

@media screen and (max-width:980px) {

.recruit .intro .message { font-size: 140%; }

.recruit .frontpage .main { height: 500px; }
.recruit .frontpage .main img {	width: 60%; margin: 90px 20% 0; }
.recruit .frontpage .environment .photo { width: 80%;margin: 50px 20% 50px 0; }
.recruit .frontpage .environment .box {	width: 70%;margin: -120px 10% 100px 20%; }

.recruit .envi_page .detail .box { width: 80%;margin: 0 10% 50px; }
.recruit .envi_page .detail .box.sec01 dl { margin-top: -50vw; }
.recruit .envi_page .detail .box.sec02 dl { margin-top: -5vw; }
.recruit .envi_page .detail .box.sec03 dl { margin-top: -5vw; }
.recruit .envi_page .detail .box.sec04 dl { margin-top: -60vw; }
.recruit .envi_page .detail .box.sec05 dl { margin-top: -10vw; }
.recruit .envi_page .detail .box.sec06 dl { margin-top: -10vw; }

.recruit .interview .main { height: 500px; }
.recruit .interview .detail .photo,
.recruit .interview .detail .glid-50 { width: 100%; }

.recruit .interviewdetail .main { margin: 100px 0 0; }
.recruit .interviewdetail .main .copy { font-size: 170%;margin: 1em 10% 0; }
.recruit .interviewdetail .main .box { height: 200px;border-radius: 100px 0 0 100px; }
.recruit .interviewdetail .main .box .title { margin: 4vw 5% 2vw 15%;font-size: 150%; }
.recruit .interviewdetail .main .box .title span { font-size: 120%; }
.recruit .interviewdetail .detail { margin: 50px 0 0; }
.recruit .interviewdetail .detail .photo { width: 90%;margin: 0 5%; }
.recruit .interviewdetail .detail .glid { width: 90%;margin: 0 5%; }
.recruit .interviewdetail .nav ul li a { background-size: 12px; }

}

/* **********************************************************************
        WIDTH 780px
************************************************************************* */

@media screen and (max-width:780px) {

.recruit .frontpage .interview .main { height: 350px; }
.recruit .frontpage .interview .main .title { width: 250px;margin: 20px 5% 0 0; }
.recruit .frontpage .interview .main .title h2 { padding: 0.5em 0;font-size: 22px; }
.recruit .frontpage .interview .main .title .en { font-size: 105%;margin: 0 1em 0 0; }
.recruit .frontpage .interview .iv_list { width: 94%;margin: -100px 3% 70px; }

.recruit .envi_page .main { height: 350px; }

.recruit .interview .main { height: 400px; }

.recruit .interviewdetail .main { height: 400px;margin: 100px 0 200px; }
.recruit .interviewdetail .main .box {
	width: 50%;
	height: auto;
	margin: 330px 25% 0;
	padding: 1em 0;
	border-radius: 0;
}
.recruit .interviewdetail .main .box .title { margin: 1vw 10%; }
.recruit .interviewdetail .main .copy { font-size: 150%;letter-spacing: 0; }
.recruit .interviewdetail .nav ul li { width: 100%;margin: 0 0 1em; }

.contents.guideline th,
.contents.guideline td {
	width: 90%;
	padding: 0.5em 5%;
	float: left;
}

.recruit .intro .copy { font-size: 200%; }
.recruit .intro .copy span { font-size: 60%; }
.recruit .intro .message { font-size: 130%;text-align: justify; }
.recruit .intro .message br { display: none; }

.recruit .barnner .btn a { background-size: 12px;padding: 0.3em 0 0; }
.recruit .barnner .btn { width: 40%;height: 4em;margin: 0 5%; }


}


/* **********************************************************************
        WIDTH 580px
************************************************************************* */

@media screen and (max-width:580px) {

.recruit .frontpage .main { height: 400px; }
.recruit .frontpage .interview .main .title { width: 250px;margin: 220px auto 0;float: none; }
.recruit .frontpage .interview .main .title h2 { padding: 0.5em 0;font-size: 22px; }
.recruit .frontpage .interview .iv_list { width: 94%;margin: -30px 3% 70px; }

.recruit .interview .main { margin-top: 100px;height: 300px; }

.recruit .interviewdetail .main .box { width: 80%;margin: 330px 10% 0; }
.recruit .interviewdetail .main .copy { font-size: 120%; }
.recruit .interviewdetail .main .copy br { display: none; }
.recruit .interviewdetail .detail .glid h2 { width: 90%;margin: 50px 3%;padding: 0.5em 2%;font-size: 120%; }

.recruit .barnner .btn { width: 80%;height: 4em;margin: 0 10% 1em; }
.recruit .barnner .btn a { padding: 0.5em 0 0; }

}

/* **********************************************************************
        WIDTH 480px
************************************************************************* */

@media screen and (max-width:480px) {

.recruit .head .logo { height: 80px;background-size: cover;background-position: center left -70px; }
.recruit .head .logo a { width: 200px; }
.recruit .head .logo img { margin: 10px 0 0 20px; }

.recruit .frontpage .environment .box {	width: 80%;margin: -120px 10% 100px; }
.recruit .frontpage .interview .main { height: 250px; }
.recruit .frontpage .interview .main .title { width: 250px;margin: 160px auto 0;float: none; }
.recruit .frontpage .interview .iv_list { margin: 10px 3% 50px; }

.recruit .interview .main { height: 220px; }

}