/* ============================================================
   lp_client_v1.css — LP工場 クライアントLP専用スタイル
   lp_v2_sky.css の後に読み込む。スカイ基盤はそのまま流用し、
   ここでは主色（--primary）1色の差し替えと、基盤にない
   実績セクション用のクラスだけを追加する。
   ============================================================ */

:root {
  /* クライアントのアクセント色。生成CLIがここだけ書き換える（コンセプトシート9番 accent_color →
     --primary-color 引数 → clients.logo_color の優先順で決まる）。
     既定値はv3凍結モックのスカイ #0284c7（検収基準 h1 em = rgb(2,132,199) と一致）。 */
  --primary: #0284c7;

  /* スカイ基盤の accent 系はこの1変数から派生させる（それ以外の色は基盤のまま） */
  --accent: var(--primary);
  --accent-dark: var(--primary);
  --accent-light: var(--primary);

  /* v3モック（監査室作）由来のパレット。ダーク帯・比較表など新セクションの構造色をモック通りに再現する。
     2026-07-25（I-2/I-3 工事C）: アクセントの二系統（--primary と --clp-sky）を解消し、
     --clp-sky は --primary から派生させる1系統にした。派生の濃色・淡色（--clp-sky-d / --clp-sky-bg）は
     既定値をv3凍結モックの値そのままにしておき、非スカイ色が指定されたときだけ
     generate_client_lp._derive_palette() が算出値へ差し替える（色指定なし＝凍結モックと完全同一の見た目）。 */
  --clp-navy: #0b1f33;
  --clp-navy2: #0f2a44;
  --clp-sky: var(--primary);
  --clp-sky-d: #075985;    /* 濃色（強調文字・数字） */
  --clp-sky-bg: #e8f4fd;   /* 淡色背景（比較表の自社行・成果報酬帯） */
  --clp-sky-l: #7cc7f0;    /* 明色（進捗バーのグラデーション始点） */
  --clp-sky-line: #bfdcf2; /* 淡色ボーダー（料金カード枠） */
  --clp-line: #d8e6f2;
  --clp-serif: "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* v3モック由来の成功色・本文濃色（監査室2026-07-23指示#1/#4 で移植したヒーロー追跡劇場・料金セクション用） */
  --clp-ok: #0e9f6e;
  --clp-ink: #16283a;
}

/* ロゴはグラデーションではなく主色の単色表示にする（1色ルールの徹底） */
.nav-logo {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--primary);
}

/* ===== ヒーローh1のem強調（v3モック準拠・監査室2026-07-23指示・オーナー指摘）=====
   斜体を禁止しアクセント色で塗る。2026-07-25（I-2/I-3 工事C）で --clp-sky を --primary 派生に
   一本化したため、ここは --primary と同値（既定 #0284c7 = 検収基準 rgb(2,132,199)）。
   非スカイのアクセント色を指定したクライアントでは em もそのアクセント色になる（配色1系統）。 */
.hero h1 em {
  font-style: normal;
  color: var(--primary);
}

/* ===== 実績ファクトストリップ（stats がある場合のみ生成CLIが出力・v3モック .facts 準拠） =====
   モックのCSS数値をそのまま移植（ダーク帯＋4列グリッド）。value は分解せず丸ごと <b> に入れる。 */
.facts { background: var(--clp-navy); color: #fff; }
.facts-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 34px 0;
}
.fact b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
}
.fact span {
  font-size: 12px;
  color: #9fc8e8;
}

/* ===== ヒーローCTA直下の注記（v3モック .cta-note 準拠・監査室2026-07-23差し戻し） ===== */
.cta-note {
  font-size: 12.5px;
  color: var(--text-sub);
  margin-top: 12px;
}

/* ===== ベネフィット3枚目のワイド帯＋タイムライン（v3モック .pillar.wide + .tl 準拠） =====
   3枚構成のとき、pillar-grid を2列にして3枚目を全幅のダーク帯にする。右半分に flow をタイムライン表示。 */
