/* ============================================================
   Cabocia HP刷新 v2 — メディアステージ骨格 (W-1)
   トークン正本: strategy/hp-renewal/hp-renewal-design.md §2.1
   参照実装: strategy/hp-renewal/prototype/index.html
   命名: 既存 base.html の汎用クラス(.reveal/.wrap/.eyebrow 等)との衝突回避のため
         このファイルの全クラス/ID は hp- prefix で統一する
   ============================================================ */
:root{
  --hp-deep:#070B1F; --hp-deep2:#0B1029; --hp-navy:#1E2761; --hp-navy-d:#151B47;
  --hp-cyan:#0891B2; --hp-cyan-l:#67E8F9; --hp-cyan-b:#22D3EE;
  --hp-ink:#EAF0FF; --hp-dim:#9BA6CE; --hp-faint:#5E679A; --hp-dline:rgba(255,255,255,.12);
  /* カボシアの暖(ロゴ実測 #F0831A) = 人の行動点(CTA/インタラクション)専用。
     シアンは計測光=データの証明に限定する(色の役割分担、koike-design-language §2.4-2、
     2026-07-08 小池裁定「ボタンが薄い青=カボシアカラーでない」起点) */
  --hp-amber:#F0831A; --hp-amber-h:#F49919;
}

body.hp-stage-page{background:var(--hp-deep)}
body.hp-stage-page .hp-num{font-variant-numeric:tabular-nums}
body.hp-stage-page #hp-root a{color:inherit;text-decoration:none}
body.hp-stage-page #hp-root img,
body.hp-stage-page #hp-root svg,
body.hp-stage-page #hp-root canvas,
body.hp-stage-page #hp-root video{max-width:100%;display:block}

/* ---------- ヘッダー: ダーク面⇄白基調 自動切替 (骨格側の最小実装、意匠はW-2で仕上げ) ---------- */
body.hp-stage-page #site-header{background:transparent;box-shadow:none}
body.hp-stage-page #site-header.hp-nav-light{
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
/* ヘッダーは常時白基調(base.htmlのインラインbg)のため、ロゴ・ナビは base.html の暗色
   (黒ロゴ + gray-700 hover:black)をそのまま使う。旧: ダーク面前提の白ロゴfilter +
   --hp-dim/--hp-ink ナビは白ヘッダーで不可視(ホバーで消える)ため撤去 */
/* Contact CTAはbase.html側で常時bg-[#F0831A]/text-[#0B1029](=--hp-amber/--hp-deep2と同値)に
   統一済み(W-13、色役割分担の完全適用)。背景は上のnav a{color}ルールと競合しないため無指定で
   足りるが、文字色は上記nav a{color:var(--hp-dim)!important}の方が詳細度が高く負けてしまう
   ため、Contactリンクだけ明示的に上書きして正しい暗色を保つ */
body.hp-stage-page #site-header:not(.hp-nav-light) nav a[href="/contact"]{color:var(--hp-deep2)!important}
body.hp-stage-page #site-header:not(.hp-nav-light) #mobile-menu-btn{color:var(--hp-deep2)}
body.hp-stage-page #site-header:not(.hp-nav-light) #mobile-menu-btn svg{color:var(--hp-deep2)}
/* JS無効時のフォールバック: ヘッダーは常に白基調のまま(機能上問題なし、意匠のみ妥協) */
html:not(.hp-js) body.hp-stage-page #site-header{background:rgba(255,255,255,.95)}

/* ---------- 固定メディアステージ ---------- */
/* overflow:hidden: 5DB章の .hp-ch-imgwrap は scale(1.1) を常時適用するため(見切れ防止の
   ノブ、prismplane-making-notes §4)、はみ出し分をここでクリップして横スクロール0を保証する */
#hp-stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--hp-deep);overflow:hidden}
#hp-stage .hp-scene{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
#hp-stage .hp-scene.on{opacity:1}
#hp-stage .hp-ph-tag{position:absolute;right:18px;bottom:18px;z-index:3;
  font-size:10px;letter-spacing:.18em;color:var(--hp-faint);
  border:1px solid var(--hp-dline);border-radius:9999px;padding:5px 12px;
  background:rgba(7,11,31,.55)}
