:root{
  --ink:#0B0A10;
  --velvet:#171029;
  --smoke:#221A34;
  --champagne:#D8B26A;
  --blush:#E9DDC9;
  --beam:#3B49E0;
  --line:rgba(233,221,201,.14);
  --display:"Bodoni Moda", serif;
  --body:"Zen Kaku Gothic New", system-ui, sans-serif;
  --util:"Archivo", sans-serif;
  --pad:clamp(20px, 6vw, 88px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--blush);
  font-family:var(--body); font-size:15px; line-height:1.9;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--champagne); outline-offset:3px}

.eyebrow{font-family:var(--util); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--champagne); display:block; margin-bottom:14px}
.sec{padding:clamp(64px,11vw,132px) var(--pad); position:relative}
.sec + .sec{border-top:1px solid var(--line)}
.sec-title{font-family:var(--display); font-weight:400; font-size:clamp(28px,5.6vw,54px); line-height:1.12; margin:0 0 10px}
.sec-title em{font-style:italic; color:var(--champagne)}
.sec-sub{font-size:13px; color:rgba(233,221,201,.6); margin:0 0 36px}
.body-copy{max-width:58ch}
.body-copy p{margin:0 0 20px}

/* header */
header{position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad); background:linear-gradient(to bottom, rgba(11,10,16,.94), rgba(11,10,16,0)); backdrop-filter:blur(6px)}
.brand{font-family:var(--display); font-size:15px; letter-spacing:.16em}
.brand span{color:var(--champagne)}
nav.desk{display:none; gap:24px; font-family:var(--util); font-size:11px; letter-spacing:.22em}
nav.desk a{opacity:.72; transition:opacity .25s}
nav.desk a:hover{opacity:1; color:var(--champagne)}
.cta-mini{font-family:var(--util); font-size:11px; letter-spacing:.2em; border:1px solid var(--champagne); color:var(--champagne);
  padding:9px 16px; border-radius:100px; white-space:nowrap; transition:background .3s, color .3s}
.cta-mini:hover{background:var(--champagne); color:var(--ink)}
.head-right{display:flex; align-items:center; gap:12px}
.lang-switch{font-family:var(--util); font-size:11px; letter-spacing:.18em; color:rgba(233,221,201,.72);
  padding:8px 4px; transition:color .25s; white-space:nowrap}
.lang-switch:hover{color:var(--champagne)}
@media(min-width:900px){ nav.desk{display:flex} }

/* 全幅（フルブリード）演出のための横スクロール防止ガード */
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* hero */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:140px var(--pad) 56px; position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, var(--velvet) 0%, var(--ink) 62%)}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.5;
  transform:scale(1.12); animation:kenburns 20s cubic-bezier(.2,.6,.2,1) forwards}
.hero-media video.hero-vid{width:100%; height:100%; object-fit:cover; opacity:.62; display:block}
@keyframes kenburns{ to{ transform:scale(1) } }
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--ink) 4%, rgba(11,10,16,.35) 48%, rgba(11,10,16,.72) 100%)}
.beam{position:absolute; top:-30%; left:50%; width:52vw; height:160%; z-index:1;
  transform:translateX(-50%) rotate(14deg);
  background:linear-gradient(to bottom, rgba(59,73,224,.26), rgba(216,178,106,.09) 45%, transparent 78%);
  filter:blur(38px); animation:sweep 11s ease-in-out infinite alternate; pointer-events:none}
@keyframes sweep{
  from{transform:translateX(-95%) rotate(6deg); opacity:.5}
  to{transform:translateX(-5%) rotate(20deg); opacity:.95}
}
.hero-inner{position:relative; z-index:2}
.hero h1{font-family:var(--display); font-weight:400; margin:0; font-size:clamp(40px,11.5vw,132px); line-height:.95}
.hero h1 .l2{display:block; font-style:italic; color:var(--champagne)}
.edition{font-family:var(--util); font-size:11px; letter-spacing:.3em; margin:0 0 18px; color:rgba(233,221,201,.66)}
.facts{display:flex; flex-wrap:wrap; gap:0 clamp(20px,5vw,56px); margin:36px 0 0; border-top:1px solid var(--line); padding-top:22px}
.fact{padding:6px 0}
.fact dt{font-family:var(--util); font-size:10px; letter-spacing:.26em; color:var(--champagne); margin-bottom:4px}
.fact dd{margin:0; font-family:var(--display); font-size:clamp(19px,4.2vw,28px); line-height:1.2}
.fact dd small{font-family:var(--body); font-size:12px; letter-spacing:.08em; opacity:.7}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--util); font-size:12px; letter-spacing:.2em;
  padding:15px 28px; border-radius:100px; border:1px solid var(--champagne); transition:transform .2s, background .3s, color .3s}
