/* ===== あの頃せれくしょん！ LP — build-claude =====
   上から順に実装中。現在は「左右の帯」＋「FV（PC）」まで。
   素材: 帯=side-*.png / FV=fv-bg(PSB渦巻き・仮なし)・fv-kv(透過)・fv-logo(透過)・fv-fill(①装飾) */

:root{
  --band-width:47px;        /* 帯の幅（狭い余白） */
  --band-img-width:26px;    /* テキスト画像の幅（原寸） */
  --band-img-offset:8px;    /* 画像を帯の内側に寄せるオフセット */
  --band-line-width:2px;    /* 青ライン */
  --band-line-color:#0062B3;/* 実測青に統一（旧#0068b7） */
  --band-speed:720s;        /* 1周の時間（緩やか・Codex 準拠） */
  --top-band-h:28px;        /* SP上部帯の高さ（白24+上下青2px） */

  /* ===== デザイントークン（DESIGN-NOTES.md 準拠。生色直書き禁止）===== */
  --c-blue:#0062B3;         /* 帯/枠/本文の青 */
  --c-pink:#E94B9C;         /* CTA（素材実測で順次補正） */
  --c-pink-d:#D6357F;
  --c-bg-cream:#FBF6D8;
  --c-bg-section:#FFFCCF;   /* PRODUCT/TRACK LIST/STORE 等のセクション地色（実測） */
  --c-bg-stripe-a:#ffffff;  /* EVENT/CAMPAIGN 斜めシマ：白 */
  --c-bg-stripe-b:#F4ECFB;  /* 同：薄ラベンダー（実測 ≒ #FAF6FF〜#F6EEFB を視認用に少し濃く） */
  --c-ink:#3a3a3a;
  --c-ph:#D6D6D6;           /* COMING SOON プレースホルダ灰（実測 #D6D6D6） */
  --c-panel:#FFFCCF;        /* NEWS等パネルのクリーム塗り */
  --c-navy:#004BA0;         /* パネル枠の濃紺 */
  --c-link:#FF99C5;         /* リンク/桃 */
  --bp-sp:499px;            /* SP ブレークポイント上限 */
  --content-max:1346px;     /* PC コンテンツ実質幅（帯47×2を除く） */
  --content-gap:15px;       /* 【共通規約】左右の帯とコンテンツの最小隙間。全セクション厳守 */
  --radius-pill:999px;
  --radius-card:16px;
  --gap-section:160px;      /* セクション間の基準縦余白 */

  /* 本文/テキスト見出し共通フォント（サイト統一）。
     Adobe Fonts: heisei-maru-gothic-std（平成丸ゴシック／Typekit kit crt2alu）。
     利用可能ウェイトは 400・800。読込前は sans-serif フォールバック。 */
  --font-base:"heisei-maru-gothic-std",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

/* hidden 属性は最強で効かせる（コンポーネントclassの display:* に上書きされない）。
   セクションやCTA/モーダル等を非表示にしたい時の単一スイッチ。 */
[hidden]{display:none !important}

/* タップ時の青いハイライト/選択チラつきを抑止（対話要素） */
a,label,button,input,.sp-menu-btn,.sp-menu__scrim,.sp-menu__close,.sp-menu__link{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
.sp-menu-btn,.sp-menu__scrim,.sp-menu__close,.sp-menu__link{
  user-select:none;-webkit-user-select:none;
}

/* 横スクロール/隙間防止: body だけだと html 側で残るため html にも付与。
   100vw（縦バー幅含む）や FV キャラのはみ出しが横スクロールバー＝右の謎隙間に
   なるのを根本で抑止。縦スクロールは従来どおり可。 */
html{overflow-x:hidden}
body{
  font-family:"heisei-maru-gothic-std",sans-serif;
  background:#fff;
  color:#3a3a3a;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}

/* ---- 一番外側の左右の帯 ----
   背景白・幅47px・両端2px青ライン・テキスト画像は内側8pxオフセット。
   position:fixed でスクロール非連動。同一画像2枚を 0⇔-50% で無限ループ。
   左帯=上→下／右帯=下→上。1周720s。PC（1024px〜）のみ。 */
.side-rail{
  position:fixed;top:0;bottom:0;z-index:100;
  width:var(--band-width);
  background:#fff;
  overflow:hidden;
  pointer-events:none;
}
.side-rail--left{left:0}
.side-rail--right{right:0}
.side-rail::before,
.side-rail::after{
  content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:var(--band-line-width);
  background:var(--band-line-color);
}
.side-rail::before{left:0}
.side-rail::after{right:0}
.side-rail__track{
  position:absolute;left:var(--band-img-offset);
  width:var(--band-img-width);
  will-change:transform;
}
.side-rail__track img{
  display:block;width:var(--band-img-width);max-width:none;height:auto;
}
.side-rail--left  .side-rail__track{animation:rail-down var(--band-speed) linear infinite}
.side-rail--right .side-rail__track{animation:rail-up   var(--band-speed) linear infinite}
@keyframes rail-down{
  from{transform:translateY(-50%)}
  to  {transform:translateY(0)}
}
@keyframes rail-up{
  from{transform:translateY(0)}
  to  {transform:translateY(-50%)}
}

/* ---- 上部の帯（SP のみ・画面上部固定・右→左に無限スクロール） ----
   画像だと元データが低解像度なので CSS テキストで描画（ベクター＝常に鮮明）。
   同一シーケンス2本を横並びにし translateX 0→-50% で継ぎ目なしループ。
   既定は非表示、SP(≤499)でのみ表示。 */
/* SP上部帯 ＝ 長方形14 のCSS再現：白背景＋上下2pxの青ライン(#0062B3)。
   白24px + 上下border2px = 28px (= --top-band-h) */
.top-rail{
  display:none;
  position:fixed;top:0;left:0;right:0;height:var(--top-band-h);
  z-index:100;overflow:hidden;background:#fff;pointer-events:none;
  border-top:2px solid #0062B3;
  border-bottom:2px solid #0062B3;
}
/* sp-scroll（星4つ分タイル：素材4544×97＝超高精細／表示819px固定）。同一2枚をシームレススクロール（上帯は逆方向） */
.top-rail__track{
  display:flex;width:max-content;height:100%;align-items:center;
  will-change:transform;
  animation:top-rail-right 28s linear infinite;
}
.top-rail__tile{
  display:block;flex:none;
  width:819px;height:auto;max-width:none;   /* 表示幅は従来通り819px(=keyframe -819pxと一致)。素材は2x解像度で高精細。基底 img{max-width:100%} 打消し */
}
/* 左→右：トラックを -1タイル(819px) → 0（中身が右へ動く）。2枚同一でシームレス */
@keyframes top-rail-right{
  from{transform:translateX(-819px)}
  to  {transform:translateX(0)}
}

/* ハンバーガー（menuレイヤーをCSS再現）。PC/SP 共通で常時表示。
   FVセクション右上（＝ページ最上部の右上）に固定配置。
   中心をSPメニューの閉じるボタン中心に一致（右20px/上32px → 中心 右36.5/上45）。
   白角丸ボックス 33×26 + 青3本線(#0062B3 18×2) */
/* 隠しチェックボックス: position:fixed（ビューポート内）にして、ラベル操作で
   フォーカスが移ってもページ先頭へスクロールしないようにする（旧absoluteは
   ページ先頭位置でフォーカス時にトップへジャンプしていた） */
.sp-menu-toggle{position:fixed;top:0;left:0;width:0;height:0;opacity:0;pointer-events:none}
.sp-menu-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  position:fixed;top:32px;right:20px;
  width:33px;height:26px;padding:7px 0;
  background:rgba(255,255,255,.70);border-radius:4px;
  z-index:200;cursor:pointer;
}
.sp-menu-btn__bar{width:18px;height:2px;background:#0062B3;border-radius:1px}

/* ===== SPメニュー モーダル（sp_menuレイヤー再現・設計355×445px）=====
   ハンバーガー(#spMenuToggle)で フェードイン/アウト。スクリム/×/リンクで閉じる */
.sp-menu{
  position:fixed;inset:0;z-index:300;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease, visibility 0s linear .28s;
}
#spMenuToggle:checked ~ .sp-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .28s ease;
}
/* モーダル外の薄暗いレイヤー（タップで閉じる） */
.sp-menu__scrim{position:absolute;inset:0;background:rgba(20,16,40,.45);cursor:pointer}
/* パネル: 設計355×445px。要素右上を画面右上に揃える(top:0/right:0)。
   1em=1設計px。viewport<355px の時だけ比例縮小（画面はみ出し時のみ） */
.sp-menu__panel{
  position:absolute;top:19.5px;right:10px;   /* 閉じる中心=ハンバーガー中心。左右上下に隙間 */
  font-size:min(1px, 100vw / 355);
  width:355em;height:445em;
  background:url(../public/img/sp-menu-bg.webp) center/cover no-repeat;
  overflow:hidden;
}
.sp-menu__close{position:absolute;top:10em;right:11em;width:31em;height:31em;cursor:pointer}
.sp-menu__close img{display:block;width:100%;height:100%}
.sp-menu__link{position:absolute;display:block;cursor:pointer}
.sp-menu__link img{display:block;width:100%;height:100%}
.sp-menu__link--news     {left:101em;top:51em; width:82em; height:27em}
.sp-menu__link--product  {left:101em;top:104em;width:131em;height:27em}
.sp-menu__link--trucklist{left:101em;top:157em;width:155em;height:27em}
.sp-menu__link--store    {left:100em;top:210em;width:88em; height:27em}
.sp-menu__link--event    {left:101em;top:262em;width:86em; height:27em}
.sp-menu__link--campaign {left:100em;top:315em;width:147em;height:27em}
.sp-menu__link--streaming{left:100em;top:368em;width:159em;height:27em}

/* PC（≥500px・側帯あり）: ハンバーガーが右側帯に被らないよう内側へ。
   中心一致を保つためパネルも連動（両中心とも 右=band+27 / 上45）。
   ham.right=band+10 → 中心=band+10+16.5 ; panel.right=band → 閉じる中心=band+11+15.5
   ＝ band+26.5。差0.5pxは丸め誤差範囲（実機検証で一致確認） */
@media (min-width:500px){
  .sp-menu-btn   { right: calc(var(--band-width) + 10px); }
  .sp-menu__panel{ right: var(--band-width); }
}

/* ---- メインコンテンツ領域（帯ぶんの内側余白を確保）---- */
.page{
  /* 帯幅ぶんの内側余白のみ（FVはフルブリード設計のためここに15pxを足さない） */
  padding-inline:var(--band-width);
}

/* ===== FV（ファーストビュー）=====
   基準 = 渦巻きカード fv-bg（PSD「ヘッダーのコピー」x316–1126 / y0–811 = 810×811）。
   stage = fv-bg のフットプリント。幅は「画面幅 − 帯幅合計」いっぱい（.page が
   padding-inline で帯分を確保済みなので .fv 内の 100% ＝ 利用可能幅）。
   max-width:810px で原寸超の拡大を防止（小さい画面では幅いっぱいに広がる）。
   子要素は fv-bg ボックス基準の % で配置：
     left% = (artboardX-316)/810 ・ top% = artboardY/811
   ・kv は 112% 幅＋左へ -5% → 画面（帯）外へはみ出す
   ・logo は画面幅連動で小さく
   ・帯は素材から除外済 → 固定CSS帯のみ */
.fv{
  position:relative;
  /* フルブリード：.page の padding-inline(帯幅)を負マージンで相殺。
     width:100vw は使わない（縦スクロールバー幅ぶん溢れて横スクロール＝
     右の謎隙間になるため）。負マージンのみで可視幅(clientWidth)いっぱいに広げる。 */
  width:auto;
  margin-inline:calc(-1 * var(--band-width));
  background:#efeaf7 url("../public/img/fv-fill.webp") center center / cover no-repeat;
  overflow:visible;
}
.fv__stage{
  position:relative;
  /* 合成画像(.fv__main = stage幅の121%・中央)が帯の内側に必ず収まる stage 幅。
     利用可能幅 = 画面幅 − (帯47 + 隙間15)×2 を 1.21 で割る → 画像幅がちょうど帯内側に収まる。
     画面が狭まると比例縮小し、画面外に出ず・帯(z-index:100)にも隠れない。
     広い画面では max-width:810（画像980px）で頭打ち。 */
  width:calc((100% - (var(--band-width) + var(--content-gap)) * 2) / 1.21);
  max-width:810px;           /* fv-bg の原デザインサイズ（PSD 810×811）。これを超えない */
  margin:0 auto;
  aspect-ratio:810 / 811;
  overflow:visible;          /* 合成画像は stage 外へ少しはみ出す（帯内側までは許容） */
}
/* メインビジュアル：渦巻きカード＋キャラ＋ロゴを1枚に合成した素材（原比維持で歪ませない）。
   width:121% ＋ left:-10.5% → 画像中心が stage 中心(=画面中心)に一致（中央配置）。
   画面外/帯への被り防止は stage 幅側で制御（.fv__stage 参照）。 */
.fv__main{
  position:absolute;
  left:-10.5%;
  top:0;
  width:121%;
  max-width:none;            /* 基底 img{max-width:100%} の打消し（>100% を有効化） */
  height:auto;
  z-index:1;
}

/* SP用 1枚画像（縦横比維持・仮なし）。既定は非表示、SPでのみ表示 */
.fv__sp{display:none}

/* ===== セクション共通骨格（DESIGN-NOTES.md 準拠・全セクション再利用）===== */
.section{
  position:relative;
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding-block:var(--gap-section);
  /* 【共通規約】帯とコンテンツの最小15px隙間。FV(.fv)は対象外＝フルブリード維持 */
  padding-inline:var(--content-gap);
}

/* ===== ON SALE / アルバム情報（PC）=====
   設計: グループ720×457。03ONSALE(720×57)→アルバム名→サブスクbanner(692×164)
   を中央寄せで縦積み（gapは設計px: 57→137=80 / 229→293=64） */
.section--album{
  padding-block:45px var(--gap-section);  /* FV下端→y869 ≒ 45px */
  position:relative;
  isolation:isolate;                       /* 背景を z-index:-1 で内包 */
}
/* 05_bg: ON SALE セクション背景。画面幅100%以上・画像下=セクション下・高さ100%以上 */
.section--album::before{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);     /* .page余白を無視し全幅センター */
  bottom:0;                                /* 画像下＝セクション下 */
  width:100vw;min-width:100%;              /* 画面幅100%以上（全ブリード）*/
  height:100%;min-height:100%;             /* セクション高100%以上 */
  background:url(../public/img/onsale-bg.webp) center bottom / cover no-repeat;
  z-index:-1;                              /* コンテンツ背面 */
  pointer-events:none;
}
.album{
  width:min(720px,100%);
  margin-inline:auto;
  text-align:center;
}
.album__onsale{display:block;width:100%}
.album__onsale img{display:block;width:100%;height:auto}
/* アルバム名: テキスト実装。--font-base（heisei-maru-gothic-std）でサイト統一。
   原デザインは商用フォントのため完全踏襲は不可。1・2行目は同サイズ。
   ※キャッチコピーは先方確定待ち（ISSUES.md） */
.album__sub,
.album__title{
  font-family:var(--font-base);
  font-size:30px;font-weight:900;color:var(--c-ink);
  letter-spacing:.02em;line-height:1.1;
}
.album__sub{margin-top:80px}
.album__title{margin-top:4px}

/* ===== CTA（再利用コンポーネント・DESIGN-NOTES.md）=====
   ピンクピル＋濃青縁の背景画像＋中央テキスト重ね。
   PRODUCT/STORE/EVENT/STREAMING でも流用。幅は使用箇所で指定、
   微調整は BEM モディファイア（.cta--xxx）で行う */
.cta{
  position:relative;display:block;
  max-width:100%;margin-inline:auto;
  text-decoration:none;
  transition:transform .2s ease, filter .2s ease;
  will-change:transform;
}
.cta:hover{ transform:translateY(-3px) scale(1.02); filter:brightness(1.05); }
.cta:active{ transform:translateY(-1px) scale(1.0); filter:brightness(.98); }
.cta__pic{display:block;width:100%}
.cta__bg{display:block;width:100%;height:auto}
.cta__text{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.5;
  font-size:20px;font-weight:700;color:var(--c-blue);
}
/* サブスク配信ボタン。container-type を載せてテキストをボタン幅に比例させる
   （PC 692px 想定／中間幅で縮んでもフォントが追随＝改行崩れ防止） */
.album__subsc{width:692px;max-width:100%;margin-top:64px;container-type:inline-size}
/* サブスク配信ボタンのテキスト（背景画像はテキストなし／文字はHTMLで重ね描画）。
   ※書体は --font-base（heisei-maru-gothic-std）。原デザインはこのフォント前提
   ※bg画像は底にドロップシャドウ分の余白（728×179のうち下14pxが影）。flexの
     中央配置だと文字が下にズレるため、画像高比で 3.9% 上方に補正 */
.cta__text--subsc{
  color:#fff;font-weight:800;letter-spacing:.02em;
  line-height:1.35;white-space:normal;word-break:keep-all;
  font-size:calc(100cqw * 28 / 692);
  transform:translateY(-3.9%);
}

/* ===== NEWS =====
   設計(PC,artboard px): 見出し354×103 / パネル1076×300(中身779) /
   date列103 + gap64 + body / more中央。色: パネル#FFFCCF 枠#004BA0 文字#0062B3 リンク#FF99C5
   各要素は最大幅=デザイン、width:100%で画面幅に応じ縮小、中央寄せ。上下隙間はデザインpx */
.section--news{padding-block:120px}
.section__head{margin:0;text-align:center;line-height:0}
.news__head img{
  width:100%;max-width:354px;height:auto;margin-inline:auto;
}
.news__panel{
  position:relative;
  width:100%;max-width:1076px;margin:38px auto 0;  /* 見出し→パネル 38px */
  background:var(--c-panel);
  border:3px solid var(--c-navy);
  border-radius:24px;
  /* テキスト上端→箱上端 = 40px、末テキスト下端→箱下端 = その1.5倍 = 60px。
     more/close は下60px帯に絶対配置し、この距離に算入しない */
  padding:40px clamp(24px,11vw,148px) 60px;
}
/* 行間=設計31px（行自体に余白を持たせず gap で管理＝上下padは設計通り） */
.news__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:31px;
}
.news-row{
  display:grid;
  grid-template-columns:max-content 1fr;             /* 日付は文字幅ぴったり */
  column-gap:64px;                                   /* 設計: 日付↔本文 64px */
  align-items:start;
}
.news-row__date{
  color:var(--c-blue);font-weight:700;font-size:16px;
  font-family:var(--font-base);line-height:1.55;white-space:nowrap;
}
.news-row__body{
  color:var(--c-blue);font-size:16px;line-height:1.55;font-weight:700;
  font-family:var(--font-base);word-break:break-word;
}
.news-row__body strong{font-weight:900}
.news-row__link{color:var(--c-link);font-weight:700;text-decoration:none}
.news-row__link:hover{text-decoration:underline}

