/* V1 hero + CTA buttons — for rakugo-v4 hybrid (V1 hero + V2 body) */
:root {
  --ink: #1a2332;
  --ink-soft: #3d4a5c;
  --paper: #faf6f1;
  --paper-deep: #e5ddd0;
  --navy: #003040;
  --navy-deep: #021820;
  --coral: #ea6d51;
  --coral-soft: #f6e6e1;
  --coral-mid: #f0d5cc;
  --mist: #eef4f6;
  --mist-deep: #e2eaf0;
  --slate: #e6ebef;
  --gold: #c4a574;
  --line: rgba(0, 48, 64, 0.14);
  --max: 920px;
  --font-display: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-brush: "Yuji Syuku", "Yu Mincho", "Hiragino Mincho ProN", serif;

  /* 和柄（セクションごとに割当・見えるか見えない程度） */
  --wagara-seigaiha: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%2236%22%20viewBox%3D%220%200%2072%2036%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M-18%2036c10-18%2026-18%2036%200s26%2018%2036%200%2026-18%2036%200%22%2F%3E%3Cpath%20d%3D%22M-18%2036c7-12%2018-12%2025%200s18%2012%2025%200%2018-12%2025%200%2018%2012%2025%200%22%2F%3E%3Cpath%20d%3D%22M-18%2036c4-7%2010-7%2014%200s10%207%2014%200%2010-7%2014%200%2010%207%2014%200%2010-7%2014%200%2010%207%2014%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-shippo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%220%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2248%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2224%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2224%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2216%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-sayagata: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2256%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b85a45%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M8%200v20h12V8h20v12H28v16h12V24h16v12H44v12H28V36H16v12H0V36h12V24H0V12h12V0h16zm28%200v8h12V0H36zM0%2044h8v12H0V44zm48%200h8v12h-8V44z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-asanoha: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2264%22%20viewBox%3D%220%200%2056%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M28%202%20L50%2018%20V46%20L28%2062%20L6%2046%20V18%20Z%22%2F%3E%3Cpath%20d%3D%22M28%2014%20L42%2024%20V40%20L28%2050%20L14%2040%20V24%20Z%22%2F%3E%3Cpath%20d%3D%22M28%202%20V62%20M6%2018%20L50%2046%20M50%2018%20L6%2046%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-hishi: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M20%203%20L37%2020%20L20%2037%20L3%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23c4a574%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
  --wagara-kikkou: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2256%22%20viewBox%3D%220%200%2048%2056%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M24%200%20L48%2014%20V42%20L24%2056%20L0%2042%20V14%20Z%22%2F%3E%3Cpath%20d%3D%22M0%2014%20L24%2028%20L0%2042%20M48%2014%20L24%2028%20L48%2042%20M24%200%20V56%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-ichimatsu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23003040%22%20fill-opacity%3D%220.35%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23003040%22%20fill-opacity%3D%220.35%22%2F%3E%3C%2Fsvg%3E");
  --wagara-kagome: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2242%22%20viewBox%3D%220%200%2048%2042%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b85a45%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%2021%20L12%200%20H36%20L48%2021%20L36%2042%20H12%20Z%22%2F%3E%3Cpath%20d%3D%22M12%200%20L24%2021%20L12%2042%20M36%200%20L24%2021%20L36%2042%20M0%2021%20H48%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-shima: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2216%22%20viewBox%3D%220%200%2040%2016%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%204%20H40%20M0%2012%20H40%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-tatejima: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2240%22%20viewBox%3D%220%200%2016%2040%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M4%200%20V40%20M12%200%20V40%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-yagasuri: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2248%22%20viewBox%3D%220%200%2032%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M16%202%20L28%2014%20L16%2026%20L4%2014%20Z%22%2F%3E%3Cpath%20d%3D%22M16%2022%20L28%2034%20L16%2046%20L4%2034%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-uroko: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2234%22%20viewBox%3D%220%200%2040%2034%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b85a45%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%2034%20Q10%2010%2020%2034%20Q30%2010%2040%2034%22%2F%3E%3Cpath%20d%3D%22M-10%2017%20Q0%20-7%2010%2017%20Q20%20-7%2030%2017%20Q40%20-7%2050%2017%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-koushi: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%208%20H32%20M0%2016%20H32%20M0%2024%20H32%20M8%200%20V32%20M16%200%20V32%20M24%200%20V32%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-yukiwa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2210%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2238%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%2213%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2235%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%2235%22%20r%3D%225%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wagara-samekomon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%224%22%20r%3D%221.2%22%20fill%3D%22%23b85a45%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%224%22%20r%3D%221.2%22%20fill%3D%22%23b85a45%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2214%22%20r%3D%221.2%22%20fill%3D%22%23b85a45%22%2F%3E%3C%2Fsvg%3E");
  --wagara-fundou: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23003040%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M14%208%20H34%20Q42%208%2042%2016%20V20%20Q42%2024%2034%2024%20H14%20Q6%2024%206%2020%20V16%20Q6%208%2014%208%20Z%22%2F%3E%3Cpath%20d%3D%22M14%2024%20H34%20Q42%2024%2042%2032%20V36%20Q42%2040%2034%2040%20H14%20Q6%2040%206%2036%20V32%20Q6%2024%2014%2024%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.85rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

.btn--primary:hover {
  background: #d85a3f;
  border-color: #d85a3f;
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--ghost:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--large {
  min-height: 3.5rem;
  padding-inline: 2.25rem;
  font-size: 1rem;
}

.btn--compact {
  min-height: 2.85rem;
  padding: 0.6rem 1.35rem;
  font-size: 1rem;
}

.btn__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* —— Hero（幕上げモック） —— */

.hero {
  --curtain-ms: 3400ms;
  --reveal-delay: 1400ms;
  --mekuri-flip-ms: 1900ms;
  --performer-fade-ms: 1200ms;
  --face-ms: 1.1s;
  --copy-delay: 5200ms;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  min-height: 100svh;
  min-height: 100vh;
  padding: 0;
  color: var(--navy);
  overflow: hidden;
  background: #f7f0e4;
  perspective: 1200px;
}

.hero.is-instant,
.hero.is-instant * {
  transition: none !important;
  animation: none !important;
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  perspective: 900px;
}

.hero__back {
  position: absolute;
  inset: 0;
  background-color: #f7f0e4;
  background-image: url("../images/hero-bg.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* —— 高座（朱色・立体） —— */

.hero__stage-3d {
  --stage-vermilion: #dc4b32;
  --stage-vermilion-mid: #bb3a26;
  --stage-vermilion-deep: #92271a;
  --stage-vermilion-dark: #611611;
  --stage-highlight: rgba(255, 210, 175, 0.45);
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 24%;
  width: min(86vw, 560px);
  height: min(28vh, 200px);
  transform: translateX(-50%);
  pointer-events: none;
}

.hero__stage-3d-platform {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 78%;
  transform-style: preserve-3d;
}

.hero__stage-3d-top {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  height: 70%;
  background:
    /* 左右の落ち込み */
    linear-gradient(90deg, rgba(40, 8, 6, 0.55) 0%, transparent 14%, transparent 86%, rgba(40, 8, 6, 0.55) 100%),
    /* 手前が少し暗い（遠近） */
    linear-gradient(180deg, rgba(255, 210, 170, 0.28) 0%, transparent 28%, rgba(60, 10, 8, 0.22) 100%),
    /* 中央の光源 */
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(255, 170, 130, 0.35), transparent 65%),
    /* 朱の木目風 */
    repeating-linear-gradient(
      90deg,
      #b83426 0,
      #c94434 12px,
      #a82c20 13px,
      #a82c20 28px
    ),
    linear-gradient(165deg, #f26a52 0%, var(--stage-vermilion) 45%, #b23423 100%);
  border: 1px solid rgba(90, 26, 16, 0.5);
  box-shadow:
    inset 0 2px 0 rgba(255, 232, 205, 0.42),
    inset 0 -14px 28px rgba(90, 24, 14, 0.3),
    inset 8px 0 18px rgba(90, 24, 14, 0.14),
    inset -8px 0 18px rgba(90, 24, 14, 0.14),
    0 4px 12px rgba(70, 34, 16, 0.28);
  transform: perspective(650px) rotateX(58deg);
  transform-origin: bottom center;
  border-radius: 2px;
}

.hero__stage-3d-front {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 38%;
  background:
    /* 上端のハイライト（天板との境） */
    linear-gradient(180deg, rgba(255, 170, 140, 0.22) 0%, transparent 18%),
    /* 下方向の陰影 */
    linear-gradient(180deg, var(--stage-vermilion-mid) 0%, var(--stage-vermilion-deep) 48%, var(--stage-vermilion-dark) 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 16px,
      rgba(0, 0, 0, 0.12) 16px,
      rgba(0, 0, 0, 0.12) 17px
    );
  border: 1px solid rgba(80, 22, 14, 0.55);
  border-top-color: rgba(255, 190, 150, 0.42);
  box-shadow:
    inset 0 10px 20px rgba(70, 20, 12, 0.26),
    inset 0 -6px 14px rgba(70, 20, 12, 0.22),
    inset 0 1px 0 rgba(255, 214, 186, 0.26),
    0 12px 28px rgba(70, 34, 16, 0.3);
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
}

.hero__stage-3d-side {
  position: absolute;
  bottom: 0;
  width: 7%;
  height: 38%;
  opacity: 0.98;
}

.hero__stage-3d-side--l {
  left: 0.5%;
  transform: skewY(-28deg);
  transform-origin: bottom right;
  background:
    linear-gradient(90deg, var(--stage-vermilion-dark) 0%, #5a1410 55%, var(--stage-vermilion-deep) 100%);
  box-shadow: inset -4px 0 10px rgba(0, 0, 0, 0.35);
}

.hero__stage-3d-side--r {
  right: 0.5%;
  transform: skewY(28deg);
  transform-origin: bottom left;
  background:
    linear-gradient(90deg, #b83828 0%, var(--stage-vermilion-mid) 40%, var(--stage-vermilion-deep) 100%);
  box-shadow: inset 4px 0 12px rgba(255, 160, 120, 0.12);
}

.hero__stage-3d-rim {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 34%;
  height: 0.4rem;
  background: linear-gradient(
    90deg,
    #6a2a18 0%,
    #c4a574 18%,
    #f0d9a8 50%,
    #c4a574 82%,
    #6a2a18 100%
  );
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 240, 210, 0.45);
  opacity: 0.92;
}

.hero__stage-3d-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -2%;
  height: 22%;
  background: radial-gradient(ellipse at center, rgba(70, 34, 16, 0.42), transparent 72%);
  filter: blur(8px);
  transform: scaleY(0.55);
}

/* —— 屏風（水墨の山水・霞・松） —— */

.hero__byobu {
  --byobu-paper: #e0bb6f;
  --byobu-art: url("../images/byobu-sumie.png");
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: calc(24% + 7.5rem);
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: min(96vw, 720px);
  height: min(48vh, 380px);
  transform: translateX(-50%);
  transform-style: preserve-3d;
  opacity: 1;
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(70, 45, 24, 0.24));
}

.hero__byobu-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background-color: var(--byobu-paper);
  background-image:
    /* 金地の照り返し */
    linear-gradient(
      168deg,
      rgba(255, 248, 214, 0.72) 0%,
      rgba(255, 228, 158, 0.28) 34%,
      rgba(232, 190, 106, 0.3) 62%,
      rgba(190, 146, 62, 0.34) 100%
    ),
    var(--byobu-art);
  background-repeat: no-repeat;
  background-size: 100% 100%, 500% 100%;
  border: 2px solid #6d4a1d;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 200, 0.7),
    inset 0 -20px 34px rgba(140, 96, 30, 0.14);
}

/* 金箔の継ぎ目 */
.hero__byobu-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 43px,
      rgba(255, 252, 226, 0.4) 43px,
      rgba(255, 252, 226, 0.4) 44px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 43px,
      rgba(150, 108, 36, 0.22) 43px,
      rgba(150, 108, 36, 0.22) 44px
    );
  opacity: 0.65;
}

