@charset "utf-8";
/* CSS Document */
.mainMenu {
    z-index: 10000;
}

/*PC*/
@media print, screen and (min-width: 769px) {

/*--------hed_img------------*/

.logo_index { display: none; }

#hedImg {
background: url(../images/message/hed_img.jpg) center center no-repeat;
background-size: cover;
}

.about_box { margin-bottom: 70px; }




.business_box { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 auto 100px; }
.business_box00 { width: 100%; margin: 0 auto 100px; }

.business_txtbox { width: 48%; justify-content: center; align-items: center; margin-right: 4%; }
.business_imgbox { width: 48%; justify-content: center; align-items: center; }

.business_txtbox2 { width: 48%; justify-content: center; align-items: center;  }
.business_imgbox2 { width: 48%; justify-content: center; align-items: center; margin-right: 4%; }

/*-------------index--------*/

.idx_tit_sub { font-size: 25px; color: #333; margin-bottom: 30px; text-align: left; }
.idx_tit_sub_white { font-size: 25px; color: #fff; margin-bottom: 30px; text-align: left; font-weight: bold; }


/*--------idx_box03---------*/

#idx_box03 { margin-bottom: 70px; }

.message_list { width: 100%; margin: 50px auto 0px; }
.message_list li { width: 70%; background: #d0121b; }
.message_list li:nth-of-type(1) { margin: auto auto auto 0; }
.message_list li:nth-of-type(2) { margin: auto 0 auto auto; margin-top: 50px; }

.message_box { width: 100%; display: flex; flex-wrap: wrap; align-items: center; }

.message_img { width: 100%; }
.message_img img { width: 100%; height: auto; }
.message_txtbox { flex-basis: 60%; padding: 30px; box-sizing: border-box; color: #fff; }


.message_list li a .read_btn_list { font-size: 16px; color: #fff; position: relative; text-align: right; padding-right: 50px; margin-top: 30px; font-weight: bold; }
.message_list li a .read_btn_list::before {position: absolute; display: block; content: "\f0a9"; font-family: "Font Awesome 5 Free"; color: #fff; font-weight: bold; right: 20px;  font-size: 18px; top: 2px;  -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.message_list li a:hover .read_btn_list::before {right: 10px; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.photo_hover_wrap img {
width: 100%;
height: auto;
}

.photo_hover_wrap {
flex-basis: 40%; 
display: block;
height: 300px;
overflow: hidden;
position: relative;
text-decoration: none;
z-index: 0;
}
.photo_hover_wrap .photo {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all 0.2s linear 0s;
width: 100%;
}
.message_list li a:hover .photo_hover_wrap {
text-decoration: none;
cursor: pointer;
}
.message_list li a:hover .photo_hover_wrap .photo {
transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

/*-社長メッセージ--*/
.mpBox {
margin-bottom: 60px;
}

.tan {
margin-bottom: 30px;
}

.mpImg {
margin-bottom: 40px;
}

.mpTxt {
width: 90%;
margin: 0 auto 0;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.mpTxt_p {
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
line-height: 1.8;
}

.mpTxt_img {
-ms-flex-preferred-size: 35%;
flex-basis: 35%;
}

.mpTxt_img p {
font-size: 1em;
padding-top: 10px;
text-align: right;
}

.mpTxt_img p span {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: bold;
}

/*-採用担当からのメッセージ--*/
.mrBox {
margin-bottom: 60px;
}

.mrList li {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}

.mrList li.rv {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}

.mrList_img {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
min-height: 500px;
}

.mr01 {
background: url("../images/message/message_recruiter01.jpg") center center no-repeat;
background-size: cover;
}

.mr02 {
background: url("../images/message/message_recruiter02.jpg") center center no-repeat;
background-size: cover;
}

.mr03 {
background: url("../images/message/message_recruiter03.jpg") center center no-repeat;
background-size: cover;
}

.mrList_txt {
box-sizing: border-box;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
padding: 60px 50px;
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;
}

.mrList_txt-name {
font-weight: bold;
margin-bottom: 5px;
}

.mrList_txt-ttl {
font-size: 2rem;
color: #d0121b;
margin-bottom: 15px;
}








}




/*----------------------------------------------------*/




/*sp*/
@media only screen and (max-width: 768px) {

/*--------------------*/

#hedImg {
background: url(../images/message/hed_img.jpg) center center no-repeat;
background-size: cover;
}



/*-------------index--------*/

.read_btn a { font-size: 14px; color: #003772; position: relative; text-align: right; padding-right: 50px; margin-top: 30px; margin-bottom: 30px; }
.read_btn a { color: #003772; font-size: 14px; font-weight: bold; display: block; }
.read_btn a::before {position: absolute; display: block; content: "\f0a9"; font-family: "Font Awesome 5 Free"; color: #003772; font-weight: bold; right: 20px;  font-size: 16px; top: 2px;  -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.read_btn a:hover::before {right: 10px; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.read_btn2 { text-align: center; position: relative; z-index: 100;}
.read_btn2 a span { font-size: 14px; color: #fff; position: relative; text-align: center; padding-right: 50px; margin-top: 30px; }
.read_btn2 a { color: #fff; font-size: 14px; font-weight: bold; display: block; }
.read_btn2 a span::before {position: absolute; display: block; content: "\f0a9"; font-family: "Font Awesome 5 Free"; color: #fff; font-weight: bold; right: 20px;  font-size: 16px; top: 2px;  -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.read_btn2 a:hover span::before {right: 10px; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.business_04_tit { font-size: 16px; text-align: center; font-weight: bold; margin-top: 50px; color: #fff; margin-bottom: 30px; letter-spacing: 0.2em; }

.business_box00 { width: 100%; margin: 0px auto 50px; }
.business_box { width: 100%; margin: 0px auto 50px; }

.particles-wrap { width:  100%; background: url(../images/business/img04.jpg) center center no-repeat; background-size: cover; position: relative; overflow: hidden; border: 5px solid #003772; height: 200px; margin: 0 auto; box-sizing: border-box; }
#hoge { width: 100%; min-height: 400px; overflow: hidden; }
.particles-js-canvas-el { position: absolute; top: 0; left: 0; right: 0; }


/*-------------index--------*/
.idx_tit { font-size: 25px; color: #000; margin-bottom: 30px; }
.idx_tit_c { font-size: 25px; color: #000; margin-bottom: 30px; text-align: center; }
.idx_tit2 { font-size: 25px; color: #fff; margin-bottom: 30px; text-align: center; }
.idx_subtit { font-size: 16px; color: #003772; margin-bottom: 15px; }
.idx_txt { color: #000; font-size: 14px; text-align: left; line-height: 2.5em; margin-bottom: 50px; }



/*-------idx_box03-------------*/
#idx_box03 { margin: 0 auto 100px; }
.idx_box03_img { width: 100%; margin: 0 auto; position: relative; margin-bottom: 50px; }
.idx_box03_img::before { position: absolute; content: ""; display: block; width: 200%; background: rgba(0,55,114,0.1); height: 200px; left: -80%; bottom: -50px; right: 50px; z-index: -1;}

/*-社長メッセージ--*/
.mpBox {
margin-bottom: 40px;
}

.tan {
margin-bottom: 0px;
}

.mpImg {
margin-bottom: 30px;
}

.mpTxt {
width: 100%;
margin: 0 auto 0;
/*display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;*/
}

.mpTxt_p {
width: 100%;
margin-bottom: 30px;
/*-ms-flex-preferred-size: 60%;
flex-basis: 60%;*/
line-height: 1.8;
}

.mpTxt_img {
width: 100%;
text-align: center;
/*-ms-flex-preferred-size: 35%;
flex-basis: 35%;*/
}

.mpTxt_img p {
font-size: 1em;
padding-top: 10px;
text-align: right;
}

.mpTxt_img p span {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: bold;
}


/*-採用担当からのメッセージ--*/
.mrBox {
margin-bottom: 50px;
}

.mrList {

}

.mrList li {
margin-bottom: 40px;
/*display:-webkit-box;
display:-ms-flexbox;
display:flex;*/
}

.mrList li:last-child {
margin-bottom: 0px;
}

.mrList_img {
width: 100%;
padding: 140px 0;
margin-bottom: 20px;
/*-ms-flex-preferred-size: 50%;
flex-basis: 50%;*/
}

.mr01 {
background: url("../images/message/message_recruiter01.jpg") center center no-repeat;
background-size: cover;
}

.mr02 {
background: url("../images/message/message_recruiter02.jpg") center center no-repeat;
background-size: cover;
}

.mr03 {
background: url("../images/message/message_recruiter03.jpg") center center no-repeat;
background-size: cover;
}

.mrList_txt {
box-sizing: border-box;
/*-ms-flex-preferred-size: 50%;
flex-basis: 50%;
padding: 50px 70px;*/
}

/*.rv {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}*/

.mrList_txt-name {
font-weight: bold;
margin-bottom: 5px;
}

.mrList_txt-ttl {
font-size: 1.8rem;
color: #d0121b;
margin-bottom: 15px;
}

.message_list { width: 100%; margin: 50px auto 0px; }
.message_list li { width: 100%; background: #d0121b; }
.message_list li:nth-child(n+2) { margin-top: 30px; }

.message_box { width: 100%;  }

.message_img { width: 100%; }
.message_img img { width: 100%; height: auto; }
.message_txtbox { flex-basis: 100%; padding:30px 15px; box-sizing: border-box; color: #fff; }


.message_list li a .read_btn_list { font-size: 16px; color: #fff; position: relative; text-align: right; padding-right: 50px; margin-top: 30px; font-weight: bold; }
.message_list li a .read_btn_list::before {position: absolute; display: block; content: "\f0a9"; font-family: "Font Awesome 5 Free"; color: #fff; font-weight: bold; right: 20px;  font-size: 18px; top: 2px;  -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.message_list li a:hover .read_btn_list::before {right: 10px; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.photo_hover_wrap img {
width: 100%;
height: auto;
}

.photo_hover_wrap {
flex-basis: 40%; 
display: block;
height: 55vw;
overflow: hidden;
position: relative;
text-decoration: none;
z-index: 0;
}
.photo_hover_wrap .photo {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all 0.2s linear 0s;
width: 100%;
}
.message_list li a:hover .photo_hover_wrap {
text-decoration: none;
cursor: pointer;
}
.message_list li a:hover .photo_hover_wrap .photo {
transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.idx_tit_sub_white { font-size: 20px; color: #fff; margin-bottom: 30px; text-align: left; font-weight: bold; }
.idx_txt { color: #fff; }

}