/* 本番アセット差替済み章の来歴クレジット (design §3.4-3「素材にもprovenanceを付ける」、V-0静止画版) */
#hp-stage .hp-credit-tag{position:absolute;right:18px;bottom:18px;z-index:3;
  font-size:10px;letter-spacing:.1em;color:var(--hp-faint);
  border:1px solid var(--hp-dline);border-radius:9999px;padding:5px 12px;
  background:rgba(7,11,31,.55)}
/* FV: 幕1「ノイズの海」V-0静止画キービジュアル (image-first、design §10.1)。
   .hp-sky はimg読込前/失敗時のフォールバック地色として下地に残す */
#hp-sc-fv .hp-sky{position:absolute;inset:0;
  background:linear-gradient(180deg,#0A1030 0%,#101A45 34%,#17224F 52%,#0B1029 66%,#070B1F 100%)}
#hp-sc-fv .hp-fv-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* M-0 動画差替スロット(将来V-1)。srcなしの間は視覚的に何も描画されない(ブラウザ既定挙動) */
#hp-sc-fv .hp-fv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* LIVE: ほぼ無地の深面 */
#hp-sc-live{background:radial-gradient(120% 90% at 50% 0%,#0D1334 0%,var(--hp-deep) 62%)}

/* ---------- 02-06 5DB章: 地方キービジュアル + 疑似手ブレ/視差 + 地方色アクセント (W-3a) ----------
   design §10.1/§10.3/§10.4、prismplane-making-notes §4。
   背景グラデはimg読込前/失敗時のフォールバック地色として残す(FVの.hp-skyと同じ思想)。
   地方色(§2.4-3): 基調navy+原光シアンは全章不変、地方色は縁・光源・点在マークの副アクセントに限定
   (背景全面・CTA色への転用は禁止)。テキストコントラストは地方色に依存させない。 */
#hp-sc-edinet{background:linear-gradient(160deg,#0A1030 0%,#0E1740 45%,#0B1029 100%);
  --hp-region:#E7E5DD;--hp-region-a:rgba(231,229,221,.5)} /* 白金(銀白)。シアン本家の風格を保つため変化は最小 */
#hp-sc-fudosan{background:linear-gradient(200deg,#0A1030 0%,#0C1338 55%,#070B1F 100%);
  --hp-region:#3FAE85;--hp-region-a:rgba(63,174,133,.5)} /* 翡翠 */
#hp-sc-seisaku{background:linear-gradient(170deg,#0A1030 0%,#0D1636 48%,#070B1F 100%);
  --hp-region:#EB6238;--hp-region-a:rgba(235,98,56,.5)} /* 朱(印章の赤) */
#hp-sc-bousai{background:linear-gradient(190deg,#0A1436 0%,#0C1a3e 50%,#070B1F 100%);
  --hp-region:#E8B33D;--hp-region-a:rgba(232,179,61,.5)} /* 警戒の黄金 */
#hp-sc-houjin{background:linear-gradient(165deg,#0A1030 0%,#0E1638 46%,#070B1F 100%);
  --hp-region:#F0831A;--hp-region-a:rgba(240,131,26,.5)} /* 琥珀(色の物語弧§2.4-2、人の営みの灯) */

/* imgwrapがJS駆動transform(scale(1.1)+疑似手ブレ+カーソル視差)を担う唯一の層。
   JS未実行/一時停止/reduced-motion時はCSS既定値(scale(1.1)のみ、平行移動なし)に留まる = 静止表示。 */
.hp-ch-scene .hp-ch-imgwrap{position:absolute;inset:0;overflow:hidden;
  transform:scale(1.1);transform-origin:50% 50%;will-change:transform}
.hp-ch-scene .hp-ch-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:rgba(10,16,48,.4)} /* 遅延ロード中(data-src未arm)の下地 */
/* 地方色アクセント線: 1本のみ・低不透明度(副アクセント、design §10.3の「少量」規律) */
.hp-ch-scene .hp-ch-accent{position:absolute;left:10%;right:10%;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hp-region-a,rgba(103,232,249,.3)),transparent)}
/* GRAPH: 実データ描画のライブシーン (W-3b、Three.jsはhp-graph.jsが章接近時にmount)
   spec §3「空間: 背景#070B1F」と合わせた地色。Three.jsのWebGLRenderer clearColorも同値。 */
