@charset "UTF-8";
/* ============================================================================
   Speak Fondly  ―  proto_01 共通スタイルシート
   ----------------------------------------------------------------------------
   構成
     01. デザイントークン（色・余白・フォント・画像パス）★ここだけで見た目を調整できます
     02. リセット & ベース
     03. 共通パーツ（ボタン / セクション見出し / バッジ / カード）
     04. サイトシェル（左上ロゴ / 右サイドメニュー / 右下SNS / SPヘッダー / 下部固定ナビ）
     05. オープニング演出
     06. トップページ 各セクション
     07. 下層ページ
     08. モーダル
     09. 無限スクロールギャラリー
     10. スクロール連動フェードイン
     11. 差し替え用プレースホルダーの目印（?debug のとき）
     12. レスポンシブ（タブレット / スマホ）
     13. アクセシビリティ（動きを減らす設定への配慮）
   ========================================================================== */


/* ============================================================================
   01. デザイントークン
   ============================================================================
   ▼ 色を変えたいとき・画像を差し替えたいときは、この :root の中だけ直せばOKです。
   （画像パスは この CSS ファイルからの相対パス。assets/css/ → ../img/ ）
   -------------------------------------------------------------------------- */
:root {
  /* --- ベースカラー（ウォームブラック / ダークブラウン） --- */
  --c-bg:          #14100E;
  --c-bg-2:        #1C1612;

  /* --- セカンドカラー（深みのあるダークブラウングレー） --- */
  --c-surface:     #241C17;
  --c-surface-2:   #2E251D;

  /* --- アクセントカラー（アンバーゴールド / オレンジゴールド） --- */
  --c-accent:      #F2994A;
  --c-accent-2:    #E2A85C;

  /* --- アクセントカラー2（薄いベルベットレッド。使うのは「ここぞ」という一点だけ） ---
     面（バッジの塗りなど）には --c-accent-3、文字にはコントラスト確保済みの
     --c-accent-3-text を使い分けてください。 */
  --c-accent-3:      #A34A52;
  --c-accent-3-text: #D98089;

  /* --- テキストカラー --- */
  --c-text:        #F6F0E9;
  --c-sub:         #ABA096;

  /* --- 罫線・影 --- */
  --c-line:        rgba(246, 240, 233, .10);
  --c-line-strong: rgba(246, 240, 233, .22);
  --shadow-card:   0 18px 40px rgba(0, 0, 0, .45);
  --shadow-lift:   0 26px 60px rgba(0, 0, 0, .60);

  /* --- 画像（差し替えポイント①：背景で使う画像） ---
     HERO のメインビジュアルは「写真の束」に変わったため、ここでは扱いません。
     束に使う5枚は assets/js/script.js の IMAGES.opening で差し替えてください。 */
  --img-live-bg:   url("../img/hero-main.png");   /* LIVE セクションの固定背景 */

  /* --- タイポグラフィ ---
     NEWS / ABOUT / DISCOGRAPHY などの大見出し（.section__en）だけ、
     proto_02 と同じ細身のセリフ（Cormorant Garamond）にしています。
     メニュー・ロゴ・本文は --ff-en / --ff-jp のまま変えていません。 */
  --ff-display: "Cormorant Garamond", "Times New Roman", "Yu Mincho",
                "YuMincho", "Hiragino Mincho ProN", serif;
  --ff-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --ff-jp: "Montserrat", "Noto Sans JP", "Yu Gothic", "YuGothic",
           "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  /* --- レイアウト --- */
  --container:      1120px;  /* 本文の最大幅 */
  --gutter:           40px;  /* 本文の左右余白 */
  --header-h:         64px;  /* SP：上部ヘッダーの高さ */

  /* ↓ 大きな画面でも「画面に対する見え方」が変わらないよう、
       小さいほうを下限として画面サイズに連動させています。 */
  --header-pc:  max(76px, 5vh);    /* PC：メニューが上に来たときのヘッダーの高さ */
  --edge-x:     max(40px, 2.1vw);  /* 画面の右端からの余白（SNS・ヘッダーのメニュー） */
  --edge-y:     max(26px, 1.7vh);  /* 画面の下端からの余白（SNS） */

  /* --- HERO の寸法（.hero と .side-rail の両方から使うので :root に置きます） ---
     写真の大きさが決まらないとメニューの置き場所も決まらないため、
     ここで一度だけ計算して、両方から同じ値を参照しています。 */
  --pad-top:    max(72px, 9vh);
  --pad-bottom: max(52px, 7vh);
  --gap:        max(18px, 2.6vh);

  /* 写真の高さ。次の3つのうち、いちばん小さいものが選ばれます。
       1) 48vw                    … 横に広い画面で大きくなりすぎない歯止め
       2) 100svh から上下の余白を引いた高さ … 画面の縦に収める
       3) 左右にメニューぶんの余白を残した幅を、4:3 で高さに直したもの
          （写真は画面の中央に来るので、右のメニューぶんは左右両方に必要です）
     3) があることで、どの画面幅でも写真とメニューのすき間が詰まりません。 */
  --collage-h:  max(160px, min(48vw,
                  calc(100svh - var(--pad-top) - var(--pad-bottom)),
                  calc((100vw - 2 * (var(--nav-gap) + var(--nav-w) + var(--edge-x)))
                       * 3 / 4)));
  --collage-w:  calc(var(--collage-h) * 4 / 3);   /* 写真は 4:3 */

  /* メニューの文字サイズ。メニューの幅の計算にも使うので変数にしています */
  --nav-fs:     max(17px, min(2.05vh, 1.7vw));
  /* メニューの想定幅。いちばん長い項目「DISCOGRAPHY」に左の線と余白を足した目安です。
     項目名をもっと長いものに変えるときは、この係数を大きくしてください。 */
  --nav-w:      calc(var(--nav-fs) * 11.7);
  /* 写真の右端とメニューのすき間（画面の高さに連動） */
  --nav-gap:    max(44px, 5vh);

  /* 右レール（メニュー・SNS）の右端の位置。
     ★ 基準は「画面の右端」ではなく「写真の右端」です。
       画面の右端を基準にすると、画面が広くなるほど写真とメニューのすき間
       だけが開いていきます（4K で離れすぎていた原因）。

       写真の右端から画面の右端までの距離は
         （画面幅 － 写真の幅）÷ 2
       です（写真は画面の中央に来るため）。
       そこからメニューの幅とすき間を引くと、
       メニューの左端がちょうど「写真の右端＋すき間」に来ます。
       画面が狭くて場所が足りないときは --edge-x まで戻り、
       メニューが写真の右端に少しかかる形になります。 */
  --rail-right: max(var(--edge-x), calc(
    (100vw - var(--collage-w)) / 2 - var(--nav-gap) - var(--nav-w)
  ));
  --bottomnav-h:      62px;  /* SP：下部固定ナビの高さ */
  --radius:            6px;

  /* --- モーション --- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}


/* ============================================================================
   02. リセット & ベース
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* body の overflow-x: hidden だけでは、position:fixed の要素（ヘッダー・
     ハンバーガー・下部ナビなど）がはみ出した場合に効きません（fixed要素は
     body ではなく viewport 基準のため）。html 側にも掛けて、スマホでの
     左右スワイプによる横ずれを確実に防ぎます。 */
  overflow-x: hidden;

  /* ★ スクロールバーの幅を、最初からずっと確保しておきます。
     オープニング演出中は body.is-opening で overflow: hidden にしているため
     スクロールバーが消えており、演出が終わった瞬間にスクロールバーが現れて、
     その幅（約15px）のぶん画面全体が左へガクッとずれていました。
     常に確保しておけば、その段差がなくなります。
     ページごとの縦の長さの違いによる横ずれも、同時に防げます。 */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* 右レール（.side-rail）を absolute で置く土台。
     absolute の基準は body の padding box なので、PC で右に帯を空けていても
     right: 40px は画面の右端から 40px になります。 */
  position: relative;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-jp);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================================
   左官・漆喰のような下地（ダーク版）
   ============================================================================
   外部の画像ファイルは使わず、CSS だけで作っています。2枚を重ねています。

     body::before … 光とむら
        ・右上のアンバーの灯り／左下にごく淡いベルベットレッドの気配
        ・こてで塗り広げたような、ゆるやかな波打ち（大きくぼかした円を数枚）
     body::after  … ざらつき
        ・細かい砂目（SVG のノイズ）＋横に流れる粗いむら
        ・screen 合成で「暗い壁の凹凸に光が薄く乗る」ような見え方にしています

   どちらも position: fixed なので、スクロールしても壁は動きません。

   ▼ 質感を弱めたい／強めたいとき
     body::after の opacity（下の .07）を触ってください。
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    /* 右上のアンバーの灯り */
    radial-gradient(1200px 600px at 78% -10%, rgba(242, 153, 74, .08), transparent 60%),
    radial-gradient(900px 500px at 10% 15%, rgba(226, 168, 92, .04), transparent 60%),
    /* 左下にごく淡いベルベットレッドの気配（面積は大きいが色はうっすら） */
    radial-gradient(1000px 700px at 6% 108%, rgba(163, 74, 82, .09), transparent 62%),
    /* こての跡のような、ゆるやかな波打ち */
    radial-gradient(60% 44% at 88% 46%, var(--c-bg-2), transparent 72%),
    radial-gradient(64% 46% at 20% 62%, var(--c-surface), transparent 74%),
    radial-gradient(50% 36% at 50% 96%, var(--c-bg-2), transparent 70%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    /* 細かい砂目 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* 横に流れる粗いむら（こてで塗り広げた跡） */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.013' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 800px 800px;
  opacity: .07;
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body::after { opacity: .04; }
}