/* アコーディオン: more で隠れ3件が下にニュッと展開。閉時は文字を close に */
.news__toggle{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
/* grid-template-rows 0fr→1fr で実コンテンツ高に正確追従＝開閉ともカクつかない */
.news__extra{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s ease;
}
.news__extra-clip{overflow:hidden;min-height:0}   /* グリッド項目=パディング無し→閉時0 */
.news__extra-list{padding-top:31px}               /* 隠れ群との間隔。clip内なので開時のみ可視 */
.news__toggle:checked ~ .news__extra{grid-template-rows:1fr}
/* more/close は下40px帯に絶対配置（テキスト末端→箱下端の対称距離に算入しない） */
.news__more{
  position:absolute;left:0;right:0;bottom:0;height:60px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;
  color:var(--c-blue);font-weight:800;font-size:18px;font-family:var(--font-base);
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.news__more-txt::after{content:"more"}
.news__toggle:checked ~ .news__more .news__more-txt::after{content:"close"}
.news__caret{
  width:0;height:0;border-inline:6px solid transparent;
  border-top:8px solid var(--c-blue);
  transition:transform .3s ease;
}
.news__toggle:checked ~ .news__more .news__caret{transform:rotate(180deg)}
/* news__extra-list が空（=合計3件以下＝more不要）の間は more ボタンを消し、
   下パディングを上と同じ値に揃える（more 用に下60pxを確保していたのを 40px に）。
   4件目以降を .news__extra-list に追加した瞬間に :has() が真→既定の
   padding-bottom 60px（PC）/42px（SP）＋more 表示に自動で戻る */
.news__panel:not(:has(.news__extra-list .news-row)) .news__more{display:none}
.news__panel:not(:has(.news__extra-list .news-row)){padding-bottom:40px}

/* ===== キャッチコピー（NEWS下・白背景。FV同一ロゴ再利用＋lead＋本文）=====
   設計(PC,1440カンプ実測): ロゴ639×226(=fv-logo再利用)中央 /
   ロゴ→lead 59px / lead→本文 38px / 本文行ピッチ60px / 最長行幅≒619px。
   色＝本文青(--c-blue)。lead・本文は先方確定待ちダミー（ISSUES）。
   各要素 最大幅=デザイン・width:100%で縮小・左右中央。上下隙間=デザインpx。
   ※上余白は直前 .section--news の padding-bottom が担保（重複させない）。 */
.section--catch{
  padding-block:0 120px;          /* 下=本文→PRODUCT(クリーム背景)≒120px */
  text-align:center;
}
.catch__logo{margin:0;line-height:0}
.catch__logo img{
  display:block;
  width:100%;max-width:640px;height:auto;margin-inline:auto;  /* 設計639 */
}
.catch__lead{
  margin:59px 0 0;                /* ロゴ→lead 設計59px */
  font-family:var(--font-base);
  font-size:30px;font-weight:900;color:var(--c-blue);
  line-height:1.4;letter-spacing:.02em;
}
.catch__body{
  margin:38px auto 0;             /* lead→本文 設計38px */
  max-width:820px;                /* 先方指定 2026-05-20 */
  font-family:var(--font-base);
  font-size:24px;font-weight:700;color:var(--c-blue);
  line-height:1.8;
  letter-spacing:.02em;
  text-align:left;                /* セクションは center だが本文だけ左寄せ */
}

/* ===== 共通：クリーム地セクション（PRODUCT/TRACK LIST/STORE… 地続きで流用）=====
   地色を 100vw フルブリードで敷く再利用ユーティリティ。新規量産せず本クラスを付与 */
.section--cream{
  position:relative;
  isolation:isolate;
  background:var(--c-bg-section);
}
.section--cream::before{                  /* 地色を画面全幅へ（帯/余白を無視） */
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;background:var(--c-bg-section);
}

/* ===== PRODUCT（DISCOGRAPHY／商品カード×2。地色=.section--cream）=====
   カンプ実測(PC,1440): 見出し518×107 / 本文(ダミー)navy / カード695×408・
   濃紺枠4px・角丸24・白地・カード間43px。COMING SOON=#D6D6D6 正方形画像。
   カード=grid-areas。PC:媒体を左列に全行スパン＋右列に情報。SP(≤800):1列縦積み。
   各要素 最大幅=デザイン・width応じ縮小・左右中央。上下隙間=デザインpx。
   商品情報/本文は先方確定待ち（ISSUES）。 */
.section--product{
  padding-block:100px 110px;
  scroll-margin-top:var(--top-band-h);   /* SP固定上帯ぶんアンカー補正 */
}
/* セクション上端の下向き緩カーブ（カンプ準拠：両端で高く中央が PC≒48/SP≒36px
   下がる谷型）。body地と同色の白ドームをクリーム上端へ重ね谷型に切り欠く。
   border-radius 50%/100% で全幅追従＝レスポンシブ。高さ=谷の深さ */
.section--product::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:clamp(34px,3.4vw,50px);
  background:#fff;
  border-bottom-left-radius:50% 100%;
  border-bottom-right-radius:50% 100%;
}
.product__head img{
  display:block;width:100%;max-width:518px;height:auto;margin-inline:auto;
}
.product__lead{                          /* PRODUCT本文 */
  margin:43px auto 0;max-width:760px;
  font-family:var(--font-base);
  font-size:15px;font-weight:700;color:var(--c-navy);
  line-height:1.8;text-align:left;letter-spacing:.02em;
}
.product__list{
  margin:74px auto 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:43px;
  width:100%;max-width:695px;
}

/* ===== カード共通＋PRODUCTバリアント（STORE/EVENT で variant 流用予定）===== */
.card{
  background:#fff;
  border:4px solid var(--c-navy);
  border-radius:24px;
  text-align:center;
}
.card--product{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "media name"
    "media desc"
    "media bonus"
    "media price"
    "media code"
    "media cta";
  align-items:center;
  column-gap:40px;
  padding:36px;
}
.card__media{grid-area:media;align-self:center;width:280px}
.card__media img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:contain;
}
/* COMING SOON プレースホルダのみグレー背景＋角丸（実ジャケ画像は透過維持） */
.card__media img[src*="coming-soon"]{
  object-fit:cover;background:var(--c-ph);border-radius:4px;
}
.card__name {grid-area:name; margin:0;font-size:24px;font-weight:900;color:var(--c-ink)}
.card__desc {grid-area:desc; margin:14px 0 0;font-size:15px;font-weight:700;color:var(--c-ink);line-height:1.7}
/* 封入特典: ラベル(.card__label) を 2px 大きく＆強めに（コントラスト）、
   下に続く内容は line-height を詰めて近接でグルーピング */
