/* ============================================================
   工場AI参謀 工場広報コース LP — 固有スタイル（v2）
   ------------------------------------------------------------
   作成：2026-10-07／指示書：koho-course-lp-handoff-v2/HANDOFF.md
   見本：reference/design-reference.html（キャンバス Version 14）

   ■ v1（koho-course-lp-handoff。Version 11）からの変更点
     SPEED・TEAMを新設、AFTERを廃止、ISSUE/TARGETの項目数を削減、
     COMPAREを◎○△表に作り直し、PROGRAMを非対称カードに変更、
     全体のセクション余白を圧縮。詳細は実装ログ参照。

   ■ このファイルの役割
     styles.css は factory-ai-sanbo-lp/styles.css の「完全コピー」で、
     1バイトも変更していない（diff で差分ゼロを保つ）。
     本LPの見た目はすべてこのファイルに書く（HANDOFF §4-1）。

   ■ クラス設計（HANDOFF §4-2）
     - 見た目用のクラスは接頭辞 kc-（koho course）で新しく作る
     - styles.css からはリセット・:root トークン・--container-*・
       .header / .faq-* の骨格だけを再利用し、見た目はここで上書きする
     - 基調色は --kc-c1 系の3変数を差し替えれば全体が変わる作り
       （HANDOFF §5-1 ルール6。本番はブルー固定）

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


/* ------------------------------------------------------------
   0. デザイントークン（HANDOFF §5）
   ------------------------------------------------------------ */
:root {
  /* 色（HANDOFF §5-1。見本で使っている色は白を含めて20色だけ） */
  --kc-c1: #6DB9F7;            /* 基調の面（空色） */
  --kc-c1-deep: #1A63C4;       /* 白・淡色地の上の文字用ブルー */
  --kc-c1-pale: #EAF4FE;       /* 淡い空色地 */
  --kc-y: #FFD43B;             /* アクセントの面（黄） */
  --kc-y-pale: #FFF8DB;        /* 淡黄地 */
  --kc-ink: var(--color-base-dark); /* #10192A。文字・縁取り・影・濃紺セクション */
  --kc-navy-deep: #16273D;     /* 濃紺グラデの終点（既存と同じ値） */
  --kc-footer: var(--color-footer); /* #0B111C */

  --kc-text: #23303F;          /* 本文 */
  --kc-text-sub: #4A5466;      /* 補足・カード本文・SPEED外注側の文字 */
  --kc-text-faq-a: #3A4658;    /* FAQの回答 */

  --kc-rule: #D9DEE6;          /* 細罫 */
  --kc-rule-dotted: #C9CED6;   /* 点線・表の罫 */
  --kc-rule-speed: #B4BBC6;    /* SPEEDの縦線・点線 */
  --kc-circle-gray: #8B94A3;   /* SPEED外注側の丸の縁・矢印 */
  --kc-bg-tablehead: #EEF0F3;  /* 表ヘッダ・「専門会社」の帯 */
  --kc-bg-before: #F1F3F6;     /* BEFOREセル・SPEED外注側の地 */
  --kc-bg-rowhead: #FAFBFC;    /* 表の行見出し */
  --kc-photo-bg: #DCE3EC;      /* 写真の読み込み前の地 */

  /* 影（ぼかし無しのずらし影。縁取りも含め全部濃紺） */
  --kc-shadow-btn: 4px 4px 0 var(--kc-ink);
  --kc-shadow-btn-sm: 3px 3px 0 var(--kc-ink);
  --kc-shadow-panel: 5px 5px 0 var(--kc-ink);
  --kc-shadow-panel-xl: 6px 6px 0 var(--kc-ink); /* SPEED上段・監修者カード・林さんの写真 */
  --kc-shadow-panel-c1: 6px 6px 0 var(--kc-c1);
  --kc-shadow-panel-y: 5px 5px 0 var(--kc-y);

  /* 地模様 */
  --kc-hatch-navy: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 10px),
                   linear-gradient(160deg, var(--kc-ink), var(--kc-navy-deep));
  --kc-hatch-yellow: repeating-linear-gradient(45deg, rgba(16, 25, 42, 0.05) 0 2px, transparent 2px 14px), var(--kc-y);

  /* セクション余白（HANDOFF §5-3。既存の --section-padding-y を上書きして使う） */
  --section-padding-y: clamp(38px, 3.6vw, 52px);
}

/* ------------------------------------------------------------
   0-b. セクション共通
   ------------------------------------------------------------ */
.kc-section {
  padding: var(--section-padding-y) var(--section-padding-x);
  background: #FFFFFF;
}
.kc-section--wide { /* container-wide を使うセクションの目印（スタイルなし） */ }
.kc-section--pale-blue { background: var(--kc-c1-pale); }
.kc-section--pale-yellow { background: var(--kc-y-pale); }
.kc-section--team { padding: clamp(48px, 5vw, 76px) var(--section-padding-x); }

/* 見出しブロックと中身のあいだの間隔（HANDOFF §5-3「セクション内の間隔」） */
.kc-section-inner { display: flex; flex-direction: column; gap: 22px; }
.kc-section-inner--24 { gap: 24px; }
.kc-section-inner--30 { gap: 30px; }

.kc-section-head--tight { gap: 8px; }

/* 絶対配置の装飾（角マーク・背景文字）の基準にするための position:relative */
.kc-stack { position: relative; }

/* PRICEセクション専用のコンテナ幅（940px。既存 --container-narrow は860pxのため別建て） */
.kc-container-price { max-width: 940px; margin: 0 auto; }

/* 中央寄せ崩れの修正（代表指摘。2026-10-07）。
   styles.css の .container-wide / .container-narrow / .container-faq は
   max-width しか定義しておらず、margin:0 auto は基底の .container 側にしかない。
   本LPでは .container-wide 等を単独で使っている箇所が多数あり、CUSTOMIZE以降の
   セクションが左詰め（センタリングされない）状態になっていた。
   ここで margin:0 auto を明示的に補う（styles.css 側は編集しない）。 */
.container-wide,
.container-narrow,
.container-faq {
  margin: 0 auto;
}

/* ------------------------------------------------------------
   1. 共通パーツ（HANDOFF §6）
   ------------------------------------------------------------ */

/* --- アイコン（インラインSVG。<symbol>+<use>で定義。絵文字・画像は使わない） --- */
.kc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.kc-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kc-icon--arrow { width: 17px; height: 17px; }
.kc-icon--arrow-ba { width: 16px; height: 16px; stroke-width: 2.6; }
.kc-icon--arrow-speed { width: 12px; height: 12px; stroke-width: 2.6; }
.kc-icon--check-sm { width: 15px; height: 15px; stroke-width: 2.8; }
.kc-icon--line { width: 22px; height: 22px; stroke-width: 1.9; }
.kc-icon--line-sm { width: 21px; height: 21px; stroke-width: 1.9; }
.kc-icon--line-lg { width: 28px; height: 28px; stroke-width: 1.9; }

