@charset "UTF-8";

@media print, screen {
  :root {
    /* ==================== color ==================== */
    --color-key: #2E2E63;
    --color-yellow: #FFF845;
    --color-green: #C9C461;
    --color-blue-2: #9494B1;
  }
}
/* ================================================================================
display size
================================================================================ */
@media screen and (max-width: 960px) {
  .pc {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .mid {
    display: none !important;
  }
  .nsp {
    display: none !important;
  }
}
@media screen and (min-width: 961px) {
  .mid {
    display: none !important;
  }
}
@media print, screen and (min-width: 1201px) {
  main {
    --u: 1px;
  }
}
@media screen and (min-width: 961px) and (max-width: 1200px) {
  main {
    --u: calc(100vw / 1200);
  }
}
@media screen and (max-width: 960px) {
  main {
    --u: calc(100vw / 1200);
  }
}
@media screen and (max-width: 768px) {
  main {
    --u: calc(100vw / 768);
  }
}
html {
  scroll-padding: 40px;
}
@media screen and (max-width: 420px) {
  html {
    scroll-padding: 80px;
  }
}

main picture {
  display: block;
}
main picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ================================================================================
firstview
================================================================================ */
.firstview {
  position: relative;
  height: 500px;
}
@media screen and (max-width: 960px) {
  .firstview {
    height: 350px;
  }
}
.firstview .section-inner {
  height: 100%;
}
.firstview .section-inner .section-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  min-height: auto;
  text-align: center;
}
.firstview .section-inner .section-header::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("../../img/service/bg_firstview.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.firstview .section-inner .section-header:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(46, 46, 99, 0.8)), color-stop(35%, rgba(46, 46, 99, 0.4)), to(rgba(46, 46, 99, 0)));
  background: linear-gradient(0deg, rgba(46, 46, 99, 0.8) 0%, rgba(46, 46, 99, 0.4) 35%, rgba(46, 46, 99, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.firstview .section-inner .section-header .title-block {
  position: relative;
  margin-top: 54px;
  z-index: 2;
}
@media screen and (max-width: 960px) {
  .firstview .section-inner .section-header .title-block {
    margin-top: 44px;
  }
}
.firstview .section-inner .section-header .title-block .en {
  display: inline-block;
  color: #fff;
  font-family: "Montserrat";
  font-size: 13px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 6.5px;
  text-transform: uppercase;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  padding-bottom: 0;
  border-bottom: none;
}
.firstview .section-inner .section-header .title-block .jp {
  margin-top: 16px;
  color: #fff;
  font-size: 40px;
  font-weight: 400;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  line-height: 100%; /* 40px */
  letter-spacing: 20px;
}
@media screen and (max-width: 960px) {
  .firstview .section-inner .section-header .title-block .jp {
    margin-top: 10px;
    font-size: 30px;
    letter-spacing: 15px;
  }
}

/* ================================================================================
mapSection
================================================================================ */
.mapSection {
  border-bottom: 1px solid var(--color-key);
  padding: 0 80px;
  position: relative;
}
@media screen and (max-width: 960px) {
  .mapSection {
    padding: 0 20px;
  }
}
.mapSection:after {
  display: block;
  content: "";
  background-color: rgb(238, 238, 244);
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mapSection .sec-area {
  position: relative;
  max-width: 100%;
  background: white;
  padding: 320px 0;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .mapSection .sec-area {
    padding: 70px 40px;
  }
}
.mapSection .sec-area .titleArea {
  position: absolute;
  z-index: 5;
  top: 147px;
  left: 160px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 960px) {
  .mapSection .sec-area .titleArea {
    position: relative;
    top: 0;
    left: 0;
  }
}
@media screen and (max-width: 960px) {
  .mapSection .sec-area .titleArea {
    margin: 0 auto 65px;
  }
}
.mapSection .sec-area .titleArea .en {
  border-bottom: 1px solid var(--color-key);
  margin: 0 0 30px;
  color: var(--color-key);
  font-family: "Montserrat";
  font-size: 11px;
  font-weight: 600;
  line-height: 3;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
@media screen and (max-width: 960px) {
  .mapSection .sec-area .titleArea .en {
    font-size: calc(22 * var(--u));
  }
}
.mapSection .sec-area .titleArea h2 {
  color: var(--color-key);
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .mapSection .sec-area .titleArea h2 {
    font-size: calc(48 * var(--u));
  }
}
.mapSection .sec-area .maps {
  z-index: 2;
  position: relative;
}
.mapSection .sec-area .maps .map-uppper {
  width: 100%;
  position: relative;
  z-index: 3;
}
.mapSection .sec-area .maps .map-uppper picture {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.mapSection .sec-area .maps .map-uppper:before, .mapSection .sec-area .maps .map-uppper:after {
  display: block;
  content: "";
  width: 120%;
  height: 1px;
  background-color: rgb(238, 238, 244);
  position: absolute;
  top: 50%;
  left: 50%;
}
@media screen and (max-width: 960px) {
  .mapSection .sec-area .maps .map-uppper:before, .mapSection .sec-area .maps .map-uppper:after {
    width: 140%;
  }
}
.mapSection .sec-area .maps .map-uppper:before {
  -webkit-transform: translate(-50%, -50%) rotate(-22.5deg);
      -ms-transform: translate(-50%, -50%) rotate(-22.5deg);
          transform: translate(-50%, -50%) rotate(-22.5deg);
}
.mapSection .sec-area .maps .map-uppper:after {
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mapSection .sec-area .maps .map-variable {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
}
.mapSection .sec-area .maps .map-variable .variable-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 700px;
  height: 1393px;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .mapSection .sec-area .maps .map-variable .variable-wrap {
    width: 100%;
    height: calc((100vw - 120px) * 1.99);
  }
}
.mapSection .sec-area .maps .map-variable picture {
  width: 100%;
  height: calc(100vw - 120px);
  max-width: 700px;
  max-height: 700px;
  aspect-ratio: 1/1;
}
.mapSection .sec-area .maps .map-downer {
  position: relative;
}
.mapSection .sec-area .maps .map-downer .downer-wrap {
  height: 700px;
  position: relative;
}
@media screen and (max-width: 960px) {
  .mapSection .sec-area .maps .map-downer .downer-wrap {
    width: 100%;
    height: calc(100vw - 80px - 40px);
  }
}
.mapSection .sec-area .maps .map-downer .downer-wrap:before, .mapSection .sec-area .maps .map-downer .downer-wrap:after {
  display: block;
  content: "";
  height: 1px;
  background-color: rgb(238, 238, 244);
  position: absolute;
  top: 350px;
  left: 50%;
}
@media screen and (max-width: 960px) {
  .mapSection .sec-area .maps .map-downer .downer-wrap:before, .mapSection .sec-area .maps .map-downer .downer-wrap:after {
    width: 140%;
    top: calc(50% - 4px);
  }
}
.mapSection .sec-area .maps .map-downer .downer-wrap:before {
  width: 140%;
  -webkit-transform: translateX(-50%) rotate(22.5deg);
      -ms-transform: translateX(-50%) rotate(22.5deg);
          transform: translateX(-50%) rotate(22.5deg);
}
.mapSection .sec-area .maps .map-downer .downer-wrap:after {
  width: 130%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mapSection .sec-area .maps .map-downer .downer-business {
  width: 100%;
  max-width: 700px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mapSection .sec-area .maps .map-downer .downer-business .business-parts {
  position: absolute;
  opacity: 0;
}
.mapSection .sec-area .maps .map-downer .downer-business .business-parts.active {
  opacity: 1;
}
.mapSection .sec-area .maps .map-downer .downer-business .business01 {
  width: 33%;
  top: 11.3%;
  left: -3.8%;
  -webkit-transform: translate(20%, 20%) rotate(-45deg);
      -ms-transform: translate(20%, 20%) rotate(-45deg);
          transform: translate(20%, 20%) rotate(-45deg);
}
.mapSection .sec-area .maps .map-downer .downer-business .business02 {
  width: 27%;
  bottom: 11.1%;
  left: 0.2%;
  -webkit-transform: translate(20%, -20%) rotate(45deg);
      -ms-transform: translate(20%, -20%) rotate(45deg);
          transform: translate(20%, -20%) rotate(45deg);
}
.mapSection .sec-area .maps .map-downer .downer-business .business03 {
  width: 27%;
  bottom: -3.6%;
  left: 49.8%;
  -webkit-transform: translateX(-50%) translateY(-100%);
      -ms-transform: translateX(-50%) translateY(-100%);
          transform: translateX(-50%) translateY(-100%);
}
.mapSection .sec-area .maps .map-downer .downer-business .business04 {
  width: 4.6%;
  right: -4.6%;
  top: 50%;
  -webkit-transform: translate(-100%, -50%);
      -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}

/* ================================================================================
detailOfBusiness
================================================================================ */
.detailOfBusiness {
  border-bottom: 1px solid var(--color-key);
  padding: 0 80px;
}
@media screen and (max-width: 960px) {
  .detailOfBusiness {
    padding: 0 20px;
  }
}
.detailOfBusiness .sec-area {
  position: relative;
  max-width: 100%;
  background: white;
  padding: 140px 0;
}
@media screen and (max-width: 768px) {
  .detailOfBusiness .sec-area {
    padding: 70px 0;
  }
}
.detailOfBusiness .sec-area > .titleArea {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 150px;
}
@media screen and (max-width: 420px) {
  .detailOfBusiness .sec-area > .titleArea {
    margin-bottom: 60px;
  }
}
.detailOfBusiness .sec-area > .titleArea .en {
  border-bottom: 2px solid var(--color-key);
  margin: 0 auto 30px;
  color: var(--color-key);
  font-family: "Montserrat";
  font-size: 13px;
  font-weight: 700;
  line-height: 3;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
@media screen and (max-width: 768px) {
  .detailOfBusiness .sec-area > .titleArea .en {
    font-size: calc(22 * var(--u));
  }
}
.detailOfBusiness .sec-area > .titleArea h2 {
  color: var(--color-key);
  font-size: 36px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
}
@media screen and (max-width: 768px) {
  .detailOfBusiness .sec-area > .titleArea h2 {
    font-size: calc(56 * var(--u));
  }
}

/* ================================================================================
businessOfGroupCompanies
================================================================================ */
.businessOfGroupCompanies {
  border-bottom: 1px solid var(--color-key);
  padding: 0 80px;
}
@media screen and (max-width: 960px) {
  .businessOfGroupCompanies {
    padding: 0 20px;
  }
}
.businessOfGroupCompanies .sec-area {
  position: relative;
  max-width: 100%;
  background: white;
  padding: 140px 0 110px;
}
@media screen and (max-width: 768px) {
  .businessOfGroupCompanies .sec-area {
    padding: 60px 0;
  }
}
.businessOfGroupCompanies .sec-area > .titleArea {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 150px;
}
@media screen and (max-width: 420px) {
  .businessOfGroupCompanies .sec-area > .titleArea {
    margin-bottom: 73px;
  }
}
.businessOfGroupCompanies .sec-area > .titleArea .en {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: 2px solid var(--color-key);
  margin: 0 auto 30px;
  color: var(--color-key);
  font-family: "Montserrat";
  font-size: 13px;
  font-weight: 700;
  line-height: 3;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
}
@media screen and (max-width: 768px) {
  .businessOfGroupCompanies .sec-area > .titleArea .en {
    font-size: calc(22 * var(--u));
  }
}
.businessOfGroupCompanies .sec-area > .titleArea h2 {
  color: var(--color-key);
  font-size: 36px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
@media screen and (max-width: 768px) {
  .businessOfGroupCompanies .sec-area > .titleArea h2 {
    font-size: calc(56 * var(--u));
  }
}

/* ================================================================================
informations
================================================================================ */
.informations {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 130px;
  max-width: 940px;
  padding: 0 20px;
  margin: 0 auto;
}
@media screen and (max-width: 420px) {
  .informations {
    gap: 47px;
    padding: 0 25px;
  }
}
.informations .information > .titleArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  border-bottom: 1px solid var(--color-key);
  padding: 0 0 15px;
  margin: 0 0 60px;
}
@media screen and (max-width: 420px) {
  .informations .information > .titleArea {
    gap: 20px;
    margin-bottom: 34px;
  }
}
.informations .information > .titleArea picture {
  display: block;
  width: 50px;
  aspect-ratio: 1;
}
@media screen and (max-width: 420px) {
  .informations .information > .titleArea picture {
    width: 40px;
  }
}
.informations .information > .titleArea h3 {
  color: var(--color-key);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .informations .information > .titleArea h3 {
    font-size: calc(48 * var(--u));
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.informations .information .boxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: calc(100 * var(--u));
}
@media screen and (max-width: 768px) {
  .informations .information .boxes {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.informations .information .boxes .box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.informations .information .boxes .box .text1 {
  margin: 0 0 30px;
  font-size: clamp(18px, 1.5vw + 0.2rem, 24px);
  font-weight: 500;
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  .informations .information .boxes .box .text1 {
    line-height: 170%;
    letter-spacing: 1.8px;
    margin-bottom: 20px;
  }
}
.informations .information .boxes .box .text2 {
  font-size: 15px;
  line-height: 2;
}
@media screen and (max-width: 420px) {
  .informations .information .boxes .box .text2 {
    line-height: 170%; /* 25.5px */
    letter-spacing: 0.75px;
  }
}
.informations .information .boxes .box picture {
  display: block;
  width: 100%;
}

/* ================================================================================
companies
================================================================================ */
.companies {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 70px;
  max-width: 990px;
  padding: 0 20px;
  margin: 0 auto;
}
@media screen and (max-width: 420px) {
  .companies {
    gap: 20px;
    padding: 0 25px;
  }
}
.companies .company {
  border: 1px solid rgb(202, 202, 217);
  border-radius: 10px;
  padding: 40px calc(75 * var(--u)) 70px;
}
@media screen and (max-width: 768px) {
  .companies .company {
    border-radius: 4px;
    padding: 40px 20px 70px;
  }
}
.companies .company > .titleArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  border-bottom: 1px solid rgb(236, 236, 236);
  padding: 0 0 35px;
  margin: 0 0 60px;
}
@media screen and (max-width: 768px) {
  .companies .company > .titleArea {
    gap: 14px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 0 41px;
    margin: 0 0 19px;
  }
}
.companies .company > .titleArea picture {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 145px;
  aspect-ratio: 2.738317757;
}
@media screen and (max-width: 768px) {
  .companies .company > .titleArea picture {
    width: calc(300 * var(--u));
  }
}
.companies .company > .titleArea hr {
  display: block;
  height: 50px;
  border: none;
  border-left: 1px solid var(--color-key);
}
.companies .company > .titleArea h3 {
  color: var(--color-key);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .companies .company > .titleArea h3 {
    text-align: center;
    font-size: 16px;
    line-height: 150%; /* 24px */
    letter-spacing: 3px;
  }
}
.companies .company .boxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: calc(100 * var(--u));
}
@media screen and (max-width: 768px) {
  .companies .company .boxes {
    gap: 33px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.companies .company .boxes .box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.companies .company .boxes .box .text1 {
  margin: 0 0 30px;
  color: var(--color-key);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  .companies .company .boxes .box .text1 {
    font-size: 18px;
    letter-spacing: 1.8px;
    margin-bottom: 20px;
  }
}
.companies .company .boxes .box .text2 {
  margin: 0 0 30px;
  font-size: 14px;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .companies .company .boxes .box .text2 {
    font-size: 14px;
    letter-spacing: 0.7px;
  }
}
.companies .company .boxes .box .link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.companies .company .boxes .box .link p {
  font-size: 15px;
  letter-spacing: 0.15em;
  word-break: break-all;
}
@media screen and (max-width: 768px) {
  .companies .company .boxes .box .link p {
    font-size: calc(24 * var(--u));
  }
}
.companies .company .boxes .box .link p a {
  color: inherit;
}
.companies .company .boxes .box .link p picture {
  display: inline-block;
  width: 13px;
  aspect-ratio: 1;
}
@media screen and (max-width: 768px) {
  .companies .company .boxes .box .link p picture {
    width: calc(24 * var(--u));
  }
}
.companies .company .boxes .box .link p picture img {
  display: inline-block;
}