@charset "UTF-8";

/* =====================
  menu
===================== */
@layer style {
  /* =====================
    button
  ===================== */
  .sp-menu {
    position: fixed;
    inset-block-start: calc((100 / 390) * 16.5 * 1vw);
    inset-inline-end: calc((100 / 390) * 16 * 1vw);
    z-index: 22;

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

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

  /* =====================
    sp-nav
  ===================== */
  .sp-nav {
    position: fixed;
    inset: 0;
    z-index: 22;
    display: block grid;
    margin-inline: auto;
    pointer-events: none;
    background: white;
    opacity: 0;
    translate: 100% 0;
    will-change: translate;

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

    /* ==== wrap ==== */
    .wrap {
      position: relative;
    }

    /* ==== close-menu ==== */
    .close-menu {
      position: absolute;
      inset-block-start: 4.1vw;
      inset-inline-end: calc((100 / 390) * 16 * 1vw);
      z-index: 1;

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

    /* ==== inner ==== */
    .inner {
      position: relative;
      max-block-size: calc(100svh - 19vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: 17vw;
      overflow-y: scroll;
    }

    /* ==== nav ==== */
    .nav {
      & > ul {
        display: block grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: space-between;

        & a {
          display: block flex;
          grid-template-columns: 1fr auto;
          align-items: baseline;
          padding-block: 5.79vw 5.99vw;
          font-size: calc((100 / 390) * 16 * 1vw);
          font-weight: 500;
          border-block-end: 1px solid var(--smoke);

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

        & li + li a {
          border-block-start: 1px solid transparent;
        }
      }
    }

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block flex;
      gap: 4vw;
      margin-block-start: 21.4vw;
      margin-inline: auto;
      font-size: calc((100 / 390) * 13 * 1vw);
      font-weight: 400;
      color: var(--gray);
    }

    /* ==== anchor ==== */
    .anchor {
      display: grid;
      gap: 4vw;
      margin-block-start: 8.2vw;
    }
  }

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