/* ═══ チケットファースト ・ BE:FIRST 5th Anniversary DOME TOUR 2027 ═══
   Page d'accueil seulement : tokens, en-tête, héros, sections, titres, galerie, pied, boutons de la page,
   bandeau #mq, barre mobile, couche #fx. Tout ce que génère app.js (lignes de 公演, modale, plans,
   panier, toast, cartes de 席種 et de dôme, FAQ, puces de ville) est stylé par styles-app.css
   (voir _contract/dom-hooks.md).
   DA « 5th Anniversary » : nuit de dôme avant le concert. Noir profond, métal brossé argent, gris chaud
   officiel (--stone) pour respirer, une touche de cuivre. Oswald 500 en capitales espacées pour les
   titres latins, dates et chiffres (comme le site de la tournée), Geist pour les petits libellés,
   Noto Sans JP pour le japonais (titres 700/900 serrés, texte 400/500). Pas de serif.
   Règle : aucune couleur en dur hors de :root. Les teintes dérivées sont des color-mix() des variables
   du contrat (§3). Les plans SVG d'app.js lisent ces variables : hex à 6 chiffres. */

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

:root{
  color-scheme:dark;
  /* contrat §3 (hex à 6 chiffres : les plans SVG d'app.js les lisent) */
  --black:#000000;
  --carbon:#0B0B0B;
  --graphite:#161616;
  --iron:#262626;
  --steel:#454545;
  --ash:#8D8D8D;
  --silver:#9F9F9F;
  --chrome:#D1D1D1;
  --stone:#E1DFDD;
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --ink2:#5A5A5A;
  --mute:#6E6E6E;
  --copper:#B87E5D;
  --champagne:#D9C2A7;
  --line:#FFFFFF1F;
  /* dégradé métal du lockup (contrat §3) : logo, chiffres géants, filets précieux */
  --metal:linear-gradient(135deg,var(--chrome),var(--silver) 35%,#959595 65%,var(--chrome));
  /* dérivés */
  --line2:color-mix(in srgb,var(--paper) 30%,transparent);
  --lineL:color-mix(in srgb,var(--ink) 14%,transparent);
  --lineL2:color-mix(in srgb,var(--ink) 52%,transparent);
  --fg2:color-mix(in srgb,var(--paper) 74%,transparent);
  --fg3:color-mix(in srgb,var(--paper) 52%,transparent);
  --scrim:color-mix(in srgb,var(--black) 74%,transparent);
  --glass:color-mix(in srgb,var(--black) 86%,transparent);
  /* typo */
  --display:"Oswald","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --ui:"Geist","Noto Sans JP",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  /* mise en page */
  --wrap:1280px;
  --gut:40px;
  --hdr:76px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--black)}
body{
  margin:0;background:var(--black);color:var(--paper);font-family:var(--sans);
  font-size:15px;line-height:1.95;letter-spacing:.04em;font-feature-settings:"palt" 1;font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip;
}
img,svg,video{max-width:100%}
img{height:auto}
img.nf{visibility:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.5}
h1,h2,h3,h4,.hero__catch,.final h2{word-break:auto-phrase}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;letter-spacing:inherit}
select{font:inherit;color:inherit}
figure{margin:0}
[hidden]{display:none!important}
::selection{background:var(--chrome);color:var(--ink)}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* couche grain + faisceaux (fx.js) : au-dessus des sections, sous l'en-tête, la barre mobile et la modale */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:35;pointer-events:none;display:block}
main{position:relative;z-index:2;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.br-sp{display:none}

/* ─────────── Titres : capitales Oswald en métal, libellé japonais serré ─────────── */
.ttl{display:flex;flex-direction:column;align-items:flex-start;gap:20px;font-weight:400}
.ttl__en{font-family:var(--display);font-weight:500;font-size:clamp(52px,6.4vw,96px);line-height:.92;letter-spacing:.012em;text-transform:uppercase;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.ttl__ja{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-weight:700;font-size:13.5px;line-height:1.4;letter-spacing:.28em;color:var(--chrome)}
.ttl__ja::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}

.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:24px 64px;align-items:end;
  margin-bottom:64px;padding-bottom:34px;border-bottom:1px solid var(--line2)}
.shead__lead{color:var(--ash);font-size:14.5px;line-height:2.05}