/* オープニング演出の再生中はスクロールさせない */
body.is-opening { overflow: hidden; }
/* モーダル／SPメニューを開いている間もスクロールを止める */
body.is-locked   { overflow: hidden; }

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
a:hover { color: var(--c-accent); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* 読み上げ専用テキスト */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* キーボード操作用「本文へスキップ」リンク */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--c-accent);
  color: var(--c-bg-2);
  font-weight: 700;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--c-bg-2); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ============================================================================
   03. 共通パーツ
   -------------------------------------------------------------------------- */

/* --- セクション --- */
.section { padding-block: clamp(36px, 5vw, 64px); }
.section--tight { padding-block: clamp(28px, 4vw, 48px); }

/* 見出しの背後にうっすら大きく表示する透かし文字（試験導入。
   HTML側の <section data-watermark="NEWS"> のように、英字見出しと同じ文言を
   属性に入れると表示されます。不要なページには属性を付けなければ出ません）。
   ★ .container 側に z-index を付けて、透かし（絶対配置）より本文が
     必ず前面に来るようにしています（付けないと、通常配置の本文より
     絶対配置の透かしのほうが後勝ちで前面に出てしまうため）。 */
.section[data-watermark] { position: relative; overflow: hidden; }
.section[data-watermark]::before {
  content: attr(data-watermark);
  position: absolute;
  z-index: 0;
  top: -.05em;
  right: var(--gutter);
  font-family: var(--ff-display);
  font-size: clamp(64px, 13vw, 176px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--c-text);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.section[data-watermark] > .container { position: relative; z-index: 1; }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section__en {
  font-family: var(--ff-display);
  font-size: clamp(30px, 5.4vw, 54px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: .06em;
  color: var(--c-text);
}
/* 見出しの先頭に灯る小さなアンバーの点 */
.section__en::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 16px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 14px 2px rgba(242, 153, 74, .7);
  vertical-align: middle;
}

.section__jp {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--c-sub);
}

.section__more { margin-top: clamp(32px, 5vw, 48px); text-align: center; }

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  font-family: var(--ff-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text);
  background: rgba(246, 240, 233, .04);
  backdrop-filter: blur(6px);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover {
  color: var(--c-text);
  border-color: var(--c-accent);
  background: rgba(242, 153, 74, .14);
  transform: translateY(-2px);
}

