@charset "UTF-8";

@layer style {
  .sp-menu {
    position: fixed;
    inset-block-start: 9.5vw;
    inset-inline-end: 10.3vw;
    z-index: 23;
    display: block grid;
    gap: 1.8vw;
    place-content: center;
    inline-size: calc((100 / 390) * 24 * 1vw);
    aspect-ratio: 1 / 1;
    cursor: pointer;

    &::before,
    &::after {
      display: block flow;
      inline-size: inherit;
      block-size: 1px;
      content: '';
      background: var(--lightblue);
      transition: all 250ms ease 0s;
    }

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

  /* =====================
    sp-nav
  ===================== */
  .sp-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: -1;
    place-content: center;
    padding-block: 0;
    margin-inline: auto;
    background: white;

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

    .inner {
      display: block grid;
      max-inline-size: calc(100vw - calc((100 / 390) * 8 * 2 * 1vw));
      block-size: 0;
      padding-block: 0;
      padding-inline: 6.4vw;
      margin-inline: auto;
      overflow-y: auto;
      color: white;
      background: var(--lightblue);
      border-radius: calc((100 / 390) * 16 * 1vw);
      opacity: 0;
    }

    /* ==== nav ==== */
    .nav {
      align-items: flex-start;

      /* navigation */
      >ul {
        display: block flow;
        gap: 0;
        padding-inline-end: 0;
        font-size: calc((100 / 390) * 15 * 1vw);
        columns: 2;

        /* ==== li ==== */
        >li {
          block-size: fit-content;
          margin-block-end: 10.7vw;
          font-size: calc((100 / 390) * 16 * 1vw);

          &:nth-child(2) {
            margin-block-end: 0;
            break-after: column;
          }
        }
      }

      /* ==== child ==== */
      >ul ul {
        display: block grid;
        gap: 2.5vw;
        margin-block-start: 3.6vw;
        font-size: calc((100 / 390) * 15 * 1vw);

        li {
          a {
            display: block flex;
            gap: 2.1vw;
            align-items: center;
            font-size: calc((100 / 390) * 14 * 1vw);

            &::before {
              inline-size: 4px;
              aspect-ratio: 1 / 1;
              content: '';
              background: currentcolor;
              border-radius: calc(infinity * 1px);

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

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block flex;
      flex-wrap: wrap;
      gap: 5.2vw;
      align-self: flex-end;
      inline-size: fit-content;
      margin-block: 16.1vw 0;
      margin-inline: auto;
      font-size: calc((100 / 390) * 13 * 1vw);
    }

    /* ==== anchor ==== */
    .anchor {
      display: block flex;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
      gap: 2.9vw;
      align-self: flex-start;
      inline-size: fit-content;
      padding-block: 2vw;
      padding-inline: 5.3vw 6.7vw;
      margin-block-start: -3px;
      margin-block-start: 6.2vw;
      margin-inline: auto;
      font-size: calc((100 / 390) * 13 * 1vw);
      color: var(--lightblue);
      background: white;
      border-radius: calc(infinity * 1px);
      transition: all 250ms ease 0s;

      &::after {
        inline-size: calc((100 / 390) * 15 * 1vw);
        aspect-ratio: 1 / 1;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-download);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transition: inherit;
      }
    }
  }

  .menu-on .sp-menu {
    &::before {
      rotate: 0 0 1 45deg;
      translate: 1vw 1vw;
    }

    &::after {
      rotate: 0 0 1 -45deg;
      translate: 1vw -1vw;
    }
  }

  .menu-on .sp-nav {
    z-index: 21;
    padding-block: calc((100 / 390) * 8 * 1vw);
    pointer-events: auto;

    .inner {
      block-size: calc(100dvh - 4.2vw);
      padding-block: 33.5vw 16vw;
      opacity: 1;
      transition:
        block-size 300ms ease 0s,
        opacity 300ms ease 300ms;
    }
  }
}