@import (once) "font.less";
@import (once) "default.less";
/* body ///////////////////////*/
/*
.body{
.pa;
z-index:0;
width:100%;
height:10000px;
background:url("../bg.jpg") no-repeat center 20px;
opacity:.3;
}

*/
/* main ///////////////////////*/
.main {
  .pr;
  padding: 20px 0 0 0;
  .title {
    .pa;
    width: 100%;
    z-index: 10;
    top: 50%;
    margin-top: -85px;
  }
  .image {
    .oh;
    img {
      width: 100%;
      height: 80vh;
      object-fit: cover;
      object-position: 100% 0;
    }
  }
}
@media (max-width:1000px) {
  .main {
    .title {
      margin-top: -65px;
      img {
        height: 120px;
      }
    }
  }
}
@media (max-width:800px) {
  .main {
    .image {
      img {
        height: 90vh;
      }
    }
  }
}
@media (max-width:500px) {
  .main {
    .title {
      margin-top: -35px;
      img {
        height: 60px;
      }
    }
    .image {
      .oh;
      img {
        object-position: 80% 0;
      }
    }
  }
}
/* message ///////////////////////*/
.message {
  padding: 80px 0 0 0;
  background-image: url(../image/image5.jpg);
  background-repeat: no-repeat;
  .tac;
  .bg1;
  .title {
    padding: 0 0 20px 0;
  }
  .text {
    padding: 0 0 90px 0;
    font-size: 13.5pt;
    line-height: 200%;
  }
}
@media (max-width:800px) {
  .message {
    background-size: cover;
    background-position: 30% center;
  }
}
@media (max-width:500px) {
  .message {
    padding: 40px 0 0 0;
    .text {
      font-size: 10pt;
      padding: 0 0 40px 0;
    }
  }
}
/* image2 ///////////////////////*/
.image2 {
  height: 60vh;
  background: url("../image/image2.jpg") no-repeat right 0;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width:1000px) {
  .image2 {
    height: 50vh;
    background: url("../image/image2.jpg") no-repeat right 0;
    background-size: cover;
    background-attachment: scroll;
  }
}
/* reason ///////////////////////*/
.reason {
  padding: 85px 0;
  h2 {
    .tac;
    padding: 0 0 20px 0;
  }
  dl {
    .dt;
    height: 100%;
  }
  dd {
    .dtc;
    width: 33.3%;
    padding: 40px 5px 0 5px;
    height: 100%;
  }
  .wrap {
    border: 5px @c2 solid;
    padding: 0 20px 30px 20px;
    height: 100%;
  }
  .image {
    .tac;
    margin: -50px 0 0 0;
  }
  h3 {
    .db;
    .tac;
    font-weight: bold;
    font-size: 17pt;
    color: @c3;
    padding: 20px 0 10px 0;
    border-bottom: 2px @c2 solid;
    height: 85px;
  }
  dd:nth-child(2) {
    h3 {
      padding: 40px 0 10px 0;
    }
  }
  p {
    padding: 20px 0 0 0;
  }
}
@media (max-width:800px) {
  .reason {
    padding: 65px 0 40px 0;
    dl {
      .db;
    }
    dd {
      .db;
      width: 100%;
      padding: 40px 0 20px 0;
    }
    h3 {
      min-height: auto;
    }
    dd:nth-child(2) {
      h3 {
        padding: 20px 0 10px 0;
      }
    }
  }
}
/* image3 ///////////////////////*/
.image3 {
  height: 60vh;
  background: url("../image/image3.jpg") no-repeat center 100%;
  background-size: 120%;
  background-attachment: fixed;
}
@media (max-width:1000px) {
  .image3 {
    height: 50vh;
    background: url("../image/image3.jpg") no-repeat center 100%;
    background-size: cover;
    background-attachment: scroll;
  }
}
/* company ///////////////////////*/
.company, .personal {
  padding: 85px 0 0 0;
  h2 {
    .tac;
    padding: 0 0 60px 0;
  }
  article {
    padding: 85px 0 0 0;
    background: url("../image/corner1.svg") no-repeat right top;
    .bg1;
  }
  h3 {
    .pr;
    font-size: 21pt;
    .tac;
    p {
      .bold;
    }
  }
  h3::after, h3::before {
    content: '';
    .pa;
    .db;
    width: 200px;
    border-bottom: 2px @c2 solid;
    top: 50%;
  }
  h3::after {
    margin-right: -340px;
    right: 50%;
  }
  h3::before {
    left: 50%;
    margin-left: -340px;
  }
  .text {
    .tac;
    padding: 60px 0;
  }
  dl {
    .tac;
  }
  dd {
    .dib;
    width: 33.3%;
    padding: 30px 15px;
    .vat;
  }
  .wrap {
    .db;
    background: #FFFFFF;
    h4 {
      .tac;
      padding: 20px 0 0 0;
      font-size: 17pt;
      color: @c2;
    }
    p {
      .tal;
      padding: 10px 20px 40px 20px;
    }
  }
  strong {
    .db;
    padding: 40px 0 85px 0;
    .tac;
    font-size: 17pt;
    color: @c2;
    line-height: 180%;
  }
  dd {
    img {
      width: 100%;
    }
  }
}
@media (max-width:800px) {
  .company, .personal {
    padding: 65px 0 0 0;
    h2 {
      padding: 0 0 30px 0;
    }
    article {
      padding: 65px 0 0 0;
      background-size: 120px;
    }
    h3 {
      font-size: 17pt;
    }
    h3::after, h3::before {
      width: 40px;
    }
    h3::after {
      margin-right: -140px;
    }
    h3::before {
      margin-left: -140px;
    }
    .text {
      .tal;
      padding: 40px 20px;
    }
    dl {}
    dd {
      .db;
      width: 100%;
      height: 100%;
      padding: 10px 10px;
    }
    .image {
      .oh;
      img {
        width: 100%;
        height: 150px;
        object-fit: cover;
      }
    }
  }
}
@media (max-width:600px) {
  .company, .personal {
    strong {
      padding: 20px 0 45px 0;
      font-size: 10pt;
    }
  }
}
/* personal ///////////////////////*/
.personal {
  padding: 85px 0 0 0;
  article {
    background: url("../image/corner2.svg") no-repeat right top;
    .bg1;
  }
  h3::after, h3::before {
    border-bottom: 2px @c3 solid;
  }
  dl {
    .dt;
    height: 100%;
  }
  dd {
    .dtc;
    padding: 10px;
    width: 25%;
  }
  .wrap {
    height: 100%;
    h4 {
      color: @c3;
    }
  }
  strong {
    color: @c3;
  }
  .sec2 {
    padding: 0 0 65px 0;
    header {
      padding-bottom: 40px;
    }
    h2 {
      padding-bottom: 30px;
    }
    .wrap {
      padding: 40px 20px;
    }
    dd {
      width: 33.3%;
      padding: 0 20px;
      .vat;
      border-left: 2px @c3 solid;
    }
    dd:first-child {
      border: 0;
    }
    h4 {
      padding: 0 0 10px 0;
    }
    p {
      .tac;
      padding: 10px 0;
    }
    h1 {
      font-size: 25px;
      color: @c2;
      padding-top: 60px;
      padding-bottom: 10px;
      text-align: center;
    }
  }
}
@media (max-width:800px) {
  .personal {
    padding: 45px 0 0 0;
    article {
      background-size: 120px;
    }
    dd {
      width: auto;
      .db;
    }
    .sec2 {
      padding: 0 10px 10px 10px;
      header {
        padding-bottom: 20px;
      }
      h2 {
        padding-bottom: 10px;
      }
      .wrap {
        padding: 40px 20px;
      }
      dl {
        .db;
        width: 100%;
      }
      dd {
        .db;
        width: 100%;
        padding: 20px 0;
        border: 0;
        border-bottom: 2px @c3 solid;
      }
      dd:first-child {
        border-bottom: 2px @c3 solid;
      }
      h4 {
        padding: 0 0 0 0;
      }
      p {
        .tac;
        padding: 10px 0;
      }
      h1 {
        font-size: 25px;
        color: @c2;
        padding-top: 60px;
        padding-bottom: 10px;
        text-align: center;
      }
    }
  }
}
/* load ///////////////////////*/
.load {
  padding: 85px 0 0 0;
  article {
    padding: 65px 0;
    .bg1;
  }
  section {
    background: #FFFFFF;
    padding: 50px;
  }
  h3 {
    .bold;
    font-size: 23pt;
    color: @c2;
    padding: 0 0 40px 0;
  }
  table {
    width: 100%;
    border-top: 2px @c3 solid;
  }
  td {
    padding: 15px 0;
    font-size: 14pt;
  }
  tr {
    border-bottom: 2px @c3 solid;
  }
  td:last-child {
    .bold;
    font-size: 16pt;
  }
  p::before {
    content: "▶";
    color: @c2;
    font-size: 9pt;
    padding: 0 5px 0 0;
    .dib;
    .vat;
  }
}
@media (max-width:800px) {
  .load {
    padding: 45px 0 0 0;
    article {
      padding: 10px;
    }
    section {
      padding: 20px;
    }
    h3 {
      .tac;
      font-size: 15pt;
      padding: 0 0 20px 0;
    }
    table {
      width: 100%;
    }
    tr {
      .db;
      width: 100%;
      padding: 10px 0;
    }
    td {
      .db;
      width: 100%;
      padding: 0 0 0 20px;
      font-size: 10pt;
      span {
        .bold;
        font-size: 12pt;
      }
    }
    td:first-child {
      padding: 0;
    }
    td:last-child {
      font-size: 12pt;
    }
    .pc {
      .dn;
    }
  }
}
/* hoken ///////////////////////*/
.hoken {
  padding: 85px 0 0 0;
  h2 {
    .tac;
    padding: 0 0 60px 0;
  }
  li {
    .dib;
    width: 25%;
    padding: 5px;
    img {
      border: 1px #CCCCCC solid;
    }
  }
}
p {
  text-align: right;
}
@media (max-width:800px) {
  .hoken {
    padding: 45px 0 0 0;
    h2 {
      padding: 0 0 30px 0;
    }
    li {
      width: 50%;
    }
    p {
      text-align: center;
    }
  }
}
/* outline ///////////////////////*/
.outline {
  padding: 85px 0 85px 0;
  h3 {
    .tac;
    .bold;
    font-size: 23pt;
    color: @c2;
    padding: 0 0 40px 0;
  }
  table {
    width: 100%;
    border-top: 2px @c3 solid;
  }
  td {
    padding: 15px 0;
    font-size: 14pt;
  }
  tr {
    border-bottom: 2px @c3 solid;
  }
  td:first-child {
    padding: 15px 10px 15px 0;
    .nw;
  }
  .map {
    padding: 85px 0 0 0;
    .tar;
    iframe {
      width: 100%;
    }
    a {
      .dib;
      padding: 10px;
    }
  }
}
@media (max-width:800px) {
  .outline {
    padding: 65px 0 65px 0;
    h3 {
      font-size: 19pt;
    }
    td {
      padding: 10px 0;
      font-size: 10pt;
    }
    td:first-child {
      padding: 10px 10px 10px 0;
    }
    .map {
      padding: 45px 0 0 0;
    }
  }
}
/* image4 ///////////////////////*/
.image4 {
  height: 60vh;
  background: url("../image/image4.jpg") no-repeat center 0;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width:1000px) {
  .image4 {
    height: 50vh;
    background: url("../image/image4.jpg") no-repeat center 0;
    background-size: cover;
    background-attachment: scroll;
  }
}
/* SDGs ///////////////////////*/
.sdgs {
  padding: 30px 10% 10px;
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center
}
.sdgs img {
  margin: 0px 20px 0px 20px;
}
.sdgs span {
  font-weight: bold;
}
@media (max-width:800px) {
  .sdgs {
    display: block;
	padding: 10px 10% 0px;
  }
  .sdgs img {
    margin: 0px;
    padding: 20px 0px 0px 0px;
	}
}
/* SNS ///////////////////////*/
.icon {
  margin-top: 60px;
  text-align: right;
}
.icon img {
  width: 40px;
  margin: 0 40px;
}