.btn-fill{background:var(--champagne); color:var(--ink); font-weight:700}
.btn-line{color:var(--champagne)}
.btn-line:hover{background:rgba(216,178,106,.12)}
.btn:hover{transform:translateY(-2px)}
.ended-badge{display:inline-block; font-family:var(--util); font-size:10px; letter-spacing:.24em;
  border:1px solid var(--line); border-radius:100px; padding:6px 14px; margin-bottom:18px; opacity:.75}
.invite-badge{display:inline-block; font-family:var(--util); font-size:11px; font-weight:700; letter-spacing:.18em;
  background:var(--champagne); color:var(--ink); border-radius:100px; padding:6px 14px; margin-bottom:18px}
.invite-badge span{font-weight:500; opacity:.7; letter-spacing:.14em}

/* blocks */
/* 画像ブロックは全幅シネマティック表示。スクロールで入るとゆっくり収まるズーム。 */
.sec:has(> .figure){padding:0}
.sec:has(> .figure) > .eyebrow,
.sec:has(> .figure) > .sec-title{padding:clamp(40px,7vw,80px) var(--pad) 0}
.figure{margin-inline:auto; margin-block:clamp(24px,4vw,48px); max-width:520px; overflow:hidden; position:relative}
.figure img{width:100%; height:auto; object-fit:contain; border:1px solid var(--line); display:block;
  transform:scale(1.14); transition:transform 1.6s cubic-bezier(.16,.7,.3,1)}
.reveal.in .figure img{transform:scale(1)}
.figure figcaption{padding:12px var(--pad) 20px; font-size:12px; color:rgba(233,221,201,.55)}
.gallery{display:grid; gap:10px; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .gallery{grid-template-columns:repeat(3,1fr); gap:14px} }
.gallery img{aspect-ratio:4/5; object-fit:cover; width:100%; border:1px solid var(--line); transition:opacity .3s}
.gallery a:hover img{opacity:.75}

.lineup{display:grid}
.artist{display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:20px 0;
  border-bottom:1px solid var(--line); transition:padding-left .3s ease}
.artist:hover{padding-left:12px}
.artist:hover .artist-name{color:var(--champagne)}
.artist-name{font-family:var(--display); font-size:clamp(21px,4.6vw,36px); transition:color .3s}
.artist-role{font-family:var(--util); font-size:10px; letter-spacing:.24em; opacity:.6; white-space:nowrap}

/* 出演者＝写真カード（画像がある時だけ .lineup-cards が付く） */
.lineup-cards{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:clamp(14px, 3vw, 30px)}
.lineup-cards .artist{flex-direction:column; align-items:flex-start; justify-content:flex-start;
  gap:12px; padding:0; border-bottom:none}
.lineup-cards .artist:hover{padding-left:0}
.artist-photo-wrap{display:block; width:100%; aspect-ratio:3/4; overflow:hidden; background:var(--smoke)}
.artist-photo{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.lineup-cards .artist:hover .artist-photo{transform:scale(1.06)}
.lineup-cards .artist-name{font-size:clamp(16px, 2.4vw, 23px)}
.lineup-cards .artist-role{white-space:normal; margin-top:-4px}

.tables{display:grid; gap:14px}
@media(min-width:820px){ .tables{grid-template-columns:repeat(2,1fr); gap:18px} }
.table-card{position:relative; padding:26px 24px; border:1px solid var(--line);
  background:linear-gradient(150deg, var(--smoke), rgba(11,10,16,.6)); overflow:hidden}
.table-card::before{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(216,178,106,var(--sheen,.10)) 50%, transparent 62%);
  transform:translateX(-120%); transition:transform .9s ease}
