/* 営業標準化サービス — Cloud Assist（/ai/sales/）ページ専用スタイル
   ファイル配置: /includes/ai-sales/ai-sales-style.css
   ai-sales.php 内の <link rel="stylesheet" href="..."> から参照される。

   すべてのセレクタを .ai-sales-lp 配下にスコープし、WordPressテーマ(denettm)へ
   スタイルが漏れないようにしている。デザイントークン(CSS変数)も .ai-sales-lp 配下に
   限定して定義しているため、テーマ側の変数とは衝突しない。
   （兄弟ページ /includes/ai-claude-code/ ・ /includes/ai-consulting/ と同じ流儀）

   2026-09-22 全面改訂（オーナー決裁「全面差し替え」）:
   構成を「実物で流れを見せる」形へ組み替えたため、スタイルも書き直した。
   引き継いだもの: デザイントークン（色・書体・角丸・影）／.container ／.reveal ／
   表のカード化方針／「面の赤は決断の場所だけ」。

   このページ固有:
   ・.journey … HOW IT WORKS の5ステップ（左＝説明／右＝実物キャプチャで固定。5枚のうち2枚はキャプチャが無く、交互にすると説明の開始位置が揃わないため固定にしている）
     画像は3点とも .jshot img。クリックで .lightbox を開く（JS側で制御）
   ・.bar-set … WHY NOW の外部調査バー図（35.6／47.2／56.9／74.8 は必ずセットで出す）
   ・.plan-rail … PLANS の3段階。強調 .plan-rail-item-main は①＝::before「まずはここから」
   ・.plan-after … 継続改善サービス（③実施後のみの別枠。破線で本編3段階と区別する）
   ・.rp-pair … ロープレ2種（AIが顧客役／AIが営業役）の対比
   ・画像アセットは3点（assets/sample-prep-sheet.png ／ sample-progress-form.png ／
     sample-result-summary.png）。いずれも架空化済みのサンプル画面。それ以外の図はCSSで描画する
   ・面の赤は「決断の場所」だけに残す（CTA・①の強調・最終CTA帯）。表ヘッダは紺（--ink-navy） */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Inter:wght@400;500;600;700&display=swap');

/* ================================================================
   DESIGN TOKENS（.ai-sales-lp 配下に限定）
   ================================================================ */
.ai-sales-lp {
  --denet-red: #C8161D;
  --denet-red-dark: #9E1016;
  --denet-red-100: #F5C4C6;
  --denet-red-50: #FBE7E8;
  --ink: #1A1A1A;
  --fg-1: #1A1A1A;
  --fg-2: #3E3E3E;
  --fg-3: #6E6E6E;
  --border-1: #E5E5E5;
  --border-3: #F0F0F0;
  --bg-0: #FFFFFF;
  --bg-soft: #F5F5F5;
  --bg-data: #F7F8FA;
  --ink-navy: #2C3E55;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-body: 17px;
  --fs-body-lg: 20px;
  --fs-small: 15px;
  --fs-sec-title: 40px;   /* 節見出し。兄弟ページ（/ai/・/ai/claude-code/）と同値 */
  --fs-sub-title: 26px;
  --fs-card-title: 22px;

  --fw-bold: 700;
  --lh-heading: 1.4;
  --lh-body: 1.8;
  --ls-caps: 0.1em;
  --ls-heading: 0.02em;

  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 14px 40px rgba(44, 62, 85, 0.12);

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  --container-max: 1350px; /* mspに合わせる: WPテーマ本文コンテナ幅 */
  --container-pad: 24px;
  --measure: 900px;        /* 本文テキストの読みやすい最大幅 */

  font-family: var(--font-jp);
  color: var(--fg-1);
  line-height: var(--lh-body);
  background: var(--bg-0);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}

.ai-sales-lp *,
.ai-sales-lp *::before,
.ai-sales-lp *::after { box-sizing: border-box; }

.ai-sales-lp img { max-width: 100%; height: auto; }

/* 固定ページタイトル（h1）はテーマ出力でフラグメントの外にある。
   .ai-sales-lp スコープの唯一の例外。スマホ幅で「業務OS for セ／ールス」と
   カタカナ語の途中で折り返すため、keep-all で語のまとまりを保つ。
   このCSSは /ai/sales/ でのみ読み込まれるので、影響はこのページのh1だけ。 */
