:root {
  --ink: #17130f;
  --paper: #f6f0e4;
  --paper-deep: #e7ddcc;
  --red: #b03521;
  --red-on-dark: #d7604a;
  --line: rgba(23, 19, 15, 0.2);
  --line-dark: rgba(246, 240, 228, 0.22);
  --shell: 1200px;
  --jp: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --en: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  color: var(--ink);
  scroll-behavior: smooth;
}

html { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  font-family: var(--jp);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.78;
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[lang="en"] {
  font-family: var(--en);
  hyphens: none;
  text-wrap: pretty;
}

a { color: inherit; }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }

.copy p,
.bilingual p {
  overflow-wrap: normal;
  text-wrap: pretty;
}

h1, h2, h3, .catch { text-wrap: balance; }
h1 span, h2 span, h3 span, .catch span, .hero-facts dd span, .tags span, a > span { display: inline-block; }

.shell {
  width: var(--shell);
  max-width: 100%;
  margin-inline: auto;
}

.paper { background: var(--paper); }
.section { position: relative; padding-block: clamp(6rem, 9vw, 10rem); }
.motion { --tx: 0px; --ty: 0px; transform: translate3d(var(--tx), var(--ty), 0); }

.skip {
  position: fixed;
  z-index: 1000;
  inset: 12px auto auto 12px;
  padding: 0.65rem 1rem;
  color: var(--paper);
  background: var(--ink);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--red-on-dark); outline-offset: 4px; }

.progress {
  position: fixed;
  z-index: 900;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  background: rgba(246, 240, 228, 0.14);
}
.progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red-on-dark);
  transform: scaleX(0);
  transform-origin: left;
}

.no-js .js .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

.br-lg { display: none; }

.label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}
.label span {
  display: grid;
  width: 2.2rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--paper);
  background: var(--red);
  font: 700 0.75rem/1 var(--en);
}
.label p {
  margin: 0;
  font: 700 0.72rem/1 var(--en);
  letter-spacing: 0.18em;
}
.label.light span { color: var(--ink); background: var(--paper); }

