.mobile-nav { display: none; }
@media (max-width: 700px) {
  body.menu-open { overflow: hidden; }
  .mobile-nav {
    position: fixed;
    z-index: 3;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 111px 9vw 34px;
    background: rgba(12, 12, 12, .98);
    color: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s ease, visibility .35s;
  }
  body.menu-open .mobile-nav { transform: translateX(0); visibility: visible; }
  .mobile-nav > p { margin: 0 0 24px; color: #e1a932; font: 10px 'DM Mono', monospace; letter-spacing: 2px; }
  .mobile-nav a { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .25); color: inherit; text-decoration: none; font: 600 20px Montserrat, sans-serif; letter-spacing: .8px; }
  .mobile-nav a span { display: inline-block; width: 43px; color: #e1a932; font: 10px 'DM Mono', monospace; letter-spacing: 0; }
  .mobile-nav .mobile-reserve { margin-top: auto; padding: 19px 18px; display: flex; justify-content: space-between; background: #e1a932; border: 0; color: #111; font: 600 13px 'Noto Sans JP', sans-serif; }
  .mobile-reserve b { font-size: 21px; }
  .menu { position: relative; z-index: 5; }
  body.menu-open .menu i:first-child { transform: translateY(3px) rotate(45deg); }
  body.menu-open .menu i:last-child { transform: translateY(-3px) rotate(-45deg); }
}