#hp-sc-graph{background:#070B1F}
#hp-sc-graph .hp-graph-mount{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:2}
#hp-sc-graph .hp-graph-mount canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* フォールバックSVG(WebGL不可/SP低速/Save-Data、spec §5)。data-src未arm時は非表示のまま */
#hp-sc-graph .hp-graph-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  display:none;background:#070B1F}
#hp-sc-graph .hp-graph-fallback[data-hp-armed]{display:block}
/* フォールバック表示中はThree.jsマウント先を非表示にする(二重描画防止) */
#hp-sc-graph.hp-graph-fallback-active .hp-graph-mount{display:none}
/* 粒状感 + ビネット */
#hp-grain{position:absolute;inset:0;opacity:.05;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
#hp-vignette{position:absolute;inset:0;z-index:2;
  background:radial-gradient(120% 100% at 50% 45%,transparent 55%,rgba(4,6,18,.55) 100%)}

/* ---------- 章レール ---------- */
#hp-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:30;
  display:flex;flex-direction:column;gap:12px}
#hp-rail a{display:flex;align-items:center;gap:8px;color:var(--hp-faint);font-size:9.5px;
  letter-spacing:.16em;font-family:var(--font-en,inherit)}
#hp-rail a::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:none}
#hp-rail a.hp-act{color:var(--hp-cyan-l)}
#hp-rail a span{opacity:0;transition:opacity .3s}
#hp-rail a:hover span,#hp-rail a.hp-act span{opacity:1}
#hp-rail.hp-dark-off a{color:#8891ad}
#hp-rail.hp-dark-off a.hp-act{color:var(--hp-cyan)}
@media (max-width:900px){#hp-rail{display:none}}

/* ---------- 単一モーション停止機構 (WCAG 2.2.2) ----------
   手動停止ボタンは撤去(2026-07-12)。prefers-reduced-motion 時の自動停止は
   hp-stage.js の paused=isStatic → applyPaused(paused) が引き続き担う。 */
html.hp-paused #hp-root *,
html.hp-paused #hp-root *::before,
html.hp-paused #hp-root *::after{animation-play-state:paused!important}
html.hp-paused #hp-root video{display:none}
html.hp-paused #hp-root .hp-scene[data-scene] .hp-video-fallback{display:block!important}

/* ---------- 章共通 ---------- */
#hp-root{position:relative;z-index:1}
#hp-root .hp-chapter{position:relative;padding:0 clamp(20px,6vw,72px)}
#hp-root .hp-wrap{max-width:1152px;margin:0 auto;width:100%}
#hp-root .hp-eyebrow{font-size:11px;letter-spacing:.22em;color:var(--hp-cyan-l);font-weight:500}
#hp-root .hp-rv{transition:opacity .7s ease-out,transform .7s ease-out}
html.hp-js #hp-root .hp-rv{opacity:0;transform:translateY(18px)}
html.hp-js #hp-root .hp-rv.hp-in{opacity:1;transform:none}

/* ---------- 00 FV ---------- */
/* padding-bottom は #hp-root .hp-chapter{padding:0 ...}(id+class)より詳細度を上げないと
   0に潰される。#hp-root #hp-fv(id×2)で確実に勝たせる(2026-07-12: FV下余白が効かない不具合の修正)。 */
#hp-root #hp-fv{height:100vh;height:min(100svh,940px);display:flex;align-items:flex-end;
  padding-bottom:clamp(72px,12vh,144px);color:var(--hp-ink)}
#hp-fv h1{font-size:clamp(36px,6.4vw,72px);font-weight:700;line-height:1.28;
  letter-spacing:.01em;text-wrap:balance}
#hp-fv .hp-cat{margin-top:22px;font-weight:700;font-size:clamp(14px,1.7vw,18px);color:var(--hp-ink)}
#hp-fv .hp-sub{margin-top:10px;font-size:clamp(13px,1.5vw,15.5px);line-height:1.8;
  color:var(--hp-dim);max-width:34em;text-wrap:pretty}
#hp-fv .hp-ctas{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hp-btn{display:inline-block;border-radius:9999px;padding:13px 26px;font-size:14.5px;
  font-weight:500;transition:transform .2s,background .2s}