.hero__byobu-panel + .hero__byobu-panel {
  margin-left: -1px;
}

.hero__byobu-panel--l2 {
  background-position: center, 0% 50%;
  transform: perspective(420px) rotateY(28deg);
  transform-origin: right center;
  z-index: 1;
  filter: brightness(0.95);
}

.hero__byobu-panel--l1 {
  background-position: center, 25% 50%;
  transform: perspective(420px) rotateY(12deg);
  transform-origin: right center;
  z-index: 2;
  filter: brightness(0.98);
}

.hero__byobu-panel--c {
  background-position: center, 50% 50%;
  z-index: 3;
  flex: 1.05 1 0;
}

.hero__byobu-panel--r1 {
  background-position: center, 75% 50%;
  transform: perspective(420px) rotateY(-12deg);
  transform-origin: left center;
  z-index: 2;
  filter: brightness(0.98);
}

.hero__byobu-panel--r2 {
  background-position: center, 100% 50%;
  transform: perspective(420px) rotateY(-28deg);
  transform-origin: left center;
  z-index: 1;
  filter: brightness(0.95);
}

.hero__koza {
  position: absolute;
  z-index: 1;
  left: 50%;
  /* 天板の手前辺に座布団・めくりの足が乗る位置 */
  bottom: calc(24% + 5.5rem);
  width: min(78vw, 440px);
  margin: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.4));
}

.hero__stage-set {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 1.75rem);
}

/* —— めくり（枠・紙・足） —— */

.hero__mekuri {
  position: relative;
  flex: 0 0 auto;
  /* 演出用：資料サイズの約90%（実寸より大きくても可） */
  width: clamp(5.2rem, 13vw, 6.75rem);
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease calc(var(--reveal-delay) + 100ms),
    transform 0.7s ease calc(var(--reveal-delay) + 100ms);
}

.hero.is-open .hero__mekuri,
.hero.is-done .hero__mekuri {
  opacity: 1;
  transform: translateY(0);
}