.btn--primary {
  color: var(--c-bg-2);
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(242, 153, 74, .28);
}
.btn--primary:hover {
  color: var(--c-bg-2);
  background: linear-gradient(135deg, var(--c-accent-2) 0%, var(--c-accent) 100%);
}

.btn--sm    { min-height: 42px; padding: 10px 20px; font-size: 12px; }
.btn--block { display: flex; width: 100%; }

/* --- 地域タグ（バッジ） --- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--c-accent);
  background: rgba(242, 153, 74, .12);
  border: 1px solid rgba(242, 153, 74, .45);
}
.badge--muted {
  color: var(--c-sub);
  background: rgba(171, 160, 150, .10);
  border-color: rgba(171, 160, 150, .35);
}
.badge--solid {
  color: var(--c-bg-2);
  background: var(--c-accent);
  border-color: transparent;
}
/* 「初の◯◯」のような特別な回だけに使う、薄いベルベットレッドのバッジ */
.badge--rare {
  color: var(--c-text);
  background: var(--c-accent-3);
  border-color: transparent;
}
/* 完売・販売終了を示すバッジ */
.badge--soldout {
  color: var(--c-accent-3-text);
  background: rgba(163, 74, 82, .12);
  border-color: rgba(163, 74, 82, .45);
}

/* --- 日付表記 --- */
.date {
  font-family: var(--ff-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-accent-2);
}

/* --- カード共通 --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--ease-out), border-color .45s var(--ease),
              box-shadow .45s var(--ease);
}
a.card:hover, .card:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 153, 74, .45);
  box-shadow: var(--shadow-lift);
}

.card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-surface-2);
}
.card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.card:hover .card__thumb img { transform: scale(1.06); }

.card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.card__title { font-size: 16px; font-weight: 700; line-height: 1.7; }
.card__text  { font-size: 14px; line-height: 1.9; color: var(--c-sub); }

/* リード文 */
.lead {
  max-width: 46em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 2.1;
  color: var(--c-sub);
}


/* ============================================================================
   04. サイトシェル
   -------------------------------------------------------------------------- */

/* --- 左上ロゴ（PC：固定） --- */
.site-brand {
  position: fixed;
  top: max(28px, 1.9vh); left: max(32px, 1.9vw);
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 12px;
  /* ★ top や width ではなく transform で動かします。
     top / width はレイアウトの計算をやり直させるため、
     メニューの移動アニメーションと同時に走るとカクつきの原因になります。
     transform なら GPU 側で処理され、レイアウトに触れません。 */
  transition: transform .5s var(--ease-out);
}
.site-brand__mark {
  width: max(52px, 2.9vh); height: max(52px, 2.9vh);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
/* メニューがヘッダーへ移ったら、ロゴも少し上げてヘッダーの高さ(76px)に収める */
body.is-nav-docked .site-brand { transform: translateY(-12px); }
.site-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.site-brand__en {
  font-family: var(--ff-en);
  font-size: max(16px, 1.05vh);   /* 大画面でロゴの文字だけ小さく見えないように */
  font-weight: 700;
  letter-spacing: .1em;
}
.site-brand__jp {
  font-size: max(10px, .66vh);
  letter-spacing: .2em;
  color: var(--c-sub);
}

/* --- ヘッダーの背景バー（メニューが上に来たときだけ現れる） ---
   backdrop-filter は使っていません。スクロール中ずっと再描画が走り、
   メニューの移動アニメーションと競合してカクつくためです。 */
.site-header-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-pc);
  /* ★ 右レール(900)より必ず下にすること。
     .main-nav は .side-rail の中にあるため、いくら大きな z-index を付けても
     「レールの中での順番」にしかならず、レールの 900 を超えられません。
     ここを 940 にしていたときは、背景バーがメニューの上に乗って
     文字が暗く沈んでいました。 */
  z-index: 880;
  background: linear-gradient(180deg, rgba(15, 17, 21, .97), rgba(15, 17, 21, .88));
  border-bottom: 1px solid var(--c-line);
  opacity: 0;
  transform: translateY(-101%);
  transition: opacity .45s var(--ease), transform .55s var(--ease-out);
  pointer-events: none;
}
body.is-nav-docked .site-header-bar { opacity: 1; transform: none; }

/* --- 右レール：メインメニュー -----------------------------------------------
   ★ position: absolute です（fixed ではありません）。
     こうするとページと一緒にスクロールするので、メインビジュアルに
     貼り付いたまま上へ流れていきます。画面上端に近づいたところで
     JavaScript がヘッダーへ移します（assets/js/script.js の initDockNav）。
   ★ 上に 16svh の余白を入れて、メニューの中心を画面の 58% あたりに
     下げています（参考サイトの重心に合わせるため）。
   -------------------------------------------------------------------------- */
.side-rail {
  position: absolute;
  top: 0;
  height: 100svh;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-top: 16svh;
  pointer-events: none;          /* 帯そのものはクリックを素通しする */

  /* 位置の基準は写真の右端（計算式は :root の --rail-right） */
  width: var(--nav-w);
  right: var(--rail-right);
}
.side-rail > * { pointer-events: auto; }

/* --- メインメニュー（縦並び：メインビジュアルの脇） --- */
.main-nav__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4em;
}
.main-nav__link {
  position: relative;
  display: block;
  padding: .5em 0 .5em 2.2em;
  font-family: var(--ff-en);
  /* ★ 写真と同じ「画面の高さ」を基準にします。
       写真は高さ基準で決まるので、文字も同じ基準にすると
       画面が大きくなっても写真と文字の大小関係が変わりません。
       上限を付けていないのは、上限で頭打ちになると
       大画面で文字だけ小さく取り残されるためです。
       縦・横どちらの状態でも同じ値なので、移動アニメーションに
       拡大縮小が入らず、文字がぼやけません。

       1.7vw は「縦長の画面で文字が大きくなりすぎない」ための歯止めです。
       これが無いと iPad Pro の縦持ち（1024×1366）などで文字が育ちすぎ、
       ヘッダーに横並びしたときに左上ロゴと重なります。
       通常の横長の画面では 2.05vh のほうが小さいので、写真と同じ基準で動きます。
       実際の値は :root の --nav-fs にあります（メニューの幅の計算にも使うため）。 */
  font-size: var(--nav-fs);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--c-sub);
  /* 画面が狭いとメニューが写真の右端に少しかかります。
     そのときでも文字が読めるように、うっすら影を敷いておきます。 */
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
  transition: color .3s var(--ease);
}
/* ヘッダーに収まっているときは背景バーがあるので影は不要 */
body.is-nav-docked .main-nav__link { text-shadow: none; }
/* リンクの左に伸びる線（縦並びのとき） */
.main-nav__link::before {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 1.4em; height: 1px;
  background: var(--c-line-strong);
  transform-origin: left center;
  transform: scaleX(.55);
  transition: transform .4s var(--ease-out), background .4s var(--ease);
}
.main-nav__link:hover,
.main-nav__link[aria-current="page"] { color: var(--c-accent); }
.main-nav__link:hover::before,
.main-nav__link[aria-current="page"]::before {
  transform: scaleX(1);
  background: var(--c-accent);
}

