/* ============================================================
   工場AI参謀 伴走型システム開発 LP — 固有スタイル
   ------------------------------------------------------------
   作成：2026-11-01
   指示書：design_handoff_codev_lp/README.md
   デザイン：design_handoff_codev_lp/工場AI参謀 伴走型システム開発 LP.dc.html

   ■ このファイルの役割
     styles.css は factory-ai-sanbo-lp/styles.css の「完全コピー」で、
     1バイトも変更していない（diff で差分ゼロを保つ）。
     本LPは本体LPと同じ部品・構成・余白・フォントを使い、
     「色だけ」をグリーン系に差し替える。その差分がこのファイル。

   ■ 読み込み順
     index.html で styles.css → styles.codev.css の順に読む。
     後から読むこのファイルが勝つ（同じ詳細度なら後勝ち）。

   ■ 構成
     1. デザイントークン上書き（:root）
     2. 直書き色の上書き（本体CSSの紺色ベタ書きを機械抽出して置換）
     3. 文脈依存の色の手当て（2.で一律置換できなかったもの）
     4. DC版に合わせたレイアウト・タイポの微調整
     5. 新規部品（本体LPに無いもの。接頭辞 cd-）
     6. レスポンシブ

   ■ 本体LPが更新されたときの手順
     styles.css を再コピーし、2. のブロックを作り直す。
     （紺の残存チェック：grep -iE "1F6FD0|8FB8E8|10192A|16273D" で
       このファイルに緑への上書きがあるかを確認する）
   ============================================================ */


/* ------------------------------------------------------------
   1. デザイントークン上書き（README「Design Tokens」表）
   ------------------------------------------------------------ */