h1 { word-break: keep-all; overflow-wrap: anywhere; }

/* ================================================================
   LAYOUT
   ================================================================ */
.ai-sales-lp .container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.ai-sales-lp section { padding-block: 88px; }
.ai-sales-lp section.bg-soft { background: var(--bg-soft); }

/* 見出しまわり（兄弟ページ /ai/・/ai/claude-code/ と同じ作法。
   英字ラベル＋和文の2段 eyebrow ／ 節見出しは左に赤い6pxバー ／ 太さは700） */
.ai-sales-lp .sec-head { margin-bottom: 40px; }
/* 節のラベル。英語の飾り文字は置かず、日本語だけを赤の太字で出す（2026-09-24） */
.ai-sales-lp .sec-eyebrow {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--denet-red);
  margin-bottom: 12px;
}
.ai-sales-lp .sec-title {
  position: relative;
  font-size: var(--fs-sec-title);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  padding-left: 22px;
  text-wrap: balance;
}
.ai-sales-lp .sec-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6%;
  width: 6px;
  height: 88%;
  background: var(--denet-red);
  border-radius: 1px;
}
.ai-sales-lp .sec-lead {
  margin: 22px 0 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
  /* コンテナ幅いっぱいまで使う（900px の内枠をやめた。2026-09-25 オーナー指示）。
     balance は行を短く均すため使わない。pretty は最終行が1語だけになるのを防ぐだけ。 */
  text-wrap: pretty;
}

/* スクロールで表示（JS: .reveal → .in） */
.ai-sales-lp .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard);
}
.ai-sales-lp .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ai-sales-lp .reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   BUTTONS / CTA
   ================================================================ */
.ai-sales-lp .btn-primary {
  text-wrap: balance;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--denet-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 26px;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px rgba(200, 22, 29, 0.22);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.ai-sales-lp .btn-primary:hover { background: var(--denet-red-dark); transform: translateY(-1px); color: #fff; }
.ai-sales-lp .btn-primary svg { width: 20px; height: 20px; flex: none; }

.ai-sales-lp .cta-inline {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.ai-sales-lp .cta-inline-lead { margin: 0; font-weight: var(--fw-bold); color: var(--ink); font-size: 18px; }
.ai-sales-lp .cta-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--denet-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  transition: transform 0.15s ease, background 0.15s ease;
}
.ai-sales-lp .cta-inline-link:hover { background: var(--denet-red-dark); color: #fff; transform: translateY(-1px); }
.ai-sales-lp .cta-inline-link svg { width: 18px; height: 18px; flex: none; }

/* ================================================================
   HERO
   ================================================================ */
.ai-sales-lp #hero {
  background: var(--bg-0);
  /* 直上にテーマ出力のH1（固定ページタイトル）が入る。H1自身が下余白を持つので、
     ここは0にしてカテゴリ説明（.hero-tagline）をサービス名の真下に寄せる（2026-09-25）。 */
  padding: 0 0 96px;
}
.ai-sales-lp .hero-main { max-width: 880px; }
/* サービス名（テーマのh1）の真下に置くカテゴリ説明 */
.ai-sales-lp .hero-tagline {
  text-wrap: pretty;
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-2);
}
.ai-sales-lp .hero-tagline strong { color: var(--ink); font-weight: var(--fw-bold); }

/* 対象4業務。区切り線つきの細いテキスト（リンクではない） */
.ai-sales-lp .hero-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 26px 0 30px;
  padding: 14px 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.ai-sales-lp .hero-scope span { display: inline-flex; align-items: center; padding: 0 18px; }
.ai-sales-lp .hero-scope span::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--denet-red);
}
.ai-sales-lp .hero-scope span:first-child { padding-left: 0; }