.heading {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 4.5rem;
}
.heading h2 {
  margin: 0;
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.18;
}
.heading h2 small {
  display: block;
  margin-top: 0.75rem;
  font: 600 0.75rem/1.3 var(--en);
  letter-spacing: 0.18em;
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
}
.hero-stage { position: relative; min-height: 100svh; }
.hero-layers { position: absolute; inset: 0; overflow: hidden; }
.layer, .video-slot, .hero-bg-tone { position: absolute; inset: -10%; }
.slot {
  overflow: hidden;
  background-color: #342b23;
  background-image:
    linear-gradient(rgba(246, 240, 228, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 240, 228, 0.09) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}
.slot > img {
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);
}
.video-slot > video, .video-slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-bg-tone {
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(23,19,15,.46), rgba(23,19,15,.93)),
    linear-gradient(90deg, rgba(246,240,228,.24), transparent 55%);
  mix-blend-mode: normal;
}
.layer-far { z-index: -4; opacity: 0.34; mix-blend-mode: luminosity; }
.layer-grid {
  z-index: -2;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
  opacity: 0.43;
}
.layer-grid i {
  position: absolute;
  color: rgba(246, 240, 228, 0.24);
  font: 700 clamp(8rem, 20vw, 18rem)/1 var(--en);
  font-style: normal;
}
.layer-grid i:first-child { top: 10%; left: -2%; }
.layer-grid i:last-child { right: -2%; bottom: 2%; }
.layer-mid {
  z-index: -1;
  inset: 6% 0 -14% 52%;
  background-color: transparent;
  opacity: 0.78;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
.layer-mid > img { filter: grayscale(.3) sepia(.14) saturate(1) brightness(.96) contrast(1.04); }
.layer-near {
  z-index: 0;
  inset: auto auto -13% -2%;
  width: 42%;
  min-width: 360px;
  height: 44%;
  border: 1px solid rgba(246, 240, 228, 0.2);
  color: rgba(246, 240, 228, 0.12);
}
.layer-near span { position: absolute; top: 1.25rem; left: 1.5rem; font: 700 0.68rem/1 var(--en); letter-spacing: .16em; }
.layer-near b { position: absolute; left: .5rem; bottom: -1.3rem; font: 700 clamp(8rem, 18vw, 17rem)/.8 var(--en); }

.hero-content {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 100svh;
  padding-block: 1.5rem 2rem;
  flex-direction: column;
}
.mast { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.phase { display: inline-flex; flex-direction: column; color: inherit; text-decoration: none; }
.phase strong { font: 800 1.45rem/1 var(--en); letter-spacing: .12em; }
.phase small { margin-top: .38rem; font: 500 .66rem/1 var(--en); letter-spacing: .12em; }
.mast p { display: flex; gap: 1rem; margin: 0; font: 600 .66rem/1.4 var(--en); letter-spacing: .08em; }

.hero-title { position: relative; margin-top: auto; width: 100%; padding-top: 4rem; }
.hero-title h1 { position: relative; z-index: 2; margin: 0; line-height: .76; letter-spacing: -.065em; }
.hero-show { display: block; font: 650 clamp(2rem, 5.9vw, 5.25rem)/.9 var(--en); letter-spacing: -.052em; }
.hero-year { display: block; font: 700 clamp(8rem, 25vw, 22rem)/.72 var(--en); letter-spacing: -.085em; }
.hero-company {
  display: block;
  margin-top: 1.3rem;
  font: 600 .72rem/1.35 var(--jp);
  letter-spacing: .12em;
}
.hero-company span { display: inline-block; }
.hero-company span + span { margin-left: .5em; font-family: var(--en); letter-spacing: .18em; }
.hero-knockout-video { display: none; }

@supports ((mask-image: url("./img/mask-text-solid.svg")) or (-webkit-mask-image: url("./img/mask-text-solid.svg"))) {
  .hero.has-knockout-video .hero-show { color: transparent; }
  .hero.has-knockout-video .hero-knockout-video {
    position: absolute;
    z-index: 3;
    display: block;
    top: 3.2rem;
    right: auto;
    bottom: auto;
    left: 0;
    width: min(62vw, 850px);
    height: 6.3rem;
    overflow: hidden;
    pointer-events: none;
    background: none;
    -webkit-mask-image: url("./img/mask-text-solid.svg");
    mask-image: url("./img/mask-text-solid.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left top;
    mask-position: left top;
  }
  .hero-knockout-video video {
    width: 100%;
    height: 100%;
    opacity: 1;
    filter: none;
    object-fit: cover;
  }
}

.hero-bottom {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) 1.7fr;
  gap: 5rem;
  align-items: end;
  margin-top: 4rem;
}
.catch p { margin: 0; line-height: 1.45; }
.catch p:first-child { font-size: 1.55rem; font-weight: 700; letter-spacing: -.035em; }
.catch p:last-child { margin-top: .7rem; color: rgba(246, 240, 228, .72); font-size: .86rem; line-height: 1.5; }
.catch span + span { margin-left: .35em; }

.hero-facts { position: relative; display: grid; grid-template-columns: 1.25fr 1fr .65fr 1fr; gap: 0; margin: 0; padding-bottom: 1.1rem; background: linear-gradient(180deg, transparent, rgba(23, 19, 15, .7) 26%); border-top: 1px solid var(--line-dark); }
.hero-facts > div { min-width: 0; padding: 1rem .9rem 0; border-left: 1px solid var(--line-dark); }
.hero-facts > div:first-child { padding-left: 0; border-left: 0; }
.hero-facts dt { margin-bottom: .6rem; color: rgba(246, 240, 228, .58); font: 700 .62rem/1 var(--en); letter-spacing: .14em; }
.hero-facts dd { margin: 0; font: 650 .95rem/1.42 var(--en); }
.hero-facts dd > span { white-space: nowrap; }
.hero-facts dd > span + span { margin-left: .24rem; }
.hero-facts dd small { display: block; color: rgba(246, 240, 228, .66); font-size: .6rem; font-weight: 500; letter-spacing: .04em; }
.hero-facts dd span small { display: inline; }
.hero-facts .booth dd { color: var(--red-on-dark); font-size: 1.45rem; line-height: 1; }

/* Introduction */
.intro-grid { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; }
.intro-grid > div:last-child { min-width: 0; }
.intro h2 { max-width: none; margin: 0 0 3.4rem -212px; width: calc(100% + 212px); font-size: 2.5rem; font-weight: 700; letter-spacing: -.06em; line-height: 1.22; white-space: nowrap; }
.intro h2 > span { display: inline; }
.intro h2 br { display: none; }
.bilingual { display: grid; grid-template-columns: minmax(0, 34em) minmax(0, 62ch); gap: 3.6rem; }
.bilingual > div + div { padding-left: 3.6rem; border-left: 1px solid rgba(23, 19, 15, .14); }
.bilingual > div:first-child { max-width: 34em; }
.bilingual > div:last-child { max-width: 62ch; }
.bilingual p { margin: 0 0 1.1rem; line-height: 1.75; }
.bilingual [lang="en"] { color: rgba(23, 19, 15, .66); font-size: .92rem; line-height: 1.7; }

/* Event information */
.overview { isolation: isolate; overflow: hidden; color: var(--paper); background: var(--ink); }
.overview-grid { position: absolute; z-index: -1; inset: 0; }
.overview-content { position: relative; }
.info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.info > div { min-height: 13.5rem; padding: 1.7rem; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.info dt { margin-bottom: 2rem; font-size: .85rem; font-weight: 700; }
.info dt small { color: rgba(246,240,228,.56); font: 600 .72rem/1 var(--en); }
.info dd { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.65; }
.info dd > span { display: block; }
.info dd small { display: block; margin-top: .85rem; color: rgba(246,240,228,.62); font: 500 .76rem/1.55 var(--en); }
.info .focus { color: var(--paper); background: var(--red); }
.info .focus dt small, .info .focus dd small { color: rgba(246,240,228,.78); }
.info .focus dd > span { font: 700 2.9rem/1 var(--en); letter-spacing: -.04em; }

/* Floors */
.lineup { padding-top: clamp(6rem, 9vw, 10rem); }
.lineup-heading { margin-bottom: clamp(5rem, 8vw, 9rem); }
.floor { position: relative; overflow: hidden; padding-bottom: clamp(7rem, 11vw, 12rem); }
.floor-visual {
  position: relative;
  width: var(--shell);
  margin: 0 auto clamp(4.5rem, 7vw, 7rem);
}
.visual-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #342b23;
}
.visual-wrap .visual { position: absolute; inset: 0; }
.visual-wrap .visual > img { filter: saturate(.72) contrast(1.04); }
a.visual-wrap { display: block; color: var(--paper); text-decoration: none; }
.visual-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(246,240,228,.18); }
.visual-mark {
  position: absolute;
  z-index: 4;
  right: 1rem;
  bottom: .9rem;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(246, 240, 228, .5);
  background: rgba(23, 19, 15, .55);
  color: var(--paper);
  font: 400 1rem/1 var(--en);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .35s ease, transform .35s ease, background .3s ease;
  pointer-events: none;
}
.visual-wrap.is-shown .visual-mark { opacity: .82; transform: translateY(0); }
@media (hover: hover) {
  .visual-wrap.is-shown:hover .visual-mark { opacity: 1; background: var(--red); border-color: var(--red); }
}
.visual-wrap:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.floor-ghost {
  position: absolute;
  left: -.055em;
  top: -.36em;
  color: rgba(23,19,15,.10);
  font: 750 clamp(6rem, 13vw, 13rem)/.78 var(--en);
  letter-spacing: -.012em;
  pointer-events: none;
}
.floor-content { position: relative; }
.floor-head { display: grid; grid-template-columns: 180px 1fr; gap: 1.25rem 2rem; margin-bottom: 4.5rem; }
.floor-no { grid-row: 1 / 3; margin: 0; font: 700 .73rem/1.5 var(--en); letter-spacing: .13em; }
.floor-no span { display: block; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags span { padding: .45rem .65rem; border: 1px solid var(--ink); font-size: .68rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.tags span:first-child { color: var(--paper); background: var(--ink); }
.floor h3 { margin: 0; font-size: 3.6rem; font-weight: 700; letter-spacing: -.055em; line-height: 1.18; }
.floor h3 small { display: block; margin-top: .9rem; font: 600 .92rem/1.35 var(--en); letter-spacing: .04em; }
.floor h3 > small:not([lang="en"]) { display: inline-block; margin: 0; font-family: var(--jp); font-size: 1.1rem; letter-spacing: 0; }
.floor-body { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(248px, .5fr); gap: 4.2rem; align-items: start; margin-left: 212px; }
.copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.6rem; }
.copy > [lang="ja"] { max-width: none; }
.copy > [lang="en"] { max-width: none; color: rgba(23,19,15,.65); font-size: .88rem; line-height: 1.68; }
.copy p { margin: 0 0 1.05rem; line-height: 1.75; }
.spec { max-width: 21rem; border-top: 2px solid var(--ink); }
.spec dl { margin: 0; }
.spec dl > div { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.spec dt { margin-bottom: .35rem; color: rgba(23,19,15,.58); font-size: .67rem; font-weight: 700; line-height: 1.45; }
.spec dd { margin: 0; font-size: .82rem; font-weight: 700; line-height: 1.55; }
.spec .roblox-text { display: block; margin-top: .35rem; color: var(--red); font-size: .72rem; font-weight: 700; letter-spacing: .05em; }
.spec nav { display: grid; margin-top: 1.2rem; }
.spec a { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; border-bottom: 1px solid var(--ink); font-size: .75rem; font-weight: 700; text-decoration: none; }
.spec a b { font: 700 1rem/1 var(--en); }
.spec a:hover { color: var(--red); }
.work .tags span:first-child { background: var(--red); border-color: var(--red); }

/* Transition breaks */
.break {
  position: relative;
  isolation: isolate;
  height: clamp(9rem, 15vw, 14rem);
  margin-bottom: 0;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
}
/* 次のフロアが動画の上へせり上がり、左右に動画が残る */
.break + .floor { margin-top: calc(-1 * clamp(3rem, 5.5vw, 5.5rem)); }
.break + .floor .visual-wrap { box-shadow: 0 -18px 48px rgba(23, 19, 15, .34); }
.break-grid { position: absolute; z-index: -3; inset: 0; }
.break-tone { position: absolute; z-index: -2; inset: 0; background: rgba(23, 19, 15, .38); }
.break-floor { position: absolute; z-index: -1; inset: auto 0 0; height: 46%; background: rgba(23, 19, 15, .5); border-top: 1px solid rgba(246, 240, 228, .16); }
.break-label {
  position: absolute;
  left: max(calc((100% - var(--shell)) / 2), 32px);
  bottom: 1.15rem;
  display: flex;
  gap: 1rem;
  color: var(--red-on-dark);
  font: 700 1.05rem/1 var(--en);
  letter-spacing: .16em;
}

/* Experience and business */
.experience { position: relative; overflow: hidden; color: var(--paper); background: var(--ink); }
.experience::before { content: ""; position: absolute; inset: 0; background: rgba(23, 19, 15, .55); pointer-events: none; }
.experience > * { position: relative; }
.experience-grid { display: grid; grid-template-columns: .82fr 1.55fr; gap: 5rem; }
.experience h2, .business h2 { margin: 1.6rem 0 0; font-size: 3.55rem; font-weight: 700; letter-spacing: -.06em; line-height: 1.25; }
.experience h2 span, .business h2 span { margin-right: .2em; }
.experience h2 > span, .business h2 > span { display: inline-block; }
.experience h2 small, .business h2 small { display: block; margin-top: 1rem; font: 600 .74rem/1.35 var(--en); letter-spacing: .15em; }
.experience .heading { display: block; margin: 0; }
.experience-grid > div:first-child { min-width: 0; }
.experience .heading .label { margin-bottom: 1.6rem; }
.lists ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.lists [lang="ja"] li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line-dark); }
.lists .experience-no { color: var(--red-on-dark); font: 700 1.05rem/1.7 var(--en); }
.lists p { margin: 0; line-height: 1.6; }
.lists p + p { margin-top: .35rem; color: rgba(246,240,228,.62); font: 500 .8rem/1.6 var(--en); }
.lists ul[lang="en"] { margin-top: 1.6rem; border-top: 0; color: rgba(246,240,228,.62); }
.lists [lang="en"] li { padding: .55rem 0; font-size: .8rem; line-height: 1.55; }

.business { color: var(--ink); background: var(--paper-deep); }
.business-grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4rem; }
.business .bilingual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
.business .bilingual > div:first-child,
.business .bilingual > div:last-child { max-width: none; }
.business-grid > div:last-child { min-width: 0; }
.business h2 { margin: 0 0 2.6rem; font-size: 3rem; line-height: 1.22; white-space: nowrap; }
.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  margin-top: 2.5rem;
  padding-inline: 1.5rem;
  color: var(--paper);
  background: var(--ink);
  text-decoration: none;
}
.contact:hover { background: var(--red); }
.contact b { font: 700 1.1rem/1 var(--en); }