.card__bonus{grid-area:bonus;margin:22px 0 0;font-size:15px;font-weight:700;color:var(--c-ink);line-height:1.5}
.card__label{display:block;font-size:17px;font-weight:900;margin-bottom:3px;letter-spacing:.04em}
.card__price{grid-area:price;margin:18px 0 0;color:var(--c-ink);line-height:1}
.card__price-num{font-size:34px;font-weight:900;letter-spacing:.01em}
.card__price-tax{font-size:14px;font-weight:700;margin-left:3px}
.card__code {grid-area:code; margin:4px 0 0;font-size:13px;font-weight:700;color:var(--c-ink);letter-spacing:.06em}
.card__cta  {grid-area:cta; margin:20px auto 0}

/* CTA ボタン（.cta 再利用＋ピンクピル文字白）。PRODUCT/STORE/EVENT/STREAMING 共通 */
.btn--cta{width:248px;max-width:100%}
.btn--cta .cta__bg{width:100%;height:auto}
.btn--cta .cta__text{
  color:#fff;font-size:18px;font-weight:800;letter-spacing:.04em;
  line-height:1;
  /* 素材画像はピル可視部が画像中央より約 4.5px 左上（影/縁ぶん）。
     画像枠中央寄せだと文字が下に寄って見えるため、影を抜いた楕円本体の
     光学中心へ補正（%指定＝ボタン拡縮に追従）。
     横:-2.5/268≒-0.9%、縦:-4.5/77≒-5.8%（底8px青枠+6px影 vs 上3px青枠+2px隙間） */
  transform:translate(-0.9%,-5.8%);
}