.table-card:hover::before{transform:translateX(120%)}
.table-card[data-rank="1"]{border-color:rgba(216,178,106,.55); --sheen:.30}
.table-card[data-rank="2"]{border-color:rgba(216,178,106,.34); --sheen:.22}
.table-card[data-rank="3"]{--sheen:.15}
.table-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; position:relative}
.table-name{font-family:var(--display); font-size:clamp(23px,4.4vw,32px); letter-spacing:.04em}
.table-price{font-family:var(--util); font-size:15px; color:var(--champagne); white-space:nowrap}
.table-meta{position:relative; margin:14px 0 0; font-size:13px; color:rgba(233,221,201,.68)}
.table-seats{position:relative; display:inline-block; margin-top:12px; font-family:var(--util); font-size:10px;
  letter-spacing:.2em; border:1px solid var(--line); border-radius:100px; padding:5px 12px}

.news-item{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line)}
.news-date{font-family:var(--util); font-size:11px; letter-spacing:.14em; color:var(--champagne); white-space:nowrap}
.news-label{font-family:var(--util); font-size:9px; letter-spacing:.18em; border:1px solid var(--line); padding:3px 8px; white-space:nowrap}
.news-text{font-size:14px}

.embed{position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--line)}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* Instagram埋め込み（縦型・カード型） */
.embed.embed-ig{position:static; aspect-ratio:auto; max-width:460px; margin-inline:auto; height:660px; border:0}
.embed.embed-ig iframe{position:static; width:100%; height:100%; background:#fff}
/* 過去イベントの自動再生リール（9:16・object-fit:coverで歪みなし） */
.pastcard-reel{border:1px solid var(--line); background:#000; overflow:hidden; transition:border-color .3s}
.pastcard-reel:hover{border-color:rgba(216,178,106,.5)}
.reel{position:relative; width:100%; aspect-ratio:9/16; overflow:hidden; background:#000}
.reel video{width:100%; height:100%; object-fit:cover; display:block}
.pastcard-ig{border:1px solid var(--line); background:#0d0d0d; overflow:hidden}
.ig-embed{width:100%; height:600px; overflow:hidden; background:#000}
.ig-embed iframe{width:100%; height:100%; border:0; display:block; background:#fff}
.map{width:100%; aspect-ratio:16/10; border:1px solid var(--line); filter:grayscale(1) invert(.9) hue-rotate(180deg) brightness(.85)}

/* archive wall */
.wall{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(240px,1fr))}
.wall-card{position:relative; display:block; border:1px solid var(--line); overflow:hidden; background:var(--smoke)}
.wall-card img, .wall-card video{aspect-ratio:3/4; object-fit:cover; width:100%; display:block; opacity:.72; transition:opacity .5s, transform .8s}
.wall-card:hover img{opacity:.95; transform:scale(1.04)}
.wall-meta{position:absolute; inset:auto 0 0 0; padding:18px 18px 16px;
  background:linear-gradient(to top, rgba(11,10,16,.94), transparent)}
.wall-date{font-family:var(--util); font-size:10px; letter-spacing:.22em; color:var(--champagne)}
.wall-title{font-family:var(--display); font-size:22px; line-height:1.2; margin:4px 0 0}
.wall-year{font-family:var(--display); font-size:clamp(30px,7vw,64px); font-style:italic; color:rgba(233,221,201,.28);
  margin:56px 0 18px; border-bottom:1px solid var(--line); padding-bottom:12px}
.wall-year:first-of-type{margin-top:8px}

footer{padding:60px var(--pad) 48px; border-top:1px solid var(--line); font-size:12px}
.f-sns{display:flex; flex-wrap:wrap; gap:18px; font-family:var(--util); font-size:11px; letter-spacing:.18em; margin-bottom:26px}
.f-sns a{opacity:.7}
.f-sns a:hover{opacity:1; color:var(--champagne)}
.f-links{display:flex; flex-wrap:wrap; gap:8px 22px; opacity:.6; margin-bottom:26px}
.copy{font-family:var(--util); font-size:10px; letter-spacing:.2em; opacity:.45}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  .figure img, .hero-media img{transform:none !important}
  html{scroll-behavior:auto}
}

/* テキスト＋フライヤー画像（次回詳細などに任意で添える） */
.text-with-flyer{display:grid; gap:clamp(24px,4vw,64px); max-width:1300px}
@media(min-width:760px){ .text-with-flyer{grid-template-columns:1fr minmax(400px,520px); align-items:center} }
.text-with-flyer .body-copy{max-width:none}
.text-flyer-wrap{border:1px solid var(--line); overflow:hidden; background:var(--smoke)}
.text-flyer{width:100%; height:auto; display:block; transition:transform .7s ease}
.text-flyer-wrap:hover .text-flyer{transform:scale(1.03)}

/* 前回イベント（自動差込カード） */
.prevevent{display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--line);
  background:var(--smoke); overflow:hidden; transition:border-color .35s}
@media(min-width:720px){ .prevevent{grid-template-columns:minmax(0,44%) 1fr} }
.prevevent:hover{border-color:rgba(216,178,106,.5)}
.prevevent-media{display:block; overflow:hidden; background:var(--velvet)}
.prevevent-media img{width:100%; height:100%; min-height:220px; object-fit:cover; display:block;
  opacity:.82; transition:transform .7s ease, opacity .5s}
.prevevent:hover .prevevent-media img{transform:scale(1.05); opacity:1}
.prevevent-body{display:flex; flex-direction:column; justify-content:center; gap:9px; padding:clamp(22px,4vw,40px)}
.prevevent-date{font-family:var(--util); font-size:10px; letter-spacing:.22em; color:var(--champagne)}
.prevevent-title{font-family:var(--display); font-size:clamp(22px,4vw,34px); line-height:1.15}
.prevevent-lead{font-size:13px; color:rgba(233,221,201,.7); line-height:1.7}
.prevevent-link{font-family:var(--util); font-size:11px; letter-spacing:.16em; color:var(--champagne); margin-top:6px}

/* 前回の記録＝過去イベントの写真カード帯（各カードに日付・名称＋詳細リンク）
   スマホ1列・タブレット2列・PC3列で大きく見せる */
.body-copy + .pastgrid{margin-top:clamp(30px,5vw,56px)}
.pastgrid{display:grid; grid-template-columns:1fr; gap:clamp(14px,2.5vw,26px)}
@media(min-width:560px){ .pastgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .pastgrid{grid-template-columns:repeat(4,1fr)} }
.past-more{margin-top:clamp(24px,4vw,40px); text-align:center}
.past-more .btn{display:inline-block}

/* 画像タップで拡大（ライトボックス） */
.text-flyer, .artist-photo, .figure img{cursor:zoom-in}
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(6,5,10,.94); display:none;
  align-items:center; justify-content:center; padding:20px; cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.pastcard{display:block; border:1px solid var(--line); overflow:hidden; background:var(--smoke); transition:border-color .3s}
.pastcard:hover{border-color:rgba(216,178,106,.5)}
.pastcard-media{display:block; aspect-ratio:3/4; overflow:hidden; background:var(--velvet)}
.pastcard-media img{width:100%; height:100%; object-fit:cover; display:block; opacity:.72; transition:transform .7s ease, opacity .5s}
.pastcard:hover .pastcard-media img{transform:scale(1.05); opacity:1}
.pastcard-noimg .pastcard-media{background:linear-gradient(150deg,var(--velvet),var(--ink)); position:relative}
.pastcard-noimg .pastcard-media::after{content:"▶"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:rgba(233,221,201,.6)}
.pastcard-cap{display:block; padding:16px 18px 18px}
.pastcard-date{display:block; font-family:var(--util); font-size:10px; letter-spacing:.22em; color:var(--champagne)}
.pastcard-title{display:block; font-family:var(--display); font-size:clamp(19px,2.4vw,24px); line-height:1.22; margin-top:5px}

/* 常時表示CTAバー（開催予定のときだけ描画） */
body{padding-bottom:74px}
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(11,10,16,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.scta-inner{display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:1180px; margin:0 auto; padding:12px var(--pad)}
.scta-title{font-family:var(--display); font-size:15px; letter-spacing:.02em; opacity:.9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.scta-btns{display:flex; gap:10px; flex-shrink:0}
.scta-btn{font-family:var(--util); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:11px 22px; white-space:nowrap; transition:background .3s, color .3s}
.scta-fill{background:var(--champagne); color:var(--ink); font-weight:700}
.scta-fill:hover{background:var(--blush)}
.scta-line{border:1px solid var(--champagne); color:var(--champagne)}
.scta-line:hover{background:var(--champagne); color:var(--ink)}
@media(max-width:560px){
  .scta-title{display:none}
  .scta-inner{justify-content:stretch; padding:10px 14px}
  .scta-btns{flex:1; gap:8px}
  .scta-btn{flex:1; text-align:center; padding:12px 8px}
}

/* =========================================================================
   LUXE ELEVATION LAYER — プレゼンテーション格上げ（30万→80-100万レベル）
   既存レイヤーの後に置き、カスケードで上書きする。コピー・構造は不変。
   追加した意匠：光学サイズ・階調の効いたタイポ／フィルムグレイン＋ビネット／
   ヘアラインの金分割線／シーン・スウィープの効いたボタン／スクロール連動の
   段階リビール（見出し→本文→カードのカスケード）／ヒーローの入場アニメ／
   スクロール進捗バー＋ヘッダー凝縮。すべて自己完結・既存フォントのみ。
   ========================================================================= */
:root{
  --gold-lite:#E7CE92;
  --gold-deep:#B8934A;
  --gold-grad:linear-gradient(135deg,var(--gold-lite) 0%,var(--champagne) 52%,var(--gold-deep) 100%);
  --ease:cubic-bezier(.19,1,.22,1);        /* expo-out：ラグジュアリーな減速 */
  --ease-soft:cubic-bezier(.16,.7,.3,1);
}

/* ---- 基盤の質感 ---- */
html{-webkit-text-size-adjust:100%}
body{text-rendering:optimizeLegibility; font-feature-settings:"palt" 1; letter-spacing:.005em}
.brand,.hero h1,.sec-title,.fact dd,.artist-name,.table-name,.table-price,.wall-title,.wall-year,
.pastcard-title,.prevevent-title,.scta-title,.hero .edition{font-optical-sizing:auto}
::selection{background:rgba(216,178,106,.26); color:#fff}
*{scrollbar-width:thin; scrollbar-color:rgba(216,178,106,.42) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--champagne),var(--gold-deep)); border-radius:20px; border:3px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-lite)}

/* ---- 大気（フィルムグレイン＋ビネット）：全ページ共通・マークアップ不要 ---- */
body::before{content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}
body::after{content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(135% 105% at 50% 32%, transparent 56%, rgba(4,3,8,.5) 100%)}

/* ---- スクロール進捗バー（JSで scaleX を更新） ---- */
.scroll-progress{position:fixed; top:0; left:0; height:2px; width:100%; z-index:70;
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
  background:linear-gradient(90deg,var(--gold-deep),var(--champagne),var(--gold-lite));
  box-shadow:0 0 14px rgba(216,178,106,.55)}

/* ---- ヘッダー：スクロールで凝縮しガラス化 ---- */
header{padding-top:18px; padding-bottom:18px;
  transition:padding .45s var(--ease), background .45s ease, backdrop-filter .45s ease, border-color .45s ease;
  border-bottom:1px solid transparent}
header.scrolled{padding-top:11px; padding-bottom:11px; border-bottom-color:var(--line);
  background:rgba(8,7,12,.72); -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25)}
.brand{letter-spacing:.24em}
.cta-mini{letter-spacing:.22em; border-color:rgba(216,178,106,.5); transition:background .35s, color .35s, box-shadow .4s}
.cta-mini:hover{box-shadow:0 6px 20px -8px rgba(216,178,106,.7)}

/* ---- アイブロウ：先頭に金のティックを添える ---- */
.eyebrow{position:relative; padding-left:34px; letter-spacing:.4em}
.eyebrow::before{content:""; position:absolute; left:0; top:.6em; width:22px; height:1px;
  background:linear-gradient(90deg,var(--champagne),rgba(216,178,106,0))}

/* ---- 見出し：光学サイズ＋わずかなトラッキング／emは金のグラデ文字 ---- */
.sec-title{letter-spacing:-.012em; line-height:1.06; font-size:clamp(30px,6vw,60px)}
.sec-title em{color:var(--champagne)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sec-title em{background:linear-gradient(100deg,var(--gold-lite),var(--champagne) 45%,var(--gold-deep));
    -webkit-background-clip:text; background-clip:text; color:transparent}
}
.sec-sub{letter-spacing:.02em}

/* ---- 分割線：フラットな枠線 → 中央が金に灯るヘアライン ---- */
.sec + .sec{border-top:0}
.sec + .sec::before{content:""; position:absolute; top:0; left:var(--pad); right:var(--pad); height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,rgba(216,178,106,.34) 50%,var(--line) 88%,transparent)}
/* 見出しの無い区画＝前の区画の続き：区切り線を出さず、上の余白を詰める */
.sec + .sec.sec-cont::before{display:none}
.sec.sec-cont{padding-top:0}
/* セクション内の小見出し（一般入場／PREMIUM AREA／VIP など） */
.sub-head{margin:0 0 24px}
.sec-title + .sub-head{margin-top:clamp(22px,4vw,36px)}
.sub-eyebrow{display:block; font-family:var(--util); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--champagne); opacity:.85; margin-bottom:8px}
.sub-title{font-family:var(--display); font-weight:400; font-size:clamp(22px,4vw,32px); line-height:1.2; margin:0; text-wrap:balance}

