@charset "UTF-8";

/* =====================
  Custom Property
===================== */
:root {
  /* debug */
  --debug: false;

  /* color */
  --black: #000;
  --primary: #0a5791;
  --secondary: #7fb3d6;
  --bg: #ebf2f7;

  /* font */
  --yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
  --yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
  --sanserif: 'Noto Sans JP', sans-serif;
  --oswald: 'Oswald', monospace;

  /* icon */
  --icon-mail: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M2.89286 0C2.12562 0 1.38981 0.301704 0.847298 0.83874C0.304782 1.37578 0 2.10415 0 2.86364V11.1364C0 11.8958 0.304782 12.6242 0.847298 13.1613C1.38981 13.6983 2.12562 14 2.89286 14H15.1071C15.8744 14 16.6102 13.6983 17.1527 13.1613C17.6952 12.6242 18 11.8958 18 11.1364V2.86364C18 2.10415 17.6952 1.37578 17.1527 0.83874C16.6102 0.301704 15.8744 0 15.1071 0H2.89286ZM16.7143 3.43827L9 7.54982L1.28571 3.43827V2.86364C1.28571 2.4417 1.45504 2.03705 1.75644 1.73869C2.05783 1.44034 2.46662 1.27273 2.89286 1.27273H15.1071C15.5334 1.27273 15.9422 1.44034 16.2436 1.73869C16.545 2.03705 16.7143 2.4417 16.7143 2.86364V3.43827ZM1.28571 4.88345L8.69529 8.83336C8.78894 8.88327 8.89364 8.90939 9 8.90939C9.10636 8.90939 9.21106 8.88327 9.30472 8.83336L16.7143 4.88345V11.1364C16.7143 11.5583 16.545 11.963 16.2436 12.2613C15.9422 12.5597 15.5334 12.7273 15.1071 12.7273H2.89286C2.46662 12.7273 2.05783 12.5597 1.75644 12.2613C1.45504 11.963 1.28571 11.5583 1.28571 11.1364V4.88345Z" fill="currentColor"/></svg>');
  --icon-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="7" viewBox="0 0 23 7" fill="none"> <path d="M23 7H0V6H14V0L23 7Z" fill="currentColor"/> </svg>');
  --icon-cross: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none"><path d="M18.8574 16.7363L35.3555 0.238281L37.4766 2.35938L20.9785 18.8574L37.4766 35.3555L35.3555 37.4766L18.8574 20.9785L2.12109 37.7148L0 35.5938L16.7363 18.8574L0 2.12109L2.12109 0L18.8574 16.7363Z" fill="currentColor"/></svg>');
  --icon-totop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none"> <path d="M9.40917 6.19313C9.78546 5.91704 10.3089 5.93703 10.6641 6.2527L19.6641 14.2527L19.7373 14.324C20.0803 14.6973 20.0911 15.2768 19.7471 15.6638C19.403 16.0509 18.826 16.1082 18.415 15.8113L18.3359 15.7468L9.99999 8.33668L1.66405 15.7468C1.25127 16.1138 0.619838 16.0766 0.252921 15.6638C-0.113997 15.251 -0.0768524 14.6196 0.335929 14.2527L9.33593 6.2527L9.40917 6.19313Z" fill="currentColor"/> <path d="M19 0C19.5523 0 20 0.447715 20 1C20 1.55228 19.5523 2 19 2H1C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H19Z" fill="currentColor"/> </svg>');
  --icon-drawer: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="15" viewBox="0 0 30 15" fill="none"> <path d="M30 0V1H0V0H30Z" fill="white"/> <path d="M20 8.5V7.5H0V8.5H20Z" fill="white"/> <path d="M13.5303 14V15H0V14H13.5303Z" fill="white"/> </svg>');
  --icon-home: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"> <path d="M12.7309 6.40169L6.82435 0.631418C6.78182 0.589759 6.73131 0.556708 6.6757 0.534158C6.62009 0.511607 6.56047 0.5 6.50027 0.5C6.44006 0.5 6.38045 0.511607 6.32484 0.534158C6.26923 0.556708 6.21872 0.589759 6.17619 0.631418L0.26959 6.40169C0.0975112 6.56991 0 6.79843 0 7.03675C0 7.53163 0.411555 7.93397 0.917752 7.93397H1.5401V12.0514C1.5401 12.2995 1.74516 12.5 1.99898 12.5H5.58252V9.35972H7.18858V12.5H11.0016C11.2554 12.5 11.4604 12.2995 11.4604 12.0514V7.93397H12.0828C12.3266 7.93397 12.5603 7.84005 12.7324 7.67041C13.0894 7.31994 13.0894 6.75216 12.7309 6.40169Z" fill="currentColor"/> </svg>');
  --icon-breadcrumb: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none"><path d="M0.23999 5.70005V4.74005L3.07199 3.69605L4.87199 3.02405V2.97605L3.07199 2.30405L0.23999 1.24805V0.300049L5.99999 2.56805V3.43205L0.23999 5.70005Z" fill="black"/></svg>');
  --icon-blank: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"> <path d="M13 10.1211H10.0947V13H0V2.87891H2.90527V0H13V10.1211ZM1.2041 4.15234V11.7139H8.90234V10.1211H2.90527V4.15234H1.2041ZM4.09766 8.84766L4.10938 8.83496H11.8076V1.28711H4.09766V8.84766Z" fill="currentColor"/> </svg>');
  --icon-plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"> <path d="M20 2.50006V37.5001M2.5 20.0001H37.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/> </svg>');
  --icon-zoom: url('data:image/svg+xml,<svg height="200" width="200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5.75a.75.75 0 0 1 .75.75v3.25h3.25a.75.75 0 0 1 0 1.5h-3.25v3.25a.75.75 0 0 1-1.5 0v-3.25H6.5a.75.75 0 0 1 0-1.5h3.25V6.5a.75.75 0 0 1 .75-.75Z" fill="currentColor"/><path d="M0 10.5C0 4.701 4.701 0 10.5 0S21 4.701 21 10.5c0 2.63-.967 5.033-2.564 6.875l4.344 4.345a.749.749 0 1 1-1.06 1.06l-4.345-4.344A10.459 10.459 0 0 1 10.5 21C4.701 21 0 16.299 0 10.5Zm10.5-9a9 9 0 0 0-9 9a9 9 0 0 0 9 9a9 9 0 0 0 9-9a9 9 0 0 0-9-9Z" fill="currentColor"/></svg>');

  /* ease */
  --slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
  --easeOutBounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* =====================
  container context
===================== */
@container style(--debug:true) {
  * {
    outline: 1px solid tomato;

    &:focus {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
  }
}

/* =====================
  animation
===================== */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@layer style {
  /* =====================
    common
  ===================== */
  html,
  body {
    font-family: var(--sanserif);
    font-size: 16px;
    line-height: 1.8;
    color: var(--black);

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 14 * 1vw);
    }
  }

  body {
    @media (width > 768px) {
      min-inline-size: 1440px;
    }
  }

  @media (width > 768px) {
    .sp {
      display: none;
    }
  }

  @media (width <= 768px) {
    .pc {
      display: none;
    }
  }

  /* p */
  :where(p, li, dt, dd, th, td) {
    line-height: 1.8;
  }

  /* =====================
    header
  ===================== */
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    padding-block: 40px;
    padding-inline: 40px;
    color: white;
    pointer-events: none;
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      display: block flex;
      padding-block: calc((100 / 390) * 16 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    /* ==== logo ==== */
    .logo {
      inline-size: fit-content;
      pointer-events: auto;
      transition: all 250ms ease 0s;

      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 70 * 1vw);
      }
    }

    .logo-mark {
      fill: #fff;
    }

    /* ==== nav ==== */
    .nav {
      display: block flex;
      font-weight: 700;
      pointer-events: auto;

      @media (width <= 768px) {
        display: none;
      }

      & ul {
        display: block flex;
        gap: 30px;
        block-size: fit-content;
        margin-inline-end: 29px;
        font-size: 15px;

        & a {
          display: block grid;
          padding-block: 13px;
        }
      }
    }

    /* ==== contact ==== */
    .contact {
      & a {
        display: block flex;
        gap: 6px;
        align-items: center;
        justify-content: center;
        padding-block: 13px;
        padding-inline: 30px;
        font-size: 15px;
        font-weight: 500;
        background: #3c3c3c;
        border-radius: 6px;
        transition: background 250ms ease 0s;
        will-change: background;

        @media (any-hover: hover) {
          &:hover {
            background: var(--primary);
          }
        }

        @media (width <= 768px) {
          gap: calc((100 / 390) * 6 * 1vw);
          padding-block: calc((100 / 390) * 10 * 1vw);
          padding-inline: calc((100 / 390) * 30 * 1vw);
          font-size: calc((100 / 390) * 15 * 1vw);
        }

        &::before {
          inline-size: 18px;
          aspect-ratio: 18 / 14;
          content: '';
          background-color: currentcolor;
          mask-image: var(--icon-mail);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
        }
      }
    }
  }

  body:not([data-page='top']) {
    .header {
      & ul {
        color: var(--black);
      }

      .logo-mark {
        fill: var(--primary);
      }
    }
  }

  .header-color {
    .header {
      padding-block: 20px;
      background-color: color-mix(in srgb, var(--primary) 70%, transparent);

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 16 * 1vw);
      }

      .logo {
        inline-size: 60px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 40 * 1vw);
        }
      }
    }

    &:not([data-page='top']) {
      .header {
        & ul {
          color: white;
        }

        .logo-mark {
          fill: white;
        }
      }
    }
  }

  /* =====================
    aside
  ===================== */
  .aside {
    display: block grid;
    grid-template-columns: auto 1fr auto;
    gap: 102px;
    align-items: center;
    justify-content: flex-start;
    padding-block: 47px 45px;
    padding-inline: 160px;
    color: white;
    background-image: url('../img/_common/footer-bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width > 1900px) {
      background-image: url('../img/_common/footer-bg_l.webp');
    }

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 27.6 * 1vw);
      align-items: flex-start;
      justify-content: flex-start;
      padding-block: calc((100 / 390) * 51 * 1vw) 60px;
      padding-inline: calc((100 / 390) * 16 * 1vw);
      background-image: url('../img/_common/footer-bg_sp.webp');
    }

    /* ==== hgroup ==== */
    & hgroup {
      display: block grid;
      gap: 8px;

      @media (width <= 768px) {
        gap: 1.4vw;
      }

      & [lang='en'] {
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--oswald);
        font-size: 70px;
        font-weight: 600;
        line-height: 1;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 60 * 1vw);
        }
      }

      & .title {
        font-family: var(--yumin);
        font-weight: 600;
        letter-spacing: 1.6px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 16 * 1vw);
          letter-spacing: calc((100 / 390) * 1.6 * 1vw);
        }
      }
    }

    /* ==== description ==== */
    & .description {
      max-inline-size: 440px;
      line-height: 2.12;
      translate: 0 4px;

      @media (width <= 768px) {
        max-inline-size: 100%;
        line-height: 2.42;
        translate: 0 0;
      }
    }

    /* ==== anchor ==== */
    .anchor {
      display: block grid;
      place-content: center;
      inline-size: 90px;
      aspect-ratio: 1 / 1;
      color: var(--primary);
      background: white;
      border-radius: calc(infinity * 1px);
      translate: 0 4px;

      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 90 * 1vw);
        margin-inline: auto;
        translate: 0 0;
      }

      &::before {
        display: block flow;
        inline-size: 21px;
        aspect-ratio: 21 / 16.5;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-mail);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }

      @media (width <= 768px) {
        &::before {
          inline-size: calc((100 / 390) * 21 * 1vw);
        }
      }
    }
  }

  /* =====================
    footer
  ===================== */
  .footer {
    padding-block: 80px 25px;
    padding-inline: 80px;

    @media (width <= 768px) {
      padding-block: 14vw 4vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    /* ==== inner ==== */
    .inner {
      display: block grid;
      gap: 31px 0;
      justify-content: space-between;
      padding-block-end: 69px;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: 0;
        padding-block-end: 0;
      }

      /* ==== nav ==== */
      .nav {
        display: block grid;
        grid-area: 1 / 2 / 2 / 3;
        gap: 23px;
        align-self: flex-start;

        @media (width <= 768px) {
          display: block flex;
          flex-direction: column;
          gap: 6vw;
          align-self: flex-start;
        }

        .main-nav {
          display: block grid;
          gap: 30px;
          align-items: center;
          justify-content: flex-start;
          font-weight: 700;

          @media (width > 768px) {
            grid-auto-flow: column;
          }

          @media (width <= 768px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 0 * 1vw);
            padding-inline: 4vw;
            font-size: calc((100 / 390) * 16 * 1vw);

            & a {
              display: block grid;
              padding-block: calc((100 / 390) * 6 * 1vw);
            }
          }
        }

        .sub-nav {
          display: block flex;
          gap: 30px;
          inline-size: fit-content;
          padding-block: 10px;
          padding-inline: 24px;
          font-size: 14px;
          font-weight: 500;
          color: var(--primary);
          background: #f2f2f2;
          border-radius: 10px;

          @media (width <= 768px) {
            flex-wrap: wrap;
            gap: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 50 * 1vw);
            justify-content: center;
            padding-block: 5.3vw;
            padding-inline: calc((100 / 390) * 16 * 1vw);
            font-size: calc((100 / 390) * 14 * 1vw);
            border-radius: calc((100 / 390) * 10 * 1vw);
          }
        }
      }

      /* ==== logo ==== */
      .logo {
        grid-area: 1 / 1 / 2 / 2;
        margin-inline: auto;
        fill: var(--primary);
        translate: 2px 0;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 88 * 1vw);
          margin-block-start: calc((100 / 390) * 58 * 1vw);
          translate: 0;
        }
      }

      /* ==== address ==== */
      .address {
        grid-area: 2 / 1 / 3 / 2;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.84;

        @media (width <= 768px) {
          inline-size: fit-content;
          margin-block-start: calc((100 / 390) * 21 * 1vw);
          margin-inline: auto;
          font-size: calc((100 / 390) * 13 * 1vw);

          & a[href^='tel:'] {
            color: var(--primary);
            text-decoration: underline;
          }
        }
      }
    }

    /* ==== sub ==== */
    .sub {
      display: block flex;
      align-items: flex-end;
      justify-content: space-between;

      @media (width <= 768px) {
        position: relative;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-block-end: 24.7vw;
        margin-block-start: 12vw;
      }

      .unit {
        display: block flex;
        gap: 50px;
        align-items: flex-end;
        justify-content: flex-end;
        padding-inline-end: 10px;

        @media (width <= 768px) {
          position: relative;
          flex-direction: column;
          gap: calc((100 / 390) * 30 * 1vw);
          align-items: center;
          justify-content: center;
          padding-inline-end: 0;
        }
      }

      .sdgs {
        @media (width > 768px) {
          max-inline-size: 144px;
        }

        @media (width <= 768px) {
          display: block flow;
          inline-size: calc((100 / 390) * 144 * 1vw);
          cursor: pointer;

          &:hover {
            background: color-mix(in srgb, black 10%, transparent 100%);
          }
        }
      }

      & ul {
        display: block flex;
        gap: 30px;
        font-size: 12px;
        font-weight: 400;
        color: #666;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 30 * 1vw);
          font-size: calc((100 / 390) * 12 * 1vw);
        }
      }
    }

    /* ==== small ==== */
    & small {
      font-size: 12px;
      font-weight: 400;
      color: #888;
      translate: -41px 0;

      @media (width <= 768px) {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: calc((100 / 390) * 0 * 1vw);
        font-size: calc((100 / 390) * 12 * 1vw);
        translate: unset;
      }
    }
  }

  /* =====================
    to-top
  ===================== */
  .to-top {
    position: fixed;
    inset-block-end: 0;
    inset-inline-end: 0;
    z-index: 20;
    display: block grid;
    place-content: center;
    inline-size: 50px;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    background: var(--primary);
    border-radius: 8px 0 0;
    opacity: 0;
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      inline-size: calc((100 / 390) * 50 * 1vw);
      border-radius: calc((100 / 390) * 8 * 1vw) 0 0;
    }

    &::before {
      inline-size: 20px;
      aspect-ratio: 20 / 16;
      content: '';
      background-color: white;
      mask-image: var(--icon-totop);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    @media (width <= 768px) {
      &::before {
        inline-size: calc((100 / 390) * 20 * 1vw);
      }
    }
  }

  .header-color .to-top {
    pointer-events: auto;
    opacity: 1;
  }

  /* =====================
    sp-menu
  ===================== */
  .sp-menu {
    position: fixed;
    inset-block-start: calc((100 / 390) * 16 * 1vw);
    inset-inline-end: calc((100 / 390) * 16 * 1vw);
    z-index: 20;
    display: none;
    place-content: center;
    inline-size: calc((100 / 390) * 56 * 1vw);
    padding-block: 2.8vw;
    background: #3c3c3c;
    border-radius: 6px;

    &::before {
      inline-size: calc((100 / 390) * 30 * 1vw);
      aspect-ratio: 30 / 14;
      content: '';
      background-color: white;
      mask-image: var(--icon-drawer);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    @media (width <= 768px) {
      display: block grid;
    }
  }

  .menu-on .sp-menu {
    &::before {
      mask-image: var(--icon-cross);
      scale: 1.8 1;
    }
  }

  /* =====================
    sp-nav
  ===================== */
  .sp-nav {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: none;
    translate: 100% 0;
    transition: all 350ms var(--easeOutExpo) 0s;

    /* ==== wrapper ==== */
    .wrapper {
      position: relative;
    }

    /* ==== inner ==== */
    .inner {
      position: relative;
      max-block-size: 100dvh;
      padding-block: calc((100 / 750) * 218 * 1vw) calc((100 / 750) * 54 * 1vw);
      padding-inline: calc((100 / 750) * 64 * 1vw);
      overflow-y: auto;
      color: white;
      background: var(--primary);

      /* ==== global-nav ==== */
      .global-nav {
        display: block grid;
        gap: 0;

        & li a {
          position: relative;
          display: block grid;
          grid-template-columns: 1fr auto;
          padding-block: 3.4vw;
          padding-inline: 2.3vw 2.8vw;
          font-size: calc((100 / 390) * 16 * 1vw);
          font-weight: 500;
          border-block-end: 1px solid color-mix(in srgb, white 20%, transparent);

          &::before {
            position: absolute;
            inset-block-start: 51%;
            inset-inline-end: 6.2vw;
            z-index: 12;
            inline-size: calc((100 / 390) * 23 * 1vw);
            aspect-ratio: 23 / 7;
            content: '';
            background-color: white;
            mask-image: var(--icon-arrow);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            translate: 0 -50%;
          }
        }

        & li:last-child a {
          border-block-end-color: transparent;
        }
      }

      /* ==== sub-nav ==== */
      .sub-nav {
        display: block flex;
        flex-wrap: wrap;
        gap: calc((100 / 390) * 17 * 1vw) calc((100 / 390) * 50 * 1vw);
        justify-content: center;
        padding-block: 5.3vw;
        padding-inline: calc((100 / 390) * 19 * 1vw);
        margin-block-start: 4vw;
        font-size: calc((100 / 390) * 14 * 1vw);
        font-weight: 600;
        color: var(--primary);
        background: #f2f2f2;
        border-radius: calc((100 / 390) * 10 * 1vw);

        & li {
          margin-block: calc((1em - 1lh) / 2);
        }
      }

      /* ==== other-nav ==== */
      .other-nav {
        display: block flex;
        gap: calc((100 / 390) * 30 * 1vw);
        justify-content: center;
        margin-block-start: calc((100 / 390) * 30 * 1vw);
        font-size: calc((100 / 390) * 12 * 1vw);
      }
    }

    @media (width <= 768px) {
      display: block;
    }
  }

  /* Menu on */
  .menu-on .sp-nav {
    pointer-events: auto;
    translate: 0 0;
  }
}