/* main.css（LP 本体）
 * Cache-Control: no-cache（毎回再検証）。通常はファイル名を変えない。
 *
 * 並びはページ DOM 順ではなく、共通部品 → 横断 UI → セクション固有 → 演出。
 * ルールの並べ替えはしない（この目次は検索用）。
 *
 * ── 目次（おおよその行位置／検索用）──
 *   〜100     全体：星空 / CRT 走査線
 *   〜320     共通：.panel / .panel-tag / .hud-tab / gridlines / live-dot / stagger-bars
 *   〜700     FOOD·MARKET / PHOTO RX / MUSIC ホロ / FAQ
 *   〜840     FIELD OBJECTS
 *   〜950     #happylow（帯・CHARACTER FLIP）
 *   〜1070    #tickets BOARDING PASS（ticket-card / ribbon）
 *   〜1600    #tickets PRICING（table · 券種は .hud-tab／quota·notes·examples は .panel-tag）／SIMULATOR
 *   〜2070    #info DATE·LOCATION
 *   〜2750    CREW glitch / Magical Text / INTERLUDE
 *   〜3600    TBA tape / ARCADE / YOUR SIGNAL dialog / MUSIC 見出し
 *   〜4025    ページローダー
 *   〜4210〜  ナビ / フッター / CREW hover / ランタン
 *
 * ヒーロー FV（tour 風）のスタイルは css/lp-hero.css。
 */


html, body { background: var(--color-ink); overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; }
.arcade, .arcade-game, .meteor-game, .takibi-game {
  max-width: 100%;
}
::selection { color: var(--color-ink); background: var(--color-tiffany); }

/* 使用: ノッチ／ツールバー帯
   効果: 定義は site-chrome.css（ここでは触れない） */

/* 使用: body 直下 .starfield（下地は site-chrome.css）
   効果: LP のみ点滅とスクロールパララックス。arcade 単体は下地のみ */
.starfield {
  background-position:
    0 var(--star-y-a, 0px),
    0 var(--star-y-b, 0px),
    0 var(--star-y-c, 0px),
    0 var(--star-y-d, 0px),
    0 var(--star-y-e, 0px),
    0 var(--star-y-f, 0px),
    0 var(--star-y-g, 0px),
    0 var(--star-y-a, 0px),
    0 var(--star-y-c, 0px);
  will-change: background-position;
}
/* 点滅レイヤ（2系統・位相ずらし） */
.starfield::before,
.starfield::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}
.starfield::before {
  background-image:
    radial-gradient(1.75px 1.75px at 30% 40%, var(--paper-a90) 50%, transparent),
    radial-gradient(2.5px 2.5px at 70% 25%, color-mix(in srgb, var(--color-yellow) 70%, transparent) 50%, transparent);
  background-size: 280px 280px, 360px 360px;
  animation: starfield-twinkle-a 3.4s ease-in-out infinite;
}
.starfield::after {
  background-image:
    radial-gradient(1.75px 1.75px at 55% 68%, var(--tiffany-a72) 50%, transparent),
    radial-gradient(2px 2px at 18% 78%, color-mix(in srgb, var(--color-purple) 62%, transparent) 50%, transparent);
  background-size: 320px 320px, 410px 410px;
  animation: starfield-twinkle-b 4.2s ease-in-out infinite;
  animation-delay: -1.7s;
}
@keyframes starfield-twinkle-a {
  0%, 100% { opacity: 0.25; }
  45% { opacity: 1; }
  70% { opacity: 0.4; }
}
@keyframes starfield-twinkle-b {
  0%, 100% { opacity: 0.2; }
  35% { opacity: 0.85; }
  60% { opacity: 1; }
}
@supports (animation-timeline: scroll()) {
  .starfield {
    animation: starfield-parallax linear both;
    animation-timeline: scroll(root);
  }
  @keyframes starfield-parallax {
    from {
      background-position:
        0 0px, 0 0px, 0 0px, 0 0px, 0 0px, 0 0px, 0 0px, 0 0px, 0 0px;
    }
    to {
      /* レイヤーごとに速度差（全体として上方向へ） */
      background-position:
        0 -120px,
        0 -200px,
        0 -90px,
        0 -160px,
        0 -240px,
        0 -70px,
        0 -180px,
        0 -110px,
        0 -150px;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .starfield {
    animation: none !important;
    top: var(--notch-cover-h);
    bottom: 0;
    height: auto;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
  }
  .starfield::before,
  .starfield::after {
    animation: none !important;
    opacity: 0.65;
  }
}
/* 使用: body::after（全ページ共通オーバーレイ）
   効果: CRT 風走査線。上端はノッチ帯下から。
   z-index は dialog（9995）・page-loader（9999）の上、lantern-overlay（10020）の下。
   pointer-events: none のためタップは透過する。 */
body::after {
  content: "";
  position: fixed;
  top: var(--notch-cover-h);
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  z-index: 10010;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px);
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  body::after {
    display: none;
  }
}

/* 使用: 各セクションの .panel（ヒーロー・INFO・チケット枠など）
効果: 四隅ブラケット付き罫線ボックス。bg-* ありは背景を Tailwind に委ねる（v4 @layer 対策） */
.panel { position: relative; border: 1px solid var(--paper-a28); }
/* background ショートハンドだと .gridlines の background-image を潰すため color のみ */
.panel:not([class*="bg-"]) { background-color: var(--paper-a02); }
/* 四隅を1px border の外側に出す */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--color-tiffany);
  z-index: 30; pointer-events: none; box-sizing: border-box;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.panel--no-brackets::before,
.panel--no-brackets::after {
  content: none;
  display: none;
}
/* 使用: .ticket-sim / #fieldobjects（参加表明 .signal-ribbon と同値）
   効果: site-main の横パディングを打ち消しフルブリード。内側は px-4 / lg:px-9 相当＋はみ出し分 */
.section-fullbleed {
  --section-fullbleed: 0.625rem;
  width: calc(100% + (var(--section-fullbleed) * 2));
  max-width: none;
  margin-inline: calc(var(--section-fullbleed) * -1);
  padding-inline: calc(1rem + var(--section-fullbleed));
  isolation: isolate;
  border: none;
}
@media (min-width: 640px) {
  .section-fullbleed {
    --section-fullbleed: 0.875rem;
  }
}
@media (min-width: 1024px) {
  .section-fullbleed {
    --section-fullbleed: 1.25rem;
    padding-inline: calc(2.25rem + var(--section-fullbleed));
  }
}
/* 使用: .acts-wipe（MUSIC と ACTIVITY の間）
   効果: 白文字の上に固定グラデを multiply。字形だけ緑→黄→赤になり、文字は横流し */
.acts-wipe {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: 0;
  padding-block: 0.12em;
  border: none;
  /* multiply 用の下地（ページ ink と同系） */
  background-color: var(--color-ink);
  --acts-wipe-red: #c62828;
  --acts-wipe-yellow: var(--color-yellow);
  --acts-wipe-green: #1b8a3e;
}
.acts-wipe__track {
  position: relative;
  z-index: 0;
  display: flex;
  width: max-content;
  max-width: none;
  margin: 0;
  font-family: var(--font-jost);
  font-size: clamp(4.375rem, 16vw, 11.875rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #fff;
  animation: acts-wipe 14s linear infinite;
}
.acts-wipe__track span {
  flex: none;
  padding-right: 0.35em;
  color: inherit;
}
.acts-wipe__grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    var(--acts-wipe-green) 0%,
    var(--acts-wipe-green) 26%,
    var(--acts-wipe-yellow) 38%,
    var(--acts-wipe-yellow) 58%,
    var(--acts-wipe-red) 72%,
    var(--acts-wipe-red) 100%
  );
  mix-blend-mode: multiply;
}
@keyframes acts-wipe {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .acts-wipe__track {
    animation: none;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .acts-wipe__track span[aria-hidden] {
    display: none;
  }
}
/* 使用: .interlude .panel（キャッチコピー帯）
   効果: 枠・青い四隅ブラケットを非表示（色面背景は維持） */
.catch-copy.panel {
  border: none;
}
.catch-copy.panel::before,
.catch-copy.panel::after {
  content: none;
  display: none;
}
/* 使用: .interlude .panel.bg-*
   効果: 色面背景を明示（v4 で utilities が unlayered .panel より弱いため） */
.catch-copy.panel.bg-grey { background-color: var(--color-grey); }
.catch-copy.panel.bg-purple { background-color: var(--color-purple); }
.catch-copy.panel.bg-yellow { background-color: var(--color-yellow); }
.catch-copy.panel.bg-tiffany { background-color: var(--color-tiffany); }
.catch-copy.text-ink { color: var(--color-ink); }
.catch-copy.text-paper { color: var(--color-paper); }
/* 使用: #signal-connected（インタールード 01）
   効果: 外枠 border のみ復元 */
.catch-copy--static.panel {
  border: 1px solid var(--paper-a28);
}
/* 使用: #crew .crew-card.panel
   効果: 四隅ブラケット非表示。::before は liquid wipe 用（CREW 節） */
.crew-card.panel::after {
  content: none;
  display: none;
}
/* 使用: #mission .mission-brief（MISSION BRIEF 本文）
   効果: double frame tablet shell（v6）。色は .panel に合わせる */
.about-tablet {
  --about-line1: var(--paper-a28);
  --about-line2: var(--paper-a28);
  --about-bg: var(--paper-a02);
  --about-corner-cut: 22px;
  --about-notch-long: 48px;
  --about-notch-short: 36px;
  --about-notch-h: 9px;
  --about-outer-inset: 18px;
  --about-screen-inset: calc(var(--about-outer-inset) + 2px);
  min-width: 0;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}
.about-tablet__shell {
  position: relative;
  border: 1px solid var(--about-line1);
  background: var(--about-bg);
  clip-path: polygon(
    0 var(--about-corner-cut),
    var(--about-corner-cut) 0,
    calc(50% - var(--about-notch-long)) 0,
    calc(50% - var(--about-notch-short)) var(--about-notch-h),
    calc(50% + var(--about-notch-short)) var(--about-notch-h),
    calc(50% + var(--about-notch-long)) 0,
    calc(100% - var(--about-corner-cut)) 0,
    100% var(--about-corner-cut),
    100% calc(100% - var(--about-corner-cut)),
    calc(100% - var(--about-corner-cut)) 100%,
    calc(50% + var(--about-notch-long)) 100%,
    calc(50% + var(--about-notch-short)) calc(100% - var(--about-notch-h)),
    calc(50% - var(--about-notch-short)) calc(100% - var(--about-notch-h)),
    calc(50% - var(--about-notch-long)) 100%,
    var(--about-corner-cut) 100%,
    0 calc(100% - var(--about-corner-cut))
  );
  overflow: hidden;
}
.about-tablet__inner {
  position: absolute;
  inset: var(--about-outer-inset);
  z-index: 2;
  border: 1px solid var(--about-line2);
  clip-path: polygon(
    0 16px,
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px)
  );
  pointer-events: none;
}
.about-tablet__screen {
  position: relative;
  z-index: 1;
  margin: var(--about-screen-inset);
  clip-path: polygon(
    0 12px,
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px)
  );
  overflow: hidden;
  /* 星空を透かすガラス下地＋斜めハッチ */
  background-color: color-mix(in srgb, var(--color-surface) 32%, transparent);
  background-image: repeating-linear-gradient(
    45deg,
    var(--paper-a05) 0,
    var(--paper-a05) 1px,
    transparent 1px,
    transparent 11px
  );
}
.about-tablet__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* TBA（.ph::after）と同じ tiffany 細グリッド */
  background-image:
    linear-gradient(to right, var(--tiffany-a06) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tiffany-a06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.about-tablet__body {
  position: relative;
  z-index: 1;
  padding: 1.35rem 1.25rem 1.5rem;
}
@media (min-width: 1024px) {
  .about-tablet__body {
    padding: 2rem 2.25rem 2.25rem;
  }
}
@media (max-width: 639px) {
  .about-tablet {
    --about-corner-cut: 18px;
    --about-notch-long: 40px;
    --about-notch-short: 30px;
    --about-notch-h: 8px;
    --about-outer-inset: 14px;
  }
  .about-tablet__body {
    padding: 1.1rem 1rem 1.25rem;
  }
}

/* 使用: #about .about-kw（MISSION BRIEF 本文）
   効果: guide/15 KEYWORD POP — 文節フェード後にキーワードが太く立つ
   要: M PLUS 1 可変（wght 軸） */
.about-kw {
  --about-kw-ease: cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  font-variation-settings: "wght" 400;
}
.about-kw__cl,
.about-kw__kw {
  display: inline;
}
.about-kw__cl {
  opacity: 0;
  color: var(--paper-a80);
}
.about-kw__kw {
  opacity: 0;
  color: var(--color-paper);
  font-variation-settings: "wght" 400;
}
.about-kw.is-in .about-kw__cl {
  opacity: 1;
  transition: opacity 0.7s ease;
  transition-delay: calc(var(--ci) * 0.1s);
}
.about-kw.is-in .about-kw__kw {
  animation: about-kw-pop 0.75s var(--about-kw-ease) both;
  animation-delay: calc(var(--ct) * 0.1s + var(--ki) * 0.17s - 0.35s);
}
@keyframes about-kw-pop {
  0% {
    opacity: 0;
    font-variation-settings: "wght" 300;
  }
  55% {
    opacity: 1;
    font-variation-settings: "wght" 900;
  }
  100% {
    opacity: 1;
    font-variation-settings: "wght" 700;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-kw__cl,
  .about-kw__kw {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .about-kw__cl {
    color: var(--paper-a80);
  }
  .about-kw__kw {
    color: var(--color-paper);
    font-variation-settings: "wght" 700;
  }
}

/* 使用: #tickets .ticket-pricing サブ見出しなど
   効果: guide/08 Tabs & Headers（tab-chip）相当の HUD チップ */
.hud-tab {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
  width: fit-content;
  max-width: 100%;
  min-height: 2.125rem;
  margin: 0;
  padding: 0.4rem 2.5rem 0.4rem 0.9rem;
  box-sizing: border-box;
  border: 1px solid var(--color-tiffany);
  color: var(--color-tiffany);
  background: linear-gradient(180deg, var(--paper-a04), var(--paper-a02));
  clip-path: polygon(12px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow:
    0 0 16px var(--tiffany-a18),
    inset 0 0 10px var(--tiffany-a06);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.hud-tab::after {
  content: "";
  position: absolute;
  right: 0.625rem;
  top: 50%;
  width: 1.5rem;
  height: 2px;
  transform: translateY(-50%) skewX(-35deg);
  background: currentColor;
  opacity: 0.75;
  pointer-events: none;
}
.hud-tab__meta {
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--tiffany-a80);
}
.hud-tab__icon {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  object-fit: contain;
  /* 黒SVGを .hud-tab の tiffany 文字色に寄せる */
  filter: brightness(0) invert(62%) sepia(53%) saturate(503%) hue-rotate(139deg) brightness(94%) contrast(89%);
}
@media (max-width: 639px) {
  .hud-tab {
    padding-right: 2.25rem;
  }
}
/* 使用: 各 h2 タイトルパネル等の .gridlines
   効果: 座標グリッド下地 */
.gridlines {
  background-image:
    linear-gradient(to right, var(--paper-a09) 1px, transparent 1px),
    linear-gradient(to bottom, var(--paper-a09) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* 使用: #protocol / #faq のリスト行
   効果: プロトコル行・FAQ 行の共通タイポ／区切り */
.gridlines--soft {
  background-image:
    linear-gradient(to right, var(--paper-a05) 1px, transparent 1px),
    linear-gradient(to bottom, var(--paper-a05) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* 使用: interlude 小見出し先頭（.stagger-bars）
   効果: STAGGERED BARS 縮小版。親の text-color に追従 */
.stagger-bars {
  display: inline-flex;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 0.14em;
  height: 0.85em;
}
.stagger-bars__bar {
  display: block;
  width: 0.18em;
  height: 100%;
  border-radius: 9999px;
  background: currentColor;
  transform-origin: bottom;
  animation: stagger-bars-pulse 1.3s ease-in-out infinite;
}
.stagger-bars__bar:nth-child(2) { animation-delay: 0.08s; }
.stagger-bars__bar:nth-child(3) { animation-delay: 0.16s; }
.stagger-bars__bar:nth-child(4) { animation-delay: 0.24s; }
.stagger-bars__bar:nth-child(5) { animation-delay: 0.32s; }
@keyframes stagger-bars-pulse {
  0%, 100% { scale: 1 0.25; opacity: 0.4; }
  50% { scale: 1 1; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stagger-bars__bar {
    animation: none;
    opacity: 0.85;
    scale: 1 0.7;
  }
}

/* 使用: #mashup-booth の FOOD / MARKET / SUPPORTERS ベンダーロゴ枠
   効果: ロゴ枠。スマホは余白少なめ＝ロゴ大きく。img は白黒反転 */
.vendor-logo {
  position: relative;
  display: flex;
  aspect-ratio: 4 / 3;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--paper-a15);
  background: var(--paper-a03);
  padding: 0.85rem;
  color: inherit;
}
@media (min-width: 640px) {
  .vendor-logo { padding: 1.75rem; }
}
@media (min-width: 1024px) {
  .vendor-logo { padding: 2.75rem; }
}
.vendor-logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  /* FOOD / MARKET / SUPPORTERS：黒↔白を反転（brightness(0) だと白も潰れて全部白になる） */
  filter: invert(1) drop-shadow(0 0 0 transparent);
}
/* 使用: a.vendor-logo / a.signal-mark（掲載ロゴのリンク枠）
   効果: hover は枠色＋ロゴ拡大＋tiffany グロー（box の shadow / 浮き上がりなし） */
a.vendor-logo,
a.signal-mark {
  transition: border-color 0.4s ease;
}
a.vendor-logo img,
a.signal-mark img {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
  a.vendor-logo:hover,
  a.vendor-logo:focus-visible,
  a.signal-mark:hover,
  a.signal-mark:focus-visible {
    border-color: var(--tiffany-a45);
    outline: none;
  }
  a.vendor-logo:hover img,
  a.vendor-logo:focus-visible img {
    transform: scale(1.04);
    filter: invert(1) drop-shadow(0 0 18px var(--tiffany-a32));
  }
  a.signal-mark:hover img,
  a.signal-mark:focus-visible img {
    transform: scale(1.04);
    filter: drop-shadow(0 0 18px var(--tiffany-a32));
  }
  a.signal-mark--invert:hover img,
  a.signal-mark--invert:focus-visible img {
    filter: invert(1) drop-shadow(0 0 18px var(--tiffany-a32));
  }
}
a.vendor-logo:active,
a.signal-mark:active {
  border-color: var(--tiffany-a45);
}
@media (prefers-reduced-motion: reduce) {
  a.vendor-logo,
  a.signal-mark,
  a.vendor-logo img,
  a.signal-mark img {
    transition: none !important;
  }
  a.vendor-logo:hover,
  a.vendor-logo:focus-visible,
  a.signal-mark:hover,
  a.signal-mark:focus-visible {
    transform: none;
  }
  a.vendor-logo:hover img,
  a.vendor-logo:focus-visible img {
    transform: none;
    filter: invert(1) drop-shadow(0 0 0 transparent);
  }
  a.signal-mark:hover img,
  a.signal-mark:focus-visible img {
    transform: none;
    filter: drop-shadow(0 0 0 transparent);
  }
  a.signal-mark--invert:hover img,
  a.signal-mark--invert:focus-visible img {
    filter: invert(1) drop-shadow(0 0 0 transparent);
  }
}
@media (max-width: 1023px) {
  .vendor-index {
    display: none;
  }
}

/* 使用: #mashup-booth / 各 .photo-rx（PHOTO TRANSMISSION）
   効果: 画面に入ったとき1回の受信スキャン（退出してもリセットしない）。JS: photo-rx.js */
.photo-rx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.photo-rx > img {
  position: relative;
  z-index: 1;
}
.photo-rx > .vendor-index {
  z-index: 4;
}
.photo-rx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    var(--color-ink) 0 4px,
    color-mix(in srgb, var(--color-ink) 92%, transparent) 5px 7px
  );
  transform: translate3d(0, 0, 0);
}
.photo-rx::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 3px;
  pointer-events: none;
  background: var(--color-tiffany);
  box-shadow: 0 0 18px var(--tiffany-a85);
  opacity: 0;
}
.photo-rx.is-received::before {
  animation: photo-rx-mask 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--rx-i, 0) * 0.08s);
}
.photo-rx.is-received::after {
  opacity: 1;
  animation: photo-rx-scan 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--rx-i, 0) * 0.08s);
}
@keyframes photo-rx-mask {
  0%, 8% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 103%, 0); }
}
@keyframes photo-rx-scan {
  0%, 8% { top: 0; opacity: 1; }
  92% { top: 100%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-rx::before,
  .photo-rx::after {
    display: none !important;
    animation: none !important;
  }
}
/* 使用: #music アーティストカード等のホロ面
   効果: ホロ／スキャン面の下地 */
.ph { position: relative; background-color: var(--color-surface); overflow: hidden;
  background-image: repeating-linear-gradient(45deg, var(--paper-a05) 0, var(--paper-a05) 1px, transparent 1px, transparent 11px); }
.ph::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--tiffany-a06) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--tiffany-a06) 1px, transparent 1px);
  background-size: 22px 22px; }