.hp-btn:hover{transform:translateY(-2px)}
.hp-btn:focus-visible{outline:2px solid var(--hp-amber-h);outline-offset:3px}
/* #hp-root a{color:inherit} (IDセレクタ) に勝つため同prefixで詳細度を確保 */
body.hp-stage-page #hp-root .hp-btn-p{background:var(--hp-amber);color:var(--hp-deep2)}
body.hp-stage-page #hp-root .hp-btn-p:hover{background:var(--hp-amber-h);color:var(--hp-deep2)}
/* 枠が rgba(255,255,255,.12) だと明るい写真背景で消える(2026-07-12 修正)。
   枠を強め + 薄いダークグラスの下地で、写真の明暗どちらでもボタンとして読める視認性を確保。 */
.hp-btn-s{border:1.5px solid rgba(255,255,255,.62);color:var(--hp-ink);
  background:rgba(7,11,31,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hp-btn-s:hover{border-color:rgba(255,255,255,.92);background:rgba(7,11,31,.52)}
/* 「AIからのリクエスト」主表記に添える小さなMCP注記(2026-07-08 小池裁定: MCPは一般訪問者に通じない) */
.hp-mcp-tag{display:inline-block;margin-left:6px;padding:1px 6px;font-size:9px;letter-spacing:.12em;
  vertical-align:1px;color:var(--hp-faint);border:1px solid var(--hp-dline);border-radius:4px}
#hp-fv .hp-scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:9.5px;letter-spacing:.3em;color:var(--hp-faint)}

/* ---------- 答え合わせオーバーレイ (signature、SVG実装、design §2.2) ----------
   計測線(ブラケット/リーダー線)はSVGベクタ描画。出典ピルは実DOMテキスト(aria-hiddenの
   装飾フラグメントだが、完全な数値・出典はSSRの#hp-liveが担う=情報の唯一の担体にしない §10.4)。
   アンカーは正規化(0-1相当の%)+ブレークポイント別定義。物体追従はせず画面領域アンカーのみ。 */
.hp-ann{position:absolute;z-index:5;pointer-events:none}
.hp-ann-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hp-ann-frame path{fill:none;stroke:var(--hp-cyan-l);stroke-width:1.5;opacity:.9;vector-effect:non-scaling-stroke}
.hp-ann-lead{position:absolute;left:50%;top:100%;width:2px;height:28px;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.hp-ann-lead line{stroke:var(--hp-cyan-l);stroke-width:1.5}
.hp-ann .hp-pill{position:absolute;top:calc(100% + 30px);left:50%;transform:translateX(-50%);
  white-space:nowrap;border:1px solid rgba(103,232,249,.5);border-radius:9999px;
  background:rgba(7,11,31,.72);padding:7px 14px;font-size:11.5px;color:var(--hp-ink);margin:0}
.hp-ann .hp-pill b{font-weight:700;color:var(--hp-cyan-l)}
.hp-ann .hp-pill small{display:block;font-size:9px;letter-spacing:.1em;color:var(--hp-faint);margin-top:2px}
.hp-ann-flip .hp-ann-lead{top:auto;bottom:100%;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
.hp-ann-flip .hp-pill{top:auto;bottom:calc(100% + 30px)}
@keyframes hpAnnCycle{0%{opacity:0;transform:scale(1.045)}4%{opacity:1;transform:scale(1)}
  30%{opacity:1}36%{opacity:0}100%{opacity:0}}
html.hp-js:not(.hp-static) .hp-ann{opacity:0;animation:hpAnnCycle 16.5s ease-out infinite}
html.hp-js:not(.hp-static) .hp-ann-2{animation-delay:5.5s}
html.hp-js:not(.hp-static) .hp-ann-3{animation-delay:11s}
html.hp-paused .hp-ann{animation-play-state:paused!important;opacity:0}

/* 正規化アンカー(§2.2)。デフォルト=デスクトップ。画面領域%指定、物体追従なし */
.hp-ann-1{left:8%;top:14%;width:168px;height:104px}
.hp-ann-2{right:9%;top:20%;width:190px;height:120px}
.hp-ann-3{left:42%;top:48%;width:150px;height:96px}
@media (max-width:900px){
  .hp-ann-2{top:17%}
  .hp-ann-3{left:37%}
}

/* ---------- 01 LIVE ---------- */
#hp-live{padding-top:96px;padding-bottom:96px;color:var(--hp-ink)}
#hp-live .hp-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
#hp-live h2{font-size:clamp(24px,3.4vw,34px);font-weight:700;text-wrap:balance}
#hp-live .hp-stat-main{margin-top:44px}
#hp-live .hp-stat-main .hp-v{font-size:clamp(56px,9vw,104px);font-weight:700;line-height:1;
  background:linear-gradient(100deg,#fff,var(--hp-cyan-l));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#hp-live .hp-stat-main .hp-l{margin-top:10px;font-size:14px;color:var(--hp-dim)}
#hp-live .hp-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:40px;margin-top:56px;align-items:end}
#hp-live .hp-stat .hp-v{font-size:clamp(30px,4vw,42px);font-weight:700}
#hp-live .hp-stat .hp-l{margin-top:6px;font-size:12.5px;color:var(--hp-dim)}
#hp-live .hp-chart-wrap{grid-column:1/-1}
#hp-live .hp-chart-cap{font-size:11px;color:var(--hp-faint);margin-bottom:10px;letter-spacing:.06em}
#hp-live .hp-chart-wrap svg{width:100%;height:auto}
#hp-live .hp-bar{fill:rgba(103,232,249,.34)}
#hp-live .hp-bar-hot{fill:var(--hp-cyan-b)}
#hp-live .hp-clients{margin-top:52px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#hp-live .hp-c{border:1px solid var(--hp-dline);border-radius:9999px;padding:6px 14px;
  font-size:11.5px;color:var(--hp-dim)}
#hp-live .hp-clients-suffix{font-size:11.5px;color:var(--hp-faint)}
#hp-live .hp-src{margin-top:28px;font-size:11.5px;color:var(--hp-faint)}

/* ---------- 02-06 5DB章 ---------- */
/* 地方色(§2.4-3、.hp-ch-sceneと同じ値をチャプターSECTION側にも定義。テキストパネル装飾用) */
#hp-edinet{--hp-region:#E7E5DD;--hp-region-a:rgba(231,229,221,.5);--hp-panel-alpha:.30}
#hp-fudosan{--hp-region:#3FAE85;--hp-region-a:rgba(63,174,133,.5);--hp-panel-alpha:.34}
#hp-seisaku{--hp-region:#EB6238;--hp-region-a:rgba(235,98,56,.5);--hp-panel-alpha:.36}
#hp-bousai{--hp-region:#E8B33D;--hp-region-a:rgba(232,179,61,.5);--hp-panel-alpha:.34}
#hp-houjin{--hp-region:#F0831A;--hp-region-a:rgba(240,131,26,.5);--hp-panel-alpha:.32}

.hp-db{min-height:100vh;min-height:min(108svh,1040px);display:flex;align-items:center;
  padding-top:96px;padding-bottom:96px;color:var(--hp-ink)}
/* 章テキストパネル: 可変フロスト(prismplane-making-notes §4「glass」をダーク面向けに翻案、
   白ではなく紺rgbaベース)。既定=読みやすい濃いフロスト、カーソル接近(hover)で薄まり背景キー
   ビジュアルが覗く(「入界感」)。章別に濃度可変(--hp-panel-alpha)。タッチ端末はhoverが存在しない
   ため既定の読みやすい状態のまま固定される(簡略化、design §10.4)。 */
.hp-db .hp-inner{max-width:560px;position:relative;padding:30px 28px;border-radius:6px;
  background:rgba(7,11,31,var(--hp-panel-alpha,.34));
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border-left:2px solid var(--hp-region-a,rgba(103,232,249,.4));
  transition:background-color .7s ease,-webkit-backdrop-filter .7s ease,backdrop-filter .7s ease}
@media (hover:hover) and (pointer:fine){
  .hp-db .hp-inner:hover{background:rgba(7,11,31,.07);
    -webkit-backdrop-filter:blur(3.5px);backdrop-filter:blur(3.5px)}
}
.hp-db h2{font-size:clamp(30px,4.6vw,50px);font-weight:700;margin-top:14px;text-wrap:balance}
.hp-db .hp-fact{margin-top:16px;font-size:clamp(14px,1.7vw,16.5px);line-height:1.85;
  color:var(--hp-ink);text-wrap:pretty}
.hp-db .hp-m{margin-top:26px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hp-db .hp-m .hp-v{font-size:clamp(28px,3.6vw,38px);font-weight:700;color:var(--hp-cyan-l)}
.hp-db .hp-m .hp-l{font-size:12px;color:var(--hp-dim)}
.hp-db .hp-go{display:inline-block;margin-top:26px;font-size:13.5px;color:var(--hp-cyan-l);
  border-bottom:1px solid rgba(103,232,249,.4);padding-bottom:2px}
.hp-db .hp-go:hover{color:var(--hp-cyan-b)}
.hp-db .hp-src{margin-top:18px;font-size:10.5px;color:var(--hp-faint)}
/* 地方色の副アクセント: eyebrow前の点在マーク1つのみ(design §10.3「少量」、テキスト色自体は不変) */
.hp-db .hp-eyebrow{display:inline-flex;align-items:center;gap:8px}
.hp-db .hp-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--hp-region,var(--hp-cyan-l));box-shadow:0 0 6px 1px var(--hp-region-a,transparent)}

/* ---------- 07 GRAPH ---------- */
#hp-graph{min-height:100vh;min-height:min(100svh,900px);display:flex;align-items:center;
  text-align:center;padding-top:96px;padding-bottom:96px;color:var(--hp-ink)}
#hp-graph .hp-inner{max-width:640px;margin:0 auto}
#hp-graph h2{font-size:clamp(28px,4.2vw,44px);font-weight:700;margin-top:14px;text-wrap:balance}
#hp-graph p{margin-top:16px;font-size:15px;line-height:1.85;color:var(--hp-dim);text-wrap:pretty}
/* 出典行(spec §4「注記: generated_atを出典行に表示」)。他章の.hp-srcと同格の小さな注記トーン */
#hp-graph .hp-src{margin-top:18px;font-size:10.5px;line-height:1.6;color:var(--hp-faint)}

/* ---------- 検品用 meta バッジ (本番では非表示、?debug のみ表示) ---------- */
#hp-meta{position:fixed;left:18px;bottom:64px;z-index:30;font-size:10.5px;color:var(--hp-faint);
  background:rgba(7,11,31,.6);border:1px solid var(--hp-dline);border-radius:9999px;padding:7px 14px;
  display:none}
html.hp-debug #hp-meta{display:block}

/* ---------- モバイル ---------- */
@media (max-width:640px){
  #hp-root #hp-fv{padding-bottom:112px}
  #hp-meta,#hp-fv .hp-scroll-cue,#hp-stage .hp-ph-tag,#hp-stage .hp-credit-tag{display:none}
  /* アンカーが合わないブレークポイントでは非表示にする(§2.2の規律) */
  .hp-ann-3{display:none}
  .hp-ann-1{width:min(58vw,168px)}
  .hp-ann-2{width:min(62vw,190px);right:6%}
  .hp-ann .hp-pill{white-space:normal;width:max-content;max-width:64vw;text-align:center}
  /* 5DB章: 1枚静止表示に縮退(手ブレ・視差なし、design §10.4)。JS側もcoarseTouchでtransform停止
     済みだが、CSSでも scale(1.1) の見切れ余白は不要になるため縮小してモバイル画角を素直に保つ */
  .hp-ch-scene .hp-ch-imgwrap{transform:scale(1)}
  .hp-ch-scene .hp-ch-accent{display:none}
  .hp-db .hp-inner{padding:22px 20px}
}

/* ---------- reduced-motion / Save-Data フォールバック ---------- */
@media (prefers-reduced-motion:reduce){
  html.hp-js #hp-root .hp-rv{opacity:1;transform:none;transition:none}
  .hp-ann{animation:none!important;opacity:0!important}
  /* 5DB章: 疑似手ブレ/視差(JS駆動)を完全停止し1枚静止表示に固定(design §2.3-2 単一モーション
     停止機構、WCAG 2.2.2)。JS側もprefersReduceで同じ制御をするが、CSS側でも冗長に保証する */
  .hp-ch-scene .hp-ch-imgwrap{transform:scale(1.1)!important;transition:none}
  .hp-db .hp-inner{transition:none}
}
/* 単一モーション停止トグル/?static: 疑似手ブレ・視差を停止(JSがtranslateをリセットするが、
   CSS側にも冗長な保証を置く。JS未実行時のフォールバックにもなる) */
html.hp-static .hp-ch-scene .hp-ch-imgwrap,
html.hp-paused .hp-ch-scene .hp-ch-imgwrap{transform:scale(1.1)!important;transition:none}