/* ─────────── Boutons : coins nets, capitales espacées, inversion au survol ─────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:52px;padding:12px 30px;border:1px solid var(--paper);border-radius:1px;
  background:transparent;color:var(--paper);font-family:var(--display);font-weight:500;font-size:14px;
  letter-spacing:.16em;line-height:1.4;text-align:center;text-transform:uppercase;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.btn svg{flex:0 0 auto;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:disabled,.btn:disabled:hover{opacity:.35;cursor:not-allowed}
/* principal sur sombre : blanc plein, texte encre (app.js peut aussi poser btn--gold) */
.btn--primary,.btn--gold,.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--primary:hover,.btn--gold:hover,.btn--light:hover{background:transparent;color:var(--paper)}
.btn--primary:disabled:hover,.btn--gold:disabled:hover{background:var(--paper);color:var(--ink)}
.btn--ghost,.btn--line{background:transparent;color:var(--paper);border-color:var(--line2)}
.btn--ghost:hover,.btn--line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* sur clair (--stone) : encre plein, texte blanc */
.sec--stone .btn--primary,.sec--stone .btn--light,.btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sec--stone .btn--primary:hover,.sec--stone .btn--light:hover,.btn--ink:hover{background:transparent;color:var(--ink)}
.sec--stone .btn--ghost,.sec--stone .btn--line{color:var(--ink);border-color:var(--lineL2)}
.sec--stone .btn--ghost:hover,.sec--stone .btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--lg{min-height:58px;padding:14px 36px;font-size:14.5px}
.btn--full{width:100%;margin-top:14px}

.pill{display:inline-block;padding:0 12px;border:1px solid currentColor;font-size:11px;font-weight:500;line-height:1.9;letter-spacing:.08em;white-space:nowrap}
.pill--gray{border-color:var(--mute);color:var(--mute)}

/* ─────────── En-tête ─────────── */
.hdr{position:sticky;top:0;z-index:40;height:var(--hdr);background:var(--glass);border-bottom:1px solid var(--line);color:var(--paper);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.hdr__in{max-width:1680px;height:100%;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:40px}
.brand{display:block;flex:0 0 auto;line-height:0;transition:opacity .5s var(--ease),visibility .5s}
.brand img{display:block;height:46px;width:auto;max-width:none}
.nav{margin-left:auto;display:flex;gap:38px;font-size:12.5px;font-weight:500;letter-spacing:.2em;color:var(--chrome)}
.nav a{position:relative;padding:6px 0;white-space:nowrap;transition:color .35s var(--ease)}
.nav a:hover{color:var(--paper)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .45s var(--ease)}
.nav a:hover::after{right:0}
.cartbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;height:42px;padding:0 8px 0 18px;
  border:1px solid var(--line2);border-radius:1px;font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;line-height:1;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);-webkit-tap-highlight-color:transparent}
.cartbtn em{font-style:normal;min-width:26px;height:26px;padding:0 6px;display:grid;place-items:center;letter-spacing:0;
  background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:500;font-size:14px;line-height:1;border-radius:1px;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.cartbtn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cartbtn:hover em{background:var(--ink);color:var(--paper)}
/* panier non vide (classe posée par app.js) : bouton plein */
.cartbtn.has-items{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cartbtn.has-items em{background:var(--ink);color:var(--paper)}
.cartbtn.has-items:hover{background:transparent;color:var(--paper)}
.cartbtn.has-items:hover em{background:var(--paper);color:var(--ink)}
/* au-dessus du héros : transparent, logo masqué (le grand lockup est dans le héros) */
body.on-hero .hdr{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.on-hero .brand{opacity:0;visibility:hidden}
/* sur le plafond lumineux du héros : une ombre douce garde le menu lisible */
body.on-hero .nav a,body.on-hero .cartbtn__t{text-shadow:0 0 14px var(--black),0 0 4px color-mix(in srgb,var(--black) 70%,transparent)}
body.on-hero .nav{color:var(--paper)}
body.on-hero .cartbtn:not(:hover):not(.has-items){background:color-mix(in srgb,var(--black) 45%,transparent);border-color:var(--fg3)}

/* ─────────── Héros : plein écran, les 6 sous les néons, en noir et blanc profond ───────────
   Le haut de la photo (le plafond lumineux) et les visages restent libres : tout le texte vit en bas,
   sur un voile noir qui monte du sol. À gauche le lockup et les 3 dômes, à droite l'accroche et les
   boutons, puis la ligne des dates sur toute la largeur, comme une affiche de tournée.
   Écrans étroits ou portrait : visuel 4:5 en haut, lockup posé sur le sol, texte dessous. */
.hero{--lift:9%;position:relative;z-index:2;isolation:isolate;overflow:hidden;margin-top:calc(-1 * var(--hdr));
  min-height:max(680px,100vh);min-height:max(680px,100svh);display:flex;background:var(--black);color:var(--paper)}
/* la photo est remontée de --lift : les visages restent dans la moitié haute, le bas (sous le voile noir) reste libre pour le texte */
.hero__ph{position:absolute;left:0;right:0;top:calc(-1 * var(--lift));bottom:var(--lift);z-index:-2;display:block;overflow:hidden;background:var(--black)}
.hero__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 34%;
  transform-origin:50% 34%;animation:kb 40s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1.01)}to{transform:scale(1.07)}}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--black) 80%,transparent) 0,color-mix(in srgb,var(--black) 38%,transparent) 11%,transparent 22%),
    radial-gradient(44% 50% at 12% 80%,color-mix(in srgb,var(--black) 70%,transparent),transparent),
    radial-gradient(42% 50% at 90% 78%,color-mix(in srgb,var(--black) 66%,transparent),transparent),
    linear-gradient(0deg,var(--black) 0,color-mix(in srgb,var(--black) 92%,transparent) 15%,color-mix(in srgb,var(--black) 74%,transparent) 30%,color-mix(in srgb,var(--black) 36%,transparent) 46%,transparent 62%),
    radial-gradient(120% 90% at 50% 38%,transparent 55%,color-mix(in srgb,var(--black) 60%,transparent) 100%)}