/* 使用: セクション巨大見出し（outline タイポ）
   効果: アウトライン巨大見出し */
.outline-paper { color: transparent; -webkit-text-stroke: 1.5px var(--paper-a85); }

/* 使用: #music .artist-card 左上ラベル
   効果: ラベル視認性の調整。lg 未満は非表示 */
.artist-card-tag {
  padding: 0.2rem 0.45rem;
  background: color-mix(in srgb, var(--color-ink) 72%, transparent);
  color: var(--color-paper);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(2px);
  white-space: nowrap;
}
.artist-card-tag--accent {
  color: var(--color-tiffany);
}
@media (max-width: 1023px) {
  .artist-kira__meta {
    display: none;
  }
}

/* 使用: #music アーティスト写真
   効果: チケットと同系ホログロー（キラッ／拡大なし） */
.artist-kira {
  --mx: 50%;
  --my: 50%;
  isolation: isolate;
}
.artist-kira__glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      rgba(255, 255, 255, 0.42),
      var(--tiffany-a28) 16%,
      transparent 46%
    ),
    linear-gradient(
      120deg,
      transparent 18%,
      rgba(168, 135, 255, 0.32),
      color-mix(in srgb, var(--color-yellow) 26%, transparent),
      transparent 78%
    );
  mix-blend-mode: screen;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .artist-kira:hover .artist-kira__glow {
    opacity: 0.75;
  }
}
/* 使用: #music（max-width: 1023px）
   効果: スクロール到達で PC hover と同じホログロー */
.artist-kira.is-active .artist-kira__glow {
  opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
  .artist-kira:hover .artist-kira__glow,
  .artist-kira.is-active .artist-kira__glow {
    opacity: 0;
  }
}
.artist-kira > img,
.artist-kira > picture > img,
.artist-kira > .ph {
  z-index: 0;
}
.artist-kira > img,
.artist-kira > picture > img {
  object-position: top;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center top;
}
@media (max-width: 1023px) {
  .artist-kira--crop-8 > img,
  .artist-kira--crop-8 > picture > img {
    object-position: center 8%;
  }
  .artist-kira--crop-12 > img,
  .artist-kira--crop-12 > picture > img {
    object-position: center 12%;
  }
  .artist-kira--crop-20 > img,
  .artist-kira--crop-20 > picture > img {
    object-position: center 20%;
  }
  .artist-kira--crop-25 > img,
  .artist-kira--crop-25 > picture > img {
    object-position: center 25%;
  }
  .artist-kira--crop-30 > img,
  .artist-kira--crop-30 > picture > img {
    object-position: center 30%;
  }
}
@media (hover: hover) and (pointer: fine) {
  .artist-kira:hover > img,
  .artist-kira:hover > picture > img {
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .artist-kira > img,
  .artist-kira > picture > img {
    transition: none !important;
  }
  .artist-kira:hover > img,
  .artist-kira:hover > picture > img {
    transform: none;
  }
}
.artist-kira > .artist-kira__veil,
.artist-kira > .artist-kira__veil-top {
  z-index: 2;
}
.artist-kira > .artist-kira__meta,
.artist-kira > .artist-kira__copy,
.artist-kira > .artist-kira__link {
  z-index: 4;
}
.artist-kira__link {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-tiffany);
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.artist-kira__link:hover,
.artist-kira__link:focus-visible {
  text-decoration: underline;
  color: var(--color-paper);
}
/* 使用: #music IG リンク（max-width: 1023px）
   効果: 「INSTAGRAM」非表示・矢印のみ。PC は文言＋矢印 */
@media (max-width: 1023px) {
  .artist-kira__link-label {
    display: none;
  }
  .artist-kira__link {
    gap: 0;
    padding: 0.35rem;
    margin: -0.35rem;
  }
  .artist-kira__link:hover,
  .artist-kira__link:focus-visible {
    text-decoration: none;
  }
}

/* 使用: #music .artist-lineup（max-width: 1023px）
   効果: 写真の上下を交互に斜めクリップして噛み合わせ、縦1列をジグザグに見せる。
   先頭の上辺・末尾の下辺は直線。PC（lg+）はクリップしない。 */
.artist-lineup {
  --artist-zig-t: 0.1;
  /* スマホは 3/2（3/4 の半分の高さ）。overlap = 切込高さ / 幅 = t × 2/3 */
  --artist-zig-overlap: calc(100% * var(--artist-zig-t) * -2 / 3);
  /* 下辺斜めの傾き（高さ変化 / 幅） */
  --artist-zig-angle: atan(calc(var(--artist-zig-t) * 2 / 3));
}
.artist-lineup .grid,
.artist-lineup .artist-kira-pack {
  overflow: visible;
}
@media (min-width: 1024px) {
  .artist-lineup .grid,
  .artist-lineup .artist-kira-pack {
    overflow: hidden;
  }
}
@media (max-width: 1023px) {
  .artist-lineup .artist-kira {
    aspect-ratio: 3 / 2;
  }
  .artist-lineup .artist-kira + .artist-kira,
  .artist-lineup .grid + .artist-kira-pack {
    margin-top: calc(var(--artist-zig-overlap) - 1px);
  }
  .artist-kira--zig-start {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% * (1 - var(--artist-zig-t))));
  }
  .artist-kira--zig-b {
    clip-path: polygon(
      0 0,
      100% calc(100% * var(--artist-zig-t)),
      100% calc(100% * (1 - var(--artist-zig-t))),
      0 100%
    );
  }
  .artist-kira--zig-a {
    clip-path: polygon(
      0 calc(100% * var(--artist-zig-t)),
      100% 0,
      100% 100%,
      0 calc(100% * (1 - var(--artist-zig-t)))
    );
  }
  /* zig-a の上辺 + 下辺直線（末尾。直前が zig-b のとき） */
  .artist-kira--zig-end {
    clip-path: polygon(
      0 calc(100% * var(--artist-zig-t)),
      100% 0,
      100% 100%,
      0 100%
    );
  }

  /* 文字を下辺の斜めに合わせる（start/a: 右下がり / b: 右上がり / end: 直線） */
  .artist-lineup .artist-kira__copy {
    left: 1rem;
    right: 2.75rem;
  }
  .artist-lineup .artist-kira__link {
    right: 1rem;
  }
  .artist-kira--zig-start .artist-kira__copy,
  .artist-kira--zig-a .artist-kira__copy {
    bottom: calc(100% * var(--artist-zig-t) + 0.75rem);
    transform: rotate(var(--artist-zig-angle));
    transform-origin: left bottom;
  }
  .artist-kira--zig-start .artist-kira__link,
  .artist-kira--zig-a .artist-kira__link {
    bottom: 0.75rem;
    transform: rotate(var(--artist-zig-angle));
    transform-origin: right bottom;
  }
  .artist-kira--zig-b .artist-kira__copy {
    left: 2.75rem;
    right: 1rem;
    bottom: calc(100% * var(--artist-zig-t) + 0.75rem);
    text-align: right;
    transform: rotate(calc(-1 * var(--artist-zig-angle)));
    transform-origin: right bottom;
  }
  .artist-kira--zig-b .artist-kira__link {
    left: 1rem;
    right: auto;
    bottom: 0.75rem;
    transform: rotate(calc(-1 * var(--artist-zig-angle)));
    transform-origin: left bottom;
  }
  .artist-kira--zig-end .artist-kira__copy,
  .artist-kira--zig-end .artist-kira__link {
    bottom: 0.75rem;
    transform: none;
  }
}

/* 使用: #faq details/summary
   効果: ぬるっと開閉。JS: faq.js */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
#faq .faq-plus {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#faq details.is-open .faq-plus {
  transform: rotate(45deg);
}
#faq .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
#faq details.is-open .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}
#faq .faq-answer__inner {
  overflow: hidden;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #faq .faq-answer,
  #faq .faq-plus {
    transition: none !important;
  }
}

.fieldobjects-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  padding: 0.875rem;
  border: none;
  background: #d6d2c7;
  color: #111;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
  overflow: visible;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}
.fieldobjects-card__stage {
  position: relative;
  width: 100%;
  padding: 0;
  background: none;
}
.fieldobjects-card__stage::before,
.fieldobjects-card__stage::after {
  content: none;
  display: none;
}
.fieldobjects-card__frame {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 748 / 595; /* 同高595 / 最横長748 */
  overflow: hidden;
  border: 14px solid var(--color-paper);
  outline: 1px solid rgba(0, 0, 0, 0.22);
  background: linear-gradient(180deg, #10141b, #151b23);
  padding: 0.65rem;
  box-sizing: border-box;
}
/* 使用: #fieldobjects（スマホ）
   効果: 枠・余白調整。OPEN 時のみ右名称を非表示（スタック時は改行しないサイズ） */
@media (max-width: 767px) {
  .fieldobjects-gallery {
    gap: 0.5rem;
  }
  .fieldobjects-card {
    padding: 0.45rem;
  }
  .fieldobjects-card__frame {
    border-width: 7px;
    padding: 0.4rem;
  }
  .fieldobjects-card__meta {
    margin-top: 0.45rem;
    gap: 0.4rem;
  }
  .fieldobjects-gallery.is-open .fieldobjects-card__meta {
    gap: 0;
    justify-content: flex-start;
  }
  .fieldobjects-gallery.is-open .fieldobjects-card__name {
    display: none;
  }
}
.fieldobjects-card__frame::before,
.fieldobjects-card__frame::after {
  content: none;
  display: none;
}
.fieldobjects-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 14px var(--tiffany-a10));
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.15s ease;
  transform-origin: center;
}
.fieldobjects-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
}
.fieldobjects-card__meta::before {
  content: none;
  display: none;
}
.fieldobjects-card__id {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #5f6a77;
}
.fieldobjects-card__id::before {
  content: "OBJ-";
  color: inherit;
}
.fieldobjects-card__name {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #5f6a77;
  text-align: right;
}
@media (hover: hover) and (pointer: fine) {
  .fieldobjects-card:hover {
    z-index: 5;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
  }
  .fieldobjects-card:hover .fieldobjects-card__frame img {
    transform: scale(1.03);
    filter: drop-shadow(0 0 18px var(--tiffany-a22));
  }
}
@media (prefers-reduced-motion: reduce) {
  .fieldobjects-card,
  .fieldobjects-card__frame img {
    transition: none !important;
  }
  .fieldobjects-card:hover {
    transform: none;
  }
  .fieldobjects-card:hover .fieldobjects-card__frame img {
    transform: none;
  }
}

/* 使用: #fieldobjects
   効果: スマホは3枚スタック → OPEN FILE で2列展開。JS: fieldobjects.js
   背景 blob：lg 未満は静止（transform / filter / animation なし）。lg+ のみ SVG goo + morph / spin */
#fieldobjects.section-fullbleed {
  overflow: visible;
  background-color: transparent;
}
.fieldobjects-blob-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.fieldobjects-blob {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 0;
  width: min(24rem, 80%);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 45% 55% 60% 40% / 55% 40% 60% 45%;
  background:
    radial-gradient(circle at 30% 30%, var(--color-tiffany), transparent 45%),
    radial-gradient(circle at 70% 65%, var(--color-purple), transparent 48%),
    var(--color-yellow);
  transform: translate(-50%, -50%);
  transform-origin: center;
}
@media (min-width: 1024px) {
  .fieldobjects-blob {
    top: 58%;
    width: 52%;
    filter: url("#fieldobjectsGoo") blur(7px);
    animation:
      fieldobjects-blob-morph 8s ease-in-out infinite alternate,
      fieldobjects-blob-spin 8s ease-in-out infinite alternate;
  }
}
#fieldobjects > :not(.fieldobjects-blob-defs):not(.fieldobjects-blob) {
  position: relative;
  z-index: 1;
}
@keyframes fieldobjects-blob-morph {
  to {
    border-radius: 58% 42% 35% 65% / 38% 62% 45% 55%;
  }
}
@keyframes fieldobjects-blob-spin {
  to {
    transform: translate(-50%, -50%) rotate(12deg) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fieldobjects-blob {
    animation: none;
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .fieldobjects-blob {
    filter: blur(7px);
  }
}
.fieldobjects-deck {
  margin-top: 2.5rem;
  overflow: visible;
}
.fieldobjects-deck__toggle {
  display: none;
}
.fieldobjects-gallery {
  margin-top: 0;
}
@media (max-width: 767px) {
  .fieldobjects-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fieldobjects-gallery {
    width: 100%;
  }
  .fieldobjects-deck__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 1rem 0 0;
    border: 1px solid var(--color-tiffany);
    background: var(--color-tiffany);
    padding: 0.45rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-ink);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  }
  .fieldobjects-deck__toggle:hover,
  .fieldobjects-deck__toggle:focus-visible {
    background: var(--color-paper);
    border-color: var(--color-paper);
    color: var(--color-ink);
    outline: none;
  }
  .fieldobjects-deck__toggle[aria-expanded="true"] {
    background: transparent;
    border-color: var(--color-tiffany);
    color: var(--color-tiffany);
  }
  .fieldobjects-deck__toggle[aria-expanded="true"]:hover,
  .fieldobjects-deck__toggle[aria-expanded="true"]:focus-visible {
    background: var(--color-tiffany);
    border-color: var(--color-tiffany);
    color: var(--color-ink);
  }
  .fieldobjects-gallery:not(.is-open) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    gap: 0;
    /* 斜め回転のはみ出し分を上下余白で確保 */
    min-height: clamp(16.5rem, 68vw, 22rem);
    padding-block: 1.35rem 1.75rem;
    box-sizing: border-box;
    overflow: visible;
    cursor: pointer;
  }
  .fieldobjects-gallery:not(.is-open) .fieldobjects-card {
    grid-area: 1 / 1;
    width: min(78%, 17.5rem);
    margin: 0;
    transform-origin: center center;
    transition:
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.55s ease,
      box-shadow 0.45s ease,
      filter 0.45s ease;
  }
  .fieldobjects-gallery:not(.is-open) .fieldobjects-card:nth-child(1) {
    z-index: 3;
    transform: rotate(-3deg);
  }
  .fieldobjects-gallery:not(.is-open) .fieldobjects-card:nth-child(2) {
    z-index: 2;
    transform: rotate(7deg) translate(0.7rem, 0.1rem);
  }
  .fieldobjects-gallery:not(.is-open) .fieldobjects-card:nth-child(3) {
    z-index: 1;
    transform: rotate(-9deg) translate(-0.85rem, 0.2rem);
  }
  .fieldobjects-gallery:not(.is-open) .fieldobjects-card:nth-child(n + 4) {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: scale(0.88) translateY(1.25rem);
  }
  .fieldobjects-gallery.is-open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    min-height: 0;
    cursor: default;
  }
  .fieldobjects-gallery.is-open .fieldobjects-card {
    grid-area: auto;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.55s ease,
      box-shadow 0.45s ease,
      filter 0.45s ease;
  }
  .fieldobjects-gallery.is-open .fieldobjects-card:nth-child(1) { transition-delay: 0.02s; }
  .fieldobjects-gallery.is-open .fieldobjects-card:nth-child(2) { transition-delay: 0.05s; }
  .fieldobjects-gallery.is-open .fieldobjects-card:nth-child(3) { transition-delay: 0.08s; }
  .fieldobjects-gallery.is-open .fieldobjects-card:nth-child(4) { transition-delay: 0.11s; }
  .fieldobjects-gallery.is-open .fieldobjects-card:nth-child(5) { transition-delay: 0.14s; }
  .fieldobjects-gallery.is-open .fieldobjects-card:nth-child(6) { transition-delay: 0.17s; }
  .fieldobjects-gallery.is-open .fieldobjects-card:nth-child(7) { transition-delay: 0.2s; }
  .fieldobjects-gallery.is-open .fieldobjects-card:nth-child(8) { transition-delay: 0.23s; }
  /* 展開中はカード単体のホバー持ち上げを抑制（レイアウト安定） */
  .fieldobjects-gallery.is-open .fieldobjects-card:hover {
    transform: none;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .fieldobjects-gallery:not(.is-open) .fieldobjects-card,
  .fieldobjects-gallery.is-open .fieldobjects-card {
    transition: none !important;
    transition-delay: 0s !important;
  }
}


/* 使用: #happylow
   効果: PCは #info と同高。スマホは横長帯。枠内パンは CSS view()（未対応時のみ JS: happylow.js） */
.happylow-section {
  position: relative;
  height: var(--happylow-h, 22rem);
  margin-top: 0.75rem;
  view-timeline-name: --happylow;
  view-timeline-axis: block;
}
@media (max-width: 1023px) {
  .happylow-section {
    height: auto;
    aspect-ratio: 3 / 1;
  }
  .happylow-media img {
    object-position: center 38%;
  }
}
.happylow-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--paper-a28);
  background: var(--color-surface);
}
.happylow-viewport.panel::before,
.happylow-viewport.panel::after {
  content: none;
}
.happylow-media {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  transform: translate3d(0, 0, 0);
}
.happylow-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}
@supports (animation-timeline: view()) {
  .happylow-media {
    animation: happylow-pan linear both;
    animation-timeline: --happylow;
    animation-range: cover 0% cover 100%;
  }
}
@keyframes happylow-pan {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .happylow-media {
    transform: none !important;
    height: 100%;
    animation: none !important;
  }
}

/* 使用: #tickets PASS タイトル右横
   効果: おすすめインラインバッジ */
.ticket-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-top: 1rem;
}
.ticket-card__title-row .ticket-card__title {
  margin-top: 0;
}
.ticket-ribbon {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: var(--tiffany-a10);
  border: 1px solid var(--tiffany-a52);
  border-left: 2px solid var(--color-tiffany);
  color: var(--color-tiffany);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem 0.28rem;
  box-shadow: inset 0 0 0 1px var(--tiffany-a08);
}
.ticket-ribbon::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1px solid var(--tiffany-a75);
  border-right: 1px solid var(--tiffany-a75);
  pointer-events: none;
}
.ticket-ribbon::after {
  content: none;
}

/* 使用: #tickets .ticket-card（BOARDING PASS）
   効果: 濃い不透明ブラックメタル板。塗りを厚くし透け錯覚を抑える。
   PC(lg+) hover＋ポインタ追従／スマホはスクロール is-active（カード中心が画面基準線に近いもの）
   ※ --mx/--my/--rx/--ry は css/holo-card-properties.css（HTML 内に置かない）
   ※ #tickets .ticket-card.panel で .panel の半透明 background を確実に上書き
   ※ ::before/::after は角ライン用のため、ヘアラインは .ticket-card__grain */
.ticket-card {
  /* 黒ベースは維持しつつ、面の明暗差とヘアラインで質感を出す */
  --ticket-face-a: #1e242a;
  --ticket-face-b: #12161a;
  --ticket-face-base: #0c0f12;
  --ticket-line: #1c2228;
  --ticket-cut: 18px;
  --ticket-accent: var(--color-tiffany);
  --ticket-cut-line: var(--ticket-accent);
  --ticket-pad-b: 1.5rem;
  --notch-r: 0.68rem;
  /* 下から: pad + CTA + CTA余白 + バーコード + stub余白 + ミシン目中央 */
  --notch-y: calc(100% - var(--ticket-pad-b) - 2.3125rem - 1.35rem - 2rem - 0.35rem - 0.675rem);
  --ticket-bevel:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(0, 0, 0, 0.65),
    inset 0 -1.25rem 1.75rem rgba(0, 0, 0, 0.5);
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ticket-line);
  clip-path: polygon(
    0 0,
    calc(100% - var(--ticket-cut)) 0,
    100% var(--ticket-cut),
    100% 100%,
    var(--ticket-cut) 100%,
    0 calc(100% - var(--ticket-cut))
  );
  /* 左右切り欠き：枠線ごとくり抜く（内側に色を塗る偽円は使わない） */
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at 0 var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at 100% var(--notch-y), transparent 98%, #000 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-position: 0 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--notch-r) at 0 var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at 100% var(--notch-y), transparent 98%, #000 100%);
  mask-size: 100% 100%, 100% 100%;
  mask-position: 0 0, 0 0;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  box-shadow: var(--ticket-bevel);
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.85));
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* .panel { background: paper-a02 } を完全置換。最下層は不透明ベタ塗り（斜めグロー層なし） */
#tickets .ticket-card.panel {
  background:
    linear-gradient(
      168deg,
      var(--ticket-face-a) 0%,
      var(--ticket-face-b) 36%,
      var(--ticket-face-a) 64%,
      var(--ticket-face-base) 100%
    ),
    linear-gradient(var(--ticket-face-base), var(--ticket-face-base)) !important;
  background-size: auto, auto;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
}
@media (min-width: 1024px) {
  .ticket-card { --ticket-pad-b: 2rem; }
}
/* 使用: #tickets .ticket-card__grain
   効果: ヘアライン（参考 .face::before）。黒板上で読める程度に戻す */
.ticket-card__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background: repeating-linear-gradient(
    92deg,
    rgba(255, 255, 255, 0.28) 0 1px,
    rgba(0, 0, 0, 0.1) 1px 2px,
    rgba(255, 255, 255, 0.05) 2px 4px
  );
  mix-blend-mode: overlay;
}
/* 使用: #tickets .ticket-card__glow
   効果: 斜め虹ホロ。常時オフ／PC hover（追従円＋虹）・スマホ is-active（虹のみ・円なし） */