/* Footer: the PHASE mark is intentionally static, so motion resolves here. */
footer { padding-block: 5rem 2rem; color: var(--paper); background: var(--ink); }
.footer-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 4rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-dark); }
.footer-phase strong { display: block; font: 750 clamp(3.4rem, 10vw, 8rem)/.8 var(--en); letter-spacing: -.06em; }
.footer-phase small { margin-top: 1.2rem; }
.footer-top > p { margin: 0; text-align: right; font: 550 .75rem/1.8 var(--en); }
.footer-top > p b { color: var(--red-on-dark); }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 4rem; color: rgba(246,240,228,.64); }
.notes p { margin: 0 0 .5rem; font-size: .69rem; line-height: 1.75; }
.footer-links { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; margin-bottom: 4rem; }
.footer-links a { font-size: .72rem; text-decoration-thickness: 1px; text-underline-offset: .3rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); color: rgba(246,240,228,.55); font: 500 .66rem/1.5 var(--en); }

@media (min-width: 940px) {
  .br-lg { display: inline; }
}

@media (max-width: 1280px) {
  :root { --shell: 1040px; }
  .heading h2 { font-size: 3.15rem; }
  .intro h2 { font-size: 2.15rem; }
  .business h2 { font-size: 2.6rem; }
  .floor h3 { font-size: 3.25rem; }
  .hero-bottom { gap: 3.4rem; }
  .floor-body { gap: 4rem; }
  .copy { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 1100px) {
  :root { --shell: 880px; }
  body { font-size: .96rem; }
  .heading, .intro-grid, .floor-head { grid-template-columns: 140px 1fr; }
  .hero-bottom { grid-template-columns: .75fr 1.55fr; gap: 2.5rem; }
  .hero-facts { grid-template-columns: 1.25fr 1fr .7fr; }
  .hero-facts > div:last-child { display: none; }
  .catch p:first-child { font-size: 1.35rem; }
  .intro h2 { margin-left: -172px; width: calc(100% + 172px); font-size: 1.82rem; }
  .heading h2 { font-size: 2.85rem; }
  .floor h3 { font-size: 2.9rem; }
  .floor-body { margin-left: 172px; grid-template-columns: minmax(0, 1fr) 280px; gap: 3rem; }
  .info > div { padding: 1.45rem; }
  .experience h2, .business h2 { font-size: 3rem; }
  .business h2 { font-size: 2.4rem; }
  .experience-grid { grid-template-columns: 1fr 1.3fr; gap: 3rem; }
}

@media (min-width: 941px) and (max-width: 1100px) {
  .catch p span, .floor h3 > span { display: block; }
  .catch span + span { margin-left: 0; }
}

@media (max-width: 939px) {
  :root { --shell: calc(100% - 64px); }
  body { font-size: .94rem; }
  .hero-content { padding-block: 1.4rem 1.7rem; }
  .hero-title { padding-top: 5rem; }
  .hero-bottom { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; }
  .hero-facts { grid-template-columns: 1.3fr 1fr .72fr; }
  .heading, .intro-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .bilingual, .business .bilingual { grid-template-columns: 1fr; }
  .bilingual > div + div { padding-left: 0; border-left: 0; padding-top: 2rem; border-top: 1px solid rgba(23, 19, 15, .14); }
  .heading { margin-bottom: 3.5rem; }
  .intro h2 { margin: 0 0 2.6rem; width: auto; max-width: 16em; white-space: normal; font-size: 2.35rem; line-height: 1.34; }
  .intro h2 > span { display: inline-block; }
  .bilingual { gap: 2.2rem; }
  .info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floor-visual { margin-bottom: 4rem; }
  .floor-head { grid-template-columns: 115px 1fr; }
  .floor-body { margin-left: 147px; grid-template-columns: 1fr; gap: 3rem; }
  .spec { max-width: 100%; }
  .experience-grid, .business-grid { grid-template-columns: 1fr; gap: 4rem; }
  .experience h2 > span, .business h2 > span, .floor h3 > span { display: inline-block; }
  .business h2 { margin: 0 0 2.2rem; white-space: nowrap; font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
  .notes { gap: 2rem; }
}

@media (max-width: 720px) {
  body { font-size: .92rem; }

  .mast p span:last-child { display: none; }
  .hero-content { min-height: auto; height: auto; padding-bottom: 1.5rem; }
  .hero-stage { min-height: 100svh; }
  .hero-title { margin-top: 30vh; }
  .hero-bottom { margin-top: 2.5rem; }
  .hero-facts { grid-template-columns: 1.2fr .95fr .7fr; }
  .bilingual { grid-template-columns: 1fr; }
  .info > div { min-height: 12rem; }
  .floor-head { grid-template-columns: 1fr; }
  .floor-no { grid-row: auto; }
  .floor-no span { display: inline-block; }
  .floor-body { margin-left: 0; }
  .copy { gap: 1rem; }
  .notes { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 40px); }
  body { font-size: .9rem; }
  .section { padding-block: clamp(5rem, 20vw, 7rem); }
  .mast { gap: 1rem; }
  .phase strong { font-size: 1.1rem; }
  .phase small { font-size: .58rem; }
  .mast p { font-size: .58rem; }
  .hero-title { margin-top: 23vh; }
  .hero-show { font-size: clamp(1.65rem, 8.6vw, 2.25rem); line-height: 1; }
  .hero-year { font-size: clamp(7.25rem, 35vw, 10rem); line-height: .72; }
  .catch p:first-child { font-size: 1.18rem; }
  .catch p:last-child { font-size: .76rem; }
  .hero-facts { grid-template-columns: 1fr 1fr; row-gap: .9rem; }
  .hero-facts > div { padding: .85rem .7rem 0; }
  .hero-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero-facts > div:nth-child(n+3) { display: block; padding-top: .85rem; border-top: 1px solid var(--line-dark); }
  .hero-facts dd { font-size: .82rem; }
  .hero-facts .booth dd { font-size: 1.25rem; }
  .heading h2 { font-size: 2.35rem; }
  .intro h2 { margin-bottom: 2.2rem; font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.4; }
  .bilingual { gap: 1.8rem; }
  .bilingual > div + div { padding-top: 1.7rem; }
  .info { grid-template-columns: 1fr; }
  .info > div { min-height: 0; }
  .info .focus dd > span { font-size: 2.45rem; }
  .floor-visual { margin-bottom: 3.5rem; }
  .break + .floor { margin-top: -2.5rem; }
  .floor h3 { font-size: 2.35rem; }
  .floor h3 > span, .experience h2 > span, .business h2 > span { display: inline-block; }
  .floor h3 > small:not([lang="en"]) { display: block; margin-top: .45rem; }
  .floor-ghost { font-size: clamp(5rem, 26vw, 8rem); top: -.3em; }
  .tags { gap: .35rem; }
  .tags span { font-size: .6rem; }
  .experience h2 { font-size: 2.45rem; }
  .business h2 { font-size: clamp(1.4rem, 6.6vw, 2.2rem); }
  .lists [lang="ja"] li { grid-template-columns: 2.5rem 1fr; }
  .contact { padding-inline: 1rem; }
  .footer-top { align-items: flex-start; flex-direction: column; }
  .footer-top > p { text-align: left; }
  .footer-phase strong { font-size: clamp(4.5rem, 28vw, 7rem); }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .motion { transform: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .video-slot > video { display: none; }
  .hero.has-knockout-video .hero-show { color: inherit; }
  .hero.has-knockout-video .hero-knockout-video { display: none; }
}


/* ---------- 固定された1枚の格子面。各セクションはその「窓」 ---------- */
.gridfix {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(246, 240, 228, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 240, 228, .085) 1px, transparent 1px),
    linear-gradient(rgba(176, 53, 33, .26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 53, 33, .26) 1px, transparent 1px);
  background-size: 3.125vw 3.125vw, 3.125vw 3.125vw, 12.5vw 12.5vw, 12.5vw 12.5vw;
  background-position: center top;
  background-repeat: repeat;
  background-attachment: fixed;
}
@supports (-webkit-touch-callout: none) {
  .gridfix { background-attachment: scroll; }
}

/* ---------- Sticky bar / Menu / To-top ---------- */
.sitebar {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(23, 19, 15, .94);
  border-bottom: 1px solid rgba(246, 240, 228, .14);
  transform: translateY(-101%);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.sitebar.is-on { transform: translateY(0); }
.sitebar-inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: var(--shell);
  max-width: 100%;
  margin-inline: auto;
  min-height: 62px;
  padding-block: .5rem;
}
.sb-brand { display: flex; flex-direction: column; gap: .18rem; color: var(--paper); text-decoration: none; }
.sb-brand strong { font: 700 1.02rem/1 var(--en); letter-spacing: .17em; }
.sb-brand small { color: rgba(246, 240, 228, .56); font: 600 .54rem/1 var(--en); letter-spacing: .16em; }
.sb-facts { display: flex; gap: 1.5rem; margin: 0 0 0 auto; }
.sb-facts > div { padding-left: 1.5rem; border-left: 1px solid rgba(246, 240, 228, .16); }
.sb-facts dt { margin-bottom: .3rem; color: rgba(246, 240, 228, .5); font: 700 .52rem/1 var(--en); letter-spacing: .16em; }
.sb-facts dd { margin: 0; color: var(--paper); font: 650 .86rem/1.2 var(--en); }
.sb-facts dd small { display: block; color: rgba(246, 240, 228, .58); font-size: .56rem; font-weight: 500; }
.sb-facts > div:first-child dd { color: var(--red-on-dark); font-size: 1.05rem; }
.sb-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(246, 240, 228, .24);
  border-radius: 2px;
  background: none;
  color: var(--paper);
  font: 700 .6rem/1 var(--en);
  letter-spacing: .16em;
  cursor: pointer;
}
.sb-toggle:hover { border-color: rgba(246, 240, 228, .5); }
.sb-toggle i { position: relative; display: block; width: 16px; height: 9px; }
.sb-toggle i::before, .sb-toggle i::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px;
  background: currentColor; transition: transform .28s, top .28s;
}
.sb-toggle i::before { top: 0; }
.sb-toggle i::after { top: 7.5px; }
.sb-toggle[aria-expanded="true"] i::before { top: 3.75px; transform: rotate(45deg); }
.sb-toggle[aria-expanded="true"] i::after { top: 3.75px; transform: rotate(-45deg); }

