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



header {
	width: 100%;
   position: absolute;
   top: 30px;
   left: 0;
   z-index: 2000;
   height: 80px;
}
#logo {
	position: absolute;
	left: 30px;
   width: 327px;
}
#mainnav {
	position: absolute;
	top: 10px;
	right: 30px;
	width: 300px;
	height: 50px;
}
#mainnav ul {color: #fff;}
@media screen and (max-width: 767px) {
header {
	top: 0;
background-color: #103564;
   height: 100px;
}
#logo {width: 220px; left:5%; top: 15px}
	
#mainnav {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 5px;
	left: 5%;
	width: 90%;
	height: 30px;
}
}





/* //////////////////// */
/* メインビジュアル */
/* //////////////////// */
#mainvidual {margin: 0;}
#mainvidual .mv_top li {
   width: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center bottom;
   min-height: clamp(350px, 78vw, 500px);
}


#mainvidual .mv_top li.bg-mv01 {background-image: url("../img/top/mv-01.jpg");}
@media screen and (max-width: 767px) {
 #mainvidual {margin: 90px 0 0 0;} 
#mainvidual .mv_top li.bg-mv01 {background-image: url("../img/top/mv-01sp.jpg");}
}
#mainvidual .blk-h1 {
   position: absolute;
   max-width: 331px;
   width: 90%;
   text-align: center;
   top: 38%;
	right: 10%;
}
@media screen and (max-width: 767px) {
#mainvidual .blk-h1 {
   position: absolute;
   max-width: 750px;
   width: 90%;
   text-align: center;
   top: auto;
   bottom: 30px;
   left: 5%;
}
}


/* //////////////////// */
/* business　CSS */
/* //////////////////// */
#business {padding: 100px 0  100px 0;}
#business li:nth-child(1){
   width: 50%;
   min-height: 500px;
   background-image: url("../img/top/img-01.jpg");
   background-repeat: no-repeat;
	background-position: center center;
   background-size: cover;
   margin-right: 50px;
}
#business li:nth-child(2){max-width: 540px;}

@media screen and (max-width: 767px) {
#business {padding: 50px 0;} 
#business li:nth-child(1){
   width: 95%;
   min-height: 300px;
   background-image: url("../img/top/img-01.jpg");
   margin-right: 0;
   margin-bottom: 40px;
}
#business li:nth-child(2){width: 90%; margin: 0 auto}
}

/* //////////////////// */
/* information　CSS */
/* //////////////////// */

#information {
	padding: 80px 0 0 0;
}
@media screen and (max-width: 767px) {
 #information {
	padding: 40px 0 0 0;
}   
}

/* //////////////////// */
/* business　CSS */
/* //////////////////// */
#recruit {
	padding: 0 0 80px 0;
}

#recruit .section-img {
   min-height: 500px;
   background-image: url("../img/top/img-02.jpg");
   background-repeat: no-repeat;
	background-position: center center;
   background-size: cover;
	margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
#recruit .section-img {
   min-height: 200px;
	margin-bottom: 60px;
}
}

#company {
	background-color: #031f44;
	padding:0 0 60px 0;
	color: #fff
}

#company h2 {color: #fff;}

#company .section-img {
   min-height: 500px;
   background-image: url("../img/top/img-03.jpg");
   background-repeat: no-repeat;
	background-position: center center;
   background-size: cover;
	margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
#company .section-img {
   min-height: 200px;
	margin-bottom: 60px;
}
}

#company li {width: 48%;}
#company dl {border-top:solid 1px #fff;}
#company dt {width: 150px; padding: 20px 0;border-bottom:solid 1px #fff;}
#company dd {width: calc(100% - 150px); padding: 20px 0;border-bottom:solid 1px #fff;}

@media screen and (max-width: 767px) {
#company li {width: 100%;}
#company dl {border-top:solid 1px #fff; margin-bottom: 60px}
#company dt {width: 100%; padding: 20px 0 0 0;border-bottom:none}
#company dd {width: 100%; padding: 10px 0 20px 0;border-bottom:solid 1px #fff;}
}


footer {background-color: #031f44;	padding:0 0 60px 0; color: #fff; font-size: 10px}

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 40px;
  row-gap: 60px;
}

@media screen and (max-width: 767px) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 30px;
  row-gap: 40px;
}
}