.ai-sales-lp .hero-catch {
  /* 最長行「属人的だった営業の勝ちパターンを、」＝全角18字。
     固定サイズでは列幅を超えて語中折り返しが起きるため幅連動で可変にする。
     1段目のfallbackはmin()非対応の旧ブラウザ用。兄弟ページと同じ流儀。 */
  font-size: 40px;
  font-size: min(46px, calc((100vw - 63px) / 18.6));
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: var(--ls-heading);
  margin: 0 0 26px;
}
.ai-sales-lp .hero-catch strong { color: var(--denet-red); }
.ai-sales-lp .hero-copy {
  text-wrap: pretty; /* 最終行が「す。」だけになるのを防ぐ */
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  margin: 0 0 24px;
  max-width: 40em;
}
.ai-sales-lp .hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* 入口の分岐リンク（読み手別）。CTAより弱く、しかし見落とさない強さに置く */
.ai-sales-lp .hero-jump { margin: 26px 0 0; }
.ai-sales-lp .hero-jump-label {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.ai-sales-lp .hero-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-sales-lp .hero-jump-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--ink-navy);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
/* 同じページ内の下方向へ飛ぶことを示す矢印 */
.ai-sales-lp .hero-jump-list a::before { content: "↓"; font-size: 12px; color: var(--denet-red); }
.ai-sales-lp .hero-jump-list a:hover {
  background: var(--denet-red-50);
  border-color: var(--denet-red);
  color: var(--denet-red);
}

/* ================================================================
   PROBLEM
   ================================================================ */
.ai-sales-lp .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ai-sales-lp .card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.ai-sales-lp .card-title { font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 12px; line-height: var(--lh-heading); }
.ai-sales-lp .card-desc { margin: 0; color: var(--fg-2); font-size: var(--fs-body); line-height: var(--lh-body); }
.ai-sales-lp .problem-num {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--denet-red-50);
  color: var(--denet-red);
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* 課題の締め（原因の1行） */
.ai-sales-lp .problem-bridge {
  margin: 36px auto 0;
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  color: var(--fg-1);
  text-align: center;
  text-wrap: balance;
}
.ai-sales-lp .problem-bridge strong { color: var(--ink-navy); }

/* ================================================================
   TRIAL（①次の商談の準備づくり）
   ================================================================ */
.ai-sales-lp .trial-body { display: grid; gap: 22px; max-width: 1000px; }
.ai-sales-lp .trial-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 28px 30px;
}
.ai-sales-lp .trial-pricebox { border-left: 1px solid var(--border-1); padding-left: 28px; }
.ai-sales-lp .trial-list { margin: 0; padding-left: 22px; color: var(--fg-2); }
.ai-sales-lp .trial-list li { margin: 8px 0; }
.ai-sales-lp .trial-price { font-size: 19px; font-weight: 700; color: var(--ink-navy); margin: 0 0 6px; }

/* 注意書き（期待値の予防線・転送者向け） */
.ai-sales-lp .callout {
  margin-top: 26px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-left: 5px solid var(--denet-red);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 20px 24px;
}
.ai-sales-lp .callout-label { font-size: 18px; font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 10px; line-height: var(--lh-heading); }
.ai-sales-lp .callout p:last-child { margin-bottom: 0; }
.ai-sales-lp .callout p { color: var(--fg-2); margin: 0 0 10px; }
.ai-sales-lp .notes-list { margin: 26px 0 0; padding-left: 22px; color: var(--fg-2); font-size: 16px; }
.ai-sales-lp .notes-list li { margin: 10px 0; }

/* ================================================================
   OVERVIEW（全体像と、手に入る状態）
   ================================================================ */