/* --- ボタン --- */
.kc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 30px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--kc-ink);
  background: var(--kc-y);
  border: 2px solid var(--kc-ink);
  border-radius: 10px;
  box-shadow: var(--kc-shadow-btn);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
}
.kc-btn:hover { opacity: 1; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--kc-ink); }
@media (prefers-reduced-motion: reduce) {
  .kc-btn { transition: none; }
  .kc-btn:hover { transform: none; }
}
.kc-btn--white { background: #FFFFFF; }
.kc-btn--sm {
  min-height: 46px;
  padding: 8px 22px;
  font-size: 14px;
  box-shadow: var(--kc-shadow-btn-sm);
}
.kc-btn--sm:hover { box-shadow: 2px 2px 0 var(--kc-ink); }
.kc-btn--block { width: 100%; margin-top: 2px; border: none; }
.kc-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* --- セクションラベル（目盛り4本＋番号） --- */
.kc-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--kc-c1-deep);
}
.kc-label-ticks {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}
.kc-label-ticks span { width: 2px; display: block; background: var(--kc-ink); }
.kc-label-ticks span:nth-child(1) { height: 11px; }
.kc-label-ticks span:nth-child(2) { height: 5px; background: var(--kc-c1); }
.kc-label-ticks span:nth-child(3) { height: 5px; background: var(--kc-y); }
.kc-label-ticks span:nth-child(4) { height: 11px; }

.kc-label--dark { color: var(--kc-c1); }
.kc-label--dark .kc-label-ticks span:nth-child(1),
.kc-label--dark .kc-label-ticks span:nth-child(4) { background: #FFFFFF; }

/* --- 見出し（h2） --- */
.kc-h2 {
  margin: 0;
  font-size: clamp(24px, 3.1vw, 38px);
  font-weight: 900;
  color: var(--kc-ink);
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.kc-h2--dark { color: #FFFFFF; }
.kc-h2--issue { font-size: clamp(20px, 3.4vw, 42px); }
.kc-h2--speed { font-size: clamp(26px, 3.6vw, 44px); }
.kc-h2--outsourcing { font-size: clamp(24px, 3.4vw, 42px); }
.kc-h2--cta { font-size: clamp(28px, 3.7vw, 46px); }
.kc-h2--balance { text-wrap: balance; } /* 縦積み時の崩れD（TEAM） */

.kc-lead {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  color: var(--kc-text-sub);
  line-height: 1.9;
}
.kc-lead--ink { color: var(--kc-ink); font-size: clamp(15.5px, 1.7vw, 18px); letter-spacing: 0.02em; }

.kc-section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kc-section-head--center { align-items: center; text-align: center; }

/* --- マーカー（黄・青ハイライト） --- */
.kc-marker { padding: 0 3px; background: linear-gradient(transparent 58%, var(--kc-y) 58%); }
.kc-marker--hero { background: linear-gradient(transparent 56%, var(--kc-y) 56%); }
.kc-marker--c1 { background: linear-gradient(transparent 58%, var(--kc-c1) 58%); }
.kc-marker--price { background: linear-gradient(transparent 70%, var(--kc-y) 70%); }

/* --- チップ --- */
.kc-chip {
  display: inline-block;
  padding: 3px 12px;
  background: var(--kc-c1-pale);
  color: var(--kc-ink);
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--kc-ink);
  border-radius: 999px;
  line-height: 1.6;
}
.kc-chip--y { background: var(--kc-y-pale); }
.kc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- 小見出し（左に黄の4px線） --- */
.kc-subhead {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--kc-ink);
  letter-spacing: 0.08em;
  padding-left: 9px;
  border-left: 4px solid var(--kc-y);
  line-height: 1.5;
}
.kc-subhead--lg { font-size: clamp(17px, 2vw, 21px); padding-left: 12px; border-left-width: 6px; line-height: 1.5; }

/* --- 丸アイコン --- */
.kc-icon-circle {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--kc-ink);
  color: var(--kc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kc-icon-circle--c1 { background: var(--kc-c1); }
.kc-icon-circle--y { background: var(--kc-y); }
.kc-icon-circle--sm { width: 42px; height: 42px; }

/* --- L字の角マーク --- */
.kc-corner { position: absolute; width: 20px; height: 20px; }
.kc-corner--tl { top: 16px; left: 16px; border-top: 2px solid; border-left: 2px solid; }
.kc-corner--tr { top: 16px; right: 16px; border-top: 2px solid; border-right: 2px solid; }
.kc-corner--bl { bottom: 16px; left: 16px; border-bottom: 2px solid; border-left: 2px solid; }
.kc-corner--br { bottom: 16px; right: 16px; border-bottom: 2px solid; border-right: 2px solid; }
.kc-corner--ink { border-color: var(--kc-ink); }
.kc-corner--c1 { border-color: var(--kc-c1); }

/* --- 傾いたタグ（CUSTOMIZEの7つの「〜したい」／SPEED締めの4枚） --- */
.kc-tag-tilt {
  display: inline-block;
  padding: 6px 15px;
  background: #FFFFFF;
  border: 2px solid var(--kc-ink);
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--kc-ink);
  line-height: 1.6;
}
.kc-tag-tilt--plain { border: none; } /* SPEED締めの4枚は縁なし */
.kc-tag-tilt:nth-child(1) { transform: rotate(-1.5deg); }
.kc-tag-tilt:nth-child(2) { transform: rotate(1deg); }
.kc-tag-tilt:nth-child(3) { transform: rotate(-1deg); }
.kc-tag-tilt:nth-child(4) { transform: rotate(1.5deg); }
.kc-tag-tilt:nth-child(5) { transform: rotate(-1deg); }
.kc-tag-tilt:nth-child(6) { transform: rotate(1deg); }
.kc-tag-tilt:nth-child(7) { transform: rotate(-1.5deg); }

/* --- 見出し帯つきカード（BENEFITで使用） --- */
.kc-band-card {
  background: #FFFFFF;
  border: 2px solid var(--kc-ink);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------
   2. ヘッダー（既存 .header を上書き。追従化もここで付与）
   ------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  min-height: 72px;
  height: auto;
  padding: 10px clamp(16px, 4vw, 48px);
  gap: 10px 16px;
  flex-wrap: wrap;
  background: #FFFFFF;
  border-bottom: 2px solid var(--kc-ink);
}
.kc-header-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* ヘッダーの画像ロゴ（本体LP factory-ai-sanbo-lp/img/logo-header.png と同じ素材。
   本体LPの .header-logo-img と同じ高さ48px/40px基準に合わせる） */
.kc-logo-img { height: 48px; width: auto; object-fit: contain; }
/* kc-logo-ai：FVロゴプレート（.kc-plate-name内）の「AI」だけに使う青文字。
   ヘッダーはロゴ画像化により .kc-logo（テキストロゴ）は廃止済み */
.kc-logo-ai { color: var(--kc-c1-deep); }
.kc-logo-pill {
  padding: 4px 13px;
  background: var(--kc-c1);
  color: var(--kc-ink);
  border: 2px solid var(--kc-ink);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .kc-header-logo { flex-basis: 100%; }
  .kc-logo-img { height: 40px; }
}

/* ------------------------------------------------------------
   3. hero（#hero）
   ------------------------------------------------------------ */
.kc-hero { position: relative; overflow: hidden; background: var(--kc-c1); }
.kc-hero-bgchar {
  position: absolute;
  right: -3vw;
  top: 42%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: clamp(300px, 44vw, 620px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.22);
  line-height: 0.8;
  user-select: none;
  pointer-events: none;
}
.kc-hero-inner {
  position: relative;
  max-width: 1296px;
  margin: 0 auto;
  padding: clamp(36px, 3.6vw, 52px) clamp(20px, 5vw, 72px) clamp(36px, 3.4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px 56px;
}
.kc-hero-left { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.kc-eyecatch {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--kc-ink);
  letter-spacing: 0.2em;
}
.kc-eyecatch-bar { display: inline-block; width: 28px; height: 2px; background: var(--kc-ink); }

.kc-plate {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: #FFFFFF;
  border: 2px solid var(--kc-ink);
  box-shadow: var(--kc-shadow-btn);
}
.kc-plate-name {
  display: flex;
  align-items: center;
  padding: 10px 22px 10px 16px;
  border-left: 8px solid var(--kc-y);
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  color: var(--kc-ink);
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
}
.kc-plate-course {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--kc-y);
  border-left: 2px solid var(--kc-ink);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 900;
  color: var(--kc-ink);
  letter-spacing: 0.08em;
  line-height: 1.1;
  white-space: nowrap;
}

.kc-hero-h1 {
  margin: 0;
  font-size: clamp(34px, 5.1vw, 70px);
  font-weight: 900;
  color: var(--kc-ink);
  letter-spacing: 0.01em;
  line-height: 1.26;
}

.kc-hero-lead { display: flex; flex-direction: column; gap: 8px; max-width: 600px; }
.kc-hero-lead p { margin: 0; }
.kc-hero-lead-sub { font-size: clamp(14.5px, 1.4vw, 17px); font-weight: 500; color: var(--kc-ink); line-height: 1.9; }
.kc-hero-lead-strong { font-size: clamp(15.5px, 1.6vw, 19px); font-weight: 900; color: var(--kc-ink); line-height: 1.85; }
.kc-block { display: block; }
.kc-inline-block { display: inline-block; }

.kc-hero-cta-group { display: flex; flex-direction: column; gap: 10px; }
.kc-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.kc-hero-note { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--kc-ink); }

