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

  /* Menu on */
  .menu-on .sp-nav {
    pointer-events: auto;
    transform: translateY(0);
    transition: all 600ms var(--easeOutExpo) 0s;
  }
  @media (width <= 768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: fixed;
      top: calc((100 / 390) * 16 * 1vw);
      right: calc((100 / 390) * 16 * 1vw);
      inline-size: calc((100 / 390) * 58 * 1vw);
      block-size: calc((100 / 390) * 58 * 1vw);
      z-index: 220;

      /*=============================
        .btn-trigger
      =============================*/
      &.btn-trigger {
        span {
          position: absolute;
          left: 0;
          inline-size: calc((100 / 390) * 24 * 1vw);
          block-size: 1px;
          background-image: linear-gradient(93deg, #22327e 35%, #5d69a1 54%, #0f1b53 79%);

          &:nth-of-type(1) {
            top: calc((100 / 390) * 25 * 1vw);
            left: 50%;
            transform: translateX(-50%);
          }
          &:nth-of-type(2) {
            bottom: calc((100 / 390) * 25 * 1vw);
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
      &.btn-trigger,
      &.btn-trigger span {
        display: inline-block;
        transition: all 0.5s;
        box-sizing: border-box;
      }
    }

    .menu-on .btn-trigger {
      & span:nth-of-type(1) {
        -webkit-transform: translateY(calc((100 / 390) * 3.6 * 1vw)) rotate(-45deg);
        transform: translateY(calc((100 / 390) * 3.6 * 1vw)) translateX(-50%) rotate(-45deg);
      }
      & span:nth-of-type(2) {
        -webkit-transform: translateY(calc((100 / 390) * -3.6 * 1vw)) rotate(45deg);
        transform: translateY(calc((100 / 390) * -3.6 * 1vw)) translateX(-50%) rotate(45deg);
      }
    }
  }

  /* =====================
    sp-nav
  ===================== */
  @media (width <= 768px) {
    .sp-nav {
      position: fixed;
      inset: 0;
      z-index: 18;
      transform: translateY(-100%);
      pointer-events: none;
      transition: all 600ms var(--easeOutExpo) 0s;

      /* ==== inner ==== */
      .sp-nav-inner {
        position: relative;
        max-block-size: 100dvh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url('../img/_common/menu_bg.png');
        background-color: #fff;

        .body {
          block-size: 100dvh;
          padding-block: calc((100 / 390) * 138 * 1vw) calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          overflow-y: scroll;

          .main-nav {
            gap: calc((100 / 390) * 27 * 1vw) 0;

            & > ul {
              display: block grid;
              grid-template-columns: 1fr;
              justify-content: center;
              line-height: 1.9;
              font-weight: 500;

              & li {
                .u-hover {
                  position: relative;
                  display: block flow;
                  inline-size: 100%;
                  block-size: inherit;
                  padding-inline: 8px;
                  padding-block: 19.2px;
                  border-block-start: solid 1px #cecece;
                }

                &:last-child {
                  border-block-end: solid 1px #cecece;
                }
              }
            }
          }
        }
        .sub-nav {
          margin-block-start: calc((100 / 390) * 41 * 1vw);

          & > ul {
            display: block flex;
            gap: calc((100 / 390) * 24 * 1vw);
            font-size: calc((100 / 390) * 13 * 1vw);
            color: #878787;
          }
        }
      }
    }
  }
}