.ticket-card__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    120deg,
    transparent 18%,
    rgba(168, 135, 255, 0.32),
    color-mix(in srgb, var(--color-yellow) 26%, transparent),
    transparent 78%
  );
  mix-blend-mode: screen;
  transition: opacity 0.15s ease;
}
/* 使用: #tickets .ticket-card 角
   効果: 面取り部の斜めライン */
.ticket-card.panel::before,
.ticket-card.panel::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 2px;
  background: var(--ticket-cut-line);
  border: 0;
  z-index: 30;
  pointer-events: none;
  transform: rotate(45deg);
  transform-origin: center;
}
.ticket-card.panel::before {
  top: 8px;
  right: -5px;
  left: auto;
}
.ticket-card.panel::after {
  bottom: 8px;
  left: -5px;
  right: auto;
}
.ticket-card > :not(.ticket-card__glow):not(.ticket-card__grain):not(.ticket-card__watermark) {
  position: relative;
  z-index: 1;
}
.ticket-card--yellow {
  --ticket-face-a: color-mix(in srgb, var(--color-yellow) 5%, #1e242a);
  --ticket-face-b: color-mix(in srgb, var(--color-yellow) 3%, #12161a);
  --ticket-face-base: color-mix(in srgb, var(--color-yellow) 2%, #0c0f12);
  --ticket-cut-line: var(--color-yellow);
  --ticket-bevel:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8),
    inset 1px 0 0 color-mix(in srgb, var(--color-yellow) 14%, transparent),
    inset -1px 0 0 rgba(0, 0, 0, 0.6),
    inset 0 -1.25rem 1.75rem rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--color-yellow) 28%, transparent);
  border-color: color-mix(in srgb, var(--color-yellow) 55%, transparent);
  box-shadow: var(--ticket-bevel);
}
/* 使用: #tickets 前泊カード（オプション明示）
   効果: purple 寄りの枠で ADD-ON であることを示す */
.ticket-card--option {
  --ticket-face-a: color-mix(in srgb, var(--color-purple) 4%, #1a1d22);
  --ticket-face-b: color-mix(in srgb, var(--color-purple) 2%, #12151a);
  --ticket-face-base: color-mix(in srgb, var(--color-purple) 1.5%, #0c0f12);
  --ticket-cut-line: var(--color-purple);
  --ticket-bevel:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8),
    inset 1px 0 0 color-mix(in srgb, var(--color-purple) 10%, transparent),
    inset -1px 0 0 rgba(0, 0, 0, 0.6),
    inset 0 -1.25rem 1.75rem rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--color-purple) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-purple) 42%, transparent);
  box-shadow: var(--ticket-bevel);
}
.ticket-ribbon--option {
  background: color-mix(in srgb, var(--color-purple) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-purple) 52%, transparent);
  border-left: 2px solid var(--color-purple);
  color: color-mix(in srgb, var(--color-purple) 75%, var(--color-paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-purple) 10%, transparent);
}
.ticket-ribbon--option::before {
  border-top-color: color-mix(in srgb, var(--color-purple) 75%, transparent);
  border-right-color: color-mix(in srgb, var(--color-purple) 75%, transparent);
}
/* 使用: #tickets 半券ミシン目
   効果: 切り取り線。左右切り欠きは .ticket-card の mask */
.ticket-card__perf {
  position: relative;
  margin: 1.35rem calc(-1.5rem - 1px) 0;
  height: 1.35rem;
  flex-shrink: 0;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .ticket-card__perf { margin-inline: calc(-2rem - 1px); }
}
.ticket-card__perf::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--paper-a62) 0 0.375rem,
    transparent 0.375rem 0.6875rem
  );
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
/* 使用: #tickets 半券部
   効果: バーコード＋シリアル */
.ticket-card__stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
}
.ticket-card__barcode {
  height: 2rem;
  flex: 1 1 auto;
  max-width: 11rem;
  background: repeating-linear-gradient(
    90deg,
    var(--paper-a75) 0 1px,
    transparent 1px 3px,
    var(--paper-a75) 3px 5px,
    transparent 5px 6px,
    var(--paper-a75) 6px 9px,
    transparent 9px 12px
  );
  opacity: 0.55;
}
.ticket-card__serial {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a45);
}
/* PC（lg+・精密ポインタ）のみ: hover で傾き＋ホロ＋追従円。スマホは is-active（虹のみ） */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .ticket-card {
    transform-style: preserve-3d;
    will-change: transform;
  }
  .ticket-card__glow {
    background:
      radial-gradient(
        circle at var(--mx) var(--my),
        rgba(255, 255, 255, 0.42),
        var(--tiffany-a28) 16%,
        transparent 46%
      ),
      linear-gradient(
        120deg,
        transparent 18%,
        rgba(168, 135, 255, 0.32),
        color-mix(in srgb, var(--color-yellow) 26%, transparent),
        transparent 78%
      );
  }
  .ticket-card:hover {
    border-color: color-mix(in srgb, var(--ticket-face-a) 80%, var(--color-paper));
    box-shadow:
      var(--ticket-bevel),
      0 0 0 1px var(--tiffany-a18);
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
    z-index: 3;
  }
  .ticket-card:hover .ticket-card__glow {
    opacity: 1;
  }
  .ticket-card--yellow:hover {
    border-color: color-mix(in srgb, var(--color-yellow) 75%, transparent);
    box-shadow:
      var(--ticket-bevel),
      0 0 0 1px color-mix(in srgb, var(--color-yellow) 28%, transparent);
  }
  .ticket-card--option:hover {
    border-color: color-mix(in srgb, var(--color-purple) 62%, transparent);
    box-shadow:
      var(--ticket-bevel),
      0 0 0 1px color-mix(in srgb, var(--color-purple) 22%, transparent);
  }
}
/* 使用: #tickets（スマホ・スクロール）
   効果: フォーカス帯にいるあいだ斜め虹を表示（MUSIC .artist-kira と同系） */
.ticket-card.is-active .ticket-card__glow {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ticket-card:hover { transform: none; }
  .ticket-card__glow,
  .ticket-card.is-active .ticket-card__glow { opacity: 0; }
}

/* 使用: #tickets カード内テキスト
   効果: テレメトリ／スキャン表示風タイポ */
.ticket-card__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--tiffany-a28);
}
.ticket-card__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.75rem;
  height: 1px;
  background: var(--color-tiffany);
}
.ticket-card__status {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-ui-md);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  line-height: 1;
  color: var(--color-tiffany);
  text-transform: uppercase;
}
.ticket-card__status::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 9999px;
  background: var(--color-tiffany);
  box-shadow: 0 0 6px var(--color-tiffany);
  vertical-align: 0.05em;
}
.ticket-card__title {
  margin-top: 1rem;
  font-family: var(--font-orbitron);
  font-size: clamp(1.65rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-paper);
}
.ticket-card__mode {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a50);
  text-transform: uppercase;
}
.ticket-card__fare {
  margin-top: 1.35rem;
  padding: 0.85rem 0 0.15rem;
  border-top: 1px dashed var(--paper-a18);
}
.ticket-card__fare-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-tiffany);
}
.ticket-card__option {
  margin-top: 0.9rem;
}
.ticket-card__option .ticket-card__note {
  margin-top: 0.35rem;
}
.ticket-card__price {
  margin-top: 0.35rem;
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  font-family: var(--font-orbitron);
  font-size: clamp(1.85rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-paper);
  font-variant-numeric: tabular-nums;
}
.ticket-card__yen {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(-0.02em);
}
.ticket-card__note {
  margin-top: 0.9rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--paper-a62);
}
.ticket-card__note li {
  /* flex だと「場合は」「<前泊用追加参加券>」等が別アイテムになり改行が崩れる */
  position: relative;
  padding-left: 1.1em;
}
.ticket-card__note li + li {
  margin-top: 0.15rem;
}
.ticket-card__note li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--color-tiffany);
}
.ticket-card__note-mark {
  color: var(--color-paper);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--color-tiffany);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
.ticket-card .panel-tag {
  color: var(--color-tiffany);
}
.ticket-card__data {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.ticket-card__data > div {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--paper-a10);
}
.ticket-card__data > div:last-child {
  border-bottom: 1px solid var(--paper-a10);
}
.ticket-card__data dt {
  flex: 0 0 auto;
  color: var(--paper-a42);
  letter-spacing: 0.1em;
}
.ticket-card__data .ticket-card__rule {
  flex: 1 1 auto;
  min-width: 0.75rem;
  border-bottom: 1px dotted var(--paper-a28);
  transform: translateY(-0.3em);
}
.ticket-card__data dd {
  flex: 0 0 auto;
  text-align: right;
  color: var(--color-paper);
  letter-spacing: 0.04em;
}
.ticket-card__data-area {
  align-items: center;
}
.ticket-card__data-area dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.ticket-card__area-hint {
  color: var(--color-tiffany);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.ticket-card__data-area dd {
  flex: 0 0 auto;
  max-width: none;
  width: auto;
  text-align: right;
  letter-spacing: 0;
}
.ticket-card__area-options {
  --area-circle: 1.75rem;
  --area-gap: 0.35rem;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--area-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticket-card__area-options li {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--area-circle);
  height: var(--area-circle);
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--paper-a18);
  border-radius: 50%;
  background: var(--paper-a03);
  color: var(--color-paper);
}
/* ホバーでサイト名吹き出し（aria-label を表示） */
.ticket-card__area-options li::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  z-index: 3;
  box-sizing: border-box;
  width: max-content;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--paper-a20);
  border-radius: 0.25rem;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.2rem);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease;
}
.ticket-card__area-options li:last-child::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(0.2rem);
}
@media (hover: hover) {
  .ticket-card__area-options li:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .ticket-card__area-options li:last-child:hover::after {
    transform: translateX(0) translateY(0);
  }
}
/* タッチ端末：タップで tips 開閉（.is-tip-open） */
.ticket-card__area-options li.is-tip-open::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.ticket-card__area-options li.is-tip-open:last-child::after {
  transform: translateX(0) translateY(0);
}
@media (hover: none) {
  .ticket-card__area-options li[data-tooltip] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-card__area-options li::after {
    transition: none;
  }
}
.ticket-card__area-icon {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
.ticket-card__area-copy {
  display: none;
}
.ticket-card__area-options--solo li {
  width: var(--area-circle);
  height: var(--area-circle);
}
/* 使用: #tickets エリア詳細（サイト種別カード） */
.ticket-areas__grid {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.ticket-areas__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--paper-a18);
  background: var(--paper-a03);
  overflow: hidden;
  font-family: var(--font-mono);
  color: var(--color-paper);
}
.ticket-areas__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--paper-a18);
  background: var(--color-ink);
}

/*
  スマホ〜lg未満のみ: フリーサイトは全幅（col-span-2）。
  元画像は他と同じ 4:3 のため、枠を約 8:3（＝下段2列カードの画像高）にして
  object-fit: cover で上下をトリミング。object-position で見せ場を指定。
  PC（lg+）はこのルール対象外で通常の 4:3。
*/
@media (max-width: 1023px) {
  .ticket-areas__card--wide .ticket-areas__media {
    /* cqw 依存だと効かない環境があるため、比率で同高相当にする */
    aspect-ratio: 8 / 3;
    height: auto;
  }
  .ticket-areas__card--wide .ticket-areas__zoom > img {
    object-fit: cover;
    /* 中央より下寄り（空を多めに切り、テント群〜手前を残す） */
    object-position: center 68%;
  }
}
.ticket-areas__zoom {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.ticket-areas__zoom:focus-visible {
  outline: 2px solid var(--color-tiffany);
  outline-offset: -2px;
}
.ticket-areas__zoom > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ticket-areas__body {
  position: relative;
  flex: 1 1 auto;
  padding: 0.75rem;
  min-width: 0;
  overflow: hidden;
}
.ticket-areas__head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
.ticket-areas__icon {
  position: absolute;
  right: -0.15rem;
  bottom: -0.35rem;
  z-index: 0;
  flex: none;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.08;
  pointer-events: none;
}
.ticket-areas__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}
.ticket-areas__title-row {
  width: 100%;
  min-width: 0;
}
.ticket-areas__name {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.ticket-areas__type {
  color: var(--paper-a70);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.ticket-areas__desc {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.1rem;
  padding: 0.15rem 0.4rem;
  box-sizing: border-box;
  border: 1px solid var(--tiffany-a40);
  background: var(--tiffany-a06);
  color: var(--color-tiffany);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.ticket-areas__count {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  box-sizing: border-box;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--paper-a22);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--color-ink) 84%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px var(--paper-a18);
  color: var(--color-paper);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.ticket-areas__count > span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--paper-a70);
}
.ticket-areas__photo {
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--paper-a70);
}
@media (max-width: 639px) {
  .ticket-areas__body {
    padding: 0.6rem;
  }
  .ticket-areas__name {
    font-size: 0.75rem;
  }
  .ticket-areas__desc {
    padding: 0.1rem 0.32rem;
  }
  .ticket-areas__count {
    right: 0.35rem;
    bottom: 0.35rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
  }
  .ticket-areas__photo {
    font-size: 0.75rem;
  }
}

/* 使用: 第1・第2・第4キャンプ場の売り切れ
   効果: 料金にスタンプ、エリア写真はグレー＋薄いラベル */
.ticket-sold-out {
  font-family: var(--font-mono);
  font-size: var(--text-ui-md);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.ticket-pricing__price:has(> .ticket-sold-out) {
  position: relative;
  color: var(--paper-a40);
}
.ticket-pricing__price > .ticket-sold-out {
  position: absolute;
  right: 0;
  left: auto;
  top: 50%;
  z-index: 1;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--color-danger);
  background: color-mix(in srgb, var(--color-ink) 78%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-danger) 35%, transparent);
  color: var(--color-danger);
  font-size: var(--text-ui-md);
  transform: translateY(-50%) rotate(-10deg);
  transform-origin: right center;
}
@media (min-width: 1024px) {
  .ticket-pricing__price > .ticket-sold-out {
    left: 0;
    right: auto;
    top: 70%;
    font-size: inherit;
    transform-origin: left center;
  }
}
.ticket-pricing__table td.ticket-pricing__price:has(> .ticket-sold-out) {
  overflow: visible;
}
.ticket-areas__card.is-sold-out .ticket-areas__zoom > img {
  filter: grayscale(1) brightness(0.68);
}
.ticket-areas__card.is-sold-out .ticket-areas__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-ink) 22%, transparent);
  pointer-events: none;
}
.ticket-areas__media > .ticket-sold-out {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: calc(var(--text-ui-md) * 2);
  color: var(--paper-a55);
  text-shadow: 0 1px 10px var(--color-ink);
}

/* 使用: #tickets エリア画像拡大 dialog
   開閉: JS が is-open / is-closing を付与（close 前に退場してから dialog.close）
   非モーダル show()。暗幕は dialog 本体 0.99 ＋ はみ出しスクリム（iOS 下端）。 */
.ticket-area-zoom {
  padding: 0;
  border: none;
  background: color-mix(in srgb, var(--color-ink) 99%, transparent);
  color: var(--color-paper);
}
.ticket-area-zoom::backdrop {
  background: transparent;
  opacity: 0;
}
.ticket-area-zoom:focus {
  outline: none;
}
.ticket-area-zoom[open] {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  transform: none;
  background: color-mix(in srgb, var(--color-ink) 99%, transparent);
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
@supports (height: 100lvh) {
  .ticket-area-zoom[open] {
    min-height: 100lvh;
  }
}
html.is-ticket-area-zoom-open,
html.is-ticket-area-zoom-open body {
  overflow: hidden;
  background-color: var(--color-ink) !important;
}
html.is-ticket-area-zoom-open .starfield {
  display: none !important;
}
.ticket-area-zoom[open].is-open {
  opacity: 1;
}
.ticket-area-zoom[open].is-closing {
  opacity: 0;
  pointer-events: none;
}
.ticket-area-zoom__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin: auto;
  transform: translate3d(0, 0.5rem, 0) scale(0.97);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
.ticket-area-zoom[open].is-open .ticket-area-zoom__panel {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}
.ticket-area-zoom[open].is-closing .ticket-area-zoom__panel {
  transform: translate3d(0, 0.5rem, 0) scale(0.97);
  opacity: 0;
}
@media (max-width: 1023px) {
  .ticket-area-zoom[open],
  .ticket-area-zoom__panel {
    transition: opacity 0.22s ease;
  }
  .ticket-area-zoom__panel,
  .ticket-area-zoom[open].is-open .ticket-area-zoom__panel,
  .ticket-area-zoom[open].is-closing .ticket-area-zoom__panel {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-area-zoom[open],
  .ticket-area-zoom__panel {
    transition: none;
  }
  .ticket-area-zoom[open].is-open,
  .ticket-area-zoom[open].is-open .ticket-area-zoom__panel {
    opacity: 1;
    transform: none;
  }
}
.ticket-area-zoom__close {
  position: static;
  flex-shrink: 0;
  z-index: 2;
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--paper-a80);
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.ticket-area-zoom__close:hover {
  color: var(--color-paper);
}
.ticket-area-zoom__close:focus,
.ticket-area-zoom__close:active {
  outline: none;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .ticket-area-zoom__close:focus-visible {
    outline: 1px solid var(--paper-a45);
    outline-offset: 2px;
  }
}
@media (max-width: 1023px) {
  .ticket-area-zoom__close,
  .ticket-area-zoom__close:focus,
  .ticket-area-zoom__close:focus-visible,
  .ticket-area-zoom__close:active {
    outline: none;
    box-shadow: none;
  }
}
.ticket-area-zoom__figure {
  margin: 0;
  width: fit-content;
  max-width: 100%;
}
.ticket-area-zoom__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 56rem);
  max-height: min(78vh, 48rem);
  object-fit: contain;
  border: 1px solid var(--paper-a18);
  background: var(--color-ink);
}
@media (max-width: 1023px) {
  .ticket-area-zoom__img {
    max-height: min(calc(100svh - 7rem - env(safe-area-inset-bottom, 0px)), 48rem);
  }
}
.ticket-area-zoom__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  text-align: center;
}
.ticket-area-zoom__caption-name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--paper-a80);
}
.ticket-area-zoom__caption-type {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--paper-a70);
}
.ticket-area-zoom__caption-desc {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: var(--color-tiffany);
}

/* 使用: #protocol / #faq ゴミ処理案内（サムネは .ticket-area-zoom で拡大） */
.gomi-guide__intro {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.gomi-guide__copy {
  flex: 1 1 auto;
  min-width: 0;
}
.gomi-guide__zoom {
  display: block;
  flex: none;
  width: 5.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--paper-a18);
  background: var(--color-ink);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.gomi-guide__zoom:focus-visible {
  outline: 2px solid var(--color-tiffany);
  outline-offset: 2px;
}
.gomi-guide__zoom > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.gomi-guide__cats {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .gomi-guide__cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.gomi-guide__cats li {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--paper-a18);
  background: var(--paper-a03);
}
.gomi-guide__cat-name {
  display: block;
  font-weight: 700;
  color: var(--color-paper);
}
.gomi-guide__cat-items {
  display: block;
  margin-top: 0.35rem;
}
.gomi-guide__notes {
  margin: 0.5rem 0 0;
  padding: 0 0 0 1.1em;
  list-style: disc;
}
.gomi-guide__notes li + li {
  margin-top: 0.25rem;
}



/* 使用: #tickets カード内 CTA
   効果: 左からゲージ塗り */
.ticket-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  background: var(--grad-ticket-cta);
  color: var(--color-ink);
  cursor: pointer;
  transition: color 0.35s ease;
}
.ticket-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--grad-ticket-cta-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ticket-cta > * {
  position: relative;
  z-index: 1;
}
.ticket-cta:hover {
  color: var(--color-ink);
}
.ticket-cta:hover::before {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .ticket-cta::before { transition: none; }
  .ticket-cta:hover::before { transform: none; background: var(--grad-ticket-cta-hover); }
  .ticket-cta:hover { background: var(--grad-ticket-cta-hover); }
}

/* 使用: #tickets .ticket-pricing
   効果: 料金表パネル（table · 券種 .hud-tab／notes .panel-tag／receipt）
   狭い幅は横スクロール（全列表示） */
.ticket-pricing {
  color: var(--color-paper);
  --tp-rule-fade: linear-gradient(
    90deg,
    var(--paper-a18) 0%,
    var(--paper-a12) 42%,
    transparent 88%
  );
}
.ticket-pricing__stack {
  margin-top: 0.75rem;
}
/* グループ内: 01/02 直下は詰め、セクション間は広め */
.ticket-pricing__group {
  gap: 0;
}
.ticket-pricing__group > .ticket-pricing__step {
  margin-bottom: 1rem;
}
@media (max-width: 1023px) {
  .ticket-pricing__group > .ticket-pricing__step {
    margin-bottom: 1.5rem;
  }
}
.ticket-pricing__group > section + section {
  margin-top: 2rem;
}
.ticket-pricing__group--option > .ticket-pricing__step {
  margin-bottom: 1.75rem;
}
.ticket-pricing__group--option > section + section {
  margin-top: 2.75rem;
}
/* 使用: #tickets .ticket-pricing__step
   効果: メイン／オプションのステップ見出し（番号＋案内文＋gradient line） */