/* --- メインメニュー（横並び：ヘッダーに収まった状態） --- */
body.is-nav-docked .main-nav {
  position: fixed;
  top: 0; right: var(--edge-x);
  height: var(--header-pc);
  display: flex;
  align-items: center;
}
body.is-nav-docked .main-nav__list {
  flex-direction: row;
  align-items: center;
  gap: clamp(13px, 1.6vw, 34px);
}
body.is-nav-docked .main-nav__link { padding: .55em 0; }
/* 横並びでは、左の線ではなく下線で現在地を示す */
body.is-nav-docked .main-nav__link::before {
  top: auto; bottom: 2px; left: 0;
  width: 100%;
  transform: scaleX(0);
}
body.is-nav-docked .main-nav__link:hover::before,
body.is-nav-docked .main-nav__link[aria-current="page"]::before { transform: scaleX(1); }

/* --- SNS（画面右端に縦並びで固定。スクロールしても位置は動きません） --- */
.side-sns {
  position: fixed;
  right: var(--edge-x); bottom: var(--edge-y);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: max(10px, .8vh);
  align-items: center;
}
.side-sns__link {
  display: grid;
  place-items: center;
  width: max(52px, 3.1vh); height: max(52px, 3.1vh);
  color: var(--c-sub);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  transition: color .3s var(--ease), border-color .3s var(--ease),
              transform .3s var(--ease), background .3s var(--ease);
}
.side-sns__link:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: rgba(242, 153, 74, .10);
  transform: translateY(-3px);
}
/* アイコンは丸の大きさに追従させます（丸を大きくすれば絵柄も大きくなります） */
.side-sns__link svg { width: 46%; height: 46%; fill: currentColor; }

/* --- ページ先頭へ戻るボタン（画面左下に固定。一定量スクロールすると現れる） --- */
.to-top {
  position: fixed;
  left: var(--edge-x);
  bottom: var(--edge-y);
  z-index: 900;
  display: grid;
  place-items: center;
  width: max(52px, 3.1vh); height: max(52px, 3.1vh);
  color: var(--c-sub);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: rgba(20, 23, 29, .7);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease-out),
              color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: rgba(242, 153, 74, .10);
}
.to-top.is-visible:hover { transform: translateY(-3px); }
.to-top svg { width: 46%; height: 46%; fill: currentColor; }

/* --- SP：上部ヘッダー（PCでは非表示） --- */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 950;
  height: var(--header-h);
  align-items: center;
  justify-content: space-between;
  padding-inline: 18px;
  background: rgba(15, 17, 21, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}
/* メニューやモーダルを開いている間は、背後のぼかしでロゴが薄く見えるので
   ヘッダーの背景を不透明にする */
body.is-locked .mobile-header {
  background: var(--c-bg);
  backdrop-filter: none;
}

.mobile-header__brand { display: flex; align-items: center; gap: 10px; }
.mobile-header__mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--c-line-strong);
}
.mobile-header__en {
  font-family: var(--ff-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}

/* ハンバーガーボタン（枠なし。線のサイズ・太さ・間隔は参考サイトに合わせている） */
.hamburger {
  position: relative;
  width: 30px; height: 26px;
  display: grid;
  place-items: center;
}
.hamburger__bars { position: relative; width: 30px; height: 26px; }
.hamburger__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 4px;
  background: var(--c-text);
  border-radius: 2px;
  transition: transform .5s var(--ease-out), opacity .3s var(--ease);
}
.hamburger__bars span:nth-child(1) { top: 0; }
.hamburger__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger__bars span:nth-child(3) { bottom: 0; }
/* 開いた時：225deg回転させることで「くるっと回って×になる」動きにする（45degだと回転せずその場でXになるだけ） */
.hamburger[aria-expanded="true"] .hamburger__bars span:nth-child(1) { transform: translateY(11px) rotate(225deg); }
.hamburger[aria-expanded="true"] .hamburger__bars span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__bars span:nth-child(3) { transform: translateY(-11px) rotate(-225deg); }

/* --- SP：全画面オーバーレイメニュー --- */
.overlay-nav {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 24px) 28px 40px;
  background: linear-gradient(180deg, rgba(15, 17, 21, .98) 0%, rgba(20, 23, 29, .98) 100%);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
  overflow-y: auto;
}
.overlay-nav.is-open { opacity: 1; visibility: visible; }

/* 右寄せ：メニュー全体を画面の右側に揃える */
.overlay-nav__list { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.overlay-nav__item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.overlay-nav.is-open .overlay-nav__item {
  opacity: 1;
  transform: none;
  /* --i は HTML 側の style="--i:0" で1項目ずつずらしています */
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}
/* 英字を上・日本語を下に積んで、テキストも右寄せにする */
.overlay-nav__link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--c-line);
  text-align: right;
}
.overlay-nav__en {
  font-family: var(--ff-en);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .12em;
}
.overlay-nav__jp { font-size: 11px; letter-spacing: .2em; color: var(--c-sub); }
.overlay-nav__link[aria-current="page"] .overlay-nav__en { color: var(--c-accent); }

