:root { --section-y: 8.5rem; --wrap-pad: 20px; }
  .drawer-photo { display: block; }
  .gallery-grid { gap: 20px; }

@media (min-width: 1024px) {
    .hero {
      min-height: 95svh;
      padding: 20px;
    }

    .hero .slideshow { inset: 20px; }

    .hero::before {
      top: 20px;
      left: 20px;
      width: 28vw;
      max-width: 430px;
      height: 270px;
    }

    .site-header--overlay {
      height: 300px;
      padding: 0;
      pointer-events: none;
    }

    .site-header--overlay .logo {
      position: absolute;
      top: 44px;
      left: 46px;
      z-index: 2;
      font-size: 1rem;
      pointer-events: auto;
    }

    .site-header--overlay .head-nav {
      display: block;
      pointer-events: none;
    }

    .site-header--overlay .head-nav > nav {
      position: absolute;
      top: 44px;
      left: 126px;
      pointer-events: auto;
    }

    .site-header--overlay .nav {
      align-items: flex-start;
      gap: calc(.7rem + 3px);
      color: var(--color-fg-strong);
      font-family: var(--font-jp);
      font-size: calc(.7rem + 1px);
      letter-spacing: .16em;
    }

    .site-header--overlay .nav a {
      min-height: 104px;
      padding: 0;
      writing-mode: vertical-rl;
      text-orientation: upright;
    }

    html[lang="en"] .site-header--overlay .head-nav > nav {
      top: 94px;
      left: 126px;
    }

    html[lang="en"] .site-header--overlay .nav {
      max-width: 205px;
      flex-wrap: wrap;
      gap: calc(.55rem + 3px) calc(.75rem + 3px);
      font-size: calc(.64rem + 1px);
    }

    html[lang="en"] .site-header--overlay .nav a {
      min-height: 0;
      writing-mode: horizontal-tb;
    }

    .site-header--overlay .head-nav .sns {
      position: fixed;
      top: 91px;
      right: 132px;
      color: var(--color-fg-invert);
      pointer-events: auto;
    }

    .site-header--overlay .head-nav .lang-switch {
      position: fixed;
      top: 91px;
      right: 32px;
      color: var(--color-fg-invert);
      pointer-events: auto;
    }

    .site-header--overlay .lang-toggle { color: inherit; }

    .site-header--overlay .header-fix {
      position: fixed;
      top: 36px;
      right: 32px;
      margin-left: 0;
      pointer-events: auto;
    }

    .site-header--overlay .header-fix .btn {
      display: inline-flex;
      min-height: 42px;
      padding-inline: 1.3rem;
    }

    .site-header--overlay .hamburger { display: none; }

    body.is-scrolled .site-header--overlay {
      height: 122px;
      min-height: 122px;
      padding: 1.4rem 2rem;
      align-items: center;
      color: var(--color-fg-invert);
      pointer-events: auto;
    }

    body.is-scrolled .site-header--overlay .logo { display: none; }

    body.is-scrolled .site-header--overlay .head-nav {
      position: static;
      display: flex;
      align-items: center;
      gap: 1.15rem;
      pointer-events: auto;
    }

    body.is-scrolled .site-header--overlay .head-nav > nav,
    body.is-scrolled .site-header--overlay .head-nav .sns,
    body.is-scrolled .site-header--overlay .head-nav .lang-switch,
    body.is-scrolled .site-header--overlay .header-fix {
      position: static;
    }

    body.is-scrolled .site-header--overlay .nav {
      max-width: none;
      flex-wrap: nowrap;
      align-items: center;
      gap: clamp(.85rem, 1.7vw, 1.8rem);
      color: var(--color-fg-invert);
      font-size: clamp(.66rem, .8vw, .78rem);
    }

    body.is-scrolled .site-header--overlay .nav a {
      min-height: 0;
      padding-block: .3em;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      white-space: nowrap;
    }

    body.is-scrolled .site-header--overlay .header-fix { margin-left: auto; }

    .hero-body {
      position: absolute;
      right: 4rem;
      bottom: 4rem;
      max-width: 42rem;
      padding: 0;
    }

    .hero-ttl {
      writing-mode: horizontal-tb;
      text-orientation: mixed;
    }

    #top .wrap,
    #seats .wrap {
      grid-template-columns: .86fr 1.14fr;
      align-items: center;
      gap: 2.5rem 5.5rem;
    }

    #top .collage {
      grid-column: 2;
      grid-row: 1 / span 3;
    }

    #top .sec-ttl,
    #top .wrap > p { grid-column: 1; }

    #seats .collage {
      grid-column: 1;
      grid-row: 1 / span 4;
    }

    #seats .sec-ttl,
    #seats .wrap > p,
    #seats .btn-pair { grid-column: 2; }
}

main p { max-width: 45em; }
main .txt-center > p,
main p.txt-center { margin-inline: auto; }

@media (min-width: 1024px) {
  .site-header--overlay .logo-img { height: 40px; }

  .site-header--overlay .head-nav > nav { top: 108px; left: 46px; }

  html[lang="en"] .site-header--overlay .head-nav > nav { top: 108px; left: 46px; }
  html[lang="en"] .site-header--overlay .nav { max-width: 160px; }
}