@charset "UTF-8";

/* 変数
----------------------------------------------------*/
:root {
  --main-color: #616852;
  --black-01: #352d2e;
  --black-02: #2e2b2a;
  --gray-01: #808080;
  --gray-02: #f4f4f4;
  --gray-03: #e6e6e6;
  --white-01: #ffffff;
  --white-02: #f2f2f2;

  /* 360-1920 */
  --fs-q2-17: clamp(13px,calc(13px + (17 - 13) / (1920 - 360) * (100cqw - 360px)),17px);

  /* 360-1240 */
  --fs-q1-19: clamp(14px,calc(14px + (19 - 14) / (1920 - 360) * (100cqw - 360px)),19px);
  --fs-q3-17: clamp(13px,calc(13px + (17 - 13) / (1920 - 360) * (100cqw - 360px)),17px);
  --fs-q4-25: clamp(18px,calc(18px + (25 - 18) / (1920 - 360) * (100cqw - 360px)),25px);
  --fs-q5-18: clamp(12px,calc(12px + (18 - 12) / (1920 - 360) * (100cqw - 360px)),18px);
  --fs-q6-13: clamp(10px,calc(10px + (13 - 10) / (1920 - 360) * (100cqw - 360px)),13px);
  --fs-q7-22: clamp(15px,calc(15px + (22 - 15) / (1920 - 360) * (100cqw - 360px)),22px);
  --fs-q8-24: clamp(16px,calc(16px + (24 - 16) / (1920 - 360) * (100cqw - 360px)),24px);

  /* h1 */
  --fs-q9-90: clamp(34px,calc(34px + (90 - 34) / (1920 - 768) * (100cqw - 768px)),90px);
  --fs-q9-sp: clamp(29px,calc(29px + (58 - 29) / (768 - 375) * (100cqw - 375px)),58px);
  --fs-q10-36: clamp(16px,calc(16px + (36 - 16) / (1920 - 768) * (100cqw - 768px)),36px);
  --fs-q10-sp: clamp(11px,calc(11px + (19 - 11) / (768 - 375) * (100cqw - 375px)),19px);


  /**/
  --fs-q11-47: clamp(19px,calc(19px + (47 - 19) / (1244 - 360) * (100cqw - 360px)),47px);
  --fs-q20-19: clamp(14px,calc(14px + (19 - 14) / (1280 - 768) * (100cqw - 768px)),19px);

  /**/
  --fs-q12-29: clamp(17px,calc(17px + (29 - 17) / (1920 - 360) * (100cqw - 360px)),29px);
  --fs-q13-23: clamp(16px,calc(16px + (23 - 16) / (1920 - 360) * (100cqw - 360px)),23px);
  --fs-q14-78: clamp(36px,calc(36px + (78 - 36) / (1920 - 360) * (100cqw - 360px)),78px);
  --fs-q15-16: clamp(10px,calc(10px + (16 - 10) / (1920 - 360) * (100cqw - 360px)),16px);
  --fs-q16-73: clamp(33px,calc(33px + (73 - 33) / (1920 - 360) * (100cqw - 360px)),73px);
  --fs-q17-48: clamp(19px,calc(19px + (48 - 19) / (1920 - 360) * (100cqw - 360px)),48px);

  /* フッター・コピーライト */
  --fs-q18-14: clamp(11px,calc(11px + (14 - 11) / (1920 - 360) * (100cqw - 360px)),14px);
  --fs-q19-17: clamp(12px,calc(12px + (17 - 12) / (1920 - 360) * (100cqw - 360px)),17px);



  /**/
  --vw-unit: calc(100vw / 1920);
  --vw-unit-880: calc(100vw / 880);
  --vw-unit-768: calc(100vw / 768);

  /* @media (width < 768px) {
    --vw-unit: calc(100vw / 768);
  } */

}

/* 使用Webフォント
  font-family: ;
  .font-ko {font-family: 'Klee One', serif;}
  .font-zom {font-family: 'Zen Old Mincho', serif;}
*/


/* 初期設定
----------------------------------------------------*/
html {
  scroll-behavior: smooth;
  /* overflow-x: hidden; */
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-q1-19);
  font-weight: normal;
  font-style: normal;
  font-feature-settings: "palt";
  line-height: 1.8;
  color: var(--main-color);
  overflow-x: hidden;
  &.openMenu {
    height: 100vh;
    overflow: hidden;
  }
}
a {
  display: block;
  text-decoration: none;
  color: var(--main-color);
  transition-property: color;
  transition-duration: 0.4s;
}

.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}


/* ブレイクポイント出し分け
----------------------------------------------------*/
/* スクリーンリーダー用 */
.for-ScreenReader {display: none;}

.distribute {
  display: none;
  /* 未満 */
  &.under420 {
    @media (width < 420px) {
      display: block;
    }
  }
  &.over420 {
    @media (420px <= width) {
      display: block;
    }
  }
  &.under768 {
    @media (width < 768px) {
      display: block;
    }
  }
  &.over768 {
    @media (768px <= width) {
      display: block;
    }
  }
  &.under880 {
    @media (width < 880px) {
      display: block;
    }
  }
  &.over880 {
    @media (880px <= width) {
      display: block;
    }
  }

}


