@charset "UTF-8";
/*
 * すにすて3rdライブLP（We are SneakerStep! -3rd Step- DAWN）
 * デザイン: Figma 最終稿 ページ「🔵20261008-FIX」/ SP_TOP [81:4089]（SP 390px）
 *           メニュー SP_menu [81:8136] / PC 左 [81:7760]・PC 右 [81:8085]
 * 寸法は Figma の px ÷ 10 = rem。SP は画面幅 390px で 1rem=10px、幅に比例して拡大縮小する。600px 以上は 1rem=10px 固定
 * 寸法表: ../../design/spec_*.txt（fig-tools/spec.mjs で .fig から生成）
 */

:root {
  --beige: #dad5b9;        /* カード・パネルの地色 */
  --beige-d: #d5cfb6;      /* 会場案内の地色 */
  --blue: #0109a4;         /* チケット章の地色 */
  --blue-em: #030de2;      /* 本文中の強調（青） */
  --yellow: #ccff02;       /* 受付期間の帯・強調 */
  --yellow-l: #e5ff3f;     /* 選択中のタブ */
  --gray: #dddddd;
  --en: "Bebas Neue", sans-serif;
  --mic: "Michroma", sans-serif;
  --dela: "Dela Gothic One", sans-serif;
  --ja: "Noto Sans JP", sans-serif;
}

/* scroll-behavior: smooth はここに置かない。#ticket などが付いた URL で開き直したときに
   「表示した瞬間に勝手に下へ滑っていく」ため。押したときだけ滑らせるのは anim.css / anim.js 側 */
html { font-size: calc(100vw / 39); -webkit-text-size-adjust: 100%; }
@media (min-width: 600px) { html { font-size: 10px; } }

*, *::before, *::after { box-sizing: border-box; }
/* line-break:strict は Figma と同じ禁則（小書き文字・長音を行頭に置かない）。
   text-spacing-trim:space-all は Chrome が既定でやる約物の詰め（「、【」など）を止める。
   どちらも入れないと改行位置が Figma とずれる */