/* ===== TRACK LIST（見出し＋モーダル起動ボタン。地色=.section--cream）=====
   カンプ実測(PC,1440): 見出し595×109 中央 / ボタン614×77 中央・濃紺枠ピル
   （素材=ラベンダーピル形状のみ＝.cta 流用＋白文字＋▶）。
   PRODUCT/STORE と地続きクリームのため上端カーブ無し。
   見出し→ボタン ≒48px。各要素 最大幅=デザイン・width応じ縮小・左右中央。 */
.section--track{
  padding-block:40px 70px;               /* PRODUCT pb(110)＋本pt で実測≒147 */
  scroll-margin-top:var(--top-band-h);
}
.track__head img{
  display:block;width:100%;max-width:595px;height:auto;margin-inline:auto;
}
/* TRACK LIST ボタン：.cta（hover共通）＋<button>リセット＋ラベンダー素材＋白文字 */
.track__btn{
  margin:48px auto 0;                     /* 見出し→ボタン 設計≒48px */
  border:0;padding:0;background:none;font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.btn--track{width:614px;max-width:90vw}
.btn--track .cta__pic,
.btn--track .cta__bg{display:block;width:100%;height:auto}
.btn--track .cta__text{
  color:#fff;font-size:20px;font-weight:800;letter-spacing:.04em;line-height:1;
  /* 素材ラベンダー可視部の光学中心は画像枠中央より上（下右の影/縁ぶん）。
     画像枠中央寄せだと下にズレるため可視部中心へ補正（%＝ボタン拡縮追従）。
     PC素材 614×77 実測: dx -4/614≒-0.65%, dy -6/77≒-7.8% */
  transform:translate(-0.65%,-7.8%);
}
/* テキストのみを中央寄せ（▶は中央計算に含めない＝絶対配置でラベル右へ） */
.btn--track .btn__txt{position:relative}
.btn--track .btn__txt::after{
  content:"";position:absolute;left:100%;top:50%;
  transform:translateY(-50%);margin-left:.55em;
  width:0;height:0;
  border-block:6px solid transparent;
  border-left:9px solid #fff;            /* ▶（CSS三角・白） */
}

/* ===== モーダル共通（TRACK LIST／今後 EVENT。JS制御 src/app.js）=====
   カンプ実測: PC土台912×742クリーム＋白パネル(濃紺枠,角丸) / SP355×568。
   fade=opacity+visibility。薄暗幕=scrim。モーダルは画面高さを超えない
   （dialog max-height:90vh）→ .modal__panel が縦スクロール＝隠れ曲も閲覧。 */
.modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__scrim{position:absolute;inset:0;background:rgba(0,8,40,.55);cursor:pointer}
.modal__dialog{
  position:relative;
  width:min(912px,100%);max-height:90vh;
  display:flex;flex-direction:column;
  background:var(--c-bg-section);
  border-radius:28px;
  padding:28px clamp(20px,4vw,46px) clamp(24px,4vw,46px);
  box-shadow:0 18px 50px rgba(0,8,40,.35);
  transform:translateY(8px);transition:transform .28s ease;
}
.modal.is-open .modal__dialog{transform:none}
.modal__close{
  position:absolute;top:-14px;right:-14px;
  width:60px;height:60px;border:0;padding:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .15s ease;
}
.modal__close:hover{transform:scale(1.08)}
.modal__close img{display:block;width:100%;height:auto}
.modal__head{margin:0;text-align:center;line-height:0}
.modal__head img{width:100%;max-width:430px;height:auto;margin-inline:auto}
.modal__note{
  margin:14px 0 0;text-align:left;
  font-size:13px;font-weight:700;color:var(--c-navy);line-height:1.7;
}
.modal__panel{
  margin-top:20px;flex:1;min-height:0;overflow-y:auto;
  background:#fff;border:3px solid var(--c-navy);border-radius:16px;
  padding:clamp(20px,3vw,40px);-webkit-overflow-scrolling:touch;
  /* カンプ準拠の細い薄グレーバー＋透明トラック。
     ★標準プロパティのみ使用（::-webkit-scrollbar は使わない）。
       理由: webkit カスタムバーは Windows Chrome 等で上下の矢印ボタン
       （三角）が display:none / appearance:none でも残る個体があるため。
       標準スクロールバー(Chromium121+/Edge/Firefox)は構造的に矢印を持たず、
       細い丸みのある薄グレーで意匠も維持できる。 */
  scrollbar-width:thin;
  scrollbar-color:#d6d6d6 transparent;
}
.tracklist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,56px);
}
.tracklist[hidden]{display:none}
.tracklist__item{padding:18px 4px;border-bottom:2px solid var(--c-navy)}
.tracklist__item:nth-last-child(-n+2){border-bottom:0}  /* PC2列：最終行の線を消す */
.tracklist__title{margin:0 0 6px;font-size:17px;font-weight:900;color:var(--c-navy)}
.tracklist__credit{margin:2px 0;font-size:15px;font-weight:700;color:var(--c-navy);line-height:1.6}
/* TRACK LIST「後日公開」プレースホルダ。先方からの収録曲確定で .tracklist の
   hidden を外し、この行を hidden にする */