.clp-pillar-grid { grid-template-columns: 1fr 1fr; }
.clp-wide {
  grid-column: 1 / -1;
  background: var(--clp-navy);
  color: #fff;
  border: none;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px;
}
.clp-wide-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #cfe7f8;
  background: rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.clp-wide-title {
  font-family: var(--clp-serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.6;
}
.clp-wide-body {
  color: #b9d4ea;
  font-size: 14px;
  line-height: 1.72;
}
.clp-tl {
  background: var(--clp-navy2);
  border-radius: 12px;
  padding: 20px 22px;
  font-size: 13px;
}
.clp-tl-row {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #cfe4f5;
}
.clp-tl-row:last-child { border: none; }
.clp-tl-row b {
  color: #fff;
  min-width: 52px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== 他社比較テーブル（market_comparison がある場合のみ生成CLIが出力・v3モック .cmp 準拠） =====
   ※アクセント（--clp-sky系）は2026-07-25 工事Cで --primary 派生に一本化済み（既定値はモックのスカイ）。 */
.cmp { border: 1px solid var(--clp-line); border-radius: 14px; overflow: hidden; }
.cmp-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  padding: 17px 24px;
  font-size: 14.5px;
  border-top: 1px solid var(--clp-line);
  align-items: center;
}
.cmp-row:first-child {
  border: none;
  background: #f6fafd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-sub);
}
.cmp-row b { font-size: 16px; font-variant-numeric: tabular-nums; }
.cmp-row span { color: var(--text-sub); font-size: 13px; }
.cmp-row.me { background: var(--clp-sky-bg); border-top: 2px solid var(--clp-sky); }
.cmp-row.me b { color: var(--clp-sky-d); font-size: 19px; }
.cmp-note { font-size: 11.5px; color: var(--text-sub); margin-top: 12px; }

/* ===== ヒーローmockの登場アニメ（v3モック .slack の pop 挙動・数値を移植） =====
   既存の抽象mock（.clp-mock 内の3行）に順次フェードインを付ける。固有の数字・文言は持たない（捏造なし）。 */
@keyframes clp-pop {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.clp-mock .fm-line-row { opacity: 0; animation: clp-pop .5s ease forwards; }
.clp-mock .fm-line-row:nth-child(2) { animation-delay: .3s; }
.clp-mock .fm-line-row:nth-child(3) { animation-delay: 1.1s; }
.clp-mock .fm-line-row:nth-child(4) { animation-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) {
  .clp-mock .fm-line-row { animation: none; opacity: 1; }
}

/* v3モック @860 のレスポンシブ数値を移植 */
@media (max-width: 860px) {
  .facts-in { grid-template-columns: 1fr 1fr; gap: 20px; }
  .clp-wide { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1.3fr 1fr; }
  .cmp-row span { display: none; }
  .clp-stage { min-height: 400px; }
  .clp-price-card { grid-template-columns: 1fr; }
  .clp-price-l { border-right: none; border-bottom: 1px dashed var(--clp-line); }
}

/* ===== flow: analyze_for_lpのflowは1行文字列のみのためtitle+body 2段組みを使わない。
   （2026-07-21 監査室承認: v2でヒアリングシートから工程説明文を取得できるようになれば2段組み復帰を検討） */
.flow-step-card { padding: 20px 22px; }
.flow-step-title { margin-bottom: 0; }

/* ===== ヒーロー右カラムの抽象モック（実データ非依存の視覚要素・LP_CRAFT §1/§2）
   旗艦の .browser-window / .fm-bar を土台に、行間だけをこのファイルで調整する。
   固有の数字・文言は一切持たない（捏造禁止）。 */
.clp-mock { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.clp-mock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.clp-mock-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  /* 2026-07-25 工事C: スカイ固定のrgbaを --primary 派生に置換（既定色では従来と同じ値になる）。
     color-mix 未対応ブラウザ向けに直前行のリテラルをフォールバックとして残す。 */
  background: linear-gradient(135deg, var(--primary), rgba(2, 132, 199, .35));
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 35%, transparent));
  flex-shrink: 0;
}
.clp-mock .fm-line-row { gap: 10px; }
.clp-mock .fm-bar { height: 8px; }
.clp-mock-panel {
  margin-top: 4px;
  padding: 14px;
  border-radius: var(--r-md, 12px);
  background: rgba(2, 132, 199, .04);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border: 1px solid rgba(2, 132, 199, .07);
  border: 1px solid color-mix(in srgb, var(--primary) 7%, transparent);
  display: flex; flex-direction: column; gap: 10px;
}
.clp-mock-panel .fm-bar { height: 7px; }

/* ===== ヒーロー追跡劇場（v3モック .stage/.doc/.slack 準拠・監査室2026-07-23指示#1） =====
   hero_theater=true のクライアント（自社=cl18）のみ、生成CLIがヒーロー右カラムの抽象mockを
   この「資料閲覧ログ＋Slack通知」劇場に差し替える。モックのCSS数値をそのまま移植し、色変数だけ
   --clp-* / --text-sub に読み替える。フラグの無いクライアントは従来の抽象mock（.clp-mock）がフォールバック。
   ※劇場内の企業名は伏字（◯◯◯◯）・秒数はデモ表現で、特定顧客の実績主張ではない（製品機能の図示）。 */