.kc-hero-stats {
  position: relative;
  border-top: 2px solid var(--kc-ink);
  background: var(--kc-hatch-navy);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.kc-hero-stat {
  padding: clamp(16px, 1.6vw, 22px) clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.kc-hero-stat:last-child { border-right: none; }
.kc-hero-stat-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--kc-c1); letter-spacing: 0.24em; }
.kc-hero-stat-num { font-family: var(--font-mono); font-size: clamp(34px, 3.8vw, 48px); font-weight: 700; color: var(--kc-y); line-height: 1; }
/* 数字ではなく文字（「各社対応」）を表示する軸用。mono書体はCJKを持たないため角ゴシックに切り替える */
.kc-hero-stat-num--text { font-family: var(--font-sans); font-size: clamp(24px, 2.8vw, 32px); font-weight: 900; }
.kc-hero-stat-unit { font-family: var(--font-sans); font-size: 0.42em; font-weight: 900; }
.kc-hero-stat-bar { width: 32px; height: 3px; border-radius: 3px; background: var(--kc-c1); }
.kc-hero-stat-desc { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.8); line-height: 1.7; }

@media (max-width: 600px) {
  .kc-hero-ctas { flex-direction: column; }
  .kc-hero-ctas .kc-btn { width: 100%; }
}

/* ------------------------------------------------------------
   4. concern（#concern）4項目（HANDOFF v2 §7の2）
   ------------------------------------------------------------ */
.kc-concern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 40px;
  border-top: 2px solid var(--kc-ink);
}
.kc-concern-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 6px;
  border-bottom: 2px dotted var(--kc-rule-dotted);
}
.kc-concern-num { flex: none; font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--kc-c1-deep); line-height: 1.6; }
.kc-concern-body { display: flex; flex-direction: column; gap: 1px; }
.kc-concern-title { font-size: clamp(16px, 1.8vw, 18px); font-weight: 900; color: var(--kc-ink); line-height: 1.5; }
.kc-concern-desc { font-size: 14px; color: var(--kc-text-sub); line-height: 1.8; }

.kc-concern-close { margin: 0; text-align: center; font-size: clamp(19px, 2.6vw, 30px); font-weight: 900; color: var(--kc-ink); line-height: 1.7; }

/* ------------------------------------------------------------
   5. solution（#solution）
   ------------------------------------------------------------ */
