@charset "UTF-8";

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

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

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

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

      /* ==== inner ==== */
      .sp-nav-inner {
        background-color: rgba(18, 18, 18, 0.5);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);

        .sp-menu-head {
          position: relative;
          inline-size: 100%;
          min-height: calc((100 / 390) * 80 * 1vw);
          background-color: #fff;
          top: 0;
          left: 0;
        }

        .body {
          position: relative;
          margin-inline: auto 0;
          inline-size: calc((100 / 390) * 303 * 1vw);
          color: #fff;
          padding-block: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 32 * 1vw);
          background: linear-gradient(305.03deg, #102647 58.91%, #2b7996 93.69%);
          block-size: calc(100vh - var(--_header-height));
          overflow-y: auto;

          .main-nav {
            display: block grid;

            & ul {
              & li {
                border-block-start: 1px solid #b7b7b7;

                &:last-child {
                  border-block-end: 1px solid #b7b7b7;
                }

                .u-hover {
                  display: block flow;
                  font-size: calc((100 / 390) * 15 * 1vw);
                  font-weight: 500;
                  line-height: 1.4;
                  color: #fff;
                  padding-block: calc((100 / 390) * 15.4 * 1vw);
                  padding-inline: calc((100 / 390) * 16 * 1vw);

                  &::before {
                    content: attr(data-text);
                    display: block flow;
                    font-family: var(--serif);
                    font-size: calc((100 / 390) * 13 * 1vw);
                    font-weight: 500;
                    line-height: 1.4;
                    color: #acacac;
                  }
                }
              }
            }
          }

          .sub-nav {
            margin-inline-start: calc((100 / 390) * 9 * 1vw);
            margin-block-start: calc((100 / 390) * 36 * 1vw);

            & ul {
              display: block flex;
              justify-content: space-between;

              & li {
                .u-hover {
                  font-size: calc((100 / 390) * 12 * 1vw);
                  color: #797979;
                }
              }
            }
          }
        }
      }
    }
  }

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