.clp-theater { position: relative; }
.clp-stage { position: relative; min-height: 420px; }
.clp-doc {
  position: absolute; left: 0; top: 24px; width: 62%;
  background: #fff; border: 1px solid var(--clp-line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 31, 51, .10); padding: 18px 18px 14px;
}
.clp-doc-tt { font-size: 11px; font-weight: 700; color: var(--text-sub); letter-spacing: .08em; margin-bottom: 10px; }
.clp-pg { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-sub); padding: 7px 0; border-top: 1px dashed var(--clp-line); }
.clp-pg b { width: 34px; color: var(--clp-ink); font-size: 11.5px; }
.clp-bar { height: 8px; border-radius: 4px; background: var(--clp-sky-bg); flex: 1; overflow: hidden; position: relative; }
.clp-bar i { position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, var(--clp-sky-l), var(--clp-sky)); border-radius: 4px; }
.clp-pg.hot b, .clp-pg.hot .clp-sec { color: var(--clp-sky); font-weight: 800; }
.clp-sec { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.clp-slack {
  position: absolute; right: 0; width: 58%;
  background: #fff; border: 1px solid var(--clp-line); border-left: 4px solid var(--clp-sky);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(11, 31, 51, .14);
  padding: 13px 16px; font-size: 13px; opacity: 0; animation: clp-pop .5s ease forwards;
}
.clp-slack .t { font-weight: 800; font-size: 12.5px; margin-bottom: 2px; }
.clp-slack .d { color: var(--text-sub); font-size: 12px; }
.clp-slack.s1 { top: 0; animation-delay: .3s; }
.clp-slack.s2 { top: 96px; animation-delay: 1.1s; }
.clp-slack.s3 { top: 206px; animation-delay: 1.9s; border-left-color: var(--clp-ok); }
.clp-slack.s3 .chat { margin-top: 8px; background: var(--clp-sky-bg); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--clp-sky-d); }
@media (prefers-reduced-motion: reduce) {
  .clp-slack { animation: none; opacity: 1; }
}

/* ===== 料金セクション（pricing がある場合のみ生成CLIが出力・v3モック .price 準拠・監査室2026-07-23指示#4） =====
   モックのCSS数値をそのまま移植。--sub→--text-sub, --line/--sky-d/--sky-bg→--clp-*, --ok→--clp-ok に読み替え。 */
.clp-price { background: linear-gradient(160deg, #f4fafe, #e8f4fd); }
.clp-price { background: linear-gradient(160deg, color-mix(in srgb, var(--clp-sky-bg) 50%, #fff), var(--clp-sky-bg)); }
.clp-price-lead { color: var(--text-sub); max-width: 44em; margin: 0 auto 44px; }
.clp-price-card {
  background: #fff; border: 1px solid var(--clp-sky-line); border-radius: 18px;
  box-shadow: 0 18px 48px rgba(2, 132, 199, .12);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--primary) 12%, transparent);
  display: grid; grid-template-columns: 1fr 1.2fr; overflow: hidden;
}
.clp-price-l { padding: 40px; border-right: 1px dashed var(--clp-line); }
.clp-price-pn { font-size: 13px; font-weight: 800; color: var(--clp-sky-d); letter-spacing: .08em; margin-bottom: 16px; }
.clp-amount { font-size: 52px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.clp-amount small { font-size: 16px; font-weight: 700; color: var(--text-sub); }
.clp-tax { font-size: 13px; color: var(--text-sub); margin: 8px 0 18px; }
.clp-seika { background: var(--clp-sky-bg); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; color: var(--clp-sky-d); font-weight: 700; }
.clp-seika-sub { font-weight: 400; font-size: 12px; }
.clp-price-r { padding: 40px; }
.clp-inc { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--text-sub); margin-bottom: 14px; }
.clp-inc-g { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; font-size: 14px; }
.clp-inc-g div::before { content: "✓ "; color: var(--clp-ok); font-weight: 800; }
.clp-premium { font-size: 12.5px; color: var(--text-sub); margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--clp-line); }

/* ===== Gemini画像レイヤー（2026-07-23解禁・監査室 I-2） =====
   画像がある場合のみ generate_client_lp.py が対象セクションに .clp-has-*-img クラスと
   CSS変数（相対URL）を付与する。画像が無ければこのルールは一切効かず、既存のCSS/SVG表現
   （ヒーローの抽象mock・グリッド背景・オーブ等）がそのままフォールバックとして残る。
   ・人物なし／抽象イメージのみ（生成側 lp_images.py のプロンプトで no people を強制）
   ・主色は生成時にプロンプトへ含めてトーンを合わせる（--primary theming とは別に画像側で対応）
   ・旗艦の .hero::before（グリッド）は温存するため、画像レイヤーは ::after を使う。
   ・低opacityの背景透かしに留め、上に載る文字のコントラストを崩さない（見出し・カードは z-index:1 で前面）。 */
.hero.clp-has-hero-img::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--clp-hero-img);
  background-size: cover; background-position: center;
  opacity: .12; pointer-events: none;
}
.hero.clp-has-hero-img .hero-inner { position: relative; z-index: 1; }

