/* デンカレ25周年 特設サイト（xxvth） — デザイン v3（Leo、カンプ v22、2026-11-13）
   - 仕様: 20261113_仕様_特設サイトデザインv3.md。寸法は目安で、カンプとの見た目の一致を優先している
   - 透過PNGの素材はすべて @2x（CSS では半分の大きさで置く）
   - スマホ基準で書き、PC（1024px 以上）を @media で上書きする */

:root {
  --c-ink: #070508;
  --c-face: #0F0C11;
  --c-text: #ECEAEF;
  --c-soft: #D1C7D7;
  --c-label: #C4B9C6;   /* v23で一段明るく（旧 #9B8CA3） */
  --c-muted: #B0A8AF;   /* 旧 #87818C */
  --c-dim: #837C83;     /* 打ち消し線つきでも日時が読める明るさ（旧 #554F58） */
  --c-rule: rgba(196, 191, 200, .22); /* 表の区切り線（v23） */
  --c-merch-bg: #423F42; /* MERCH の写真の台紙（v23） */
  --c-brass: #8A7448;
  --c-brass-light: #B29C6C;
  --f-en: "Oswald", "Impact", "Arial Narrow", sans-serif;
  --f-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --header-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-ink) url(../img/bg_texture.jpg) repeat 0 0 / 800px auto;
  color: var(--c-text);
  font-family: var(--f-ja);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
p, ul, dl, dd, h1, h2, h3, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.wrap { width: min(100% - 32px, 800px); margin-inline: auto; }