.ticket-pricing__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0 0 0.85rem;
  position: relative;
  color: var(--color-paper);
}
.ticket-pricing__step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  /* guide/02 gradient line 相当（アクセント → paper → fade） */
  background: linear-gradient(
    90deg,
    var(--tp-accent, var(--color-tiffany)),
    var(--color-paper),
    transparent 88%
  );
  pointer-events: none;
}
.ticket-pricing__step-num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--tp-accent, var(--color-tiffany));
}
/* 番号横の2行スタック（リード＋ラベル） */
.ticket-pricing__step-text {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
}
.ticket-pricing__step-lead {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--tp-accent, var(--color-tiffany));
}
.ticket-pricing__step-label {
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 2.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--color-paper);
}
.ticket-pricing__step:not(:has(.ticket-pricing__step-text)) > .ticket-pricing__step-label {
  flex: 1 1 12rem;
  min-width: 0;
  line-height: 1.2;
}
.ticket-pricing__step-em {
  color: var(--tp-accent, var(--color-tiffany));
}
/* メイン＝黄／オプション＝紫（番号・見出し・hud-tab・注釈・✓） */
.ticket-pricing__group--main {
  --tp-accent: var(--color-yellow);
  --tp-accent-a06: color-mix(in srgb, var(--color-yellow) 6%, transparent);
  --tp-accent-a18: color-mix(in srgb, var(--color-yellow) 18%, transparent);
  --tp-accent-a45: color-mix(in srgb, var(--color-yellow) 45%, transparent);
  --tp-accent-a80: color-mix(in srgb, var(--color-yellow) 80%, transparent);
  --tp-icon-filter: brightness(0) saturate(100%) invert(83%) sepia(61%) saturate(548%) hue-rotate(359deg) brightness(101%) contrast(92%);
}
.ticket-pricing__group--option {
  --tp-accent: var(--color-purple);
  --tp-accent-a06: color-mix(in srgb, var(--color-purple) 6%, transparent);
  --tp-accent-a18: color-mix(in srgb, var(--color-purple) 18%, transparent);
  --tp-accent-a45: color-mix(in srgb, var(--color-purple) 45%, transparent);
  --tp-accent-a80: color-mix(in srgb, var(--color-purple) 80%, transparent);
  --tp-icon-filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2148%) hue-rotate(241deg) brightness(91%) contrast(92%);
}
.ticket-pricing__group .hud-tab {
  border-color: var(--tp-accent);
  color: var(--tp-accent);
  background: linear-gradient(180deg, var(--tp-accent-a06), var(--paper-a02));
  box-shadow:
    0 0 16px var(--tp-accent-a18),
    inset 0 0 10px var(--tp-accent-a06);
}
.ticket-pricing__group .hud-tab__meta {
  color: var(--tp-accent-a80);
}
.ticket-pricing__group .hud-tab__icon {
  filter: var(--tp-icon-filter);
}
.ticket-pricing__group .ticket-pricing__includes li::before {
  color: var(--tp-accent);
}
/* 使用: #tickets オプション各セクション見出し上
   効果: WHEN チップ＋短い条件（include-label 系） */
.ticket-pricing__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-paper);
}
.ticket-pricing__when-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--tp-accent, var(--color-tiffany));
}
.ticket-pricing__when-arrow {
  display: block;
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  object-fit: contain;
  transform-origin: center center;
  filter: var(--tp-icon-filter);
  transform: rotate(-90deg);
  animation: ticket-when-arrow 1.8s ease-in-out infinite;
}
@keyframes ticket-when-arrow {
  0% {
    transform: translateX(-0.2em) rotate(-90deg);
    opacity: 0.2;
  }
  22% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  100% {
    transform: translateX(0.4em) rotate(-90deg);
    opacity: 0.15;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-pricing__when-arrow {
    animation: none;
    opacity: 1;
    transform: rotate(-90deg);
  }
}
.ticket-pricing__when-body {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  word-break: keep-all;
}
/* 使用: #tickets .ticket-pricing__flow
   効果: メイン→オプションの下向きシェブロン（上→下へ流れるループ）
   ※ overflow:hidden だと上下が切れるため、移動分は min-height で確保 */
.ticket-pricing__flow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.35rem 0;
  min-height: 4.75rem;
  overflow: visible;
}
.ticket-pricing__flow-icon {
  display: block;
  width: 2.625rem;
  height: auto;
  opacity: 0.85;
  filter: brightness(0) invert(62%) sepia(53%) saturate(503%) hue-rotate(139deg) brightness(94%) contrast(89%);
  animation: ticket-pricing-flow-drift 1.9s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes ticket-pricing-flow-drift {
  0% {
    transform: translateY(-28%);
    opacity: 0;
  }
  18% {
    opacity: 0.85;
  }
  62% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(42%);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-pricing__flow-icon {
    animation: none;
    opacity: 0.85;
    transform: none;
    will-change: auto;
  }
  .ticket-pricing__flow {
    min-height: 0;
  }
}
@media (min-width: 1024px) {
  .ticket-pricing__flow {
    min-height: 5.75rem;
  }
  .ticket-pricing__flow-icon {
    width: 3.375rem;
  }
}
.ticket-pricing__free-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--tiffany-a45);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  /* guide/04 FLOWING GRADIENT TYPE — background-position で流す */
  color: transparent;
  background-image: var(--grad-flow-type);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grad-flow-type 3s linear infinite;
}
@keyframes grad-flow-type {
  to { background-position: 300% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-pricing__free-badge {
    animation: none;
    background-position: 0 0;
  }
}
.ticket-pricing__scroll {
  position: relative;
  margin-top: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  container-type: inline-size;
}
/* スマホはカード／lg+ は表（.ticket-pricing__cards） */
.ticket-pricing__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.75rem;
}
.ticket-pricing__card-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0 0 0.4rem;
  border-bottom: 0;
  background-image: var(--tp-rule-fade);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--paper-a70);
}
.ticket-pricing__card-col--price {
  text-align: right;
}
.ticket-pricing__card-rates {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticket-pricing__card-rate,
.ticket-pricing__card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}
.ticket-pricing__card-rate {
  padding: 0.7rem 0;
  border-bottom: 0;
  background-image: var(--tp-rule-fade);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
}
.ticket-pricing__card-rate:last-child {
  background-image: none;
}
.ticket-pricing__card-rate .ticket-pricing__site,
.ticket-pricing__card-head .ticket-pricing__site {
  min-width: 0;
}
.ticket-pricing__card-rate .ticket-pricing__price,
.ticket-pricing__card-head .ticket-pricing__price {
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-paper);
  text-align: right;
}
.ticket-pricing__card-shared {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.85rem;
  margin-top: 0;
  border-top: 0;
  background-image: var(--tp-rule-fade);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left top;
}
.ticket-pricing__includes-label {
  margin: 0;
  padding: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--paper-a70);
}
.ticket-pricing__includes-label + .ticket-pricing__includes {
  margin-top: -0.7rem;
}
.ticket-pricing__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 0 1.15rem;
  border-bottom: 0;
  background-image: var(--tp-rule-fade);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
}
.ticket-pricing__cards > .ticket-pricing__card:last-child {
  background-image: none;
  padding-bottom: 0;
}
.ticket-pricing__card-shared .ticket-pricing__buy,
.ticket-pricing__card .ticket-pricing__buy {
  width: 60%;
  max-width: none;
  min-width: 9.5rem;
  margin-inline: 0 0;
  margin-left: auto;
  margin-top: 0.35rem;
}
.ticket-pricing__cards .ticket-pricing__buy-cta-copy {
  white-space: normal;
}
@media (min-width: 1024px) {
  .ticket-pricing__cards {
    display: none;
  }
}
@media (max-width: 1023px) {
  .ticket-pricing__scroll {
    display: none;
  }
  .ticket-pricing__includes {
    font-size: 0.75rem;
  }
}
/* 右端フェード：mask はスクロールポート固定（::after は中身と一緒に流れるため使わない） */
.ticket-pricing__scroll.is-scrollable:not(.is-at-end) {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - 2.75rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - 2.75rem),
    transparent 100%
  );
}
.ticket-pricing__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.6;
}
.ticket-pricing__scroll .ticket-pricing__table {
  min-width: 52rem;
}
.ticket-pricing__table .ticket-pricing__col-site { width: 26%; }
.ticket-pricing__table .ticket-pricing__col-price { width: 12%; }
.ticket-pricing__table .ticket-pricing__col-include { width: 30%; }
.ticket-pricing__table .ticket-pricing__col-buy { width: 20%; }
.ticket-pricing__table th,
.ticket-pricing__table td {
  border-bottom: 1px solid var(--paper-a12);
  padding: 0.75rem 0.5rem;
  vertical-align: top;
  text-align: left;
}
@supports (container-type: inline-size) {
  .ticket-pricing__table :is(th, td):nth-child(1) { --tp-rule-x: 0cqi; }
  .ticket-pricing__table :is(th, td):nth-child(2) { --tp-rule-x: 26cqi; }
  .ticket-pricing__table :is(th, td):nth-child(3) { --tp-rule-x: 38cqi; }
  .ticket-pricing__table :is(th, td):nth-child(4) { --tp-rule-x: 68cqi; }
  .ticket-pricing__table th,
  .ticket-pricing__table td {
    border-bottom-color: transparent;
    background-image: var(--tp-rule-fade);
    background-repeat: no-repeat;
    background-size: 100cqi 1px;
    background-position: calc(0cqi - var(--tp-rule-x, 0cqi)) 100%;
  }
}
.ticket-pricing__table thead th {
  padding-top: 0;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--paper-a70);
  /* 狭い列で「追 / 加 / 参…」と1文字改行しない */
  word-break: keep-all;
  overflow-wrap: normal;
}
.ticket-pricing__table thead th:first-child,
.ticket-pricing__table tbody th {
  padding-left: 0;
}
.ticket-pricing__table thead th:last-child,
.ticket-pricing__table tbody td:last-child {
  padding-right: 0;
}
.ticket-pricing__table thead th:last-child {
  white-space: nowrap;
}
.ticket-pricing__table tbody th {
  padding-right: 0.75rem;
  font-weight: 700;
  color: var(--color-paper);
  vertical-align: middle;
}
.ticket-pricing__table td.ticket-pricing__price {
  vertical-align: middle;
}
.ticket-pricing__site {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.35;
}
.ticket-pricing__site-icon {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.2em;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
.ticket-pricing__site-copy {
  min-width: 0;
  overflow-wrap: normal;
  word-break: keep-all;
}
.ticket-pricing__site-copy > span {
  color: var(--paper-a70);
  font-weight: 400;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.ticket-pricing__table tbody td {
  color: var(--paper-a80);
  overflow-wrap: break-word;
  word-break: break-word;
}
/* rowspan セル: .ticket-pricing__table td の left/top より強く指定 */
.ticket-pricing__table td.ticket-pricing__cell--buy {
  vertical-align: middle;
  text-align: center;
}
/* 使用: #tickets .ticket-pricing__includes（「内容」）
   効果: サイト券に含まれる項目をチェックリスト表示（セル内で縦中央・左揃え） */
.ticket-pricing__table td.ticket-pricing__cell--include {
  vertical-align: middle;
  text-align: left;
}
.ticket-pricing__includes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-paper);
  text-align: left;
}
.ticket-pricing__includes li {
  position: relative;
  padding-left: 1.1em;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
.ticket-pricing__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-weight: 700;
  color: var(--color-tiffany);
  line-height: 1.45;
}
.ticket-pricing__includes-note {
  color: var(--paper-a70);
  font-size: 0.875rem;
}
.ticket-pricing__includes li.ticket-pricing__includes-note::before {
  content: "※";
  color: var(--paper-a70);
  font-weight: 400;
}
.ticket-pricing__buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  max-width: 12.5rem;
  margin-inline: auto;
}
.ticket-pricing__buy-cta.ticket-cta {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  gap: 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  justify-content: flex-start;
}
.ticket-pricing__buy-cta-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
}
.ticket-pricing__buy-cta-type {
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  opacity: 0.72;
}
.ticket-pricing__buy-cta-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}
@media (max-width: 639px) {
  .ticket-pricing__buy {
    max-width: 11rem;
    gap: 0.4rem;
  }
  .ticket-pricing__buy-cta.ticket-cta {
    padding: 0.5rem 0.55rem;
    font-size: 0.75rem;
  }
}
/* 使用: #tickets 注意事項（lg+ 3カラム） */
.ticket-notes__cols {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticket-notes__col {
  min-width: 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--paper-a12);
}
.ticket-notes__icon {
  flex: 0 0 auto;
  display: block;
  width: 0.875rem;
  height: auto;
  margin: 0;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.ticket-notes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.ticket-notes__label {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-paper);
}
.ticket-notes__body {
  display: block;
  margin: 0.45rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--paper-a70);
}
@media (min-width: 1024px) {
  .ticket-notes__col {
    padding: 0;
    border-top: 0;
    border-left: 1px solid var(--paper-a12);
    padding-left: 1rem;
  }
  .ticket-notes__cols > .ticket-notes__col:first-child {
    border-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 639px) {
  .ticket-notes__cols {
    gap: 1.25rem;
  }
  .ticket-notes__col {
    padding: 0;
    border-top: 0;
  }
  .ticket-notes__label {
    font-size: 0.75rem;
  }
  .ticket-notes__body {
    margin-top: 0.35rem;
    font-size: 0.75rem;
  }
}
@media (min-width: 640px) {
  .ticket-pricing__site {
    align-items: center;
  }
  .ticket-pricing__site-icon {
    margin-top: 0;
  }
  /* デスクトップは括弧書きを同一行 */
  .ticket-pricing__site-copy > span::before { content: "（"; }
  .ticket-pricing__site-copy > span::after { content: "）"; }
  .ticket-pricing__site-copy > span {
    color: inherit;
    font-weight: inherit;
  }
}
@media (max-width: 1023px) {
  .ticket-pricing__site-copy {
    font-weight: 700;
  }
  .ticket-pricing__site-copy > span {
    font-weight: 400;
  }
}
.ticket-pricing__price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--paper-a90);
}
.ticket-sim__lead-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--tiffany-a45);
  background: var(--tiffany-a16);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: var(--color-tiffany);
}
.ticket-sim__lead-body {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}
@media (min-width: 640px) {
  .ticket-sim__lead-body {
    flex: 1 1 12rem;
    width: auto;
  }
}
@media (max-width: 1023px) {
  /* 1列目を狭く。セル内ははみ出さず折り返す */
  .ticket-pricing__table .ticket-pricing__col-site { width: 20%; }
  .ticket-pricing__table .ticket-pricing__col-price { width: 12%; }
  .ticket-pricing__table .ticket-pricing__col-include { width: 38%; }
  .ticket-pricing__table .ticket-pricing__col-buy { width: 30%; }
  .ticket-pricing__table th,
  .ticket-pricing__table td {
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ticket-pricing__table thead th {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ticket-pricing__table thead th:last-child {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .ticket-pricing__table tbody th {
    min-width: 0;
    max-width: 100%;
  }
  .ticket-pricing__site {
    display: flex;
    max-width: 100%;
    min-width: 0;
  }
  .ticket-pricing__site-copy {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ticket-pricing__site-copy > span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ticket-pricing__buy {
    max-width: 100%;
    min-width: 0;
  }
  .ticket-pricing__buy-cta.ticket-cta {
    max-width: 100%;
    min-width: 0;
  }
  .ticket-pricing__buy-cta-copy {
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
  }
}
@media (max-width: 639px) {
  .ticket-pricing__scroll .ticket-pricing__table {
    min-width: 48rem;
    font-size: 0.75rem;
  }
  .ticket-pricing__table th,
  .ticket-pricing__table td {
    padding: 0.6rem 0.3rem;
  }
  .ticket-pricing__table thead th {
    font-size: 0.75rem;
  }
  .ticket-pricing__site-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .ticket-pricing__site-copy > span {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }
  .ticket-pricing__price {
    white-space: normal;
  }
}

/* 使用: #tickets .ticket-receipt
   効果: 購入例レシート */
.ticket-receipt {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--paper-a15);
  background: var(--paper-a03);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
}
.ticket-receipt__head {
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--paper-a20);
  font-weight: 700;
  color: var(--color-paper);
}
.ticket-receipt__lines {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.75rem 0;
  list-style: none;
}
.ticket-receipt__line {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.ticket-receipt__line + .ticket-receipt__line {
  margin-top: 0.375rem;
}
.ticket-receipt__line span:first-child {
  color: var(--paper-a80);
}
.ticket-receipt__line span:last-child {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--paper-a90);
}
.ticket-receipt__line--sub span:first-child {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.ticket-receipt__line--sub span:first-child::before {
  content: "└";
  flex: 0 0 auto;
  color: var(--paper-a42);
  font-size: 0.9em;
  line-height: 1;
}
.ticket-receipt__total {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--paper-a20);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-paper);
}
.ticket-receipt__total span:last-child {
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-tiffany);
}

/* 使用: #tickets .ticket-sim（独立 panel）
   効果: 購入シミュレーター（入力 → 必要券リスト → 共通 CTA）
   背景は _guide/03-atmosphere-and-glitch.html 15 / SIGNAL DUST（.dust）を LP トークンへ移植 */
.panel.ticket-sim.section-fullbleed {
  overflow: hidden;
  background-color: transparent;
}
.ticket-sim__dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-paper) 65%, transparent) 1px,
    transparent 1px
  );
  background-size: 27px 29px;
  animation: ticket-sim-dust 2.4s steps(2) infinite;
}
.ticket-sim > *:not(.ticket-sim__dust) {
  position: relative;
  z-index: 1;
}
@keyframes ticket-sim-dust {
  50% {
    background-position: 7px 13px;
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-sim__dust {
    animation: none;
    opacity: 0.75;
  }
}
@media (max-width: 1023px) {
  .ticket-sim__dust {
    background-image: radial-gradient(
      circle,
      color-mix(in srgb, var(--color-paper) 32%, transparent) 1px,
      transparent 1px
    );
  }
}
.ticket-sim__logo {
  margin: 0 auto;
  width: fit-content;
  max-width: min(100%, 28rem);
}
.ticket-sim__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.ticket-sim__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--paper-a62);
}
@media (min-width: 640px) {
  .ticket-sim__lead {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
  }
}
.ticket-sim__form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 1.25rem;
}
.ticket-sim__field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ticket-sim__label {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: var(--paper-a80);
}
.ticket-sim__label-meta {
  margin-left: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--paper-a50);
}
.ticket-sim__counts {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .ticket-sim__counts {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
  }
}
@media (min-width: 1024px) {
  .ticket-sim__counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }
}
.ticket-sim__options {
  display: grid;
  gap: 0.5rem;
}
.ticket-sim__options--stay {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 1024px) {
  .ticket-sim__options--stay {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ticket-sim__options--area {
  grid-template-columns: 1fr 1fr;
}
.ticket-sim__options--area > .ticket-sim__option:first-child {
  grid-column: 1 / -1;
}
.ticket-sim__option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
.ticket-sim__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.ticket-sim__option-face {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.25rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--paper-a28);
  background: var(--paper-a12);
  color: var(--color-paper);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ticket-sim__option-face--area {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.55rem 0.7rem;
}
.ticket-sim__option-title {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}
.ticket-sim__option-face--area .ticket-sim__option-title {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.ticket-sim__option-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a55);
}
.ticket-sim__option-face--area .ticket-sim__option-meta {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.ticket-sim__option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.ticket-sim__area-icon {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
.ticket-sim__option:hover .ticket-sim__option-face {
  border-color: var(--paper-a42);
}
.ticket-sim__option:has(input:checked) .ticket-sim__option-face {
  border-color: var(--color-tiffany);
  background: var(--tiffany-a20);
}
.ticket-sim__option:has(input:focus-visible) .ticket-sim__option-face {
  outline: 2px solid var(--color-tiffany);
  outline-offset: 2px;
}
.ticket-sim__field.is-disabled {
  opacity: 0.42;
  pointer-events: none;
}
.ticket-sim__stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--paper-a28);
  background: var(--paper-a12);
  /* iOS: ＋/− 連続タップのダブルタップ拡大を防ぐ（ピンチズームは維持） */
  touch-action: manipulation;
}
.ticket-sim__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ticket-sim__step:hover {
  background: var(--paper-a16);
  color: var(--color-tiffany);
}
.ticket-sim__num {
  width: 4.5rem;
  border: 0;
  border-inline: 1px solid var(--paper-a28);
  background: transparent;
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 2.75rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ticket-sim__num::-webkit-outer-spin-button,
.ticket-sim__num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ticket-sim__hint {
  margin: 0.65rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--paper-a55);
}
.ticket-sim__receipt {
  max-width: 28rem;
  padding: 0.75rem;
  border-color: var(--paper-a28);
  background: var(--paper-a22);
}
.ticket-sim__cta {
  margin-top: 1.25rem;
  align-items: center;
}
@media (max-width: 1023px) {
  .ticket-sim__cta {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}
.ticket-sim__note {
  margin-top: 1.25rem;
}

/* 使用: #tickets .ticket-sim__demo
   効果: YOUR TICKET DEMO 起動 UI（名前16文字 + ダイアログ） */
.ticket-sim__label--ig {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ticket-sim__label-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
.ticket-sim__wave {
  display: inline-block;
  min-width: 0;
}
.ticket-sim__wave-track {
  display: inline-flex;
  align-items: baseline;
}
.ticket-sim__wave-char {
  display: inline-block;
  animation: ticket-sim-wave 1.35s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.07s);
  will-change: transform;
}
.ticket-sim__wave-char--space {
  width: 0.35em;
}
@keyframes ticket-sim-wave {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-0.32em); }
  70% { transform: translateY(0.08em); }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-sim__wave-char {
    animation: none;
  }
}
.ticket-sim__demo-lead {
  display: block;
  margin-top: 0;
}
.ticket-sim__demo-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 50%;
  max-width: 50%;
  margin-top: 1rem;
}
.ticket-sim__demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.ticket-sim__demo-name {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--paper-a28);
  background: var(--paper-a12);
}
.ticket-sim__demo-name-label {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  border-right: 1px solid var(--paper-a28);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a55);
}
.ticket-sim__demo-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.75rem 0.85rem;
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}
/* iOS: 16px 未満の input フォーカスでページがズームされ、dialog までズーム状態が残るのを防ぐ */
@media (max-width: 1023px) {
  .ticket-sim__demo-input {
    font-size: 1rem;
  }
}
.ticket-sim__demo-input::placeholder {
  color: var(--paper-a40);
}
.ticket-sim__demo-name:first-child .ticket-sim__demo-input {
  text-transform: uppercase;
}
.ticket-sim__demo-name:first-child .ticket-sim__demo-input::placeholder {
  text-transform: uppercase;
}
.ticket-sim__demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-top: 0.25rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--color-tiffany);
  background: var(--color-tiffany);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ticket-sim__demo-btn:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}
