@charset "utf-8";

/*
  font-family: "Noto Sans JP", sans-serif; from 100 to 900
  font-family: "Figtree", sans-serif;  font-weight: 800;
*/

/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body {color: #444; line-height: 1.8; background: #fff; font-family: "Noto Sans JP", sans-serif;}
a{text-decoration: none; color: inherit;}
.flex {display: flex; display: -webkit-flex; justify-content: flex-start; flex-wrap: wrap;}
img {width: 100%; height: auto;}
.br_spOnly{display:none;}
.br_pcOnly{display:block;}
#wrapper{display:block; position: relative;}
.innerContents{width:88%; margin: 0 auto;}


/* ----------------------------------------------------
header
---------------------------------------------------- */
#header {position: fixed; top: 0; left: 0; width: 40%; height: 100vh; background:url("../img/main-pc.jpg") no-repeat 0 0; background-size: cover;}
.hd-logo{width:min( 10vw , 150px ); position: absolute; top: 5%; left: 5%;}
.hdImg-sp{display: none;}

/* ----------------------------------------------------
RECRUITバナー
---------------------------------------------------- */
article{width: 60%; position: absolute; top: 0; right: 0;}
h2{text-align: center; transform: scale(0.5,1); }
h2 span{position: relative; font-family: "Roboto Condensed", serif; font-weight: 300; font-style: italic; font-size: min(5.33vw , 8rem); letter-spacing: 0.25em; color: #00458B;}
h2 span::after{position: absolute; bottom: min(1vw , 15px); left: 0; content: ""; background-color: #1DFFD7; width: 100%; height: 7px; z-index: -1;}

.recBlock{width: 30%; background-color: #f3f3f3; margin: 0 5% min( 3.33vw , 50px ) 0;}
.recBlock:nth-of-type(3n){margin-right: 0;}
.recBlock div{width: 87%; margin: min(1vw , 15px) auto min(2vw , 30px) auto;}
.recBlock h3{font-size: min(1.33vw , 2rem); line-height: 1.3; position: relative;}
.recBlock h3.noLink{color: #BBBBBB;}
.recBlock h3 span{font-size: min(0.933vw , 1.4rem); display: block;}
.recBlock h3.haveLink{/*padding-left: 1.3em;*/}
.recBlock h3.haveLink::before{display: block; content: ""; position: absolute; top: min( 0.4vw , 6px ); left: 0; width: min( 1.067vw , 16px ); height: min( 1.067vw , 16px ); margin: auto; background: #00458B; border-radius: 50%;}
.recBlock h3.haveLink::after{width: min( 0.4vw , 6px ); height: min( 0.4vw , 6px ); border: 0; border-top: solid 1px #fff; border-right: solid 1px #fff; transform: rotate(45deg); position: absolute; top: min( 0.7vw , 11px ); left: min( 0.267vw , 4px ); margin: auto; content: ""; z-index: 3;}
.recBlock ul{border-top: #CDCDCD 1px solid; margin-top: min(1vw , 15px); padding-top: min(1vw , 15px);}
.recBlock ul li{position: relative; /*padding-left: 1.3em; */line-height: 1.3; margin-bottom: 0.7em;}
.recBlock ul li::before{display: block; content: ""; position: absolute; top: min( 0.4vw , 4px ); left: 0; width: min( 1.067vw , 16px ); height: min( 1.067vw , 16px ); margin: auto; background: #00458B; border-radius: 50%;}
.recBlock ul li::after{width: min( 0.4vw , 6px ); height: min( 0.4vw , 6px ); border: 0; border-top: solid 1px #fff; border-right: solid 1px #fff; transform: rotate(45deg); position: absolute; top: min( 0.7vw , 9px ); left: min( 0.267vw , 4px ); margin: auto; content: ""; z-index: 3;}

.recBlock a{position: relative; width: 100%; display: block; z-index: 2; padding: 0.1em 0.1em 0.1em 1.3em;}
.recBlock a::after{background: #00458B; position: absolute; top: 0; left: 0; width: 0%; height: 100%; content: ""; z-index: -1; transition: 0.5s;}
.recBlock a:hover{color: white;}
.recBlock a:hover::after{width: 100%;}



footer {margin-top: min( 3.33vw , 50px ); font-size: min(0.933vw , 1.4rem);}
footer .flex{justify-content: space-between;}
footer ul.flex{justify-content: flex-start;}
footer ul li{color:#00458B; position: relative; padding-left: 1.5em; margin-right: 2em;}
footer ul li::before{position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: min(1vw , 15px); height: min(1vw , 15px); content: ""; background: url("../img/icon-link.svg") no-repeat 0 0; background-size: cover;}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pcSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width:768px) {
/* ----------------------------------------------------
common(pc)
---------------------------------------------------- */
/* hover */

a img:hover {
  opacity: .8 !important; filter: alpha(opacity=80);
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.clickable:hover {
  filter: alpha(opacity=70) !important;	opacity: .7 !important;
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
}


	
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1200px) and (min-width: 768px) {
	
}
@media (max-width: 1024px) and (min-width: 768px) {

	
@media (orientation: landscape) {

}
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
.innerContents {width: 92%;}
.br_spOnly{display:block;}
.br_pcOnly{display:none;}
.order1{order:1;}
.order2{order:2}

/*
1.6rem 	3.077vw
2.0rem 	3.846vw
2.4rem 	4.6vw
2.5rem 	4.8vw
2.6rem 	5vw
2.8rem 	5.385vw
*/
	

/* ----------------------------------------------------
header
---------------------------------------------------- */
#header {position: relative; width: 100%; height: inherit; margin: 0 calc(50% - 50vw); background:none;}
.hd-logo{width:40%; position: relative; top: inherit; left: inherit; display: block; margin: 5vw auto;}
.hdImg-sp{display: block;}

/* ----------------------------------------------------
RECRUITバナー
---------------------------------------------------- */
article{width: 100%; position: relative;}
h2{transform: scale(1,1.5); margin-bottom: 10vw;}
h2 span{font-size: 10.2vw; letter-spacing: 0.12em;}
h2 span::after{bottom: 1.7vw;}

.recBlock{width: 47.5%; margin: 0 5% 5vw 0;}
.recBlock:nth-child(2n){margin: 0 0 5vw 0;}
.recBlock:nth-of-type(3n){margin-right: inherit;}
.recBlock div{margin: 2vw auto 4vw auto;}
.recBlock h3{font-size: 4.4vw;}
.recBlock h3 span{font-size: 2.7vw; letter-spacing: -0.01em;}
.recBlock h3.haveLink{/*padding-left: 1em;*/}
.recBlock h3.haveLink::before{top: 1.1vw; width: 3vw; height: 3vw;}
.recBlock h3.haveLink::after{width: 1.3vw; height: 1.3vw; top: 1.8vw; left: 0.7vw;}
.recBlock ul{margin-top: 2vw; padding-top: 2vw;}
.recBlock ul li{/*padding-left: 1em;*/}
.recBlock ul li::before{top: 0.9vw; width: 3vw; height: 3vw;}
.recBlock ul li::after{width: 1.3vw; height: 1.3vw; top: 1.8vw; left: 0.5vw;}

	
.recBlock a{position: relative; width: 100%; display: block; z-index: 2; padding: 0 0 0 1em;}
.recBlock a::after{background: none;}
.recBlock a:hover{color: #444;}
.recBlock a:hover::after{width: 100%;}	
	

footer {margin-top: 12vw; font-size: 3.2vw; padding-bottom: 3vw;}
footer .flex{justify-content: center;}
footer ul.flex{justify-content: center; width: 100%; margin-bottom: 2vw;}
footer ul li{padding-left: 1.5em; margin-right: 1em; margin-left: 1em;}
footer ul li::before{width: 3vw; height: 3vw;}
	
	



}