.ai-sales-lp .ov-flow {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  text-align: center;
}
.ai-sales-lp .ov-scope-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  color: var(--denet-red);
  margin: 0 0 14px;
}
.ai-sales-lp .ov-out {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.ai-sales-lp .ov-out li {
  background: var(--bg-data);
  border: 1px solid var(--border-1);
  border-top: 3px solid var(--denet-red);
  border-radius: var(--radius-lg);
  padding: 18px 18px 20px;
}
.ai-sales-lp .ov-out-when { display: block; font-size: 12px; font-weight: 700; color: var(--fg-3); }
.ai-sales-lp .ov-out b { display: block; font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--ink); margin: 2px 0 8px; line-height: var(--lh-heading); }
.ai-sales-lp .ov-out-desc { display: block; font-size: 14px; color: var(--fg-2); }
.ai-sales-lp .ov-apply {
  margin: 20px 0;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--ink-navy);
}
.ai-sales-lp .ov-apply::before {
  content: "↓";
  display: block;
  font-size: 20px;
  font-weight: 400;
  color: #9AA3AF;
  margin-bottom: 6px;
}
.ai-sales-lp .ov-apply strong { color: var(--denet-red); }
.ai-sales-lp .ov-core {
  background: var(--ink-navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}
.ai-sales-lp .ov-core-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  color: var(--denet-red-100);
}
.ai-sales-lp .ov-core-name { font-size: var(--fs-sub-title); font-weight: var(--fw-bold); line-height: var(--lh-heading); margin: 6px 0 14px; color: #fff; }
.ai-sales-lp .ov-core-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.ai-sales-lp .ov-core-list li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 13px 8px;
  font-size: 14px;
  font-weight: 700;
}
/* Before / After */
.ai-sales-lp .ba-title {
  font-size: var(--fs-sub-title);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: var(--lh-heading);
  margin: 40px 0 16px;
  text-align: center;
}
.ai-sales-lp .ba-table {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #fff;
}
.ai-sales-lp .ba-head,
.ai-sales-lp .ba-row { display: grid; grid-template-columns: 180px 1fr 1fr; }
.ai-sales-lp .ba-head { background: var(--ink-navy); color: #fff; font-size: 13px; font-weight: 700; }
.ai-sales-lp .ba-head span { padding: 12px 18px; }
.ai-sales-lp .ba-row { border-top: 1px solid var(--border-1); }
.ai-sales-lp .ba-row span { padding: 16px 18px; font-size: 15px; }
.ai-sales-lp .ba-scene { font-weight: 700; color: var(--ink-navy); background: var(--bg-data); }
.ai-sales-lp .ba-before { color: var(--fg-3); }
.ai-sales-lp .ba-after { color: var(--fg-1); font-weight: 700; border-left: 3px solid var(--denet-red); }

/* ================================================================
   FLOW（導入の流れ）
   ================================================================ */
.ai-sales-lp .step-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.ai-sales-lp .step-item {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}
.ai-sales-lp .step-badge {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  color: var(--denet-red);
}
.ai-sales-lp .step-name { font-size: 20px; font-weight: var(--fw-bold); color: var(--ink); margin: 6px 0 8px; line-height: var(--lh-heading); }
.ai-sales-lp .step-item p { margin: 0; font-size: 15px; color: var(--fg-2); }
.ai-sales-lp .scope-box {
  margin-top: 26px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.ai-sales-lp .scope-title { font-size: 20px; font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 14px; }
.ai-sales-lp .scope-list { margin: 0; }
.ai-sales-lp .scope-list > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border-3);
}
.ai-sales-lp .scope-list > div:first-child { border-top: none; }
.ai-sales-lp .scope-list dt { font-weight: 700; color: var(--ink-navy); font-size: 15px; }
.ai-sales-lp .scope-list dd { margin: 0; color: var(--fg-2); font-size: 15px; }
.ai-sales-lp .scope-note { margin: 16px 0 0; font-size: 13px; color: var(--fg-3); }

/* ================================================================
   JOURNEY（HOW IT WORKS：実物5ステップ）
   ================================================================ */
.ai-sales-lp .journey { display: grid; gap: 22px; margin-top: 40px; }
.ai-sales-lp .jstep {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  box-shadow: var(--shadow-md);
}
.ai-sales-lp .jstep-nopic { grid-template-columns: 1fr; background: var(--bg-data); }
.ai-sales-lp .jshot {
  background: #EEF1F4;
  border-left: 1px solid var(--border-1);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ai-sales-lp .jshot img {
  width: 100%;
  /* 縦長のキャプチャは上部だけ見せる（全体はクリックで拡大） */
  max-height: 420px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-sm);
  border: 1px solid #CFD5DD;
  background: #fff;
  box-shadow: 0 6px 18px rgba(44, 62, 85, 0.14);
  cursor: zoom-in;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ai-sales-lp .jshot img:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(44, 62, 85, 0.2); }
