@charset "UTF-8";

/* =====================
  sp-menu
===================== */
@layer style {
  @media (width > 768px) {
    .sp-menu,
    .sp-nav {
      display: none;
    }
  }

  @media (width <=768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: absolute;
      top: calc((100 / 390) * 8 * 1vw);
      right: calc((100 / 390) * 8 * 1vw);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/menu.svg');
      inline-size: calc((100 / 390) * 48 * 1vw);
      block-size: calc((100 / 390) * 48 * 1vw);
      z-index: 220;
    }

    /* ==== 閉じる ==== */
    .menu-on {
      .sp-menu {
        position: fixed;
        background-image: url('../img/_common/close.svg');
      }
    }

    .sp-nav {
      --_header-height: calc((100 / 390) * 60 * 1vw);
      position: fixed;
      inset: 0;
      z-index: 50;
      transform: translateX(100%);
      pointer-events: none;
      transition: all 350ms var(--easeOutExpo) 0s;

      /* ==== inner ==== */
      .sp-nav-inner {
        position: relative;
        background: #f1f8fe;
        backdrop-filter: blur(5px);

        .sp-menu-head {
          position: relative;
          inline-size: 100%;
          block-size: var(--_header-height);
          top: 0;
          left: 0;
          padding-inline: calc((100 / 390) * 8 * 1vw);
          display: block grid;
          align-content: center;
          background-color: #f1f8fe;

          .logo {
            & img {
              width: calc((100 / 390) * 210 * 1vw);
            }
          }

          &::before {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: 100% calc((100 / 390) * 82 * 1vw);
            background-position: center;
            background-image: url('../img/_common/header_bg_2x.svg#svgView(preserveAspectRatio(none))');
            inline-size: 100%;
            min-block-size: calc((100 / 390) * 82 * 1vw);
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
          }
        }

        .body {
          position: relative;
          padding-block: calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
          block-size: calc(100vh - var(--_header-height));
          overflow-y: auto;

          .nav {
            display: block grid;
            align-items: start;
            grid-template-columns: 1fr;
            gap: calc((100 / 390) * 64 * 1vw) 0;
            margin-inline: calc((100 / 390) * 16 * 1vw);

            .main-nav {
              display: block grid;
              grid-template-columns: repeat(2, 1fr);
              gap: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 2 * 1vw);

              & > li {
                .head {
                  display: block flow;
                  font-weight: 500;
                  border-left: solid 1px rgba(0, 0, 0, 0.2);
                  font-size: calc((100 / 390) * 15 * 1vw);
                  padding-inline-start: calc((100 / 390) * 12 * 1vw);
                  padding-block: calc((100 / 390) * 6 * 1vw);
                }
              }
            }
            .sub-nav {
              position: relative;
              display: block grid;
              gap: calc((100 / 390) * 30 * 1vw);

              & > li {
                color: #888;
                font-size: calc((100 / 390) * 13 * 1vw);
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }

  /* Menu on */
  .menu-on {
    .sp-nav {
      pointer-events: auto;
      transform: translateX(0);
      transition: all 350ms var(--easeOutExpo) 0s;
    }
  }
}