/* =========================================================
   Meet the Symphonic / SP LP コーディングベース
   - モバイルファースト（デザイン基準幅 375px）
   - PC では中央寄せ表示（--site-max で調整）
   - 画像は /images/ 配下に配置する想定
   ========================================================= */

/* ---------- 1. デザイントークン ---------- */
:root{
  --bg:          #fff;      /* ベース */
  --bg-outer:    #010101;   /* PC 表示時の外側（わずかに温かみのある黒） */
  --ink:         #3B322C;   /* 基本テキスト */
  --ink-soft:    #5C5147;   /* 本文グレー */
  --gold:        #A98C5F;   /* 見出し・日付などのアクセント */
  --gold-light:  #C9B48C;   /* 罫線・装飾 */
  --line:        #DDD3C4;   /* ヘアライン */
  --dark:        #221E1B;   /* タグ等の濃色 */
  --catch-bg:    #A48B78;   /* キャッチコピー帯の背景 */

  --font-jp: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;

  --site-max: 480px;        /* SP デザインの最大表示幅 */
  --gutter: 28px;           /* 左右の余白 */
  --section-space: 72px;    /* セクション間の余白 */
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-outer);
  color:var(--ink);
  font-family:var(--font-jp);
  font-size:14px;
  line-height:2;
  letter-spacing:.06em;
  font-feature-settings:"palt" 1;
}
img{ display:block; max-width:100%; height:auto; }
figure{ margin:0; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* PC 表示時の背景画像（実体は @media min-width:900px で指定） */
.bg-fixed{ display:none; }

/* ---------- 3. レイアウト土台 ---------- */
.site{
  max-width:var(--site-max);
  margin-inline:auto;
  background:var(--bg);
  overflow-x:hidden;
}
.inner{ padding-inline:var(--gutter); }

.section{ padding-block:var(--section-space); }
.section + .section{ padding-top:0; }          /* セクション連続時の余白調整 */

.section-title{
  text-align:center;
  margin:0 0 32px;
  line-height: 1.1;
}
.section-title__en{
  display:block;
  font-family:var(--font-en);
  font-size:1.65rem;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1.3;
  color:var(--gold);
}
/* ナビと同じ和文サブ。英字が出そろってから遅れて表示（遅延はJSが設定） */
.section-title__ja{
  display:block;
  font-family:var(--font-jp);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
  opacity:0;
  transition:opacity .8s ease;
}
/* 1文字ずつ、ぼかし＋フェードで出現（JSで .char に分割） */
.section-title__en .char{
  display:inline-block;
  opacity:0;
  filter:blur(10px);
  transform:translateY(8px);
  transition:opacity .7s ease, filter .7s ease, transform .7s ease;
}
.section-title.is-shown .section-title__en .char{
  opacity:1;
  filter:blur(0);
  transform:none;
}
.section-title.is-shown .section-title__ja{ opacity:1; }

/* 全幅イメージ帯（パララックス）
   .band が窓、.band__bg が上下にはみ出した背景。
   スクロール量に応じて JS が .band__bg を translateY する。
   ※ background-attachment:fixed は iOS Safari で効かないため JS 方式  */
.band{
  position:relative;
  aspect-ratio:375 / 140;   /* 見える高さ（375px幅で約140px）。数値を変えて調整 */
  overflow:hidden;
  background:#cdc3b6;
}
.band__bg{
  position:absolute;
  left:0; right:0;
  top:calc(var(--parallax-shift) * -1);
  bottom:calc(var(--parallax-shift) * -1);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  will-change:transform;
}
/* はみ出し量＝上下の可動域（±この値ぶん動く）。JS はこの値を読み取って使う */
.band{ --parallax-shift:50px; }
.band--01 .band__bg{ background-image:url("/images/parallax01.webp"); }
.band--02 .band__bg{ background-image:url("/images/parallax02.webp"); }
.band--03 .band__bg{ background-image:url("/images/parallax03.webp"); }
.band--04 .band__bg{ background-image:url("/images/parallax04.webp"); }
.band--04{ background-color:#1c1917; }   /* 暗い写真用の下地 */

/* ---------- 3-1. ローディング ----------
   1) clip-path で左から右へロゴを露出
   2) 完了時にロゴが拡大しながらフェードアウト（X/Twitter のアプリ起動風）  */
.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s ease .12s, visibility .7s .12s;
}
.loader__logo{
  width:min(320px, 74vw);
  height:auto;
  transform-origin:center center;
  will-change:transform, opacity;
  -webkit-clip-path:inset(0 100% 0 0);
  clip-path:inset(0 100% 0 0);
}
/* 1) 左から描く */
.loader.is-drawing .loader__logo{
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
  transition:-webkit-clip-path 1.9s cubic-bezier(.62,0,.3,1), clip-path 1.9s cubic-bezier(.62,0,.3,1);
}
/* 2) ロゴが手前に迫るように拡大しながら消える。
      --loader-zoom を大きくするほど勢いが増す  */
.loader{ --loader-zoom:5; }
.loader.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader.is-done .loader__logo{
  transform:scale(var(--loader-zoom));
  opacity:0;
  /* 加速していく動き（ease-in 寄り）にすると"吸い込まれる"印象になる */
  transition:transform .9s cubic-bezier(.55,0,.85,.25), opacity .6s ease .18s;
}
body.is-loading{ overflow:hidden; }

/* ---------- 3-2. ハンバーガーメニュー ----------
   .site（最大 480px・中央寄せ）の右上に固定表示。
   position:fixed はビューポート基準になるため、
   right を calc で site の右端に合わせている            */
.gnav-toggle{
  position:fixed; z-index:60;
  top:14px;
  right:calc(50% - min(50vw, var(--site-max) / 2) + 14px);
  width:46px; height:46px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.82);
  border-radius:50%;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .6s ease, transform .6s ease, visibility .6s;
}
.gnav-toggle.is-visible{ opacity:1; visibility:visible; transform:none; }