.ai-sales-lp .jshot-zoom { margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--fg-3); }
.ai-sales-lp .jbody { padding: 28px 30px; align-self: center; }
.ai-sales-lp .jnum {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  color: var(--denet-red);
}
.ai-sales-lp .jnum .jp { font-family: var(--font-jp); letter-spacing: 0; color: var(--fg-3); }
.ai-sales-lp .jtitle { font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--ink); margin: 8px 0 12px; line-height: var(--lh-heading); }
.ai-sales-lp .jbody p { margin: 0 0 12px; color: var(--fg-2); font-size: 16px; }
.ai-sales-lp .jmeta { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ai-sales-lp .jmeta li {
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-soft);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--fg-2);
}
.ai-sales-lp .jstep-nopic .jmeta li { background: #fff; }

/* ロープレ2種 */
.ai-sales-lp .rp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
.ai-sales-lp .rp-card { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 16px 18px; }
.ai-sales-lp .rp-card b { display: block; color: var(--ink-navy); font-size: 15px; margin-bottom: 6px; }
.ai-sales-lp .rp-card p { margin: 0; font-size: 15px; }
.ai-sales-lp .rp-opt {
  border-left: 3px solid var(--denet-red);
  padding-left: 12px;
  font-size: 15px;
  margin: 0 0 14px;
}
.ai-sales-lp .rp-opt b { color: var(--denet-red); }
.ai-sales-lp .journey-note { margin: 18px 0 0; font-size: 13px; color: var(--fg-3); }

/* 画像の拡大表示 */
.ai-sales-lp .lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  z-index: 9000;
  cursor: zoom-out;
}
.ai-sales-lp .lightbox.is-open { display: flex; }
.ai-sales-lp .lightbox img {
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.ai-sales-lp .lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* ================================================================
   PLANS
   ================================================================ */
.ai-sales-lp .plan-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.ai-sales-lp .plan-rail-item {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 26px 24px;
}
.ai-sales-lp .plan-rail-item-main { border: 2px solid var(--denet-red); }
.ai-sales-lp .plan-rail-item-main::before {
  content: "まずはここから";
  position: absolute;
  top: -13px;
  left: 20px;
  background: var(--denet-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.ai-sales-lp .plan-step { font-family: var(--font-en); font-size: 13px; font-weight: 700; color: var(--denet-red); }
.ai-sales-lp .plan-name { font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--ink); margin: 4px 0 10px; line-height: var(--lh-heading); }
.ai-sales-lp .plan-rail-item p { margin: 0; color: var(--fg-2); font-size: 16px; }
.ai-sales-lp .plan-price {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink-navy);
  margin-top: 18px;
}
/* 3枚のカードで説明文の長さが違っても、金額の高さをそろえる */
.ai-sales-lp .plan-rail-item .plan-price { margin-top: auto; padding-top: 18px; }
.ai-sales-lp .plan-price-ask { font-family: var(--font-jp); font-size: 22px; }
.ai-sales-lp .plan-term { font-size: 13px; color: var(--fg-3); }

.ai-sales-lp .plan-after {
  margin-top: 18px;
  background: #fff;
  border: 1px dashed #C4CAD3;
  border-radius: var(--radius-xl);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.ai-sales-lp .plan-after-label { font-size: 13px; font-weight: 700; color: var(--fg-3); }
.ai-sales-lp .plan-after-name { font-size: var(--fs-card-title); font-weight: var(--fw-bold); color: var(--ink); margin: 4px 0 8px; line-height: var(--lh-heading); }
.ai-sales-lp .plan-after p { margin: 0; color: var(--fg-2); font-size: 16px; }
.ai-sales-lp .plan-after-price { text-align: right; }
.ai-sales-lp .plan-after-price .plan-price { margin-top: 0; white-space: nowrap; }
.ai-sales-lp .plan-after-price .plan-term { display: block; }

/* ================================================================
   ROI（試算のサンプル）
   当社は削減率を主張しない。現状の時間量＋仮定3本の感度表という形にして、
   効果の断定が生まれないようにしている（php 側の実装コメントも参照）。
   ================================================================ */
.ai-sales-lp .roi-box {
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.ai-sales-lp .roi-title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: var(--lh-heading);
  margin: 0 0 8px;
}
.ai-sales-lp .roi-title-2 { margin-top: 32px; }
.ai-sales-lp .roi-lead { margin: 0 0 16px; font-size: var(--fs-body); color: var(--fg-2); }
.ai-sales-lp .roi-table {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ai-sales-lp .roi-stage-label { margin: 0 0 10px; font-size: 13px; font-weight: var(--fw-bold); color: var(--fg-2); }
.ai-sales-lp .roi-table-stage { max-width: 720px; }
.ai-sales-lp .roi-table-stage .roi-trow span { font-size: 26px; font-weight: var(--fw-bold); padding: 18px 16px; text-align: center; }
.ai-sales-lp .roi-table-stage .roi-trow span:last-child { color: var(--denet-red); }
.ai-sales-lp .roi-table-stage .roi-head span { text-align: center; }
.ai-sales-lp .roi-head,
.ai-sales-lp .roi-trow { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; }
.ai-sales-lp .roi-table-stage .roi-head,
.ai-sales-lp .roi-table-stage .roi-trow { grid-template-columns: repeat(3, 1fr); }
.ai-sales-lp .roi-head {
  background: var(--ink-navy);
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.5;
}
.ai-sales-lp .roi-head span { padding: 10px 16px; }
.ai-sales-lp .roi-trow { border-top: 1px solid var(--border-3); }
.ai-sales-lp .roi-trow span { padding: 13px 16px; font-size: var(--fs-small); font-family: var(--font-en); color: var(--ink); }
/* 試算フォーム（読者が自分の数字を入れる） */
.ai-sales-lp .roi-calc {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  max-width: 860px;
}
.ai-sales-lp .roi-calc-in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 22px 24px;
  background: var(--bg-data);
}
.ai-sales-lp .roi-field { display: block; }
.ai-sales-lp .roi-field-label { display: block; font-size: 13px; font-weight: var(--fw-bold); color: var(--fg-2); margin-bottom: 8px; }
.ai-sales-lp .roi-field-label em { display: block; font-style: normal; font-size: 11px; font-weight: 400; color: var(--fg-3); }
.ai-sales-lp .roi-field-box { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--fg-2); }
.ai-sales-lp .roi-calc input {
  width: 100%;
  max-width: 110px;
  padding: 9px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.ai-sales-lp .roi-calc input:focus { outline: 2px solid var(--denet-red); outline-offset: 1px; }
.ai-sales-lp .roi-calc-out { display: grid; grid-template-columns: repeat(3, 1fr); }
.ai-sales-lp .roi-calc-cell { padding: 18px 20px; border-left: 1px solid var(--border-3); }
.ai-sales-lp .roi-calc-cell:first-child { border-left: none; }
.ai-sales-lp .roi-calc-key { display: block; font-size: 12px; color: var(--fg-3); line-height: 1.6; min-height: 2.4em; }
.ai-sales-lp .roi-calc-cell strong { display: block; margin-top: 4px; font-size: 15px; font-weight: var(--fw-bold); color: var(--ink); }
.ai-sales-lp .roi-calc-cell strong span { font-family: var(--font-en); font-size: 26px; margin-right: 2px; }
.ai-sales-lp .roi-calc-gain { background: var(--denet-red-50); }
.ai-sales-lp .roi-calc-gain strong,
.ai-sales-lp .roi-calc-gain strong span { color: var(--denet-red); }

.ai-sales-lp .roi-note { margin: 16px 0 0; font-size: 13px; line-height: 1.8; color: var(--fg-3); }

/* ================================================================
   WHY NOW（外部調査）
   ================================================================ */
.ai-sales-lp .evidence { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 28px; margin-top: 40px; }
.ai-sales-lp .quote-box { background: var(--ink-navy); color: #fff; border-radius: var(--radius-xl); padding: 28px; }
.ai-sales-lp .quote-box strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.55; margin-bottom: 14px; }
.ai-sales-lp .quote-box p { margin: 0; color: #DCE4EE; font-size: 13px; }
.ai-sales-lp .bar-set { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-xl); padding: 26px; }
.ai-sales-lp .bar-row { margin: 16px 0; }
.ai-sales-lp .bar-head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--fg-2); }
.ai-sales-lp .bar-val { font-family: var(--font-en); color: var(--ink-navy); }
.ai-sales-lp .bar-track { display: block; height: 10px; background: #ECEFF2; border-radius: var(--radius-pill); overflow: hidden; margin-top: 7px; }
.ai-sales-lp .bar-fill { display: block; height: 100%; width: var(--w); background: var(--ink-navy); border-radius: var(--radius-pill); }
.ai-sales-lp .bar-fill-key { background: var(--denet-red); }
.ai-sales-lp .bar-note { margin: 16px 0 0; font-size: 13px; color: var(--fg-3); }

/* ================================================================
   WHY US / CASE
   ================================================================ */
.ai-sales-lp .case-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-navy);
  background: var(--bg-data);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  margin-bottom: 10px;
}
.ai-sales-lp .case-note { margin: 24px 0 0; font-size: var(--fs-small); color: var(--fg-2); }
.ai-sales-lp .case-note a { color: var(--denet-red); }
.ai-sales-lp .whyus-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--denet-red-50);
  color: var(--denet-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ================================================================
   FAQ
   ================================================================ */
.ai-sales-lp .faq-list { max-width: 960px; }
.ai-sales-lp .faq-list details {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  padding-inline: 20px;
}
.ai-sales-lp .faq-list summary {
  cursor: pointer;
  font-weight: var(--fw-bold);
  color: var(--ink);
  padding-block: 18px;
  font-size: 18px;
  line-height: var(--lh-heading);
}
.ai-sales-lp .faq-list p { margin: 0 0 18px; color: var(--fg-2); }

/* ================================================================
   最終CTA / 戻りリンク / SP追従
   ================================================================ */
.ai-sales-lp #cta {
  background: var(--denet-red);
  background-image: radial-gradient(120% 140% at 50% -20%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  color: #fff;
  text-align: center;
}
.ai-sales-lp .cta-inner { max-width: 820px; margin-inline: auto; }
.ai-sales-lp .cta-eyebrow {
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: #FFD2D8;
  margin: 0 0 12px;
}
.ai-sales-lp .cta-title { font-size: var(--fs-sec-title); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: #fff; margin: 0 0 16px; }
.ai-sales-lp #cta p { max-width: 720px; margin: 0 auto 28px; color: #FFE9EE; }
.ai-sales-lp .cta-btn {
  text-wrap: balance;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--denet-red);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: 18px;
  padding: 19px 38px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ai-sales-lp .cta-btn:hover {
  background: #FFF3F4;
  color: var(--denet-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}
.ai-sales-lp .cta-btn svg { width: 20px; height: 20px; }
.ai-sales-lp .cta-assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  font-size: 14px;
  color: #FFE9EE;
}
.ai-sales-lp .cta-assure li::before { content: "✓"; margin-right: 7px; font-weight: var(--fw-bold); color: #fff; }


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1180px) {
  .ai-sales-lp .evidence { grid-template-columns: 1fr; }
  .ai-sales-lp .grid-3 { grid-template-columns: 1fr 1fr; }
  .ai-sales-lp .ov-out { grid-template-columns: 1fr 1fr; }
  .ai-sales-lp .step-rail { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ai-sales-lp { --fs-body: 16px; --fs-body-lg: 18px; --container-pad: 18px; }
  .ai-sales-lp section { padding-block: 56px; }
  .ai-sales-lp #hero { padding: 16px 0 56px; }

  /* 見出しのスマホ時サイズ。兄弟ページ・前版と同値にそろえる */
  .ai-sales-lp .sec-head { margin-bottom: 36px; }
  .ai-sales-lp .hero-catch {
    font-size: 22px;
    font-size: clamp(22px, (100vw - 40px) / 18.6, 34px);
    line-height: 1.45;
    margin-bottom: 20px;
  }
  .ai-sales-lp .sec-title { font-size: 28px; padding-left: 14px; }
  .ai-sales-lp .sec-title::before { width: 5px; }
  .ai-sales-lp .cta-title { font-size: 28px; }
  .ai-sales-lp .cta-btn { width: 100%; justify-content: center; padding: 17px 20px; font-size: 16px; }
  .ai-sales-lp .cta-assure { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
  .ai-sales-lp .ba-title,
  .ai-sales-lp .ov-core-name { font-size: 21px; }
  .ai-sales-lp .card-title,
  .ai-sales-lp .jtitle,
  .ai-sales-lp .plan-name,
  .ai-sales-lp .plan-after-name,
  .ai-sales-lp .ov-out b { font-size: 20px; }
  .ai-sales-lp .step-name,
  .ai-sales-lp .scope-title { font-size: 19px; }
  .ai-sales-lp .callout-label,
  .ai-sales-lp .faq-list summary { font-size: 17px; }
  .ai-sales-lp .sec-lead,
  .ai-sales-lp .problem-bridge,
  .ai-sales-lp .ov-apply { font-size: 16px; }
  .ai-sales-lp .sec-lead { margin-top: 16px; }
  /* PC用に手動で入れた <br> はスタイル上だけ無効化し、文節折り返しに任せる */
  .ai-sales-lp .hero-catch br,
  .ai-sales-lp .sec-title br { display: none; }
  .ai-sales-lp .grid-3,
  .ai-sales-lp .plan-rail,
  .ai-sales-lp .rp-pair { grid-template-columns: 1fr; }
  .ai-sales-lp .ov-core-list { grid-template-columns: 1fr 1fr; }
  .ai-sales-lp .journey .jstep,
  .ai-sales-lp .journey .jstep-nopic { grid-template-columns: 1fr; }
  .ai-sales-lp .jshot { border-left: none; border-top: 1px solid var(--border-1); }
  .ai-sales-lp .jbody { padding: 24px 22px; }
  .ai-sales-lp .plan-after,
  .ai-sales-lp .trial-spec,
  .ai-sales-lp .ov-out,
  .ai-sales-lp .step-rail { grid-template-columns: 1fr; }
  .ai-sales-lp .ba-head { display: none; }
  .ai-sales-lp .ba-row { grid-template-columns: 1fr; }
  .ai-sales-lp .ba-row span { padding: 12px 16px; }
  .ai-sales-lp .ba-before::before { content: "いま："; font-weight: 700; color: var(--fg-2); }
  .ai-sales-lp .ba-after::before { content: "型を作ったあと："; font-weight: 700; color: var(--denet-red); }
  .ai-sales-lp .ba-after { border-left: none; border-top: 1px solid var(--border-3); }
  .ai-sales-lp .scope-list > div { grid-template-columns: 1fr; gap: 4px; }
  .ai-sales-lp .roi-box { padding: 22px 18px; }
  .ai-sales-lp .roi-head { display: none; }
  .ai-sales-lp .roi-trow { grid-template-columns: 1fr; gap: 0; }
  .ai-sales-lp .roi-calc-in { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .ai-sales-lp .roi-calc-out { grid-template-columns: 1fr; }
  .ai-sales-lp .roi-calc-cell { border-left: none; border-top: 1px solid var(--border-3); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .ai-sales-lp .roi-calc-key { min-height: 0; }
  .ai-sales-lp .roi-calc-cell strong { margin-top: 0; white-space: nowrap; }
  .ai-sales-lp .roi-table-stage .roi-head { display: grid; }
  .ai-sales-lp .roi-table-stage .roi-head span { padding: 8px 4px; font-size: 11px; }
  .ai-sales-lp .roi-table-stage .roi-trow span { font-size: 20px; padding: 14px 4px; }
  .ai-sales-lp .roi-trow span { padding: 4px 16px; }
  .ai-sales-lp .roi-trow span:last-child { padding-bottom: 14px; }
  .ai-sales-lp .ov-flow { padding: 24px 20px; }
  .ai-sales-lp .trial-pricebox { border-left: none; border-top: 1px solid var(--border-1); padding-left: 0; padding-top: 22px; }
  .ai-sales-lp .plan-after-price { text-align: left; }
  .ai-sales-lp .hero-cta-row .btn-primary { width: 100%; }
  .ai-sales-lp .hero-tagline { font-size: 15px; margin-bottom: 18px; }
  .ai-sales-lp .hero-scope { font-size: 13px; padding: 12px 0; margin: 22px 0 24px; }
  .ai-sales-lp .hero-scope span { padding: 3px 12px 3px 0; }
  .ai-sales-lp .hero-scope span::before { margin-right: 7px; }
  .ai-sales-lp .hero-jump-list { gap: 8px; }
  .ai-sales-lp .hero-jump-list a { padding: 8px 13px; font-size: 13px; }
  .ai-sales-lp .cta-inline { flex-direction: column; align-items: stretch; }
  .ai-sales-lp .cta-inline-link { justify-content: center; }

}