.hero__mekuri-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__mekuri-frame {
  position: relative;
  width: 100%;
  padding: 0.36rem 0.3rem 0.4rem;
  background:
    linear-gradient(160deg, #6b4a2e 0%, #4a301c 45%, #3a2414 100%);
  border: 1px solid #2a180e;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.45);
}

.hero__mekuri-frame::before {
  content: "";
  position: absolute;
  inset: 0.22rem;
  border: 1px solid rgba(196, 165, 116, 0.4);
  pointer-events: none;
}

.hero__mekuri-board {
  position: relative;
  height: clamp(14.85rem, 45vw, 22rem);
  perspective: 600px;
  overflow: hidden;
  background: #c4b49a;
  box-shadow: inset 0 0 12px rgba(80, 50, 20, 0.2);
}

.hero__mekuri-leaf {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform-style: preserve-3d;
  transform: rotateX(-92deg);
  transition: transform var(--mekuri-flip-ms) cubic-bezier(0.33, 0.1, 0.25, 1);
}

.hero.is-mekuri .hero__mekuri-leaf,
.hero.is-done .hero__mekuri-leaf {
  transform: rotateX(0deg);
}

.hero__mekuri-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__mekuri-face--front {
  display: grid;
  place-items: center;
  padding: 0.12rem 0.08rem;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.35), transparent 45%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(120, 90, 50, 0.03) 2px,
      rgba(120, 90, 50, 0.03) 3px
    ),
    linear-gradient(165deg, #f4ead6 0%, #ebe0c8 40%, #e2d4b8 100%);
  box-shadow: inset 0 0 20px rgba(140, 100, 50, 0.12);
}