.gnav-toggle__bars{ position:relative; width:20px; height:11px; }
.gnav-toggle__bars span{
  position:absolute; left:0;
  width:100%; height:1px;
  background:var(--ink);
  transition:transform .4s ease, opacity .25s ease;
}
.gnav-toggle__bars span:nth-child(1){ top:0; }
.gnav-toggle__bars span:nth-child(2){ top:5px; }
.gnav-toggle__bars span:nth-child(3){ top:10px; }
.gnav-toggle[aria-expanded="true"] .gnav-toggle__bars span:nth-child(1){ transform:translateY(5px) rotate(32deg); }
.gnav-toggle[aria-expanded="true"] .gnav-toggle__bars span:nth-child(2){ opacity:0; }
.gnav-toggle[aria-expanded="true"] .gnav-toggle__bars span:nth-child(3){ transform:translateY(-5px) rotate(-32deg); }

/* メニュー本体 */
.gnav{
  position:fixed; z-index:55;
  top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--site-max);
  background:rgba(251,248,244,.97);
  /* ロゴ＋リストをひとかたまりとして天地中央に置く */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s;
}
.gnav[data-open="true"]{ opacity:1; visibility:visible; }

/* メニュー内のロゴ（TOPへ戻る） */
.gnav__logo-link{
  display:block;
  transition:opacity .3s ease;
}
.gnav__logo-link:hover{ opacity:.65; }
.gnav__logo{
  width:min(300px, 78%);
  height:auto;
  margin-inline:auto;
}