/* ---------------- 札（chip_*.png を文字の幅に伸ばす） ---------------- */
.chip {
  display: inline-block;
  padding: 2px 9px 3px;
  background: url(../img/chip_off.png) no-repeat 0 0 / 100% 100%;
  color: var(--c-text);
  font-weight: 900;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
.chip-on   { background-image: url(../img/chip_on.png);   color: #1A140C; }
.chip-sold { background-image: url(../img/chip_sold.png); color: #111; font-family: var(--f-en); font-weight: 700; letter-spacing: .04em; }
.chip-fast { background-image: url(../img/chip_fast.png); color: #1A140C; font-size: 10px; margin-right: 6px; vertical-align: .1em; }

/* ---------------- ボタン（button/*.png の地。影・銀の縁込み） ---------------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-inline: auto;
  padding: 0 6px 5px 0;            /* 地の画像は右下に影がある分、文字を面の中央へ寄せる */
  background: url(../img/btn_sp_kv.png) no-repeat 0 0 / 100% 100%;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 1.5px 0 rgba(0, 0, 0, .85);
  white-space: nowrap;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translate(1px, 3px); }
.btn:focus-visible, .btn-ghost:focus-visible, .nav-toggle:focus-visible, .merch-photo:focus-visible { outline: 2px solid var(--c-brass-light); outline-offset: 3px; }
.btn-icon {
  flex: none; width: 28px; height: 20px; margin-left: -6px;
  background: url(../img/ticket_icon.png) no-repeat center / contain;
}
.btn-arrow { font-family: var(--f-en); font-weight: 700; color: var(--c-brass-light); text-shadow: none; }
/* 期間外（チケット情報を見る、ページ内リンク）は黒い地 */
.btn.btn-off { background-image: url(../img/btn_ghost.png); font-weight: 700; text-shadow: none; padding: 0; }

.btn-kv { width: 343px; max-width: 100%; height: 70px; font-size: 19px; }
.btn-kv .btn-icon { width: 30px; height: 22px; }
.btn-card { width: 100%; height: 64px; font-size: 18px; }
.btn-sticky { width: min(100%, 357px); height: 60px; font-size: 18px; background-image: url(../img/btn_sp_sticky.png); }
.btn-header { display: none; }

.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 1.2em;
  width: 300px; max-width: 100%; height: 50px; margin-inline: auto;
  background: url(../img/btn_ghost.png) no-repeat 0 0 / 100% 100%;
  color: var(--c-text); font-weight: 700; font-size: 14px; text-decoration: none;
}
.btn-ghost:hover { filter: brightness(1.15); }
.btn-ghost:active { transform: translate(1px, 2px); }

.text-link { color: var(--c-soft); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------------- ヘッダー ---------------- */
.site-nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h); padding: 0 12px 0 16px;
  transition: background-color .25s, box-shadow .25s;
}
.site-nav.is-scrolled, .site-nav.is-open { background: rgba(7, 5, 8, .92); box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.nav-logo { flex: none; margin-right: auto; }
.nav-logo img { width: 66px; display: block; }
.nav-links a {
  font-family: var(--f-en); font-weight: 600; letter-spacing: .12em;
  color: var(--c-text); text-decoration: none;
}
.nav-links a:hover { color: var(--c-brass-light); }

/* スマホ: 刷毛の3本線のメニュー。開くとヘッダーの下にナビ */
.nav-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 5px; width: 26px; }
.nav-toggle-bars i {
  display: block; height: 4px;
  background: url(../img/rule_ink.png) repeat-x 0 0 / auto 4px;
  filter: brightness(1.6);
  transition: transform .2s, opacity .2s;
}
.nav-toggle-bars i:nth-child(2) { background-position: -300px 0; width: 22px; margin-left: 2px; }
.nav-toggle-bars i:nth-child(3) { background-position: -700px 0; }
.is-open .nav-toggle-bars i:nth-child(1) { transform: translateY(9px) rotate(42deg); }
.is-open .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.is-open .nav-toggle-bars i:nth-child(3) { transform: translateY(-9px) rotate(-42deg); }

@media (max-width: 1023.98px) {
  .nav-links {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: rgba(7, 5, 8, .96); box-shadow: 0 12px 20px rgba(0, 0, 0, .5);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .is-open .nav-links { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
  .nav-links ul { padding: 6px 0 18px; }
  .nav-links a { display: block; padding: 12px 24px; font-size: 20px; text-align: center; }
}

/* ---------------- KV ---------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 667px;
  padding: 44px 0 40px;
  background: #0b080d url(../img/kv_sp.jpg) no-repeat center top / cover;
}
.hero::before {          /* 上に黒の膜（ヘッダーを読ませる）・下へ向けて黒の膜（文字を読ませる） */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 90px),
    linear-gradient(rgba(0, 0, 0, 0) 330px, rgba(0, 0, 0, .92) 100%);
}
.hero-inner { padding: 0 16px; text-align: center; }
.hero-logo { margin: 0 -16px; }
.hero-logo img { display: block; width: 379px; max-width: none; margin: 0 auto; }
@media (max-width: 379px) { .hero-logo img { width: 101%; } }
.hero-lead { margin-top: 8px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: #DED8EA; }
.hero-divider img { width: 140px; margin-top: 2px; }
.hero-date { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-top: 6px; }
.hero-date img { height: 50px; width: auto; }
.hero-dow { font-weight: 900; font-size: 15px; line-height: 1; padding-bottom: 6px; }
.hero-time { font-family: var(--f-en); font-weight: 600; font-size: 16px; letter-spacing: .04em; margin-top: 2px; }
.hero-venue { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-top: 8px; }
.hero-venue img { height: 29px; width: auto; }
.hero-city { font-family: var(--f-en); font-weight: 600; font-size: 14px; line-height: 1; padding-bottom: 4px; }
.hero-scroll { display: none; }

/* 受付状況の1行（status_band.png を帯に） */
.status-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 10px;
  width: 343px; max-width: 100%; min-height: 28px; margin: 14px auto 6px; padding: 3px 14px 4px;
  background: url(../img/status_band.png) no-repeat 0 0 / 100% 100%;
  font-size: 11px; line-height: 1.5; font-weight: 400; color: var(--c-text);
}
.status-line .st-a { font-weight: 900; white-space: nowrap; }
.status-line .st-b { white-space: nowrap; color: var(--c-soft); }
.status-line .st-sep { color: var(--c-muted); }
.status-line b { color: var(--c-brass-light); font-weight: 900; }
.hero-btn-wrap { margin-top: 2px; }

/* ---------------- セクション共通 ---------------- */
.sec { padding: 72px 0 24px; }
.sec-title { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.sec-title img { height: 44px; width: auto; }
.sec-title .ja { margin-top: 4px; font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--c-label); }

.sub + .sub { margin-top: 48px; }
.sub-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.sub-title { position: relative; padding-left: 18px; font-weight: 900; }
.sub-title::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 17.5px; margin-top: -9px;
  background: url(../img/mark_brass.png) no-repeat center / contain;
}
.sub-en { font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--c-label); }