.overlay-nav__sns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.overlay-nav__sns .side-sns__link { width: 42px; height: 42px; }
.overlay-nav__sns .side-sns__link svg { width: 18px; height: 18px; }

/* --- SP：下部固定ナビ --- */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 930;
  background: rgba(20, 23, 29, .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.bottom-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--bottomnav-h);
  font-family: var(--ff-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-sub);
}
.bottom-nav__link + .bottom-nav__link { border-left: 1px solid var(--c-line); }
.bottom-nav__link svg { width: 19px; height: 19px; fill: currentColor; }
.bottom-nav__link:hover,
.bottom-nav__link[aria-current="page"] { color: var(--c-accent); }

/* --- フッター --- */
.site-footer {
  position: relative;
  padding: clamp(40px, 6vw, 72px) 0 40px;
  border-top: 1px solid var(--c-line);
  background: linear-gradient(180deg, transparent 0%, rgba(30, 34, 42, .55) 100%);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.site-footer__title {
  font-family: var(--ff-en);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.site-footer__text { font-size: 14px; line-height: 2; color: var(--c-sub); }
.site-footer__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}
.site-footer__nav a {
  font-family: var(--ff-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-sub);
}
.site-footer__nav a:hover { color: var(--c-accent); }

.site-footer__sns {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.site-footer__copy {
  font-family: var(--ff-en);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-sub);
}


/* ============================================================================
   05. オープニング演出
   ============================================================================
   ・DOM は index.html の #opening、動きは script.js の playOpening() が担当。
   ・ここでは「初期状態」と「見た目」だけを定義しています。
   -------------------------------------------------------------------------- */
.opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--c-bg);
  overflow: hidden;
}
/* 演出が終わったら消す（JS が .is-done を付けます） */
.opening.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s var(--ease);
}

/* 光が差し込む演出の下地 */
.opening__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(120vw, 1400px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
              rgba(242, 153, 74, .22) 0%,
              rgba(242, 153, 74, .07) 34%,
              transparent 66%);
  opacity: 0;
  pointer-events: none;
}

/* 中央のロゴ
   ★ filter（drop-shadow / blur）は「絶対に」付けません。
     filter が乗った要素は GPU で合成できず、動かすたびに毎フレーム
     描き直しになります。以前のカクつきの主因がこれでした。
     光の演出は上の .opening__glow（別要素の opacity）が担当します。 */
.opening__logo {
  position: relative;
  z-index: 2;
  width: min(23vw, 160px);       /* 以前の半分のサイズ */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
}

/* 演出中はサイトシェルを隠しておく（JS が終了時に .is-ready を body に付与） */
body.is-opening .site-brand,
body.is-opening .side-rail,
body.is-opening .side-sns,
body.is-opening .mobile-header,
body.is-opening .bottom-nav { opacity: 0; }
body.is-opening .to-top { opacity: 0 !important; }

.site-brand, .side-rail, .side-sns, .mobile-header, .bottom-nav {
  transition: opacity .6s var(--ease);
}

/* 演出中だけ、写真の束を暗幕より前面へ持ち上げる。
   .hero も main も z-index を持たない（＝重なりの階層を作らない）ので、
   ここで大きな値を指定すれば暗幕(.opening の 9999)より前に出せます。

   ★ is-opening（シェルを隠す）と is-intro-stage（束を持ち上げる）を
     あえて別のクラスにしています。暗幕がフェードで消えている最中に
     束を下げてしまうと、一瞬だけ暗幕が写真の上に被って暗くなるためです。
     is-intro-stage は、暗幕が完全に消えてから外します。 */
body.is-intro-stage .hero__collage { z-index: 10000; }
body.is-opening .hero__photo { opacity: 0; }

/* メニューを1行ずつ出す（Stagger）*/
body.is-opening .main-nav__item { opacity: 0; transform: translateX(24px); }
.main-nav__item {
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
body.is-ready .main-nav__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 90ms);
}


/* ============================================================================
   06. トップページ 各セクション
   -------------------------------------------------------------------------- */

/* --- 1. HERO ---------------------------------------------------------------
   メインビジュアル＝5枚の写真を重ねた「束」。背景はダークな単色です。
   オープニング演出で集まってきた写真が、そのままここに収まります。
   -------------------------------------------------------------------------- */
/* 余白やボタンの高さは :root にまとめてあります（.side-rail からも使うため）。
   ★ 上限（clamp の3つめ）を付けていないのが要点です。
     上限があると大きな画面で余白だけが頭打ちになり、写真ばかりが伸びて
     全体の比率が崩れます（4K で写真が大きくなりすぎていた原因）。
     vh に完全連動させることで、画面が大きくなっても
     「写真と余白と文字の比率」が変わらなくなります。 */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: var(--pad-top) var(--gutter) var(--pad-bottom);
}

/* 束の大きさは「高さ」を基準に決めます（幅は 4:3 から自動で決まります）。
   実際の計算式は :root の --collage-h にあります。
   ★ px の上限を付けると 4K などの大画面で頭打ちになり、写真だけ小さく
     取り残されてしまいます。ここでは画面サイズに完全連動させています。 */
.hero__collage {
  position: relative;
  height: var(--collage-h);
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

/* 7枚は同じ枠にぴったり重ね、transform で少しずつずらして「束」に見せます。
   ★ ここが束の並びの唯一の定義です。JavaScript は演出の「開始位置」だけを
     計算し、終着点はこの CSS の値を読み取って使います（二重管理になりません）。
     枚数（IMAGES.opening の長さ）を変えたら、ここの nth-child も合わせて増減してください。*/
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 3px solid rgba(246, 240, 233, .92);
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
}
.hero__photo:nth-child(1) { transform: rotate(-7deg)   translate(-3.4%,  1.6%); }
.hero__photo:nth-child(2) { transform: rotate( 5deg)   translate( 3.0%, -1.8%); }
.hero__photo:nth-child(3) { transform: rotate(-3deg)   translate(-1.6%, -2.6%); }
.hero__photo:nth-child(4) { transform: rotate( 3.4deg) translate( 1.8%,  2.4%); }
.hero__photo:nth-child(5) { transform: rotate( 2deg)   translate(-2.2%,  1.2%); }
.hero__photo:nth-child(6) { transform: rotate(-2.4deg) translate( 2.0%, -1.0%); }
.hero__photo:nth-child(7) { transform: none; }   /* 最前面＝傾きなし */