/* ---- ボタン：金グラデ＋シーン・スウィープ＋浮遊 ---- */
.btn{font-size:11px; letter-spacing:.24em; padding:16px 32px; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .45s ease, background .4s ease, color .35s ease, border-color .4s ease}
.btn-fill{background:var(--gold-grad); color:var(--ink); box-shadow:0 8px 26px -10px rgba(216,178,106,.55)}
.btn-fill:hover{box-shadow:0 14px 38px -10px rgba(216,178,106,.75)}
.btn-line{border-color:rgba(216,178,106,.5)}
.btn-line:hover{border-color:var(--champagne); background:rgba(216,178,106,.1)}
.btn:hover{transform:translateY(-3px)}
.btn::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-135%); transition:transform .9s var(--ease)}
.btn:hover::after{transform:translateX(135%)}

/* ---- ヒーロー：入場アニメ（段階的にせり上がる）＋奥行きビネット ---- */
.hero-media img{opacity:.55; animation-duration:26s}
.hero-media::after{background:linear-gradient(to top, var(--ink) 2%, rgba(11,10,16,.3) 46%, rgba(11,10,16,.66) 100%)}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(125% 92% at 50% 42%, transparent 50%, rgba(5,4,9,.5) 100%)}
.hero h1{letter-spacing:-.015em}
@keyframes lux-rise{from{opacity:0; transform:translateY(42px)} to{opacity:1; transform:none}}
.hero-inner > *{animation:lux-rise 1.15s var(--ease) both}
.hero-inner .ended-badge{animation-delay:.08s}
.hero-inner .edition{animation-delay:.16s}
.hero-inner h1{animation-delay:.28s}
.hero-inner .facts{animation-delay:.5s}
.hero-inner .hero-cta{animation-delay:.64s}