.hero__in{position:relative;flex:1;width:100%;max-width:1680px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);grid-template-rows:minmax(28px,1fr) auto auto;
  grid-template-areas:". ." "brand act" "dates dates";column-gap:64px;
  padding-top:calc(var(--hdr) + 4px);padding-bottom:clamp(28px,4.4vh,48px)}

/* lockup + les 3 dômes */
.hero__brand{grid-area:brand;align-self:end;display:flex;flex-direction:column;align-items:flex-start;
  width:clamp(280px,min(27vw,calc((36vh - var(--hdr)) * 1.865)),440px);
  width:clamp(280px,min(27vw,calc((36svh - var(--hdr)) * 1.865)),440px)}
.hero__logo{margin:0;line-height:0;width:100%}
.hero__logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 24px color-mix(in srgb,var(--black) 70%,transparent))}
.hero__venues{margin-top:22px;font-family:var(--sans);font-weight:500;font-size:12.5px;line-height:1.6;letter-spacing:.14em;color:var(--chrome);white-space:nowrap}
.hero__venues i{font-style:normal;margin:0 .1em;color:var(--ash)}

/* accroche, boutons, état des ventes */
.hero__act{grid-area:act;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:520px}
.hero__catch{font-family:var(--sans);font-weight:700;font-size:clamp(22px,1.95vw,30px);line-height:1.5;letter-spacing:.06em;white-space:nowrap}
.hero__sub{margin-top:-8px;font-size:13.5px;letter-spacing:.12em;color:var(--fg2)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.live{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;font-size:12.5px;letter-spacing:.12em;color:var(--fg2)}
.live i{flex:0 0 auto;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--chrome);animation:live 2.6s ease-out infinite}
.live b{font-family:var(--display);font-weight:500;font-size:22px;line-height:1;letter-spacing:.02em;color:var(--paper)}
.live__sep{color:var(--fg3)}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--chrome) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px color-mix(in srgb,var(--chrome) 0%,transparent)}}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:11.5px;letter-spacing:.14em;color:var(--fg2)}
.trust li{white-space:nowrap}
.trust li+li::before{content:"";display:inline-block;width:1px;height:10px;margin:0 12px;vertical-align:-1px;background:var(--line2)}

/* dates : une colonne par dôme, sur toute la largeur */
.hdates{grid-area:dates;margin-top:clamp(28px,4.4vh,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line2)}
.hd{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c d" "v d";align-items:center;gap:0 18px;padding:16px 28px 4px}
.hd:first-child{padding-left:0}
.hd:last-child{padding-right:0}
.hd+.hd{border-left:1px solid var(--line)}
.hd__c{grid-area:c;display:flex;align-items:baseline;gap:10px;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.2em;line-height:1.4;color:var(--fg2)}
.hd__c span{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper)}
.hd__v{grid-area:v;min-width:0;font-size:12px;letter-spacing:.08em;line-height:1.6;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd__d{grid-area:d;display:flex;align-items:baseline;justify-content:flex-end}
.hd__d button{position:relative;display:inline-flex;align-items:baseline;gap:4px;padding:2px 0;font-family:var(--display);font-weight:500;
  font-size:30px;line-height:1.1;letter-spacing:.02em;white-space:nowrap;transition:color .35s var(--ease)}
.hd__d button+button{margin-left:20px}
.hd__d button+button::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;margin-top:-1px;border-radius:50%;background:var(--fg3)}
.hd__d button i{font-style:normal;font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:0;color:var(--ash)}
.hd__d button::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;background:currentColor;transition:right .45s var(--ease)}
.hd__d button:hover::after{right:0}