/* JavaScript がメニューの位置を測っている一瞬だけ、
   トランジションを止めます（測るためにクラスを付け外しするので、
   その拍子にロゴなどがピクッと動かないようにするため）。 */
body.is-measuring *,
body.is-measuring *::before,
body.is-measuring *::after { transition: none !important; }

/* （SCROLL インジケーターは廃止しました） */

/* --- 2. NEWS（縦並びの簡易リスト。カード感を出さないよう背景・枠なし） --- */
.news-list { display: flex; flex-direction: column; }
.news-line {
  padding: clamp(20px, 3vw, 26px) 0;
  border-bottom: 1px solid var(--c-line);
}
.news-line:first-child { border-top: 1px solid var(--c-line); }
.news-line__meta { display: flex; align-items: center; gap: 12px; }
.news-line__title { margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.7; }
.news-line__text  { margin-top: 6px; font-size: 13px; line-height: 1.85; color: var(--c-sub); }

/* --- 3. ABOUT --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about-visual {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
}
.about-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.about-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.about-member {
  padding: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.about-member__role {
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--c-accent);
}
.about-member__name {
  font-family: var(--ff-en);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-top: 4px;
}
.about-member__text { margin-top: 8px; font-size: 13px; line-height: 1.9; color: var(--c-sub); }

/* --- 4. STAGE / LIVE（背景固定パララックス） --- */
.live-section {
  position: relative;
  /* ★ これが DISCOGRAPHY / MEDIA が消えていた問題の対策です。
     下の背景は margin-bottom: -100vh によって「長く貼り付ける」代わりに、
     セクションの外まで移動できてしまい、後ろに続く DISCOGRAPHY と MEDIA を
     覆い隠していました。overflow: clip でこのセクションの外側を切り取れば、
     はみ出した部分だけが消えて、貼り付きの動きはそのまま残ります。

     overflow: hidden ではなく clip を使うのが重要です。
     hidden はスクロールの入れ物になってしまい、貼り付き（sticky）が
     画面ではなくこの箱を基準にしてしまうためです。 */
  overflow: clip;
}

/* sticky で背景を画面に貼り付ける。
   ※ background-attachment: fixed は iPhone の Safari で効かないため使いません。 */
.live-section__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;   /* レイアウトの高さを消す（前面の内容が上に重なる） */
  background-image: var(--img-live-bg);
  background-size: cover;
  background-position: center 30%;
}
.live-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--c-bg) 0%, rgba(15, 17, 21, .78) 22%,
                    rgba(15, 17, 21, .86) 78%, var(--c-bg) 100%);
}
.live-section__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(64px, 9vw, 110px);
}

/* LIVE：一括「チケット予約」ボタン（カード一覧のすぐ上・右寄せ＝1番上のカードの外側右上） */
.live-list__top { display: flex; justify-content: flex-end; margin-bottom: 14px; }

/* ライブスケジュールのカード */
.live-list { display: flex; flex-direction: column; gap: 18px; }

.live-card {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 22px 26px;
  background: rgba(30, 34, 42, .78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--ease-out), border-color .45s var(--ease),
              background .45s var(--ease);
}
.live-card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 153, 74, .5);
  background: rgba(38, 43, 52, .86);
}
.live-card--past { opacity: .62; }

.live-card__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-right: 22px;
  border-right: 1px solid var(--c-line);
}
.live-card__year {
  font-family: var(--ff-en);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--c-sub);
}
.live-card__day {
  font-family: var(--ff-en);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--c-text);
}
.live-card__week {
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-accent);
}

.live-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.live-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.live-card__title { font-size: 17px; font-weight: 700; line-height: 1.6; }
.live-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--c-sub);
}
.live-card__meta span { display: inline-flex; align-items: center; gap: 6px; }

.live-card__action { display: flex; flex-direction: column; gap: 8px; }

/* ライブカードのフライヤーサムネイル（クリックでモーダル表示） */
.live-card__flyer {
  display: block;
  width: 92px;
  aspect-ratio: 500 / 707;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: none;
  cursor: pointer;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease);
}
.live-card__flyer:hover { transform: translateY(-3px); border-color: rgba(242, 153, 74, .55); }
.live-card__flyer img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ライブ詳細ページのフライヤー（横並びグリッド） */
.flyer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.live-flyer {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  overflow: hidden;
  background: var(--c-surface-2);
}
.live-flyer img { width: 100%; object-fit: cover; }

/* --- 5. DISCOGRAPHY --- */
.disco-latest {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.disco-jacket-wrap { display: flex; flex-direction: column; gap: 12px; }
.disco-jacket {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-lift);
}
.disco-jacket img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* 裏ジャケットを見るボタン（DISCOGRAPHYページの代表作カードのみ） */
.disco-jacket__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-sub);
  background: rgba(246, 240, 233, .04);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.disco-jacket__back-link:hover { color: var(--c-text); border-color: var(--c-accent); }

.disco-info__label {
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--c-accent);
}
.disco-info__title {
  font-family: var(--ff-en);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 8px 0 6px;
}
.disco-info__meta { font-size: 13px; letter-spacing: .1em; color: var(--c-sub); }
.disco-info__text { margin-top: 16px; font-size: 14px; line-height: 2; color: var(--c-sub); }

/* 収録曲リスト（代表作の詳細カード／作品一覧カード共通） */
.disco-tracks__label {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text);
}
.disco-tracks {
  margin-top: 6px;
  padding-left: 1.3em;
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-sub);
  list-style: decimal;
}
.disco-tracks li::marker { color: var(--c-accent); }

/* 作品一覧カードのボタン列（CDを購入する／配信で聴く を横並びに） */
.disco-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* サブスク4社の直リンク */
.subs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.subs__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  font-family: var(--ff-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-text);
  background: rgba(246, 240, 233, .05);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .3s var(--ease), color .3s var(--ease);
}
.subs__link:hover {
  color: var(--c-text);
  border-color: var(--c-accent);
  background: rgba(242, 153, 74, .13);
  transform: translateY(-2px);
}
.subs__link svg { width: 17px; height: 17px; fill: currentColor; }