/* 表（ラベル＋値）。区切りは1pxの静かな線（v23。旧: かすれた筆の線 rule_ink.png）。いちばん下の行の下には引かない */
.table > div {
  display: grid; grid-template-columns: 90px 1fr; gap: 0 8px;
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--c-rule);
}
.table > div:last-child { border-bottom: 0; }
.table dt { color: var(--c-label); font-size: 13.5px; font-weight: 400; letter-spacing: .06em; padding-top: 1px; }
.table dd { font-size: 14.5px; }
/* 発券方法・発券開始: プレイガイドが複数のときは1行ずつ「名前（--c-label の太字）: 内容」（v24。スマホは折り返してよい） */
.pg-line { display: block; }
.pg-line + .pg-line { margin-top: 4px; }
.pg-name { font-weight: 700; color: var(--c-label); }
.pg-sep { color: var(--c-label); margin-right: .3em; }

/* ---------------- TICKET: 現在発売中 ---------------- */
.ticket-now {
  display: grid; gap: 14px;
  padding: 20px 18px 22px 26px;
  border: 15px solid transparent;
  border-image: url(../img/plate_accent.png) 30 fill / 15px / 0 stretch;
}
.ticket-now.tone-plain { border-image-source: url(../img/plate.png); }
.tn-body { display: grid; gap: 4px; }
.tn-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.tn-title { font-weight: 900; font-size: 17px; line-height: 1.4; }
.tone-plain .tn-title { font-family: var(--f-en); font-weight: 700; letter-spacing: .08em; color: var(--c-soft); }
.tn-period { font-size: 13px; color: var(--c-soft); }
.tn-remain { display: flex; align-items: baseline; gap: 8px; color: var(--c-label); font-size: 13px; }
.tn-remain b { color: var(--c-brass-light); font-size: 17px; font-weight: 900; }
.tn-text { font-size: 13px; color: var(--c-soft); }
.is-ended .tn-text { font-size: 15px; color: var(--c-text); }
.ticket-none, .ticket-fallback { padding: 18px 4px; font-size: 14px; color: var(--c-soft); text-align: center; }
.ticket-fallback .btn { margin-top: 14px; max-width: 343px; }

/* ---------------- TICKET: 販売終了 ---------------- */
/* 行の区切りは表と同じ1pxの静かな線（v24、Leo回答。旧: rule_ink.png）。行と行の間だけで、いちばん下の行の下には引かない */
.closed-row { padding: 6px 0 10px; }
.closed-row + .closed-row { border-top: 1px solid var(--c-rule); padding-top: 12px; }
.cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cl-main { display: grid; }
.cl-name { font-weight: 700; font-size: 14px; color: var(--c-muted); text-decoration-thickness: 1.5px; }
.cl-period { font-size: 12px; color: var(--c-dim); text-decoration-thickness: 1px; }
.cl-head .chip { flex: none; margin-top: 2px; font-size: 11px; }
.cl-after { margin-top: 8px; font-size: 12.5px; color: var(--c-soft); }
.cl-after-sep { margin: 0 .4em; color: var(--c-muted); }
.cl-link { margin-top: 4px; font-size: 12.5px; }

/* ---------------- INFORMATION（背景にボーカルの写真。上下の端は地へ溶かす） ---------------- */
.sec-info { position: relative; isolation: isolate; padding-bottom: 72px; }
.sec-info::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28)),
    url(../img/info_sp.jpg) no-repeat 20% 30% / cover;
  -webkit-mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 80px), transparent);
          mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.sec-info .sec-title { margin-top: 0; }
.text-link-strong { color: var(--c-text); font-size: 15.5px; }

/* ---------------- MERCH ---------------- */
/* 商品が0件のあいだの「準備中」パネル（カンプ v24、v25で COMING SOON だけ・高さを詰めた）。荒い縁のパネル（plate.png）を幅いっぱい。COMING SOON は上下中央 */
.merch-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 110px; padding: 0 12px;
  border: 15px solid transparent;
  border-image: url(../img/plate.png) 30 fill / 15px / 0 stretch;
  text-align: center;
}
.merch-soon[hidden] { display: none; }
.merch-soon-title img { display: block; height: 36px; width: auto; }
.merch-lead { margin: -14px 0 24px; text-align: center; font-weight: 700; font-size: 14px; color: var(--c-soft); }
.merch-list { display: grid; grid-template-columns: 1fr; gap: 36px 12px; }
.merch-list.is-2col { grid-template-columns: 1fr 1fr; }
.merch-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; cursor: zoom-in;
  border: 0; background: none;
}
/* 台紙（v23）: 明るめのニュートラルグレー。黒い商品が地に同化しないように。
   縁のかすれは plate.png の形でマスクする（mask-border 非対応のブラウザは四角のまま） */
