@charset "utf-8";

html { width: 100%; overflow: auto; font-size: 62.5%;}
body {
  text-align: center;
  font-size:min(1.34vw,1.7rem);
  letter-spacing: 0.05em;
  width: 100%;
  min-height: 100vh;
  background: #111421;
  color: #fff;
  position:relative;
  overflow:hidden;
}
img { width: 100%; max-width: 100%;}

.wrap { width: 100%; height: 100%; min-height: 100vh; padding: 30px 50px 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
h1 { display: block; max-width: 200px; margin: 0 auto 25px; }

.pc .wrap { min-width:960px;}

.innerBoxWrap { width: 100%; max-width: 1386px; display: flex; flex-wrap: wrap; justify-content: center; text-align: left;}

.innerBox {width: 48%; height: auto; position: relative; margin-top: 4%;}
.innerBox:nth-child(2n) { margin-left: 4%;}
.innerBox a { text-decoration: none; color: inherit; height: 100%; position: relative; display: block;}
.innerBox a:after { content: ""; display:block; width: calc(100% - 20px); height: calc(100% - 20px); border: #fff 1px solid; opacity: 0.6; position: absolute; left: 9px; top: 9px;}
.innerBox a div { display: flex; justify-content: flex-start;  align-items: center; padding: 0 35% 0 30px; height: 12vw; max-height: 200px; overflow: hidden; position: relative;}

.innerBox h2 { line-height: 1.5;}
.taxi { width: 35%; position: absolute; right: -3%; top: 50%; transform: translate( 0, -50%); z-index: 20;}
#tougen .taxi { width: 38%;}

.innerBox div:before { content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; opacity: 0.45; transition: all 0.3s ease-out;}
#meisei div:before { background: url("../img/image04.jpg") no-repeat top; background-size: 100%;}
#sanko div:before { background: url("../img/image01.jpeg") no-repeat top 10% center; background-size: 100%;}
#hire div:before { background: url("../img/hire_image.jpg") no-repeat center; background-size: 100%;}
#tougen div:before { background: url("../img/image03.jpg") no-repeat center; background-size: 100%;}
.innerBox:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background: #000; opacity: 0; transition: opacity 0.3s ease-out;}

.pc .innerBox:hover div:before { width: 104%; height: 104%; transition: all 0.5s ease-out;}
.pc .innerBox:hover:after { opacity: 0.5; transition: opacity 0.5s ease-out;}

.copyRight { position: absolute; left: 50%; bottom: 14px;transform: translate(-50%, 0); font-size: 1.2rem; letter-spacing: 1.4px; padding-left: 2px; opacity: 0.4;}


@media screen and ( max-width:800px ) {
  body { font-size: 1.9vw;}
  .wrap { padding: 5% 14% 10%; min-width: 0 !important;}
  h1 { width: 30vw; max-width: none; margin-bottom: 1vw;}
  .innerBox {width: 100%; margin: 10% 0 0 !important;}
  .innerBox a:after { width: calc(100% - 18px); height: calc( 100% - 18px); left: 8px; top: 8px;}
  .innerBox a div { padding: 0 33% 0 30px; height: 18vw; max-height: 200px; }
  .taxi { width: 38%; right: -8%; top: 60%; }
  #tougen .taxi { width: 42%;}
}
@media screen and ( max-width:600px ){
  body { font-size: 2.6vw;}
  .wrap { padding: 5% 10% 15%;}
  h1 { width: 40vw; margin-bottom: 5vw;}
  .innerBox { margin: 10% 0 0 !important;}
  .innerBox a:after { width: calc(100% - 12px); height: calc( 100% - 12px); left: 5px; top: 5px;}
  .innerBox a div { padding: 0 30% 0 20px; height: 24vw; max-height: 200px; }
  .taxi { width: 34%; right: -8%; top: 60%; }
  #tougen .taxi { width: 38%;}
  .copyRight { font-size: 1.0rem;}
}