.gnav__list{
  list-style:none;
  margin:0; padding:0;
  text-align:center;
}
.gnav__list li{ margin-block:26px; }
.gnav__link{
  display:block;
  text-decoration:none;
  font-family:var(--font-en);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:.18em;
  color:var(--gold);
  transition:color .3s ease;
  line-height: 1.2;
}
.gnav__link:hover{ color:var(--ink); }
.gnav__link small{
  display:block;
  font-family:var(--font-jp);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
  margin-top:4px;
}
/* 開いたときに1項目ずつ立ち上がる */
.gnav__list li{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.gnav[data-open="true"] .gnav__list li{ opacity:1; transform:none; }
.gnav[data-open="true"] .gnav__list li:nth-child(1){ transition-delay:.12s; }
.gnav[data-open="true"] .gnav__list li:nth-child(2){ transition-delay:.2s; }
.gnav[data-open="true"] .gnav__list li:nth-child(3){ transition-delay:.28s; }
.gnav[data-open="true"] .gnav__list li:nth-child(4){ transition-delay:.36s; }
.gnav[data-open="true"] .gnav__list li:nth-child(5){ transition-delay:.44s; }

/* ---------- 4. HERO（ファーストビュー：画面高いっぱい） ---------- */
.hero{
  position:relative;
  min-height:90vh;       /* 古いブラウザ用フォールバック */
  min-height:90svh;      /* Android Chrome などのUIぶんを見込んで90% */
  padding:26px 18px 34px;
  display:flex;
}
.hero__frame{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;   /* 枠内で天地中央。内容が増えれば枠ごと伸びる */
  border:1px solid var(--gold-light);
  padding:48px 22px 76px;   /* 下は Scroll 表示ぶんを確保 */
  text-align:center;
}

/* ロゴ（本番はロゴ画像に差し替え推奨） */
.logo{ margin:0 0 26px; }
.logo img{ width:min(300px, 92%); margin-inline:auto; }

/* キャッチコピー：文字幅ぶんだけの帯にする（横いっぱいに広げない）
   背景（::before）が左から伸び、少し遅れて文字がフェードイン */
.hero__catch,
.hero__catch-ja{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
  color:#fff;
  padding:5px 16px;
}
.hero__catch::before,
.hero__catch-ja::before{
  content:"";
  position:absolute; inset:0;
  background:var(--catch-bg);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s cubic-bezier(.76,0,.24,1);
}
.hero__catch-text{
  position:relative;   /* 背景より前面に */
  opacity:0;
  transition:opacity .7s ease;
}
.hero.is-ready .hero__catch::before{ transform:scaleX(1); transition-delay:.25s; }
.hero.is-ready .hero__catch-ja::before{ transform:scaleX(1); transition-delay:.45s; }
.hero.is-ready .hero__catch .hero__catch-text{ opacity:1; transition-delay:.8s; }
.hero.is-ready .hero__catch-ja .hero__catch-text{ opacity:1; transition-delay:1s; }

/* 1行に収まるよう画面幅に応じて縮小（ヒーロー左右余白80px＋帯の内側余白32px＋予備4pxを差し引く） */
.hero__catch{
  font-family:var(--font-en);
  font-size:min(1.02rem, calc((100vw - 116px) / 18.5));
  letter-spacing:.1em;
  white-space:nowrap;
  margin-bottom:6px;
}
.hero__catch-ja{
  font-weight:500;
  font-size:min(.95rem, calc((100vw - 116px) / 15.6));
  letter-spacing:.08em;
  white-space:nowrap;
  margin-bottom:34px;
}

/* 出演者の丸写真 */
.hero__portraits{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:14px;
  margin-bottom:30px;
}
.portrait{
  width:128px; aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:#ded5c9;
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
.hero__portraits > :nth-child(2){ margin-top:26px; }
.hero__portrait-link{
  display:block;
  -webkit-tap-highlight-color:transparent;
}
.hero__portrait-link img{ transition:transform .6s ease, filter .4s ease; }
.hero__portrait-link:hover img,
.hero__portrait-link:focus-visible img{ transform:scale(1.05); filter:brightness(.94); }

/* 最長行「オーケストラ：グランドフィルハーモニック東京」（22文字）が
   折り返さないよう、画面幅に応じて文字サイズを縮める。
   計算式：(画面幅 − ヒーロー左右の余白 80px − 予備4px) ÷ 22.6文字ぶん  */
.hero__credit{
  font-size:min(.86rem, calc((100vw - 84px) / 22.6));
  letter-spacing:.02em;
  line-height:2.1;
  white-space:nowrap;
  margin-bottom:26px;
}
.hero__date{
  font-family:var(--font-jp);
  font-weight:600;
  font-size:1.28rem;
  color:var(--gold);
  letter-spacing:.04em;
  margin-bottom:2px;
}
.hero__date-unit{ font-size:.7em; }   /* 年・月・日だけ小さく */
/* 会場名（"RaiBoC Hall 市民会館おおみや大ホール"）を1行に収める */
.hero__venue{
  font-size:min(1rem, calc((100vw - 84px) / 19));
  font-weight:500;
  white-space:nowrap;
}

/* Scroll インジケーター */
.scroll-hint{
  position:absolute;
  left:26px; bottom:14px;   /* 枠線より下にはみ出させる */
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-en);
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--ink-soft);
}
.scroll-hint__label{ writing-mode:vertical-rl; }
.scroll-hint__line{
  width:1px; height:44px; background:var(--line);
  position:relative; overflow:hidden;
}
.scroll-hint__line::after{
  content:""; position:absolute; inset:0;
  background:var(--gold);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ---------- 4-2. NEWS ---------- */
.news__list{
  list-style:none;
  margin:0; padding:0;
}
.news__item + .news__item{
  border-top:1px solid var(--line);
}
.news__date{
  display:block;
  font-family:var(--font-en);
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--gold);
  margin-bottom:2px;
}
.news__link,
.news__text{
  display:block;
  padding:16px 0;
  font-size:.9rem;
  line-height:1.7;
  text-decoration:none;
}
/* リンクになっている項目だけ矢印を出す */
.news__link{
  position:relative;
  padding-right:22px;
  transition:color .3s ease;
}
.news__link::after{
  content:"";
  position:absolute; right:4px; top:calc(50% + .5em);
  width:7px; height:7px;
  border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  transform:translateY(-50%) rotate(-45deg);
  transition:transform .3s ease;
}
.news__link:hover{ color:var(--gold); }
.news__link:hover::after{ transform:translateY(-50%) rotate(-45deg) translate(3px,3px); }