@media (max-width: 1023px) {
  .ticket-sim__demo-fields {
    width: 100%;
    max-width: none;
  }
  .ticket-sim__demo-row {
    display: block;
  }
  .ticket-sim__demo-btn {
    display: flex;
    width: 100%;
  }
}

/* 使用: #tickets .ticket-demo-dialog / .ticket-card--demo
   効果: デモ券プレビュー（本物ではない）。暗幕は dialog 本体＋はみ出しスクリム。 */
.ticket-demo-dialog {
  padding: 0;
  border: none;
  /* alpha 0.99: Safari の不透明 fixed クリップ回避（signal-dialog と同方針） */
  background: color-mix(in srgb, var(--color-ink) 99%, transparent);
  color: var(--color-paper);
}
.ticket-demo-dialog::backdrop {
  background: transparent;
  opacity: 0;
}
.ticket-demo-dialog:focus {
  outline: none;
}
.ticket-demo-dialog[open] {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    max(1.5rem, env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  transform: none;
  background: color-mix(in srgb, var(--color-ink) 99%, transparent);
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.ticket-demo-dialog[open].is-open {
  opacity: 1;
}
.ticket-demo-dialog[open].is-closing {
  opacity: 0;
  pointer-events: none;
}
@supports (height: 100lvh) {
  .ticket-demo-dialog[open] {
    min-height: 100lvh;
  }
}
html.is-ticket-demo-open,
html.is-ticket-demo-open body {
  overflow: hidden;
  background-color: var(--color-ink) !important;
}
html.is-ticket-demo-open .starfield {
  display: none !important;
}
.ticket-demo-dialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(28rem, 100%);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.97);
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.ticket-demo-dialog__stage {
  position: relative;
  width: 100%;
}
.ticket-demo-dialog.is-open:not(.is-closing) .ticket-demo-dialog__panel {
  opacity: 1;
  transform: none;
}
/* 使用: #tickets .ticket-demo-forge / [data-demo-phase]
   効果: GENERATING YOUR PASS（forge）→ゴゴゴ（build）→ドーン（impact）→ready */
.ticket-demo-forge {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  pointer-events: none;
}
.ticket-demo-dialog[data-demo-phase="forge"] .ticket-demo-forge,
.ticket-demo-dialog[data-demo-phase="build"] .ticket-demo-forge {
  display: flex;
}
/* 未開示中は券を完全非表示（transition で一瞬見えないようにする） */
.ticket-demo-dialog[open][data-demo-phase="forge"] .ticket-card--demo,
.ticket-demo-dialog[open][data-demo-phase="build"] .ticket-card--demo {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
  transform: translate3d(0, 10px, 0) scale(0.97);
}
.ticket-demo-dialog .ticket-card--demo {
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ticket-demo-forge__dots {
  display: flex;
  gap: 9px;
}
.ticket-demo-forge__dots i {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  animation: ticket-demo-forge-dots 1.2s ease-in-out infinite;
}
.ticket-demo-forge__dots i:nth-child(1) {
  background: var(--color-grey);
}
.ticket-demo-forge__dots i:nth-child(2) {
  background: var(--color-yellow);
  animation-delay: 0.12s;
}
.ticket-demo-forge__dots i:nth-child(3) {
  background: var(--color-tiffany);
  animation-delay: 0.24s;
}
.ticket-demo-forge__dots i:nth-child(4) {
  background: var(--color-purple);
  animation-delay: 0.36s;
}
.ticket-demo-forge__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--paper-a70);
  transition: letter-spacing 0.35s ease, transform 0.35s ease;
}
/* ゴゴゴ: ドット加速 + 微振動 + ラベル強調 */
.ticket-demo-dialog[data-demo-phase="build"] .ticket-demo-forge__dots i {
  animation-duration: 0.38s;
  animation-timing-function: ease-in;
}
.ticket-demo-dialog[data-demo-phase="build"] .ticket-demo-forge__label {
  letter-spacing: 0.32em;
  transform: scale(1.06);
}
.ticket-demo-dialog[data-demo-phase="build"] .ticket-demo-dialog__stage {
  animation: ticket-demo-gogo 0.12s linear infinite;
}
.ticket-demo-dialog[data-demo-phase="build"] .ticket-demo-forge__dots {
  animation: ticket-demo-gogo 0.1s linear infinite;
}
/* ドーン: 券の着弾 + フラッシュ + ステージ揺れ */
.ticket-demo-dialog[data-demo-phase="impact"] .ticket-demo-forge {
  display: none;
}
.ticket-demo-dialog[data-demo-phase="impact"] .ticket-card--demo {
  transition: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  animation: ticket-demo-boom 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ticket-demo-dialog[data-demo-phase="impact"] .ticket-demo-dialog__stage {
  animation: ticket-demo-boom-shake 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ticket-demo-dialog[data-demo-phase="impact"] .ticket-demo-dialog__stage::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 45%, var(--paper-a40) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, var(--tiffany-a35) 0%, transparent 62%);
  animation: ticket-demo-boom-flash 0.42s ease-out both;
}
.ticket-demo-dialog[data-demo-phase="impact"] .ticket-demo-dialog__panel {
  animation: ticket-demo-boom-panel 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ticket-demo-dialog[data-demo-phase="ready"] .ticket-card--demo {
  opacity: 1;
  visibility: visible;
}
@keyframes ticket-demo-forge-dots {
  0%,
  100% {
    translate: 0 0;
    opacity: 0.3;
  }
  50% {
    translate: 0 -18px;
    opacity: 1;
  }
}
@keyframes ticket-demo-gogo {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: -2px 1px;
  }
  50% {
    translate: 2px -1px;
  }
  75% {
    translate: -1px -2px;
  }
}
@keyframes ticket-demo-boom {
  0% {
    opacity: 0;
    filter: brightness(2.4) contrast(1.25);
    transform: translate3d(0, 18px, 0) scale(1.42) rotate(-1.5deg);
  }
  28% {
    opacity: 1;
    filter: brightness(1.35) contrast(1.1);
    transform: translate3d(0, -4px, 0) scale(0.92) rotate(0.6deg);
  }
  52% {
    filter: brightness(1.08);
    transform: translate3d(0, 2px, 0) scale(1.05) rotate(-0.25deg);
  }
  76% {
    filter: none;
    transform: translate3d(0, -1px, 0) scale(0.99);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
@keyframes ticket-demo-boom-shake {
  0% {
    transform: translate3d(0, 0, 0) scale(1.04);
  }
  18% {
    transform: translate3d(-6px, 3px, 0) scale(1.01);
  }
  36% {
    transform: translate3d(5px, -2px, 0);
  }
  54% {
    transform: translate3d(-3px, 2px, 0);
  }
  72% {
    transform: translate3d(2px, -1px, 0);
  }
  100% {
    transform: none;
  }
}
@keyframes ticket-demo-boom-flash {
  0% {
    opacity: 0.95;
  }
  40% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ticket-demo-boom-panel {
  0% {
    transform: scale(1.03);
  }
  30% {
    transform: scale(0.985);
  }
  100% {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-demo-dialog[open],
  .ticket-demo-dialog__panel {
    transition: none !important;
    transform: none !important;
  }
  .ticket-demo-dialog[open].is-open,
  .ticket-demo-dialog.is-open .ticket-demo-dialog__panel {
    opacity: 1 !important;
  }
  .ticket-demo-forge__dots i {
    animation: none;
    opacity: 0.85;
    translate: none;
  }
  .ticket-demo-dialog .ticket-card--demo,
  .ticket-demo-dialog[data-demo-phase="impact"] .ticket-card--demo,
  .ticket-demo-dialog[data-demo-phase="impact"] .ticket-demo-dialog__stage,
  .ticket-demo-dialog[data-demo-phase="impact"] .ticket-demo-dialog__panel,
  .ticket-demo-dialog[data-demo-phase="build"] .ticket-demo-dialog__stage,
  .ticket-demo-dialog[data-demo-phase="build"] .ticket-demo-forge__dots {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
  .ticket-demo-dialog[data-demo-phase="impact"] .ticket-demo-dialog__stage::after {
    display: none;
  }
}
.ticket-demo-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--paper-a70);
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ticket-demo-dialog__close-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  pointer-events: none;
}
.ticket-demo-dialog__close:hover {
  color: var(--color-paper);
  background: var(--paper-a08);
}
.ticket-demo-dialog__close:focus,
.ticket-demo-dialog__close:active {
  outline: none;
  box-shadow: none;
  border: 0;
}
@media (hover: hover) and (pointer: fine) {
  .ticket-demo-dialog__close:focus-visible {
    outline: 1px solid var(--paper-a45);
    outline-offset: 2px;
  }
}
@media (max-width: 1023px) {
  .ticket-demo-dialog__close,
  .ticket-demo-dialog__close:focus,
  .ticket-demo-dialog__close:focus-visible,
  .ticket-demo-dialog__close:active {
    outline: none;
    box-shadow: none;
    border: 0;
  }
}
.ticket-demo-dialog .ticket-card--demo {
  width: 100%;
  margin-top: 0;
  /* 下から: pad + URL + バーコード + stub余白 + ミシン目中央 */
  --notch-y: calc(100% - var(--ticket-pad-b) - var(--text-ui-md) - 2rem - 0.35rem - 0.675rem);
}
.ticket-card--demo .ticket-card__stub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "barcode serial"
    "url .";
  align-items: center;
  row-gap: 0;
  column-gap: 1rem;
}
.ticket-card--demo .ticket-card__barcode {
  grid-area: barcode;
  width: 100%;
  max-width: none;
}
.ticket-card--demo .ticket-card__serial {
  grid-area: serial;
}
.ticket-card--demo .ticket-card__url {
  grid-area: url;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-ui-md);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  color: var(--paper-a45);
  overflow-wrap: anywhere;
}
/* デモ券背景：参戦イラストのウォーターマーク */
.ticket-card--demo .ticket-card__watermark {
  position: absolute;
  top: 50%;
  left: 48%;
  bottom: auto;
  z-index: 0;
  width: min(88%, 22rem);
  height: auto;
  max-height: 48%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  opacity: 0.14;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-10deg);
}
.ticket-demo-dialog .ticket-card__head {
  width: 100%;
  min-width: 0;
  align-items: center;
}
.ticket-demo-dialog .ticket-card__lockup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.ticket-demo-dialog .ticket-card__symbol {
  display: block;
  flex-shrink: 0;
  height: 1.25rem;
  width: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.ticket-demo-dialog .ticket-card__brand {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--text-ui-md);
  width: auto;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 1640 / 41;
  object-fit: contain;
  object-position: left center;
}
/* デモ券: スマホは常時ホロ／PC は hover で傾き＋追従ホロ（BOARDING PASS と同系） */
.ticket-card--demo .ticket-card__glow {
  opacity: 0.78;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .ticket-card--demo .ticket-card__glow {
    opacity: 0;
  }
  .ticket-card--demo:hover .ticket-card__glow {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-card--demo .ticket-card__glow {
    opacity: 0.55 !important;
  }
}
.ticket-demo-dialog .ticket-card__data-area {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}
.ticket-demo-dialog .ticket-card__data-area dd {
  flex: none;
  width: 100%;
  max-width: none;
  text-align: center;
}
.ticket-demo-dialog .ticket-card__area-options--solo {
  display: block;
  width: 100%;
}
.ticket-demo-dialog .ticket-card__area-options--solo li {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  height: auto;
  min-height: 3.25rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.ticket-demo-dialog .ticket-card__area-options--solo li::after {
  content: none;
  display: none;
}
.ticket-demo-dialog .ticket-card__area-icon {
  display: block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.ticket-demo-dialog .ticket-card__area-options--solo li > span {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.ticket-demo-dialog [data-ticket-demo-area] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
}
.ticket-demo-dialog .ticket-card__area-kind {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
  color: var(--paper-a55);
}
#tickets .ticket-demo-dialog .ticket-card.panel,
.ticket-demo-dialog .ticket-card.panel {
  background:
    linear-gradient(
      168deg,
      var(--ticket-face-a) 0%,
      var(--ticket-face-b) 36%,
      var(--ticket-face-a) 64%,
      var(--ticket-face-base) 100%
    ),
    linear-gradient(var(--ticket-face-base), var(--ticket-face-base)) !important;
}
.ticket-demo-dialog .ticket-card__title {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ticket-demo-dialog .ticket-card__mode {
  text-transform: none;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 使用: #info / ヒーロー下 DATE·LOCATION 枠
   効果: スマホは自然高、PCは DATE / LOCATION を半分ずつ */
.info-data {
  min-width: 0;
}
.info-data__row {
  min-width: 0;
}
.info-data__row > dd {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (min-width: 1024px) {
  #info > .panel.lg\:col-span-8 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .info-data {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 100%;
  }
  .info-data__row {
    flex: 1 1 0;
  }
}

/* DATE 曜日バッジ（EVENT INFO 等） */
.date-dow {
  display: inline-block;
  margin-inline: 0.36em 0.12em;
  padding: 0.06em 0.28em;
  border: 1px solid currentColor;
  border-radius: 0.15em;
  font-size: 0.54em;
  letter-spacing: 0.08em;
  line-height: 1.15;
  vertical-align: middle;
  text-transform: uppercase;
}
.depart-countdown-plain {
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 4vw, 1.875rem);
  letter-spacing: 0.06em;
  line-height: 1.35;
}
@media (min-width: 1024px) {
  .depart-countdown-plain {
    margin-top: 4rem;
  }
}
.depart-countdown-plain__label {
  font-family: inherit;
  font-weight: inherit;
}


/* 使用: prefers-reduced-motion（演出オフ） */

@media (prefers-reduced-motion: reduce) {
  .ops-glitch,
  .ops-glitch::before,
  .ops-glitch::after,
  .return-top__line::before,
  .return-top__line::after,
  .return-top__line,
  .ops-panel__photo { animation: none !important; }
  .crew-card,
  .crew-card::before,
  .crew-card .crew-tag,
  .crew-card .crew-tag .panel-tag,
  .crew-card .crew-mute,
  .crew-card .crew-link,
  .crew-card__motto,
  .crew-card .crew-logo img,
  .crew-card__motif,
  .crew-role__en,
  .crew-role__ja { transition: none; }
  .crew-card__motif { animation: none !important; }
  .artist-kira__glow {
    transition: none !important;
    animation: none !important;
    opacity: 0 !important;
  }
  .page-loader,
  .page-loader-scrim { transition: opacity 0.35s ease !important; }
  .page-loader__fx { display: none !important; }
  .catch-copy__drift-dot { animation: none !important; opacity: 0.45 !important; }
  .interlude-anim .interlude-line,
  .interlude-anim .interlude-line > span,
  .interlude-anim .interlude-char,
  .interlude-anim .interlude-en,
  .interlude-anim .interlude-jp,
  .interlude-anim .interlude-drift,
  .interlude-anim .interlude-slide__inner,
  .interlude-anim .interlude-slide-mid,
  .happylow-media {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    letter-spacing: inherit !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* 使用: #info DATE / 会場名見出し
   効果: 見出しサイズ共通 */
.info-data__headline {
  margin: 0;
  font-size: clamp(2.25rem, 3vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  -webkit-user-select: text;
  user-select: text;
}
.info-data__venue {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
  #info .info-data__headline {
    font-size: clamp(2.75rem, 3.25vw, 3.25rem);
  }
}
/* 使用: #info（max-width: 1023px）
   効果: 枠内でできるだけ大きく（DATE・会場名同サイズ） */
@media (max-width: 1023px) {
  #info .info-data__headline {
    font-size: clamp(1.55rem, 8vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: 0.01em;
  }
  #info .date-nowrap {
    white-space: normal;
    overflow: visible;
  }
}

/* 使用: #signal-connected（インタールード 01）
   効果: 静電ノイズ + QUIET DRIFT 星（::before/after は panel 角用のため子要素で重ねる） */
.catch-copy--static {
  background-color: var(--color-ink);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(51, 199, 207, 0.045), transparent 38%);
}
.catch-copy__noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.catch-copy__noise::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media (max-width: 639px) {
  /* SVG turbulence タイルは入場アニメと重なると重いのでスマホでは切る */
  .catch-copy__noise {
    display: none;
  }
}
/* 使用: #signal-connected 星ドット
   効果: QUIET DRIFT 相当のゆっくり漂う星 + ゆるい点滅 */
.catch-copy__drift {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.72;
}
.catch-copy__drift-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(235, 231, 222, var(--a));
  box-shadow: 0 0 8px rgba(51, 199, 207, 0.14);
  /* 入室前は静止。is-in 後だけ漂わせて入場アニメと競合しない */
  opacity: calc(var(--a) * 0.55);
  transform: none;
  animation: none;
}
.interlude-block.is-in .catch-copy__drift-dot {
  will-change: transform, opacity;
  animation:
    catch-quiet-drift var(--d) linear infinite,
    catch-quiet-twinkle var(--tw, 5.5s) ease-in-out infinite;
  animation-delay: var(--delay), var(--tw-delay, 0s);
}
@keyframes catch-quiet-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--dx), var(--dy), 0); }
}
/* ゆるい星の点滅（ドリフトとは独立） */
@keyframes catch-quiet-twinkle {
  0%, 100% { opacity: 0.22; }
  45% { opacity: 0.88; }
  62% { opacity: 0.4; }
  78% { opacity: 0.72; }
}

/* 使用: .interlude（max-width: 1023px）
   効果: 日本語テキストを非表示 */
@media (max-width: 1023px) {
  .catch-copy .catch-jp {
    display: none !important;
  }
  .catch-copy .depart-countdown-plain {
    display: flex;
  }
}

/* 使用: インタールード色面キャッチ（スマホ）
   効果: フォントをさらに大きく */
@media (max-width: 639px) {
  .catch-copy .catch-en:not(.catch-bring) {
    font-size: clamp(3.4rem, 15vw, 5.25rem) !important;
    line-height: 0.92 !important;
  }
  .catch-copy .catch-jp {
    font-size: clamp(1.85rem, 7.5vw, 2.35rem) !important;
    line-height: 1.25 !important;
  }
}

/* 使用: インタールード BRING YOUR 行
   効果: 長行がはみ出さないよう幅基準で縮小 */