.kc-solution {
  position: relative;
  overflow: hidden;
  background: var(--kc-hatch-yellow);
  border-top: 2px solid var(--kc-ink);
  border-bottom: 2px solid var(--kc-ink);
  color: var(--kc-ink);
}
.kc-solution-inner {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(36px, 3.6vw, 50px) clamp(20px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.kc-solution-badge { padding: 2px 16px; background: var(--kc-ink); color: #FFFFFF; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.3em; }
.kc-solution-headline { margin: 0; font-size: clamp(27px, 4.4vw, 52px); font-weight: 900; line-height: 1.45; letter-spacing: 0.02em; }
.kc-solution-lead { margin: 0; max-width: 860px; font-size: clamp(14.5px, 1.5vw, 16.5px); font-weight: 700; line-height: 2; }

/* 白い札「誰に、何を伝えるかを決め、AIで形にする。」（v2で新設。v1の貼り紙3語＋説明パネルを置き換え） */
.kc-solution-callout {
  margin: 0;
  padding: 10px 26px;
  background: #FFFFFF;
  border: 2px solid var(--kc-ink);
  border-radius: 12px;
  box-shadow: var(--kc-shadow-btn);
  font-size: clamp(17px, 2.2vw, 25px);
  font-weight: 900;
  line-height: 1.6;
}

.kc-solution-quote {
  width: 100%;
  margin-top: 4px;
  background: var(--kc-hatch-navy);
  border: 2px solid var(--kc-ink);
  border-radius: 14px;
  padding: clamp(22px, 2.8vw, 34px) clamp(20px, 3.4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 44px;
  text-align: left;
  color: #FFFFFF;
}
.kc-solution-quote-main { flex: 1 1 380px; min-width: 0; margin: 0; font-size: clamp(22px, 2.9vw, 36px); font-weight: 900; line-height: 1.55; letter-spacing: 0.02em; }
.kc-solution-quote-hi { color: var(--kc-ink); background: var(--kc-y); padding: 0 8px; }
.kc-solution-quote-sub { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.95; color: rgba(255, 255, 255, 0.86); }
.kc-solution-quote-sub p { margin: 0; }
.kc-solution-quote-sub strong { color: var(--kc-y); font-weight: 700; }

/* ------------------------------------------------------------
   6. about（#about）
   ------------------------------------------------------------ */
.kc-about-panel {
  background: var(--kc-ink);
  border: 2px solid var(--kc-ink);
  border-radius: 14px;
  box-shadow: var(--kc-shadow-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-about-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 2px;
}
.kc-about-cell { background: #FFFFFF; padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.kc-about-cell--y { background: var(--kc-y-pale); }
.kc-about-cell-head { display: flex; align-items: center; gap: 12px; }
.kc-about-cell-num {
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--kc-ink);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--kc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
}
.kc-about-cell-num--y { background: var(--kc-y); }
.kc-about-cell-icon { color: var(--kc-c1-deep); }
.kc-about-cell h3 { margin: 0; font-size: 19px; font-weight: 900; color: var(--kc-ink); line-height: 1.45; }
.kc-about-cell p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--kc-text-sub); }
.kc-about-foot {
  background: var(--kc-ink);
  padding: 16px 26px;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 900;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.8;
}
.kc-about-foot-hi { color: var(--kc-y); }

/* ------------------------------------------------------------
   7. customize（#customize）カード1枚（v2で簡略化）
   ------------------------------------------------------------ */
.kc-customize-card {
  background: var(--kc-c1-pale);
  border: 2px solid var(--kc-ink);
  border-radius: 14px;
  padding: clamp(18px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kc-customize-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--kc-c1-deep); letter-spacing: 0.2em; display: block; }
.kc-customize-card h3 { margin: 0; font-size: 17px; font-weight: 900; color: var(--kc-ink); line-height: 1.5; }
.kc-tag-row { display: flex; flex-wrap: wrap; gap: 10px; }

.kc-customize-close { margin: 0; text-align: center; font-size: clamp(18px, 2.4vw, 28px); font-weight: 900; color: var(--kc-ink); line-height: 1.75; }

/* ------------------------------------------------------------
   8. target（#target）4分類
   ------------------------------------------------------------ */
.kc-target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.kc-target-card { background: #FFFFFF; border: 2px solid var(--kc-ink); border-radius: 12px; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.kc-target-card-head { display: flex; align-items: center; gap: 12px; }
.kc-target-card h3 { margin: 0; font-size: 17.5px; font-weight: 900; color: var(--kc-ink); line-height: 1.45; }
.kc-target-card p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--kc-text-sub); }

.kc-pill-close {
  margin: 0;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: #FFFFFF;
  border: 2px solid var(--kc-ink);
  border-radius: 999px;
  font-size: clamp(14.5px, 1.6vw, 17px);
  font-weight: 900;
  color: var(--kc-ink);
  line-height: 1.6;
}
.kc-pill-close-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kc-ink);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------
   9. content（#content）小さいカード6枚（v2で簡略化）
   ------------------------------------------------------------ */
.kc-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.kc-content-card { background: #FFFFFF; border: 2px solid var(--kc-ink); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.kc-content-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 2px solid var(--kc-ink);
  color: var(--kc-ink);
}
.kc-content-card-head--c1 { background: var(--kc-c1); }
.kc-content-card-head--y { background: var(--kc-y); }
.kc-content-card-num { font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1; }
.kc-content-card-head h3 { margin: 0; font-size: clamp(17px, 1.9vw, 20px); font-weight: 900; line-height: 1.45; }
.kc-content-card-body { padding: 16px 20px 18px; }

.kc-content-close { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.kc-content-close p { margin: 0; }
.kc-content-close-main { font-size: clamp(17px, 2.2vw, 25px); font-weight: 900; color: var(--kc-ink); line-height: 1.7; }
.kc-content-close-sub { font-size: clamp(14.5px, 1.5vw, 16px); font-weight: 700; color: var(--kc-ink); }
.kc-content-close-note { font-size: 12.5px; font-weight: 500; color: var(--kc-text-sub); }

/* ------------------------------------------------------------
   10. benefit（#benefit）v2で順番・中身を入れ替え
   ------------------------------------------------------------ */
.kc-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.kc-benefit-card-head { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 2px solid var(--kc-ink); color: var(--kc-ink); }
.kc-benefit-card-head--c1 { background: var(--kc-c1); }
.kc-benefit-card-head--y { background: var(--kc-y); }
.kc-benefit-card-head-num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; line-height: 1; }
/* 見出しの行数（1行／2行）がカードごとに違うと本文・強調コピー枠の開始位置がずれるため、
   2行分の高さを確保して揃える（代表指示。3カードの見出し位置・本文開始位置を揃える） */
.kc-benefit-card-head h3 { margin: 0; min-height: 2.9em; display: flex; align-items: center; font-size: clamp(17px, 1.9vw, 20px); font-weight: 900; line-height: 1.45; }
.kc-benefit-card-body { flex: 1; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.kc-benefit-desc { margin: 0; font-size: 14px; line-height: 1.9; color: var(--kc-text-sub); }
/* 下部の強調コピー枠。3カード同じ高さ（2行分）にして、文字数差で枠の開始位置が
   ずれないようにする（代表指示。3カードで同じデザイン・同じ位置に統一） */
.kc-benefit-note {
  margin: auto 0 0;
  min-height: calc(3.5em + 24px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--kc-y-pale);
  border: 1.5px dashed var(--kc-ink);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  color: var(--kc-ink);
  line-height: 1.75;
}

/* ------------------------------------------------------------
   11. speed（#speed）v2で新設
   ------------------------------------------------------------ */
.kc-speed-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border: 2px solid var(--kc-ink);
  border-radius: 16px;
  box-shadow: var(--kc-shadow-panel-xl);
  overflow: hidden;
}
.kc-speed-col { flex: 1 1 340px; min-width: 0; padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 16px; }
.kc-speed-col--before { background: var(--kc-bg-before); }
.kc-speed-col--after { flex: 1.25 1 380px; background: var(--kc-c1); border-left: 2px solid var(--kc-ink); }

.kc-speed-col-head { display: flex; flex-direction: column; gap: 2px; }
.kc-speed-eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; }
.kc-speed-col--before .kc-speed-eyebrow { color: var(--kc-text-sub); }
.kc-speed-col--after .kc-speed-eyebrow { color: var(--kc-ink); }
.kc-speed-col-head h3 { margin: 0; font-size: clamp(18px, 2.1vw, 22px); font-weight: 900; line-height: 1.4; }
.kc-speed-col--before .kc-speed-col-head h3 { color: var(--kc-text-sub); }
.kc-speed-col--after .kc-speed-col-head h3 { color: var(--kc-ink); }