.tracklist__pending{
  margin:48px 0;text-align:center;
  font-size:32px;font-weight:900;color:var(--c-navy);letter-spacing:.08em;
}
/* ===== TRACK LIST モーダル: Disc1 / Disc2 グループ表示 =====
   Disc1 は「後日情報解禁」、Disc2 は初回限定収録の2曲（クレジット非表示）。 */
.tracklist-discs{display:flex;flex-direction:column;gap:32px;margin:8px 0 16px}
.tracklist-disc{padding:0}
.tracklist-disc__head{
  margin:0 0 12px;font-size:22px;font-weight:900;color:var(--c-navy);
  letter-spacing:.04em;border-bottom:2px solid var(--c-navy);padding-bottom:8px;
}
.tracklist-disc__note{
  margin-inline-start:8px;font-size:15px;font-weight:700;letter-spacing:0;
}
.tracklist-disc__pending{
  margin:24px 0;text-align:center;
  font-size:24px;font-weight:900;color:var(--c-navy);letter-spacing:.08em;
}
@media (max-width:499px){
  .tracklist-disc__head{font-size:19px}
  .tracklist-disc__note{display:block;margin:4px 0 0;font-size:13px}
  .tracklist-disc__pending{font-size:20px;margin:16px 0}
}

/* ===== STORE（販路カード×7。地色=.section--cream。枠なしカード）=====
   カンプ実測(PC): 見出し384×105 / COMING SOON≒300正方形 / 2列・中央。
   store-card=grid-areas。PC=縦積み(media→logo→name→product→note→btn×2)。
   SP(≤800)=name上＋(media|logo/product/note)＋btnフル幅。
   店舗名/ロゴはSPEC支給、商品名/注釈/購入リンクは先方確定待ち（ISSUES）。 */
.section--store{padding-block:40px 90px;scroll-margin-top:var(--top-band-h)}
.store__head img{display:block;width:100%;max-width:384px;height:auto;margin-inline:auto}
/* STORE 見出し直下の画像一覧は EVENT と全く同じ仕様（.event__list を流用）。
   専用スタイルは持たせない（EVENT 側の変更が自動で反映される）。 */
.store__list{
  margin:56px auto 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,330px));
  justify-content:center;             /* 列を内容幅に＝カンプの列間≒80pxを再現 */
  column-gap:80px;row-gap:64px;
}
.store-card{
  display:grid;grid-template-columns:1fr;
  grid-template-areas:"media" "logo" "name" "product" "note" "btnA" "btnB";
  justify-items:center;text-align:center;
}
.store-card__media{grid-area:media;width:100%;max-width:300px}
.store-card__media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--c-ph);border-radius:4px}
.store-card__logo{
  /* 全カードのロゴ枠高を統一＝以降の要素中央ラインが横一列に揃う。
     最も高いロゴ(HMV/楽天/セブン: 84px @width220)を内包する88pxに固定。
     ロゴ画像は枠内で上下中央配置（flex center） */
  grid-area:logo;margin-top:18px;width:100%;max-width:220px;height:88px;
  display:flex;align-items:center;justify-content:center;
}
.store-card__logo img{display:block;width:100%;height:auto;object-fit:contain}
.store-card__name{grid-area:name;margin:14px 0 0;font-size:18px;font-weight:900;color:var(--c-ink)}
.store-card__product{grid-area:product;margin:14px 0 0;font-size:15px;font-weight:900;color:var(--c-ink);line-height:1.5}
/* 特典カード内: [特典名] と [（全X種…）] は近接でグルーピング。
   [特典1] と [特典2] のブロック間は余白を広く（近接の原則） */
.bonus-item{margin:0}
.bonus-item + .bonus-item{margin-top:10px}             /* ブロック間は離す */
.bonus-item__name{display:block;line-height:1.35}      /* 特典名 */
.bonus-item__detail{display:block;line-height:1.35;font-size:.92em;font-weight:700} /* 数量はやや小さく＝コントラスト */
.store-card__note{grid-area:note;margin:4px 0 0;font-size:12px;font-weight:700;color:var(--c-ink);line-height:1.5}
.store-card__btn{grid-area:btnA;margin-top:16px}
.store-card__btn--reg{grid-area:btnB;margin-top:12px}
.btn--store{width:200px;max-width:100%}
.btn--store .cta__pic,.btn--store .cta__bg{display:block;width:100%;height:auto}
.btn--store .cta__text{
  color:#fff;font-size:15px;font-weight:800;letter-spacing:.02em;line-height:1;
  /* 素材ピル可視部の光学中心補正（実測 dx -2.5/178, dy -9.8% / %=拡縮追従） */
  transform:translate(-2.5%,-9.8%);
}
/* 注意書き：中央寄せの白い角丸ボックス（中の文は左寄せ）。枠線なし＝カンプ準拠 */
.store__notes{
  margin:64px auto 0;max-width:720px;
  background:#fff;border-radius:32px;
  padding:36px clamp(28px,5vw,64px);
  text-align:left;
  font-size:13px;font-weight:700;color:var(--c-ink);line-height:1.95;
}
.store__notes p{margin:0}

/* ===== bg装飾（16_左装飾/17_右装飾。PCのみ。PRODUCT〜STORE）=====
   カンプ実測: 幅=デザインpx(左267/右246)・上端=PRODUCT起点から(左156/右359)px・
   画像中心と画面中心の距離=左 -489.5 / 右 +522 px。
   .deco-zone(position:relativeのみ・overflow無し＝.section--cream::before の
   100vwフルブリード維持)。.deco は top:OFFSET〜bottom:0＋overflow:hidden で
   ラッパ下端(=STORE下端)にクリップ＝「STORE下にはみ出す分は非表示」。
   側マージン配置でクリック透過。装飾はPCのみ（≤1023px非表示）。 */
.deco-zone{position:relative}
.deco{
  position:absolute;left:50%;bottom:0;
  overflow:hidden;pointer-events:none;z-index:1;
}
.deco img{display:block;width:100%;height:auto}
.deco--l{width:267px;top:156px;transform:translateX(calc(-50% - 509.5px))}  /* 設計-489.5 から外側へ+20px */
.deco--r{width:246px;top:359px;transform:translateX(calc(-50% + 522px))}
@media (max-width:1023px){ .deco{display:none} }   /* 散らし装飾はPCのみ */

/* ===== 18_bg を2分割 =====
   ①星ライン(上)＝STORE下端の背景（::after・クリーム＋白星・不透明）。
   ②ギザギザ欠けライン(下)＝EVENT上端の装飾（.section--event::after）。
   STORE のクリーム(.section--cream::before)は bottom:0 のまま（停止しない）。
   PC: 星 1441×196 / ギザ 1441×104（合計300）。SP: 星 438×109 / ギザ 438×31。 */
.section--store::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;transform:translateX(-50%);bottom:0;
  width:100vw;height:calc(100vw * 196 / 1441);
  background:url(../public/img/deco-bottom.webp) center bottom / 100% 100% no-repeat;
}

/* ===== EVENT/CAMPAIGN/STREAMING 斜めシマ背景（CSSのみ・画像不要）=====
   カンプ実測: 周期≒75px（白≒59px＋薄ラベンダー≒16px）/ 傾き≒130deg。
   ★段差防止: シマは .stripe-zone（EVENT〜STREAMINGを内包）の ::before に
   1枚の連続パターンとして敷く。各 .section--stripe は地を透明にして
   ゾーンのシマを透過させる＝セクション境界で位相がズレず段差が出ない。 */
.stripe-zone{position:relative;isolation:isolate;background:var(--c-bg-stripe-a)}
.stripe-zone::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;
  background:repeating-linear-gradient(
    130deg,
    var(--c-bg-stripe-a) 0, var(--c-bg-stripe-a) 59px,
    var(--c-bg-stripe-b) 59px, var(--c-bg-stripe-b) 75px);
}
/* セクション自身は地を持たず（透明）、ゾーンの連続シマを透過。
   位置/重なり制御のため stacking context は維持 */
.section--stripe{position:relative;isolation:isolate;background:transparent}

/* ===== EVENT（斜めシマ背景。カード×5。画像クリックでライトボックス）=====
   カンプ実測(PC): 見出し382×104 / グレー長方形 331×186(≒16:9) 2列・列間≒24px /
   詳細はこちらbtn 281×56。グレー長方形=画像差替前提プレースホルダ。 */