/* ---- 動画ファーストのヒーロー（2026-10-14）：hero-gate の間は動画だけ。hero-revealed で文字がせり上がる ---- */
.hero-media video.hero-vid, .hero-media::after{transition:opacity 1.2s ease}
.sticky-cta{transition:transform .7s var(--ease)}
html.hero-gate .hero-inner > *{animation-name:none; opacity:0; transform:translateY(42px);
  transition:opacity .5s ease, transform .5s ease; transition-delay:0s}
html.hero-gate.hero-revealed .hero-inner > *{opacity:1; transform:none; transition-duration:1.15s; transition-timing-function:var(--ease)}
html.hero-gate.hero-revealed .hero-inner .ended-badge{transition-delay:.08s}
html.hero-gate.hero-revealed .hero-inner .edition{transition-delay:.16s}
html.hero-gate.hero-revealed .hero-inner h1{transition-delay:.28s}
html.hero-gate.hero-revealed .hero-inner .facts{transition-delay:.5s}
html.hero-gate.hero-revealed .hero-inner .hero-cta{transition-delay:.64s}
html.hero-gate:not(.hero-revealed) .hero-media video.hero-vid{opacity:.96}
html.hero-gate:not(.hero-revealed) .hero-media::after{opacity:.3}
html.hero-gate:not(.hero-revealed) .sticky-cta{transform:translateY(110%)}
html.hero-instant .hero-inner > *, html.hero-instant .sticky-cta{transition:none !important}
.scroll-cue{display:none}
html.hero-gate:not(.hero-revealed) .scroll-cue{display:flex; flex-direction:column; align-items:center; gap:10px;
  position:absolute; left:50%; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:3;
  background:none; border:0; cursor:pointer; color:var(--blush); font-family:var(--util); font-size:10px; letter-spacing:.34em;
  padding:8px 12px; opacity:.85; animation:lux-rise 1.2s var(--ease) .6s both}
