@charset "UTF-8";

@layer style {
  .sp-menu {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 22;
    display: block grid;
    gap: 0.8vw;
    place-content: center start;
    align-content: start;
    align-items: flex-start;
    block-size: calc((100 / 390) * 60 * 1vw);
    aspect-ratio: 1 / 1;
    padding-block: 4.1vw;
    padding-inline: calc((100 / 390) * 15 * 1vw);
    margin-inline: auto;
    font-size: calc((100 / 390) * 9 * 1vw);
    font-weight: 500;
    color: var(--primary);
    letter-spacing: calc((100 / 390) * 0.36 * 1vw);
    border-inline-start: 1px solid rgb(0 0 0 / 15%);
    transition: all 250ms ease 0s;

    &::after {
      font-family: var(--title);
      content: 'MENU';
    }

    @media (width > 768px) {
      display: none;
    }

    >span {
      display: block flex;
      flex-flow: column wrap;
      gap: 1.3vw;
      inline-size: calc((100 / 390) * 30 * 1vw);
      transition: inherit;

      span {
        inline-size: calc((100 / 390) * 20 * 1vw);
        block-size: 1px;
        background: currentcolor;
        transition: inherit;
      }

      &::before,
      &::after {
        block-size: 1px;
        content: '';
        background: currentcolor;
        transition: inherit;
      }

      &::before {
        inline-size: 100%;
      }

      &::after {
        inline-size: calc((100 / 390) * 14 * 1vw);
      }
    }
  }

  .sp-nav {
    position: fixed;
    inset: 0;
    z-index: 20;
    inline-size: 100%;
    margin-inline: auto;
    font-size: calc((100 / 390) * 18 * 1vw);
    color: white;
    pointer-events: none;
    background: var(--primary);
    opacity: 0;
    translate: 0 -100%;
    will-change: translate;

    .inner {
      display: block flex;
      flex-direction: column;
      inline-size: 100%;
      block-size: 100vh;
      max-block-size: calc(100svh - 3vw);
      padding-block: 22.2vw calc((100 / 390) * 46 * 1vw);
      padding-inline: calc((100 / 390) * 31.88 * 1vw);
      overflow: auto;
      overflow-y: scroll;
      color: white;
    }

    /* ==== .logo ==== */
    .logo {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      inline-size: fit-content;
      margin-block-start: 5px;

      @media (width <=768px) {
        margin-block-start: 16.4vw;
        margin-inline: auto;

        img {
          inline-size: calc((100 / 390) * 184 * 1vw);
          block-size: calc((100 / 390) * 60 * 1vw);
        }
      }
    }

    /* ==== .nav ==== */
    .nav {
      grid-row: 1 / 5;
      grid-column: 2 / 3;
      inline-size: 100%;
      margin-inline: auto;

      ul {
        display: block grid;
        gap: 2.5vw;
        align-items: start;
        align-self: flex-start;
        color: white;

        >li {
          position: relative;
          padding-inline-start: 3.2vw;
          border-inline-start: 1px solid var(--form-form-border);
        }

        >li>a {
          position: relative;
          display: block flex;
          gap: 0 7px;
          align-items: center;
          padding-block: 1.7vw;
          padding-inline-end: 10vw;
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }

      li {
        position: relative;
        display: block grid;
      }

      label {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        z-index: 2;
        display: block grid;
        place-content: center end;
        inline-size: calc((100 / 390) * 40 * 1vw);
        aspect-ratio: 1 / 1;
        cursor: pointer;
        -webkit-tap-highlight-color: rgb(0 0 0 / 10%);

        &::before {
          inline-size: calc((100 / 390) * 24 * 1vw);
          aspect-ratio: 1 / 1;
          margin-inline: auto 0;
          content: '';
          background-color: white;
          mask-image: var(--icon-plus);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          transition: rotate 250ms ease 0s;
          will-change: rotate;
        }

        input {
          display: none;
        }

        @media (width > 768px) {
          display: none;
        }
      }

      .children {
        display: block grid;
        grid-template-rows: 0fr;
        font-size: 12px;
        font-weight: 400;
        transition: grid-template-rows 0.2s ease-out;
      }

      .children-wrap {
        display: block grid;
        gap: var(--nudge-1);
        overflow: hidden;

        a {
          position: relative;
          display: block flex;
          gap: var(--nudge-1);
          padding-inline-start: 2vw;

          &::before {
            content: '-';
          }
        }
      }

      li:has(input:checked) {
        .children {
          grid-template-rows: 1fr;
        }

        label::before {
          rotate: 0 0 1 45deg;
        }
      }
    }

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block flex;
      gap: 0;
      justify-content: space-between;
      inline-size: 100%;
      padding-inline: 0.8vw;
      margin-block-start: 10vw;
      margin-inline: auto;
      font-size: calc((100 / 390) * 13 * 1vw);
      font-weight: 500;
      color: white;
    }

    /* ==== address ==== */
    .address {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      inline-size: fit-content;
      margin-block-start: 22px;
      font-size: 14px;
      font-weight: 500;

      @media (width <=768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: calc((100 / 390) * 23 * 1vw);
        font-size: calc((100 / 390) * 13 * 1vw);
      }

      .title {
        @media (width <=768px) {
          margin-block-start: 0.2vw;
        }
      }

      .location {
        display: block flex;
        gap: 14px;
        align-items: center;

        @media (width <=768px) {
          gap: calc((100 / 390) * 11 * 1vw);
        }
      }

      .tel-fax {
        display: block flex;
        gap: 0 2px;
        align-items: center;

        @media (width <=768px) {
          gap: 0;
        }

        span+span::before {
          margin-inline-end: 4px;
          content: '／';

          @media (width <=768px) {
            margin-inline-end: calc((100 / 390) * 3 * 1vw);
          }
        }

        @media (width <=768px) {
          a[href^='tel:'] {
            color: var(--primary);
            text-decoration: underline;
          }
        }
      }

      .unit+.unit {
        margin-block-start: 14px;
      }
    }

    /* ==== links ==== */
    .links {
      display: block flex;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
      gap: 8px;
      align-items: center;
      margin-block-start: 22px;

      @media (width <=768px) {
        display: block grid;
        gap: 2.6vw 0;
        justify-content: center;
        inline-size: fit-content;
        margin-block-start: calc((100 / 390) * 23.7 * 1vw);
        margin-inline: auto;
      }

      a {
        display: block grid;
        place-content: center;
        block-size: 100%;
        background: white;
      }

      .border {
        padding-block: 26.1px;
        padding-inline: 18.8px;
        border: 1px solid #ccc;

        @media (width <=768px) {
          padding-block: calc((100 / 390) * 10.4 * 1vw) calc((100 / 390) * 10.3 * 1vw);
          padding-inline: calc((100 / 390) * 17.8 * 1vw);
        }
      }

      @media (width <=768px) {
        [data-id='sdgs'] {
          grid-row: 1 / 2;
          grid-column: 1 /3;

          @media (width <=768px) {
            img {
              inline-size: calc((100 / 390) * 144 * 1vw);
              block-size: calc((100 / 390) * 18 * 1vw);
            }
          }
        }

        [data-id='youtube'] {
          grid-row: 2 / 3;
          grid-column: 1 /3;

          @media (width <=768px) {
            justify-content: start;

            img {
              inline-size: calc((100 / 390) * 97 * 1vw);
              block-size: calc((100 / 390) * 20 * 1vw);
            }
          }
        }

        [data-id='green'] {
          grid-row: 3 / 4;
          grid-column: 1 / 2;

          @media (width <=768px) {
            inline-size: calc((100 / 390) * 75 * 1vw);
            margin-inline: auto;

            img {
              inline-size: calc((100 / 390) * 75 * 1vw);
            }
          }
        }

        [data-id='safe'] {
          grid-row: 3 / 4;
          grid-column: 2 / 3;

          @media (width <=768px) {
            inline-size: calc((100 / 390) * 75 * 1vw);
            margin-inline: auto;

            img {
              inline-size: calc((100 / 390) * 75 * 1vw);
            }
          }
        }
      }
    }

    /* ==== copy ==== */
    .copy {
      inline-size: fit-content;
      font-weight: 500;

      @media (width <=768px) {
        margin-block-start: 9.2vw;
        margin-inline: auto;
        font-size: calc((100 / 390) * 12 * 1vw);
        color: white;
        letter-spacing: calc((100 / 390) * 1.2 * 1vw);
      }
    }
  }

  /* =====================
    menu-on
  ===================== */
  .menu-on {
    .sp-menu {
      span {
        >span {
          inline-size: 0;
        }

        &::before,
        &::after {
          inline-size: 100%;
        }

        &::before {
          transform: rotate(25deg);
          transform-origin: center;
          translate: 0 1.7vw;
        }

        &::after {
          transform: rotate(-25deg);
          transform-origin: center;
          translate: 0 -1.4vw;
        }
      }

      &::after {
        content: 'CLOSE';
      }
    }

    .sp-nav {
      pointer-events: auto;
      opacity: 1;
      translate: 0 0;
      transition: translate 250ms ease 0s;
    }
  }
}

.header-color {
  .sp-menu {
    color: var(--primary);
    border-inline-start: 1px solid rgb(0 0 0 / 15%);
  }
}