/* ---------- 5. ABOUT ---------- */
.about__body{ font-size:.9rem; line-height:2.15; color:var(--ink-soft); }
.about__body + .about__body{ margin-top:1.8em; }

/* 「出会い」の3項目：hero のキャッチと同じ帯演出（文字サイズは本文と同じ） */
.about__points{
  list-style:none;
  margin:1.4em 0;
  padding:0;
  display:grid;
  gap:8px;
  justify-items:start;
}
.about__point{
  position:relative;
  font-weight:500;
  padding:2px 14px;
  font-size:.9rem;
  line-height:1.95;
  color:#fff;
}
.about__point::before{
  content:"";
  position:absolute; inset:0;
  background:var(--catch-bg);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .8s cubic-bezier(.76,0,.24,1);
}
.about__point-text{
  position:relative;   /* 背景より前面に */
  opacity:0;
  transition:opacity .6s ease;
}
.about__points.is-shown .about__point::before{ transform:scaleX(1); }
.about__points.is-shown .about__point-text{ opacity:1; }
/* --body-delay（見出しの表示完了時間）を起点に1本ずつ */
.about__points.is-shown .about__point:nth-child(1)::before{ transition-delay:calc(var(--body-delay, 0s) + .1s); }
.about__points.is-shown .about__point:nth-child(2)::before{ transition-delay:calc(var(--body-delay, 0s) + .3s); }
.about__points.is-shown .about__point:nth-child(1) .about__point-text{ transition-delay:calc(var(--body-delay, 0s) + .6s); }
.about__points.is-shown .about__point:nth-child(2) .about__point-text{ transition-delay:calc(var(--body-delay, 0s) + .8s); }

/* ---------- 6. ARTIST ---------- */
.artist__names{
  text-align:center;
  font-weight:500;
  font-size:.92rem;
  margin-bottom:22px;
}
.artist__list{
  list-style:none;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:0 6px;
}

/* 画像全体がクリック領域 */
.artist-card{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:#ded5c9;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.artist-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease, filter .4s ease;
}
.artist-card:hover img,
.artist-card:focus-visible img{ transform:scale(1.04); filter:brightness(.92); }

/* 画像の上に重なる丸＋プラス */
.artist-card__icon{
  position:absolute; right:10px; bottom:10px;
  width:28px; height:28px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:rgba(0,0,0,.18);
  color:#fff;
  font-family:var(--font-en);
  font-size:1rem; line-height:1;
  transition:background .3s ease, transform .3s ease;
}
.artist-card:hover .artist-card__icon,
.artist-card:focus-visible .artist-card__icon{
  background:rgba(0,0,0,.5);
  transform:rotate(90deg);
}