.scroll-cue span{display:block; width:1px; height:42px; background:linear-gradient(to bottom, var(--champagne), transparent);
  transform-origin:top; animation:cue-drop 2.2s ease-in-out infinite}
@keyframes cue-drop{0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0}}

/* ---- ファクト（Date/Time/Venue）：縦罫で区切る編集的レイアウト ---- */
.facts{gap:0}
.fact{padding:6px clamp(16px,3.6vw,38px) 6px 0; position:relative}
.fact + .fact{padding-left:clamp(16px,3.6vw,38px)}
.fact + .fact::before{content:""; position:absolute; left:0; top:14px; bottom:8px; width:1px; background:var(--line)}
.fact dt{letter-spacing:.3em}

/* ---- 段階リビール：セクション直下の子を順にせり上げる ---- */
.reveal{opacity:1; transform:none; transition:none}
.reveal > *{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in > *{opacity:1; transform:none}
.reveal.in > *:nth-child(2){transition-delay:.09s}
.reveal.in > *:nth-child(3){transition-delay:.18s}
.reveal.in > *:nth-child(4){transition-delay:.26s}
.reveal.in > *:nth-child(n+5){transition-delay:.32s}
/* グリッド容器は静止させ、中の要素をカスケード（遅延はJSでインライン付与） */
.reveal > .lineup, .reveal > .tables, .reveal > .pastgrid, .reveal > .gallery, .reveal > .wall{
  opacity:1; transform:none; transition:none}
.reveal .lineup .artist, .reveal .tables .table-card, .reveal .pastgrid > *, .reveal .gallery a, .reveal .wall-card{
  opacity:0; transform:translateY(30px); transition:opacity .95s var(--ease), transform .95s var(--ease)}
.reveal.in .lineup .artist, .reveal.in .tables .table-card, .reveal.in .pastgrid > *,
.reveal.in .gallery a, .reveal.in .wall-card{opacity:1; transform:none}

/* ---- ラインナップ（カード）：金縁とスクリムで肖像的に ---- */
.artist-photo-wrap{position:relative}
.artist-photo-wrap::before{content:""; position:absolute; inset:auto 0 0 0; height:42%; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, rgba(9,8,13,.6)); opacity:0; transition:opacity .5s ease}
.artist-photo-wrap::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(216,178,106,0); transition:box-shadow .5s ease}
.lineup-cards .artist:hover .artist-photo-wrap::before{opacity:1}
.lineup-cards .artist:hover .artist-photo-wrap::after{box-shadow:inset 0 0 0 1px rgba(216,178,106,.6)}
.lineup-cards .artist-name{letter-spacing:.015em}
/* ラインナップ（リスト）：ホバーで金のティックが伸びる */
.lineup:not(.lineup-cards) .artist{position:relative}
.lineup:not(.lineup-cards) .artist::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg,var(--champagne),transparent); transition:width .5s var(--ease)}
.lineup:not(.lineup-cards) .artist:hover::after{width:64px}

