@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: 0;
      right: 0;
      background: linear-gradient(78.71deg, #003a13 50.95%, #459e00 152.95%);
      inline-size: calc((100 / 390) * 60 * 1vw);
      block-size: calc((100 / 390) * 60 * 1vw);
      z-index: 220;

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

          &:nth-of-type(1) {
            top: calc((100 / 390) * 18 * 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) * 18 * 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) * 11 * 1vw)) rotate(-45deg);
        transform: translateY(calc((100 / 390) * 11 * 1vw)) translateX(-50%) rotate(-45deg);
      }
      & span:nth-of-type(2) {
        opacity: 0;
      }
      & span:nth-of-type(3) {
        -webkit-transform: translateY(calc((100 / 390) * -11 * 1vw)) rotate(45deg);
        transform: translateY(calc((100 / 390) * -11 * 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: linear-gradient(255.87deg, rgba(210, 210, 0, 0.92) -8.93%, rgba(0, 118, 53, 0.92) 37.32%, rgba(24, 86, 42, 0.92) 83.58%);
        backdrop-filter: blur(5px);

        .body {
          color: #fff;
          block-size: 100dvh;
          padding-block: calc((100 / 390) * 123 * 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 {
              text-align: center;
              display: block grid;
              grid-template-columns: repeat(2, calc((100 / 390) * 100 * 1vw));
              column-gap: calc((100 / 390) * 56 * 1vw);
              row-gap: calc((100 / 390) * 52 * 1vw);
              justify-content: center;
              font-size: calc((100 / 390) * 16 * 1vw);
              font-weight: 500;
              color: #fff;

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

                  &::before {
                    content: attr(data-text);
                    color: #fff;
                    font-size: calc((100 / 390) * 13 * 1vw);
                    font-weight: 500;
                    line-height: 1.2;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
        .sub-nav {
          margin-block-start: calc((100 / 390) * 100 * 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) * 48 * 1vw);
            font-size: calc((100 / 390) * 11 * 1vw);
            color: #fff;
            margin-block-start: calc((100 / 390) * 26 * 1vw);
          }
        }
      }
    }
  }
}