:root {
  /* 面・背景 */
  --color-base-darkest: #07231A;   /* 本体 #0E1522 */
  --color-base-dark:    #0B2E22;   /* 本体 #10192A */
  --color-card-bg:      #0F3A2C;   /* 本体 #111C2C */
  --color-footer:       #061C15;   /* 本体 #0B111C */

  /* アクセント */
  --color-blue-main:  #12A36E;     /* 本体 #1F6FD0 */
  --color-blue-dark:  #12483A;     /* 本体 #16273D */
  --color-blue-light: #9FE8C9;     /* 本体 #8FB8E8 */
  --color-yellow:     #12A36E;     /* 本体は黄を警告色に使わない方針を踏襲 */

  /* グラデーション */
  --gradient-cta:    linear-gradient(135deg, #12A36E, #12483A);
  --gradient-hero:   linear-gradient(155deg, #0B2E22 0%, #12483A 70%, #1A5C48 100%);
  --gradient-dark:   linear-gradient(160deg, #0B2E22, #12483A);
  --gradient-stripe: linear-gradient(90deg, #3DDC97 0%, #7FE5B9 45%, transparent 100%);

  /* 影 */
  --shadow-header-cta: 0 4px 12px rgba(18, 163, 110, 0.3);
  --shadow-cta:        0 6px 16px rgba(18, 163, 110, 0.4);
  --shadow-sticky:     0 4px 14px rgba(18, 163, 110, 0.5);

  /* 本LPで追加した色（cd- 部品と文脈依存の手当てで使う） */
  --cd-emerald:      #3DDC97;   /* 明るいエメラルド：数字・glow・ストライプ */
  --cd-emerald-soft: #7FE5B9;
  --cd-green-text:   #0E8A5C;   /* 白地に置く緑文字（--color-blue-main より濃く、可読性を確保） */
  --cd-green-pale:   #EDF8F3;   /* 淡緑の面 */
  --cd-green-pale2:  #DCF2E7;   /* 淡緑の面（濃いほう） */
  --cd-green-row:    #FBFDFC;   /* 表の行見出しの地 */
  --cd-rule:         #E2E7EE;   /* 罫線（本体と同じ） */
  --cd-text:         #23303F;   /* 本文（本体と同じ） */
  --cd-text-sub:     #55677D;   /* 補助（本体と同じ） */
  --cd-text-weak:    #8894A6;   /* 注記 */
}


/* ------------------------------------------------------------
   2. 直書き色の上書き
   ------------------------------------------------------------
   本体 styles.css には変数を経由しない紺色のベタ書きが約100ルール
   ある。見落としを防ぐため、styles.css を機械的に走査して
   「対象色を含むルールの、対象色を含む宣言だけ」を抽出し、
   色を置換したものを以下に並べている。セレクタ・メディアクエリは
   本体と同一なので、後勝ちでそのまま上書きされる。
   ------------------------------------------------------------ */
.marker {
  background: linear-gradient(transparent 62%, rgba(61, 220, 151, 0.55) 62%);
}
.marker-light {
  background: linear-gradient(transparent 62%, rgba(61, 220, 151, 0.45) 62%);
}
.section-dark::before {
  background-image: repeating-linear-gradient( 45deg, rgba(159, 232, 201, 0.045) 0 1px, transparent 1px 10px );
}
.section-dark-corner {
  border: 1px solid rgba(159, 232, 201, 0.4);
}
.section-label-light .section-label-tick span:nth-child(2), .section-label-light .section-label-tick span:nth-child(3) {
  background: rgba(159, 232, 201, 0.5);
}
.hero-stripe {
  background: linear-gradient(90deg, #12A36E 0%, #7FE5B9 45%, transparent 100%);
}
.hero-glow {
  background: radial-gradient(1000px 520px at 78% 28%, rgba(61, 220, 151, 0.2), transparent 70%);
}
.hero-points {
  background: rgba(159, 232, 201, 0.22);
}
.point-card:nth-child(2) {
  background: #124535;
  box-shadow: inset 0 0 0 1px rgba(159, 232, 201,0.18);
}
.hero-stats {
  border-top: 1px solid rgba(159, 232, 201, 0.2);
  background: rgba(6, 28, 21, 0.5);
}
.stat-item {
  border-right: 1px solid rgba(159, 232, 201, 0.16);
}
.concern-num {
  color: #C7D5CE;
}
.answer-band {
  background: linear-gradient(135deg, #07231A, #164536);
}
.answer-stripe {
  background: linear-gradient(90deg, transparent 0%, #12A36E 50%, transparent 100%);
}
.answer-glow {
  background: radial-gradient(700px 320px at 50% 0%, rgba(61, 220, 151, 0.22), transparent 72%);
}
.about-panel-footer {
  color: #12483A;
}
.value-card-top {
  background: linear-gradient(145deg, #164536, #164536);
}
.value-number {
  color: rgba(159, 232, 201, 0.5);
}
.ba-before-strike {
  text-decoration-color: #C7D5CE;
}
.time-value-flow-item.is-highlight {
  background: #12483A;
}
.time-value-flow-tag {
  background: rgba(61, 220, 151, 0.15);
}
.time-value-flow-item.is-highlight .time-value-flow-tag {
  background: rgba(159, 232, 201, 0.2);
}
.time-value-after {
  background: #EDF8F3;
}
.time-value-tasks-highlight .time-value-task {
  background: rgba(61, 220, 151, 0.15);
  border: 1px solid rgba(61, 220, 151, 0.3);
}
.transfer-badge {
  background: #EDF8F3;
}
.transfer-task {
  text-decoration-color: #C7D5CE;
}
.transfer-tag {
  background: rgba(18, 163, 110, 0.12);
}
.transfer-list span {
  text-decoration-color: #CFDED6;
}
.transfer-list span::before {
  background: #C7D5CE;
}
.transfer-tags span {
  background: #EDF8F3;
}
.time-created-panel {
  border-bottom: 1px solid rgba(159, 232, 201, 0.18);
}
.time-created-panel::before {
  background-image: repeating-linear-gradient( 45deg, rgba(159, 232, 201, 0.045) 0 1px, transparent 1px 10px );
}
.time-created-panel::after {
  border: 1px solid rgba(159, 232, 201, 0.3);
}
.time-created-divider {
  background: rgba(159, 232, 201, 0.28);
}
.time-created-grid {
  background: rgba(159, 232, 201, 0.18);
}
.time-value-divider span {
  background: #D3DED8;
}
.time-value-highlight {
  background: linear-gradient(transparent 58%, rgba(18, 163, 110, 0.28) 58%);
}
.compare-row-label {
  background: #FBFDFC;
}
.compare-ours-cell {
  background: #EDF8F3;
  border-top: 1px solid rgba(18, 163, 110, 0.15);
}
.compare-card {
  background: #EDF8F3;
}
.price-pill {
  background: rgba(61, 220, 151, 0.12);
}
.price-badge {
  background: #EDF8F3;
}
.flow-step {
  box-shadow: 0 2px 8px rgba(0, 40, 30, 0.04);
}
.flow-complete {
  background: linear-gradient(135deg, #E6F6EE 0%, #F0FAF5 100%);
}
.faq-toggle {
  background: #EDF8F3;
}
.thanks-icon {
  background: #EDF8F3;
}
.sticky-cta {
  background: rgba(7, 35, 26, 0.96);
}
::selection {
  background: rgba(18, 163, 110, 0.28);
}
.scroll-progress {
  background: linear-gradient(90deg, #12A36E 0%, #7FE5B9 60%, #9FE8C9 100%);
  box-shadow: 0 0 12px rgba(61, 220, 151, 0.5);
}
.btn-primary {
  box-shadow: 0 6px 18px rgba(18, 163, 110, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover {
  box-shadow: 0 10px 24px rgba(18, 163, 110, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
.header {
  border-bottom: 1px solid rgba(7, 35, 26, 0.08);
  box-shadow: 0 1px 0 rgba(7, 35, 26,0.02);
}
.header.is-scrolled {
  box-shadow: 0 4px 20px rgba(7, 35, 26, 0.06);
}
.hero-plate {
  box-shadow: 0 12px 30px rgba(0,0,0,0.25), inset 0 -2px 0 rgba(18, 163, 110,0.15);
}
.point-card:hover::before {
  border-color: rgba(159, 232, 201, 0.35);
}
.concern-item:hover {
  background: linear-gradient(90deg, rgba(18, 163, 110,0.04), transparent 70%);
}
.concern-icon {
  background: linear-gradient(135deg, #EDF8F3, #DCF2E7);
}
.concern-item:hover .concern-icon {
  background: linear-gradient(135deg, #DCF2E7, #DCF2E7);
}
.answer-band {
  border-top: 1px solid rgba(159, 232, 201,0.15);
}
.answer-band::before {
  background-image: repeating-linear-gradient(45deg, rgba(159, 232, 201, 0.05) 0 1px, transparent 1px 12px);
}
.about-panel:hover {
  box-shadow: 0 12px 30px rgba(7, 35, 26, 0.06);
}
.about-panel-item.is-active {
  background: linear-gradient(180deg, #F2FAF6, #FFFFFF);
}
.value-card:hover {
  box-shadow: 0 18px 36px rgba(7, 35, 26, 0.10);
  border-color: rgba(18, 163, 110, 0.28);
}
.value-card-top::before {
  background-image: linear-gradient(rgba(159, 232, 201,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 232, 201,0.06) 1px, transparent 1px);
}
.value-card-top::after {
  background: radial-gradient(500px 200px at 30% 20%, rgba(61, 220, 151,0.28), transparent 60%);
}
.ba-card:hover {
  box-shadow: 0 14px 32px rgba(7, 35, 26, 0.08);
  border-color: rgba(18, 163, 110, 0.25);
}
.time-created-number {
  text-shadow: 0 0 30px rgba(159, 232, 201,0.15);
}
.usecase-card:hover {
  box-shadow: 0 14px 30px rgba(7, 35, 26, 0.07);
  border-color: rgba(18, 163, 110, 0.28);
}
.compare-circle .mark-svg {
  filter: drop-shadow(0 2px 6px rgba(18, 163, 110,0.35));
}
.compare-card:hover {
  box-shadow: 0 8px 20px rgba(7, 35, 26,0.06);
}
.price-card {
  border: 1px solid rgba(18, 163, 110, 0.08);
  box-shadow: 0 20px 50px rgba(7, 35, 26,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
}
.price-card::before {
  background: linear-gradient(90deg, #12A36E, #7FE5B9, #9FE8C9);
}
.price-card::after {
  background: radial-gradient(circle, rgba(18, 163, 110,0.08), transparent 70%);
}
.price-number {
  background: linear-gradient(135deg, #12A36E, #12483A);
}
.flow-step:hover {
  border-color: rgba(18, 163, 110, 0.28);
  box-shadow: 0 14px 30px rgba(7, 35, 26, 0.07);
}
.faq-item:hover {
  border-color: rgba(18, 163, 110, 0.35);
  box-shadow: 0 6px 16px rgba(7, 35, 26,0.04);
}
.faq-item.is-open {
  border-color: rgba(18, 163, 110, 0.45);
  background: #FAFDFB;
}
.form-card {
  box-shadow: 0 24px 60px rgba(7, 35, 26,0.35);
}
.form-card::before {
  background: linear-gradient(90deg, #12A36E, #7FE5B9, #9FE8C9);
}
.form-label input:focus {
  box-shadow: 0 0 0 3px rgba(18, 163, 110, 0.12);
}
.footer-info-line a {
  text-decoration-color: rgba(159, 232, 201,0.4);
}
.sticky-cta {
  background: rgba(7, 35, 26, 0.88);
  border-top: 1px solid rgba(159, 232, 201, 0.15);
}
.beyond-kicker {
  border: 1px solid rgba(159, 232, 201, 0.22);
  background: rgba(159, 232, 201, 0.06);
}
.beyond-kicker::before, .beyond-kicker::after {
  background: rgba(159, 232, 201, 0.5);
}
.beyond-headline-mark::after {
  background: linear-gradient(90deg, rgba(18, 163, 110,0.6), rgba(61, 220, 151,0.3));
}
.beyond-step {
  background: rgba(11, 46, 34, 0.65);
  border: 1px solid rgba(159, 232, 201, 0.18);
}
.beyond-step:hover {
  border-color: rgba(159, 232, 201, 0.42);
  background: rgba(18, 72, 58, 0.8);
}
.beyond-step.is-goal {
  background: linear-gradient(160deg, #12483A, #1A5C48);
  border-color: rgba(159, 232, 201, 0.45);
  box-shadow: inset 0 0 0 1px rgba(159, 232, 201,0.12), 0 10px 30px rgba(0,0,0,0.25);
}
.beyond-step-marker {
  border-bottom: 1px solid rgba(159, 232, 201, 0.15);
}
.beyond-tags span {
  background: rgba(159, 232, 201, 0.12);
  border: 1px solid rgba(159, 232, 201, 0.18);
}
.beyond-tags-goal span {
  background: rgba(18, 163, 110, 0.28);
  border-color: rgba(159, 232, 201, 0.4);
}
.beyond-connector-line {
  background: linear-gradient(90deg, transparent, rgba(159, 232, 201,0.5), transparent);
}
.beyond-connector-dot {
  box-shadow: 0 0 8px rgba(159, 232, 201, 0.6);
}
.beyond-conclusion-mark > span:first-child, .beyond-conclusion-mark > span:last-child {
  background: rgba(159, 232, 201, 0.4);
}
.program-tag {
  border: 1px solid rgba(159, 232, 201, 0.5);
}
.plate-course {
  border-left: 1px solid rgba(7, 35, 26, 0.16);
}
@media (max-width: 768px) {
  .stat-item {
    border-bottom: 1px solid rgba(159, 232, 201, 0.16);
  }
}
@media (max-width: 960px) {
  .beyond-connector-line {
    background: linear-gradient(180deg, transparent, rgba(159, 232, 201,0.5), transparent);
  }
}
@media (max-width: 640px) {
  .plate-course {
    border-top: 1px solid rgba(7, 35, 26, 0.16);
  }
}


/* ------------------------------------------------------------
   3. 文脈依存の色の手当て
   ------------------------------------------------------------
   2. の一律置換では正しい色にならなかったもの。
   2. より後ろに置いて後勝ちさせる。
   ------------------------------------------------------------ */

/* 本体では #24405E → #1B2A3D の2色グラデ。同じ紺が別の緑に化けるため個別指定
   （DC版 04/REASON カードヘッダ：#164536 → #0F3A2C） */
.value-card-top {
  background: linear-gradient(145deg, #164536, #0F3A2C);
}

/* 進捗バー・カード上端の3〜4pxグラデは中間色を明るいエメラルドにする */
.scroll-progress {
  background: linear-gradient(90deg, #12A36E 0%, var(--cd-emerald) 60%, #9FE8C9 100%);
}
.price-card::before,
.form-card::before {
  background: linear-gradient(90deg, #12A36E, var(--cd-emerald), #9FE8C9);
}

/* ISSUEアイコンのホバー。本体は淡青2色→緑2色が同値に潰れるため個別指定 */
.concern-item:hover .concern-icon {
  background: linear-gradient(135deg, #DCF2E7, #C6EBD9);
}

/* 蛍光ペン（DC版の指定値に合わせる） */
.marker {
  background: linear-gradient(transparent 62%, rgba(61, 220, 151, 0.5) 62%);
}
.marker-light {
  background: linear-gradient(transparent 62%, rgba(61, 220, 151, 0.45) 62%);
}
.time-value-highlight {
  background: linear-gradient(transparent 58%, rgba(61, 220, 151, 0.4) 58%);
}

/* 白地に置く緑文字は --color-blue-main（#12A36E）だとコントラストが足りないため
   1段濃い #0E8A5C にする（DC版の指定値） */
.section-label,
.about-step-num,
.flow-label,
.flow-step-circle,
.faq-q,
.form-subtitle,
.plate-course {
  color: var(--cd-green-text);
}
/* 塗りつぶしのSTEP1だけは白文字のまま（本体の .flow-step-highlight を維持） */
.flow-step-highlight .flow-step-circle {
  color: var(--color-white);
}

/* 本体では .time-value-divider span の詳細度が勝ち、中央の点が線になる。
   DC版は6px角の点なのでここで戻す */
.time-value-divider .time-value-divider-dot {
  flex: none;
  width: 6px;
  height: 6px;
  background: #12A36E;
}


/* ------------------------------------------------------------
   4. DC版に合わせたレイアウト・タイポの微調整
   ------------------------------------------------------------
   本体LPと本LPで「部品は同じだが寸法が違う」箇所だけを書く。
   ------------------------------------------------------------ */

/* ---- Header：本体は position:relative。本LPは追従させる ---- */
.header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
}
.header-logo {
  gap: 12px;
}
.header-logo-img {
  height: 52px;
}

/* ---- HERO ---- */
.hero-h1 {
  font-size: clamp(40px, 6.4vw, 80px);
  line-height: 1.22;
}
.hero-sub {
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 500;
  line-height: 2;
  max-width: 760px;
}
.hero-points {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.point-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- 01 / ISSUE ---- */
.section-title-lg {
  font-size: clamp(26px, 3.6vw, 44px);
}
.concern-list {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  padding-top: 4px;
}
.concern-item {
  gap: 18px;
  padding: 24px 8px;
}

/* ---- 03 / ABOUT・02 / WHY（同じ about-panel を使う） ---- */
.about-panel-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* ---- 04 / REASON（本体の value-card を 2×2 で使う） ---- */
.value-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.value-card {
  border: 1px solid var(--cd-rule);
}
.value-card-top {
  height: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 14px;
  padding: 22px 26px 18px;
}
/* カテゴリ見出し（業界理解／コスト／安心／伴走）。番号・本文行の上に
   独立した行で小さく出す。flex-basis:100% で強制改行させている */
.cd-reason-kicker {
  flex: 1 0 100%;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-blue-light);
}
.value-number {
  font-size: 22px;
}
.value-label {
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: 0.04em;
}
.value-card-bottom {
  padding: 24px 26px;
}

/* ---- 06 / BEFORE → AFTER（5枚：1段3枚＋2段2枚の中央寄せ） ---- */
.ba-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.ba-card {
  flex: 1 1 280px;
  max-width: min(100%, calc(33.333% - 14px));
  min-width: min(280px, 100%);
}

/* ---- 06 / FLOW ----
   本体は3列固定グリッドのまま（6カード＝2行×3列）。
   STEP1→2→3、STEP4→5→6 の横矢印と、3→4間の縦矢印＋補足を追加し、
   「試作を確認してから契約する」流れが一目で分かるようにしている。
   カードの中身は 見出し（STEP番号＋名称）＋1行説明 に短縮。 */
.cd-flow-steps {
  row-gap: 8px;
}
.flow-step {
  position: relative;
}
/* 横矢印：同じ行の隣のカードへ。3列グリッドの時だけ出す
   （2列・1列になったら隣のカードの意味が変わるため消す） */
.cd-flow-arrow-right::after {
  content: "";
  display: none;
}
@media (min-width: 901px) {
  .cd-flow-arrow-right::after {
    content: "→";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translate(50%, -50%);
    width: 20px;
    height: 20px;
    font-size: 15px;
    line-height: 1;
    color: #B8C4D4;
    font-weight: 400;
    pointer-events: none;
  }
}
/* STEP3「無料試作」をわずかに強調 */
.cd-flow-key {
  border-color: rgba(18, 163, 110, 0.35);
  box-shadow: 0 2px 8px rgba(0, 40, 30, 0.04), inset 0 0 0 1px rgba(18, 163, 110, 0.12);
}
.cd-flow-key .flow-step-circle {
  background: var(--gradient-cta);
  color: var(--color-white);
  border-color: transparent;
}
/* STEP3→STEP4：試作を確認してから契約する、という転換点。
   grid-column:1/-1 で常に独立した行になるため、列数が変わっても崩れない */
.cd-flow-pivot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
}
.cd-flow-pivot-arrow {
  font-size: 18px;
  line-height: 1;
  color: #12A36E;
  font-weight: 300;
}
.cd-flow-pivot-note {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cd-green-text);
  padding: 4px 12px;
  border: 1px dashed rgba(18, 163, 110, 0.4);
  border-radius: var(--radius-full);
}

/* ---- 09 / PRICE（本体は1プラン。本LPは3分割＋CTAなので枠だけ使う） ---- */
.price-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(61, 220, 151, 0.12);
}


/* ------------------------------------------------------------
   5. 新規部品（本体LPに無いもの。接頭辞 cd- ＝ codev）
   ------------------------------------------------------------ */

/* ---- ヘッダーのピル「伴走型システム開発」 ---- */
.cd-header-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #12A36E;
  border-radius: var(--radius-sm);
  color: var(--cd-green-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ---- 表の共通ラッパ（横スクロール＋ヒント） ---- */
.cd-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cd-scroll-hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--cd-text-weak);
}

/* ---- 05 / LINEUP の3列表 ---- */
.cd-lineup {
  min-width: 720px;
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 1.6fr;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14px;
}
.cd-lineup-th {
  padding: 16px 22px;
  background: var(--color-base-dark);
  color: var(--color-white);
  font-weight: 700;
}
.cd-lineup-th-in {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.cd-lineup-th-out {
  background: var(--gradient-cta);
  font-weight: 900;
}
.cd-lineup-name {
  padding: 18px 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--cd-green-row);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-lineup-diamond {
  flex: none;
  width: 8px;
  height: 8px;
  background: #12A36E;
  transform: rotate(45deg);
}
.cd-lineup-name-text {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-base-dark);
}
.cd-lineup-in {
  padding: 18px 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--cd-text-sub);
  line-height: 1.8;
}
.cd-lineup-out {
  padding: 18px 22px;
  border-top: 1px solid rgba(18, 163, 110, 0.15);
  background: var(--cd-green-pale);
  color: var(--color-blue-dark);
  font-weight: 700;
  line-height: 1.8;
}

/* ---- 08 / COMPARE の4列表 ---- */
.cd-compare {
  min-width: 760px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.25fr;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 13.5px;
  background: var(--color-white);
}
.cd-compare-th {
  padding: 18px 22px;
  background: var(--color-base-dark);
  color: var(--color-white);
  font-weight: 700;
}
.cd-compare-th-other {
  padding: 18px 12px;
  background: #F1F3F6;
  color: #374151;
  font-weight: 700;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}
.cd-compare-th-ours {
  padding: 14px 12px;
  background: var(--gradient-cta);
  color: var(--color-white);
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 -3px 0 var(--cd-emerald);
}
.cd-compare-ours-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--color-blue-light);
  letter-spacing: 0.18em;
  margin-bottom: 4px;
}
.cd-compare-rowlabel {
  padding: 15px 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--cd-green-row);
  font-weight: 700;
  color: var(--color-base-dark);
}
.cd-compare-cell {
  padding: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
  color: var(--cd-text-sub);
  line-height: 1.7;
}
.cd-compare-cell-ours {
  padding: 15px;
  border-top: 1px solid rgba(18, 163, 110, 0.15);
  background: var(--cd-green-pale);
  color: var(--color-blue-dark);
  font-weight: 700;
  line-height: 1.7;
}

/* ---- 09 / PRICE の3分割 ---- */
.cd-price-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--cd-rule);
}
.cd-price-item {
  background: var(--color-white);
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.cd-price-pill {
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--cd-green-pale);
  color: var(--color-blue-dark);
  font-size: 13px;
  font-weight: 900;
}
.cd-price-free {
  font-family: var(--font-mono);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-blue-dark);
  background: var(--gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-price-value {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-blue-dark);
  white-space: nowrap;
}
.cd-price-note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--cd-text-sub);
}
.cd-price-cta {
  width: 100%;
  padding: 24px clamp(20px, 3vw, 32px) 32px;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--cd-rule);
}

/* ---- バナー2枚並び（11 / WITH）。1枚ものは本体の .dev-promo をそのまま使う ---- */
.cd-banner-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.cd-banner-pair .dev-promo {
  max-width: none;
}

/* ---- 中央寄せの締めブロック（05 / LINEUP の補足＋ボタン など） ---- */
.cd-center-block {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.cd-center-lead {
  font-size: 14px;
  line-height: 2;
  color: var(--cd-text-sub);
  max-width: 760px;
}

/* ---- FINAL CTA 左カラムの英字ラベル ---- */
.cd-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-blue-light);
  letter-spacing: 0.3em;
}
.cd-cta-note {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.72);
}


/* ------------------------------------------------------------
   6. レスポンシブ
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  .hero-h1 {
    font-size: clamp(32px, 8vw, 44px);
  }
  /* BEFORE→AFTER は3列上限を解除して自然に折り返す */
  .ba-card {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .cd-header-pill {
    display: none;
  }
}


/* ------------------------------------------------------------
   7. 追記分
   ------------------------------------------------------------ */

/* ---- 02 / WHY の3課題カード（ABOUTと同じ about-panel を使うが、
        見出しが長いぶん本文寄りの寸法にする） ---- */
.cd-whycards .about-panel-item {
  padding: 30px 28px;
  gap: 12px;
}
.cd-whycards .about-step-title {
  font-size: 17px;
  line-height: 1.6;
}

/* ---- 06 / BEFORE → AFTER の締めブロック ---- */
.cd-ba-conclusion {
  margin-top: 40px;
}

/* ---- フォーム：本体LPに無い指定を補う ----
   ・本体は form 要素に縦の間隔が付いておらず項目が詰まる
   ・本体は textarea を使っていないため指定が無い
   ・本体は script.js が付ける .error に見た目が無い          */
.form-content form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-label textarea {
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.7;
  background: #FAFBFD;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-label textarea:hover {
  background: #fff;
}
.form-label textarea:focus {
  outline: none;
  border-color: #12A36E;
  box-shadow: 0 0 0 3px rgba(18, 163, 110, 0.12);
  background: #fff;
}
.form-label input.error,
.form-label textarea.error {
  border-color: #E5342A;
  background: #FFF6F5;
}

/* ---- 本体LPから引き継いだ不具合の修正 ----
   480px以下で .section の左右paddingが clamp(16px,4vw,24px) に切り替わるのに、
   全幅に広げる .answer-band の負マージンは clamp(20px,5vw,72px) のままなので、
   375〜390px幅で左右に2pxずつ（計4px）はみ出し、横スクロールが発生する。
   ※本体LP（factory-ai-sanbo-lp）にも同じ症状あり。別途そちらも要修正。 */
@media (max-width: 480px) {
  .answer-band {
    margin-left: calc(-1 * clamp(16px, 4vw, 24px));
    margin-right: calc(-1 * clamp(16px, 4vw, 24px));
  }
}

/* ---- 上書き生成の副作用の打ち消し ----
   2. の色上書きはメディアクエリの外（トップレベル）に出るため、
   styles.css 側がメディアクエリ内で「none」に戻しているプロパティを
   読み込み順で復活させてしまう。該当2件をここで戻す。
   （検出方法：styles.codev.css のトップレベル宣言と、
     styles.css のメディアクエリ内宣言で、セレクタ＋プロパティが
     一致するものを突き合わせる） */
@media (max-width: 640px) {
  /* プレートが2段になるので区切りは左罫線ではなく上罫線 */
  .plate-course {
    border-left: none;
  }
}

@media (max-width: 480px) {
  /* ロゴは本LPで52pxに上げているが、狭い画面では本体LPと同じ40pxに戻す
     （上の 4. の .header-logo-img がメディアクエリ外にあるため明示的に書く） */
  .header-logo-img {
    height: 44px;
  }
}

/* ---- 法務ページ（privacy / tokushoho）のヘッダーロゴ ----
   .legal-header の地は --color-base-darkest（濃色）だが、
   ロゴ画像は濃紺の線画なので地に溶けて読めない。白に起こす。
   ※本体LP（factory-ai-sanbo-lp）にも同じ症状あり。別途そちらも要修正。 */
.legal-body .legal-header-logo img {
  filter: brightness(0) invert(1);
}


/* ============================================================
   8. 2026-11-01 修正分
   ------------------------------------------------------------
   ・HEROの数字帯（hero-stats）を削除
   ・03/ABOUT・10/SUPPORT を削除し、SUPPORTの内容はREASON 03へ統合
   ・04/LINEUP にデモ画面の表示枠を追加
   ・05/BEFORE→AFTER はスマホでも5枚すべて表示
   ・08/PRICE は金額を載せず「個別にお見積」に
   ・CTA・追従バーのボタンを「無料デモ相談」1本に集約
   ============================================================ */

/* ---- HERO：数字帯を外したぶん、下の余白を詰める ---- */
.hero-inner {
  padding-bottom: clamp(52px, 6vw, 88px);
}

/* ---- 03 / REASON：SUPPORTから統合した箇条書き ----
   文字サイズ・色は .value-desc と同じ。行頭は小さなダイヤ（45°の正方形） */
/* ---- 04 / LINEUP：デモ画面の表示 ---- */
.cd-demo-shot {
  margin-top: 32px;
}
.cd-demo-img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--cd-rule);
  border-radius: var(--radius-md);
}
/* 「試作画面例」の一言。画像の外・上に置く注記。バッジ化せず、
   実画面と誤解されないことだけ伝わればよいので地味に */
.cd-demo-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cd-text-weak);
}

/* ---- 06 / BEFORE → AFTER 結びの小見出し ---- */
.cd-ba-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cd-green-text);
}

/* ---- 05 / BEFORE → AFTER：スマホでも5枚すべて見せる ----
   本体LPは6枚構成のため 768px以下で4枚目以降を隠している。
   本LPは5枚で内容も各業務ごとに違うので、その非表示を打ち消す。 */
@media (max-width: 768px) {
  .ba-cards .ba-card:nth-child(n + 4) {
    display: flex;
  }
}

/* ---- 08 / PRICE：金額ではなく「個別にお見積」を置く ----
   「無料」（IBM Plex 40〜56px）と並べて見劣りしないサイズに上げる */
.cd-price-value {
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: 0.02em;
}

/* ---- 追従バー：ボタンが1つになったので幅いっぱいに ---- */
.sticky-btn-primary {
  max-width: 520px;
}
@media (max-width: 640px) {
  .sticky-btn-primary {
    max-width: none;
  }
}

/* ---- ヘッダーCTA：文言が長くなったので、極狭幅でも1行に収める ---- */
.header-cta {
  white-space: nowrap;
}
@media (max-width: 360px) {
  .header-cta {
    padding: 10px 12px;
    font-size: 11px;
  }
}


/* ============================================================
   9. 2026-11-01 追記：02/WHY 比較図（伴走型の進め方）
   ------------------------------------------------------------
   「一般的な開発」と「工場AI参謀の伴走型開発」を上下2段で比較する図。
   伝えたいのは工程の順番ではなく、契約前に試作・現場確認まで
   済ませてから契約する、という進め方そのもの。
   「無料試作」「現場確認」を一番明るい色（--cd-emerald）で強調し、
   「契約・本開発」を白地の旗のような見た目にして、契約の位置が
   一目でわかるようにしている。一般的な開発の側は中立的な記述に
   とどめ、否定的な言い回しは使わない。
   ============================================================ */
.cd-process-wrap {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cd-process-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-process-heading {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--color-base-dark);
  line-height: 1.5;
}
.cd-process-sub {
  font-size: 14px;
  line-height: 1.9;
  color: var(--cd-text-sub);
  max-width: 640px;
}
.cd-process-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 図解の下の締め文。中央寄せで短く */
.cd-process-closing {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 700;
  color: var(--color-base-dark);
  text-align: center;
}
.cd-process-row {
  padding: 24px 28px;
  background: var(--color-white);
  border: 1px solid var(--cd-rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cd-process-row.is-ours {
  background: var(--color-base-dark);
  border-color: var(--color-blue-dark);
}
.cd-process-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cd-text-weak);
}
.is-ours .cd-process-label {
  color: var(--color-blue-light);
}
.cd-process-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.cd-process-chip {
  flex: none;
  padding: 9px 16px;
  background: #F1F3F6;
  color: var(--cd-text-sub);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.is-ours .cd-process-chip {
  background: #12A36E;
  color: var(--color-white);
}
/* 一番伝えたい2ステップ。一般的な緑より明るいエメラルドで、他の
   チップより目立たせる（文字は濃緑にして明るい地でも読める） */
.cd-process-chip.is-highlight {
  background: var(--cd-emerald);
  color: #07231A;
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.3);
}
/* 契約の位置を示す旗。緑の並びの中で唯一の白地にして、境目として目立たせる */
.cd-process-chip.is-contract {
  background: var(--color-white);
  color: var(--color-base-dark);
  border: 1.5px solid var(--cd-emerald);
}
/* 「契約前」のタグ。チップ列の先頭に置き、以降のどこまでが契約前かを示す */
.cd-process-tag {
  flex: none;
  padding: 5px 12px;
  border: 1px dashed rgba(159, 232, 201, 0.55);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-blue-light);
}
.cd-process-arrow {
  flex: none;
  color: #B8C4D4;
  font-size: 14px;
}
.is-ours .cd-process-arrow {
  color: var(--color-blue-light);
}
.cd-process-note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--cd-text-sub);
}
.is-ours .cd-process-note {
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 480px) {
  .cd-process-chip {
    font-size: 12px;
    padding: 8px 12px;
  }
}