/* ---------- 6-2. プロフィールモーダル ---------- */
.modal{
  width:min(86%, 380px);
  max-height:82svh;
  padding:0;
  border:0;
  background:var(--bg);
  color:var(--ink);
  overflow:auto;
  overscroll-behavior:contain;
}
.modal::backdrop{ background:rgba(30,26,23,.72); }
.modal[open]{ animation:modalIn .45s ease both; }
@keyframes modalIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
.modal__inner{ padding:20px 24px 56px; }
/* アーティスト写真は原寸比のまま全体を表示（縦横比は問わない） */
.modal__photo{
  width:100%;
  margin:0;
  background:#e8e2da;
}
.modal__photo img{
  display:block;
  width:100%;
  height:auto;
}
.modal__name{
  font-size:1.05rem; font-weight:700; text-align:center;
  margin:0 0 4px;
}
.modal__name-en{
  font-family:var(--font-en);
  font-size:.78rem; letter-spacing:.16em; text-align:center;
  color:var(--gold);
  margin:0 0 20px;
}
.modal__text{ font-size:.86rem; line-height:2.1; color:var(--ink-soft); }
.modal__text + .modal__text{ margin-top:1.4em; }
/* ゴーストボタン */
.modal__link{
  position:relative;
  display:block;
  width:100%; max-width:260px;
  margin:30px auto 0;
  padding:13px 0;
  border:1px solid var(--gold);
  border-radius:8px;
  background:none;
  color:var(--gold);
  font-family:var(--font-en);
  font-size:.82rem;
  letter-spacing:.16em;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background .35s ease, color .35s ease;
}
.modal__link:hover,
.modal__link:focus-visible{ background:var(--gold); color:#fff; }
/* NEWS と同じ矢印（閉じるボタンには付けない） */
.modal__link:not(.modal__link--close)::after,
.ticket__fc-link::after{
  content:"";
  position:absolute; right:16px; top:50%;
  width:7px; height:7px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-50%) rotate(-45deg);
  transition:transform .3s ease;
}
.modal__link:not(.modal__link--close):hover::after,
.ticket__fc-link:hover::after{
  transform:translateY(-50%) rotate(-45deg) translate(3px,3px);
}
/* 閉じるボタンは控えめの色味に */
.modal__link--close{
  margin-top:14px;
  border-color:var(--line);
  color:var(--ink-soft);
}
.modal__link--close:hover,
.modal__link--close:focus-visible{ background:var(--ink-soft); border-color:var(--ink-soft); color:#fff; }
.modal__close{
  position:sticky; top:10px; z-index:2;
  float:right;
  margin-right:10px;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(20,18,15,.5);
  color:#fff;
  font-size:1rem; line-height:1;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

/* スクリーンリーダー専用テキスト */
.u-visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* ---------- 7. INFORMATION ---------- */
.info__list{
  margin:0;
  font-size:.9rem;
  line-height:2.15;
  text-align:left;
}
/* ラベルと値を隣り合わせに置き、余分な間延びと途中改行を防ぐ */
.info__row{ display:flex; align-items:baseline; }
.info__list dt{ flex:none; font-weight:600; }
.info__list dt::after{ content:"："; }
.info__list dd{ margin:0 0 1rem 0; min-width:0; line-height:1.5; }
.info__list + .info__list{ margin-top:1.8em; }

/* ---------- 8. TICKET ---------- */
/* 券種名にかかるラベル（dt 内に配置） */
.ticket__badge{
  display:block;
  width:fit-content;
  background:var(--dark);
  color:#fff;
  font-size:.7rem;
  letter-spacing:.12em;
  line-height:1.9;
  padding:0 10px;
  margin-bottom:4px;
}
.ticket__list{ margin:0; }
.ticket__row{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  padding-block:14px;
  /* 1行ずつ順に表示（[data-stagger] に .is-shown が付いたら解除） */
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.ticket__list.is-shown .ticket__row{ opacity:1; transform:none; }
/* --body-delay（見出しの表示完了時間）を起点に1行ずつ */
.ticket__list.is-shown .ticket__row:nth-child(1){ transition-delay:calc(var(--body-delay, 0s) + .05s); }
.ticket__list.is-shown .ticket__row:nth-child(2){ transition-delay:calc(var(--body-delay, 0s) + .2s); }
.ticket__list.is-shown .ticket__row:nth-child(3){ transition-delay:calc(var(--body-delay, 0s) + .35s); }
.ticket__list.is-shown .ticket__row:nth-child(4){ transition-delay:calc(var(--body-delay, 0s) + .5s); }
.ticket__row + .ticket__row{ border-top:1px solid var(--line); }
.ticket__list dd{ margin:0; }
.ticket__name{ font-size:1rem; font-weight:600; }
.ticket__seat{
  font-size:.76rem;
  letter-spacing:.08em;
  border:1px solid var(--ink);
  border-radius:2px;
  padding:3px 10px;
  white-space:nowrap;
  line-height:1;
}
.ticket__price{
  display:inline-flex;
  align-items:baseline;   /* ¥ と数字をベースラインで揃える */
  font-family:var(--font-en);
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}
.ticket__yen{
  font-size:.6em;      /* 円マークだけ小さく */
  margin-right:1px;
}
.ticket__tax{
  writing-mode:vertical-rl;   /* 税込を縦書き */
  font-family:var(--font-jp);
  font-size:.32em;
  line-height:1;
  letter-spacing:0;
  align-self:flex-end;
  margin-left:3px;
  padding-bottom:.15em;       /* 数字の下端に合わせる微調整 */
}

/* チケット詳細（先行受付の案内） */
.ticket__detail{ margin-top:52px; }
.ticket__detail + .ticket__detail{ margin-top:44px; }
.ticket__detail-title{
  font-size:.98rem;
  font-weight:600;
  line-height:1.6;
  padding-bottom:10px;
  margin:0 0 16px;
  border-bottom:1px solid var(--line);
}
.ticket__detail-body{
  font-size:.86rem;
  line-height:1.9;
  color:var(--ink-soft);
}
.ticket__detail-body + .ticket__detail-body{ margin-top:1.2em; }
.ticket__schedule{
  margin:1.2em 0;
  font-size:.86rem;
  line-height:1.7;
}
.ticket__schedule dt{
  font-weight:600;
  color:var(--ink);
}
.ticket__schedule dd{
  margin:0 0 .9em;
  color:var(--ink-soft);
}
.ticket__fc{
  list-style:none;
  margin:1.4em 0 0;
  padding:0;
  display:grid;
  justify-items:start;   /* ボタンを内容幅に収めて左揃え */
  gap:12px;
}
/* ゴーストボタン（アーティスト名＋FC名の2段） */
.ticket__fc-link{
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  padding:14px 40px 14px 28px;   /* 右は矢印ぶん広め */
  border:1px solid var(--gold);
  border-radius:8px;
  color:var(--gold);
  text-align:center;
  text-decoration:none;
  transition:background .35s ease, color .35s ease;
}
.ticket__fc-link:hover,
.ticket__fc-link:focus-visible{ background:var(--gold); color:#fff; }
.ticket__fc-name{
  display:block;
  font-size:.9rem;
  font-weight:600;
  line-height:1.5;
}
.ticket__fc-site{
  display:block;
  font-size:.78rem;
  letter-spacing:.04em;
  line-height:1.5;
  margin-top:2px;
}
.ticket__note{
  font-size:.8rem;
  color:var(--ink-soft);
}

/* 購入ボタンが必要になったら使用
.ticket__cta{
  display:block; margin:32px auto 0; width:min(280px,100%);
  text-align:center; text-decoration:none;
  border:1px solid var(--gold); color:var(--gold);
  font-family:var(--font-en); letter-spacing:.14em;
  padding:14px 0; transition:background .3s, color .3s;
}
.ticket__cta:hover{ background:var(--gold); color:#fff; }
*/

/* ---------- 9. FOOTER ---------- */
.footer{
  background:var(--bg-outer);
  color:#fff;
  text-align:center;
  font-size:.74rem;
  line-height:2.2;
  padding:44px var(--gutter) 40px;
}
.footer span{ display: inline-block;}
.footer__copyright{ margin-top:.4em; font-family:var(--font-en); letter-spacing:.06em; }

/* ---------- 10. スクロールアニメーション ----------
   セクション自体は透明にせず、見出し（.section-title）以外の要素を遅らせて表示。
   遅延 --body-delay は「見出しの1文字ずつ表示が終わる時間」をJSが算出して各セクションに付与する */
.reveal{ --body-delay:.6s; }
.reveal > *:not(.section-title):not(dialog){
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s ease, transform .9s ease;
  transition-delay:var(--body-delay);
}
.reveal.is-visible > *:not(.section-title):not(dialog){ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal > *{ opacity:1; transform:none; }
  .section-title__en .char{ opacity:1; filter:none; transform:none; }
  .section-title__ja{ opacity:1; }
  .ticket__row{ opacity:1; transform:none; }
  .gnav .gnav__list li{ opacity:1; transform:none; }
  .gnav__logo-link{ opacity:1; transform:none; }
  .loader__logo{ -webkit-clip-path:none; clip-path:none; transform:none; }
  .hero__catch::before, .hero__catch-ja::before{ transform:scaleX(1); }
  .hero__catch-text{ opacity:1; }
  .about__point::before{ transform:scaleX(1); }
  .about__point-text{ opacity:1; }
  html{ scroll-behavior:auto; }
}

/* ---------- 11. 端末サイズ別の微調整 ---------- */
/* 画面高が低い端末（小型スマホ・横向き）でファーストビューが窮屈にならないよう縮める */
@media (max-height:700px){
  .hero__frame{ padding:32px 22px 64px; }
  .logo{ margin-bottom:18px; }
  .portrait{ width:108px; }
  .hero__catch-ja{ margin-bottom:24px; }
  .hero__portraits{ margin-bottom:22px; }
  .hero__credit{ margin-bottom:18px; }
}

@media (max-width:359px){
  :root{ --gutter:20px; }
  .portrait{ width:112px; }
}

/* ---------- 12. PC表示（幅900px以上） ----------
   .site の外側・画面左端にナビゲーションを縦組みで常時表示し、
   ハンバーガーは非表示にする。JS 側も同じ 900px で同期している  */
@media (min-width:900px){
  /* .site（480px）の外側に背景画像を右寄せで固定表示。
     body に background-attachment:fixed を使うと iOS（iPad の横向きなど）で
     画像が拡大・スクロールしてしまうため、固定要素を別に置いている  */
  .bg-fixed{
    display:block;
    position:fixed; inset:0; z-index:0;
    background-color:var(--bg-outer);
    background-image:url("/images/bg.webp");
    background-repeat:no-repeat;
    background-position:right center;
    background-size:auto 90%;
    pointer-events:none;
  }
  .site{ position:relative; z-index:1; }

  .gnav-toggle{ display:none; }

  .gnav{
    top:clamp(32px, 6vh, 64px); bottom:auto; left:0;
    transform:none;
    width:auto; max-width:none;
    padding-left:clamp(24px, 4vw, 56px);
    display:block;
    background:transparent;
    opacity:1; visibility:visible;
    z-index:40;
  }
  .gnav__list{ text-align:left; }
  /* ロゴは左寄せ・SPより大きめに */
  .gnav__logo{ width:clamp(200px, 18vw, 280px); margin-inline:0; }
  .gnav__logo-link{
    align-self:flex-start;
    margin-bottom:36px;
    opacity:0;
    transform:translateY(-12px);
    transition:opacity .8s ease, transform .8s ease;
  }
  .gnav.is-ready .gnav__logo-link{ opacity:1; transform:none; transition-delay:.12s; }
  /* 上から順に立ち上がる（読み込み後に .is-ready が付く） */
  .gnav .gnav__list li{
    opacity:0;
    transform:translateY(-12px);
    transition:opacity .8s ease, transform .8s ease;
    margin-block:22px;
  }
  .gnav.is-ready .gnav__list li{ opacity:1; transform:none; }
  .gnav.is-ready .gnav__list li:nth-child(1){ transition-delay:.25s; }
  .gnav.is-ready .gnav__list li:nth-child(2){ transition-delay:.4s; }
  .gnav.is-ready .gnav__list li:nth-child(3){ transition-delay:.55s; }
  .gnav.is-ready .gnav__list li:nth-child(4){ transition-delay:.7s; }
  .gnav.is-ready .gnav__list li:nth-child(5){ transition-delay:.85s; }
  .gnav__link{ font-size:1.05rem; letter-spacing:.16em; }
  .gnav__link small{ font-size:.64rem; }
}