/* はしご。丸の数字は装飾ではなく順番なので <ol> で組む（HANDOFF §7-1） */
.kc-speed-ladder { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.kc-speed-ladder li { display: flex; align-items: stretch; gap: 14px; }
.kc-speed-ladder-marker { flex: none; display: flex; flex-direction: column; align-items: center; width: 30px; }
.kc-speed-ladder-circle {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}
.kc-speed-ladder--before .kc-speed-ladder-circle { background: #FFFFFF; border: 1.5px solid var(--kc-circle-gray); color: var(--kc-text-sub); }
.kc-speed-ladder--after .kc-speed-ladder-circle { background: var(--kc-y); border: 2px solid var(--kc-ink); color: var(--kc-ink); }
.kc-speed-ladder-line { flex: 1; width: 2px; min-height: 14px; }
.kc-speed-ladder--before .kc-speed-ladder-line { background: var(--kc-rule-speed); }
.kc-speed-ladder--after .kc-speed-ladder-line { background: var(--kc-ink); }
.kc-speed-ladder-text { padding-bottom: 14px; }
.kc-speed-ladder li:last-child .kc-speed-ladder-text { padding-bottom: 0; }
.kc-speed-ladder--before .kc-speed-ladder-text { font-size: clamp(15px, 1.6vw, 17px); font-weight: 700; color: var(--kc-text-sub); line-height: 1.6; }
.kc-speed-ladder--after .kc-speed-ladder-text { font-size: clamp(16px, 1.8vw, 19px); font-weight: 900; color: var(--kc-ink); line-height: 1.6; }

/* 「公開まで」「制作コスト」を同じ階層の2段構成で見せる（代表指示。2026-10-07）。
   時間比較が主役・コスト比較は副次情報のため、コスト側は箱や傾きを付けず控えめにする */
.kc-speed-result { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.kc-speed-col--before .kc-speed-result { padding-top: 14px; border-top: 2px solid var(--kc-rule-speed); }
.kc-speed-col--after .kc-speed-result { padding-top: 14px; border-top: 2px solid var(--kc-ink); }
.kc-speed-result-row { display: flex; flex-direction: column; gap: 2px; }
.kc-speed-result-label { font-size: 12px; letter-spacing: 0.08em; }
.kc-speed-col--before .kc-speed-result-label { font-weight: 700; color: var(--kc-text-sub); }
.kc-speed-col--after .kc-speed-result-label { font-weight: 900; color: var(--kc-ink); }
.kc-speed-result-value--before { font-size: clamp(24px, 3vw, 34px); font-weight: 900; color: var(--kc-text-sub); line-height: 1.3; }
.kc-speed-result-value--after {
  align-self: flex-start;
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 900;
  color: var(--kc-ink);
  line-height: 1.25;
  background: var(--kc-y);
  border: 2px solid var(--kc-ink);
  box-shadow: var(--kc-shadow-btn);
  padding: 0 16px;
  transform: rotate(-1.5deg);
}
.kc-speed-cost-value { font-size: clamp(16px, 1.8vw, 19px); font-weight: 900; line-height: 1.3; }
.kc-speed-cost-value--before { color: var(--kc-text-sub); }
.kc-speed-cost-value--after { color: var(--kc-ink); }
.kc-speed-copy { margin: auto 0 0; padding-top: 10px; font-size: clamp(21px, 2.9vw, 36px); font-weight: 900; color: var(--kc-ink); line-height: 1.5; letter-spacing: 0.01em; }

/* 制作物ごとに見ると */
.kc-speed-items-wrap { display: flex; flex-direction: column; gap: 14px; }
.kc-speed-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 16px; }
.kc-speed-card { background: #FFFFFF; border: 2px solid var(--kc-ink); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.kc-speed-card h4 { margin: 0; padding: 10px 20px; background: var(--kc-ink); color: #FFFFFF; font-size: 16px; font-weight: 900; line-height: 1.5; }
.kc-speed-card-row { padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.kc-speed-card-row--before { border-bottom: 1px dashed var(--kc-rule-speed); }
.kc-speed-card-row--after { flex: 1; padding-bottom: 16px; background: var(--kc-c1-pale); }
.kc-speed-card-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kc-speed-card-label { font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; }
.kc-speed-card-row--before .kc-speed-card-label { color: var(--kc-text-sub); }
.kc-speed-card-row--after .kc-speed-card-label { color: var(--kc-c1-deep); }
.kc-speed-card-time--before { font-size: 14px; font-weight: 900; color: var(--kc-text-sub); }
.kc-speed-card-time--after { font-size: clamp(16px, 1.8vw, 19px); font-weight: 900; color: var(--kc-ink); }
.kc-speed-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.kc-speed-flow-chip { padding: 2px 10px; border-radius: 7px; font-size: 12.5px; line-height: 1.6; }
.kc-speed-flow-chip--before { background: var(--kc-bg-before); border: 1.5px solid var(--kc-rule-dotted); color: var(--kc-text-sub); font-weight: 700; }
.kc-speed-flow-chip--after { background: var(--kc-y); border: 1.5px solid var(--kc-ink); color: var(--kc-ink); font-weight: 900; }
.kc-speed-flow-arrow { display: inline-flex; color: var(--kc-circle-gray); }
.kc-speed-flow-arrow--after { color: var(--kc-ink); }
.kc-speed-note { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--kc-text-sub); text-align: center; }

/* 締めのブロック */
.kc-speed-closing {
  background: var(--kc-hatch-navy);
  border: 2px solid var(--kc-ink);
  border-radius: 16px;
  padding: clamp(22px, 2.8vw, 34px) clamp(20px, 3.4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  color: #FFFFFF;
}
.kc-speed-closing-tags { flex: 1 1 380px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kc-speed-closing-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kc-speed-closing-copy p { margin: 0; }
.kc-speed-closing-lead { font-size: clamp(14.5px, 1.6vw, 17px); font-weight: 700; color: rgba(255, 255, 255, 0.86); }
.kc-speed-closing-main { font-size: clamp(23px, 3.2vw, 40px); font-weight: 900; line-height: 1.5; letter-spacing: 0.02em; }

@media (max-width: 860px) {
  /* 縦積みになったときの崩れB（HANDOFF §9）。見本は右パネルの左線が残ったままなので、上線に変える */
  .kc-speed-col--after { border-left: none; border-top: 2px solid var(--kc-ink); }
}


/* ------------------------------------------------------------
   13. outsourcing（#outsourcing）
   ------------------------------------------------------------ */
.kc-outsourcing {
  position: relative;
  overflow: hidden;
  background: var(--kc-hatch-navy);
}
.kc-bgword {
  position: absolute;
  font-family: var(--font-mono);
  font-size: clamp(80px, 12vw, 170px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.kc-outsourcing .kc-bgword { left: -20px; bottom: -40px; }
.kc-price .kc-bgword { right: -30px; top: -20px; }
.kc-cta-form .kc-bgword { left: 50%; transform: translateX(-50%); bottom: -46px; }

/* サブコピー（代表指示で追加。2026-10-07「Web担当がいなくても、始められます。」の説明文） */
.kc-outsourcing-lead { margin: 0; max-width: 760px; font-size: clamp(14.5px, 1.5vw, 16.5px); font-weight: 700; color: rgba(255, 255, 255, 0.86); line-height: 1.95; }

/* 2カラム構成（社内で進める／ヤマト技研が支援）。左が主役＝黄の縁＋影、
   右は控えめ＝空色の縁のみで影なし、という強弱は既存の意匠をそのまま流用 */
.kc-outsourcing-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px; }
.kc-out-card { flex: 1 1 400px; min-width: 0; background: #FFFFFF; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.kc-out-card--inhouse { border: 2px solid var(--kc-y); box-shadow: var(--kc-shadow-panel-y); }
.kc-out-card--support { border: 2px solid var(--kc-c1); }
.kc-out-card-head { padding: 12px 20px; color: var(--kc-ink); display: flex; flex-direction: column; }
.kc-out-card-head--y { background: var(--kc-y); }
.kc-out-card-head--c1 { background: var(--kc-c1); }
.kc-out-card-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; }
.kc-out-card-head h3 { margin: 0; font-size: clamp(18px, 2vw, 21px); font-weight: 900; line-height: 1.45; }
.kc-out-card-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.kc-out-card-note { margin: 0; font-size: 13px; font-weight: 700; color: var(--kc-ink); line-height: 1.8; }

.kc-outsourcing-close { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.kc-outsourcing-close p { margin: 0; }
.kc-outsourcing-close-main { font-size: clamp(18px, 2.5vw, 30px); font-weight: 900; color: #FFFFFF; line-height: 1.75; }
.kc-hi-y { color: var(--kc-ink); background: var(--kc-y); padding: 0 8px; }

/* ------------------------------------------------------------
   14. before-after（#before-after）4行
   ------------------------------------------------------------ */
.kc-ba-list { display: flex; flex-direction: column; gap: 12px; }
.kc-ba-row { display: flex; flex-wrap: wrap; align-items: stretch; border: 2px solid var(--kc-ink); border-radius: 12px; overflow: hidden; }
.kc-ba-before { flex: 1 1 320px; min-width: 0; background: var(--kc-bg-before); padding: 11px 22px 13px; display: flex; flex-direction: column; gap: 2px; }
.kc-ba-before-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--kc-text-sub); letter-spacing: 0.18em; }
.kc-ba-before-num { margin-left: 10px; }
.kc-ba-before-text { font-size: clamp(14.5px, 1.5vw, 16px); font-weight: 500; color: var(--kc-text-sub); line-height: 1.7; }
.kc-ba-after { flex: 1 1 320px; min-width: 0; background: var(--kc-c1); padding: 11px 22px 13px; display: flex; align-items: center; gap: 16px; }
.kc-ba-after-arrow {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--kc-y);
  border: 2px solid var(--kc-ink);
  color: var(--kc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kc-ba-after-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kc-ba-after-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--kc-ink); letter-spacing: 0.18em; }
.kc-ba-after-text { font-size: clamp(15px, 1.6vw, 17px); font-weight: 900; color: var(--kc-ink); line-height: 1.7; }

.kc-ba-disclaimer { margin: 0; font-size: 12px; color: var(--kc-text-sub); text-align: center; }

@media (max-width: 680px) {
  .kc-ba-row { flex-direction: column; }
}

/* ------------------------------------------------------------
   15. compare（#compare）◎○△表
   ------------------------------------------------------------ */
.kc-compare-wrap { position: relative; overflow-x: auto; border: 2px solid var(--kc-ink); border-radius: 14px; box-shadow: var(--kc-shadow-panel); background: #FFFFFF; }
.kc-compare-hint { display: none; margin: 8px 2px 0; font-size: 12.5px; font-weight: 700; color: var(--kc-c1-deep); text-align: right; }
/* 表の min-width(720px) がコンテナ幅を超える帯（概ねタブレット幅）だけ、
   横スクロールが必要なことを示すフェードと文言を出す（見本に無い追加。実装ログに記録） */
@media (max-width: 900px) {
  .kc-compare-hint { display: block; }
  .kc-compare-wrap::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 32px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96) 70%);
    pointer-events: none;
    border-radius: 0 12px 12px 0;
  }
}
.kc-compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; }
.kc-compare-table th,
.kc-compare-table td { padding: 9px 12px; }
.kc-compare-table thead th {
  padding: 14px 12px;
  background: var(--kc-bg-tablehead);
  color: var(--kc-text);
  font-weight: 700;
  border-left: 1px solid var(--kc-rule-dotted);
}
.kc-compare-table thead th:first-child { width: 24%; padding: 14px 22px; background: var(--kc-ink); color: #FFFFFF; text-align: left; border-left: none; }
/* 自社列（4列目）。常にハイライトする */
.kc-compare-table thead th:nth-child(4) {
  width: 32%;
  background: var(--kc-c1);
  color: var(--kc-ink);
  font-weight: 900;
  border-left: 2px solid var(--kc-ink);
}
.kc-compare-table tbody th {
  padding: 9px 22px;
  background: var(--kc-bg-rowhead);
  font-weight: 700;
  color: var(--kc-ink);
  text-align: left;
  border-top: 1px solid var(--kc-rule-dotted);
}
.kc-compare-table tbody td { text-align: center; color: var(--kc-text-sub); border-top: 1px solid var(--kc-rule-dotted); background: #FFFFFF; }
.kc-compare-table tbody td:nth-child(4) {
  font-weight: 900;
  color: var(--kc-ink);
  background: var(--kc-c1-pale);
  border-left: 2px solid var(--kc-ink);
}
.kc-sym { font-weight: 900; line-height: 1.2; }
.kc-sym--other { font-size: 20px; color: var(--kc-text-sub); }
.kc-sym--ours { font-size: 24px; color: var(--kc-c1-deep); }

.kc-compare-close { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.kc-compare-close p { margin: 0; font-size: clamp(18px, 2.3vw, 26px); font-weight: 900; color: var(--kc-ink); line-height: 1.8; }

/* ------------------------------------------------------------
   16. team（#team）v2で新設
   ------------------------------------------------------------ */
.kc-team-desc {
  margin: 0;
  max-width: 860px;
  font-size: clamp(14.5px, 1.5vw, 16px);
  font-weight: 500;
  color: var(--kc-text-sub);
  line-height: 2;
}
.kc-team-desc .kc-block { font-weight: 700; color: var(--kc-ink); }

/* 監修者カード（林 辰樹） */
.kc-team-supervisor {
  background: #FFFFFF;
  border: 2px solid var(--kc-ink);
  border-radius: 16px;
  box-shadow: var(--kc-shadow-panel-xl);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.kc-team-supervisor-photo { flex: 1 1 280px; min-width: 0; background: var(--kc-c1); padding: clamp(20px, 2.8vw, 34px); display: flex; align-items: center; justify-content: center; }
.kc-team-supervisor-photo-wrap { width: 100%; max-width: 290px; }
.kc-team-supervisor-body { flex: 2 1 440px; min-width: 0; padding: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; gap: 16px; }

/* 役割ピル（監修=黄地／講師=白地） */
.kc-role-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 16px 3px 14px;
  border: 2px solid var(--kc-ink);
  border-radius: 999px;
  color: var(--kc-ink);
  line-height: 1.5;
}
.kc-role-pill--y { background: var(--kc-y); }
.kc-role-pill--white { background: #FFFFFF; }
.kc-role-pill-en { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }
.kc-role-pill-divider { width: 1.5px; height: 14px; background: var(--kc-ink); }
.kc-role-pill-ja { font-size: 15.5px; font-weight: 900; letter-spacing: 0.08em; }

.kc-team-name-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; }
.kc-team-name-block { display: flex; flex-direction: column; gap: 4px; }
.kc-team-name-block h3 { margin: 0; font-size: clamp(30px, 3.8vw, 44px); font-weight: 900; color: var(--kc-ink); line-height: 1.25; letter-spacing: 0.06em; }
.kc-team-title { font-size: 15px; font-weight: 900; color: var(--kc-ink); }
.kc-team-school { font-size: 12.5px; font-weight: 500; color: var(--kc-text-sub); }
.kc-team-school--on-color { color: var(--kc-ink); }

.kc-team-stat { display: flex; flex-direction: column; gap: 0; }
.kc-team-stat-label { font-size: 12.5px; font-weight: 900; color: var(--kc-c1-deep); letter-spacing: 0.1em; }
.kc-team-stat-num { align-self: flex-start; font-size: clamp(44px, 5.6vw, 68px); font-weight: 900; color: var(--kc-ink); line-height: 1.15; padding: 0 4px; background: linear-gradient(transparent 62%, var(--kc-y) 62%); }
.kc-team-stat-num--sm { font-size: clamp(36px, 4.4vw, 52px); }
.kc-team-stat-affix { font-size: 0.4em; }
.kc-team-stat-digits { font-family: var(--font-mono); font-weight: 700; }

.kc-team-bio { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--kc-text-sub); }
.kc-team-note { margin: 0; padding: 12px 16px; background: var(--kc-y-pale); border: 1.5px dashed var(--kc-ink); border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--kc-ink); line-height: 1.85; }

/* 講師カード2枚 */
.kc-team-instructors { display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px; }
.kc-team-instructor { flex: 1 1 400px; min-width: 0; background: #FFFFFF; border: 2px solid var(--kc-ink); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.kc-team-instructor-head { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); padding: 18px clamp(18px, 2.4vw, 26px); border-bottom: 2px solid var(--kc-ink); }
.kc-team-instructor-head--y { background: var(--kc-y); }
.kc-team-instructor-head--c1 { background: var(--kc-c1); }
.kc-team-instructor-photo { flex: none; width: clamp(92px, 11vw, 128px); }
.kc-team-instructor-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kc-team-instructor-info h3 { margin: 2px 0 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 900; color: var(--kc-ink); line-height: 1.35; letter-spacing: 0.04em; }
.kc-team-instructor-body { flex: 1; padding: 18px clamp(18px, 2.4vw, 26px) 22px; display: flex; flex-direction: column; gap: 12px; }
.kc-team-instructor-desc { margin: 0; font-size: 14px; line-height: 1.9; color: var(--kc-text-sub); }
.kc-team-instructor-note { margin-top: auto; padding: 12px 16px; background: var(--kc-y-pale); border: 1.5px dashed var(--kc-ink); border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--kc-ink); line-height: 1.85; }
.kc-team-chip-group { display: flex; flex-direction: column; gap: 8px; }

/* 写真（HANDOFF §8。丸く切り抜くことと縁取り・影だけ。filter等の加工は禁止） */
.kc-team-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--kc-ink);
  background: var(--kc-photo-bg);
}
.kc-team-photo--lead { box-shadow: var(--kc-shadow-panel-xl); }

.kc-team-closing {
  margin: 4px 0 0;
  text-align: center;
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 900;
  color: var(--kc-ink);
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   17. price（#price）v2：中央寄せ縦1列（代表指示で本体LPと見せ方を統一。2026-10-07）
   ------------------------------------------------------------ */
.kc-price { position: relative; overflow: hidden; background: var(--kc-hatch-navy); }
.kc-price-inner { position: relative; display: flex; flex-direction: column; gap: 22px; }
.kc-price-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: var(--kc-shadow-panel-c1);
  padding: clamp(28px, 3.4vw, 40px) clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.kc-price-title { margin: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 900; color: var(--kc-ink); line-height: 1.4; }
.kc-price-pill { padding: 2px 14px; background: var(--kc-c1); border: 2px solid var(--kc-ink); border-radius: 999px; font-size: 13px; font-weight: 900; color: var(--kc-ink); letter-spacing: 0.06em; }
.kc-price-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--kc-ink); flex-wrap: wrap; }
.kc-price-label { font-size: 19px; font-weight: 700; }
.kc-price-amount { font-family: var(--font-mono); font-size: clamp(54px, 7vw, 76px); font-weight: 700; line-height: 1; color: var(--kc-c1-deep); padding: 0 6px; }
.kc-price-amount-unit { font-family: var(--font-sans); font-size: 0.48em; font-weight: 900; }
.kc-price-tagline { margin: 0; font-size: clamp(19px, 2.3vw, 25px); font-weight: 900; color: var(--kc-ink); line-height: 1.5; }
.kc-price-note-dashed {
  margin: 0;
  padding: 3px 12px;
  border: 1.5px dashed var(--kc-c1-deep);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kc-c1-deep);
  line-height: 1.7;
}