/* ---- 料金ティア：浮遊・価格はBodoniイタリックで格上げ ---- */
.table-card{border-radius:2px; transition:transform .45s var(--ease), border-color .45s ease}
.table-card:hover{transform:translateY(-4px)}
.table-card[data-rank="1"]{background:linear-gradient(150deg, rgba(216,178,106,.13), rgba(11,10,16,.62))}
.table-price{font-family:var(--display); font-style:italic; font-size:clamp(18px,2.6vw,23px); letter-spacing:.01em}

/* ---- VIP カード：二重の額縁・上から差す金の光・ASK を金の斜体で（2026-10-14） ---- */
.tables-vip{grid-template-columns:1fr !important}
.table-card-vip{display:block; color:inherit; padding:clamp(30px,5vw,46px) clamp(26px,5vw,48px);
  border:1px solid rgba(216,178,106,.7); border-radius:2px;
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(216,178,106,.22), transparent 60%),
    linear-gradient(160deg, #1a1426 0%, #0d0b12 70%);
  box-shadow:inset 0 0 0 7px var(--ink), inset 0 0 0 8px rgba(216,178,106,.38), 0 24px 60px -30px rgba(216,178,106,.45);
  --sheen:.34}
.table-card-vip .table-name{font-size:clamp(28px,5.4vw,44px); letter-spacing:.08em}
.table-card-vip .table-price{font-family:var(--display); font-style:italic; font-size:clamp(30px,5.6vw,48px); letter-spacing:.12em;
  background:linear-gradient(100deg,#f3dfa8,var(--champagne) 45%,#a8823e); -webkit-background-clip:text; background-clip:text; color:transparent}
.table-card-vip .table-meta{font-size:14px; color:rgba(233,221,201,.78)}
.table-card-vip .table-seats{border-color:rgba(216,178,106,.45); color:var(--champagne)}
.table-ask{position:relative; display:block; margin-top:22px; padding-top:18px; border-top:1px solid rgba(216,178,106,.25);
  font-family:var(--util); font-size:11px; letter-spacing:.26em; color:var(--champagne)}
.table-card-vip:hover{border-color:var(--champagne)}
.table-card-vip:hover .table-ask span{display:inline-block; transform:translateX(4px); transition:transform .3s}
.table-card-vip:focus-visible{outline:2px solid var(--champagne); outline-offset:4px}

/* ---- アーカイブ壁／過去カード：角を締め、光学サイズ適用 ---- */
.wall-card, .pastcard, .pastcard-reel, .prevevent{border-radius:2px}
.wall-card:hover img{opacity:1}

/* ---- 常設CTAバー：上辺に金のヘアライン ---- */
.sticky-cta{background:rgba(8,7,12,.82)}
.sticky-cta::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,178,106,.5),transparent)}
.scta-title{letter-spacing:.04em}
.scta-fill{background:var(--gold-grad)}