.sitemenu {
  position: fixed;
  z-index: 59;
  inset: 0;
  padding-top: 62px;
  overflow-y: auto;
  background: rgba(23, 19, 15, .985);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.2rem);
  transition: opacity .34s ease, transform .42s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .42s;
}
.sitemenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .3s ease, transform .42s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}
.sitemenu-inner > * { opacity: 0; transform: translateY(.9rem); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .3, 1); }
.sitemenu.is-open .sitemenu-inner > * { opacity: 1; transform: translateY(0); }
.sitemenu.is-open .sm-main { transition-delay: .08s; }
.sitemenu.is-open .sm-sub { transition-delay: .16s; }
.sitemenu.is-open .sm-contact { transition-delay: .22s; }
.sitemenu[hidden] { display: block; }
.sitemenu-inner { width: var(--shell); max-width: 100%; margin-inline: auto; padding: 3.4rem 0 4rem; }
.sm-main, .sm-sub { list-style: none; margin: 0; padding: 0; }
.sm-main a {
  display: flex; align-items: baseline; gap: 1.1rem;
  padding: 1.15rem 0; border-bottom: 1px solid rgba(246, 240, 228, .14);
  color: var(--paper); text-decoration: none;
}
.sm-main a:hover { color: var(--red-on-dark); }
.sm-main b { color: var(--red-on-dark); font: 700 .68rem/1 var(--en); letter-spacing: .16em; }
.sm-main span { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.sm-main small { margin-left: auto; color: rgba(246, 240, 228, .52); font: 600 .6rem/1 var(--en); letter-spacing: .16em; }
.sm-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 2.4rem; margin-top: 2.2rem; }
.sm-sub a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid rgba(246, 240, 228, .1);
  color: rgba(246, 240, 228, .84); font-size: .92rem; text-decoration: none;
}
.sm-sub a:hover { color: var(--paper); }
.sm-sub small { color: rgba(246, 240, 228, .44); font: 600 .56rem/1 var(--en); letter-spacing: .14em; }
.sm-contact { margin: 2.6rem 0 0; }
.sm-contact a { display: inline-flex; align-items: center; gap: .6rem; color: var(--red-on-dark); font-weight: 700; text-decoration: none; }
.sm-contact a b { font: 400 1rem/1 var(--en); }