.kc-price-bottom { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--kc-rule); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: var(--kc-text-sub); line-height: 1.8; text-align: center; }
.kc-price-badge { font-weight: 700; color: var(--kc-ink); background: var(--kc-c1-pale); border: 2px solid var(--kc-ink); padding: 1px 14px; border-radius: 999px; }
.kc-price-note { max-width: 560px; }

/* ------------------------------------------------------------
   18. flow（#flow）5ステップ（v2で簡略化）
   ------------------------------------------------------------ */
.kc-flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; }
.kc-step-card { background: #FFFFFF; border: 2px solid var(--kc-ink); border-radius: 12px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.kc-step-head { display: flex; align-items: center; gap: 10px; }
.kc-step-num {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--kc-ink);
  color: var(--kc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
}
.kc-step-num--c1 { background: var(--kc-c1); }
.kc-step-num--y { background: var(--kc-y); }
.kc-step-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--kc-c1-deep); }
.kc-step-card h3 { margin: 0; font-size: 16.5px; font-weight: 900; color: var(--kc-ink); line-height: 1.5; }
.kc-step-card p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--kc-text-sub); }

.kc-flow-note { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--kc-text-sub); text-align: center; }

/* ------------------------------------------------------------
   19. faq（#faq）既存 .faq-item / .faq-question / .is-open を上書き
   ------------------------------------------------------------ */