.catch-bring {
  font-size: clamp(2.15rem, 8.6vw, 9rem);
  line-height: 0.88;
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 639px) {
  .catch-copy .catch-bring {
    font-size: clamp(2.5rem, 12vw, 3.55rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em;
  }
  .interlude-anim--drift .catch-bring.interlude-drift {
    transform: none;
  }
}

/* 使用: #crew FOUR OPERATORS 見出し
   効果: Twitching text（CodePen pomdmmZ 準拠） */
.ops-panel {
  position: relative;
  background: var(--color-neon) !important;
  color: var(--color-ink);
  overflow: hidden;
}
/* 使用: #crew 見出し背後の4人写真
   効果: グリッチの隙間からたまに見える（テキストアニメは非変更） */
.ops-panel__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    center / cover no-repeat url("../images/img-wantkey-kei.webp");
  opacity: 0;
  transform: scale(1.06);
  transform-origin: center center;
  animation: ops-photo-peek 10s step-end infinite;
}
@keyframes ops-photo-peek {
  0%, 42%, 49%, 73%, 81%, 88%, 94%, 100% {
    opacity: 0;
    transform: scale(1.06);
  }
  45% {
    opacity: 0.92;
    transform: scale(1.12);
  }
  76% {
    opacity: 0.72;
    transform: scale(1.08);
  }
  90% {
    opacity: 0.95;
    transform: scale(1.14);
  }
}
.ops-glitch {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--color-ink);
  isolation: isolate;
  overflow: visible;
  animation: ops-twitch-clip 10s step-end infinite;
}
.ops-glitch::before,
.ops-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 110%;
  white-space: pre-line;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  pointer-events: none;
  z-index: -1;
}
.ops-glitch::before {
  top: 0.35em;
  left: 0.45em;
  animation:
    ops-twitch-clip 10s step-end infinite,
    ops-twitch-fade 10s step-end infinite,
    ops-twitch-blur 13s step-end infinite,
    ops-twitch-shift-a 15s step-end infinite;
}
.ops-glitch::after {
  top: 0.18em;
  left: -0.3em;
  animation:
    ops-twitch-clip 10s step-end infinite,
    ops-twitch-fade 10s step-end infinite,
    ops-twitch-blur 13s step-end infinite,
    ops-twitch-shift-b 15s step-end infinite;
}
@keyframes ops-twitch-clip {
  0% {
    clip-path: polygon(0 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%);
  }
  5%, 30% {
    clip-path: polygon(0 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0 51%, 0 92%, 63% 92%, 63% 4%, 65% 4%);
  }
  45% {
    clip-path: polygon(0 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%);
  }
  76% {
    clip-path: polygon(0 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
  }
  90% {
    clip-path: polygon(0 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0 79%, 0 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0 60%, 0 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%);
  }
  1%, 7%, 33%, 47%, 78%, 93% {
    clip-path: none;
  }
}
@keyframes ops-twitch-fade {
  0% { opacity: 0; }
  5% { opacity: 0.7; }
  30% { opacity: 0.4; }
  45% { opacity: 0.6; }
  76% { opacity: 0.4; }
  90% { opacity: 0.8; }
  1%, 7%, 33%, 47%, 78%, 93% { opacity: 0; }
}
@keyframes ops-twitch-blur {
  0% { filter: blur(3px); }
  20% { filter: blur(0); }
  50% { filter: blur(3px); }
  60% { filter: blur(0); }
  90% { filter: blur(6px); }
}
@keyframes ops-twitch-shift-a {
  0% { top: 0; left: -0.55em; }
  15% { top: 0.28em; left: 0.28em; }
  60% { top: 0.14em; left: -0.28em; }
  75% { top: -0.14em; left: 0.55em; }
  100% { top: 0.28em; left: 0.14em; }
}
@keyframes ops-twitch-shift-b {
  0% { top: 0.14em; left: 0.4em; }
  20% { top: -0.2em; left: -0.35em; }
  55% { top: 0.3em; left: 0.2em; }
  80% { top: 0; left: -0.45em; }
  100% { top: 0.18em; left: 0.25em; }
}
@media (prefers-reduced-motion: reduce) {
  .ops-glitch,
  .ops-glitch::before,
  .ops-glitch::after { animation: none !important; filter: none !important; opacity: 1 !important; clip-path: none !important; }
  .ops-glitch::before,
  .ops-glitch::after { display: none; }
  .ops-panel__photo { animation: none !important; opacity: 0 !important; }
}

/* 使用: .interlude（キャッチコピー帯）
   効果: 帯レイアウトと出現トリガの土台 */
.interlude-block {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.interlude-accent-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
}
.interlude-accent-layer img {
  pointer-events: none !important;
  user-select: none;
}
.interlude-block > .interlude-anim {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* 使用: .interlude wireframe イラスト
   効果: セクション入室で自動スライドイン（スクロール連動なし） */
.interlude-wire {
  will-change: translate, opacity;
}
.interlude-wire--from-right,
.interlude-wire--from-left {
  opacity: 0;
  transition:
    translate 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
}
.interlude-wire--from-right { translate: 4rem 1.25rem; }
.interlude-wire--from-left { translate: -4rem 1.25rem; }
.interlude-wire--delay { transition-delay: 0.14s; }
.interlude-block.is-in .interlude-wire--from-right,
.interlude-block.is-in .interlude-wire--from-left {
  translate: 0 0;
  opacity: var(--wire-opacity, 0.75);
}
/* 使用: 明るい地のインタールード wireframe
   効果: multiply だと消えるので黒化して表示 */
.catch-copy.bg-yellow .interlude-wire,
.catch-copy.bg-grey .interlude-wire,
.catch-copy.bg-tiffany .interlude-wire {
  mix-blend-mode: normal;
  filter: brightness(0);
}
@media (prefers-reduced-motion: reduce) {
  .interlude-wire--from-right,
  .interlude-wire--from-left {
    transition: none !important;
    translate: 0 0 !important;
    opacity: var(--wire-opacity, 0.75) !important;
  }
}
.interlude-block .interlude-en {
  font-family: var(--font-poppins);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
}
.interlude-block .interlude-jp {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.55;
}
.interlude-block .catch-script {
  letter-spacing: 0.01em;
  line-height: 0.95;
  font-style: normal;
}
.interlude-block .catch-impact {
  font-style: normal;
  line-height: 0.78;
  text-transform: uppercase;
}
/* 使用: インタールード見出しフォント
   効果: 切替は Tailwind font-*（@theme）に寄せた */
/* 使用: EXPLORE / MORE. 出現アニメ
   効果: letter-spacing は高さ固定。見た目の伸びは transform のみ */
.interlude-anim--track .catch-impact {
  letter-spacing: -0.04em;
  opacity: 0.35;
  transform: scaleX(1.06) scaleY(1.08);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.interlude-anim--track.is-in .catch-impact {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}
/* 使用: インタールード 05 BOUNCE（guide/13 STRETCH BOUNCE）
   効果: 1文字ずつ縦に伸び上がって弾性で着地。LET’S / カウントダウンは従来どおり */
.interlude-anim--track [data-interlude-bounce] {
  display: inline-block;
  margin-left: 0.28em;
  overflow: visible;
  vertical-align: baseline;
}
.interlude-anim--track .interlude-char--bounce {
  display: inline-block;
  overflow: visible;
  opacity: 0;
  transform: scaleY(0) translateY(0.3em);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.interlude-anim--track.is-in .interlude-char--bounce {
  animation: interlude-stretch-bounce 0.8s both;
  animation-delay: calc(0.18s + var(--i, 0) * 0.03s);
}
@keyframes interlude-stretch-bounce {
  0% {
    transform: scaleY(0) translateY(0.3em);
    opacity: 0;
  }
  45% {
    transform: scaleY(1.18) translateY(0);
    opacity: 1;
  }
  70% {
    transform: scaleY(0.92) translateY(0);
  }
  88% {
    transform: scaleY(1.04) translateY(0);
  }
  100% {
    transform: scaleY(1) translateY(0);
    opacity: 1;
  }
}
.interlude-anim .interlude-line,
.interlude-anim .interlude-char {
  display: inline-block;
}
/* 使用: インタールード MORE.
   効果: 欠ける分は clip-path で確保しつつ EXPLORE に少し重ねる */
.interlude-anim .interlude-char.catch-script {
  line-height: 0.95;
  margin-top: -0.22em;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* 使用: インタールード 01 ZIG STAGGER（guide/13 B4）
   効果: 行ごとに文字順を反転しつつ blur → 鮮明。--o は JS で付与
   catch-grain は各文字に載せるが、--zig-g* でブロック全体の一枚グラデを共有 */
.interlude-anim--zig .interlude-line {
  display: block;
  overflow: visible;
  position: relative;
  /* NOT / WHO, を同一行に固定（狭い幅で WHO, だけ落ちない） */
  white-space: nowrap;
}
/* 1行目のカンマ下端が2行目に重なっても隠れない */
.interlude-anim--zig .interlude-line:first-child {
  z-index: 1;
}
.interlude-anim--zig [data-interlude-zig] {
  overflow: visible;
  /* text-[4.5rem] だと狭幅で NOT WHO, が収まりきらない */
  font-size: clamp(2.35rem, 12vw, 4.5rem);
}
@media (min-width: 640px) {
  .interlude-anim--zig [data-interlude-zig] {
    font-size: clamp(3.75rem, 9vw, 6.75rem);
  }
}
@media (min-width: 1024px) {
  .interlude-anim--zig [data-interlude-zig] {
    font-size: clamp(5.5rem, 8vw, 9rem);
  }
}
.interlude-anim--zig .interlude-word {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  vertical-align: baseline;
}
/* script：行間は元のまま。filter クリップ回避の内側余白だけ確保し外は負マージンで相殺 */
.interlude-anim--zig .interlude-word.font-script {
  overflow: visible;
  padding-inline: 0.06em;
  margin-inline: -0.06em;
}
.interlude-anim--zig .interlude-char--script {
  overflow: visible;
  position: relative;
  z-index: 1;
  padding: 0.06em 0.04em 0.22em;
  margin: -0.06em -0.04em -0.18em 0;
}
.interlude-anim--zig .interlude-char.catch-grain {
  display: inline-block;
  /* ノイズはタイルのまま。色レイヤは元 catch-grain の 140%/120% 中央をブロック全体で共有 */
  background-size:
    180px,
    var(--zig-g2w, 140%) var(--zig-g2h, 140%),
    var(--zig-g3w, 120%) var(--zig-g3h, 120%),
    var(--zig-g4w, 120%) var(--zig-g4h, 120%);
  background-position:
    center,
    var(--zig-g2x, center) var(--zig-g2y, center),
    var(--zig-g3x, center) var(--zig-g3y, center),
    var(--zig-g4x, center) var(--zig-g4y, center);
}
@media (max-width: 639px) {
  .interlude-anim--zig .interlude-char.catch-grain {
    background-size:
      140px,
      var(--zig-g2w, 115%) var(--zig-g2h, 115%),
      var(--zig-g3w, 110%) var(--zig-g3h, 110%),
      var(--zig-g4w, 110%) var(--zig-g4h, 110%);
  }
  /* blur は文字単位コンポジットが重いのでスマホはフェード＋スライドのみ */
  .interlude-anim--zig .interlude-char {
    filter: none;
    will-change: opacity, transform;
  }
  .interlude-anim--zig.is-in .interlude-char {
    filter: none;
    transition:
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.55s ease;
    transition-delay: calc(var(--li, 0) * 0.08s + var(--o, 0) * 0.03s);
  }
}
.interlude-anim--zig .interlude-char {
  position: relative;
  opacity: 0;
  filter: blur(11px);
  transform: translateY(0.2em);
  will-change: transform, opacity, filter;
}
.interlude-anim--zig.is-in .interlude-char {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    filter 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
  transition-delay: calc(var(--li, 0) * 0.12s + var(--o, 0) * 0.045s);
}
.interlude-anim--zig .interlude-jp {
  opacity: 0;
  transform: translate3d(0, 0.45em, 0);
  transition:
    opacity 0.7s ease 0.08s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.interlude-anim--zig.is-in .interlude-jp {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 使用: インタールード 02 ALTERNATE SLIDE（guide/13 B1）
   効果: DIFFERENT＝左から / ONE FIELD.＝右から。BRANDS と JP は従来のスケール／フェード */
.interlude-anim--alt-slide .interlude-slide {
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  max-width: 100%;
}
.interlude-anim--alt-slide .interlude-slide__inner {
  display: block;
  width: max-content;
  max-width: 100%;
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.interlude-anim--alt-slide .interlude-slide--from-left .interlude-slide__inner {
  transform: translateX(-106%);
}
.interlude-anim--alt-slide .interlude-slide--from-right .interlude-slide__inner {
  transform: translateX(106%);
}
.interlude-anim--alt-slide.is-in .interlude-slide--from-left .interlude-slide__inner {
  transform: translateX(0);
}
.interlude-anim--alt-slide.is-in .interlude-slide--from-right .interlude-slide__inner {
  transform: translateX(0);
  transition-delay: 0.24s;
}
.interlude-anim--alt-slide .interlude-slide-mid {
  opacity: 0.35;
  transform: scaleX(1.06) scaleY(1.08);
  transition:
    opacity 1.1s ease 0.12s,
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.interlude-anim--alt-slide.is-in .interlude-slide-mid {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}
.interlude-anim--alt-slide .interlude-jp {
  opacity: 0;
  transform: translate3d(0, 0.6em, 0);
  transition:
    opacity 1s ease 0.35s,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.interlude-anim--alt-slide.is-in .interlude-jp {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.interlude-anim--track .interlude-en {
  letter-spacing: -0.03em;
  opacity: 0.35;
  transform: scaleX(1.08) scaleY(1.08);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.interlude-anim--track .interlude-jp {
  opacity: 0;
  transform: translate3d(0, 0.6em, 0);
  transition: opacity 1s ease 0.2s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.interlude-anim--track .depart-countdown-plain {
  opacity: 0;
  transform: translate3d(0, 0.6em, 0);
  transition: opacity 1s ease 0.35s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.interlude-anim--track.is-in .interlude-en {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}
.interlude-anim--track.is-in .interlude-jp {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.interlude-anim--track.is-in .depart-countdown-plain {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 使用: インタールード EXPLORE / MORE.
   効果: ペン書き風。EXPLORE → 一拍 → MORE.（やや速め） */
.interlude-anim--chars .interlude-char {
  opacity: 1;
  clip-path: inset(-8% 105% -8% -8%);
  transform: none;
  transition:
    clip-path 0.18s cubic-bezier(0.4, 0.0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.055s + 0.03s);
}
.interlude-anim--chars .interlude-char.catch-script {
  /* % inset だと短い inline-box 基準で足りず欠ける → em で余裕を取る */
  clip-path: inset(-0.45em 105% -0.55em -0.25em);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.45, 0.02, 0.2, 1);
  /* EXPLORE完了(~0.55s)のあと一拍 */
  transition-delay: 0.62s;
}
.interlude-anim--chars .interlude-jp {
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  /* MORE.完了(~1.2s)のあと */
  transition: opacity 0.55s ease 1.25s, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1.25s;
}
.interlude-anim--chars.is-in .interlude-char {
  clip-path: inset(-8% -8% -8% -8%);
}
.interlude-anim--chars.is-in .interlude-char.catch-script {
  clip-path: inset(-0.45em -0.25em -0.55em -0.25em);
}
.interlude-anim--chars.is-in .interlude-jp {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 使用: .drift 出現要素
   効果: 画角に入ったら出現（スクロールスクラブは使わない） */
.interlude-anim--drift .interlude-drift {
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
  transition: opacity 1.15s ease 0.08s, transform 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.interlude-anim--drift.is-in .interlude-drift {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 767px) {
  .interlude-block .interlude-en { letter-spacing: -0.02em; }
  .interlude-block .interlude-jp { letter-spacing: 0.02em; line-height: 1.45; }
  .interlude-anim--zig.is-in .interlude-char {
    transition-duration: 0.55s;
  }
  .interlude-anim--track .interlude-en {
    transition-duration: 0.85s;
  }
  .interlude-anim--chars .interlude-char {
    transition-duration: 0.16s;
  }
  .interlude-anim--chars .interlude-char.catch-script {
    transition-duration: 0.52s;
    transition-delay: 0.55s;
  }
  .interlude-anim--chars .interlude-jp {
    transition-delay: 1.1s;
  }
}

/* 使用: TBA プレビュー帯（未発表枠）
   効果: WARNING TAPE（CSS only / 暗色・複数テープ）
   パネル本体は overflow を切らず .panel 四隅ブラケットを外枠に乗せる。
   テープのはみ出しは .warn-tape-panel__clip で切る */
.warn-tape-panel {
  position: relative;
  overflow: visible;
  min-height: 360px;
  background: #07090c;
}
@media (min-width: 1024px) {
  .warn-tape-panel { min-height: 520px; }
}
.warn-tape-panel__clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/* 使用: TBA DATA RIBBON stage
   効果: 黄グローのステージ下地 */
.warn-tape-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--color-yellow) 12%, transparent),
    transparent 42%
  );
}
/* 使用: TBA プレビュー下地
   効果: ぼかしたサンプルコンテンツ */
.tba-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  filter: blur(1.5px);
  opacity: 0.92;
  transform: scale(1.02);
  transform-origin: center center;
}
.tba-preview--timetable {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem 1.5rem;
  gap: 0.75rem;
  color: var(--paper-a85);
  font-family: var(--font-mono);
}
.tba-preview__days {
  display: grid;
  grid-template-columns: 4.5rem repeat(3, 1fr);
  gap: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-tiffany);
  text-align: center;
}
.tba-preview__days span:first-child { text-align: left; color: var(--paper-a35); }
.tba-preview__grid {
  display: grid;
  grid-template-columns: 4.5rem repeat(3, 1fr);
  gap: 0.35rem;
  flex: 1;
  min-height: 0;
}
.tba-preview__time {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a40);
  padding-top: 0.35rem;
}
.tba-preview__slot {
  border: 1px solid var(--paper-a14);
  background: var(--paper-a04);
  padding: 0.45rem 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.35;
}
.tba-preview__slot strong {
  display: block;
  font-weight: 700;
  color: var(--paper-a90);
  margin-bottom: 0.15rem;
}
.tba-preview__slot--accent {
  border-color: var(--tiffany-a35);
  background: var(--tiffany-a08);
}
.tba-preview--map {
  background: var(--color-ink);
}
.tba-preview__mono {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.tba-preview__hud {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--paper-a06) 1px, transparent 1px),
    linear-gradient(to bottom, var(--paper-a06) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
}
.tba-preview__pin {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--paper-a85);
  box-sizing: border-box;
}
.tba-preview__pin--fill { background: var(--paper-a55); }
.tba-preview__pin--solid { background: var(--color-paper); border-color: var(--color-paper); }
.tba-preview__pin--signal {
  border-color: var(--color-tiffany);
  box-shadow: 0 0 8px var(--tiffany-a60);
  animation: blink 1.4s steps(2) infinite;
}
.tba-preview__label {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-paper);
  background: color-mix(in srgb, var(--color-ink) 72%, transparent);
  padding: 0.15rem 0.4rem;
}
.tba-preview__label--signal { color: var(--color-tiffany); }
.tba-preview__label--end {
  left: auto;
  right: 0.85rem;
}
.tba-preview__meta {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a55);
}
.tba-preview__meta--bl { left: 1rem; bottom: 1rem; }
.tba-preview__meta--tr {
  right: 1rem;
  top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-tiffany);
}
@media (min-width: 640px) {
  .tba-preview--timetable { padding: 1.75rem 1.5rem; }
  .tba-preview__days,
  .tba-preview__grid { gap: 0.5rem; }
  .tba-preview__slot { padding: 0.55rem 0.65rem; }
}

/* 使用: TBA DATA RIBBON テープ
   効果: 黄帯・透過・3本 */
.warn-tape {
  position: absolute;
  left: -12%;
  width: 124%;
  z-index: 2;
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  font: 700 0.75rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--color-yellow) 42%, transparent);
  color: color-mix(in srgb, var(--color-ink) 72%, transparent);
  box-shadow:
    0 0 0 5px var(--color-ink),
    0 0 0 6px color-mix(in srgb, var(--color-yellow) 42%, transparent);
}
.warn-tape--main {
  top: 42%;
  transform: rotate(-9deg);
  z-index: 3;
  background: color-mix(in srgb, var(--color-yellow) 55%, transparent);
  color: color-mix(in srgb, var(--color-ink) 82%, transparent);
  box-shadow:
    0 0 0 5px var(--color-ink),
    0 0 0 6px color-mix(in srgb, var(--color-yellow) 55%, transparent);
}
.warn-tape--a {
  top: 22%;
  transform: rotate(11deg);
  padding: 10px 0;
  background: color-mix(in srgb, var(--color-yellow) 28%, transparent);
  color: color-mix(in srgb, var(--color-ink) 55%, transparent);
  box-shadow:
    0 0 0 5px var(--color-ink),
    0 0 0 6px color-mix(in srgb, var(--color-yellow) 28%, transparent);
}
.warn-tape--b {
  top: 72%;
  transform: rotate(-7deg);
  padding: 10px 0;
  background: color-mix(in srgb, var(--color-yellow) 36%, transparent);
  color: color-mix(in srgb, var(--color-ink) 62%, transparent);
  box-shadow:
    0 0 0 5px var(--color-ink),
    0 0 0 6px color-mix(in srgb, var(--color-yellow) 36%, transparent);
}
.warn-tape--a .warn-tape__track { animation-duration: 72s; animation-direction: reverse; }
.warn-tape--b .warn-tape__track { animation-duration: 84s; }
.warn-tape__track {
  display: flex;
  width: max-content;
  animation: warn-tape-marquee 32s linear infinite;
  will-change: transform;
}
.warn-tape__seq {
  flex: none;
  padding: 0 0.25rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}
@keyframes warn-tape-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .warn-tape__track { animation: none; }
}

/* 使用: #mashup-booth / .signal-dialog（ロゴ掲載ポップアップ）
   効果: iOS は backdrop がノッチまで届かないため、巨大スクリム＋不透明全画面。JS: your-signal.js */
.signal-dialog-scrim {
  display: none;
  position: fixed;
  z-index: 9990;
  /* viewport を大幅にはみ出して safe-area / ノッチを確実に覆う */
  top: -50vh;
  right: -50vw;
  bottom: -50vh;
  left: -50vw;
  width: auto;
  height: auto;
  /* alpha 0.99: Safari 26 の「不透明 fixed レイヤーがノッチ手前でクリップされる」バグ回避 */
  background: color-mix(in srgb, var(--color-ink) 99%, transparent);
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
html.is-signal-dialog-open #signalDialogScrim,
html.is-ticket-area-zoom-open #ticketAreaZoomScrim,
html.is-ticket-demo-open #ticketDemoDialogScrim {
  display: block;
}
.signal-dialog {
  padding: 0;
  border: none;
  /* alpha 0.99: Safari 26 の不透明 fixed クリップバグ回避（下にスクリムがあるため実質不透明） */
  background: color-mix(in srgb, var(--color-ink) 99%, transparent);
  color: var(--color-paper);
}
/* 使用: .signal-dialog[open]
   効果: 非モーダル show()＝top layer / ::backdrop なし。
   inset で箱を決め、min-height: 100lvh で URL バー裏まで本体1枚で覆う。 */
.signal-dialog[open] {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  transform: none;
  background: color-mix(in srgb, var(--color-ink) 99%, transparent);
  box-sizing: border-box;
}
@supports (height: 100lvh) {
  .signal-dialog[open] {
    min-height: 100lvh;
  }
}
html.is-signal-dialog-open,
html.is-signal-dialog-open body,
html:has(.signal-dialog[open]),
html:has(.signal-dialog[open]) body {
  background-color: var(--color-ink) !important;
}
html.is-signal-dialog-open .starfield,
html:has(.signal-dialog[open]) .starfield {
  display: none !important;
}
html.is-signal-dialog-open .site-nav,
html:has(.signal-dialog[open]) .site-nav {
  background-color: var(--color-ink);
}
html.is-signal-dialog-open .site-shell,
html.is-ticket-demo-open .site-shell,
html.is-ticket-area-zoom-open .site-shell,
html:has(.signal-dialog[open]) .site-shell,
html:has(.ticket-demo-dialog[open]) .site-shell,
html:has(.ticket-area-zoom[open]) .site-shell {
  visibility: hidden;
}
html.is-signal-dialog-open,
html.is-signal-dialog-open body,
html.is-ticket-demo-open,
html.is-ticket-demo-open body,
html.is-ticket-area-zoom-open,
html.is-ticket-area-zoom-open body {
  overflow-x: hidden;
  overflow-y: hidden;
}
html.is-signal-dialog-open body {
  overflow: hidden;
}
/* 使用: .signal-dialog 内クリップラッパー
   効果: シャッター開閉のクリップ領域 */
.signal-dialog__frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: min(92vw, 32rem);
  max-width: 100%;
  flex-shrink: 0;
  margin: auto;
}
/* 使用: .signal-dialog 本文プレート
   効果: 枠・括弧・本文（シャッターの下層） */
.signal-dialog__plate {
  position: relative;
  z-index: 1;
  border: 1px solid var(--paper-a28);
  background: var(--color-ink);
}
.signal-dialog__plate::before,
.signal-dialog__plate::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-tiffany);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
}
.signal-dialog__plate::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.signal-dialog__plate::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
.signal-dialog__body {
  padding: 1.5rem 1.5rem 1.75rem;
}
/* 使用: .signal-apply（参加表明 申請フォーム）
   効果: ダイアログ内の入力・送信 UI。API: /api/signal-apply */