.merch-frame {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--c-merch-bg);
  -webkit-mask-box-image: url(../img/plate.png) 30 / 8px stretch;
          mask-border: url(../img/plate.png) 30 fill / 8px stretch;
}
.merch-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 拡大できる印（v23）: 写真の右下、暗い丸に白の虫眼鏡＋「＋」。直径は写真の幅の約14%（最小28px） */
.merch-zoom {
  position: absolute; right: 5%; bottom: 5%;
  display: grid; place-items: center;
  width: max(28px, 14%); aspect-ratio: 1; border-radius: 50%;
  background: rgba(10, 8, 12, .8); pointer-events: none;
}
.merch-zoom svg { display: block; width: 62%; height: 62%; }
.merch-sold { position: absolute; top: 2px; right: -4px; font-size: 12px; }
.merch-name { margin-top: 10px; font-weight: 700; font-size: 15px; line-height: 1.45; }
.merch-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-top: 2px; }
.merch-opt { font-size: 12px; color: var(--c-muted); }
.merch-price { margin-left: auto; font-weight: 700; font-size: 15px; white-space: nowrap; }
.merch-price small { margin-left: 2px; font-size: 10px; font-weight: 400; color: var(--c-muted); }
.merch-card.is-soldout .merch-name, .merch-card.is-soldout .merch-price, .merch-card.is-soldout .merch-opt { color: var(--c-dim); }
.merch-card.is-soldout .merch-photo img { opacity: .55; }
.merch-store { margin-top: 44px; }

/* ライトボックス */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--c-text); overflow: hidden;
}
.lightbox::backdrop { background: rgba(4, 2, 6, .9); }
.lightbox[open] { display: grid; place-items: center; }
.lb-figure { display: grid; place-items: center; gap: 12px; width: 100%; height: 100%; padding: 56px 16px 28px; }
.lb-img { max-width: min(100%, 900px); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.lb-caption { font-size: 14px; color: var(--c-soft); text-align: center; }
.lb-close, .lb-prev, .lb-next {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: rgba(15, 12, 17, .7); border: 1px solid rgba(236, 234, 239, .35); border-radius: 50%;
  font-family: var(--f-en); font-size: 28px; line-height: 1; cursor: pointer;
}
.lb-close { top: 10px; right: 10px; font-size: 26px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { border-color: var(--c-brass-light); color: var(--c-brass-light); }
html.is-lightbox { overflow: hidden; }

/* ---------------- NOTES・シェア ---------------- */
.notes li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.75; }
.notes li + li { margin-top: 10px; }
.notes li::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 10px;
  background: url(../img/chip_on.png) no-repeat center / 100% 100%;
}
.share { margin: 40px 0 48px; }
.share .btn-ghost { font-size: 15px; }
.share-tag { font-family: var(--f-ja); }

/* ---------------- フッター（縞鋼板。上端に線は引かず影で落とす） ---------------- */
.site-footer {
  position: relative;
  padding: 44px 16px 36px;
  background: #0d0b0f url(../img/footer_plate.jpg) repeat center top / 1440px auto;
  text-align: center;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
}
.footer-logo { width: 120px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 18px; font-size: 13px; color: var(--c-soft); }
.footer-links li + li::before { content: "／"; margin: 0 .5em; color: var(--c-muted); }
.footer-links li.br { flex-basis: 100%; height: 0; }   /* スマホは Apple Music から2行目 */
.footer-links li.br::before { content: none; }
.footer-links li.br + li::before { content: none; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.copyright { margin-top: 18px; font-size: 11px; color: var(--c-muted); }

/* ---------------- スマホの固定ボタン ---------------- */
.sticky-ticket {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 2px 8px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(7, 5, 8, .88), rgba(7, 5, 8, .97));
  box-shadow: 0 -10px 18px rgba(0, 0, 0, .45);
}
.sticky-ticket .status-line { margin: 4px auto 2px; background: none; min-height: 0; padding: 0; width: auto; }