/* ---- モーション抑制の尊重（既存ルールに追補） ---- */
@media (prefers-reduced-motion:reduce){
  .reveal > *, .reveal .lineup .artist, .reveal .tables .table-card, .reveal .pastgrid > *,
  .reveal .gallery a, .reveal .wall-card, .hero-inner > *{opacity:1 !important; transform:none !important; transition:none !important}
  .scroll-progress{display:none}
  body::before{display:none}
}

/* ── 動画音声コントロール（細線SVGアイコン・映像上でも視認できる微シャドウのみ） ── */
.vid-sound{position:absolute; right:12px; top:12px; z-index:20; width:42px; height:42px; padding:0; border-radius:999px;
  background:rgba(11,10,16,.5); border:1px solid rgba(216,178,106,.45); color:var(--champagne); cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:.9;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); transition:opacity .2s ease, transform .2s ease, background .2s ease}
.vid-sound:hover{opacity:1; transform:scale(1.08); background:rgba(11,10,16,.72)}
.vid-sound:focus-visible{outline:1px solid var(--champagne); outline-offset:3px}
.vid-sound svg{display:block}
.vid-sound-hero{top:calc(72px + env(safe-area-inset-top, 0px))} /* ヒーローは固定ヘッダーの下に出す（隠れ防止） */
.reel video, .wall-card video{cursor:pointer}
video[data-audio="on"]{outline:1px solid rgba(216,178,106,.55); outline-offset:-1px}


/* ---- かくつき対策（2026-10-14）：動画の上で毎フレーム再計算される効果を外す。見た目はほぼ同じ ---- */
/* すりガラス（backdrop-filter）→ 濃い半透明の背景 */
header{-webkit-backdrop-filter:none; backdrop-filter:none}
header.scrolled{background:rgba(8,7,12,.9); -webkit-backdrop-filter:none; backdrop-filter:none}
.sticky-cta{background:rgba(8,7,12,.94); -webkit-backdrop-filter:none; backdrop-filter:none}
.vid-sound{background:rgba(11,10,16,.72); -webkit-backdrop-filter:none; backdrop-filter:none}
/* 粒子：動画との色合成（mix-blend-mode）をやめ、薄く重ねるだけにする */
body::before{mix-blend-mode:normal; opacity:.035}
/* 動画のあるヒーローでは光の帯を出さない（ぼかした大きな要素の常時アニメーション） */
.hero:has(video.hero-vid) .beam{display:none}
.hero-media.has-video ~ .beam{display:none}   /* :has() 非対応の古い Safari 向け */
.reel video, .wall-card video{background:linear-gradient(150deg,var(--smoke),var(--ink))}