/* 開閉の実体は styles.css 側（.faq-answer { display:block !important; max-height:0;
   overflow:hidden; } .faq-item.is-open .faq-answer { max-height:400px; }）。
   display は !important で常に block固定のため、course.css側で display:none を
   書いても効かない。ここでは max-height / overflow / padding を明示的に再定義し、
   styles.css の暗黙の挙動に依存しない状態にする
   （v1実装中に実際に発生した不具合。08_実装ログ_20261007.md §9-1参照）。 */
.faq-item {
  background: #FFFFFF;
  border: 2px solid var(--kc-ink);
  border-radius: 12px;
  overflow: hidden;
}
.faq-item.is-open { box-shadow: var(--kc-shadow-btn); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 22px;
  background: #FFFFFF;
  border: none;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 900;
  color: var(--kc-ink);
  line-height: 1.7;
  text-align: left;
  cursor: pointer;
}
.kc-faq-q { color: var(--kc-c1-deep); font-family: var(--font-mono); margin-right: 10px; }
.kc-faq-toggle {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kc-y);
  border: 2px solid var(--kc-ink);
  color: var(--kc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.kc-faq-toggle::before { content: "+"; }
.faq-item.is-open .kc-faq-toggle { background: var(--kc-c1); }
.faq-item.is-open .kc-faq-toggle::before { content: "\2212"; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 22px;
  font-size: 14px;
  line-height: 2;
  color: var(--kc-text-faq-a);
  transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), padding 0.4s ease;
}
.faq-item.is-open .faq-answer { max-height: 400px; padding: 4px 22px 18px; }
@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition: none; }
}
.kc-faq-a { color: var(--kc-ink); font-family: var(--font-mono); font-weight: 700; margin-right: 10px; }