.disco-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* 作品一覧（下層ページ） */
.disco-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.disco-grid .card__thumb { aspect-ratio: 1; }

/* --- 6. MEDIA & GALLERY --- */
.mv {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-lift);
  background: var(--c-surface-2);
  cursor: pointer;
}
.mv img, .mv iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.mv--auto { cursor: default; }
.mv__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 17, 21, .45);
  transition: background .35s var(--ease);
}
.mv:hover .mv__overlay { background: rgba(15, 17, 21, .25); }
.mv__play {
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(242, 153, 74, .92);
  box-shadow: 0 12px 40px rgba(242, 153, 74, .4);
  transition: transform .35s var(--ease-out);
}
.mv:hover .mv__play { transform: scale(1.08); }
.mv__play svg { width: 26px; height: 26px; fill: var(--c-bg-2); margin-left: 4px; }
.mv__caption {
  position: absolute;
  left: 20px; bottom: 18px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--c-text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}


/* ============================================================================
   07. 下層ページ
   -------------------------------------------------------------------------- */
.page-head {
  /* PCでは下層ページ常時表示の .site-header-bar（高さ --header-pc）と重ならないよう、
     それを基準に余白を確保する。SPは body 側で --header-h 分を別途確保済みなので、
     ここでは最小限の余白だけで足りる（@media (max-width: 1023px) で上書き）。 */
  padding-top: calc(var(--header-pc) + 28px);
  padding-bottom: clamp(16px, 2.4vw, 28px);
  border-bottom: 1px solid var(--c-line);
}
.page-head__en {
  font-family: var(--ff-en);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
}
.page-head__jp {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--c-accent);
}
.page-head__text { margin-top: 8px; max-width: 44em; font-size: 13px; line-height: 1.7; color: var(--c-sub); }

/* 見出し帯のすぐ下に来るセクションは、上詰めの余白にする */
.page-head + .section { padding-top: clamp(28px, 4vw, 48px); }
.page-head + .live-section .live-section__inner { padding-top: clamp(40px, 5vw, 64px); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  font-family: var(--ff-en);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--c-sub);
}
.breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb [aria-current="page"] { color: var(--c-accent); }

/* お知らせ一覧（横並びリスト） */
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-item {
  padding: 18px 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: transform .4s var(--ease-out), border-color .4s var(--ease);
}
.news-item:hover { transform: translateY(-4px); border-color: rgba(242, 153, 74, .45); }
.news-item__body { display: flex; flex-direction: column; gap: 8px; }
.news-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.news-item__title { font-size: 17px; font-weight: 700; line-height: 1.7; }
.news-item__text  { font-size: 14px; line-height: 1.9; color: var(--c-sub); }

/* 汎用の情報ブロック */
.panel {
  padding: clamp(24px, 4vw, 40px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.panel + .panel { margin-top: 20px; }
.panel__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* 定義リスト（プロフィール等） */
.deflist { display: grid; grid-template-columns: 150px 1fr; gap: 14px 24px; }
.deflist dt {
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-accent);
  padding-top: 4px;
}
.deflist dd { font-size: 15px; line-height: 1.95; }

/* --- お問い合わせフォーム --- */
.form { display: flex; flex-direction: column; gap: 22px; }
.form__row { display: flex; flex-direction: column; gap: 8px; }
.form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}
.form__req {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--c-bg-2);
  background: var(--c-accent);
}
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--c-text);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--c-accent);
  background: rgba(30, 34, 42, .9);
}
.form__textarea { min-height: 190px; resize: vertical; line-height: 1.9; }
.form__note { font-size: 12px; line-height: 1.8; color: var(--c-sub); }

/* 「送信できません」の案内 */
.notice {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--c-sub);
  background: rgba(242, 153, 74, .07);
  border: 1px solid rgba(242, 153, 74, .32);
  border-radius: var(--radius);
}
.notice__icon { flex: none; color: var(--c-accent); font-size: 17px; line-height: 1.6; }
.notice strong { color: var(--c-text); }

/* 2カラム（フォーム + 連絡先） */
.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

/* CD販売店リンクの一覧（モーダル内） */
.shop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.shop-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 700;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .3s var(--ease);
}
.shop-link:hover {
  color: var(--c-text);
  border-color: var(--c-accent);
  background: rgba(242, 153, 74, .12);
  transform: translateY(-2px);
}
.shop-link__arrow { color: var(--c-accent); font-size: 15px; }


/* ============================================================================
   08. モーダル
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 10, 13, .82);
  backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative;
  width: min(100%, 620px);
  max-height: min(86vh, 780px);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 42px);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  transform: translateY(20px) scale(.98);
  transition: transform .45s var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }

.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--c-sub);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.modal__close:hover { color: var(--c-accent); border-color: var(--c-accent); }

.modal__label {
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--c-accent);
}
.modal__title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  letter-spacing: .04em;
  margin: 6px 0 10px;
}
.modal__text { font-size: 14px; line-height: 2; color: var(--c-sub); margin-bottom: 24px; }

/* --- モーダル：フライヤー表示（画像のみ、文字用の余白は持たせない） --- */
.modal__panel--flyer {
  width: min(92vw, 480px);
  max-height: 88svh;
  padding: 0;
  background: none;
  border: none;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  line-height: 0;
}
.modal__panel--flyer img { width: 100%; height: auto; max-height: 88svh; object-fit: contain; }
.modal__panel--flyer .modal__close {
  background: rgba(20, 16, 14, .72);
  backdrop-filter: blur(6px);
}


/* ============================================================================
   09. 無限スクロールギャラリー（2段・互い違い）
   ============================================================================
   ・script.js が中身を複製して、継ぎ目のないループにしています。
   ・各アイテムの間隔は gap ではなく margin-right で取っています
     （複製したときにズレなく -50% でループさせるため）。
   -------------------------------------------------------------------------- */
