.nav-icon {
  width:58px;
  height:54px;
  flex:none;
  filter:drop-shadow(1px 2px 1px #000)
}

.nav-icon svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none
}

.nav-icon__metal {
  stroke:#fff0bb;
  stroke-width:.65
}

.nav-icon__shine {
  fill:none;
  stroke:#fff8dc;
  stroke-width:2;
  stroke-linecap:round;
  opacity:.8
}

.nav-icon__cup,
.nav-icon__gift-lid,
.nav-icon__growth-arrow,
.nav-icon__wheel-disc {
  transform-box:view-box
}

.nav-icon__cup {
  transform-origin:50% 70.3125%
}

.nav-icon__gift-lid {
  transform-origin:50% 42.1875%
}

.nav-icon__growth-arrow {
  transform-origin:50% 50%
}

.nav-icon__wheel-disc {
  transform-origin:50% 48.4375%
}

@keyframes nav-icon-wiggle {
  25% {
    transform:rotate(-4deg)
  }

  75% {
    transform:rotate(4deg)
  }
}

@keyframes nav-icon-lid {
  40% {
    transform:translateY(-4px) rotate(-6deg)
  }
}

@keyframes nav-icon-arrow {
  40% {
    transform:translateY(-3px)
  }
}

@keyframes nav-icon-spin {
  45% {
    transform:rotate(45deg)
  }
}

@media (hover:hover) and (pointer:fine) {
  .nav-item:hover .nav-icon__cup {
    animation:nav-icon-wiggle .5s ease-in-out
  }

  .nav-item:hover .nav-icon__gift-lid {
    animation:nav-icon-lid .5s ease-in-out
  }

  .nav-item:hover .nav-icon__growth-arrow {
    animation:nav-icon-arrow .4s ease-out
  }

  .nav-item:hover .nav-icon__wheel-disc {
    animation:nav-icon-spin .55s ease-in-out
  }
}

.nav-item:focus-visible .nav-icon__cup {
  animation:nav-icon-wiggle .5s ease-in-out
}

.nav-item:focus-visible .nav-icon__gift-lid {
  animation:nav-icon-lid .5s ease-in-out
}

.nav-item:focus-visible .nav-icon__growth-arrow {
  animation:nav-icon-arrow .4s ease-out
}

.nav-item:focus-visible .nav-icon__wheel-disc {
  animation:nav-icon-spin .55s ease-in-out
}

@font-face {
  font-family:'Noto Sans JP Nav';
  src:url('./assets/noto-sans-jp-nav.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

.nav-item[aria-current="page"] { background:linear-gradient(#e4b66820,#e4b66808); box-shadow:inset 0 -3px #edc580; }
.nav-item:focus-visible { outline:2px solid #ffe3a0; outline-offset:-5px; }
.navigation-page .navigation {
  box-sizing:border-box;
  position:relative;
  left:auto;
  top:auto;
  width:calc(100% - 32px);
  max-width:1152px;
  height:auto;
  min-height:156px;
  margin:24px auto;
  border-radius:14px;
  border:1px solid #a07a40;
  box-shadow:inset 0 0 0 2px #edc58018,0 3px 12px #0008;
  background:linear-gradient(110deg,#0d0c08,#090a07 52%,#100e09);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:visible
}
.navigation-page .nav-item {
  position:relative;
  padding:12px 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:0;
  background:none;
  color:#edc580;
  transition:background .2s
}
.navigation-page a.nav-item {
  text-decoration:none;
  color:#edc580;
  cursor:pointer;
  font:inherit
}
.navigation-page .nav-item+.nav-item:before {
  content:'';
  position:absolute;
  left:0;
  top:15%;
  height:70%;
  width:1px;
  background:linear-gradient(#8b6632,#bd914f,#654820)
}
.navigation-page .nav-item:first-child { border-radius:14px 0 0 14px }
.navigation-page .nav-item:last-child { border-radius:0 14px 14px 0 }
.navigation-page .nav-item:hover { background:#e4b6680d }
.navigation-page .nav-item:active { transform:scale(.98) }
.navigation-page .nav-title {
  font-size:clamp(17px,2.15vw,28px);
  font-weight:700;
  line-height:36px;
  white-space:nowrap;
  letter-spacing:-.5px
}
.navigation-page .nav-description {
  width:100%;
  font-size:15px;
  line-height:16px;
  font-weight:400;
  text-align:center;
  font-family:'Noto Sans JP Nav',Meiryo,'Yu Gothic',sans-serif
}
@media(max-width:700px) {
 .navigation-page .navigation { position:static; width:calc(100% - 24px); height:auto; margin:24px auto; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .navigation-page .nav-item { min-height:137px; padding:12px 2px; border-radius:0; }
 .navigation-page .nav-item+.nav-item:before { display:none; }
 .navigation-page .nav-item:nth-child(even) { border-left:1px solid #75562f; }
 .navigation-page .nav-item:nth-child(n+3) { border-top:1px solid #75562f; }
 .navigation-page .nav-title { font-size:clamp(15px,4.1vw,23px); line-height:32px; }
 .navigation-page .nav-description { font-size:12px; line-height:16px; }
}
@media(prefers-reduced-motion:reduce) { .navigation * { animation:none!important; transition:none!important; } }