/* ------------------------------------------------------------
   20. cta-form（#cta-form）
   ------------------------------------------------------------ */
.kc-cta-form { position: relative; overflow: hidden; background: var(--kc-hatch-navy); border-top: 2px solid var(--kc-ink); }
.kc-cta-grid {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 36px 48px;
  align-items: center;
}
.kc-cta-copy { display: flex; flex-direction: column; gap: 18px; }
.kc-cta-copy h2 { margin: 0; color: #FFFFFF; line-height: 1.4; }
.kc-cta-copy-sub { margin: 0; font-size: 17px; font-weight: 900; color: var(--kc-c1); }
.kc-cta-copy-body { margin: 0; font-size: 14.5px; line-height: 1.95; color: rgba(255, 255, 255, 0.82); }

.kc-form-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  padding: clamp(22px, 2.8vw, 32px);
  box-shadow: var(--kc-shadow-panel-c1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kc-form-card h3 { margin: 0; font-size: 19px; font-weight: 900; color: var(--kc-ink); text-align: center; line-height: 1.5; }
.kc-form-card-note { display: block; font-size: 12px; font-weight: 700; color: var(--kc-c1-deep); }
.kc-form { margin: 0; display: flex; flex-direction: column; gap: 12px; }
/* 2列×2段固定（会社名・お名前／役職・電話）。auto-fitだと768px前後でフォームカードが
   横に広がり3列+1になってしまう（見本の既知の不具合。HANDOFF §9-C）ため、列数を明示する */
.kc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (max-width: 480px) {
  .kc-form-grid { grid-template-columns: 1fr; }
}
.kc-form-field { display: flex; flex-direction: column; gap: 5px; }
.kc-form-field label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--kc-text); }
.kc-optional { padding: 0 7px; border-radius: 999px; background: var(--kc-bg-tablehead); color: var(--kc-text-faq-a); font-size: 10px; line-height: 1.7; }
.kc-form-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--kc-ink);
  border-radius: 10px;
  background: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--kc-text);
}
.kc-form-field input::placeholder { color: #9AA3AF; }
.kc-form-field input.error { border-color: #E5342A; background: #FFF4F3; }
.kc-form-note { margin: 0; font-size: 12px; color: var(--kc-text-sub); text-align: center; }

/* ------------------------------------------------------------
   21. footer（既存styles.cssの.footer-*骨格は無いため、ここで新規に組む）
   ------------------------------------------------------------ */
.kc-footer {
  flex: 1 0 auto;
  background: var(--kc-footer);
  padding: 28px clamp(20px, 5vw, 72px) 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}
.kc-footer-info { display: flex; flex-direction: column; gap: 3px; line-height: 1.6; }
.kc-footer-info-name { color: rgba(255, 255, 255, 0.92); font-weight: 700; }
.kc-footer-info a { color: var(--kc-c1); text-decoration: underline; text-underline-offset: 2px; }
.kc-footer-info-note { margin-top: 4px; }
.kc-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.kc-footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.kc-footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, 0.78); text-decoration: none; }

/* ------------------------------------------------------------
   22. タップ領域・フォーカス
   ------------------------------------------------------------ */
:focus-visible { outline: 3px solid var(--kc-c1-deep); outline-offset: 3px; }