/* ─────────── Bande défilante (texte écrit par app.js dans #mq) ─────────── */
.mq{position:relative;z-index:2;overflow:hidden;padding:17px 0 15px;background:var(--carbon);color:var(--chrome);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mq__track{display:block;width:max-content;white-space:nowrap;font-family:var(--display);font-weight:500;font-size:17px;line-height:1.3;letter-spacing:.22em;text-transform:uppercase;
  animation:mq 140s linear infinite}
@keyframes mq{from{transform:none}to{transform:translateX(-50%)}}

/* ─────────── Sections ─────────── */
.sec{position:relative;z-index:2;isolation:isolate;padding:150px 0;scroll-margin-top:var(--hdr)}
.sec--black{background:var(--black);color:var(--paper)}
.sec--carbon{background:var(--carbon);color:var(--paper)}
.sec--stone{background:var(--stone);color:var(--ink)}
.sec--stone ::selection{background:var(--ink);color:var(--paper)}
.sec--stone .ttl__en{background:none;color:var(--ink)}
.sec--stone .ttl__ja{color:var(--ink)}
.sec--stone .shead{border-bottom-color:var(--ink)}
.sec--stone .shead__lead{color:var(--ink2)}
/* textures en fond (métal, dôme) : très atténuées, voile par-dessus */
.sec__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sec__bg+.wrap{position:relative}

/* ─────────── お申し込みの流れ (stone) ─────────── */
.flow{overflow:hidden}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stp{position:relative;padding:4px 32px 8px}
.stp:first-child{padding-left:0}
.stp:last-child{padding-right:0}
.stp+.stp{border-left:1px solid var(--lineL)}
.stp__n{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:500;font-size:64px;line-height:.9;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1px var(--ink)}
.stp__n::after{content:"";flex:1;height:1px;margin-left:6px;background:var(--lineL);transform:translateY(-16px)}
.stp h3{margin-top:26px;font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.55;letter-spacing:.06em}
.stp p{margin-top:12px;color:var(--ink2);font-size:14px;line-height:2}
.anyp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 36px;align-items:baseline;margin-top:64px;padding:24px 0;border-top:1px solid var(--lineL)}
.anyp__k{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}
.anyp__t{font-size:13.5px;line-height:2;color:var(--ink2);max-width:820px}
.facts3{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--ink)}
.facts3 li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 14px 24px;text-align:center}
.facts3 li+li{border-left:1px solid var(--lineL)}
.facts3 b{display:flex;align-items:baseline;gap:4px;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.06em;white-space:nowrap;line-height:48px}
.facts3 li:first-child b{font-size:24px;letter-spacing:.14em}
.facts3 b span{font-family:var(--display);font-weight:500;font-size:48px;line-height:1;letter-spacing:0}
.facts3 li>span{font-size:12.5px;color:var(--ink2);letter-spacing:.08em;line-height:1.7}

/* ─────────── 公演一覧 (carbone, métal brossé en fond ; lignes, puces, badges : styles-app.css) ─────────── */
.shows{overflow:hidden}
.shows__bg{opacity:.26;object-position:50% 50%;
  -webkit-mask-image:linear-gradient(180deg,var(--black) 0,transparent 70%);mask-image:linear-gradient(180deg,var(--black) 0,transparent 70%)}
.shows::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--carbon) 30%,transparent) 0,color-mix(in srgb,var(--carbon) 80%,transparent) 40%,var(--carbon) 80%)}
.shows__in{min-width:0}
.shows__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0 24px}
.shows__bar .cpick{flex:1 1 auto;min-width:0}
.fcount{margin:0 0 26px auto;font-size:12px;letter-spacing:.12em;color:var(--ash);text-align:right;white-space:nowrap}
.fcount b{margin-right:6px;font-family:var(--display);font-weight:500;font-size:24px;line-height:1;color:var(--paper);vertical-align:-2px}
.empty{padding:56px 0;text-align:center;color:var(--ash);font-size:14px}
.more{display:flex;justify-content:center;margin-top:36px}

/* ─────────── 座席について (noir, intérieur de dôme en fond) ─────────── */
.seat{overflow:hidden}
.seat__bg{opacity:.6;object-position:50% 30%}
.seat::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--black) 0,color-mix(in srgb,var(--black) 40%,transparent) 22%,color-mix(in srgb,var(--black) 64%,transparent) 48%,color-mix(in srgb,var(--black) 90%,transparent) 72%,var(--black) 100%)}
.seat__in{position:relative}
.seat__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px 72px;align-items:end;margin-bottom:72px}
.seat__top .shead{margin-bottom:0;grid-template-columns:minmax(0,1fr)}
.tkt{padding:28px 30px 24px;border:1px solid var(--line2);border-radius:1px;background:color-mix(in srgb,var(--black) 52%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tkt__k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.16em}
.tkt__k small{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--ash)}
.tkt__list{list-style:none;margin:14px 0 0;padding:0}
.tkt__list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.tkt__n{min-width:0;font-size:13.5px;font-weight:500;letter-spacing:.06em;line-height:1.5}
.tkt__n small{display:block;font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--ash)}
.tkt__list b{flex:0 0 auto;display:flex;align-items:baseline;font-weight:500;font-size:13px;letter-spacing:.06em;white-space:nowrap}
.tkt__list b span{margin-right:3px;font-family:var(--display);font-weight:500;font-size:30px;line-height:1;letter-spacing:.01em}
.tkt__list li:first-child b span{font-size:34px}
.tkt__list li.is-out .tkt__n,.tkt__list li.is-out b{color:var(--mute)}
.tkt__list li.is-out b span{font-size:24px}
.tkt__so{align-self:center;margin-right:12px;padding:0 9px;border:1px solid var(--mute);font-style:normal;font-size:11px;font-weight:500;line-height:1.8;letter-spacing:.1em;color:var(--mute)}
.tkt__row{display:grid;grid-template-columns:1fr 1fr;margin-top:6px;border-top:1px solid var(--line2)}
.tkt__row span{padding-top:14px;font-size:12.5px;letter-spacing:.1em;color:var(--ash)}
.tkt__row span+span{padding-left:18px;border-left:1px solid var(--line)}
.tkt__row b{margin:0 3px;font-family:var(--display);font-weight:500;font-size:26px;line-height:1;color:var(--paper)}