/* EVENT 上端＝18_bg の「ギザギザ欠けライン」を ::after で装飾配置。
   シマ背景(::before)の上に重なり、欠け（透過）からシマが透ける。
   content がギザに被らないよう padding-top にギザ高さを加算。 */
.section--event{
  padding-top:calc(60px + 100vw * 104 / 1441);
  padding-bottom:80px;
  scroll-margin-top:var(--top-band-h);
}
.section--event::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;transform:translateX(-50%);top:0;
  width:100vw;height:calc(100vw * 104 / 1441);
  background:url(../public/img/event-top.webp) center top / 100% 100% no-repeat;
}
.event__head img{display:block;width:100%;max-width:382px;height:auto;margin-inline:auto}
.event__lead{
  margin:32px auto 0;max-width:760px;text-align:left;
  font-family:var(--font-base);font-size:15px;font-weight:700;
  color:var(--c-navy);line-height:1.8;letter-spacing:.02em;
}
.event__list{
  margin:68px auto 68px;padding:0;list-style:none;   /* 上 +20px(48→68) / 下マージン 68px */
  display:grid;grid-template-columns:repeat(2,minmax(0,360px));
  justify-content:center;column-gap:24px;row-gap:52px;
}
.event-card{display:flex;flex-direction:column;align-items:center}
.event-card__fig{
  position:relative;display:block;width:100%;
  border:0;padding:0;background:none;cursor:zoom-in;line-height:0;
  -webkit-tap-highlight-color:transparent;
  transition:filter .2s ease;
}
/* プレースホルダ画像のみ（:not で ズームアイコンimg を除外＝かすれ帯バグ修正） */
.event-card__fig>img:not(.event-card__zoom){
  display:block;width:100%;aspect-ratio:331/186;object-fit:cover;
  background:var(--c-ph);border-radius:6px;
}
.event-card__fig:hover{filter:brightness(.97)}
/* プラスの虫眼鏡マーク（素材=ピンク⊕）右下に小さく表示 */
.event-card__zoom{
  position:absolute;right:12px;bottom:12px;width:21px;height:21px;  /* 32の約2/3 */
  transition:transform .15s ease;
}
.event-card__fig:hover .event-card__zoom{transform:scale(1.12)}
.event-card__btn{margin-top:16px}
.btn--detail{width:281px;max-width:100%}
.btn--detail .cta__pic,.btn--detail .cta__bg{display:block;width:100%;height:auto}
.btn--detail .cta__text{
  color:#fff;font-size:16px;font-weight:800;letter-spacing:.04em;line-height:1;
  /* 素材ピル可視部の光学中心補正（実測 dx -1.78%, dy -10.7%） */
  transform:translate(-1.8%,-10.7%);
}
.event__note{
  margin:48px auto 0;max-width:900px;text-align:center;
  font-size:13px;font-weight:700;color:var(--c-navy);line-height:1.7;
}

/* ===== ライトボックス（EVENT 画像拡大。.modal 拡張＝fade/scrim/Esc 共通）=====
   画像のみ＋左右◀▶＋右上グレー薄×（CSS）。薄暗幕は .modal__scrim。 */
.lightbox__dialog{
  background:none;box-shadow:none;border-radius:0;
  padding:0;max-width:min(1100px,92vw);max-height:86vh;
}
.lightbox__img{
  display:block;max-width:100%;max-height:86vh;width:auto;height:auto;
  margin-inline:auto;border-radius:6px;background:var(--c-ph);
}
.lightbox__close{
  position:absolute;top:-44px;right:0;
  width:34px;height:34px;border:0;padding:0;cursor:pointer;
  background:rgba(120,120,120,.55);border-radius:999px;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease;
}
.lightbox__close::before,.lightbox__close::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;
  background:#fff;border-radius:2px;
}
.lightbox__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.lightbox__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lightbox__close:hover{background:rgba(90,90,90,.7)}
/* 左右ナビ矢印は仕様により廃止（単体表示） */

/* ===== CAMPAIGN（斜めシマ背景。見出し＋本文＋青枠白角丸box）=====
   カンプ実測(PC): 見出し590×103 / box 693幅・濃紺枠・中央。内容ダミー(ISSUES)。
   box=DESIGN-NOTES §3 共通青枠角丸box（NEWS/STORE注意/TRACKモーダルと統一）。 */
.section--campaign{padding-block:50px 80px;scroll-margin-top:var(--top-band-h)}
.campaign__head img{display:block;width:100%;max-width:590px;height:auto;margin-inline:auto}
/* 枠外テキストは無し。box が見出し直下に来る */
.campaign__box{
  margin:36px auto 0;width:100%;max-width:693px;
  background:#fff;border:3px solid var(--c-navy);border-radius:24px;
  padding:clamp(26px,4vw,44px);
}
.campaign__box::after{content:"";display:block;clear:both}  /* フロート解除 */
/* box先頭＝大きいテキスト */
.campaign__intro{
  margin:0 0 24px;font-size:22px;font-weight:900;color:var(--c-navy);
  line-height:1.7;letter-spacing:.02em;
}
.campaign__thumb{margin:24px 0}
.campaign__thumb img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--c-ph);border-radius:6px;
}
/* 2つ目画像：PCは右フロート→続くテキストが左へ回り込む（横並び） */
.campaign__thumb--side{
  float:right;width:45%;margin:6px 0 16px 28px;
}
.campaign__thumb--side img{aspect-ratio:1/1}
.campaign__item{margin-top:22px}
.campaign__item:first-of-type{margin-top:0}
.campaign__item--clear{clear:both}
.campaign__label{
  margin:0 0 4px;font-size:16px;font-weight:900;color:var(--c-navy);
}
.campaign__text{
  margin:0;font-size:14px;font-weight:700;color:var(--c-navy);line-height:1.85;
}

/* ===== STREAMING（斜めシマ背景。見出し＋本文＋配信CTA）=====
   カンプ実測(PC): 見出し630×107 / btn 373×76。内容/遷移先は先方確定待ち。 */
.section--stream{padding-block:50px 70px;scroll-margin-top:var(--top-band-h);isolation:isolate}
.stream__head img{display:block;width:100%;max-width:630px;height:auto;margin-inline:auto}
/* 本文＝カンプ実測: 約30px・行ピッチ60px(lh2)・中央・最長行≒589px */
.stream__lead{
  /* 左右マージン削除＝セクション幅いっぱい使用（PC指示 2026-05-20） */
  margin:32px 0 0;text-align:center;
  font-family:var(--font-base);font-size:30px;font-weight:700;
  color:var(--c-navy);line-height:2;letter-spacing:.02em;
}
/* PC(≥900px) では「すたぽらカバーアルバム」直後の改行は不要（先方指示）。
   <900px で改行表示＋フォント縮小に切替（独自ブレークポイント／他は499pxのSP一括） */
.stream__lead-br-sp{display:none}
@media (max-width:899px){
  .stream__lead{
    font-size:clamp(17px,3.4vw,29px);line-height:1.8;
    margin-top:24px;max-width:none;
  }
  .stream__lead-br-sp{display:inline}
}
.stream__btn{margin:36px auto 0}
.btn--stream{width:373px;max-width:90vw}
.btn--stream .cta__pic,.btn--stream .cta__bg{display:block;width:100%;height:auto}
.btn--stream .cta__text{
  color:#fff;font-size:18px;font-weight:800;letter-spacing:.04em;line-height:1;
  /* 素材ピル可視部の光学中心補正（実測 dx -1.07%, dy -7.24%） */
  transform:translate(-1.1%,-7.2%);
}

/* ===== ロゴ_SNS ＋ フッター最下層 =====
   ロゴ_SNS: ぼかし背景を center bottom/cover（画像下端＝セクション下端揃え）。
   各ロゴはpx指定。site-footer は左右帯(z100)より前面＝footerで帯が消える。 */
/* ロゴ_SNS では左右帯を表示（他セクション同様）。帯を消すのは
   フッター最下層(.footbar)のみ＝そちらに z-index を持たせる */