.section-wrap.clp-has-sec-img { position: relative; }
.section-wrap.clp-has-sec-img::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--clp-sec-img);
  background-size: cover; background-position: center;
  opacity: .06; pointer-events: none;
}
.section-wrap.clp-has-sec-img > .container { position: relative; z-index: 1; }

/* 法定ページリンク（監査室2026-07-25指示 LP工場v4 1-B）。フッター既存の見た目は変えず、
   .footer-bottom の上に薄いリンク行を1本追加するだけ。クライアント設定にURLが無い場合は
   generate_client_lp.py がこの行自体を出力しないため、CSSは常時ロードされるが表示は0行になる。 */
.footer-legal {
  max-width: var(--container-w);
  margin-inline: auto;
  padding: 14px 24px 0;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px;
}
.footer-legal a { color: rgba(255,255,255,.55); text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,.85); text-decoration: underline; }

/* ===== 副CTA「資料を3分で見る」（監査室2026-07-27指示・doc_cta があるクライアントのみ生成CLIが出力） =====
   主CTA（.hero-cta-btn / .cta-big-btn）の直下に置く「相談の前段ステップ」の導線。
   対等な2ボタンに見せないため、ボタンではなく小さな枠のテキストリンク（グロー無し・控えめな色）にする。
   ヒーロー側は .hero-cta-group（flex）の中に出すため flex-basis:100% で主CTAの下に改行させる。
   フォーム手前側（.final-cta は text-align:center のブロック）ではその中央寄せがそのまま効く。 */
.doc-cta-strip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px dashed var(--clp-sky-line);
  background: var(--clp-sky-bg);
  color: var(--clp-sky-d);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.doc-cta-strip:hover {
  background: color-mix(in srgb, var(--clp-sky-bg) 60%, #fff);
  border-color: var(--clp-sky);
}
.doc-cta-strip-arrow { transition: transform .15s ease; }
.doc-cta-strip:hover .doc-cta-strip-arrow { transform: translateX(2px); }
.final-cta .doc-cta-strip { margin-top: 18px; }

/* ===== フィールド直下の個別エラー表示（UI/UX合同レビュー2026-09-05 cl35: 自動修正#3） =====
   lp_v2_sky.css の .form-group input.error（赤枠）とセットで使う。既定は空文字＝非表示。 */
.field-error {
  display: block;
  min-height: 0;
  font-size: 12px;
  color: var(--red, #EF4444);
  margin-top: 4px;
}
.field-error:empty { margin-top: 0; }

/* ===== 最終CTA帯の装飾軽減（UI/UX合同レビュー2026-09-05 cl35: 自動修正#4） =====
   共有基盤(lp_v2_sky.css)の装飾オーブは他ページと共通のため直接編集せず、
   クライアントLPだけここでオーバーライドする。透明度を0.05まで下げ、
   ボタン直下の注記との間隔を詰めて視覚階層をシンプル化する。 */
.final-cta-orb.o1 {
  background: radial-gradient(circle, rgba(16,185,129,.05) 0%, transparent 70%);
}
.final-cta-orb.o2 {
  background: radial-gradient(circle, rgba(59,130,246,.05) 0%, transparent 70%);
}
.final-cta .cta-big-btn { margin-bottom: 8px; }
.final-cta .cta-sub-note { margin-top: 0; }

/* ===== フォーム送信成功メッセージのチェックマークアイコン（UI/UX合同レビュー2026-09-05 cl35: 自動修正#2） =====
   lp_v2_sky.css の #form-result.success（背景・枠線）はそのまま使い、左側にアイコンだけ追加する。 */
#form-result.success::before {
  content: "✓";
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
  color: var(--accent-dark);
}