.signal-apply {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.signal-apply__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.signal-apply__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--paper-a70);
}
.signal-apply__optional {
  margin-left: 0.35rem;
  letter-spacing: 0.08em;
  color: var(--paper-a40);
  font-weight: 500;
}
.signal-apply__input,
.signal-apply__file {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--paper-a28);
  background: var(--paper-a03);
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
}
.signal-apply__input {
  padding: 0.65rem 0.75rem;
}
.signal-apply__input::placeholder {
  color: var(--paper-a40);
}
.signal-apply__input:focus,
.signal-apply__file:focus {
  outline: 1px solid var(--color-tiffany);
  outline-offset: 1px;
  border-color: var(--tiffany-a55);
}
.signal-apply__file {
  padding: 0.45rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.signal-apply__file::file-selector-button {
  margin-right: 0.65rem;
  border: 1px solid var(--paper-a28);
  background: var(--paper-a09);
  color: var(--color-paper);
  padding: 0.35rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.signal-apply__hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--paper-a45);
}
.signal-apply__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.15rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--paper-a80);
  cursor: pointer;
}
.signal-apply__consent input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  accent-color: var(--color-tiffany);
  cursor: pointer;
}
.signal-apply__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
  border: 1px solid var(--color-tiffany);
  background: var(--color-tiffany);
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.signal-apply__submit:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}
.signal-apply__submit:disabled {
  opacity: 0.55;
  cursor: wait;
}
.signal-apply__status {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1.45;
  color: var(--paper-a70);
}
.signal-apply__status.is-error {
  color: var(--color-danger);
}
.signal-apply__status.is-ok {
  color: var(--color-tiffany);
}
/* 使用: .signal-dialog 上下シャッター
   効果: plate 全体を覆う開閉シャッター */
.signal-dialog__shutter {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 50%;
  background: var(--color-ink);
  z-index: 2;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  will-change: transform;
}
.signal-dialog__shutter--top { top: 0; }
.signal-dialog__shutter--bottom { bottom: 0; }
.signal-dialog.is-opening:not(.is-closing) .signal-dialog__shutter--top {
  animation: signal-shutter-open-top 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.signal-dialog.is-opening:not(.is-closing) .signal-dialog__shutter--bottom {
  animation: signal-shutter-open-bottom 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.signal-dialog.is-closing .signal-dialog__shutter--top {
  animation: signal-shutter-close-top 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.signal-dialog.is-closing .signal-dialog__shutter--bottom {
  animation: signal-shutter-close-bottom 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes signal-shutter-open-top {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -105%, 0); }
}
@keyframes signal-shutter-open-bottom {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 105%, 0); }
}
@keyframes signal-shutter-close-top {
  from { transform: translate3d(0, -105%, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes signal-shutter-close-bottom {
  from { transform: translate3d(0, 105%, 0); }
  to { transform: translate3d(0, 0, 0); }
}
.signal-dialog__close {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.signal-dialog__close:focus,
.signal-dialog__close:active {
  outline: none;
  box-shadow: none;
  border: none;
}
@media (hover: hover) and (pointer: fine) {
  .signal-dialog__close:focus-visible {
    outline: 1px solid var(--paper-a45);
    outline-offset: 2px;
  }
}
@media (max-width: 1023px) {
  .signal-dialog__close,
  .signal-dialog__close:focus,
  .signal-dialog__close:focus-visible,
  .signal-dialog__close:active {
    outline: none;
    box-shadow: none;
    border: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .signal-dialog__shutter {
    display: none;
  }
}
.signal-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-tiffany);
  background: var(--color-tiffany);
  padding: 0.45rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.signal-cta:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}
.signal-cta svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}
.signal-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 8rem;
  border: 1px solid var(--tiffany-a55);
  padding: 0.7rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-tiffany);
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.signal-more-link svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}
.signal-more-link:hover {
  background: var(--color-tiffany);
  color: var(--color-ink);
}
/* 使用: #arcade .arcade-title-logo
   効果: ARCADE TERMINAL の点滅重ね。arcade-shell.css より先に当てて、
   ローダー直後に base / on が二重表示されないようにする */
.arcade-title-logo__on {
  opacity: 0;
  animation: arcade-title-blink 2s steps(1, end) infinite both;
}
@keyframes arcade-title-blink {
  0%, 49.999% { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-title-logo__on {
    animation: none;
    opacity: 0;
  }
}
/* 使用: .arcade-game h3 .arcade-game__logo
   効果: 各タイトルの見出しロゴを同じ高さに揃える。幅は各画像の比率に追従 */
.arcade-game__logo {
  display: block;
  height: 6rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 640px) {
  .arcade-game__logo {
    height: 7rem;
  }
}
/* 使用: #mashup-booth .signal-ribbon
   効果: YOUR SIGNAL 外枠。Grabient 系の階段 conic（from 210deg）。四隅括弧なし。
   中の左右余白ははみ出し分を足し、FOOD/MARKET のコンテンツ先頭と揃える
   ref: https://grabient.com/_gJ0gHlgDgf7Cf7YgHyf5kf7zgCwgUuf2wfwV */
.panel.signal-ribbon {
  --signal-ribbon-grad: conic-gradient(
    from 210deg,
    #c5bbb8 0deg 24deg,
    #b8b5b8 24deg 48deg,
    #a9afb7 48deg 72deg,
    #9aa8b5 72deg 96deg,
    #8ba1b3 96deg 120deg,
    #7d98af 120deg 144deg,
    #7090ab 144deg 168deg,
    #6587a6 168deg 192deg,
    #5c7ea1 192deg 216deg,
    #55759b 216deg 240deg,
    #516c94 240deg 264deg,
    #4f638d 264deg 288deg,
    #505a85 288deg 312deg,
    #54537d 312deg 336deg,
    #5b4b74 336deg 360deg
  );
  position: relative;
  z-index: 2;
  width: calc(100% + 1.25rem);
  max-width: none;
  margin-inline: -0.625rem;
  margin-block: 0;
  padding-inline: 1.625rem; /* px-4(1) + はみ出し片側(0.625) */
  border: none;
  background-color: #5b4b74;
  background-image: var(--signal-ribbon-grad);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  color: var(--color-ink);
  overflow: hidden;
  isolation: isolate;
}
/* 使用: .signal-ribbon::before
   効果: 印刷ハーフトーン風のドットノイズ（conic の上に multiply） */
.panel.signal-ribbon.panel--no-brackets::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border: none;
  width: auto;
  height: auto;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--color-ink) 32%, transparent) 0 0.65px, transparent 0.7px),
    radial-gradient(circle, color-mix(in srgb, var(--color-ink) 18%, transparent) 0 0.5px, transparent 0.55px);
  background-size: 4.5px 4.5px, 4.5px 4.5px;
  background-position: 0 0, 2.25px 2.25px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.panel.signal-ribbon > * {
  position: relative;
  z-index: 1;
}
/* 使用: .signal-ribbon 内の見出し・カード文言・skel
   効果: conic 背景向けに ink 系へ統一（他セクションの paper/tiffany を上書き） */
.panel.signal-ribbon .panel-tag {
  color: var(--color-ink);
}
.panel.signal-ribbon [data-signal-count] {
  color: color-mix(in srgb, var(--color-ink) 45%, transparent);
}
.panel.signal-ribbon [data-signal-item] > p .font-bold {
  color: var(--color-ink);
}
.panel.signal-ribbon [data-signal-item] > p > span:not(.font-bold) {
  color: color-mix(in srgb, var(--color-ink) 58%, transparent);
}
.panel.signal-ribbon [data-signal-item] > a {
  color: var(--color-ink);
}
.panel.signal-ribbon [data-signal-item] > a:hover,
.panel.signal-ribbon [data-signal-item] > a:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.panel.signal-ribbon .skel__line {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-ink) 8%, transparent),
    color-mix(in srgb, var(--color-ink) 18%, transparent),
    color-mix(in srgb, var(--color-ink) 8%, transparent)
  );
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .panel.signal-ribbon .skel__line {
    background: color-mix(in srgb, var(--color-ink) 12%, transparent);
  }
}
.panel.signal-ribbon .signal-mark .font-display {
  color: var(--paper-a15);
}
.panel.signal-ribbon .signal-more-link {
  border-color: color-mix(in srgb, var(--color-ink) 55%, transparent);
  color: var(--color-ink);
}
.panel.signal-ribbon .signal-more-link:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}
.panel.signal-ribbon .signal-more-link--tiffany {
  border-color: var(--color-tiffany);
  background: var(--color-tiffany);
  color: var(--color-ink);
}
.panel.signal-ribbon .signal-more-link--tiffany:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}
/* 使用: .signal-ribbon__title-row
   効果: 「参加表明」と「詳しく」を縦方向の中央揃え（行高＝text-2xl） */
.panel.signal-ribbon .signal-ribbon__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.panel.signal-ribbon .signal-ribbon__title-row > h3 {
  margin: 0;
  line-height: 1.5rem; /* text-2xl / ボタン高と揃える */
}
.panel.signal-ribbon .signal-ribbon__title-row .signal-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 1.5rem; /* 見出し行高に合わせる */
  padding: 0 0.55rem;
  gap: 0.28rem;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  line-height: 1;
  flex-shrink: 0;
  transform: translateY(0.125rem); /* 和文見出しに対する光学補正 */
}
.panel.signal-ribbon .signal-ribbon__title-row .signal-cta svg {
  width: 0.7rem;
  height: 0.7rem;
}
@media (min-width: 640px) {
  .panel.signal-ribbon {
    width: calc(100% + 1.75rem);
    margin-inline: -0.875rem;
    padding-inline: 1.875rem; /* 1 + 0.875 */
  }
}
@media (min-width: 1024px) {
  .panel.signal-ribbon {
    width: calc(100% + 2.5rem);
    margin-inline: -1.25rem;
    margin-block: 0;
    padding-inline: 3.5rem; /* lg:px-9(2.25) + 1.25 */
  }
}
/* 使用: [data-signal-grid] .signal-mark
   効果: YOUR SIGNAL ロゴ枠（真円）。画像は中央基準で円形カバー（Instagram と同じ） */
.signal-mark {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 9999px;
  border: 1px solid var(--paper-a15);
  background-color: var(--color-ink);
  padding: 0;
  color: inherit;
}
/* TBA（BUILD YOUR HYPE）は .ph の柄を残しつつ、円枠の border は維持 */
.signal-mark.ph {
  background-color: var(--color-surface);
  padding: 16%;
}
.signal-mark img {
  z-index: 1;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 0 0 transparent);
}
.panel.signal-ribbon .signal-mark img {
  position: absolute;
  inset: 0;
}
/* 黒ロゴ（SUPPORTERS の .vendor-logo と同系）：ink 円枠で白に反転 */
.signal-mark--invert img {
  filter: invert(1) drop-shadow(0 0 0 transparent);
}
[data-signal-item].is-signal-enter {
  animation: signal-item-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--signal-i, 0) * 0.055s);
}
@keyframes signal-item-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0) scale(0.98);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-signal-item].is-signal-enter {
    animation: none;
  }
}

/* 使用: #music 見出し
   効果: アーティスト名の配置 */
.artist-kira__copy h3 {
  font-family: var(--font-audiowide);
  font-weight: 400;
  letter-spacing: 0.01em;
}
/* 使用: #music アーティスト名の日本語部分
   効果: Latin（Audiowide 400）はそのまま、JP（M PLUS 1）だけ Medium */
.artist-kira__copy h3 .artist-kira__name-jp {
  font-weight: 700;
  font-size: 0.9em;
}

/* 使用: #music PC 末尾の空枠
   効果: 斜線ハッチ＋座標グリッドのブランク箱（.ph より濃くして見えるように） */
.artist-soon {
  pointer-events: none;
  background-color: var(--color-surface);
  background-image: repeating-linear-gradient(
    45deg,
    var(--paper-a16) 0,
    var(--paper-a16) 1px,
    transparent 1px,
    transparent 11px
  );
}
.artist-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--tiffany-a12) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tiffany-a12) 1px, transparent 1px);
  background-size: 22px 22px;
}
@media (max-width: 1023px) {
  .artist-soon {
    display: none;
  }
}

/* 使用: TBA 文言プレースホルダ（guide/07 26 SKELETON）
   効果: シマー帯。幅は親内に収め、文字はみ出しなし */
.skel {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.skel__line {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 0.75em;
  border-radius: 0.15em;
  background: linear-gradient(
    90deg,
    var(--paper-a05),
    var(--paper-a12),
    var(--paper-a05)
  );
  background-size: 200% 100%;
  animation: skel-shine 1.5s linear infinite;
}
.skel__line--mid {
  width: 82%;
}
.skel__line--link {
  width: 40%;
  height: 0.65em;
}
@keyframes skel-shine {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel__line {
    animation: none;
    background: var(--paper-a08);
  }
}

.addr-detail {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  letter-spacing: 0.06em;
  line-height: 1.45;
}
@media (max-width: 1023px) {
  #info .addr-detail {
    font-size: clamp(1rem, 4.2vw, 1.35rem);
  }
}

/* 使用: #about / #info / #music / #mashup-booth / #timetable / #areamap / #tickets のタイトル帯
   効果: 右のアイコンウォーターマーク（koboyo）。横幅優先、パネル高を超えるときだけ縮小。
   PC（lg+）は MUSIC のみ表示 */
.panel-head__mark {
  position: absolute;
  right: -0.75rem;
  top: 50%;
  z-index: 0;
  display: block;
  width: clamp(8rem, 32vw, 15rem);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: right center;
  transform: translateY(-48%) rotate(-6deg);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 1024px) {
  .panel-head__mark {
    display: none;
  }
  #music .panel-head__mark {
    display: block;
    right: 0.75rem;
    width: clamp(12rem, 20vw, 17rem);
    opacity: 0.16;
  }
}
@media (max-width: 639px) {
  .panel-head__mark {
    right: -1.5rem;
    opacity: 0.12;
  }
}

/* 使用: .term-sub（ヒーロー／各所の青いサブタイトル）
   効果: 左→右書き出し（キャレットも同じクリップ内） */
.term-sub__text {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}
/* 使用: .term-sub__quiet
   効果: SOUND: / SOUND SYSTEM by などラベルを一段小さく */
.term-sub__quiet {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.term-sub__text::after {
  content: "";
  display: inline-block;
  width: 0.22em;
  height: 0.95em;
  margin-left: 0.18em;
  vertical-align: -0.1em;
  background: currentColor;
  border-radius: 0.5px;
}
.term-sub:not(.is-written) .term-sub__text {
  transition: none;
}
.term-sub.is-written .term-sub__text {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--term-write-dur, 1.2s) steps(var(--term-write-steps, 18), end),
    -webkit-clip-path var(--term-write-dur, 1.2s) steps(var(--term-write-steps, 18), end);
}
/* 使用: .term-sub.is-written キャレット
   効果: 書き出し完了後に点滅開始 */
.term-sub.is-written .term-sub__text::after {
  animation: term-cursor-blink 1.06s steps(1, end) infinite;
  animation-delay: var(--term-write-dur, 1.2s);
}
/* 連続する .term-sub は末尾だけキャレット（MUSIC の SOUND 2行など） */
.term-sub:has(+ .term-sub) .term-sub__text::after {
  display: none;
}
/* 使用: .term-sub.is-selecting
   効果: clip／点滅を止め、コピペ用コールアウトを妨げない */
.term-sub.is-selecting .term-sub__text {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: none !important;
}
.term-sub.is-selecting .term-sub__text::after {
  animation: none !important;
  opacity: 1;
}
@keyframes term-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .term-sub__text {
    clip-path: none;
    -webkit-clip-path: none;
    transition: none !important;
  }
  .term-sub__text::after {
    animation: none !important;
    opacity: 1;
  }
}

/* 使用: .site-mountain（footer 下・site-main 外の viewport 全幅）
   効果: ページ最下部に wireframe 地形を置く（アセット PNG 1600×300。webp は別クロップ）
   注意: lp-hero 固定 backdrop(z-index:1) より前面に出す（site-main と同系） */
.site-mountain {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
}
.site-mountain__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1600 / 300;
  object-fit: contain;
  object-position: center bottom;
}

/* 使用: footer .footer-logo
   効果: スマホは symbol + thunder 重ね（coming-soon と同じ rotateY。常時 12s/周、タップ中 0.5s/周）。
        lg+ は mix + text。JS: footer-logo.js */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* 使用: footer コピーライトの ©
   効果: Space Mono の © は光学的に小さいため、システム UI 書体で揃える */
