@charset "utf-8";

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

Name: recruit.css

Description: recruit.css

Create: 2022.08.25

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

/* ==================================================
Common
PC
[-]Reset
[-]Main Visual
[-]Main Area
[-]4column Area
[-]Global Career
[-]Banner Area
[-]Hover
SP
[-]Main Visual
[-]Main Area
[-]4column Area
[-]Global Career
[-]Banner Area

===================================================== */

/* ----------------------------------------------------------------------------------------
/* Common
------------------------------------------------------------------------------------------- */
#recruiting * {
box-sizing: border-box;
font-family: 'Noto Sans JP', sans-serif;
}

/* ----------------------------------------------------------------------------------------
/* PC
------------------------------------------------------------------------------------------- */

/* Reset
===================================================== */
.JS #Contents,
#Contents .GridSet {
width: auto;
}
.JS #Contents {
padding-left: 0!important;
padding-right: 0!important;
}

/* Main Visual
----------------------------------------------------- */
.mv_area {
background: url(/image/jp/about/recruit/index_01.png) center/cover no-repeat;
height: 300px;
}
.mv_area h1 {
max-width: 980px;
margin: 0 auto;
padding-left: 15px;
font-size: 50px;
line-height: 1;
font-weight: bold;
color: #fff;
position: relative;
top: 140px;
text-shadow:0 0 50px #09222e;
}
.mv_area h1 span {
font-size: 26px;
text-shadow: none;
}

/* Main Area
----------------------------------------------------- */
.main_wrapper {
font-size: 16px;
line-height: 1.625;
background: url(/image/jp/about/recruit/index_10.png) no-repeat top center;
background-size: 100%;
overflow: hidden;
}
.main_inner {
max-width: 995px;
margin: 60px auto 100px;
padding: 0 15px;
}

/* 4column Area
----------------------------------------------------- */
.col4 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.col4 div {
width: 24%;
text-align: center;
margin-bottom: 45px;
}
.col4 > div > a:link,
.col4 > div > a:visited {
text-decoration: none;
color: #272727;
}
.col4 p {
background-color: #2de8ef;
}
.col4 div.h2_wrapper {
width: 86%;
height: 60px;
margin: 0 auto;
background-color: #fff;
position: relative;
top: -30px;
box-shadow: 0 0 7px #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.col4 div.h2_wrapper::after {
content: "";
border-bottom: 10px solid #b7b6b4;
border-left: 10px solid transparent;
position: absolute;
top: 75%;
left:92%;
}
.col4 div.h2_wrapper h2 {
padding: 0;
margin: 0;
background-image: none;
}

/* Global Career
----------------------------------------------------- */
.global_career .heading {
font-size: 30px;
margin-bottom: 15px;
}

.global_career a {
	display: block;
}

.global_career ul {
margin-top: 5px;
}
.global_career ul > li > a {
padding-bottom: 5px;
}

/* Banner Area
----------------------------------------------------- */
.banner_area ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.banner_area ul li {
border: 1px solid #cecece;
background-color: #2de8ef;
margin-top: 13px;
}

/* Hover
----------------------------------------------------- */
.col4 > div > a:hover {
color: #cc0022;
}
.col4 > div > a:hover p {
opacity: 0.8;
}
.col4 > div > a:hover .h2_wrapper::after {
border-bottom: 10px solid #cc0022;
}
.banner_area ul li a:hover {
opacity: 0.8;
}

/* ----------------------------------------------------------------------------------------
/* SP
------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

/* Main Visual
----------------------------------------------------- */
.mv_area {
background: url(/image/jp/about/recruit/index_11.png) center/cover no-repeat;
height: 110px;
}
.mv_area h1 {
max-width: 767px;
padding-left: 6vw;
font-size: 25px;
line-height: 1.2;
font-weight: bold;
color: #fff;
position: relative;
top: 37px;
text-shadow:0 0 50px #09222e;
}
.mv_area h1 span {
font-size: 16px;
}

/* Main Area
----------------------------------------------------- */
.main_wrapper {
font-family: 'Noto Sans JP', sans-serif;
font-size: 10px;
line-height: 1.5;
background: url(/image/jp/about/recruit/index_10.png) no-repeat top center;
background-size: 100%;
overflow: hidden;
}
.main_inner {
width: auto;
margin: 30px 4vw;
padding: 0;
}

/* 4column Area
----------------------------------------------------- */
.col4 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col4 div {
width: 165px;
height: 175px;
text-align: center;
margin-bottom: 0;
}
.col4 div:last-child,
.col4 div:nth-last-child(2) {
margin-bottom: 20px;
}
.col4 p {
background: none;
}
.col4 div.h2_wrapper {
width: 130px;
height: 41px;
margin: 0 auto;
background-color: #fff;
position: relative;
top: -20px;
box-shadow: 0 0 7px #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.col4 div.h2_wrapper::after {
content: "";
border-bottom: 6px solid #b7b6b4;
border-left: 6px solid transparent;
position: absolute;
top: 30px;
left:120px;
}
.col4 > div > a:hover .h2_wrapper::after {
border-bottom: 6px solid #cc0022;
}
.col4 div.h2_wrapper h2 {
font-size: 12px;
line-height: 1.4;
}

/* Global Career
----------------------------------------------------- */
.global_career .heading {
font-size: 15px;
margin-bottom: 7px;
}
.global_career ul {
margin: 2px 0 0;
}

/* Banner Area
----------------------------------------------------- */
.banner_area ul {
display:block;
}
.banner_area ul li {
max-width: 238px;
margin: 0 auto;
border: 1px solid #cecece;
background: none;
}
.banner_area ul li + li {
margin-top: 15px;
}

}