.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
.points li{padding:34px 40px 10px}
.points li:first-child{padding-left:0}
.points li:last-child{padding-right:0}
.points li+li{border-left:1px solid var(--line)}
.points__n{display:block;font-family:var(--display);font-weight:500;font-size:15px;line-height:1;letter-spacing:.3em;color:var(--copper)}
.points h3{margin-top:18px;font-family:var(--sans);font-weight:700;font-size:18.5px;letter-spacing:.06em}
.points p{margin-top:12px;font-size:13.5px;line-height:2.05;color:var(--ash)}

/* panneau des 席種 (les cartes de #zoneGrid : styles-app.css) */
.seat__zones{margin-top:80px;padding:44px 48px 48px;border:1px solid var(--line);border-radius:1px;
  background:color-mix(in srgb,var(--carbon) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.seat__zt{display:flex;align-items:baseline;gap:18px;margin-bottom:28px;font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:.24em;color:var(--chrome)}
.seat__zt span{font-family:var(--display);font-weight:500;font-size:clamp(32px,3.2vw,44px);line-height:1;letter-spacing:.04em;text-transform:uppercase;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ─────────── Galerie éditoriale (aucune légende) ─────────── */
.gal-sec{padding-bottom:150px;overflow:hidden}
.galhead{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px 64px;align-items:end;margin-bottom:64px}
/* le grand « 5 » du lockup, en métal, en filigrane */
.galhead__five{position:absolute;z-index:-1;right:-4%;top:50%;transform:translateY(-54%);pointer-events:none;
  font-family:var(--display);font-weight:600;font-size:clamp(340px,44vw,660px);line-height:.8;letter-spacing:0;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.12}
.galhead__en{font-family:var(--display);font-weight:500;font-size:clamp(52px,6.3vw,92px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.galhead__tx h2{font-family:var(--sans);font-weight:900;font-size:clamp(24px,2.4vw,34px);line-height:1.55;letter-spacing:.06em}
.galhead__tx p{margin-top:18px;color:var(--ash);font-size:14.5px;line-height:2.05}
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;
  grid-template-rows:clamp(240px,25vw,362px) clamp(240px,25vw,362px) clamp(300px,32vw,472px) clamp(300px,32vw,472px);
  grid-template-areas:
    "a a a a a a b b b c c c"
    "a a a a a a n n n d d d"
    "e e e e t t t t t t t t"
    "f f f f g g g g o o o o"}
.g{position:relative;overflow:hidden;background:var(--graphite);min-height:0;border-radius:1px}
.g picture{display:block;width:100%;height:100%}
.g img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.g:hover img{transform:scale(1.03)}
.g--corridor{grid-area:a}
.g--corridor img{object-position:50% 40%}
.g--leather{grid-area:b}
.g--leather img{object-position:50% 30%}
.g--fisheye{grid-area:c}
.g--fisheye img{object-position:50% 40%}
.g--loft{grid-area:d}
.g--loft img{object-position:46% 60%}
.g--hall{grid-area:e}
.g--hall img{object-position:50% 60%}
.g--street{grid-area:f}
.g--street img{object-position:50% 50%}
.g--stairs{grid-area:g}
.g--stairs img{object-position:50% 50%}
.g--table{grid-area:t}
.g--table img{object-position:50% 40%}
/* cartes de date : ouverture sur le gris chaud officiel, ファイナル sur l'aplat cuivre (seule surface chaude) */
.g--note{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:28px 20px;
  background:var(--stone);color:var(--ink);text-align:center}
.g--open{grid-area:n}
.g--final{grid-area:o;background:var(--copper)}
.gnote__k{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase}
.gnote__d{font-family:var(--display);font-weight:500;font-size:clamp(70px,7vw,104px);line-height:1;letter-spacing:.01em}
.gnote__v{margin-top:4px;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.2em}
.g--note .btn{margin-top:20px;min-height:44px;padding:8px 22px;font-size:12.5px}

/* ─────────── 会場 (carbone, le dôme du final en bandeau ; cartes : styles-app.css) ─────────── */
.venues{overflow:hidden}
.venues__bg{bottom:auto;height:clamp(420px,46vw,680px);opacity:.5;object-position:50% 40%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,var(--black) 16%,var(--black) 44%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent 0,var(--black) 16%,var(--black) 44%,transparent 96%)}
.venues::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--carbon) 30%,transparent) 0,color-mix(in srgb,var(--carbon) 40%,transparent) 260px,color-mix(in srgb,var(--carbon) 86%,transparent) 560px,var(--carbon) 760px)}