.hero__mekuri-face--back {
  transform: rotateX(180deg);
  background:
    linear-gradient(165deg, #d9ccb0 0%, #cfc0a4 100%);
  box-shadow: inset 0 0 16px rgba(80, 50, 20, 0.15);
}

.hero__mekuri-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.hero__mekuri-legs {
  position: relative;
  width: 78%;
  height: 1.5rem;
  margin-top: -1px;
}

.hero__mekuri-leg {
  position: absolute;
  top: 0;
  width: 0.34rem;
  height: 1.5rem;
  background:
    linear-gradient(180deg, #5a3c24 0%, #3d2818 100%);
  border-radius: 1px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.35);
}

.hero__mekuri-leg--l {
  left: 12%;
  transform: skewX(14deg);
}

.hero__mekuri-leg--r {
  right: 12%;
  transform: skewX(-14deg);
}

.hero__mekuri-foot {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 0.28rem;
  background: #2e1c10;
  border-radius: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.hero__performer {
  flex: 0 1 auto;
  width: min(54vw, 320px);
  max-width: 320px;
  margin: 0;
  line-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--performer-fade-ms) ease,
    transform var(--performer-fade-ms) ease;
  filter: drop-shadow(0 8px 14px rgba(70, 45, 24, 0.3)) brightness(1.06) saturate(1.04);
}

.hero.is-performer .hero__performer,
.hero.is-done .hero__performer {
  opacity: 1;
  transform: translateY(0);
}

.hero__performer-stack {
  position: relative;
  width: 100%;
  /* 顔上げ画像（523×756）の比率で枠を確保し、切替時の縮小を防ぐ */
  aspect-ratio: 523 / 756;
}

.hero__performer-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.hero__performer-img--bow {
  z-index: 1;
  transform-origin: bottom center;
  transition:
    opacity var(--face-ms) ease,
    transform var(--face-ms) ease;
}

.hero__performer-img--face {
  z-index: 2;
  opacity: 0;
  transform: translateY(2.5%) scale(1.05);
  transform-origin: bottom center;
  transition:
    opacity var(--face-ms) ease,
    transform var(--face-ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* お辞儀 → 顔上げ：同じスケールでクロスフェード */
.hero.is-face .hero__performer-img--bow,
.hero.is-done .hero__performer-img--bow {
  opacity: 0;
  transform: translateY(1%);
}

.hero.is-face .hero__performer-img--face,
.hero.is-done .hero__performer-img--face {
  opacity: 1;
  transform: translateY(0) scale(1.05);
}

/* 幕（ゆっくり上へ） */
.hero__curtain {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform: translateY(0);
  transition: transform var(--curtain-ms) cubic-bezier(0.4, 0.02, 0.15, 1);
  pointer-events: none;
}

.hero.is-open .hero__curtain,
.hero.is-done .hero__curtain {
  transform: translateY(-102%);
}

.hero__curtain-face {
  position: relative;
  height: 100%;
  overflow: hidden;
  /* 定式幕風：黒・柿・萌葱の縦縞 */
  --maku-kuro: #1a1a1a;
  --maku-kaki: #c45c26;
  --maku-moegi: #2f5d3a;
  background-color: var(--maku-kuro);
  background-image: repeating-linear-gradient(
    90deg,
    var(--maku-kuro) 0 5.5rem,
    var(--maku-kaki) 5.5rem 11rem,
    var(--maku-moegi) 11rem 16.5rem
  );
  border-bottom: 8px solid #2a1c10;
  box-shadow:
    inset 0 -48px 80px rgba(0, 0, 0, 0.35),
    inset 0 20px 40px rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

/* 布の縦方向の陰影 */
.hero__curtain-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(5.5rem - 2px),
    rgba(0, 0, 0, 0.22) calc(5.5rem - 2px) 5.5rem
  );
  pointer-events: none;
}

/* 緞帳の上下の落ち影・光沢 */
.hero__curtain-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%, transparent 72%, rgba(0, 0, 0, 0.28)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

/* 紙片演出（会釈後に金箔・朱・生成りの和紙片がゆっくり広がる） */
.hero__hanafubuki {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__hanafubuki-piece {
  position: absolute;
  width: var(--hf-size, 0.6rem);
  aspect-ratio: 1 / 1.4;
  opacity: 0;
  border-radius: 1px;
  transform-origin: center center;
  will-change: transform, opacity;
  box-shadow: 0 1px 3px rgba(60, 36, 16, 0.12);
}

@keyframes hf-drift {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.5);
  }
  10% {
    opacity: var(--hf-peak-opacity, 0.85);
    transform: translate(calc(var(--hf-dx) * 0.06), calc(var(--hf-dy) * 0.05)) rotate(calc(var(--hf-rot) * 0.08)) scale(0.88);
  }
  45% {
    opacity: calc(var(--hf-peak-opacity, 0.85) * 0.82);
    transform: translate(calc(var(--hf-dx) * 0.4), calc(var(--hf-dy) * 0.38)) rotate(calc(var(--hf-rot) * 0.45)) scale(1);
  }
  75% {
    opacity: calc(var(--hf-peak-opacity, 0.85) * 0.4);
  }
  100% {
    opacity: 0;
    transform: translate(var(--hf-dx), var(--hf-dy)) rotate(var(--hf-rot)) scale(0.75);
  }
}

@keyframes hero-seal-glow {
  0%, 100% {
    filter: drop-shadow(0 10px 18px rgba(98, 28, 20, 0.2)) drop-shadow(0 0 6px rgba(196, 165, 116, 0.1));
  }
  50% {
    filter: drop-shadow(0 10px 18px rgba(98, 28, 20, 0.2)) drop-shadow(0 0 52px rgba(220, 185, 110, 0.88));
  }
}

.hero__headline-split {
  display: contents;
  font-family: var(--font-brush);
  font-weight: 400;
}

/* 主催クレジット（2枚の札の上・札なし eyebrow） */
.hero__presented-by {
  position: absolute;
  z-index: 3;
  top: max(0.2rem, env(safe-area-inset-top, 0px));
  left: 50%;
  display: block;
  max-width: min(92vw, 32rem);
  margin: 0;
  padding: 0 0.5rem;
  text-align: center;
  line-height: 0;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

.hero__presented-by-img {
  display: block;
  width: auto;
  height: clamp(3rem, 7vw, 4rem);
  max-width: 100%;
  margin: 0 auto;
  opacity: 0.94;
  filter: drop-shadow(0 1px 6px rgba(2, 24, 32, 0.55));
}

@keyframes hero-presented-by-fade {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.hero.is-open:not(.is-done):not(.is-settled) .hero__presented-by {
  animation: hero-presented-by-fade 0.62s ease-out both;
  animation-delay: calc(var(--copy-delay) - 200ms);
}

.hero.is-open .hero__presented-by,
.hero.is-done .hero__presented-by {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* めくり内に配置：上部にわずかに重なる落款 */
.hero__seal {
  position: absolute;
  z-index: 2;
  top: -2.5rem;
  right: -2.8rem;
  left: auto;
  transform: translateY(0.9rem) scale(0.72) rotate(9deg);
  display: grid;
  place-items: center;
  width: clamp(3.4rem, 70%, 4.5rem);
  aspect-ratio: 1 / 1;
  opacity: 0;
  filter: drop-shadow(0 8px 16px rgba(98, 28, 20, 0.18));
  pointer-events: none;
}

.hero__seal::before,
.hero__seal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.4rem;
}

.hero__seal::before {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.3), transparent 38%),
    linear-gradient(155deg, rgba(220, 52, 38, 0.97) 0%, rgba(178, 30, 26, 0.95) 55%, rgba(138, 18, 18, 0.92) 100%);
  border: 2.5px solid rgba(196, 165, 116, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 200, 0.35),
    inset 0 0 0 2.5px rgba(196, 165, 116, 0.25),
    inset 0 -10px 18px rgba(70, 0, 0, 0.22),
    0 0 24px 5px rgba(196, 165, 116, 0.4),
    0 0 10px 2px rgba(220, 180, 100, 0.35),
    0 0 40px 8px rgba(196, 165, 116, 0.15);
}

.hero__seal::after {
  inset: 0.24rem;
  border: 1.5px solid rgba(196, 165, 116, 0.45);
  background:
    linear-gradient(135deg, transparent 32%, rgba(255, 240, 200, 0.2) 50%, transparent 68%);
}

.hero__seal-text {
  position: relative;
  z-index: 1;
  color: rgba(255, 248, 242, 0.97);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-shadow:
    0 0 14px rgba(255, 220, 160, 0.8),
    0 0 6px rgba(255, 200, 120, 0.6),
    0 0 28px rgba(255, 210, 140, 0.35),
    0 1px 0 rgba(90, 0, 0, 0.25);
}

.hero.is-seal .hero__seal,
.hero.is-done .hero__seal {
  animation:
    hero-seal-appear 680ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
    hero-seal-glow 2.4s ease-in-out 680ms infinite;
}

@keyframes hero-seal-appear {
  0% {
    opacity: 0;
    transform: translateY(0.9rem) scale(0.72) rotate(9deg);
    filter: drop-shadow(0 4px 8px rgba(98, 28, 20, 0.1)) drop-shadow(0 0 0 rgba(196, 165, 116, 0));
  }
  50% {
    opacity: 1;
    transform: translateY(-0.15rem) rotate(3deg);
    filter: drop-shadow(0 14px 22px rgba(98, 28, 20, 0.24)) drop-shadow(0 0 36px rgba(196, 165, 116, 0.7));
  }
  100% {
    opacity: 0.96;
    transform: translateY(0) rotate(4deg);
    filter: drop-shadow(0 10px 18px rgba(98, 28, 20, 0.2)) drop-shadow(0 0 20px rgba(196, 165, 116, 0.4));
  }
}

/* 木札・漆札風の独立パネル（1・2は上部ハの字、3は下部） */
.hero__copy {
  --copy-chamfer: 18px;
  --copy-gold: #c9a557;
  --copy-gold-deep: #9a7a3a;
  --copy-gold-soft: rgba(154, 122, 58, 0.5);
  --copy-vermilion: #b93a24;
  --copy-wood: #f0e0c4;
  --copy-wood-mid: #e3cfa9;
  --copy-wood-edge: #fbf3e1;
  position: absolute;
  display: block;
  padding: 1.4rem 1.65rem 1.3rem;
  pointer-events: auto;
  opacity: 0;
  color: var(--navy);
  background:
    linear-gradient(
      165deg,
      rgba(255, 251, 240, 0.72) 0%,
      rgba(252, 244, 226, 0.5) 48%,
      rgba(240, 224, 194, 0.6) 100%
    ),
    repeating-linear-gradient(
      92deg,
      transparent 0,
      transparent 3px,
      rgba(150, 112, 58, 0.1) 3px,
      rgba(150, 112, 58, 0.1) 4px
    ),
    linear-gradient(180deg, var(--copy-wood-edge) 0%, var(--copy-wood) 42%, var(--copy-wood-mid) 100%);
  background-blend-mode: normal, multiply, normal;
  border: 2px solid var(--copy-gold-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255, 253, 246, 0.9),
    inset 0 0 0 3px rgba(148, 116, 58, 0.5),
    inset 0 0 0 5px rgba(255, 250, 236, 0.85),
    inset 0 0 0 8px rgba(126, 96, 46, 0.3),
    inset 0 0 0 9px rgba(255, 250, 236, 0.7),
    inset 0 -14px 26px rgba(150, 112, 58, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.45),
    0 12px 28px rgba(60, 36, 16, 0.3);
  clip-path: polygon(
    var(--copy-chamfer) 0,
    calc(100% - var(--copy-chamfer)) 0,
    100% var(--copy-chamfer),
    100% calc(100% - var(--copy-chamfer)),
    calc(100% - var(--copy-chamfer)) 100%,
    var(--copy-chamfer) 100%,
    0 calc(100% - var(--copy-chamfer)),
    0 var(--copy-chamfer)
  );
  filter: drop-shadow(0 10px 20px rgba(60, 36, 16, 0.28));
  /* 出現は各パネルの keyframes で制御 */
  transition: none;
}

/* 高座の「間」を活かした軽い弾み（やりすぎない） */
@keyframes hero-fuda-pop-catch {
  0% {
    opacity: 0;
    transform: translateY(28px) rotate(-14deg) scale(0.86);
  }
  62% {
    opacity: 1;
    transform: translateY(-5px) rotate(-4deg) scale(1.05);
  }
  82% {
    transform: translateY(2px) rotate(-6.5deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(-6deg) scale(1);
  }
}

@keyframes hero-fuda-pop-title {
  0% {
    opacity: 0;
    transform: translateY(28px) rotate(14deg) scale(0.86);
  }
  62% {
    opacity: 1;
    transform: translateY(-5px) rotate(4deg) scale(1.05);
  }
  82% {
    transform: translateY(2px) rotate(6.5deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(6deg) scale(1);
  }
}

@keyframes hero-fuda-pop-meta {
  0% {
    opacity: 0;
    transform: translate(-50%, 32px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.04);
  }
  82% {
    transform: translate(-50%, 2px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* 地紋・吊り穴・角金・内額 */
.hero__copy-ornament {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__copy-ornament::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wagara-hishi);
  background-size: 22px 22px;
  background-repeat: repeat;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(ellipse 9px 7px at 50% 12px, transparent 6px, #000 7.5px);
  mask-image: radial-gradient(ellipse 9px 7px at 50% 12px, transparent 6px, #000 7.5px);
}

.hero__copy-ornament::after {
  content: "";
  position: absolute;
  inset: 0.85rem 0.9rem;
  border: 1px solid var(--copy-gold-soft);
  box-shadow:
    inset 0 0 0 1px rgba(255, 253, 246, 0.75),
    0 0 0 1px rgba(154, 122, 58, 0.2);
  background:
    linear-gradient(var(--copy-gold), var(--copy-gold-deep)) left 0 top 0 / 14px 2.5px no-repeat,
    linear-gradient(var(--copy-gold), var(--copy-gold-deep)) left 0 top 0 / 2.5px 14px no-repeat,
    linear-gradient(var(--copy-gold), var(--copy-gold-deep)) right 0 top 0 / 14px 2.5px no-repeat,
    linear-gradient(var(--copy-gold), var(--copy-gold-deep)) right 0 top 0 / 2.5px 14px no-repeat,
    linear-gradient(var(--copy-gold), var(--copy-gold-deep)) left 0 bottom 0 / 14px 2.5px no-repeat,
    linear-gradient(var(--copy-gold), var(--copy-gold-deep)) left 0 bottom 0 / 2.5px 14px no-repeat,
    linear-gradient(var(--copy-gold), var(--copy-gold-deep)) right 0 bottom 0 / 14px 2.5px no-repeat,
    linear-gradient(var(--copy-gold), var(--copy-gold-deep)) right 0 bottom 0 / 2.5px 14px no-repeat,
    radial-gradient(circle at center, #e8c98a 0 1px, var(--copy-vermilion) 1.2px 2.4px, transparent 2.6px) left -1px top -1px / 6px 6px no-repeat,
    radial-gradient(circle at center, #e8c98a 0 1px, var(--copy-vermilion) 1.2px 2.4px, transparent 2.6px) right -1px top -1px / 6px 6px no-repeat,
    radial-gradient(circle at center, #e8c98a 0 1px, var(--copy-vermilion) 1.2px 2.4px, transparent 2.6px) left -1px bottom -1px / 6px 6px no-repeat,
    radial-gradient(circle at center, #e8c98a 0 1px, var(--copy-vermilion) 1.2px 2.4px, transparent 2.6px) right -1px bottom -1px / 6px 6px no-repeat;
}

/* 吊り穴の金縁リング */
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 50%;
  width: 11px;
  height: 8px;
  margin-left: -5.5px;
  pointer-events: none;
  border: 1.5px solid var(--copy-gold);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(168, 137, 78, 0.35);
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.55), transparent 70%);
}

/* 下部の飾り線（金＋朱） */
.hero__copy::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 18%;
  right: 18%;
  bottom: 0.42rem;
  height: 4px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(154, 122, 58, 0.8), transparent) center top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(185, 58, 36, 0.55), transparent) center bottom / 65% 1px no-repeat;
}

.hero__copy-text,
.hero__copy--meta .hero__subtitle,
.hero__copy--meta .hero__lead,
.hero__copy--meta .hero__cta {
  position: relative;
  z-index: 1;
}

/* 1: 左上 */
.hero__copy--catch {
  --copy-chamfer: 12px;
  top: clamp(2.6rem, 4.5vh, 3.5rem);
  left: clamp(0.75rem, 2.5vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: min(92vw, 22rem);
  padding: 0.55rem 0.65rem;
  line-height: 0;
  color: #b93a24;
  transform: translateY(28px) rotate(-14deg) scale(0.86);
  transform-origin: center center;
}

.hero__copy--catch .hero__copy-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.hero__copy--catch .hero__copy-ornament::after {
  inset: 0.4rem 0.45rem;
}

.hero__catch-img {
  display: block;
  width: min(100%, 18rem);
  height: auto;
  margin: 0 auto;
}

/* 2: 右上（ハの字）／狭い画面では1の下に余白を確保 */
.hero__copy--title {
  --copy-chamfer: 12px;
  top: clamp(7.25rem, 14vh, 9.25rem);
  right: clamp(0.75rem, 2.5vw, 1.75rem);
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 22rem);
  width: max-content;
  padding: 0.55rem 0.65rem;
  line-height: 0;
  color: var(--navy);
  text-align: center;
  transform: translateY(28px) rotate(14deg) scale(0.86);
  transform-origin: center center;
}

.hero__copy--title .hero__copy-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.hero__copy--title .hero__copy-ornament::after {
  inset: 0.4rem 0.45rem;
}

.hero__title-img {
  display: block;
  width: min(100%, 18rem);
  height: auto;
  margin: 0 auto;
}

/* 3: 下部中央 */
.hero__copy--meta {
  left: 50%;
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: min(92vw, 34rem);
  max-width: calc(100% - 1.5rem);
  padding: 1.35rem 1.45rem 0.95rem;
  text-align: center;
  transform: translate(-50%, 32px) scale(0.9);
  transform-origin: center bottom;
}

.hero.is-open:not(.is-done):not(.is-settled) .hero__copy--catch {
  animation: hero-fuda-pop-catch 0.78s ease-out both;
  animation-delay: var(--copy-delay);
}

.hero.is-open:not(.is-done):not(.is-settled) .hero__copy--title {
  animation: hero-fuda-pop-title 0.78s ease-out both;
  animation-delay: calc(var(--copy-delay) + 420ms);
}

.hero.is-open:not(.is-done):not(.is-settled) .hero__copy--meta {
  animation: hero-fuda-pop-meta 0.78s ease-out both;
  animation-delay: calc(var(--copy-delay) + 840ms);
}

.hero.is-open .hero__copy--catch,
.hero.is-done .hero__copy--catch {
  opacity: 1;
  transform: translateY(0) rotate(-6deg) scale(1);
}

.hero.is-open .hero__copy--title,
.hero.is-done .hero__copy--title {
  opacity: 1;
  transform: translateY(0) rotate(6deg) scale(1);
}

.hero.is-open .hero__copy--meta,
.hero.is-done .hero__copy--meta {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.hero.is-done .hero__copy--catch,
.hero.is-done .hero__copy--title,
.hero.is-done .hero__copy--meta,
.hero.is-done .hero__performer,
.hero.is-done .hero__performer-img--bow,
.hero.is-done .hero__performer-img--face,
.hero.is-done .hero__mekuri,
.hero.is-done .hero__mekuri-leaf,
.hero.is-done .hero__curtain {
  animation: none;
  transition: none;
}

@media (max-width: 390px) {
  .hero__presented-by {
    top: max(0.15rem, env(safe-area-inset-top, 0px));
    max-width: min(94vw, 26rem);
  }

  .hero__presented-by-img {
    height: 2.5rem;
  }

  .hero__copy--catch {
    --copy-chamfer: 10px;
    top: 2.35rem;
    left: 0.45rem;
    padding: 0.45rem 0.5rem;
  }

  .hero__copy--catch .hero__copy-ornament::after {
    inset: 0.3rem 0.35rem;
  }

  .hero__catch-img {
    width: min(100%, 14.25rem);
  }

  .hero__copy--title {
    --copy-chamfer: 10px;
    top: 2.35rem;
    right: 0.45rem;
    padding: 0.45rem 0.5rem;
  }

  .hero__copy--title .hero__copy-ornament::after {
    inset: 0.3rem 0.35rem;
  }

  .hero__title-img {
    width: min(100%, 14.25rem);
  }
}

@media (min-width: 900px) {
  .hero__presented-by {
    top: max(0.25rem, env(safe-area-inset-top, 0px));
    max-width: min(52vw, 36rem);
  }

  .hero__presented-by-img {
    height: clamp(3.25rem, 4.8vw, 4.25rem);
  }

  .hero__copy {
    --copy-chamfer: 22px;
  }

  .hero__copy--catch {
    --copy-chamfer: 16px;
    top: clamp(4rem, 7vh, 5.5rem);
    left: clamp(1.5rem, 4vw, 3rem);
    max-width: min(40vw, 26rem);
    padding: 0.7rem 0.85rem;
    transform: translateY(28px) rotate(-12deg) scale(0.86);
  }

  .hero__copy--catch .hero__copy-ornament::after {
    inset: 0.5rem 0.55rem;
  }

  .hero__catch-img {
    width: min(100%, 22rem);
  }

  .hero.is-open .hero__copy--catch,
  .hero.is-done .hero__copy--catch {
    transform: translateY(0) rotate(-5.5deg) scale(1);
  }

  .hero__copy--title {
    --copy-chamfer: 16px;
    top: clamp(5.5rem, 10vh, 8rem);
    right: clamp(1.5rem, 4vw, 3rem);
    max-width: min(52vw, 28rem);
    padding: 0.7rem 0.85rem;
    transform: translateY(28px) rotate(12deg) scale(0.86);
  }

  .hero__copy--title .hero__copy-ornament::after {
    inset: 0.5rem 0.55rem;
  }

  .hero__title-img {
    width: min(100%, 24rem);
  }

  .hero.is-open .hero__copy--title,
  .hero.is-done .hero__copy--title {
    transform: translateY(0) rotate(5.5deg) scale(1);
  }
}

@media (min-width: 1260px) {
  .hero__copy--meta {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    width: min(40rem, 52vw);
    padding: 1.35rem 1.55rem 0.95rem;
  }
}

.hero__subtitle {
  margin: 0;
  padding-top: 0.25rem;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1rem, 2vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-align: center;
  color: var(--copy-vermilion);
}

.hero__lead {
  margin: 0;
  font-family: var(--font-brush);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: rgba(0, 48, 64, 0.88);
}

.hero__lead-text--short,
.hero__cta-text--short,
.sticky-cta__date-text--short,
.sticky-cta__btn-text--short {
  display: none;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
}

/* 1100px以上：基本 flex の後に置き、長文案CTAを横並び固定 */
@media (min-width: 1100px) {
  .hero__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.85rem;
    width: 100%;
  }

  .hero__cta .btn {
    width: 100%;
    min-height: 3.1rem;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
  }
}

.hero__copy--meta .btn--ghost {
  color: var(--navy);
  border-color: rgba(0, 48, 64, 0.28);
}

.hero__copy--meta .btn--ghost:hover {
  background: rgba(0, 48, 64, 0.06);
  border-color: var(--navy);
  color: var(--navy);
}

.hero__skip,
.hero__replay {
  position: absolute;
  z-index: 6;
  top: max(0.65rem, env(safe-area-inset-top, 0px));
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  left: auto;
  width: auto;
  max-width: calc(100% - 1.25rem);
  padding: 0.3rem 0.55rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  letter-spacing: 0.04em;
  color: rgba(0, 48, 64, 0.72);
  background: rgba(255, 251, 240, 0.65);
  border: 1px solid rgba(154, 122, 58, 0.32);
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.3s ease, visibility 0.3s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.hero__skip:hover,
.hero__replay:hover {
  color: var(--navy);
  background: rgba(255, 251, 240, 0.92);
  border-color: rgba(154, 122, 58, 0.55);
}

.hero__replay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero.is-settled .hero__replay,
.hero.is-done.is-settled .hero__replay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero.is-done .hero__skip,
.hero.is-open.is-settled .hero__skip,
.hero.is-playing .hero__replay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero.is-playing:not(.is-settled) .hero__skip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 900px以下：札を同じ高さで交差。再生ボタンは札と重ねない */
@media (max-width: 899px) {
  .hero__replay {
    color: rgba(0, 48, 64, 0.7);
    background: rgba(255, 251, 240, 0.38);
    border-color: rgba(154, 122, 58, 0.28);
    backdrop-filter: blur(2px);
  }

  .hero.is-settled .hero__replay,
  .hero.is-done.is-settled .hero__replay {
    opacity: 0.68;
  }

  .hero__replay:hover,
  .hero__replay:focus-visible {
    color: var(--navy);
    background: rgba(255, 251, 240, 0.78);
    border-color: rgba(154, 122, 58, 0.45);
    opacity: 1;
  }

  .hero__copy--catch,
  .hero__copy--title {
    top: 2.75rem;
    max-width: min(70vw, 20rem);
  }

  .hero__copy--catch {
    left: 0.6rem;
    z-index: 5;
  }

  .hero__copy--title {
    right: 0.6rem;
    left: auto;
    z-index: 3;
  }

  .hero__catch-img,
  .hero__title-img {
    width: min(100%, 18rem);
  }

  /*
    900px以下は、めくりの縮み方に近い比率で演者も連続的に縮小する。
    641px境界で急に小さく見えないよう、先に滑らかな基準値を作る。
  */
  .hero__performer {
    width: clamp(15rem, 42vw, 17.75rem);
    max-width: 17.75rem;
  }

  .hero__mekuri {
    width: clamp(4.75rem, 11vw, 6.25rem);
  }

  .hero__skip,
  .hero__replay {
    top: max(0.4rem, env(safe-area-inset-top, 0px));
    right: max(0.45rem, env(safe-area-inset-right, 0px));
    left: auto;
    z-index: 7;
    padding: 0.28rem 0.5rem;
    font-size: 0.625rem;
  }

  /*
    幕上げ完了後の左右札の交互表示は、下の「≤1259px」共通ルールを参照。
    （スマホ配置のまま、タブレットでも演者との重なりを時間で逃がす）
  */
}

@media (max-width: 640px) {
  .hero__stage-3d {
    bottom: 28%;
    width: min(94vw, 420px);
    height: min(24vh, 170px);
  }

  .hero__byobu {
    bottom: calc(28% + 6.25rem);
    width: min(98vw, 520px);
    height: min(42vh, 300px);
  }

  .hero__koza {
    bottom: calc(28% + 4.25rem);
    width: min(88vw, 340px);
  }

  .hero__performer {
    width: clamp(14.75rem, 42vw, 17rem);
    max-width: 17rem;
  }

  .hero__mekuri {
    width: clamp(4.75rem, 11vw, 6rem);
  }

  .hero__mekuri-board {
    height: clamp(13.5rem, 42vw, 20rem);
  }

  .hero__copy--catch,
  .hero__copy--title {
    top: 2.55rem;
    max-width: min(82vw, 17.5rem);
  }

  .hero__copy--catch {
    left: 0.4rem;
  }

  .hero__copy--title {
    right: 0.4rem;
  }

  .hero__catch-img,
  .hero__title-img {
    width: min(100%, 15rem);
  }

  .hero__skip,
  .hero__replay {
    top: max(0.35rem, env(safe-area-inset-top, 0px));
    right: max(0.4rem, env(safe-area-inset-right, 0px));
    left: auto;
    padding: 0.25rem 0.45rem;
    font-size: 0.6rem;
  }
}

@keyframes hero-fuda-layer-catch {
  0%,
  33% {
    z-index: 5;
    opacity: 1;
    transform: translateY(0) rotate(-6deg) scale(1.04);
    filter: drop-shadow(0 12px 22px rgba(60, 36, 16, 0.38));
  }
  40%,
  93% {
    z-index: 3;
    opacity: 0.78;
    transform: translateY(8px) rotate(-6deg) scale(0.92);
    filter: drop-shadow(0 4px 10px rgba(60, 36, 16, 0.16));
  }
  100% {
    z-index: 5;
    opacity: 1;
    transform: translateY(0) rotate(-6deg) scale(1.04);
    filter: drop-shadow(0 12px 22px rgba(60, 36, 16, 0.38));
  }
}

@keyframes hero-fuda-layer-title {
  0%,
  33% {
    z-index: 3;
    opacity: 0.78;
    transform: translateY(8px) rotate(6deg) scale(0.92);
    filter: drop-shadow(0 4px 10px rgba(60, 36, 16, 0.16));
  }
  40%,
  93% {
    z-index: 5;
    opacity: 1;
    transform: translateY(0) rotate(6deg) scale(1.04);
    filter: drop-shadow(0 12px 22px rgba(60, 36, 16, 0.38));
  }
  100% {
    z-index: 3;
    opacity: 0.78;
    transform: translateY(8px) rotate(6deg) scale(0.92);
    filter: drop-shadow(0 4px 10px rgba(60, 36, 16, 0.16));
  }
}

/*
  タブレット（ハの字配置）：背面札をより透過し、演者画像が見える時間を作る
*/
@keyframes hero-fuda-layer-catch-tablet {
  0%,
  33% {
    z-index: 5;
    opacity: 1;
    transform: translateY(0) rotate(-5.5deg) scale(1);
    filter: drop-shadow(0 12px 22px rgba(60, 36, 16, 0.38));
  }
  40%,
  93% {
    z-index: 3;
    opacity: 0.22;
    transform: translateY(6px) rotate(-5.5deg) scale(0.94);
    filter: drop-shadow(0 4px 10px rgba(60, 36, 16, 0.12));
  }
  100% {
    z-index: 5;
    opacity: 1;
    transform: translateY(0) rotate(-5.5deg) scale(1);
    filter: drop-shadow(0 12px 22px rgba(60, 36, 16, 0.38));
  }
}

@keyframes hero-fuda-layer-title-tablet {
  0%,
  33% {
    z-index: 3;
    opacity: 0.22;
    transform: translateY(6px) rotate(5.5deg) scale(0.94);
    filter: drop-shadow(0 4px 10px rgba(60, 36, 16, 0.12));
  }
  40%,
  93% {
    z-index: 5;
    opacity: 1;
    transform: translateY(0) rotate(5.5deg) scale(1);
    filter: drop-shadow(0 12px 22px rgba(60, 36, 16, 0.38));
  }
  100% {
    z-index: 3;
    opacity: 0.22;
    transform: translateY(6px) rotate(5.5deg) scale(0.94);
    filter: drop-shadow(0 4px 10px rgba(60, 36, 16, 0.12));
  }
}

/*
  1259px以下：幕上げ後に左右の札を交互表示
  （スマホ＝重なり強調／タブレット＝背面を強く透過して演者を見せる）
*/
@media (max-width: 1259px) {
  .hero.is-settled .hero__copy--catch,
  .hero.is-done.is-settled .hero__copy--catch {
    animation: hero-fuda-layer-catch 6s ease-in-out infinite;
  }

  .hero.is-settled .hero__copy--title,
  .hero.is-done.is-settled .hero__copy--title {
    animation: hero-fuda-layer-title 6s ease-in-out infinite;
  }
}

@media (min-width: 900px) and (max-width: 1259px) {
  .hero.is-settled .hero__copy--catch,
  .hero.is-done.is-settled .hero__copy--catch {
    animation-name: hero-fuda-layer-catch-tablet;
  }

  .hero.is-settled .hero__copy--title,
  .hero.is-done.is-settled .hero__copy--title {
    animation-name: hero-fuda-layer-title-tablet;
  }
}

/* PC：屏風を広げ（ベース定義より後に置き上書き） */
@media (min-width: 900px) {
  .hero {
    background: #f7f0e4;
  }

  .hero__back {
    background-color: #f7f0e4;
    background-image: url("../images/hero-bg.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .hero__byobu {
    bottom: calc(22% + 8.5rem);
    width: min(92vw, 1080px);
    height: min(56vh, 520px);
    filter: drop-shadow(0 16px 28px rgba(70, 45, 24, 0.22));
  }

  .hero__stage-3d {
    bottom: 22%;
    width: min(72vw, 680px);
    height: min(30vh, 230px);
  }

  .hero__koza {
    bottom: calc(22% + 4.75rem);
  }
}


/* —— Event：紙色 —— */

/* --- V1 mobile panel (short copy) + compact hero breakpoints --- */
/* 1260px未満：下部パネルは情報量を抑え、高座（めくり等）への侵食を防ぐ */
@media (max-width: 1259px) {
  .hero__copy--meta {
    --copy-chamfer: 12px;
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    width: min(94vw, 21rem);
    padding: 0.95rem 0.9rem 0.75rem;
    gap: 0.3rem;
  }

  .hero__lead-text--full,
  .hero__cta-text--full {
    display: none;
  }

  .hero__lead-text--short,
  .hero__cta-text--short {
    display: block;
  }

  .hero__lead {
    line-height: 1.45;
  }

  .hero__subtitle {
    padding-top: 0.2rem;
    font-size: 1rem;
    letter-spacing: 0.08em;
  }

  .hero__lead-br--full {
    display: none;
  }
}

/* 641–1259px：短文案＋CTA横並び（パネル幅は高座を侵さないよう抑える） */
@media (min-width: 641px) and (max-width: 1259px) {
  .hero__copy--meta {
    width: min(92vw, 26rem);
    padding: 0.9rem 0.95rem 0.7rem;
    gap: 0.28rem;
  }

  .hero__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }

  .hero__cta .btn {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.9375rem;
  }
}

/* 900–1259px：PC札レイアウト時はパネル幅だけ少し広げる */
@media (min-width: 900px) and (max-width: 1259px) {
  .hero__copy--meta {
    width: min(88vw, 34rem);
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) {
  .hero__cta .btn {
    width: 100%;
  }

  .sticky-cta {
    gap: 0.65rem;
    padding: 0.6rem 0.85rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }

  .sticky-cta__lead,
  .sticky-cta__date-text--full,
  .sticky-cta__btn-text--full {
    display: none;
  }

  .sticky-cta__date-text--short,
  .sticky-cta__btn-text--short {
    display: inline;
  }

  .sticky-cta__date {
    margin-right: 0;
    flex-shrink: 0;
  }

  .sticky-cta__text {
    font-size: 1rem;
    line-height: 1.3;
  }

  body {
    padding-bottom: 3.75rem;
  }

  .site-footer {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 420px) {
  .sticky-cta__text {
    font-size: 0.975rem;
  }
}

/* 短い画面（iPhone SE など）：機種指定せず高さで圧縮 */
@media (max-width: 480px) and (max-height: 740px) {
  .hero__copy--catch,
  .hero__copy--title {
    top: 2.1rem;
    max-width: min(78vw, 14.5rem);
  }

  .hero__catch-img,
  .hero__title-img {
    width: min(100%, 13rem);
  }

  .hero__performer {
    width: min(46vw, 200px, 22vh);
    max-width: 200px;
  }

  .hero__mekuri {
    width: clamp(3.25rem, 9vw, 4.75rem);
  }

  .hero__mekuri-board {
    height: clamp(8.25rem, 28vh, 12.5rem);
  }

  .hero__stage-3d {
    bottom: 26%;
    height: min(18vh, 130px);
  }

  .hero__byobu {
    bottom: calc(26% + 4.5rem);
    height: min(34vh, 220px);
  }

  .hero__koza {
    bottom: calc(26% + 3.25rem);
  }

  .hero__copy--meta {
    bottom: calc(3.85rem + env(safe-area-inset-bottom, 0px));
    padding: 0.85rem 0.75rem 0.55rem;
    gap: 0.35rem;
  }

  .hero__copy--meta .btn--ghost {
    display: none;
  }

  .hero__lead {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .hero__cta .btn {
    min-height: 2.65rem;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 430px) and (max-height: 620px) {
  .hero__lead {
    display: none;
  }

  .hero__copy--catch,
  .hero__copy--title {
    top: 1.95rem;
    max-width: min(76vw, 13.25rem);
  }

  .hero__catch-img,
  .hero__title-img {
    width: min(100%, 12rem);
  }

  .hero__performer {
    width: min(42vw, 168px, 20vh);
    max-width: 168px;
  }

  .hero__copy--meta {
    padding: 0.75rem 0.7rem 0.45rem;
  }
}

/* Surface Duo など：中幅で縦が短い（SE条件 480px の外側） */
@media (min-width: 481px) and (max-width: 700px) and (max-height: 740px) {
  .hero__copy--catch,
  .hero__copy--title {
    top: 2.2rem;
    max-width: min(62vw, 16rem);
  }

  .hero__catch-img,
  .hero__title-img {
    width: min(100%, 14rem);
  }

  .hero__performer {
    width: min(40vw, 200px, 28vh);
    max-width: 200px;
  }

  .hero__mekuri {
    width: clamp(3.5rem, 8vw, 5rem);
  }

  .hero__mekuri-board {
    height: clamp(8.5rem, 26vh, 13rem);
  }

  .hero__stage-3d {
    bottom: 24%;
    height: min(18vh, 140px);
  }

  .hero__byobu {
    bottom: calc(24% + 4.75rem);
    height: min(36vh, 240px);
  }

  .hero__koza {
    bottom: calc(24% + 3.35rem);
  }

  .hero__copy--meta {
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    padding: 0.85rem 0.85rem 0.6rem;
    gap: 0.4rem;
  }

  .hero__copy--meta .btn--ghost {
    display: none;
  }
}

/* Nest Hub：横長で縦が特に短い（1024×600）。通常ノート 768px 以上には当てない */
@media (min-width: 900px) and (max-height: 640px) {
  .hero__presented-by {
    top: max(0.1rem, env(safe-area-inset-top, 0px));
  }

  .hero__presented-by-img {
    height: 2.5rem;
  }

  .hero__copy--catch {
    top: clamp(1.75rem, 4vh, 2.75rem);
    max-width: min(34vw, 18rem);
  }

  .hero__copy--title {
    top: clamp(2.25rem, 6vh, 3.5rem);
    max-width: min(38vw, 20rem);
  }

  .hero__catch-img {
    width: min(100%, 16rem);
  }

  .hero__title-img {
    width: min(100%, 17.5rem);
  }

  .hero__performer {
    width: min(22vw, 200px, 34vh);
    max-width: 200px;
  }

  .hero__mekuri {
    width: clamp(3.5rem, 6vw, 5.25rem);
  }

  .hero__mekuri-board {
    height: clamp(8rem, 30vh, 13rem);
  }

  .hero__stage-3d {
    bottom: 18%;
    height: min(20vh, 130px);
  }

  .hero__byobu {
    bottom: calc(18% + 6rem);
    height: min(42vh, 260px);
  }

  .hero__koza {
    bottom: calc(18% + 3.25rem);
  }

  .hero__copy--meta {
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    padding: 0.7rem 1.1rem 0.75rem;
    gap: 0.45rem;
  }
}

/* Nest Hub Max（1280×800）。1366×768 ノートと 1440×900 には当てない */
@media (min-width: 1180px) and (max-width: 1320px) and (max-height: 810px) {
  .hero__presented-by {
    top: max(0.15rem, env(safe-area-inset-top, 0px));
  }

  .hero__presented-by-img {
    height: 2.75rem;
  }

  .hero__copy--catch {
    top: clamp(2.25rem, 4.5vh, 3.25rem);
    max-width: min(32vw, 20rem);
  }

  .hero__copy--title {
    top: clamp(3rem, 7vh, 4.5rem);
    max-width: min(36vw, 22rem);
  }

  .hero__catch-img {
    width: min(100%, 17.5rem);
  }

  .hero__title-img {
    width: min(100%, 19rem);
  }

  .hero__performer {
    width: min(20vw, 220px, 36vh);
    max-width: 220px;
  }

  .hero__stage-3d {
    bottom: 20%;
    height: min(22vh, 160px);
  }

  .hero__byobu {
    bottom: calc(20% + 6.5rem);
    height: min(46vh, 320px);
  }

  .hero__koza {
    bottom: calc(20% + 3.75rem);
  }
}

/* —— Motion —— */

@media (prefers-reduced-motion: reduce) {
  .hero {
    --curtain-ms: 0ms;
    --reveal-delay: 0ms;
    --mekuri-flip-ms: 0ms;
    --performer-fade-ms: 0ms;
    --face-ms: 0s;
    --copy-delay: 0ms;
  }

  .hero__presented-by,
  .hero__copy--catch,
  .hero__copy--title,
  .hero__copy--meta {
    animation: none !important;
  }

  .btn:hover {
    transform: none;
  }
}

@media (max-width: 1259px) and (prefers-reduced-motion: reduce) {
  .hero.is-open .hero__copy--catch,
  .hero.is-done .hero__copy--catch,
  .hero.is-settled .hero__copy--catch,
  .hero.is-done.is-settled .hero__copy--catch {
    animation: none !important;
    z-index: 5;
    opacity: 1;
    transform: translateY(0) rotate(-6deg) scale(1.02);
    filter: drop-shadow(0 10px 20px rgba(60, 36, 16, 0.28));
  }

  .hero.is-open .hero__copy--title,
  .hero.is-done .hero__copy--title,
  .hero.is-settled .hero__copy--title,
  .hero.is-done.is-settled .hero__copy--title {
    animation: none !important;
    z-index: 3;
    opacity: 0.82;
    transform: translateY(6px) rotate(6deg) scale(0.94);
    filter: drop-shadow(0 4px 10px rgba(60, 36, 16, 0.16));
  }
}

@media (min-width: 900px) and (max-width: 1259px) and (prefers-reduced-motion: reduce) {
  .hero.is-open .hero__copy--catch,
  .hero.is-done .hero__copy--catch,
  .hero.is-settled .hero__copy--catch,
  .hero.is-done.is-settled .hero__copy--catch {
    transform: translateY(0) rotate(-5.5deg) scale(1);
  }

  .hero.is-open .hero__copy--title,
  .hero.is-done .hero__copy--title,
  .hero.is-settled .hero__copy--title,
  .hero.is-done.is-settled .hero__copy--title {
    transform: translateY(0) rotate(5.5deg) scale(1);
    opacity: 0.82;
  }
}