body { margin: 0; font-family: var(--ja); font-weight: 500; color: #000; background: #000; line-break: strict; text-spacing-trim: space-all; }
/* 画面が 390px より広いときは、列の外側を PC パネルと同じ地の模様で埋める（真っ黒にしない）。
   兄弟サイト sneakerstep-zepptour2026 と同じ見え方に合わせる */
@media (min-width: 600px) {
  body { background: #000 url(../images/bg_faq_tile.webp) repeat 50% 0 / 39rem 58.4rem; }
}
h1, h2, h3, p, ul, figure, details, summary { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { position: relative; width: 39rem; margin: 0 auto; background: #000; overflow: hidden; }
section { position: relative; }
[id] { scroll-margin-top: 2rem; }

/* ---- 共通の見出し（画像）-------------------------------------------------- */
.ttl { position: absolute; z-index: 2; }
.ttl img { width: 33rem; height: 11.1rem; }

/* 文字のフチ: Figma の「線 Npx 外側」は -webkit-text-stroke で 2N（中央揃えのため）＋ paint-order: stroke fill。
   「中央」ならそのまま N。金額だけ 0.5px 外側なので .1rem */
/* ---- 共通のボタン（下地は画像。文字は HTML）-------------------------------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 26rem; height: 5rem;
  background: url(../images/btn.webp) no-repeat 50% 50% / 26rem 5rem;
  border-radius: 2.5rem; box-shadow: 0 0 0 .3rem var(--gray);   /* Figma: 線 3px #dddddd 外側。画像は内側だけなので外枠は CSS */
  font-family: var(--dela); font-weight: 400; letter-spacing: .04em; line-height: 2.3rem;
}
.btn__em { color: #fff; font-size: 1.6rem; -webkit-text-stroke: .4rem #000; paint-order: stroke fill; }
.btn__sub { color: #000; font-size: 1.6rem; }
.btn__sm { color: #000; font-size: 1.4rem; line-height: 2rem; -webkit-text-stroke: .2rem #fff; paint-order: stroke fill; }
.btn__sm--s { font-size: 1.2rem; line-height: 1.7rem; }
.btn--c { margin-inline: auto; }

/* ---- 追従ボタン（ファーストビューを過ぎたら右下に出す）---------------------
 * 2026-10-14 支給 PDF。1440px 以上は右パネルに同じボタンがあるので出さない
 */
.float {
  position: fixed; z-index: 55; right: calc(50% - 19.5rem + 1.2rem); bottom: 1.6rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
  opacity: 0; visibility: hidden; transform: translateY(1.2rem);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.is-float .float { opacity: 1; visibility: visible; transform: none; }
.float__faq img { width: 10.9rem; height: 1.9rem; filter: drop-shadow(0 0 .4rem #fff); }
.float__tickets img { width: 10.8rem; height: 10.9rem; }
@media (min-width: 1280px) { .float { display: none; } }   /* 左右パネルに同じボタンが出る幅 */
.is-menu .float { display: none; }   /* メニューを開いている間は隠す */

/* ---- SP: メニューを開くボタン ---------------------------------------------- */
.is-menu .hd__menu { display: none; }   /* メニューを開いている間は閉じるボタンだけ出す */
.hd__menu {
  position: fixed; z-index: 60; top: 1.5rem; right: calc(50% - 19.5rem + 1.5rem);
  display: flex; flex-direction: column; align-items: center;
  width: 5rem; height: 5rem; padding-top: 1.6rem;
  background: #0009a4;
}
.hd__bar { width: 3rem; height: .2rem; background: #fff; }
.hd__bar + .hd__bar { margin-top: .6rem; }
.hd__txt { margin-top: 1.1rem; font-family: var(--mic); font-size: .7rem; letter-spacing: .04em; color: #fff; }

/* ---- SP: メニュー ---------------------------------------------------------- */
/* 板（390x575）は引き伸ばさず、そのままの大きさで画面の高さの中央に置く
   （2026-10-16 支給 PDF p12「下の余白が気になる」＋ユーザー指示「等倍固定で高さセンタリング」）。
   開け閉めはフェード（同 p11）*/
.menu {
  position: fixed; z-index: 55; inset: 0;
  width: 39rem; margin-inline: auto;
  background: #000;
  display: flex;
  overflow: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
/* 中央寄せは margin:auto で。align-items:center と違い、画面が板より低いときも上が切れない。
   flow-root は中の margin-top が外へ抜けないようにするため */
.menu__inner {
  flex: none; position: relative; display: flow-root;
  width: 39rem; height: 57.5rem; margin: auto;
  background: url(../images/bg_menu.webp) no-repeat 0 0 / 39rem 57.5rem;
}
.is-menu .menu { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }
/* 閉じるボタンは板と一緒に動かさず、画面の右上に固定（支給 PDF p12 のイメージ）*/
.menu__close { position: absolute; z-index: 2; top: 1.7rem; right: 1.5rem; width: 5rem; height: 5rem; background: #0009a4; }
.menu__close::before, .menu__close::after {
  content: ""; position: absolute; left: 1rem; top: 2.4rem; width: 3rem; height: .2rem; background: #fff;
}
.menu__close::before { transform: rotate(45deg); }
.menu__close::after { transform: rotate(-45deg); }
.menu__logo { display: block; width: 12.9rem; height: 7.7rem; margin: 9.5rem auto 0 13.4rem; }   /* Figma: 134,95（中央ではない）*/
.menu__list { filter: drop-shadow(0 0 .4rem rgba(255, 255, 255, .8)); margin-top: 5.6rem;   /* Figma: 影 0 0 8px #fff 80% */ text-align: center; font-family: var(--mic); font-size: 1.8rem; line-height: 1.8rem; letter-spacing: .1em; color: #fff; -webkit-text-stroke: .1rem #fff; }   /* Figma: フチ 1px 中央 */
.menu__list li + li { margin-top: 2rem; }
.menu__list a { display: block; }

/* ---- KV（青い地に鎖と星）---------------------------------------------------- */
.kv { height: 52.7rem; background: url(../images/bg_kv.webp) no-repeat 0 0 / 39rem 52.7rem; }
.kv__logo { position: absolute; left: 3.4rem; top: 16.8rem; width: 32.2rem; height: 19.1rem; }
.kv__faq { position: absolute; left: 28.1rem; top: 38.8rem; z-index: 2; }
.kv__faq img { width: 10.9rem; height: 1.9rem; filter: drop-shadow(0 0 .4rem #fff); }   /* Figma: 影 0 0 8px #fff（素材からは影を外してある。Chrome の drop-shadow は Figma の半分の値で同じ広がりになる）*/
.kv__tickets { position: absolute; left: 27rem; top: 41.4rem; }
.kv__tickets img { width: 10.8rem; height: 10.9rem; }

/* ---- 公演日程 --------------------------------------------------------------- */
.sch { height: 54.1rem; background: url(../images/bg_schedule.webp) no-repeat 0 0 / 39rem 54.1rem; }
.sch__head { position: absolute; top: 10.3rem; left: 0; width: 39rem; height: 4.8rem; }
.sch__area { position: absolute; left: 15.5rem; top: 0; width: 7.9rem; height: 4.8rem; }
.sch__side {
  position: absolute; top: .4rem; width: 11.4rem; height: 3.9rem;   /* 横線は 634.5 → 634 に合わせる */
  font-family: var(--mic); font-size: .9rem; line-height: 1.4rem; letter-spacing: .12em; color: #d5d1b7;
}
.sch__side:first-of-type { left: 3.4rem; }
.sch__side:last-of-type { left: 24rem; }
.sch__line { position: absolute; left: 0; width: 11.4rem; height: .1rem; background: #d5cfb6; }
.sch__line:nth-child(1) { top: 0; }
.sch__line:nth-child(2) { top: .9rem; }
.sch__line:nth-child(4) { top: 3rem; }
.sch__line:nth-child(5) { top: 3.9rem; }
.sch__mid { position: absolute; left: 0; top: 1.3rem; display: flex; align-items: center; justify-content: space-between; width: 11.4rem; height: 1.4rem; }
.sch__short { width: 2.4rem; height: .1rem; background: #d5cfb6; }
.sch__venue { position: absolute; left: 2.9rem; top: 17.9rem; }
.sch__venue img { width: 33rem; height: 4.7rem; }
.sch__spark { position: absolute; left: 7.1rem; top: 36rem; z-index: 3; width: 4.8rem; height: 4.2rem; }

.sch__days { position: absolute; left: 0; top: 23.8rem; width: 39rem; height: 9rem; }
.day { position: absolute; top: 0; width: 15.6rem; height: 100%; }
.day:nth-child(1) { left: 3.5rem; }
.day:nth-child(2) { left: 19.7rem; }
/* DAY1 / DAY2 は黄緑。横に寝かせて左端に置く */
.day__no {
  position: absolute; left: 2rem; top: 0; width: 3.4rem; height: 2rem;
  transform-origin: 0 0; transform: rotate(90deg);
  font-family: var(--en); font-size: 2rem; line-height: 2rem; letter-spacing: .04em; text-align: center; color: var(--yellow);
}
/* DAY と日付のあいだの縦の点線（Figma: 1px #d5cfb6 dash 2,2）*/
.day::before {
  content: ""; position: absolute; left: 2.8rem; top: .1rem; width: .1rem; height: 3.3rem;
  background: linear-gradient(var(--beige-d) 0 .2rem, transparent .2rem .4rem) repeat-y;
  background-size: .1rem .4rem;
}
/* 時刻行の上下の横線（Figma: 1px #d5cfb6。下の線は最後の時刻行の 20px 下）*/
.day__time:first-of-type::before, .day__time:last-of-type::after {
  content: ""; position: absolute; left: 0; width: 15.3rem; height: .1rem; background: var(--beige-d);
}
.day__time:first-of-type::before { top: -.8rem; }
.day__time:last-of-type::after { top: 2rem; }
.day__date { position: absolute; left: 3.6rem; top: .1rem; }
.day__y { display: block; font-family: var(--en); font-size: 1.2rem; line-height: 1.2rem; letter-spacing: .04em; color: #fff; }
.day__md { display: inline-block; margin-top: -.1rem; font-family: var(--dela); font-size: 2.2rem; line-height: 2.2rem; color: #fff; }
/* (金)(土) は日付のすぐ右に 4px あけて並べる（左端を固定すると 1.16 のときに 2px ずれる）*/
.day__w { display: inline-block; margin: 0 0 .2rem .4rem; vertical-align: bottom; font-family: var(--dela); font-size: 1.2rem; line-height: 1.2rem; color: var(--beige-d); }
.day__time { position: absolute; left: 0; top: 5rem; display: flex; align-items: center; gap: .4rem; height: 1.2rem; }
.day__t + .tag { margin-left: .4rem; }   /* OPEN〜時刻は4px、組と組の間は8px */
.day__time + .day__time { top: 7rem; }
.tag {
  display: flex; align-items: center; justify-content: center; height: 1.2rem; padding: .1rem .3rem;
  background: var(--yellow);
  font-family: var(--en); font-size: 1rem; line-height: 1rem; letter-spacing: .04em; color: #000;
}
.day__t { font-family: var(--dela); font-size: 1.2rem; line-height: 1.2rem; color: #fff; }

/* 会場案内（最終稿では開閉ボタンなし） */
.venue { position: absolute; left: 4.7rem; top: 35.6rem; width: 29.4rem; }
.venue__ttl {
  display: flex; align-items: center; justify-content: center; height: 3.3rem;
  background: var(--beige-d); border-bottom: .1rem solid #000;
  font-weight: 900; font-size: 1.6rem; letter-spacing: .08em;
}
.venue__body { height: 5.2rem; display: flex; align-items: center; justify-content: center; background: var(--beige-d); }
.gmap {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--dela); font-size: 1.4rem; line-height: 1.63rem; letter-spacing: .02em;
  background: linear-gradient(180deg, #3d49ff 0%, #0812a0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gmap img { width: 1.9rem; height: 1.9rem; }

/* 開閉の「−」の印 */
.acc__mark { position: absolute; right: 1.15rem; top: 50%; width: 2.18rem; height: 2.18rem; margin-top: -1.09rem; background: #000; }   /* Figma: 右端 363.5 */
.acc__mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.14rem; height: .1rem; margin: -.05rem 0 0 -.57rem; background: var(--beige); }
.acc--tk .acc__mark { right: 0; }   /* ベージュのパネルは中身の右端（362）に揃う */
.acc--fc .acc__mark { background: var(--beige); }
.acc--fc .acc__mark::before { background: #000; }
.acc:not([open]) .acc__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .1rem; height: 1.14rem; margin: -.57rem 0 0 -.05rem; background: var(--beige);
}
.acc--fc:not([open]) .acc__mark::after { background: #000; }

/* ---- チケット ---------------------------------------------------------------- */
.tk {
  padding: 5rem 0 5.8rem;
  background: var(--blue) url(../images/bg_ticket_tile.webp) repeat-y 50% 0 / 39rem 90rem;
}
.tk .ttl { position: static; margin: 0 auto; width: 33rem; }
.tk__cards { margin-top: 3.7rem; }
/* カードの地は ::before に置く。グロウ（Figma: 影 0 0 14px rgba(218,213,185,.8)）を文字に掛けないため */
.card { position: relative; width: 33.6rem; height: 10.5rem; margin-left: 2.7rem; }
.card::before {
  content: ""; position: absolute; inset: 0;
  background: url(../images/card_bg.webp) no-repeat 0 0 / 33.6rem 10.5rem;
  filter: drop-shadow(0 0 .7rem rgba(218, 213, 185, .8));   /* Figma: 影 0 0 14px（Chrome は半分の値）*/
}
.card + .card { margin-top: 2.2rem; }
.card--up {
  width: 33.7rem; height: 17.1rem;
}
.card--up::before { background-image: url(../images/card_bg_up.webp); background-size: 33.7rem 17.1rem; }
.card__ttl {
  position: absolute; left: 0; top: 1.9rem; width: 100%;
  font-weight: 900; font-size: 1.6rem; line-height: 1.6rem; letter-spacing: .02em; text-align: center; color: var(--beige);
  -webkit-text-stroke: .2rem #000; paint-order: stroke fill;
}
/* アップグレードの見出しは黄色いピル（Figma [81:4800] 138,1542 114x22 / 下地の画像には入っていないので CSS で描く）*/
.card__ttl--em {
  left: 11.1rem; top: 2.2rem; width: 11.4rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow);
  font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0; color: #000; -webkit-text-stroke: 0;
}
.card__sub { font-size: 1.3rem; }
/* アップグレードの券種名（ピルの下の黒い空き 47px に2行。Figma には入っていない・2026-10-13 ユーザー支給の文言）*/
.card__ttl2 {
  position: absolute; left: 0; top: 4.75rem; width: 100%;
  font-weight: 500; font-size: 1.6rem; line-height: 2rem; letter-spacing: .02em; text-align: center;
  color: var(--beige);
}
.card__tag { position: absolute; left: .6rem; top: -1.6rem; width: 6.2rem; height: .64rem; }
.card--up > .card__tag { left: .648rem; top: .256rem; }   /* アップグレードだけカード直下に置くので位置を指定し直す */
.card__price {
  position: absolute; left: 0; top: 5.7rem; z-index: 0; width: 100%;   /* z-index は裏のフチ(::before)を外へ逃がさないため */
  display: flex; align-items: flex-end; justify-content: center;
  font-weight: 900;
}
.card--up .card__price { top: 10.2rem; }
.card__plus { font-size: 2rem; line-height: 3rem; }
.card__num { font-size: 3.2rem; line-height: 3.2rem; }
.card--up .card__num, .card:last-child .card__num { font-size: 3rem; line-height: 3rem; }
.card__yen { font-size: 1.6rem; line-height: 1.8rem; }   /* 「円」の上下位置をデザインに合わせる */
/* 金額の数字だけ Figma は「Noto Sans」（Noto Sans JP ではない）。幅が 4px 変わるので必ず分ける */
.card__plus, .card__num, .card__yen, .card__tax { font-family: "Noto Sans", var(--ja); }
.card__plus, .card__num, .card__yen {
  position: relative;
  background: linear-gradient(180deg, #3d49ff 0%, #09119c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 金額の黒いフチ（Figma: border 0.5px #000 outside）。
   グラデーションは background-clip:text で描いているので -webkit-text-stroke を直接かけると
   文字の内側まで黒くなる。同じ文字を裏に1本重ねて、外にはみ出す 0.5px ぶんだけ見せる */
.card__plus::before, .card__num::before, .card__yen::before {
  content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1;
  -webkit-text-stroke: .1rem #000; color: #000;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
.card--up .card__plus, .card--up .card__num, .card--up .card__yen { background: linear-gradient(0deg, #09119c 10.71%, #323de9 64.24%); -webkit-background-clip: text; background-clip: text; }
.card__tax { margin-left: .2rem; margin-bottom: .3rem; font-size: 1.2rem; line-height: 1.2rem; color: #000; }
.card--up .card__tax { margin-bottom: .2rem; }
.card__note { position: absolute; left: 0; top: 14rem; width: 100%; font-weight: 500; font-size: 1.2rem; line-height: 1.2rem; text-align: center; color: #000; }

/* 開閉パネル（ベージュ） */
.acc--tk, .acc--fc { width: 35.9rem; margin: 4rem 1.5rem 0 1.6rem; }   /* デザインは左16・右15 */
.acc--tk { padding: 1.5rem 1.2rem; background: var(--beige); border: .1rem solid #000; }
.acc--tk .acc__sum { position: relative; display: flex; align-items: center; gap: .2rem; min-height: 2.5rem; padding-right: 3rem; }
.acc__star { width: 3rem; height: 2.5rem; background: url(../images/ic_star.webp) no-repeat 50% 50% / contain; flex: none; }
.acc--tk .acc__ttl { font-weight: 700; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: .02em; }
/* 見出しと本文の間の罫線。16px → 罫線 → 16px。本文は行送り22px＋段落間隔10px（Figma の paragraphSpacing） */
.acc--tk .acc__body { margin-top: 1.55rem; border-top: .1rem solid #000; padding-top: 1.55rem; font-weight: 500; font-size: 1.4rem; line-height: 2.2rem; letter-spacing: -.02em; }
.acc--tk .acc__body p + p, .fc__note p + p { margin-top: 1rem; }
.acc__body .br, .fc__note .br { height: 2.2rem; }
.acc__body .em, .fc__note .em { color: var(--blue-em); font-weight: 700; }   /* 青い強調は Bold（リンクは Medium のまま）*/
.lk { color: var(--blue-em); text-decoration: underline; }
.lk--y { color: var(--yellow); }

/* ファンクラブ最速先行（黒） */
.acc--fc { padding: 0; box-shadow: 0 0 1.8rem rgba(218, 213, 185, .8); }
/* バッジは黄緑で見出しの上（Figma: 縦並び gap 4 / バッジ 40x14 #ccff02 / 見出し #dddddd）*/
.acc--fc .acc__sum {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  height: 6.8rem; padding: 1.4rem 1.2rem; background: #000;
  box-shadow: inset 0 0 0 .1rem var(--beige);   /* 枠は内側に描いて中身を 1px ずらさない */
}
.acc--fc .acc__lot {
  display: flex; align-items: center; justify-content: center; width: 4rem; height: 1.4rem; flex: none;
  background: var(--yellow); font-weight: 700; font-size: 1rem; letter-spacing: .04em; color: #000;
}
.acc--fc .acc__ttl { font-weight: 900; font-size: 1.6rem; line-height: 2.2rem; letter-spacing: .02em; color: var(--gray); }
.acc--fc .acc__body {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.6rem 1.2rem; background: #000;
  box-shadow: inset 0 0 0 .1rem var(--beige);   /* 枠は内側に描いて中身を 1px ずらさない */
}
.fc__label {
  display: flex; align-items: center; justify-content: center; width: 8.4rem; height: 1.9rem;
  border: .1rem solid #fff; font-weight: 500; font-size: 1.2rem; line-height: 1.3rem; color: #fff;
}
.fc__term {
  display: flex; align-items: center; justify-content: center; width: 33.2rem; height: 2.7rem; margin-top: .8rem;
  background: var(--yellow); font-weight: 900; font-size: 1.88rem; letter-spacing: -.03em; color: #000;
}
.fc__term .s { font-size: 1.2rem; }
.acc--fc .btn { margin: 2rem auto 0; }
.fc__note { width: 33.4rem; margin-top: 2rem; font-weight: 500; font-size: 1.4rem; line-height: 2.2rem; letter-spacing: -.02em; color: #fff; }

/* 受付が終わった先行（閉じた状態で下にまとめる） */
.acc--end { box-shadow: none; }
.acc--end .acc__lot { width: 5.6rem; background: var(--gray); color: #555; }   /* 受付終了はデザインに無いので灰色にした */
.acc--end .acc__ttl { color: var(--gray); text-shadow: none; }
.acc--end .fc__term { background: var(--gray); color: #555; }

.tk > .btn--c { margin: 4rem auto 0 6.6rem; }

/* ---- グッズ / ファンクラブ / マップ / ムービー（紙の地）------------------------ */
.pp { background-repeat: no-repeat; background-position: 0 0; }
.pp--goods { height: 55.4rem; background-image: url(../images/bg_goods.webp); background-size: 39rem 55.4rem; }
.pp--fc { height: 54.4rem; background-image: url(../images/bg_fanclub.webp); background-size: 39rem 54.4rem; }
.pp--map { height: 45.2rem; background-image: url(../images/bg_map.webp); background-size: 39rem 45.2rem; }
.pp--movie { height: 47.9rem; background-image: url(../images/bg_movie.webp); background-size: 39rem 47.9rem; }
.pp--goods .ttl, .pp--map .ttl, .pp--movie .ttl { left: 3.1rem; top: 4.1rem; }
.pp--fc .ttl { left: 2.4rem; top: 4.1rem; }
.pp--fc .ttl img { width: 34.3rem; }

/* ---- スライダー（グッズ / ファンクラブ / ムービー）--------------------------
 * 中身は黒ベタの仮置き。画像が決まったら .ph__slide の中を <img> か <iframe> に差し替える
 * 操作部の寸法は Figma の Frame 52 [81:4971] 実測: 矢印 23.5x20.17・現在地 22.67角・他 13.17角・間隔 12
 */
.ph { display: contents; }
.ph__view { position: absolute; left: 2.844rem; top: 17.3rem; width: 33.4rem; height: 16.9rem; overflow: hidden; }
.ph__track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.ph__slide { flex: 0 0 100%; height: 100%; }
.ph__slide > * { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.ph__box { background: #000; }
/* 動画は押されてから読み込む（サムネイル＋再生ボタン → iframe）*/
.ph__play { position: relative; display: block; width: 100%; height: 100%; background: #000; }
.ph__play img { width: 100%; height: 100%; object-fit: cover; }
.ph__playicon {
  position: absolute; left: 50%; top: 50%; width: 5.2rem; height: 5.2rem; margin: -2.6rem 0 0 -2.6rem;
  border: .2rem solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .65); box-shadow: 0 0 1.2rem rgba(0, 0, 0, .6);
}
.ph__playicon::before {
  content: ""; position: absolute; left: 1.9rem; top: 1.4rem;
  border: 1.1rem solid transparent; border-right: 0; border-left: 1.7rem solid #fff;
}
.ph__play:hover .ph__playicon, .ph__play:focus-visible .ph__playicon { background: rgba(0, 0, 0, .8); }
.ph__box--solo { position: absolute; left: 2.844rem; top: 17.3rem; width: 33.4rem; height: 16.9rem; }
.ph__nav[hidden] { display: none; }   /* display:flex が [hidden] に勝ってしまうため */
.ph__nav {
  position: absolute; left: 8.466rem; top: 35rem; width: 22.2rem; height: 2.3rem;   /* 黒ベタ(334幅)の中央。Figma の Frame 52 [81:4971] は 84.66,+350 */
  display: flex; align-items: center; justify-content: space-between;
}
.ph__arw { position: relative; width: 2.35rem; height: 2.02rem; background: no-repeat 50% 50% / contain; }
.ph__arw--prev { background-image: url(../images/slider_prev.webp); }
.ph__arw--next { background-image: url(../images/slider_next.webp); }
.ph__dots { display: flex; align-items: center; gap: 1.183rem; }   /* ドットの中心が 25 間隔になる値 */
.ph__dot {
  position: relative; display: block; width: 1.32rem; height: 1.32rem;
  background: url(../images/slider_dot.webp) no-repeat 50% 50% / contain;
}
.ph__dot.is-on { width: 2.27rem; height: 2.27rem; background-image: url(../images/slider_dot_on.webp); }
/* 見た目はデザインどおりのまま、指で押せる大きさ（44px 四方）まで当たり判定を広げる */
.ph__arw::before, .ph__dot::before { content: ""; position: absolute; inset: -1.2rem -1rem; }
.ph__arw:focus-visible, .ph__dot:focus-visible { outline: .2rem solid var(--yellow); outline-offset: .4rem; }
@media (prefers-reduced-motion: reduce) { .ph__track { transition: none; } }
.pp__btns { position: absolute; left: 6.6rem; top: 39.4rem; display: flex; flex-direction: column; gap: 1rem; }
.pp--fc > .btn { position: absolute; left: 6.6rem; top: 39.4rem; }

/* ---- よくあるご質問 ------------------------------------------------------------ */
/* 高さは中身なり（固定にすると、よくあるご質問を閉じたときに下へ空白が残る）。
   下の余白 9.8rem は Figma の「最後の項目の下端 11222.4 → 章の下端 11320」から */
.qa {
  padding: 4.3rem 0 9.8rem;
  background: #000 url(../images/bg_faq_tile.webp) repeat-y 50% 0 / 39rem 58.4rem;
}
.qa .ttl { position: static; margin: 0 auto; width: 33rem; }

/* タブは2段。1段目=「チケットのお申し込み」(選択中)・「ファミリー席」、2段目=「アップグレード」・「ご入場」 */
.qa__tabs { position: absolute; left: 0; top: 18.35rem; width: 39rem; height: 11rem; }
.qa__tab {
  position: absolute; width: 16.9rem; height: 4.6rem; padding: 0 .6rem;
  background: #000; border: .1rem solid var(--gray);
  font-weight: 900; font-size: 1.4rem; line-height: 1.7rem; letter-spacing: -.04em; text-align: center; color: var(--gray);
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .35);
}
.qa__tab:nth-child(1) { left: 1.65rem; top: 0; width: 17.2rem; }
.qa__tab:nth-child(2) { left: 20.55rem; top: 0; }
.qa__tab:nth-child(3) { left: 1.7rem; top: 6.35rem; }
.qa__tab:nth-child(4) { left: 20.3rem; top: 6.35rem; }
.qa__tab::before, .qa__tab::after { content: ""; position: absolute; width: 1.6rem; height: 1.6rem; background: var(--gray); }
.qa__tab::before { left: 0; top: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.qa__tab::after { right: 0; bottom: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.qa__tab.is-on { background: var(--yellow-l); border: .2rem solid #000; color: #000; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .25); }
.qa__tab.is-on::before, .qa__tab.is-on::after { background: #000; }

.qa__panel[hidden] { display: none; }   /* display:flex が [hidden] に勝ってしまうため */
.qa__panel { padding-top: 17.94rem; display: flex; flex-direction: column; gap: 1.6rem; }
.qa__item { width: 35.7rem; margin-left: 1.7rem; background: var(--beige); box-shadow: inset 0 0 0 .1rem #000; }   /* 枠は内側に描いて高さに足さない */
.qa__item > summary { position: relative; display: flex; gap: .8rem; padding: 1.2rem 3.4rem 1.2rem 1.05rem; }
/* Q・A は単色＋白い1pxのフチ（Figma: color #0a12b6 / border 1px #ffffff outside）。
   Q1 だけデザインが #030de2 になっているが、残り17か所に合わせて #0a12b6 で統一した */
.qa__q, .qa__a {
  flex: none; width: 1.8rem; font-family: var(--dela); font-size: 1.8rem; line-height: 1.8rem; text-align: center;
  letter-spacing: -.04em; color: #0a12b6;
  -webkit-text-stroke: .2rem #fff; paint-order: stroke fill;
}
.qa__ttl { flex: none; width: 27.9rem; border-left: .1rem dashed #000; padding-left: .7rem; font-weight: 700; font-size: 1.6rem; line-height: 2.2rem; letter-spacing: -.02em; }
.qa__item > p { display: flex; gap: .8rem; padding: 1.2rem 1.2rem 1.6rem 1.2rem; }
.qa__a { width: 1.7rem; }
/* letter-spacing は最後の文字のうしろにも効くので、ブラウザの方が 0.3px ぶん詰まって
   1文字多く入ってしまう行がある。その端数だけ内側を狭めて Figma と改行位置を合わせる */
.qa__ttl, .qa__txt, .acc--tk .acc__body, .fc__note { padding-right: .03rem; }
.qa__txt { flex: none; width: 31rem; border-left: .1rem dashed #000; padding-left: .7rem; font-weight: 500; font-size: 1.4rem; line-height: 2.4rem; letter-spacing: -.02em; }
.qa__txt .em { color: var(--blue-em); font-weight: 700; }
.qa__item .acc__mark { right: 1.05rem; top: 1.2rem; margin-top: 0; }   /* Figma: 右端 363.5 */
.qa__empty { padding: 4rem 0; font-weight: 700; color: var(--gray); text-align: center; }

/* ---- フッター ------------------------------------------------------------------ */
.ft { position: relative; height: 75.3rem; background: url(../images/bg_footer.webp) no-repeat 0 0 / 39rem 75.3rem; }
.ft__tag { position: absolute; left: .1rem; top: .1rem; width: 18rem; height: 2.88rem; }
.ft__ttl { position: absolute; left: 7.5rem; top: 7.2rem; }
.ft__ttl img { width: 24.1rem; height: 3.6rem; }
.ft__btns { position: absolute; left: 6.5rem; top: 12.8rem; display: flex; flex-direction: column; gap: 2rem; }

/* SHARE と Official SNS。枠・テープ・ピルは1枚の画像。文字とリンクを上に重ねる */
.ft__boxes {
  position: absolute; left: 3.7rem; top: 27.4rem; width: 31.7rem; height: 36rem;
  background: url(../images/box_share_sns.webp) no-repeat 0 0 / 31.7rem 36rem;
}
.ft__share-ttl { position: absolute; left: 11.6rem; top: 5.4rem; width: 8rem; font-family: var(--en); font-size: 3.6rem; line-height: 3.6rem; letter-spacing: .06em; text-align: center; color: var(--gray); }
.ft__sns-ttl { position: absolute; left: 6.8rem; top: 22.3rem; width: 17.7rem; font-weight: 700; font-size: 1.6rem; line-height: 2.1rem; text-align: center; color: var(--gray); }
.ft__sns-en { display: block; margin-top: .2rem; font-family: var(--en); font-weight: 400; font-size: 2rem; line-height: 2rem; letter-spacing: .06em; }
.ft__pill { position: absolute; height: 2.3rem; }
.ft__pill--sx { left: 8.4rem; top: 10.6rem; width: 5.7rem; }
.ft__pill--sline { left: 17.1rem; top: 10.6rem; width: 5.7rem; }
.ft__pill--yt { left: 2.6rem; top: 28.2rem; width: 5.7rem; }
.ft__pill--x { left: 9.4rem; top: 28.2rem; width: 5.7rem; }
.ft__pill--line { left: 16.1rem; top: 28.2rem; width: 5.7rem; }
.ft__pill--tt { left: 22.8rem; top: 28.2rem; width: 5.7rem; }

.ft__official {
  position: absolute; left: 8.5rem; top: 65.4rem;
  display: flex; align-items: center; width: 21.9rem; height: 3.4rem; padding-left: .36rem;
  background: url(../images/btn_official.webp) no-repeat 0 0 / 21.9rem 3.4rem;
  filter: drop-shadow(0 0 .4rem rgba(255, 255, 255, .8));   /* Figma: 影 0 0 8px #fff 80%（Chrome は半分の値）*/
}
.ft__official span { font-family: var(--dela); font-size: 1.78rem; line-height: 1.8rem; color: #fff; }
/* Figma は Noto Sans JP Regular(400) だが、この1行のために 400 を読み込むと重いので Medium(500) のまま（2026-10-13 ユーザー判断）*/
.ft__copy { position: absolute; left: 0; top: 72.8rem; width: 100%; text-align: center; font-size: 1.2rem; line-height: 1.4rem; color: #fff; }

/* ---- PC の左右パネル（SP の列を中央に置き、左右に出す）------------------------- */
.side { display: none; }
/* 左右パネルは 1280px から出す（2026-10-15）。1440px からにしていたため、
   1280〜1439px のノートPCでは中央の 390px だけが浮いて左右が余白になっていた。
   パネルの中身が収まる下限は 390 + 426(SHARE の枠の外端)×2 = 1242px */
@media (min-width: 1280px) {
  .side {
    position: fixed; top: 50%; z-index: 30; display: block;
    width: 52.5rem; height: 79.2rem; margin-top: -39.6rem;
  }
  /* 1440px より広い画面では、左右のパネルを画面の端まで伸ばす（2026-10-14 支給 PDF:
     「大画面で左右の余白が目立つ」）。絵柄は外側の端に寄せ、内側の隙間は地の金網が続く。
     1440px ちょうどのときは calc が 52.5rem になるので、これまでと同じ見え方 */
  /* 絵柄は外側の端に置き、上下のテープだけを内側へ繰り返して隙間を埋める。
     隙間の地は body の金網がそのまま続く */
  .side--l {
    left: calc(50% - 19.5rem - 52.5rem); width: 52.5rem;
    background: url(../images/bg_pc_left.webp) no-repeat 0 0 / 52.5rem 79.2rem;
  }
  .side--r {
    right: calc(50% - 19.5rem - 52.5rem); width: 52.5rem; height: 78.4rem; margin-top: -39.2rem;
    background: url(../images/bg_pc_right.webp) no-repeat 0 0 / 52.5rem 78.4rem;
  }
  .side__share-ttl { position: absolute; right: 21.5rem; top: 49.4rem; width: 8rem; font-family: var(--en); font-size: 3.6rem; line-height: 3.6rem; letter-spacing: .06em; text-align: center; color: var(--gray); }
  .side__share-lk { position: absolute; top: 54.6rem; height: 2.3rem; }
  .side__share-lk--x { right: 27rem; width: 5.7rem; }
  .side__share-lk--line { right: 18.3rem; width: 5.7rem; }
  .side__nav { position: absolute; left: 17.5rem; top: 19.1rem; width: 14.4rem; text-align: center; filter: drop-shadow(0 0 .4rem rgba(255, 255, 255, .8)); }
  .side__nav li + li { margin-top: 2rem; }
  .side__nav a { display: block; font-family: var(--mic); font-size: 1.8rem; line-height: 1.8rem; letter-spacing: .1em; white-space: nowrap; color: #fff; -webkit-text-stroke: .1rem #fff; }   /* Figma: フチ 1px 中央 */
  .side__btns { position: absolute; left: 11.7rem; top: 48.9rem; display: flex; flex-direction: column; gap: 2rem; }
  .hd__menu, .menu { display: none; }
}