/* ─────────── FAQ (stone ; les <details class="faq"> : styles-app.css) ─────────── */
.faqwrap{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:88px;align-items:start}
.faqhead{position:sticky;top:calc(var(--hdr) + 40px);display:block;margin:0;padding:0;border:0}
.faqhead .shead__lead{margin-top:28px}

/* ─────────── Dernier appel : le dôme en vidéo ─────────── */
.final{position:relative;z-index:2;isolation:isolate;overflow:hidden;padding:190px 0 180px;background:var(--black);color:var(--paper);text-align:center}
.final__media{position:absolute;inset:0;z-index:-2;background:var(--black)}
.final__bg,.final__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.final__vid{opacity:0;transition:opacity 1.6s var(--ease)}
.final__vid.on{opacity:1}
.final::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--black) 0,color-mix(in srgb,var(--black) 30%,transparent) 26%,color-mix(in srgb,var(--black) 40%,transparent) 64%,var(--black) 100%),
    radial-gradient(ellipse 36% 22% at 50% 66%,color-mix(in srgb,var(--black) 78%,transparent),transparent),
    radial-gradient(ellipse 46% 42% at 50% 50%,color-mix(in srgb,var(--black) 55%,transparent),transparent)}
.final__in{display:flex;flex-direction:column;align-items:center}
.final__logo{display:block;width:min(500px,74vw);height:auto;filter:drop-shadow(0 2px 24px color-mix(in srgb,var(--black) 70%,transparent))}
.final__en{margin-top:26px;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;color:var(--chrome)}
.final__en i{font-style:normal;color:var(--ash)}
.final h2{margin-top:44px;font-family:var(--sans);font-weight:900;font-size:clamp(28px,3.4vw,46px);line-height:1.5;letter-spacing:.1em;text-indent:.1em}
.final__sub{margin-top:14px;font-size:13.5px;letter-spacing:.14em;color:var(--chrome)}
.final h2,.final__sub,.final__en{text-shadow:0 0 18px var(--black),0 0 6px color-mix(in srgb,var(--black) 80%,transparent)}
.final .btn{margin-top:42px}

/* ─────────── Pied de page ─────────── */
.ft{position:relative;z-index:2;padding:88px 0 34px;background:var(--black);border-top:1px solid var(--line);text-align:center;color:var(--paper)}
.ft__logo{display:inline-block;line-height:0}
.ft__logo img{display:block;height:78px;width:auto;max-width:100%}
.ftlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px;margin-top:46px;font-size:12.5px;letter-spacing:.12em;color:var(--ash)}
.ftlinks a{position:relative;padding:2px 0;transition:color .35s var(--ease)}
.ftlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .45s var(--ease)}
.ftlinks a:hover{color:var(--paper)}
.ftlinks a:hover::after{right:0}
.ftcopy{margin-top:42px;padding-top:24px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.18em;color:var(--ash)}

/* ─────────── Barre d'achat mobile ─────────── */
.mbar{position:fixed;z-index:45;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 10px 10px 18px;background:var(--glass);color:var(--paper);border:1px solid var(--line2);border-radius:1px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translateY(160%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s}
.mbar.on{transform:none;visibility:visible;transition:transform .5s var(--ease)}
.mbar__tx{min-width:0;line-height:1.4}
.mbar__tx b{display:block;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.mbar__tx span{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--fg2);white-space:nowrap}
.mbar .btn{flex:0 0 auto;min-height:44px;padding:8px 20px;font-size:13px}

/* ─────────── Apparition : fondu + glissement vers le haut, comme un rideau qui se lève ─────────── */
.rise{animation:rise 1.6s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.js .rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.2s var(--ease),transform 1.5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
/* photos : le rideau se lève vraiment. Un cache noir posé sur la figure se replie vers le haut ;
   l'image elle-même n'est jamais découpée (un clip-path à 100 % empêche l'IntersectionObserver et le
   chargement différé du navigateur de la voir) */
.js figure.g.rv{opacity:1;transform:none}
.js figure.g.rv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--black);
  transform-origin:50% 0;transition:transform 1.5s var(--ease)}
.js figure.g.rv img{transform:scale(1.08);transition:transform 2.2s var(--ease)}
.js figure.g.rv.in::after{transform:scaleY(0)}
.js figure.g.rv.in img{transform:none}
.js figure.g.rv.in:hover img{transform:scale(1.03)}
.steps .rv:nth-child(2),.points .rv:nth-child(2){transition-delay:.1s}
.steps .rv:nth-child(3),.points .rv:nth-child(3){transition-delay:.2s}
.steps .rv:nth-child(4){transition-delay:.3s}
.gal .rv:nth-child(even){transition-delay:.12s}

