@charset "UTF-8";

@layer style {
  .sp-menu {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 22;
    display: block grid;
    gap: 1.6vw;
    align-items: flex-start;
    align-self: flex-start;
    inline-size: var(--header-height);
    aspect-ratio: 1 / 1;
    padding-block: calc((100 / 390) * 12 * 1vw) 0;
    color: white;

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

    .box {
      display: block grid;
      gap: 1.1vw;
      justify-content: center;

      span {
        block-size: calc((100 / 390) * 1 * 1vw);
        min-block-size: 1px;
        background: white;
        transition:
          inline-size 250ms ease 0s,
          rotate 250ms ease 0s;

        &:nth-child(1) {
          inline-size: calc((100 / 390) * 30 * 1vw);
        }

        &:nth-child(2) {
          inline-size: calc((100 / 390) * 20 * 1vw);
        }

        &:nth-child(3) {
          inline-size: calc((100 / 390) * 13.53 * 1vw);
        }
      }
    }

    .text {
      position: relative;
      margin-block: calc((1em - 1lh) / 2);
      font-size: calc((100 / 390) * 9 * 1vw);
      font-weight: 400;
      line-height: 1;
      color: transparent;
      text-align: center;
      letter-spacing: calc((100 / 390) * 0.36 * 1vw);

      &::before {
        display: block flow;
        color: white;
        content: attr(data-text);
      }
    }
  }

  .sp-nav {
    position: fixed;
    inset: 0;
    z-index: 20;
    inline-size: 100%;
    margin-inline: auto;
    color: white;
    pointer-events: none;
    background: var(--gold);
    opacity: 0;
    will-change: translate;

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

    /* ==== inner ==== */
    .inner {
      display: block flex;
      flex-direction: column;
      max-block-size: 100svh;
      padding-block: 25.2vw 8.8vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
      overflow-y: scroll;
      color: var(--black);
      backdrop-filter: blur(5px);
      translate: 100% 0;
    }

    /* ==== nav ==== */
    .nav {
      inline-size: 100%;

      >ul {
        display: block grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 8.6vw 0;
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: -6px;
        margin-block-start: 0;
        margin-inline-end: 0;
        font-size: calc((100 / 390) * 15 * 1vw);
      }

      >[data-id='home'] {
        >a {
          font-family: var(--sanserif);
        }
      }

      >ul>li>a {
        position: relative;
        display: block grid;
        padding-block: 2.7vw;
        padding-inline: 3.2vw;
        font-weight: 500;
        border-inline-start: 1px solid white;

        &::after {
          position: absolute;
          inset-block: 0;
          inset-block-start: 50%;
          inset-inline-end: 3vw;
          inline-size: calc((100 / 390) * 19 * 1vw);
          block-size: calc((100 / 390) * 8 * 1vw);
          content: '';
          background-color: currentcolor;
          mask-image: var(--icon-arrow);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          translate: 0 -50%;
        }
      }
    }

    /* ==== links ==== */
    .links {
      display: block flex;
      grid-row: 6 / 7;
      grid-column: 1 / 4;
      gap: 24px;
      margin-block-start: 15px;
      margin-inline: auto 0;

      @media (width <=768px) {
        gap: var(--nudge-2);
        margin-block-start: var(--nudge-5);
        margin-inline: auto;
      }

      /* ==== anchor ==== */
      .anchor {
        img {
          @media (width <=768px) {
            max-inline-size: calc((100 / 390) * 40 * 1vw);
          }
        }
      }

      /* ==== instagram ==== */
      .instagram {
        display: block grid;
        inline-size: 40px;
        aspect-ratio: 1 / 1;
        background-color: currentcolor;
        mask-image: var(--icon-instagram);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transition: all 600ms ease 0s;

        @media (width <=768px) {
          inline-size: calc((100 / 390) * 35 * 1vw);
          background: linear-gradient(to right, rgb(247 207 0 / 70%), rgb(246 37 2 / 70%) 45%, rgb(182 47 82 / 70%) 75%, rgb(113 58 166 / 70%));
        }

        @media (any-hover: hover) {
          &:hover {
            background: linear-gradient(to right, rgb(247 207 0 / 70%), rgb(246 37 2 / 70%) 45%, rgb(182 47 82 / 70%) 75%, rgb(113 58 166 / 70%));
          }
        }
      }
    }

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block flex;
      flex-wrap: wrap;
      gap: 9vw;
      justify-content: center;
      inline-size: 100%;
      padding-inline: 1vw;
      margin-block-start: 12.4vw;
      font-size: calc((100 / 390) * 13 * 1vw);
      color: white;
      border-inline-start: unset;

      a {
        display: block grid;
        padding-inline: 0;
        font-weight: 400;
      }
    }

    /* ==== children ==== */
    .children {
      display: block grid;
      gap: 2vw;
      padding-inline-start: calc((100 / 390) * 16 * 1vw);
      margin-block-start: 3vw;

      ul {
        display: block grid;
        gap: 3vw;
      }

      a {
        display: block flex;
        gap: 2vw;

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

    /* ==== address ==== */
    .address {
      display: block grid;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      inline-size: 100%;
      margin-block-start: 5.7vw;
      margin-inline: auto;
      font-size: calc((100 / 390) * 13 * 1vw);
      font-weight: 400;
      text-align: center;

      .location {
        display: block flex;
        gap: 4.4vw;
        justify-content: center;
        margin-block-start: 0.1vw;

        p {
          font-size: calc((100 / 390) * 13 * 1vw);
        }
      }

      .tel-fax {
        display: block flex;
        justify-content: center;
        margin-block-start: -0.2vw;

        p {
          font-size: calc((100 / 390) * 13 * 1vw);
        }

        a[href^='tel:'] {
          color: white;
          text-decoration: underline;
        }

        p+p {
          &::before {
            margin-inline-end: 4px;
            content: '／';
          }
        }
      }
    }

    /* ==== .tel ==== */
    .tel {
      display: block flex;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
      gap: 5px;
      inline-size: fit-content;
      margin-block-start: 10px;

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

      p {
        font-size: 14px;
        letter-spacing: 0.02em;

        @media (width <=768px) {
          font-size: calc((100 / 390) * 14 * 1vw);

          a[href^='tel'] {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .menu-on .sp-menu {
    .box {
      span {
        &:nth-child(1) {
          inline-size: calc((100 / 390) * 30 * 1vw);
          transform-origin: 0 0;
          rotate: 20deg;
        }

        &:nth-child(2) {
          inline-size: 0;
        }

        &:nth-child(3) {
          inline-size: calc((100 / 390) * 30 * 1vw);
          transform-origin: 0 100%;
          rotate: -20deg;
        }
      }
    }

    .text {
      &::before {
        content: 'CLOSE';
      }
    }
  }

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

    .inner {
      translate: 0 0;
      transition: translate 250ms ease 0s;
    }
  }

  .menu-on .sp-menu {
    background: var(--gold);

    .text::before {
      color: white;
    }

    .box span {
      background: white;
    }
  }

  .header-color .sp-menu {
    background: var(--gold);

    .text::before {
      color: white;
    }

    .box span {
      background: white;
    }
  }

  body:not([data-page='top']) .sp-menu {
    @media (width > 768px) {
      .text::before {
        color: white;
      }

      .box span {
        background: var(--gold);
      }
    }

    @media (width <=768px) {
      .text::before {
        color: white;
      }

      background: var(--gold);

      .box span {
        background: white;
      }
    }
  }
}