.gallery { display: flex; flex-direction: column; gap: 18px; }

.marquee {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* 左右の端をふわっと消す */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-left 46s linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-name: marquee-right; }

/* クリック（スマホはタップ）で一時停止／再開（is-paused の切り替えは script.js の initMarquee） */
.marquee.is-paused .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: none;
  width: clamp(230px, 26vw, 340px);
  aspect-ratio: 4 / 3;
  margin-right: 18px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.marquee__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out), filter .6s var(--ease);
  filter: saturate(.92) brightness(.88);
}
.marquee__item:hover img { transform: scale(1.05); filter: none; }

@keyframes marquee-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }



/* ============================================================================
   10. スクロール連動フェードイン
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* 子要素を1つずつずらして出したいとき */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal--stagger.is-visible > * { opacity: 1; transform: none; }
.reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   }
.reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 110ms; }
.reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 220ms; }
.reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 330ms; }
.reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 440ms; }
.reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 550ms; }


/* ============================================================================
   11. 差し替え用プレースホルダーの目印
   ============================================================================
   URL の末尾に ?debug を付けると、仮配置の画像に「REPLACE」バッジが出ます。
   （例： index.html?debug ）普段の見た目には一切影響しません。
   -------------------------------------------------------------------------- */
.ph-wrap { position: relative; display: block; width: 100%; height: 100%; }
.ph-wrap > img { width: 100%; height: 100%; object-fit: cover; }

.ph-badge {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 5;
  display: none;
  padding: 4px 10px;
  font-family: var(--ff-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--c-bg-2);
  background: var(--c-accent);
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  pointer-events: none;
}
body.is-debug .ph-badge { display: block; }
body.is-debug .ph-wrap { outline: 2px dashed rgba(242, 153, 74, .8); outline-offset: -2px; }


/* ============================================================================
   12. レスポンシブ
   -------------------------------------------------------------------------- */

/* --- PC（1200px 以上）：右サイドメニューのぶん、本文の右に帯を空ける --- */
/* ★ 以前はここで body に padding-right（右の帯）を入れて、
     右メニューのぶんの場所を空けていました。
     いまはメニューを「写真の右端」を基準に置いているので帯は不要です。
     帯が残っていると、メインビジュアルも下のコンテンツもすべて
     その幅だけ左に寄ってしまいます（左寄りに見えていた原因）。 */

/* --- 1024px〜1199px：余白を少し狭く --- */
@media (min-width: 1024px) and (max-width: 1199px) {
  :root { --gutter: 32px; --edge-x: 26px; }
  .site-brand { top: 22px; left: 24px; }
}

/* --- PC幅だが画面が低い（iPad系タブレットの横向きなど）：
     縦メニュー（.side-rail）は画面の高さを基準に中央寄せ、
     SNSアイコン（.side-sns）は画面下端に固定しているため、
     画面が低いとこの2つが縦方向で接触・重なってしまう。
     メニューを中央寄せではなく上寄せにして、間隔を確保する。 */
@media (min-width: 1024px) and (max-height: 820px) {
  .side-rail { justify-content: flex-start; padding-top: 6svh; }
}

/* --- タブレット（1023px 以下）：右サイドメニュー→ハンバーガーへ切替 --- */
@media (max-width: 1023px) {
  :root { --gutter: 28px; }

  body {
    padding-top: var(--header-h);
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  }

  .site-brand,
  .side-rail,
  .side-sns,
  .site-header-bar { display: none; }

  .mobile-header { display: flex; }
  .bottom-nav    { display: block; }

  /* 下部固定ナビの上に浮かせる */
  .to-top {
    left: 16px;
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* SPでは body の padding-top で --header-h 分をすでに確保済みのため、
     .page-head 側は最小限の余白でよい */
  .page-head { padding-top: clamp(24px, 4vh, 40px); }

  /* HERO は上部ヘッダーぶんを差し引く */
  .hero { min-height: calc(100svh - var(--header-h)); }

  /* メインビジュアル（束）は、ハンバーガーメニューに切り替わるのと同時に
     画面幅いっぱいへ広がります。
     ★ PC 用の --collage-h は「右メニューぶんの余白を左右対称に確保する」計算式
       （:root 参照）ですが、ここではそのメニュー自体が非表示になるため、
       その余白計算を持ち込まず、素直に画面幅いっぱいまで広げます。
       .hero の左右パディング（--gutter）を突き破るため margin-inline で
       画面端まで押し出しています。 */
  .hero__collage {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: auto;
    max-height: calc(100svh - var(--header-h) - var(--pad-top) - var(--pad-bottom));
  }

  .disco-grid,
  .flyer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid,
  .disco-latest,
  .contact-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }

  .live-card { grid-template-columns: 116px 1fr; }
  .live-card__action { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* --- スマホ（767px 以下） --- */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  body { font-size: 15px; line-height: 1.85; }

  .section { padding-block: 32px; }

  .section__head { gap: 8px; margin-bottom: 28px; }
  .section__en::before { width: 7px; height: 7px; margin-right: 12px; }

  .disco-grid,
  .flyer-grid { grid-template-columns: 1fr; gap: 18px; }

  .about-members { grid-template-columns: 1fr; }

  /* メインビジュアルの画面幅いっぱい表示は @media (max-width: 1023px) 側に統一済み。 */

  .live-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .live-card__date {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
  }
  .live-card__day { font-size: 28px; }
  .live-card__action { flex-direction: column; }
  .live-card__action .btn { width: 100%; }

  .deflist { grid-template-columns: 1fr; gap: 4px 0; }
  .deflist dd { margin-bottom: 14px; }

  .shop-list { grid-template-columns: 1fr; }

  .site-footer__nav { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }

  .marquee__item { width: 60vw; margin-right: 12px; }

  .opening__logo  { width: 31vw; }   /* 以前の 62vw の半分 */

  .modal__panel { padding: 26px 20px; }
}


/* ============================================================================
   13. アクセシビリティ：OS で「視差効果を減らす」設定をしている方への配慮
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal, .reveal--stagger > * { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .marquee { overflow-x: auto; }
}