.site-footer{position:relative}
/* 末尾ぼかし背景ゾーン：STREAMING〜ロゴSNS を1枚の連続ぼかし背景で内包。
   .stripe-zone と同じ「::before 100vw フルブリード」手法で帯/余白を無視。
   画像は center bottom / 100% auto＝白い上部がSTREAMINGに、色味の下部がロゴSNSに連続。
   最下部 .footbar(#B4B3F7) が画像下端を覆い、ロゴSNSで色味が見える。 */
.endbg{
  position:relative;isolation:isolate;
  background:#efeaf7;
  padding-inline:var(--band-width);   /* STREAMINGを左右帯に被せない（.page と同等の内側余白）。SPで0に上書き */
}
.endbg::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;transform:translateX(-50%);  /* .page余白を無視し全幅センター */
  bottom:0;                              /* 画像下端＝ゾーン下端を揃える */
  width:100vw;min-width:100%;            /* 幅は常に100%以上（狭幅でも痩せない）*/
  height:100%;min-height:100%;           /* 高さは常にゾーン100%以上（足りない隙間を作らない）*/
  background:url(../public/img/footer-bg.webp) center bottom / cover no-repeat;
}
/* フッターは従来通り全幅ブリード（.endbg の内側余白を相殺）*/
.endbg > .site-footer{width:100vw;margin-inline:calc(50% - 50vw)}