/* ═══════════ Responsive ═══════════ */
@media (max-width:1240px){
  .hd{padding-inline:20px}
  .hd__d button{font-size:26px}
  .hd__d button+button{margin-left:18px}
}
@media (max-width:1180px){
  .nav{gap:28px}
  .hero__in{column-gap:40px}
  .stp{padding:4px 22px 8px}
  .stp__n{font-size:54px}
}
@media (max-width:1040px){
  .nav{display:none}
  .cartbtn{margin-left:auto}
  .seat__top{grid-template-columns:minmax(0,1fr);gap:40px}
  .tkt{max-width:480px}
  .faqwrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .faqhead{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .stp:nth-child(odd){padding-left:0;border-left:0}
  .stp:nth-child(even){padding-right:0}
  .stp:nth-child(n+3){padding-top:36px;border-top:1px solid var(--lineL)}
  .facts3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts3 li:nth-child(3){border-left:0}
  .facts3 li:nth-child(n+3){border-top:1px solid var(--lineL)}
  .points li{padding:34px 26px 10px}
}

/* héros empilé : écrans étroits, ou tablettes en portrait (même condition que le <picture> et le script) */
@media (max-width:899px),(max-width:1199px) and (max-aspect-ratio:1/1){
  .hero{--lift:0%;--phh:min(calc(100vw * 1.25),88vh);--phh:min(calc(100vw * 1.25),88svh);min-height:0;display:block}
  .hero__ph{top:0;bottom:auto;height:var(--phh)}
  .hero__ph img{object-position:50% 40%;transform-origin:50% 40%}
  .hero__veil{bottom:auto;height:calc(var(--phh) + 2px);
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--black) 50%,transparent) 0,transparent 16%,transparent 58%,color-mix(in srgb,var(--black) 64%,transparent) 76%,color-mix(in srgb,var(--black) 94%,transparent) 90%,var(--black) 100%)}
  .hero__in{display:flex;flex-direction:column;align-items:stretch;
    padding-top:calc(var(--phh) - min(31vw,236px));padding-bottom:64px}
  .hero__brand{align-self:center;align-items:center;text-align:center;width:min(72vw,440px)}
  .hero__venues{margin-top:16px;font-size:clamp(10.5px,2.9vw,13px);letter-spacing:.08em}
  .hero__act,.hdates{align-self:center;width:min(100%,640px);max-width:none}
  .hero__act{align-items:center;text-align:center;margin-top:34px;gap:14px}
  .hero__catch{font-size:clamp(24px,6.2vw,32px);white-space:normal}
  .hero__sub{margin-top:-4px;font-size:13.5px}
  .cta{justify-content:center}
  .live{justify-content:center}
  .trust{justify-content:center}
  .hdates{order:3;margin-top:36px;grid-template-columns:minmax(0,1fr)}
  .hd,.hd:first-child,.hd:last-child{padding:13px 0;border-left:0}
  .hd+.hd{border-left:0;border-top:1px solid var(--line)}
  .hd:last-child{border-bottom:1px solid var(--line)}
  .hd__c{flex-direction:row;align-items:baseline}
  .hd__v{font-size:11.5px}
  .hd__d button{font-size:27px}
}
/* tablette en portrait : photo un peu moins haute pour garder l'accroche et le bouton dans le premier écran */
@media (min-width:600px) and (max-width:1199px) and (max-aspect-ratio:1/1){
  .hero{--phh:min(calc(100vw * 1.25),68vh);--phh:min(calc(100vw * 1.25),68svh)}
  .hero__in{padding-top:calc(var(--phh) - min(20vw,160px))}
  .hero__brand{width:min(54vw,420px)}
}
/* téléphone couché : bandeau de visuel plus bas */
@media (max-width:999px) and (max-height:520px) and (orientation:landscape){
  .hero{--phh:100vh;--phh:100svh}
  .hero__ph img{object-position:50% 40%}
  .hero__in{padding-top:calc(var(--phh) - min(22vw,200px))}
  .hero__brand{width:min(44vw,calc(var(--phh) * .8))}
}
@media (max-width:899px){
  :root{--gut:28px;--hdr:64px}
  .brand img{height:38px}
  .shead{grid-template-columns:minmax(0,1fr);gap:22px}
  .points{grid-template-columns:minmax(0,1fr)}
  .points li,.points li:first-child,.points li:last-child{padding:30px 0}
  .points li+li{border-left:0;border-top:1px solid var(--line)}
  .galhead{grid-template-columns:minmax(0,1fr);gap:22px}
  .galhead__five{right:-10%;top:0;transform:none;font-size:clamp(300px,80vw,520px)}
  .gal{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:calc(100vw - 2 * var(--gut)) 64vw 64vw calc((100vw - 2 * var(--gut)) / 1.72) 64vw 64vw;
    grid-template-areas:"a a" "b c" "n d" "t t" "e f" "g o"}
  .g--corridor img{object-position:50% 50%}
  .g--note{padding:24px 12px}
  .gnote__k{font-size:12px;letter-spacing:.26em;text-indent:.26em}
  .gnote__d{font-size:clamp(52px,15vw,80px)}
  .gnote__v{font-size:11.5px;letter-spacing:.08em;white-space:nowrap}
  .g--note .btn{margin-top:14px;padding:8px 14px;letter-spacing:.1em;font-size:12px}
  .seat__zones{padding:36px 28px 32px}
  .anyp{grid-template-columns:minmax(0,1fr);gap:10px}
  .mbar{display:flex}
  .ft{padding-bottom:110px}
}
@media (max-width:760px){
  .br-pc{display:none}
  .sec{padding:100px 0}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:0}
  .stp,.stp:first-child,.stp:last-child,.stp:nth-child(odd),.stp:nth-child(even){display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:18px;padding:28px 0;border-left:0}
  .stp+.stp{border-top:1px solid var(--lineL)}
  .stp:first-child{padding-top:0}
  .stp__n{grid-row:1/3;font-size:54px}
  .stp__n::after{display:none}
  .stp h3{margin-top:2px}
  .stp p{margin-top:6px}
  .anyp{margin-top:40px}
  .facts3{grid-template-columns:minmax(0,1fr)}
  .facts3 li{flex-direction:row;justify-content:space-between;padding:16px 4px}
  .facts3 li+li{border-left:0;border-top:1px solid var(--lineL)}
  .facts3 b span{font-size:38px}
  .facts3 li:first-child b{font-size:20px}
  .facts3 li>span{text-align:right}
}
@media (max-width:600px){
  :root{--gut:20px;--hdr:60px}
  .br-sp{display:inline}
  body{font-size:14.5px}
  .hdr__in{gap:12px}
  .brand img{height:34px}
  .cartbtn{height:38px;padding:0 6px 0 14px;gap:10px;font-size:11.5px}
  .cartbtn em{min-width:24px;height:24px;font-size:13px}
  .ttl{gap:14px}
  .ttl__en{font-size:clamp(44px,13vw,62px)}
  .ttl__ja{font-size:13px}
  .shead{margin-bottom:44px;padding-bottom:26px}
  .shead__lead{font-size:14px}
  .hd__v{font-size:11px}
  .hd__d button{font-size:25px}
  .hd__d button+button{margin-left:16px}
  .cta{width:100%;gap:10px}
  .cta .btn{flex:1 1 100%}
  .trust{font-size:11px;letter-spacing:.08em}
  .trust li:nth-child(4){display:none}
  .trust li+li::before{margin:0 10px}
  .mq{padding:13px 0 11px}
  .mq__track{font-size:14.5px}
  .sec{padding:88px 0}
  .stp,.stp:first-child,.stp:last-child,.stp:nth-child(odd),.stp:nth-child(even){grid-template-columns:52px minmax(0,1fr);column-gap:14px}
  .stp__n{font-size:42px}
  .stp h3{font-size:17px}
  .stp p{font-size:13.5px}
  .anyp__t{font-size:13px}
  .facts3 li>span{font-size:12px}
  .seat__top{margin-bottom:48px}
  .tkt{padding:22px 18px 20px}
  .tkt__list b span{font-size:26px}
  .tkt__list li:first-child b span{font-size:30px}
  .tkt__list li.is-out b span{font-size:21px}
  .points h3{font-size:17px}
  .seat__zones{margin-top:56px;padding:30px 16px 26px;margin-inline:calc(-1 * var(--gut) + 8px)}
  .galhead__en{font-size:clamp(48px,14vw,68px)}
  .gal{gap:8px}
  .final{padding:132px 0 120px}
  .final h2{margin-top:36px}
  .final__en{font-size:11px;letter-spacing:.26em;text-indent:.26em}
  .final .btn{width:100%;max-width:360px}
  .ft{padding-top:64px}
  .ft__logo img{height:64px}
  .ftlinks{flex-direction:column;align-items:center;gap:14px;margin-top:36px}
}
@media (max-width:380px){
  .cartbtn{padding:0 5px 0 12px;gap:8px}
  .hd__d button{font-size:22px}
  .hd__d button i{font-size:10px}
  .hd__v{font-size:10.5px;letter-spacing:.04em}
  .hero__venues{letter-spacing:.02em}
  .mbar{padding-left:14px}
  .mbar__tx b{font-size:13px}
  .mbar .btn{padding:8px 14px;font-size:12.5px}
}
@media (hover:none){
  .g:hover img,.js figure.g.rv.in:hover img{transform:none}
  .btn:hover svg{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .js figure.g.rv::after{display:none}
  .js figure.g.rv img{transform:none}
  .mq__track{animation:none}
  .hero__ph img{animation:none;transform:none}
  #fx{display:none}
}