@charset "UTF-8";

/*=============================================================
#mainimage
=============================================================*/
#page_mainimage {
width: 100%;
height: 100vh;
background-image: url("../image/page_mainimage.jpg");
background-size: cover;
position: relative;
overflow: hidden;
margin-top: 70px;
display: flex;
align-items: center;
justify-content: center;
}
#page_mainimage .box{
position: relative;
width: 100%;
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#page_mainimage .box:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2E74B6;
mix-blend-mode: multiply;
z-index: 1;
}
#page_mainimage .box .box_text{
z-index: 100;
position: relative;
}
#page_mainimage h1 {
color: #fff;
font-size: 60px;
font-weight: bold;
line-height: 1.5em;
text-align: center;
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
}

/*=============================================================
#recruit
=============================================================*/
#recruit {
width: 1200px;
margin: 40px auto 100px;
}
#recruit .box{
margin: 30px auto;
}
#recruit .box p{
width: 690px;
margin: 30px auto 0;
}
/*=============================================================
#interview
=============================================================*/
#interview {
width: 100%;
position: relative;
padding: 80px 0 80px;
position: relative;
top: 30px;
}
#interview::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #2E74B6;
transform: skewY(8deg);
mix-blend-mode: multiply;
overflow: hidden;
z-index: -5;
}
#interview .box {
width: 1060px;
margin: 50px auto;
z-index: 100;
}
#interview ul.message {
margin: 100px auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#interview ul.message li:nth-child(even) {
margin-top: 100px;
}
#interview .message_box {
overflow: hidden;
position: relative;	
}
#interview .message_box .caption {
color: #fff;
display: inline-block;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
}
#interview .message_box .caption h4 {
font-size: 36px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: solid 1px #fff;
text-align: left;
}
#interview .message_box .caption p{
text-align: left;
}
#interview .message_box .mask {
width: 100%;
height:	500px;
position: absolute;	/* 絶対位置指定 */
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;	/* マスクを表示しない */
background-color: rgba(0,0,0,0.7);	/* マスクは半透明 */
-webkit-transition:	all 0.2s ease;
transition: all 0.2s ease;
}
#interview .message_box:hover .mask {
opacity: 1;	/* マスクを表示する */
}
/*=============================================================
#description
=============================================================*/
#description {
width: 1200px;
margin: 100px auto 100px;
text-align: center;
}
#description .box {
margin: 30px auto;
}
#description dl{
display: flex;
align-items: stretch;
text-align: left;
}
#description dl dt {
padding: 2em;
width: 252px;
border-bottom: solid 1px #2E74B4;
box-sizing: border-box;
display: flex;
align-items: center;
}
#description dl dd {
padding: 2em;
border-bottom: solid 1px #ccc;
width: 948px;
box-sizing: border-box;
display: flex;
align-items: center;
}
#description a.btn {
margin: 60px auto 0;
}



#footer {
text-align: center;
}



@media screen and (max-width: 960px) {
/*=============================================================
#mainimage
=============================================================*/
#page_mainimage {
width: 100%;
height: 80vh;
background-image: url("../image/page_mainimage.jpg");
background-size: cover;
position: relative;
overflow: hidden;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
#page_mainimage .box{
position: relative;
width: 100%;
height: 200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#page_mainimage .box:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2E74B6;
mix-blend-mode: multiply;
z-index: 1;
}
#page_mainimage .box .box_text{
z-index: 100;
position: relative;
}
#page_mainimage h1 {
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 1.5em;
text-align: center;
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
}
/*=============================================================
#recruit
=============================================================*/
#recruit {
width: 90%;
margin: 40px auto 40px;
text-align: center;
}
#recruit .box{
margin: 30px auto;
}
#recruit .box p{
width: 100%;
margin: 30px auto 0;
}
/*=============================================================
#interview
=============================================================*/
#interview {
width: 100%;
position: relative;
padding: 40px 0 40px;
position: relative;
top: 30px;
text-align: center;
}
#interview::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #2E74B6;
transform: skewY(8deg);
mix-blend-mode: multiply;
overflow: hidden;
z-index: -5;
}
#interview .box {
width: 90%;
margin: 30px auto;
z-index: 100;
}
#interview ul.message {
margin: 40px auto;
display: block;
}
#interview ul.message li:nth-child(even) {
margin-top: 0;
}
#interview .message_box {
overflow: hidden;
position: relative;	
width: 80%;
height: auto;
margin: 0 auto 20px;
}
#interview .message_box .caption {
color: #fff;
display: inline-block;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
}
#interview .message_box .caption h4 {
font-size: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: solid 1px #fff;
text-align: left;
}
#interview .message_box .caption p{
text-align: left;
}
#interview .message_box .mask {
width: 100%;
height:	100%;
position: absolute;	/* 絶対位置指定 */
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 1;	/* マスクを表示しない */
background-color: rgba(0,0,0,0.7);	/* マスクは半透明 */
-webkit-transition:	all 0.2s ease;
transition: all 0.2s ease;
}
/*=============================================================
#description
=============================================================*/
#description {
width: 90%;
margin: 60px auto 60px;
text-align: center;
}
#description .box {
margin: 10px auto;
}
#description dl {
display: block;
text-align: left;
}
#description dl dt {
padding: 1em 2em 0;
width: auto;
border-bottom: none;
box-sizing: border-box;
color: #2E74B4
}
#description dl dd {
padding: 1em 2em;
border-bottom: solid 1px #ccc;
width: auto;
box-sizing: border-box;
}
#description a.btn {
margin: 60px auto 0;
}
}