/* Full-screen navigation for index_v1007. */
.site-menu-trigger {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(44px, calc(60 * var(--u)), 60px);
  min-height: 44px;
  margin-left: calc(24 * var(--u));
  padding: 0;
  color: var(--ink);
}
.site-menu-trigger:hover { opacity: 1; }
.site-menu-trigger__lines {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  width: calc(42 * var(--u));
  height: calc(24 * var(--u));
}
.site-menu-trigger__lines i {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: width .3s ease;
}
.site-menu-trigger__lines i:nth-child(2) { align-self: flex-end; width: 70%; }
.site-menu-trigger:hover .site-menu-trigger__lines i:nth-child(2),
.site-menu-trigger:focus-visible .site-menu-trigger__lines i:nth-child(2) { width: 100%; }

html.site-menu-open { overflow: hidden; }
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(219, 219, 219, .72);
  backdrop-filter: blur(24px);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.site-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .45s ease, visibility 0s;
}
.site-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1840px;
  min-height: 100dvh;
  margin-inline: auto;
  padding: calc(42 * var(--u)) var(--pad) max(96px, calc(130 * var(--u)));
}
.site-menu__top,
.site-menu__nav,
.site-menu__bottom { position: relative; }
.site-menu__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.site-menu__logo {
  display: block;
  flex: none;
  width: clamp(180px, calc(310 * var(--u)), 310px);
}
.site-menu__logo img {
  width: 100%;
  height: auto;
}
.site-menu__close {
  position: relative;
  flex: none;
  width: clamp(44px, calc(62 * var(--u)), 62px);
  height: clamp(44px, calc(62 * var(--u)), 62px);
  padding: 0;
  background: var(--ink);
  color: #fff;
  transition: background .25s ease;
}
.site-menu__close:hover { background: #e60013; opacity: 1; }
.site-menu__close span::before,
.site-menu__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 1px;
  background: currentColor;
}
.site-menu__close span::before { transform: rotate(45deg); }
.site-menu__close span::after { transform: rotate(-45deg); }

.site-menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(30px, 5vh, 76px);
}
.site-menu__eyebrow {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: clamp(11px, calc(14 * var(--u)), 14px);
  letter-spacing: .12em;
}
.site-menu__eyebrow > span:last-child { margin-left: auto; }
.site-menu__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  column-gap: calc(80 * var(--u));
  margin: calc(22 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.site-menu__list li {
  min-width: 0;
  border-bottom: 1px solid rgba(26, 26, 26, .48);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.site-menu.is-open .site-menu__list li {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--menu-order) * 35ms);
}
.site-menu__list li:nth-child(1) { --menu-order: 0; }
.site-menu__list li:nth-child(2) { --menu-order: 1; }
.site-menu__list li:nth-child(3) { --menu-order: 2; }
.site-menu__list li:nth-child(4) { --menu-order: 3; }
.site-menu__list li:nth-child(5) { --menu-order: 4; }
.site-menu__list li:nth-child(6) { --menu-order: 5; }
.site-menu__list li:nth-child(7) { --menu-order: 6; }
.site-menu__list li:nth-child(8) { --menu-order: 7; }
.site-menu__list a {
  display: grid;
  grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14 * var(--u));
  min-height: clamp(66px, calc(100 * var(--u)), 100px);
  padding: calc(14 * var(--u)) calc(6 * var(--u));
}
.site-menu__list a:hover,
.site-menu__list a:focus-visible { opacity: 1; }
.site-menu__number {
  align-self: start;
  padding-top: .3em;
  font-size: clamp(11px, calc(14 * var(--u)), 14px);
  letter-spacing: .08em;
}
.site-menu__name {
  min-width: 0;
  font-size: clamp(17px, calc(30 * var(--u)), 30px);
  line-height: 1.1;
  letter-spacing: .04em;
  transition: transform .3s ease;
}
.site-menu__name small {
  display: block;
  margin-top: .45em;
  font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
  font-size: clamp(10px, calc(12 * var(--u)), 12px);
  font-weight: 700;
  letter-spacing: .08em;
}
.site-menu__list .one-sided-arrow {
  margin: 0;
  font-size: clamp(16px, calc(20 * var(--u)), 20px);
}
.site-menu__list a:hover .site-menu__name,
.site-menu__list a:focus-visible .site-menu__name { transform: translateX(7px); }
.site-menu__list a:hover .site-menu__number,
.site-menu__list a:hover .one-sided-arrow,
.site-menu__list a:focus-visible .site-menu__number,
.site-menu__list a:focus-visible .one-sided-arrow { color: #e60013; }

.site-menu__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ink);
  padding-top: calc(25 * var(--u));
}
.site-menu__bottom p {
  padding-bottom: calc(8 * var(--u));
  font-size: clamp(10px, calc(14 * var(--u)), 14px);
  letter-spacing: .13em;
}
.site-menu__store {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: clamp(220px, calc(315 * var(--u)), 315px);
  min-height: clamp(48px, calc(62 * var(--u)), 62px);
  padding-inline: clamp(16px, calc(24 * var(--u)), 24px);
  background: var(--ink);
  color: #fff;
  font-size: clamp(13px, calc(18 * var(--u)), 18px);
  letter-spacing: .08em;
}
.site-menu__store:hover,
.site-menu__store:focus-visible { opacity: 1; background: #e60013; }
.site-menu__store .one-sided-arrow { margin: 0; font-size: 1em; }
.site-menu__ticker {
  --fv-u: min(var(--u), calc(100svh * .000925926));
  z-index: 10;
}

@media (max-width: 767px) {
  .site-header > .online-store { display: none; }
  .site-menu-trigger {
    width: max(44px, 12vw);
    min-height: max(44px, 12vw);
    margin-left: auto;
    justify-content: center;
  }
  .site-menu-trigger__lines { width: 9vw; height: 5vw; }
  .site-menu__inner { padding: 6vw 4vw calc(22vw + env(safe-area-inset-bottom)); }
  .site-menu__logo { width: 47vw; max-width: 220px; }
  .site-menu__close { width: 12vw; height: 12vw; }
  .site-menu__nav { padding-block: 8vw; }
  .site-menu__eyebrow { font-size: 2.8vw; }
  .site-menu__list {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin-top: 4vw;
  }
  .site-menu__list a {
    grid-template-columns: 6vw minmax(0, 1fr) auto;
    gap: 3vw;
    min-height: 15vw;
    padding: 2.5vw 1vw;
  }
  .site-menu__number { font-size: 2.5vw; }
  .site-menu__name { font-size: clamp(17px, 4.8vw, 24px); }
  .site-menu__name small { margin-top: .3em; font-size: clamp(10px, 2.5vw, 12px); }
  .site-menu__list .one-sided-arrow { font-size: 3.5vw; }
  .site-menu__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 4vw;
  }
  .site-menu__bottom p { font-size: 2.5vw; }
  .site-menu__store {
    width: 100%;
    min-height: 13vw;
    margin-top: 4vw;
    padding-inline: 5vw;
    font-size: 3.5vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu__list li,
  .site-menu__name,
  .site-menu-trigger__lines i { transition: none; }
}