.logosns{
  position:relative;
  background:transparent;            /* 背景は .endbg::before の連続ぼかしへ移譲 */
  text-align:center;padding:56px 16px 64px;
}
.logosns__title{display:block;width:560px;max-width:78%;height:auto;margin:0 auto}
.logosns__x{display:inline-block;margin-top:22px;line-height:0;transition:transform .15s ease}
.logosns__x:hover{transform:scale(1.1)}
.logosns__x img{width:30px;height:auto;display:block}
.logosns__brands{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:36px}
.logosns__stpl{height:64px;width:auto;display:block}
.logosns__vo{height:30px;width:auto;display:block}
/* 帯が消えるのはフッター最下層のみ＝ここを左右帯(z100)より前面に */
.footbar{position:relative;z-index:101;background:#B4B3F7;color:#fff;text-align:center;padding:34px 16px 40px}
.footbar__ttl{margin:0;font-size:15px;font-weight:800;letter-spacing:.04em}
.footbar__note{margin:18px 0 0;font-size:13px;font-weight:700;line-height:1.7}
.footbar__copy{margin:22px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em}
/* SP 画面下部の帯（.top-rail と同仕様・SPのみ表示） */
.bottom-rail{display:none}

/* ===== 500〜1023px（タブレット〜ナローPC）=====
   PC表示ルールを 500px まで適用。最小幅は設けず、メイン画像・ロゴとも
   stage に対する % のまま画面幅と一緒に縮小（基底ルールでそのまま成立）。
   側面帯は左右に残す（PCと同じ＝base のまま）。特別な上書きは不要。 */

/* ===== SP（〜499px）=====
   499px 以下で SP 専用へ切替。
   ・側面帯は出さず、上部帯（CSSテキスト・右→左）を表示
   ・FVは縦横比維持の1枚画像（SPカンプ・仮あり確定）に差し替え
   ・固定上部帯のぶん本文を下げる */
@media (max-width:499px){
  .side-rail{display:none}
  .top-rail{display:block}
  .page{padding-inline:0;padding-top:var(--top-band-h)}
  .endbg{padding-inline:0}            /* SPは左右帯なし＝内側余白不要・全幅 */
  .endbg::before{background-image:url(../public/img/footer-bg-sp.webp)}  /* SP専用ぼかし背景（仕様はPCと同じ：cover/下端揃え/min100%）*/
  /* SP上部帯のみ文字の流れる向きを逆（右→左）に。下部帯は従来のまま */
  .top-rail .top-rail__track{animation-direction:reverse}

  /* SP 画面下部の帯：画面最下部に固定（従来仕様）＋Z座標はフッターより前面
     （footbar z101 より上＝帯がフッターに隠れず最前で見える）。
     固定帯ぶん footer 末尾に余白を確保し © が隠れないようにする。
     上部 .top-rail と同意匠（白＋上下青ライン＋スクロール） */
  .bottom-rail{
    display:block;position:fixed;bottom:0;left:0;right:0;
    height:var(--top-band-h);z-index:102;overflow:hidden;
    background:#fff;pointer-events:none;
    border-top:2px solid #0062B3;border-bottom:2px solid #0062B3;
  }
  .site-footer{padding-bottom:var(--top-band-h)}
  /* ロゴ_SNS（SP縮小・px指定を相対化） */
  .logosns{padding:40px 16px 48px}
  .logosns__title{width:auto;max-width:74vw}
  .logosns__brands{gap:24px;margin-top:22px}
  .logosns__stpl{height:48px}
  .logosns__vo{height:24px}
  .footbar{padding:28px 16px 34px}
  /* SPは .page padding 0・帯非表示。フルブリード負マージンを解除して全幅 */
  .fv{overflow:visible;width:100%;margin-inline:0}
  .fv__stage{display:none}
  .fv__sp{display:block;width:100%;height:auto}  /* 縦横比維持で乗せる */

  /* ===== ON SALE / アルバム情報（SP・PCと同要領／SPデザイン375基準）=====
     各要素を同一ブロック(375)の比率で指定＝相対バランス不変 */
  .section--album{padding-block:60px 90px}
  .section--album::before{
    background-image:url(../public/img/onsale-bg-sp.webp);  /* SP専用05_bg */
  }
  /* ON SALE・サブスクは幅100%（.section の左右15pxで画面端からpadding確保）。
     アルバム名は .album 幅基準の cqw でデザイン比(名前22 : ONSALE324)を維持
     → どの画面幅でも上記2要素と同じ比率で可変 */
  .album{width:100%;container-type:inline-size}
  .album__onsale{width:100%;margin-inline:auto}
  .album__subsc{width:100%}
  .album__sub,
  .album__title{font-size:calc(100cqw * 22 / 324)}   /* デザイン比 名前/ONSALE幅 */
  .album__sub{margin-top:calc(100cqw * 71 / 324)}    /* 余白もデザイン比で連動 */
  .album__title{margin-top:calc(100cqw * 6 / 324)}
  .album__subsc{margin-top:calc(100cqw * 53 / 324)}
  /* サブスクボタンの文字サイズは .album__subsc 自身のコンテナクエリ（28/692）で
     ボタン幅に比例。SP固有の上書きは不要＝同じ比率で縮小される */

  /* キャッチ: 下余白のみ調整。縮小・中央寄せ・はみ出し防止は下記 800px
     共有BPの clamp/min が ≤499 も含めて担保（container-query は使わない＝堅牢） */
  .section--catch{padding-block:0 60px}

  /* TRACK LIST ボタン：SP素材(329×58)は可視部偏りが PC と異なるため
     ≤499 で補正値差し替え。実測 dx -4.5/329≒-1.37%, dy -5.5/58≒-9.5% */
  .btn--track .cta__text{transform:translate(-1.37%,-9.5%)}

  /* STORE ボタン：SP素材(329×55)の可視部中心補正。実測 dx -1.22%, dy -10% */
  .btn--store .cta__text{transform:translate(-1.2%,-10%)}

  /* 18_bg分割：SP星ライン(14_bg下部 438×109)へ差し替え（ギザはEVENT側） */
  .section--store::after{
    height:calc(100vw * 109 / 438);
    background-image:url(../public/img/deco-bottom-sp.webp);
  }

  /* 詳細はこちら：SP素材(329×56)の可視部中心補正 */
  .btn--detail .cta__text{transform:translate(-1.4%,-10.7%)}

  /* デジタル配信：SP素材(330×55)の可視部中心補正 */
  .btn--stream .cta__text{transform:translate(-1.2%,-10%)}
}

/* ===== 共有セクション・ブレークポイント: 800px =====
   セクション内レイアウトの PC↔縦積み切替。NEWS 以降の各セクションで共有。
   ※デバイス系（左右帯/上帯/FV/アルバムSP画像）は別途 499px のまま */
@media (max-width:800px){
  /* NEWS: 日付を本文の上に積む。パネルは流動（base max1076・中央のまま） */
  .section--news{padding-block:72px}
  .news__head img{max-width:280px}
  .news__panel{margin-top:24px;border-radius:18px;padding:28px clamp(16px,5vw,48px) 42px}
  /* SP: more 非表示時は下パディング 42→28 に縮める（上と同値） */
  .news__panel:not(:has(.news__extra-list .news-row)){padding-bottom:28px}
  .news__list{gap:24px}
  .news__extra-list{padding-top:24px}
  .news-row{grid-template-columns:1fr;column-gap:0;row-gap:8px}
  .news-row__date{font-size:14px}
  .news-row__body{font-size:15px;line-height:1.6}
  .news__more{height:42px;font-size:16px}

  /* キャッチ: 単列のまま流動縮小（最大=設計px / vw連動で縮小 / 左右中央 /
     画面幅を超えない）。下余白も NEWS と連動 */
  .section--catch{padding-block:0 72px}
  .catch__logo img{max-width:min(640px,84vw)}
  .catch__lead{font-size:clamp(20px,3.4vw,30px);margin-top:clamp(34px,6vw,59px);line-height:1.4}
  .catch__body{
    /* PC 24px に合わせて上限24px。SP 375px時 ~15px、最小15px担保 */
    font-size:clamp(15px,3.8vw,24px);
    margin-top:clamp(22px,4vw,38px);
    max-width:min(820px,88vw);
    line-height:1.7;
    /* PC同様 左寄せ */
    text-align:left;
  }

  /* PRODUCT: カード1列縦積み（SPデザイン順 name→desc→media→bonus→price→code→cta）。
     媒体=正方形フル幅。見出し/本文/余白は流動縮小（最大=設計px） */
  .section--product{padding-block:72px 84px}
  .product__head img{max-width:min(518px,70vw)}
  .product__lead{
    font-size:clamp(13px,2.6vw,15px);
    margin-top:clamp(28px,5vw,43px);max-width:88vw;
  }
  .product__list{margin-top:clamp(40px,8vw,74px);gap:clamp(24px,5vw,43px)}
  .card--product{
    grid-template-columns:1fr;
    grid-template-areas:"name" "desc" "media" "bonus" "price" "code" "cta";
    column-gap:0;padding:clamp(20px,5vw,36px);
  }
  .card__media{width:100%;margin:18px auto 0}        /* 盤名/本文→媒体 */
  .card__name{font-size:clamp(20px,4.4vw,24px)}
  .card__desc{margin-top:12px}
  .card__bonus{margin-top:18px}
  .card__price-num{font-size:clamp(28px,6vw,34px)}
  .card__cta{margin-top:18px}

  /* TRACK LIST: 単列のまま流動縮小（最大=設計px / 中央 / 画面幅を超えない） */
  .section--track{padding-block:24px 48px}
  .track__head img{max-width:min(595px,72vw)}
  .track__btn{margin-top:clamp(28px,5vw,48px)}
  .btn--track{width:min(420px,84vw)}
  /* SP下限は購入はこちら(.btn--cta=18px固定)と文字サイズを揃える */
  .btn--track .cta__text{font-size:clamp(18px,3.4vw,20px)}

  /* モーダル: 1列化（SPデザイン）。閉じる/見出し/余白も縮小 */
  .modal{padding:16px}
  .modal__dialog{border-radius:22px;padding:24px 16px 20px}
  .modal__close{width:44px;height:44px;top:-10px;right:-10px}
  .modal__head img{max-width:240px}
  .modal__note{font-size:12px;margin-top:12px}
  .modal__panel{padding:20px 16px}
  .tracklist{grid-template-columns:1fr;column-gap:0}
  .tracklist__item{border-bottom:2px solid var(--c-navy)}      /* 1列：通常境界 */
  .tracklist__item:nth-last-child(-n+2){border-bottom:2px solid var(--c-navy)}
  .tracklist__item:last-child{border-bottom:0}

  /* STORE: 1列。カード内は SPデザイン＝店名上＋(media|logo/product/note)＋btnフル幅 */
  .section--store{padding-block:24px 64px}
  .store__head img{max-width:min(380px,62vw)}
  .store__list{grid-template-columns:1fr;row-gap:48px;margin-top:clamp(36px,7vw,56px);max-width:480px}
  .store-card{
    grid-template-columns:clamp(150px,44vw,210px) 1fr;  /* mediaを要素の約半分に */
    grid-template-areas:"name name" "media logo" "media product" "media note" "btnA btnA" "btnB btnB";
    column-gap:16px;justify-items:stretch;text-align:left;align-items:start;
  }
  .store-card__name{justify-self:center;text-align:center;margin:0 0 14px;font-size:clamp(17px,4.8vw,20px)}
  .store-card__media{max-width:none;width:100%;margin:0}   /* 列幅いっぱい＝約半分 */
  .store-card__logo{justify-content:flex-start;margin-top:0;max-width:160px;min-height:0}
  .store-card__product{margin:14px 0 0;text-align:left}
  /* SP: 数量(全X種…)は 13px に縮小（先方指示 2026-05-20） */
  .bonus-item__detail{font-size:13px}
  .store-card__note{margin:4px 0 0;text-align:left}
  .store-card__btn{width:100%;max-width:300px;justify-self:center;margin-top:16px}
  .store-card__btn--reg{width:100%;max-width:300px;justify-self:center;margin-top:10px}
  .btn--store{width:100%;max-width:300px}
  .store__notes{margin-top:48px;font-size:11px}

  /* ★セクション見出し SP統一：アセット高さはほぼ均一(103〜109px)だが、
     各 .xxx__head が横幅基準のため語長差で見た目の高さがバラつく
     （特に TRACK LIST が小さく見える）。SP は高さ基準で一律に揃える。
     PC は各 .xxx__head の max-width を維持（PCは問題なし）。
     本ルールは @800 末尾＝後勝ちで per-section 指定を上書き。 */
  .section__head img{
    display:block;width:auto;height:clamp(46px,12.5vw,68px);
    max-width:92vw;margin-inline:auto;
  }

  /* EVENT: 1列。本文/カード/余白を流動縮小 */
  .section--event{
    padding-top:calc(36px + 100vw * 31 / 438);
    padding-bottom:56px;
  }
  .section--event::after{
    height:calc(100vw * 31 / 438);
    background-image:url(../public/img/event-top-sp.webp);
  }
  .event__lead{font-size:clamp(13px,2.6vw,15px);margin-top:24px;max-width:88vw}
  /* SP: 1列・画像間ギャップ24px・上 +10px / 下マージン 42px */
  .event__list{grid-template-columns:1fr;row-gap:24px;margin:calc(clamp(32px,7vw,48px) + 10px) auto 42px;max-width:460px}
  .event-card__btn{margin-top:14px}
  /* SP: 画像拡大（ライトボックス）を無効化＋右下プラスアイコン非表示（EVENT/STORE共通） */
  .event-card__fig{pointer-events:none;cursor:default}
  .event-card__zoom{display:none}
  .event__note{font-size:12px;margin-top:36px}
  .lightbox__close{width:30px;height:30px;top:-40px}

  /* CAMPAIGN: 単列のまま流動縮小（box幅は460で揃える） */
  .section--campaign{padding-block:24px 56px}
  .campaign__box{margin-top:clamp(28px,6vw,40px);max-width:460px}
  .campaign__intro{font-size:clamp(17px,4.4vw,22px);margin-bottom:18px}
  .campaign__thumb--side{float:none;width:100%;margin:24px 0}  /* SPは縦積み */
  .campaign__label{font-size:15px}
  .campaign__text{font-size:13px}

  /* STREAMING: 流動縮小 */
  .section--stream{padding-block:24px 48px}
  /* stream__lead は独自ブレークポイント(900px)で別途定義。SP一括(499px)では指定しない */
  .stream__btn{margin-top:28px}
  .btn--stream{width:min(330px,84vw)}
  .btn--stream .cta__text{font-size:clamp(15px,3.4vw,18px)}
}

/* 注: 以前ここで prefers-reduced-motion:reduce 時にレール帯のアニメを
   停止していたが、装飾ブランド帯のスクロールはデザイン要件のため
   OS「動きを減らす」設定下でも動かす（停止対象から除外）。
   ※他に動的要素が無いため reduced-motion の実害なし。低速・連続の
     穏やかなマーキーで vestibular 影響は限定的。 */