/* ヘッダー
----------------------------------------------------*/
.mainHeader {
  background-color: var(--gray-02);
  & .innerWrap {
    display: flex;
    align-items: center;
    padding: min(4.8vw,32px);
    & .logo {
      margin-left: min(9vw,32px);
      background-color: var(--black-01);
      & img {
        width: 20%;
        margin-inline: auto;
      }
    }
    & .menuBtn {
      & img {
        width: min(9vw,32px);
      }
    }
    & .closeBtn {
      display: none;
    }
    @media (768px <= width) {
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
      padding: 0;
      & .logo {
        margin-left: 0;
        flex-basis:24.6vw;
        display: flex;
        justify-content: center;
        align-items: center;
        & img {
          width: auto;
          max-width: calc(151 * var(--vw-unit));
        }
      }
      & .menuBtn {
        display: none;
      }
      & nav {
        & ul {
          display: flex;
          padding: calc(52 * var(--vw-unit)) 4.48vw calc(48 * var(--vw-unit)) 2.3vw;
          font-family: "Poppins", sans-serif;
          font-weight: 500;
          & li {
            &:not(:last-of-type) {
              margin-right: min(2.5vw,44px);
            }
            & * {
              font-size: var(--fs-q2-17);
            }
            & a {
              color: var(--main-color);
              &:hover {
                color: var(--black-01);
              }
            }
          }
        }
      }
    }
  }
}
@media (width < 768px) {
  .mainHeader {
    & .innerWrap {
      background-color: var(--black-01);
      nav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #f1f1f1;
        z-index: 100;
        transform: translatex(100%);
        transition: all 0.6s;
        padding: 9.34vw;
        & .closeBtn {
          position: absolute;
          right: 9.34vw;
          top: 9.34vw;
        }
        & ul {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 9.3vw 0;
          & li {
            font-family: "Poppins", sans-serif;
            font-weight: 500;
            font-size: 3.734vw;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
            & a {
              display: flex;
              align-items: center;
              & .ja {
                margin-right: 1em;
              }
              & .en {
                font-size: 3vw;
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }
  .openMenu {
    .mainHeader {
      & .innerWrap {
        & nav {
          transform: translateX(0)!important;
          & .closeBtn {
            display: block;
            width: 4.5334vw;
            margin-top: -4.3vw;
            margin-right: -4.3vw;
          }
          & li {
            opacity: 1;
            transform: translateY(0);
            &:nth-child(1) { transition-delay: 0.2s; }
            &:nth-child(2) { transition-delay: 0.35s; }
            &:nth-child(3) { transition-delay: 0.5s; }
            &:nth-child(4) { transition-delay: 0.65s; }
            &:nth-child(5) { transition-delay: 0.8s; }
            &:nth-child(6) { transition-delay: 0.95s; }
          }
        }
      }
    }
  }
}


/* フッター
----------------------------------------------------*/
.mainFooter {
  background-color: var(--main-color);
  color: var(--white-01);
  font-size: var(--fs-q19-17);
  padding-block: calc(80 * var(--vw-unit-768));
  @media (768px <= width) {
    padding-block: calc(90 * var(--vw-unit));
  }
  & .innerWrap {
    max-width: 1516px;
    padding-inline: calc(60 * var(--vw-unit-768));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: bottom;
    @media (768px <= width) {
      padding-inline: min(40px,2.64vw);
      flex-direction: row;
      justify-content: space-between;
    }
    & > div {
      flex: 1;
      margin-bottom: min(calc(80 * var(--vw-unit-768)),40px);
      & .logo {
        & img {
          width: 40vw;
          max-width: 228px;
        }
      }
      & .address {
        margin-top: 5.334vw;
        @media (768px <= width) {
          margin-top: calc(45 * var(--vw-unit));
        }
      }
    }
    & nav {
      margin-top: 0.9em;
      @media (768px <= width) {
        flex: 0;
      }
      & ul {
        display: flex;
        flex-wrap: wrap;
        font-family: "Poppins", sans-serif;
        @media (768px <= width) {
          flex-wrap: nowrap;
          flex-direction: row;
          justify-content: flex-start;
          padding-right: 2px;
        }
        & li {
          flex-basis: 60%;
          margin-bottom: min(calc(56 * var(--vw-unit-768)),28px);
          &:nth-child(2n) {
            flex-basis: 40%;
          }
          &:not(:last-of-type) {
            @media (768px <= width) {
              margin-right: min(2vw, 47px);
            }
            @media (1024px <= width) {
              margin-right: min(3.27vw, 47px);
            }
          }
          & a {
            color: var(--white-01);
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }
      & p {
        @media (768px <= width) {
          /* margin-top: calc(78 * var(--vw-unit)); */
          margin-top: 1.8em;
          margin-top: calc(36 * var(--vw-unit));
        }
        & a {
          color: var(--white-01);
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
    & .copy {
      margin-top: calc(87 * var(--vw-unit-768));
      flex-basis: 100%;
      border-top: 1.26px solid var(--white-01);
      padding-top: 2.67vw;
      padding-left: 2px;
      font-size: var(--fs-q18-14);
      font-family: "Poppins", sans-serif;
      @media (768px <= width) {
        text-align: right;
        margin-top: calc(74 * var(--vw-unit));
        padding-top: 24px;
        padding-right: 2px;
      }
    }
  }
}