@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;
    opacity: 1;
    transition: all 350ms var(--easeOutExpo) 0s;
  }
  @media (width <= 768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: fixed;
      top: calc((100 / 390) * 15.5 * 1vw);
      right: calc((100 / 390) * 24 * 1vw);
      background-image: linear-gradient(to bottom, #1990bc, #4ae296);
      inline-size: calc((100 / 390) * 45 * 1vw);
      block-size: calc((100 / 390) * 45 * 1vw);
      border-radius: 50rem;
      z-index: 220;

      /*=============================
        .btn-trigger
      =============================*/
      &.btn-trigger {
        span {
          position: absolute;
          left: 0;
          inline-size: calc((100 / 390) * 20 * 1vw);
          block-size: 1px;
          background-color: #fff;
          border-radius: calc((100 / 390) * 2 * 1vw);

          &:nth-of-type(1) {
            top: calc((100 / 390) * 16 * 1vw);
            left: 50%;
            transform: translateX(-50%);
          }
          &:nth-of-type(2) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          &:nth-of-type(3) {
            bottom: calc((100 / 390) * 16 * 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) * 6 * 1vw)) rotate(-45deg);
        transform: translateY(calc((100 / 390) * 6 * 1vw)) translateX(-50%) rotate(-45deg);
      }
      & span:nth-of-type(2) {
        opacity: 0;
      }
      & span:nth-of-type(3) {
        -webkit-transform: translateY(calc((100 / 390) * -6 * 1vw)) rotate(45deg);
        transform: translateY(calc((100 / 390) * -6 * 1vw)) translateX(-50%) rotate(45deg);
      }
    }
  }

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

      /* ==== inner ==== */
      .sp-nav-inner {
        position: relative;
        max-block-size: 100dvh;
        background-image: linear-gradient(to bottom, #1990bc, #4ae296);
        backdrop-filter: blur(5px);

        .body {
          color: #fff;
          block-size: 100dvh;
          padding-block: calc((100 / 390) * 135 * 1vw) calc((100 / 390) * 40 * 1vw);
          padding-inline: calc((100 / 390) * 53 * 1vw);
          overflow-y: scroll;

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

            & > ul {
              display: block grid;
              grid-template-columns: repeat(2, calc((100 / 390) * 100 * 1vw));
              justify-content: center;
              column-gap: calc((100 / 390) * 56 * 1vw);
              row-gap: calc((100 / 390) * 56 * 1vw);
              font-size: calc((100 / 390) * 16 * 1vw);
              color: #fff;

              & li {
                .u-hover {
                  position: relative;
                  display: block grid;
                  inline-size: 100%;
                  block-size: inherit;

                  &::before {
                    content: '';
                    background-color: #fff;
                    inline-size: calc((100 / 390) * 6 * 1vw);
                    aspect-ratio: 1/1;
                    border-radius: calc((100 / 390) * 2 * 1vw);
                    margin-block-end: calc((100 / 390) * 8 * 1vw);
                  }
                  &::after {
                    content: attr(data-text);
                    color: #fff;
                    font-family: var(--title);
                    font-size: calc((100 / 390) * 12 * 1vw);
                    line-height: 1.1;
                    text-align: left;
                    position: absolute;
                    top: calc((100 / 390) * -3 * 1vw);
                    left: calc((100 / 390) * 10 * 1vw);
                  }
                }
              }
            }
          }
        }
        .sub-nav {
          margin-block-start: calc((100 / 390) * 102 * 1vw);

          .unit {
            inline-size: fit-content;
            background-color: #fff;
            margin-inline: auto;

            .u-hover {
              display: block grid;
              place-content: center;
              padding: calc((100 / 390) * 12 * 1vw);
              inline-size: 100%;
              block-size: 100%;

              & img {
                inline-size: calc((100 / 390) * 160 * 1vw);
                block-size: calc((100 / 390) * 20 * 1vw);
              }
            }
          }
          & > ul {
            display: block flex;
            justify-content: center;
            gap: calc((100 / 390) * 32 * 1vw);
            font-size: calc((100 / 390) * 11 * 1vw);
            color: #fff;
            margin-block-start: calc((100 / 390) * 26 * 1vw);
          }
        }
      }
    }
  }
}