/* ================= PC（1024px 以上） ================= */
@media (min-width: 1024px) {
  :root { --header-h: 90px; }
  body { font-size: 15px; }
  .site-nav { padding: 0 36px 0 40px; gap: 30px; }
  .nav-logo img { width: 92px; }
  .nav-toggle { display: none; }
  .nav-links ul { display: flex; gap: 30px; }
  .nav-links a { font-size: 18px; }
  .btn-header { display: flex; width: 268px; height: 59px; margin: 0; font-size: 14px; gap: 8px; background-image: url(../img/btn_header.png); }
  /* ↑ PCの受付ボタンは専用の地（仕様v3: button/btn_header.png・btn_pc_kv.png）。期間外は .btn.btn-off（btn_ghost）が詳細度で勝つ */
  .btn-header.btn-off { width: 240px; height: 44px; }
  .btn-header .btn-icon { width: 24px; height: 17px; }

  .hero {
    min-height: max(760px, 100vh); padding: 120px 0 60px;
    display: flex; align-items: center;
    background-image: url(../img/kv_pc.jpg);
    background-position: center center;
  }
  .hero::before {
    background:
      linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 110px),
      linear-gradient(rgba(0, 0, 0, 0) 560px, rgba(0, 0, 0, .95) 100%),
      radial-gradient(ellipse 34% 48% at 28% 52%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
  }
  .hero-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    width: min(100%, 1440px); margin: 0 auto; padding: 0 90px 0 90px;
  }
  .hero-logo { flex: 0 1 656px; margin: 0; }
  .hero-logo img { width: 100%; max-width: 656px; }
  .hero-right { flex: 0 0 540px; }
  .hero-lead { font-size: 19px; margin-top: 0; }
  .hero-divider img { width: 260px; margin-top: 4px; }
  .hero-date { gap: 10px; margin-top: 4px; }
  .hero-date img { height: 100px; }
  .hero-dow { font-size: 26px; padding-bottom: 12px; }
  .hero-time { font-size: 28px; }
  .hero-venue { gap: 12px; margin-top: 8px; }
  .hero-venue img { height: 54px; }
  .hero-city { font-size: 21px; padding-bottom: 8px; }
  .hero-status { width: 540px; min-height: 40px; font-size: 15px; margin-top: 18px; }
  .btn-kv { width: 511px; height: 92px; font-size: 26px; gap: 14px; background-image: url(../img/btn_pc_kv.png); }
  .btn-kv .btn-icon { width: 44px; height: 32px; }
  .btn-kv.btn-off { width: 400px; height: 66px; font-size: 20px; }
  /* SCROLL の合図（v26）: SCROLL → 縦線 1px×56px → 線の上端から弾丸（v28: タイトルロゴの弾丸の傾きを打ち消して真下に向けたもの）が加速しながら落ちて消える（1.6秒周期）。
     押すと TICKET へ。約40px スクロールしたら js（ticket.js の watchScrollCue）が .is-hidden を付けてフェードで消す */
  .hero-scroll {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: absolute; left: 50%; bottom: 22px; z-index: 1; transform: translateX(-50%);
    padding: 4px 12px 0; text-decoration: none; cursor: pointer;
    transition: opacity .4s ease, visibility .4s;
  }
  .hero-scroll.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  .hs-label {
    font-family: var(--f-en); font-weight: 600; font-size: 12px; line-height: 1;
    letter-spacing: .3em; padding-left: .3em; /* 字間の分だけ右へずれるのを戻して中央に */
    color: var(--c-label);
  }
  .hs-line { position: relative; width: 1px; height: 56px; background: rgba(196, 194, 204, .28); }
  .hs-bullet {
    position: absolute; left: 50%; top: 0; width: 12.5px; height: 31px; max-width: none; margin-left: -6.25px;
    opacity: 0;
    /* 動き（加速）と不透明度を別アニメにして、translateY の ease-in が途中の不透明度のキーで切れないようにする */
    animation: hs-fall 1.6s infinite, hs-fade 1.6s linear infinite;
  }
  @keyframes hs-fall {
    0% { transform: translateY(0); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    75%, 100% { transform: translateY(25px); }  /* v27〜: 弾丸 31px の下端が線 56px の下端で止まる距離 */
  }
  @keyframes hs-fade {   /* 最初の12%で現れ、落ちる動きの終わり30%（52.5〜75%）で消え、75〜100%は消えたまま（間） */
    0% { opacity: 0; }
    12%, 52.5% { opacity: 1; }
    75%, 100% { opacity: 0; }
  }

  .sec { padding: 100px 0 30px; }
  .sec-title { flex-direction: row; align-items: flex-end; gap: 4px; margin-bottom: 36px; margin-left: -6px; }
  .sec-title img { height: 58px; }
  .sec-title .ja { margin: 0 0 4px; font-size: 15px; }
  .sub + .sub { margin-top: 56px; }
  .sub-head { font-size: 15px; }
  .table > div { grid-template-columns: 96px 1fr; padding: 11px 0 12px; }
  .table dt { font-size: 12.5px; }
  .table dd { font-size: 14px; }

  .ticket-now { grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 14px 6px 18px 14px; }
  .btn-card { width: 308px; height: 74px; font-size: 17px; background-image: url(../img/btn_pc_card.png); }
  .tn-title { font-size: 17px; }

  .sec-info { padding-bottom: 100px; }
  .sec-info::before {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0) calc(50% - 560px), rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, 0) calc(50% + 560px)),
      url(../img/info_pc.jpg) no-repeat 28% 30% / cover;
    top: -70px;
    -webkit-mask-image: linear-gradient(transparent, #000 110px, #000 calc(100% - 110px), transparent);
            mask-image: linear-gradient(transparent, #000 110px, #000 calc(100% - 110px), transparent);
  }
  .text-link-strong { font-size: 15px; }

  .merch-soon { min-height: 130px; }
  .merch-soon-title img { height: 46px; }
  .merch-lead { margin: -10px 0 30px; }
  .merch-list, .merch-list.is-2col { grid-template-columns: repeat(4, 1fr); gap: 22px 18px; }
  .merch-name { font-size: 14px; margin-top: 8px; }
  .merch-price { font-size: 14.5px; }
  .merch-store { margin-top: 32px; }
  .btn-ghost { width: 364px; height: 52px; }

  .notes li { font-size: 14px; padding-left: 24px; }
  .notes li + li { margin-top: 8px; }
  .share { margin: 52px 0 70px; }

  .site-footer { padding: 36px 16px 30px; }
  .footer-logo { width: 150px; }
  .footer-links { font-size: 12.5px; max-width: 520px; margin-inline: auto; }

  .sticky-ticket { display: none !important; }
}