.footer-copy-mark {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
}
.footer-logo__mix,
.footer-logo__text {
  display: none;
}
.footer-logo__emblem {
  position: relative;
  width: min(72vw, 18rem);
  overflow: visible;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.footer-logo__emblem:focus-visible {
  outline: 2px solid var(--tiffany-a45);
  outline-offset: 4px;
}
.footer-logo__symbol,
.footer-logo__thunder {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.footer-logo__thunder-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  perspective: clamp(600px, 80vw, 1000px);
  translate: 0 -3.5%;
}
.footer-logo__spin {
  position: relative;
  width: 33.6%;
  max-width: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateY(0deg);
}
.footer-logo__thunder {
  object-fit: contain;
  backface-visibility: visible;
}
@media (min-width: 1024px) {
  .footer-logo {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    max-width: 100%;
  }
  .footer-logo__emblem {
    display: none;
  }
  .footer-logo__mix {
    display: block;
    width: auto;
    height: 2.25rem;
    flex-shrink: 0;
  }
  .footer-logo__text {
    display: block;
    height: auto;
    width: auto;
    max-width: min(100%, 17.25rem);
    max-height: 1.08rem;
    object-fit: contain;
    object-position: left center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-logo__spin {
    transform: none;
    will-change: auto;
  }
  .footer-logo__emblem {
    cursor: default;
  }
}

/* 使用: #pageLoaderScrim（ローダー背面の巨大スクリム）
   効果: Safari 26 は不透明 fixed を inner viewport で切る。signal-dialog-scrim と同方針ではみ出し＋ alpha 0.99。
   塗りは純黒（ガイド 18 の assemble モーションに合わせる）。 */
.page-loader-scrim {
  position: fixed;
  z-index: 9998;
  top: -50vh;
  right: -50vw;
  bottom: -50vh;
  left: -50vw;
  width: auto;
  height: auto;
  pointer-events: none;
  opacity: 0.99;
  background: #000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: opacity 0.9s ease;
}
body:has(.page-loader.is-exit) .page-loader-scrim,
.page-loader-scrim.is-exit {
  opacity: 0;
}
body:has(.page-loader.is-exit-fast) .page-loader-scrim,
.page-loader-scrim.is-exit-fast {
  transition-duration: 0.4s;
}
html:has(.page-loader:not(.is-exit)):not(.is-loader-reveal),
html:has(.page-loader:not(.is-exit)):not(.is-loader-reveal) body {
  background-color: #000;
}
html:has(.page-loader:not(.is-exit)):not(.is-loader-reveal) .site-shell,
html:has(.page-loader:not(.is-exit)):not(.is-loader-reveal) .starfield,
html:has(.page-loader:not(.is-exit)):not(.is-loader-reveal) .notch-cover,
html:has(.page-loader:not(.is-exit)):not(.is-loader-reveal) .toolbar-cover {
  visibility: hidden;
}

/* 使用: #pageLoader（LP 起動）
   効果: 両手＋ミラーボール集合 → 円が稲妻にモーフィング → ULTIMATE 着弾 → グリント＋星。完成後は回転を維持し、load 後にフェード退場。クリックで即フェード。JS: page-loader.js */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.9s ease;
  /* 子の transform（手・ボール）があると iOS が親の opacity フェードを飛ばす */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
@keyframes page-loader-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.page-loader.is-exit {
  opacity: 0;
  pointer-events: none;
  cursor: auto;
  animation: page-loader-fade-out 0.9s ease forwards;
}
.page-loader.is-exit-fast {
  transition-duration: 0.4s;
  animation-duration: 0.4s;
}
.page-loader-scrim.is-exit {
  animation: page-loader-fade-out 0.9s ease forwards;
}
.page-loader-scrim.is-exit-fast {
  animation-duration: 0.4s;
}
.page-loader__stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.page-loader__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.page-loader__svg {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 48rem);
  max-height: 85vh;
  color: var(--color-paper);
  overflow: visible;
}
body.is-loading { overflow: hidden; }
/* 使用: html/body.is-nav-open
   効果: overflow ロックしない（iOS + sticky 途中スクロールでフリーズ回避） */
html.is-nav-open,
body.is-nav-open {
  overscroll-behavior: none;
}

/* ナビ土台（sticky・シンボル点滅・IG）→ site-chrome.css
   ここから LP 専用: stuck 下線・tint・メニュー開閉・GET TICKET */
.site-nav__bar {
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.2s ease;
}
.site-nav.is-stuck .site-nav__bar {
  border-bottom-color: var(--paper-a20);
}
/* sticky 判定用（ナビ直前・1px。JS: nav.js） */
.site-nav-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}
/* 使用: .site-nav[data-nav-tint]
   効果: インタールード色面に合わせてロゴを同色化。JS: scroll-effects.js */
.site-nav[data-nav-tint="grey"] { --nav-logo-filter: brightness(0) saturate(100%) invert(89%) sepia(8%) saturate(180%) hue-rotate(16deg) brightness(92%) contrast(88%); }
.site-nav[data-nav-tint="purple"] { --nav-logo-filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2148%) hue-rotate(241deg) brightness(91%) contrast(92%); }
.site-nav[data-nav-tint="yellow"] { --nav-logo-filter: brightness(0) saturate(100%) invert(83%) sepia(61%) saturate(548%) hue-rotate(359deg) brightness(101%) contrast(92%); }
.site-nav[data-nav-tint="tiffany"] { --nav-logo-filter: brightness(0) invert(62%) sepia(53%) saturate(503%) hue-rotate(139deg) brightness(94%) contrast(89%); }
.site-nav[data-nav-tint] .site-nav__symbol,
.site-nav[data-nav-tint] .site-nav__wordmark {
  filter: var(--nav-logo-filter);
}
.site-nav[data-nav-tint] .site-nav__symbol {
  animation: none;
  opacity: 1;
}
.site-nav__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  border-bottom: 1px solid transparent;
  background-color: var(--color-ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  transition:
    grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    opacity 0.28s ease 0.06s,
    border-bottom-color 0.28s ease 0.06s,
    visibility 0s linear 0.52s,
    box-shadow 0.28s ease;
}
.site-nav__menu-inner {
  overflow: hidden;
  min-height: 0;
}
.site-nav__menu.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  border-bottom-color: var(--paper-a20);
  transition:
    grid-template-rows 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    border-bottom-color 0.28s ease,
    visibility 0s linear 0s,
    box-shadow 0.28s ease;
}
.site-nav__menu .nav-link,
.site-nav__menu .nav-ticket {
  --nav-stagger: 0s;
  opacity: 0;
  transform: translateY(-0.35rem);
  /* stagger は出現/退出のみ。hover の色変化には遅延をかけない */
  transition:
    opacity 0.28s ease var(--nav-stagger),
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) var(--nav-stagger),
    background-color 0.2s ease,
    color 0.2s ease,
    filter 0.2s ease;
}
/* 閉じる：上から順に消える（開くの逆） */
.site-nav__menu:not(.is-open) li:nth-child(1) .nav-link { --nav-stagger: 0.18s; }
.site-nav__menu:not(.is-open) li:nth-child(2) .nav-link { --nav-stagger: 0.15s; }
.site-nav__menu:not(.is-open) li:nth-child(3) .nav-link { --nav-stagger: 0.12s; }
.site-nav__menu:not(.is-open) li:nth-child(4) .nav-link { --nav-stagger: 0.09s; }
.site-nav__menu:not(.is-open) li:nth-child(5) .nav-link { --nav-stagger: 0.06s; }
.site-nav__menu:not(.is-open) li:nth-child(6) .nav-link { --nav-stagger: 0.04s; }
.site-nav__menu:not(.is-open) li:nth-child(7) .nav-link { --nav-stagger: 0.02s; }
.site-nav__menu:not(.is-open) li:nth-child(8) .nav-link { --nav-stagger: 0s; }
.site-nav__menu:not(.is-open) .nav-ticket { --nav-stagger: 0s; }

.site-nav__menu.is-open .nav-link,
.site-nav__menu.is-open .nav-ticket {
  opacity: 1;
  transform: translateY(0);
}
/* 開く：上から順に出現 */
.site-nav__menu.is-open li:nth-child(1) .nav-link { --nav-stagger: 0.04s; }
.site-nav__menu.is-open li:nth-child(2) .nav-link { --nav-stagger: 0.07s; }
.site-nav__menu.is-open li:nth-child(3) .nav-link { --nav-stagger: 0.1s; }
.site-nav__menu.is-open li:nth-child(4) .nav-link { --nav-stagger: 0.13s; }
.site-nav__menu.is-open li:nth-child(5) .nav-link { --nav-stagger: 0.16s; }
.site-nav__menu.is-open li:nth-child(6) .nav-link { --nav-stagger: 0.19s; }
.site-nav__menu.is-open li:nth-child(7) .nav-link { --nav-stagger: 0.22s; }
.site-nav__menu.is-open li:nth-child(8) .nav-link { --nav-stagger: 0.25s; }
.site-nav__menu.is-open .nav-ticket { --nav-stagger: 0.28s; }
@media (min-width: 1280px) {
  .site-nav__menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav[data-nav-tint] .site-nav__symbol,
  .site-nav[data-nav-tint] .site-nav__wordmark {
    filter: var(--nav-logo-filter);
    transition: none;
  }
  .site-nav__menu,
  .site-nav__menu .nav-link,
  .site-nav__menu .nav-ticket {
    transition: none !important;
  }
  .site-nav__menu .nav-link,
  .site-nav__menu .nav-ticket {
    opacity: 1;
    transform: none;
  }
  .site-nav__menu:not(.is-open) .nav-link,
  .site-nav__menu:not(.is-open) .nav-ticket {
    opacity: 0;
  }
}

/* PC / スマホ共通：ナビリンク hover で背景色 */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.55em;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-link:hover,
.nav-link:focus-visible {
  background: var(--color-tiffany);
  color: var(--color-ink);
  outline: none;
}
.site-nav__bar .nav-link {
  padding: 0.3em 0.45em;
}
.site-nav__menu .nav-link {
  width: 100%;
  padding: 0.55em 0.65em;
}
.footer-nav .nav-link {
  padding: 0.25em 0.4em;
}

/* フッター：NO SIGNAL 風 RETURN TO TOP（文字のみ・CSS のみ） */
.return-top {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.return-top__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}
.return-top__line {
  position: relative;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  color: var(--paper-a92);
  text-shadow: 0 0 10px var(--paper-a18);
  animation: return-top-jitter 3.5s steps(1, end) infinite;
}
.return-top__line::before,
.return-top__line::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.return-top__line::before {
  color: var(--tiffany-a90);
  animation: return-top-glitch-a 3.5s steps(1, end) infinite;
}
.return-top__line::after {
  color: rgba(230, 102, 66, 0.8);
  animation: return-top-glitch-b 3.5s steps(1, end) infinite;
}
.return-top__line--arrow {
  animation-delay: 0.15s;
}
.return-top__line--arrow::before,
.return-top__line--arrow::after {
  animation-delay: 0.15s;
}
.return-top__line--signal {
  letter-spacing: 0.22em;
  animation-delay: 0.5s;
}
.return-top__line--signal::before,
.return-top__line--signal::after {
  animation-delay: 0.5s;
}
.return-top:hover .return-top__line,
.return-top:focus-visible .return-top__line {
  color: var(--color-tiffany);
  text-shadow: 0 0 10px var(--tiffany-a35);
}
@media (min-width: 640px) {
  .return-top__content {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.55rem;
    text-align: left;
  }
}
@keyframes return-top-jitter {
  0%, 82%, 100% {
    opacity: 1;
    transform: translate(0, 0);
  }
  84% {
    opacity: 0.35;
    transform: translate(-2px, 0);
  }
  86% {
    opacity: 0.95;
    transform: translate(2px, -1px);
  }
  88% {
    opacity: 0.2;
    transform: translate(-1px, 1px);
  }
  90% {
    opacity: 0.85;
    transform: translate(1px, 0);
  }
  92% {
    opacity: 0.45;
    transform: translate(-2px, -1px);
  }
}
@keyframes return-top-glitch-a {
  0%, 82%, 100% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(100% 0 0 0);
  }
  84% {
    opacity: 0.75;
    transform: translate(-3px, 0);
    clip-path: inset(15% 0 55% 0);
  }
  86% {
    opacity: 0;
  }
  88% {
    opacity: 0.6;
    transform: translate(2px, 1px);
    clip-path: inset(45% 0 25% 0);
  }
  90% {
    opacity: 0;
  }
  92% {
    opacity: 0.5;
    transform: translate(-2px, -1px);
    clip-path: inset(70% 0 5% 0);
  }
}
@keyframes return-top-glitch-b {
  0%, 82%, 100% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(100% 0 0 0);
  }
  84% {
    opacity: 0.65;
    transform: translate(3px, 1px);
    clip-path: inset(30% 0 40% 0);
  }
  86% {
    opacity: 0;
  }
  88% {
    opacity: 0.55;
    transform: translate(-2px, 0);
    clip-path: inset(55% 0 20% 0);
  }
  90% {
    opacity: 0.7;
    transform: translate(2px, -1px);
    clip-path: inset(10% 0 65% 0);
  }
  92% {
    opacity: 0;
  }
}

/* 使用: .nav-ticket（ナビ／フッター共通）
   効果: icon + 文字の横並び CTA */
.nav-ticket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-sizing: border-box;
  background: var(--grad-ticket-cta);
  color: var(--color-ink);
  font-family: var(--font-oxanium);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-ticket img {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
/* 使用: .nav-ticket__label
   効果: ディスプレイフォントの上下余白をトリム */
.nav-ticket__label {
  line-height: 1;
  text-box: trim-both cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
/* 使用: .nav-ticket img（text-box-trim 未対応）
   効果: アイコンを光学中心へわずかに上げる */
@supports not (text-box-trim: trim-both) {
  .nav-ticket img {
    transform: translateY(-0.06em);
  }
}
.nav-ticket:hover,
.nav-ticket:focus-visible {
  background: var(--grad-ticket-cta-hover);
  color: var(--color-ink);
  outline: none;
}
.site-nav__bar .nav-ticket {
  padding: 0.4em 0.75em;
  font-size: 0.75rem;
}
.site-nav__menu .nav-ticket {
  width: 100%;
  margin-top: 0.75rem;
}
.nav-social-link.h-9 .nav-social__icon,
.nav-social-link.h-9 > img {
  width: 1.25rem;
  height: 1.25rem;
}

/* 使用: #crew .crew-card
   効果: LIQUID WIPE（下部中央起点の clip-path）。hover／SP は scroll .is-active。JS: crew-focus.js */
.crew-card {
  --crew-t: 0.55s ease-out;
  /* 文字色は背景が動き始めた直後に乗せる */
  --crew-color-t: 0.22s ease-out;
  --crew-ink: var(--color-ink);
  --crew-fill: transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--crew-color-t),
    border-color var(--crew-color-t);
}
/* liquid wipe 塗り層（panel ブラケット用 ::before を上書き） */
.crew-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  border: none;
  pointer-events: none;
  background: var(--crew-fill);
  clip-path: circle(0 at 50% 100%);
  transition: clip-path var(--crew-t);
}
.crew-card > * {
  position: relative;
  z-index: 1;
}
/* 使用: .crew-card--motif .crew-card__motif
   効果: 中央からモチーフ拡大 → フェード。塗りは円 wipe なしで不透明度だけ立ち上げて残す */
.crew-card--motif {
  --crew-motif-dur: 4.5s;
}
.crew-card__motif {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 拡大中も INSTAGRAM / ロゴより背面に固定 */
  z-index: 0;
  width: min(38%, 7.5rem);
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  /* 背面のまま文字に溶ける（multiply は残しても可読性を保ちやすい） */
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}
.crew-card--motif::before {
  /* 円 wipe は使わず、面のまま opacity で出す（03/04 の clip-path を上書き） */
  clip-path: none;
  opacity: 0;
  transition: opacity var(--crew-t);
}
.crew-card--motif > :not(.crew-card__motif) {
  z-index: 2;
}
.crew-card .crew-link {
  z-index: 3;
}
@keyframes crew-motif-bloom {
  0% {
    transform: translate(-50%, -50%) scale(0.18);
    opacity: 0;
  }
  12% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.6);
    opacity: 0.4;
  }
}
.crew-card--motif.is-active::before {
  clip-path: none;
  opacity: 1;
}
.crew-card--motif.is-active .crew-card__motif {
  animation: crew-motif-bloom var(--crew-motif-dur) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.crew-card--grey { --crew-fill: var(--color-grey); }
.crew-card--yellow { --crew-fill: var(--color-yellow); }
.crew-card--tiffany { --crew-fill: var(--color-tiffany); }
.crew-card--purple { --crew-fill: var(--color-purple); }

.crew-card__motto {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.6vw + 0.45rem, 1.2rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: inherit;
}
.crew-card .crew-tag,
.crew-card .crew-tag .panel-tag,
.crew-card .crew-mute,
.crew-card .crew-link,
.crew-card__motto,
.crew-role__en,
.crew-role__ja {
  transition: color var(--crew-color-t), opacity var(--crew-color-t);
}
/* 4ブランドロゴ：同一枠内で高さ／幅を揃える（SVGの余白差を吸収） */
.crew-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  height: 4.875rem;
  width: 100%;
  max-width: 16.5rem;
  font-size: inherit;
  font-weight: inherit;
}
.crew-logo img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  transition: filter var(--crew-color-t);
}

/* 使用: #crew .crew-role
   効果: 英⇔日クロスフェード（時間は wipe と共通） */
.crew-role {
  display: inline-grid;
  justify-items: end;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-tiffany);
  opacity: 0.75;
}
.crew-role__en,
.crew-role__ja {
  grid-area: 1 / 1;
}
.crew-role__ja {
  opacity: 0;
  pointer-events: none;
}

.crew-card.is-active::before {
  clip-path: circle(145% at 50% 100%);
}
.crew-card.is-active {
  color: var(--crew-ink);
  border-color: color-mix(in srgb, var(--color-ink) 22%, transparent);
}
.crew-card.is-active .crew-tag {
  color: inherit;
  opacity: 0.75;
}
.crew-card.is-active .crew-tag .panel-tag {
  color: var(--crew-ink);
  opacity: 1;
}
.crew-card.is-active .crew-mute {
  color: inherit;
  opacity: 0.72;
}
.crew-card.is-active .crew-link,
.crew-card.is-active .crew-role {
  color: inherit;
}
.crew-card.is-active .crew-logo img {
  filter: brightness(0);
}
.crew-card.is-active .crew-role__en { opacity: 0; }
.crew-card.is-active .crew-role__ja { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .crew-card:hover::before {
    clip-path: circle(145% at 50% 100%);
  }
  .crew-card--motif:hover::before {
    clip-path: none;
    opacity: 1;
  }
  .crew-card--motif:hover .crew-card__motif {
    animation: crew-motif-bloom var(--crew-motif-dur) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .crew-card:hover {
    color: var(--crew-ink);
    border-color: color-mix(in srgb, var(--color-ink) 22%, transparent);
  }
  .crew-card:hover .crew-tag {
    color: inherit;
    opacity: 0.75;
  }
  .crew-card:hover .crew-tag .panel-tag {
    color: var(--crew-ink);
    opacity: 1;
  }
  .crew-card:hover .crew-mute {
    color: inherit;
    opacity: 0.72;
  }
  .crew-card:hover .crew-link,
  .crew-card:hover .crew-role {
    color: inherit;
  }
  .crew-card:hover .crew-logo img {
    filter: brightness(0);
  }
  .crew-card:hover .crew-role__en { opacity: 0; }
  .crew-card:hover .crew-role__ja { opacity: 1; }
}

/* 使用: footer .footer-lantern-control / .lantern-segment-switch
   効果: ランタンモードの Segment switch */
.footer-lantern-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.lantern-segment-switch {
  position: relative;
  display: inline-grid;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lantern-segment-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lantern-segment-switch__track {
  position: relative;
  width: 82px;
  height: 34px;
  border: 1px solid rgba(236, 232, 223, 0.14);
  border-radius: 999px;
  background: transparent;
  transition: 0.2s;
}
.lantern-segment-switch__track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ece8df;
  background-image: url("../images/icon-sun.20260817.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  transition: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lantern-segment-switch input:checked + .lantern-segment-switch__track {
  border-color: rgba(236, 232, 223, 0.14);
  background: transparent;
  box-shadow: none;
}
.lantern-segment-switch input:checked + .lantern-segment-switch__track::after {
  transform: translateX(48px);
  background-color: #ece8df;
  background-image: url("../images/icon-night.20260817.svg");
}
.lantern-segment-switch input:focus-visible + .lantern-segment-switch__track {
  outline: 2px solid #ece8df;
  outline-offset: 4px;
}
@media (max-width: 639px) {
  .footer-lantern-control {
    justify-content: center;
  }
}

/* 使用: .lantern-overlay（吊り下げランタンモード）
   効果: checkbox + :has で開閉。LP の操作は維持 */
.lantern-overlay {
  --uc-lantern-glow: #9aa3a8;
  --lantern-exit-duration: 1.45s;
  position: fixed;
  z-index: 10020;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(
    ellipse 46vw 42vh at 50% 20vh,
    color-mix(in srgb, var(--color-ink) 12%, transparent) 0%,
    color-mix(in srgb, var(--color-ink) 34%, transparent) 20%,
    color-mix(in srgb, var(--color-ink) 78%, transparent) 52%,
    color-mix(in srgb, var(--color-ink) 94%, transparent) 76%,
    color-mix(in srgb, var(--color-ink) 97%, transparent) 100%
  );
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  isolation: isolate;
  animation: uc-lantern-chroma 14s ease-in-out infinite;
}
.lantern-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 30vw 34vh at 50% 20vh,
    color-mix(in srgb, var(--uc-lantern-glow) 18%, transparent) 0%,
    color-mix(in srgb, var(--uc-lantern-glow) 8%, transparent) 38%,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: uc-lantern-glow-flicker 4.6s ease-in-out infinite;
}
html[data-lantern-mode="night"] .lantern-overlay,
html:has(#lanternModeToggle:checked) .lantern-overlay {
  opacity: 1;
  visibility: visible;
}
html:has(#lanternModeToggle:checked) .lantern-overlay.is-closing {
  opacity: 0;
  visibility: visible;
  transition-duration: var(--lantern-exit-duration);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.lantern-overlay__stage {
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 639px) {
  .lantern-overlay {
    --uc-lantern-glow: #f6c56f;
    background: radial-gradient(
      ellipse 80vw 50vh at 50% 20vh,
      color-mix(in srgb, var(--color-ink) 28%, transparent) 0%,
      color-mix(in srgb, var(--color-ink) 54%, transparent) 22%,
      color-mix(in srgb, var(--color-ink) 84%, transparent) 54%,
      color-mix(in srgb, var(--color-ink) 95%, transparent) 78%,
      color-mix(in srgb, var(--color-ink) 98%, transparent) 100%
    );
    animation: none;
  }
  .lantern-overlay::before {
    background: radial-gradient(
      ellipse 68vw 42vh at 50% 20vh,
      color-mix(in srgb, var(--uc-lantern-glow) 10%, transparent) 0%,
      color-mix(in srgb, var(--uc-lantern-glow) 4%, transparent) 38%,
      transparent 68%
    );
    mix-blend-mode: normal;
    opacity: 0.3;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lantern-overlay,
  .lantern-overlay::before,
  .lantern-overlay__stage,
  .lantern-segment-switch__track,
  .lantern-segment-switch__track::after {
    animation: none;
    transition: none;
  }
}