.totop {
  position: fixed;
  z-index: 55;
  right: 1.4rem;
  bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  width: 74px;
  padding: .35rem 0 .3rem;
  border-radius: 3px;
  background: rgba(246, 240, 228, .9);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .32s, transform .32s;
}
.totop.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.totop:hover { background: var(--paper); }
.totop img { width: 46px; height: auto; }
.totop span { font: 700 .52rem/1 var(--en); letter-spacing: .18em; }

#top, #intro, #overview, #lineup, #experience, #business,
#f1, #f2, #f3, #f4 { scroll-margin-top: 76px; }

@media (max-width: 939px) {
  .sitebar-inner { gap: 1rem; min-height: 56px; }
  .sb-facts { gap: 1rem; }
  .sb-facts > div { padding-left: 1rem; }
  .sitemenu { padding-top: 56px; }
  .sm-main span { font-size: 1.28rem; }
  .sm-sub { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sb-brand small { display: none; }
  .sb-facts > div:last-child { display: none; }
  .sb-facts dd small { display: none; }
  .sb-toggle span { display: none; }
  .sb-toggle { padding: .55rem .6rem; }
  .sitemenu-inner { padding: 2.4rem 0 3rem; }
  .sm-main a { padding: .95rem 0; }
  .sm-main span { font-size: 1.12rem; }
  .sm-main small { display: none; }
  .totop { right: .9rem; bottom: .9rem; width: 62px; }
  .totop img { width: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .sitebar, .sitemenu, .totop { transition: none; }
}

.business-grid { align-items: start; }
.footer-brand { display: flex; align-items: flex-end; gap: 1.2rem; color: inherit; text-decoration: none; }
.footer-brand:hover .footer-phase strong { color: var(--red-on-dark); }
.footer-phase strong { transition: color .3s ease; }
.footer-mark { display: block; flex: 0 0 auto; }
.footer-mark img { display: block; }
.footer-mark img { width: 58px; height: 58px; }
.footer-bottom a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28rem; }
.footer-bottom a:hover { color: var(--paper); }
.sb-mark { width: 26px; height: 26px; }
.sb-brand { flex-direction: row; align-items: center; gap: .65rem; }
.sb-brand > div { display: flex; flex-direction: column; gap: .18rem; }
@media (max-width: 600px) {
  .footer-brand { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .footer-mark img { width: 46px; height: 46px; }
  .footer-phase strong { font-size: clamp(2.9rem, 17vw, 4.6rem); }
}

/* FLOOR画像：領域に入って少し遅れて浮かび上がる */
.js .visual-wrap .visual > img {
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .95s ease, transform 1.35s cubic-bezier(.16, .78, .3, 1);
}
.js .visual-wrap.is-shown .visual > img { opacity: 1; transform: scale(1); }

@media (hover: hover) {
  .visual-wrap.is-shown .visual > img { transition: opacity .95s ease, transform .75s cubic-bezier(.2, .7, .3, 1), filter .6s ease; }
  .visual-wrap.is-shown:hover .visual > img { transform: scale(1.055); filter: saturate(.85) contrast(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .js .visual-wrap .visual > img { opacity: 1; transform: none; transition: none; }
  .visual-wrap.is-shown:hover .visual > img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sitemenu, .sitemenu-inner > *, .visual-mark { transition: none; transform: none; }
  .sitemenu { transition: visibility 0s; }
  .visual-wrap.is-shown .visual-mark { opacity: .82; }
}