/* ---- KVの動画背景（js/kv_video.js。v24 で PC だけ復活、2026-11-13） ----
   - PC（1024px 以上）だけ。スマホ・reduced-motion は静止画（kv_sp.jpg / kv_pc.jpg）のまま
   - .hero の中に敷く（z-index: -2。上に .hero::before の黒い膜＝上部・下部・ロゴの背後がそのまま重なる）
   - 再生中だけ html に .kv-video-on が付き、動画をフェードインする。.hero の背景画像（ポスター）は外さず下に敷いたまま
     （v29: 一時停止・読み込み中・終了のときは .kv-video-on が外れ、YouTube のマークの代わりにポスターが見える）
   - 色: 動画の彩度を落として暗く → #2A1F33 の膜を mix-blend-mode: color で重ねて紫寄りにまとめる（Leo カンプ v24、11-13 に色を半分ほど戻した）
     暗さ・色の残し方は --kv-video-filter、紫の膜の濃さは --kv-video-tint-opacity（0〜1）で調整する
   - 動画は 16:9 を cover で敷き、さらに 112% に拡大して外周を切り落とす（v29: YouTube の上部のタイトル・下部のバーが一瞬出ても画面の外に） */
.kv-video { display: none; }
@media (min-width: 1024px) {
  .kv-video {
    /* 2026-11-13 追加: 元の照明の色を残す（Jackyさん「もう少し色もどしていい」→さらにもう少し）。v29 は grayscale(.45) saturate(.85) contrast(1.12)＋膜 .45、v24 は grayscale(1) contrast(1.15) brightness(.55)＋膜 1 */
    --kv-video-filter: grayscale(.25) saturate(.95) contrast(1.1) brightness(.58);
    --kv-video-tint-opacity: .3;
    display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
    container-type: size; isolation: isolate; background: #0b080d;
    opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s;
  }
  .kv-video-on .kv-video { opacity: 1; visibility: visible; transition: opacity .8s ease; }
  .kv-video-player iframe {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none;
    width: max(112%, 199.11cqh); height: max(112%, 63cqw);
    filter: var(--kv-video-filter);
  }
  .kv-video-tint { position: absolute; inset: 0; background: #2A1F33; mix-blend-mode: color; opacity: var(--kv-video-tint-opacity); }
}
@media (prefers-reduced-motion: reduce) { .kv-video { display: none !important; } }

/* ---- SCROLL の合図（v26）の補足 ----
   - reduced-motion: 動かさず、弾丸を線の下端に止めて表示（31px の弾丸の下端 = 56px の線の下端）
   - 低い画面（高さ 860px 以下）: 合図（下端から約105px）がロゴの下端に重ならないよう、KV の下の余白を広げる */
@media (prefers-reduced-motion: reduce) {
  .hs-bullet { animation: none; opacity: 1; transform: translateY(25px); }
  .hero-scroll { transition: none; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .hero { padding-bottom: 110px; }
}