/* ============================================================
   Retera 製品サイト 共通スタイル
   UI_GUIDE.md 節2（トークン）+ 節20（公開サイトの追加トークン）に準拠
   2026-08-07
   ============================================================ */

:root {
  /* === Retera Design Tokens v1.0 に準拠（UI_GUIDE 節20.9） ===
     社内アプリのマスタードではなく、製品 Retera のブランド色を使う。
     載せる製品画面と色を揃えるため。2026-08-08 大西様決定。 */
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-alt: #F8FAFC;
  --neutral-faint: #EEF1F4;
  --neutral-border: #D9E1E8;
  --neutral-strong: #9CA3AF;
  --text-muted: #5F6B76;
  --text: #17212B;
  --text-strong: #132B45;   /* Navy */
  --navy: #132B45;

  /* === Feedback === */
  --danger: #B33A3A;
  --info: #2D6DA3;
  --info-faint: #EAF3FA;

  /* === Primary（Retera オレンジ） === */
  --primary: #F47A20;
  --primary-dark: #D85F0F;
  --primary-faint: #FFF3E8;
  /* 文字に使うオレンジ。#F47A20 は白背景 2.7:1 で AA 未達のため文字に使わない */
  --primary-text: #A45E00;

  /* === Radius === */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  /* 節20.3 公開サイトのみ */
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;

  /* === Typography === */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                 "Meiryo", sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  /* 節20.3 公開サイトのみ */
  --fs-body: 15px;
  --fs-lead: 17px;
  --fs-h3: 20px;
  --fs-h2: 28px;
  --fs-h1: 40px;
  --measure: 34em;
  --lh-tight: 1.4;
  --lh-base: 1.6;

  /* === Shadow === */
  --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.04);

  /* === Motion === */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;
}

/* ============================================================
   共通骨格（UI_GUIDE 節8）
   ============================================================ */

* { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  /* 日本語の禁則処理。「 が行末に、」。が行頭に来るのを防ぐ */
  line-break: strict;
  overflow-wrap: break-word;
}

body::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

a { color: var(--primary-text); }
a:hover { color: var(--primary); }

/* ============================================================
   レイアウト
   ============================================================ */

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--neutral-border);
}
.section:first-of-type { border-top: none; }
.section-alt { background: var(--surface-alt); }
.section-white { background: var(--surface); }

.measure { max-width: var(--measure); }

/* ============================================================
   ヘッダー
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--neutral-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.brand img { display: block; height: 28px; width: auto; }
.brand:hover { color: var(--text-strong); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav a {
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--t-fast);
}
.site-nav a:hover { color: var(--text-strong); }
.site-nav a.current { color: var(--text-strong); font-weight: 600; }

/* ============================================================
   ボタン（UI_GUIDE 節3。グラデーション・影・translateY 禁止）
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 40px;
  padding: 0 var(--space-6);
  font-size: var(--fs-md);
  font-family: inherit;
  border: 1px solid var(--neutral-border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: var(--t-fast);
}
.btn:hover {
  background: var(--surface-alt);
  border-color: var(--neutral-strong);
  color: var(--text);
}
.btn:active { background: var(--neutral-faint); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

.btn-sm { height: 32px; padding: 0 var(--space-5); font-size: var(--fs-base); }

/* ============================================================
   見出し・本文
   ============================================================ */

h1, h2, h3 {
  color: var(--text-strong);
  font-weight: 600;
  margin: 0;
  line-height: var(--lh-tight);
}

.h-hero {
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
}

.h-section {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-6);
}

.h-sub {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-4);
}

/* 左に primary の縦バーが付く小見出し（節6.3） */
.section-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-strong);
  padding-left: 10px;
  border-left: 3px solid var(--primary);
  margin: var(--space-6) 0 var(--space-4) 0;
}

p { margin: 0 0 var(--space-5) 0; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  color: var(--text);
}

.muted { color: var(--text-muted); }
.small { font-size: var(--fs-base); }

.emph {
  font-weight: 600;
  color: var(--text-strong);
}

.kicker {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--primary-text);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

/* ============================================================
   ヒーロー
   ============================================================ */

.hero {
  background: var(--surface);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--neutral-border);
}
.hero .h-hero { margin-bottom: var(--space-6); }
.hero .lead { margin-bottom: var(--space-7); max-width: var(--measure); }

/* ============================================================
   カード（罫線で区切る。影で浮かせない）
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.grid-2 {
  display: grid;
  /* 400px 下限で 1040px 幅では必ず2列になる（320px だと3列に割れて4枚目が孤立する） */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-5);
}

/* 困りごと */
.pain { display: flex; gap: var(--space-5); }
.pain-no {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary);
  color: var(--primary-text);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-weight: 600;
}
.pain h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.pain p { font-size: var(--fs-body); color: var(--text-muted); margin: 0; }

/* ============================================================
   業務の流れ（一本の線）
   ============================================================ */

.flow {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-2);
}
.flow li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.flow li + li::before {
  content: "\25B8"; /* ▸ */
  color: var(--neutral-strong);
  font-size: var(--fs-md);
}
.flow span {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-md);
  white-space: nowrap;
}
.flow.flow-on span {
  border-color: var(--primary);
  background: var(--primary-faint);
  color: var(--primary-text);
  font-weight: 600;
}

.flow-note {
  border-top: 2px solid var(--primary);
  padding-top: var(--space-3);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--primary-text);
  margin: 0;
}

/* ============================================================
   数字（UI_GUIDE 節20.7。色で意味を持たせない）
   ============================================================ */

.stats {
  display: grid;
  /* 200px 下限で 1040px 幅では4列。7項目が 4+3 に収まる（150px だと6+1で孤立する） */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.stat {
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
}
.stat-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.stat-value {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.1;
  /* 大きな単独の数値に tabular-nums は使わない（節20.7） */
}

/* ============================================================
   機能リスト
   ============================================================ */

.feature-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip-list li {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-4);
  font-size: var(--fs-base);
  border-radius: var(--radius);
  border: 1px solid var(--neutral-border);
  background: var(--surface);
  color: var(--text);
}
.chip-list.on li {
  border-color: var(--primary);
  background: var(--primary-faint);
  color: var(--primary-text);
  font-weight: 600;
}

/* ============================================================
   テーブル（会社概要）
   ============================================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.table th, .table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-faint);
  text-align: left;
  vertical-align: top;
}
.table th {
  width: 180px;
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

/* ============================================================
   コールアウト
   ============================================================ */

.callout {
  padding: var(--space-5);
  border-radius: var(--radius);
  border-left: 3px solid var(--info);
  background: var(--info-faint);
  font-size: var(--fs-body);
}

/* ============================================================
   フォーム（UI_GUIDE 節10）
   ============================================================ */

.form { max-width: 640px; }
.field { margin-bottom: var(--space-6); }
.field label {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}
.req { color: var(--danger); margin-left: var(--space-1); }
.hint {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0 0 var(--space-3) 0;
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  width: 100%;
  /* 高さ40px − border2px − 上下padding16px = 22px ≥ 行高（節10.2 の切れ対策） */
  height: 40px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: var(--t-fast);
}
textarea { height: auto; min-height: 96px; resize: vertical; line-height: var(--lh-base); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-faint);
}

.choices { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-body);
  cursor: pointer;
}
.choice input { width: auto; height: auto; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body);
}
.consent input { width: auto; height: auto; margin-top: 4px; }

/* ============================================================
   フッター
   ============================================================ */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--neutral-border);
  padding: var(--space-8) 0;
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text-strong); }
.footer-nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }

/* ============================================================
   レスポンシブ（UI_GUIDE 節15.2 のブレイクポイントのみ使う）
   ============================================================ */

@media (max-width: 1023px) {
  :root { --fs-h1: 28px; }
  .section { padding: var(--space-9) 0; }
  .hero { padding: var(--space-9) 0; }
}

@media (max-width: 767px) {
  .site-header .container { height: auto; padding-top: var(--space-4); padding-bottom: var(--space-4); flex-wrap: wrap; }
  .site-nav { gap: var(--space-5); width: 100%; }
  .section { padding: var(--space-8) 0; }
  .hero { padding: var(--space-8) 0; }
  .table th { width: auto; display: block; border-bottom: none; }
  .table td { display: block; }
  .flow li + li::before { content: "\25BE"; } /* ▾ 縦並び時 */
  .flow { flex-direction: column; align-items: stretch; }
  .flow li { flex-direction: column; align-items: stretch; }
  .flow span { text-align: center; }
}

/* ============================================================
   図版（UI_GUIDE 節20.8）
   HTML + CSS で組む。画像ファイルにしない。
   線画・3色まで・図中の文字は12px以上
   ============================================================ */

.viz { margin: var(--space-8) 0 0 0; }
.viz-caption {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: var(--space-4) 0 0 0;
}

/* --- ヒーロー: バラバラ → 1つに --- */
.viz-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
}
.viz-arrow {
  font-size: 28px;
  color: var(--neutral-strong);
  line-height: 1;
}

.viz-scatter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5);
  align-content: center;
  min-height: 200px;
}
.viz-scatter span {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px dashed var(--neutral-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-base);
  color: var(--text-muted);
  white-space: nowrap;
}
.viz-scatter span:nth-child(1) { transform: rotate(-3deg); }
.viz-scatter span:nth-child(2) { transform: rotate(2deg); }
.viz-scatter span:nth-child(3) { transform: rotate(-1deg); }
.viz-scatter span:nth-child(4) { transform: rotate(4deg); }
.viz-scatter span:nth-child(5) { transform: rotate(-2deg); }
.viz-scatter span:nth-child(6) { transform: rotate(3deg); }
.viz-scatter span:nth-child(7) { transform: rotate(-4deg); }

.viz-one {
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  background: var(--primary-faint);
  padding: var(--space-5);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}
.viz-one-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--primary-text);
  letter-spacing: 0.04em;
}
.viz-one-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.viz-one-steps li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--primary-text);
  white-space: nowrap;
}

/* --- 対比（現状 / Retera） --- */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.cmp { border-radius: var(--radius-lg); padding: var(--space-5); }
.cmp-before { border: 1px dashed var(--neutral-strong); background: var(--surface-alt); }
.cmp-after  { border: 2px solid var(--primary); background: var(--primary-faint); }
.cmp-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
  letter-spacing: 0.04em;
}
.cmp-before .cmp-label { color: var(--text-muted); }
.cmp-after  .cmp-label { color: var(--primary-text); }

.cmp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.cmp-box {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  white-space: nowrap;
}
.cmp-before .cmp-box {
  border: 1px dashed var(--neutral-strong);
  background: var(--surface);
  color: var(--text-muted);
}
.cmp-after .cmp-box {
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary-text);
  font-weight: 600;
}
.cmp-break {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: 0 var(--space-2);
  border-bottom: 1px dashed var(--neutral-strong);
  white-space: nowrap;
}
.cmp-join {
  color: var(--primary);
  font-size: var(--fs-md);
}

/* --- アイコン（線画。stroke は currentColor） --- */
.ico {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--primary);
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- ミニ画面（2つの見方） --- */
.wire {
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.wire-bar {
  height: 10px;
  border-radius: var(--radius-sm);
  background: var(--neutral-faint);
}
.wire-bar.on { background: var(--primary-faint); border: 1px solid var(--primary); height: 12px; }
.wire-row { display: flex; gap: var(--space-2); }
.wire-row .wire-bar { flex: 1; }
.wire-head { height: 12px; background: var(--neutral-border); }

/* --- 協力業者の対比 --- */
.party {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.party-node {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  white-space: nowrap;
}
.party-main { border: 2px solid var(--primary); background: var(--surface); color: var(--primary-text); font-weight: 600; }
.party-sub  { border: 1px solid var(--neutral-border); background: var(--surface); color: var(--text); }
.party-x    { border: 1px dashed var(--neutral-strong); background: var(--surface-alt); color: var(--text-muted); }
.party-link { color: var(--primary); }
.party-link.off { color: var(--neutral-strong); }

@media (max-width: 1023px) {
  .viz-hero { grid-template-columns: 1fr; }
  .viz-arrow { justify-self: center; transform: rotate(90deg); }
}

/* 困りごとカードはアイコン先頭 */
.pain .ico { margin-top: 2px; }
.pain h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }

/* ============================================================
   ヒーロー 2カラム化（2026-08-08 改訂）
   旧: 見出しの右が空白、図が下に小さく置かれ第一印象が弱かった
   ============================================================ */

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-9);
  align-items: center;
}
.hero-grid .lead { margin-bottom: var(--space-7); }

.viz-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.viz-arrow-down {
  text-align: center;
  color: var(--neutral-strong);
  font-size: 22px;
  line-height: 1;
}
.viz-box { border-radius: var(--radius-lg); padding: var(--space-5); }
.viz-box-now { border: 1px dashed var(--neutral-strong); background: var(--surface-alt); }
.viz-box-one { border: 2px solid var(--primary); background: var(--primary-faint); }
.viz-box-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-5);
}
.viz-box-now .viz-box-label { color: var(--text-muted); }
.viz-box-one .viz-box-label { color: var(--primary-text); }

/* バラバラ側: あえて整列させない */
.viz-scatter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  min-height: 0;
  align-content: flex-start;
}
.viz-scatter span {
  font-size: var(--fs-md);
  padding: var(--space-3) var(--space-4);
}
.viz-scatter span:nth-child(1) { transform: rotate(-3deg) translateY(2px); }
.viz-scatter span:nth-child(2) { transform: rotate(2deg)  translateY(8px); }
.viz-scatter span:nth-child(3) { transform: rotate(-5deg) translateY(-4px); }
.viz-scatter span:nth-child(4) { transform: rotate(4deg)  translateY(5px); }
.viz-scatter span:nth-child(5) { transform: rotate(-2deg) translateY(-5px); }
.viz-scatter span:nth-child(6) { transform: rotate(5deg)  translateY(3px); }
.viz-scatter span:nth-child(7) { transform: rotate(-4deg) translateY(-2px); }

.viz-one {
  border: none;
  background: transparent;
  padding: 0;
  min-height: 0;
}
.viz-one-steps li { font-size: var(--fs-base); padding: var(--space-2) var(--space-3); }

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* 見出しの途中で「1」だけが行末に残るのを防ぐ */
.nb { white-space: nowrap; }

/* ============================================================
   製品画面（2026-08-08 追加）
   img/ の画像は UI 改修完了後に最新版へ差し替える
   ============================================================ */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius);
  background: var(--surface);
}
.shot-block { margin-bottom: var(--space-9); }
.shot-block:last-child { margin-bottom: 0; }
.shot-block h3 { margin-bottom: var(--space-3); }
.shot-block p { max-width: var(--measure); }
.shot-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--space-3) 0 0 0;
}

/* ============================================================
   機能紹介ページ（2026-08-08 追加）
   ============================================================ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--space-6) var(--space-7);
}
.feat h3 {
  font-size: var(--fs-lead);
  margin-bottom: var(--space-3);
  padding-left: 10px;
  border-left: 3px solid var(--primary);
}
.feat p { color: var(--text-muted); margin: 0; }

.stage {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--primary-faint);
  color: var(--primary-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.feat-note {
  font-size: var(--fs-base);
  color: var(--text-muted);
  border-left: 3px solid var(--neutral-border);
  padding-left: var(--space-5);
  margin-top: var(--space-7);
}

/* ============================================================
   製品画面の見せ方を改善（2026-08-08）
   旧: 原寸で縦に長く、縮むと読めないのに場所だけ取っていた
   新: 上部だけ見せて下端をぼかし、原寸は別タブで開く
   ============================================================ */
.shot-frame {
  position: relative;
  display: block;
  max-height: 400px;
  overflow: hidden;
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius);
  background: var(--surface);
}
.shot-frame img { display: block; width: 100%; height: auto; border: none; border-radius: 0; }
.shot-frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--surface));
  pointer-events: none;
}
.shot-more {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--fs-base);
  color: var(--primary-text);
  text-decoration: none;
  border-bottom: 1px solid var(--neutral-border);
  padding-bottom: 2px;
}
.shot-more:hover { border-bottom-color: var(--primary); }

/* セクションの上下を 96px → 64px に。全体で 900px 近く詰まる */
.section { padding: var(--space-9) 0; }

/* 数字タイル: 7個で最終行が左に寄って空くのを中央寄せで解消 */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.stats .stat { flex: 0 1 190px; }

/* ============================================================
   セカンドオピニオン反映（2026-08-08）
   中間CTA / 自己診断 / 問い合わせ後の流れ
   ============================================================ */

/* 中間CTA: 読み進めなくても出口があることを示す */
.cta-band {
  background: var(--primary-faint);
  border-top: 1px solid var(--neutral-border);
  border-bottom: 1px solid var(--neutral-border);
  padding: var(--space-8) 0;
}
.cta-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.cta-band h2 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.cta-band p { margin: 0; color: var(--text); max-width: 46em; }

/* 自己診断のリスト */
.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--neutral-border);
  font-size: var(--fs-lead);
}
.fit-list li::before {
  content: "\2713";           /* ✓ */
  color: var(--primary);
  font-weight: 700;
  flex: 0 0 auto;
}
.fit-list li:last-child { border-bottom: none; }

/* 問い合わせ後の流れ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.steps li { display: flex; gap: var(--space-5); align-items: flex-start; }
.steps .no {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  color: var(--primary-text);
  font-size: var(--fs-base);
  font-weight: 600;
}
.steps h3 { font-size: var(--fs-lead); margin-bottom: var(--space-1); }
.steps p { margin: 0; color: var(--text-muted); font-size: var(--fs-base); }

@media (max-width: 767px) {
  .cta-band .container { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   インパクト強化（2026-08-08）
   大西様「HP としてはまだまだインパクトが低い」を受けて。
   原因は社内業務アプリの「控えめ」を公開サイトに当てていたこと。
   UI_GUIDE 節20.3 改訂 / 20.10 濃色ブロック / 20.11 影 に対応。
   ============================================================ */

:root {
  --fs-h1: 56px;   /* 旧 40px */
  --fs-h2: 34px;   /* 旧 28px */
  --shadow-shot: 0 1px 3px rgba(19, 43, 69, 0.10);
}

/* --- ヒーローを濃色に --- */
.hero {
  background: var(--navy);
  border-bottom: none;
  padding: var(--space-10) 0;
}
.hero .h-hero { color: #fff; letter-spacing: -0.02em; line-height: 1.25; }
.hero .lead { color: rgba(255,255,255,0.82); }

/* 濃色の上の「いま」パネル */
.hero .viz-box-now { border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.04); }
.hero .viz-box-now .viz-box-label { color: rgba(255,255,255,0.65); }
.hero .viz-scatter span {
  border-color: rgba(255,255,255,0.30);
  background: transparent;
  color: rgba(255,255,255,0.75);
}
.hero .viz-arrow-down { color: rgba(255,255,255,0.45); }

/* 濃色の上の「RETERA」パネル。面にだけオレンジを使う */
.hero .viz-box-one { background: rgba(244,122,32,0.14); border-color: var(--primary); }
.hero .viz-box-one .viz-box-label { color: #fff; letter-spacing: 0.10em; }
.hero .viz-one-steps li {
  background: rgba(255,255,255,0.08);
  border-color: rgba(244,122,32,0.85);
  color: #fff;
}

/* --- 実績の数字を濃色バンドに（信用の山場） --- */
.stats-band {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7);
  margin: var(--space-8) 0;
}
.stats-band .stats { margin: 0; }
.stats-band .stat {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.16);
  border-radius: 0;
  padding: var(--space-3) var(--space-5);
}
.stats-band .stat-label { color: rgba(255,255,255,0.65); }
.stats-band .stat-value { color: #fff; font-size: 34px; }

/* --- 製品画面だけ、わずかに浮かせる（節20.11） --- */
.shot-frame { box-shadow: var(--shadow-shot); }

/* --- 見出しまわりの余裕 --- */
.h-section { margin-bottom: var(--space-7); letter-spacing: -0.01em; }
.hero .h-hero { margin-bottom: var(--space-7); }

@media (max-width: 1023px) {
  :root { --fs-h1: 34px; --fs-h2: 26px; }
  .stats-band { padding: var(--space-6) var(--space-5); }
  .stats-band .stat-value { font-size: 26px; }
}

/* ============================================================
   デバイスモックアップ（2026-08-08）
   競合6社（ANDPAD / AnyONE / ダンドリワーク / kintone / ZAC / board）を
   実地調査した結果、製品画面を生のスクショで貼っている会社は1社も無く、
   全社がノートPC・スマホの枠に嵌めていた。これが見た目の質の差の主因。
   ============================================================ */

.device {
  position: relative;
  border-radius: 10px;
  background: #22303F;          /* 筐体 */
  padding: 10px 10px 0;
  box-shadow: 0 10px 30px rgba(9, 20, 33, 0.28);
}
.device::after {                 /* 台座 */
  content: "";
  display: block;
  height: 12px;
  margin: 8px -22px 0;
  border-radius: 0 0 10px 10px;
  background: #1A2733;
}
.device-screen {
  display: block;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: var(--surface);
  max-height: 380px;
}
.device-screen img { display: block; width: 100%; height: auto; }

/* 濃色ヒーローの上では影を強めて浮かせる */
.hero .device { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42); }
.hero .device-screen { max-height: 330px; }

/* 本文中の製品画面もモックアップに */
.shot-frame {
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
}
.shot-frame::after { display: none; }

/* 見出しを太く（競合はいずれも極太ゴシック） */
.h-hero { font-weight: 700; }
.h-section { font-weight: 700; }

/* ============================================================
   第3回レビュー反映（2026-08-08）— 「丁寧」に「大胆」を足す
   1 ヒーロー強化 / 2 白の連続を壊す / 3 いま→RETERA のグラフィック化
   4 デバイス表現の変化 / 5 数字の強弱 / 6 14年の視覚化
   ============================================================ */

/* ---------- 1. ヒーロー ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-10) 0;
}
/* ブランドモチーフ: 大きなオレンジ円（奥行き用・主役にしない） */
.hero::before {
  content: "";
  position: absolute;
  right: -180px; top: -220px;
  width: 760px; height: 760px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.10;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  grid-template-columns: minmax(400px, 44%) 1fr;
  gap: var(--space-9);
  align-items: center;
}
.hero-visual { position: relative; margin-right: -110px; }
.hero-visual .device { padding: 12px 12px 0; border-radius: 12px; }
.hero-visual .device-screen { max-height: 400px; }
.hero-phone {
  position: absolute;
  right: 132px; bottom: -40px;
  width: 27%;
  z-index: 2;
}
.phone-device {
  border-radius: 24px;
  background: #22303F;
  padding: 7px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.45);
}
.phone-device .phone-screen { display: block; border-radius: 18px; overflow: hidden; }
.phone-device img { display: block; width: 100%; height: auto; }

/* ---------- 2. 色面でリズムを作る ---------- */
.section-navy { background: var(--navy); }
.section-navy .h-section,
.section-navy .h-sub,
.section-navy h3 { color: #fff; }
.section-navy p,
.section-navy .lead { color: rgba(255,255,255,0.82); }
.section-navy .muted { color: rgba(255,255,255,0.66); }
.section-navy .kicker { color: var(--primary); }
.section-navy .emph { color: var(--primary); }
.section-navy .card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
}
.section-navy .ico { color: var(--primary); }
.section-navy .shot-note { color: rgba(255,255,255,0.60); }
.section-navy .device { box-shadow: 0 18px 44px rgba(0,0,0,0.42); }

.section-cream { background: var(--primary-faint); }

/* ---------- 3. いま → RETERA のグラフィック ---------- */
.unify {
  display: grid;
  grid-template-columns: 1fr auto 1.25fr;
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
}
.unify-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.10em;
  margin-bottom: var(--space-5);
}
.unify-now .unify-label { color: var(--text-muted); }

.scatter2 { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.scatter2 span {
  display: inline-block;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  color: var(--text-muted);
  box-shadow: 0 1px 2px rgba(19,43,69,0.06);
}
.scatter2 span:nth-child(1) { transform: rotate(-4deg) translate(2px, 6px); }
.scatter2 span:nth-child(2) { transform: rotate(3deg)  translate(-4px, -8px); }
.scatter2 span:nth-child(3) { transform: rotate(-2deg) translate(10px, 4px); }
.scatter2 span:nth-child(4) { transform: rotate(5deg)  translate(-6px, 10px); }
.scatter2 span:nth-child(5) { transform: rotate(-5deg) translate(4px, -6px); }
.scatter2 span:nth-child(6) { transform: rotate(2deg)  translate(-8px, 8px); }
.scatter2 span:nth-child(7) { transform: rotate(-3deg) translate(6px, -4px); }

.unify-arrow {
  color: var(--primary);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
}

.unify-one {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
}
.unify-one .unify-label { color: var(--primary); }
.flowline {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) 0;
  position: relative;
}
.flowline li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(244,122,32,0.70);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: var(--fs-base);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.flowline li + li { margin-left: 18px; }
.flowline li + li::before {
  content: "";
  position: absolute;
  width: 18px; height: 2px;
  background: var(--primary);
  margin-left: -18px;
  margin-top: 9px;
}

/* ---------- 4. デバイス表現の変化 ---------- */
/* ブラウザウィンドウ風（一覧系） */
.win {
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius);
  overflow: hidden;
  border: 1px solid var(--neutral-border);
  box-shadow: 0 10px 28px rgba(19,43,69,0.14);
  background: var(--surface);
}
.win-bar {
  height: 34px; display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4);
  background: #EDF1F5;
  border-bottom: 1px solid var(--neutral-border);
}
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #C6D0DA; display: block; }
.win-url {
  flex: 1; height: 18px; margin-left: var(--space-3);
  border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--neutral-border);
}
.win-screen { display: block; max-height: 420px; overflow: hidden; }
.win-screen img { display: block; width: 100%; height: auto; }

/* フレーム無しの拡大クロップ（1件を追う） */
.crop {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--neutral-border);
  box-shadow: 0 10px 28px rgba(19,43,69,0.12);
  max-height: 430px;
  background: var(--surface);
}
.crop img { display: block; width: 118%; max-width: none; margin-left: -9%; }

/* ---------- 5. 数字の強弱 ---------- */
.stats-band {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-9);
  padding: var(--space-9) var(--space-8);
}
.stat-hero { text-align: left; padding-right: var(--space-8); border-right: 1px solid rgba(255,255,255,0.16); }
.stat-hero-label { display: block; font-size: var(--fs-md); color: rgba(255,255,255,0.70); margin-bottom: var(--space-2); }
.stat-hero-value { display: block; font-size: 76px; line-height: 1; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.stats-band .stats { justify-content: flex-start; }
.stats-band .stat { flex: 0 1 150px; }

/* ---------- 6. 14年を数字で見せる ---------- */
.years { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-6); }
.years-num { font-size: 96px; line-height: 0.9; font-weight: 700; color: var(--primary); letter-spacing: -0.03em; }
.years-unit { font-size: var(--fs-h3); font-weight: 700; color: var(--navy); letter-spacing: 0.14em; }
.years-note { font-size: var(--fs-lead); color: var(--text); max-width: 22em; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1279px) {
  .hero-visual { margin-right: -60px; }
  .hero-phone { right: 80px; width: 30%; }
}
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-right: 0; }
  .hero-phone { position: static; width: 200px; margin: var(--space-6) auto 0; }
  .hero::before { right: -240px; top: -280px; width: 560px; height: 560px; }
  .unify { grid-template-columns: 1fr; }
  .unify-arrow { transform: rotate(90deg); justify-self: center; }
  .stats-band { grid-template-columns: 1fr; gap: var(--space-6); }
  .stat-hero { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.16); padding: 0 0 var(--space-5); }
  .stat-hero-value { font-size: 52px; }
  .years-num { font-size: 64px; }
}

/* ヒーロー微調整: スマホを PC の右下へ寄せる / コピー欄の折り返しを改善 */
.hero-grid { grid-template-columns: minmax(440px, 47%) 1fr; }
.hero-phone { right: 34px; bottom: -56px; width: 25%; }

/* ============================================================
   仕上げ調整（2026-08-08）
   ============================================================ */

/* --- 「いま → RETERA」を大きく、力強く --- */
.unify {
  grid-template-columns: 1.05fr auto 1.45fr;
  gap: var(--space-7);
  align-items: center;
  margin-top: var(--space-9);
}
.unify-label { font-size: var(--fs-base); margin-bottom: var(--space-6); }

.scatter2 { gap: var(--space-4); padding: var(--space-3) 0; }
.scatter2 span {
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-lead);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(19,43,69,0.08);
}
.scatter2 span:nth-child(1) { transform: rotate(-5deg) translate(4px, 10px); }
.scatter2 span:nth-child(2) { transform: rotate(4deg)  translate(-6px, -12px); }
.scatter2 span:nth-child(3) { transform: rotate(-3deg) translate(14px, 6px); }
.scatter2 span:nth-child(4) { transform: rotate(6deg)  translate(-10px, 14px); }
.scatter2 span:nth-child(5) { transform: rotate(-6deg) translate(6px, -10px); }
.scatter2 span:nth-child(6) { transform: rotate(3deg)  translate(-12px, 12px); }
.scatter2 span:nth-child(7) { transform: rotate(-4deg) translate(10px, -6px); }

.unify-arrow { font-size: 76px; }

.unify-one { padding: var(--space-8) var(--space-7); }
/* 8つを一本の線に収める */
.flowline { gap: 0; flex-wrap: nowrap; }
.flowline li {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}
.flowline li + li { margin-left: 14px; }
.flowline li + li::before { width: 14px; margin-left: -14px; margin-top: 8px; }

/* --- 経営セクションの画面を中央寄せ・幅を締める --- */
.section-navy .shot-block .device { max-width: 900px; margin: 0 auto; }

/* --- 14 YEARS --- */
.years { flex-wrap: wrap; align-items: baseline; }
.years-note { flex: 1 0 100%; margin-top: var(--space-4); }

@media (max-width: 1023px) {
  .flowline { flex-wrap: wrap; }
  .scatter2 span { font-size: var(--fs-md); padding: var(--space-4) var(--space-5); }
  .unify-arrow { font-size: 52px; }
}

/* 連結線がピルの内側に入り込むのを修正。ピルとピルの「間」に置く */
.flowline li { position: relative; }
.flowline li + li::before {
  position: absolute;
  left: -14px; top: 50%;
  width: 14px; height: 2px;
  margin: 0;
  transform: translateY(-50%);
}

/* ============================================================
   モバイルの最終上書き（必ずファイル末尾に置く）
   後から足した .hero-grid / .grid-2 の指定がメディアクエリを
   上書きして 390px で横スクロールが出ていたため
   ============================================================ */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-right: 0; }
  .hero-phone { position: static; width: 210px; margin: var(--space-6) auto 0; }
  .unify { grid-template-columns: 1fr; }
  .unify-arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 767px) {
  .grid-2 { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .feature-cols { grid-template-columns: 1fr; }
  .stats-band { padding: var(--space-6) var(--space-5); }
  .scatter2 span { transform: none !important; }
}

/* ============================================================
   第6回 ビジュアルフィニッシュ（2026-08-09）
   対象は4セクションのみ（14YEARS×226,928 / 買って直して売る /
   誰がいつ何をしたか / 最終CTA）。全体展開は次段階。
   モチーフ: ONE LINE ― 業務が切れずに一本につながる
   ============================================================ */

/* ---------- 共通: ONE LINE ---------- */
.oneline { position: relative; }
.oneline-h {                      /* 横一本線 */
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--primary); opacity: 0.9;
}
.oneline-v {                      /* 縦一本線 */
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--primary);
}

/* ---------- 9. 14 YEARS × 226,928（1枚のKV） ---------- */
.kv {
  position: relative;
  background: var(--navy);
  border-radius: 18px;
  padding: var(--space-10) var(--space-8);
  overflow: hidden;
}
/* 背景の 2012 ━━━ 2026 */
.kv-years {
  position: absolute; left: 0; right: 0; top: 42px;
  display: flex; align-items: center; gap: var(--space-5);
  padding: 0 var(--space-8);
  font-size: var(--fs-sm); letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
}
.kv-years i { flex: 1; height: 2px; background: var(--primary); opacity: 0.45; display: block; }

.kv-main {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-9);
  margin: var(--space-9) 0 var(--space-8);
}
.kv-num { text-align: center; color: #fff; }
.kv-num b {
  display: block; font-weight: 700; line-height: 0.86;
  letter-spacing: -0.03em;
}
.kv-14 b { font-size: 168px; }
.kv-226 b { font-size: 128px; }
.kv-num span {
  display: block; margin-top: var(--space-4);
  color: rgba(255,255,255,0.72); letter-spacing: 0.18em;
}
.kv-14 span { font-size: 28px; }
.kv-226 span { font-size: 20px; letter-spacing: 0.06em; }
.kv-x { font-size: 52px; color: var(--primary); font-weight: 700; line-height: 1; }

.kv-sub {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-5) var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.kv-sub div { text-align: center; }
.kv-sub b { display: block; font-size: 26px; font-weight: 700; color: #fff; line-height: 1.1; }
.kv-sub span { display: block; font-size: var(--fs-sm); color: rgba(255,255,255,0.60); margin-top: 2px; }

.kv-copy {
  position: relative; z-index: 1;
  text-align: center; margin: var(--space-8) 0 0;
  font-size: var(--fs-lead); color: rgba(255,255,255,0.85);
}

/* ---------- 10. 買って、直して、売る ---------- */
.deal2 {
  display: grid;
  grid-template-columns: 40% auto 1fr;
  align-items: stretch;
  gap: var(--space-6);
  min-height: 520px;
  margin-top: var(--space-8);
}
.deal2-before {
  background: var(--surface-alt);
  border-radius: 18px;
  padding: var(--space-8) var(--space-7);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-5);
}
.deal2-label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.10em; color: var(--text-muted); }
.deal2-card {
  background: var(--surface); border: 1px solid var(--neutral-border);
  border-radius: 12px; padding: var(--space-6);
  font-size: var(--fs-lead); color: var(--text-muted); text-align: center;
}
.deal2-cut { text-align: center; color: var(--neutral-strong); font-size: var(--fs-base); }
.deal2-cut::before,
.deal2-cut::after { content: "╌╌╌"; letter-spacing: 2px; margin: 0 var(--space-3); }

.deal2-arrow { align-self: center; color: var(--primary); font-size: 76px; line-height: 1; font-weight: 700; }

.deal2-after {
  position: relative;
  background: var(--navy);
  border-radius: 18px;
  padding: var(--space-8) var(--space-7);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.deal2-after .deal2-label { color: var(--primary); }
.deal2-bg {                       /* 背景に実画面を薄く */
  position: absolute; inset: 0; opacity: 0.13;
  background-size: cover; background-position: left top;
  filter: grayscale(0.2);
}
.deal2-flow { position: relative; z-index: 1; margin-top: var(--space-6); padding-left: var(--space-7); }
.deal2-flow::before {             /* ONE LINE 縦 */
  content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px;
  width: 2px; background: var(--primary);
}
.deal2-flow li {
  position: relative; list-style: none;
  padding: var(--space-4) 0;
  font-size: var(--fs-h3); font-weight: 600; color: #fff;
}
.deal2-flow li::before {
  content: ""; position: absolute; left: -22px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 4px var(--navy);
}

/* ---------- 8. 誰が、いつ、何をしたか ---------- */
.trace { display: grid; grid-template-columns: 45% 1fr; gap: var(--space-9); align-items: start; margin-top: var(--space-8); }
.trace-num { line-height: 0.86; }
.trace-num b { font-size: 132px; font-weight: 700; color: var(--navy); letter-spacing: -0.03em; }
.trace-num span { display: block; margin-top: var(--space-4); font-size: 24px; letter-spacing: 0.18em; color: var(--primary-text); font-weight: 700; }
.trace-h { font-size: 34px; font-weight: 700; color: var(--navy); margin: var(--space-7) 0 var(--space-5); line-height: 1.3; }
.trace-law { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-base); color: var(--text-muted); }
.trace-law i { flex: 0 0 48px; height: 1px; background: var(--neutral-strong); display: block; }
.trace-law b { color: var(--primary-text); font-weight: 700; }

.trace-list { list-style: none; margin: 0; padding: 0; }
.trace-list li {
  display: grid; grid-template-columns: 44px 150px 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--neutral-border);
  align-items: baseline;
}
.trace-list li:first-child { border-top: 1px solid var(--neutral-border); }
.trace-list .no { font-size: var(--fs-lead); font-weight: 700; color: var(--primary); }
.trace-list .ttl { font-size: var(--fs-lead); font-weight: 700; color: var(--navy); }
.trace-list .txt { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.7; }

/* ---------- 14. 最終CTA（第3ヒーロー） ---------- */
.cta3 {
  background: var(--navy);
  padding: 160px 0;
  text-align: center;
}
.cta3-eyebrow { font-size: var(--fs-base); letter-spacing: 0.22em; color: var(--primary); font-weight: 700; margin-bottom: var(--space-6); }
.cta3 h2 { font-size: 58px; color: #fff; line-height: 1.28; margin-bottom: var(--space-6); }
.cta3-lead { font-size: var(--fs-lead); color: rgba(255,255,255,0.80); max-width: 40em; margin: 0 auto var(--space-10); }

.cta3-steps { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; margin: 0 auto var(--space-10); max-width: 940px; position: relative; }
.cta3-steps::before {              /* ONE LINE 横 */
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 15px; height: 2px;
  background: var(--primary); opacity: 0.85;
}
.cta3-step { position: relative; padding: 0 var(--space-4); }
.cta3-step .n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: var(--fs-base); font-weight: 700;
}
.cta3-step p { margin: var(--space-5) 0 0; font-size: var(--fs-md); color: rgba(255,255,255,0.82); }

.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 232px; height: 58px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: var(--fs-lead); font-weight: 700;
  text-decoration: none; transition: var(--t-fast);
}
.btn-cta:hover { background: var(--primary-dark); color: #fff; }
.cta3-note { margin-top: var(--space-6); font-size: var(--fs-base); color: rgba(255,255,255,0.70); }

/* ---------- 18. 控えめな出現アニメーション ---------- */
.rv { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- レスポンシブ（この4セクションのみ） ---------- */
@media (max-width: 1023px) {
  .kv-14 b { font-size: 96px; }
  .kv-226 b { font-size: 64px; }
  .kv-main { flex-direction: column; gap: var(--space-6); margin: var(--space-8) 0 var(--space-7); }
  .kv-x { font-size: 36px; }
  .deal2 { grid-template-columns: 1fr; min-height: 0; }
  .deal2-arrow { justify-self: center; transform: rotate(90deg); font-size: 52px; }
  .trace { grid-template-columns: 1fr; gap: var(--space-8); }
  .trace-num b { font-size: 96px; }
  .cta3 { padding: 96px 0; }
  .cta3 h2 { font-size: 34px; }
  .cta3-steps { grid-template-columns: 1fr; gap: var(--space-6); max-width: 420px; text-align: left; }
  .cta3-steps::before { left: 15px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .cta3-step { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-5); padding: 0; }
  .cta3-step p { margin: 0; }
}
@media (max-width: 767px) {
  .trace-list li { grid-template-columns: 32px 1fr; }
  .trace-list .txt { grid-column: 1 / -1; }
}

/* 2012 ━━━ 2026 は縮小時に飛んでいたので、モチーフとして認識できる濃さに */
.kv-years { color: rgba(255,255,255,0.58); }
.kv-years i { opacity: 0.65; height: 2px; position: relative; }
.kv-years i::before,
.kv-years i::after {
  content: ""; position: absolute; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--primary);
}
.kv-years i::before { left: 0; }
.kv-years i::after  { right: 0; }

/* 背景の実画面が主役の一本線と competing するので、ぼかして下げる */
.deal2-bg { opacity: 0.10; filter: grayscale(0.35) blur(1.5px); }

/* ============================================================
   第6回 全体展開（2026-08-09）
   店舗数字 / 向いている会社 / ON/OFF / フッター /
   Product Crop / モバイル専用構図 / ONE LINE アニメーション
   ============================================================ */

/* ---------- §4B Product Crop（枠を外し、UI そのものを大きく） ---------- */
.pcrop {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(19, 43, 69, 0.10);
}
.pcrop img { display: block; width: 116%; max-width: none; margin-left: -8%; }
.pcrop-bleed { margin-right: -120px; }        /* 右へ画面外にはみ出す */
.section-bleed { overflow: hidden; }

/* ---------- §11 店舗の数字は、隠しません ---------- */
.claim { padding: 170px 0 !important; }
.claim h2 { font-size: 60px; line-height: 1.24; margin-bottom: var(--space-7); }
.claim h2 .hi { display: block; font-size: 68px; color: var(--primary); }

/* ---------- §13 こんな会社に向いています ---------- */
.fit2 { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.fit2 li {
  display: grid;
  grid-template-columns: 92px 1fr 40px;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--neutral-border);
}
.fit2 li:first-child { border-top: 1px solid var(--neutral-border); }
.fit2 .n { font-size: 48px; font-weight: 700; color: var(--primary); opacity: 0.28; line-height: 1; letter-spacing: -0.02em; }
.fit2 .t { font-size: var(--fs-h3); color: var(--text-strong); line-height: 1.5; }
.fit2 .c { font-size: 28px; color: var(--primary); text-align: right; }
.fit-close { margin-top: var(--space-9); font-size: 42px; font-weight: 700; color: var(--navy); line-height: 1.35; }

/* ---------- §12 使わない機能は、閉じておけます ---------- */
.toggle-viz { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-8); }
.toggle-sw { width: 52px; height: 28px; border-radius: 999px; background: var(--primary); position: relative; }
.toggle-sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.toggle-sw.off { background: var(--neutral-border); }
.toggle-sw.off::after { right: auto; left: 3px; }
.toggle-viz span { font-size: var(--fs-base); color: var(--text-muted); }

.onoff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); }
.onoff h3 { font-size: var(--fs-lead); margin-bottom: var(--space-5); }
.onoff ul { list-style: none; margin: 0; padding: 0; }
.onoff li {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--neutral-faint);
  font-size: var(--fs-lead);
}
.onoff li::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary);
}
.onoff .later li { color: var(--text-muted); }
.onoff .later li::before { background: transparent; border: 2px solid var(--neutral-strong); }

/* ---------- §15 フッター ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--neutral-border);
  border-bottom: 2px solid var(--primary);
  padding: var(--space-9) 0 var(--space-7);
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-8); }
.footer-brand img { height: 26px; width: auto; display: block; margin-bottom: var(--space-5); }
.footer-brand p { max-width: 22em; margin: 0; line-height: 1.8; }
.footer-col h2 { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); letter-spacing: 0.08em; margin: 0 0 var(--space-4); line-height: inherit; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-3); }
.footer-col a { color: var(--text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--navy); }
.footer-base {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--neutral-faint);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  font-size: var(--fs-sm);
}

/* ---------- §18① ONE LINE が左→右へ伸びる ---------- */
.line-grow { transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.line-grow.in { transform: scaleX(1); }
.cta3-steps::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.cta3-steps.in::before { transform: scaleX(1); }
.kv-years i { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.kv.in .kv-years i { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .line-grow, .cta3-steps::before, .kv-years i { transform: none !important; transition: none !important; }
}

/* ---------- §17 余白の強弱 ---------- */
.section { padding: 110px 0; }
.section-strong { padding: 150px 0; }

/* ---------- §19 モバイル専用構図 ---------- */
@media (max-width: 767px) {
  .pcrop-bleed { margin-right: -24px; }
  .pcrop img { width: 150%; margin-left: 0; }   /* 全体縮小せず、左側だけ見せる */

  .claim { padding: 88px 0 !important; }
  .claim h2 { font-size: 30px; }
  .claim h2 .hi { font-size: 34px; }

  .fit2 li { grid-template-columns: 52px 1fr 28px; gap: var(--space-4); padding: var(--space-5) 0; }
  .fit2 .n { font-size: 30px; }
  .fit2 .t { font-size: var(--fs-body); }
  .fit2 .c { font-size: 20px; }
  .fit-close { font-size: 24px; }

  .onoff { grid-template-columns: 1fr; gap: var(--space-7); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-base { flex-direction: column; }

  /* 14 YEARS は縦構成（14 / YEARS / × / 226,928） */
  .kv { padding: var(--space-8) var(--space-5); }
  .kv-main { gap: var(--space-4); }
  .kv-14 b { font-size: 84px; }
  .kv-226 b { font-size: 52px; }
  .kv-sub { gap: var(--space-4) var(--space-5); }
  .kv-sub b { font-size: 19px; }

  .trace-num b { font-size: 78px; }
  .trace-h { font-size: 26px; }
  .section, .section-strong { padding: 72px 0; }
}

/* ============================================================
   第7回 ファーストビュー 白ベース化（2026-08-09）
   中央上部にコピー → 一本線 → 下半分に実製品画面
   ※ 製品画面は既存の実スクリーンショットをそのまま使用（加工は拡大・クロップ・角丸・影のみ）
   ============================================================ */

.hero {
  background: var(--surface);
  padding: 96px 0 0;
  text-align: center;
  overflow: hidden;
  border-bottom: none;
}
.hero::before { display: none; }          /* 濃色時のオレンジ円は白ベースでは使わない */

.hero .h-hero {
  color: var(--navy);
  font-size: 64px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}
.hero .h-hero .hi { color: var(--primary); }

.hero .lead {
  color: var(--text);
  max-width: none;
  margin: 0 auto var(--space-7);
}
.hero .btn-primary { margin-bottom: var(--space-9); }

/* --- 引合 ━ … ━ 入金 の一本線 --- */
.heroline {
  list-style: none; margin: 0 auto var(--space-9); padding: 0;
  display: flex; align-items: center; justify-content: center;
  max-width: 880px;
}
.heroline li {
  display: flex; align-items: center;
  font-size: var(--fs-md); font-weight: 600; color: var(--navy);
  white-space: nowrap;
}
.heroline li + li::before {
  content: ""; display: block;
  width: 46px; height: 2px; margin: 0 var(--space-4);
  background: var(--primary);
}
.heroline li:first-child { position: relative; padding-left: 14px; }
.heroline li:first-child::after,
.heroline li:last-child::after {
  content: ""; position: absolute; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.heroline li:first-child::after { left: 0; }
.heroline li:last-child { position: relative; padding-right: 14px; }
.heroline li:last-child::after { right: 0; }

/* --- 下半分の製品画面 --- */
.hero-stage {
  position: relative;
  width: 72vw; max-width: 1440px;
  margin: 0 auto;
  max-height: 430px;                       /* 下側を画面外へクロップ */
  overflow: hidden;
}
.hero-pc {
  border: 1px solid var(--neutral-border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 -1px 44px rgba(19, 43, 69, 0.14);
  background: var(--surface);
}
.hero-pc img { display: block; width: 100%; height: auto; }

.hero-sp {
  position: absolute;
  right: -2%; bottom: 0;
  width: 15%;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  border: 1px solid var(--neutral-border);
  border-bottom: none;
  box-shadow: 0 -1px 30px rgba(19, 43, 69, 0.18);
  background: var(--surface);
}
.hero-sp img { display: block; width: 100%; height: auto; }

@media (max-width: 1279px) {
  .hero .h-hero { font-size: 48px; }
  .hero-stage { width: 88vw; max-height: 340px; }
}
@media (max-width: 1023px) {
  .heroline { flex-wrap: wrap; gap: var(--space-3) 0; max-width: 560px; }
  .heroline li + li::before { width: 24px; margin: 0 var(--space-3); }
}
@media (max-width: 767px) {
  .hero { padding: 64px 0 0; }
  .hero .h-hero { font-size: 32px; }
  .hero-stage { width: 100%; max-height: 240px; }
  .hero-sp { width: 24%; right: 2%; }
  .heroline li { font-size: var(--fs-base); }
  .heroline li + li::before { width: 14px; margin: 0 var(--space-2); }
}

/* ============================================================
   第7回 修正3点（2026-08-09）
   ① 見出しを一段強く ② 実画面を拡大 ③ 390px 専用構図
   ============================================================ */

/* --- ① 見出し: 5〜8% 拡大 / 行間を詰める / 全体を上へ --- */
.hero { padding-top: 78px; }
.hero .h-hero { font-size: 68px; line-height: 1.16; margin-bottom: var(--space-5); }

/* --- ② 実画面を 10〜15% 拡大。スマホを PC に少し重ねる --- */
.hero-stage { width: 82vw; max-width: 1560px; max-height: 440px; }
.hero-sp { right: 4%; width: 16%; }

@media (max-width: 1279px) {
  .hero .h-hero { font-size: 52px; }
  .hero-stage { width: 94vw; max-height: 360px; }
}

/* --- ③ 390px 専用構図 --- */
.nav-toggle { display: none; }

@media (max-width: 767px) {
  /* ロゴ＋問い合わせを優先し、他はハンバーガーへ */
  .site-header .container { flex-wrap: nowrap; height: 60px; gap: var(--space-4); }
  .site-nav { width: auto; gap: var(--space-4); align-items: center; }
  .site-nav a:not(.btn) { display: none; }
  .site-nav.open a:not(.btn) { display: block; }
  .site-nav.open {
    position: absolute; left: 0; right: 0; top: 63px;
    flex-direction: column; align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--neutral-border);
    padding: var(--space-4) var(--space-6) var(--space-6);
    gap: 0;
  }
  .site-nav.open a:not(.btn) {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--neutral-faint);
    font-size: var(--fs-lead);
  }
  .site-nav.open .btn { margin-top: var(--space-5); justify-content: center; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 8px;
    background: none; border: none; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; }
  .site-header { position: relative; }

  /* 見出しの存在感を上げる */
  .hero { padding-top: 52px; }
  .hero .h-hero { font-size: 40px; line-height: 1.18; }
  .hero .lead { font-size: var(--fs-body); }

  /* 一本線は無理に1列にしない */
  .heroline { flex-wrap: wrap; justify-content: center; gap: var(--space-3) 0; max-width: 320px; }
  .heroline li { font-size: var(--fs-md); }
  .heroline li + li::before { width: 16px; margin: 0 var(--space-3); }

  /* 実画面は全体縮小せず、中央領域をクロップ */
  .hero-stage { width: 100%; max-height: 300px; }
  .hero-pc { border-radius: 12px 12px 0 0; }
  .hero-pc img { width: 260%; max-width: none; margin-left: -80%; }
  .hero-sp { right: 3%; width: 30%; }
  .hero-sp img { width: 100%; }
}

/* 390px: クロップ位置を中央やや左へ寄せ、工程名・状態バッジ・帯が入るように */
@media (max-width: 767px) {
  .hero-pc img { width: 260%; margin-left: -52%; }
}

/* ============================================================
   第8回 ファーストビュー（2026-08-09）
   非対称構図 / 一本線が製品画面へ立ち上がる / 実画面を主役に
   ============================================================ */

.hero {
  position: relative;
  background: var(--surface);
  padding: 92px 0 0;
  min-height: 760px;
  text-align: left;
  overflow: hidden;
}

.hero-copy { position: relative; z-index: 3; max-width: 1040px; }
.hero .h-hero {
  font-size: 70px; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--navy); margin-bottom: var(--space-6);
}
.hero .h-hero .hi { color: var(--primary); }
.hero .lead {
  font-size: var(--fs-lead); color: var(--text);
  max-width: 30em; margin: 0 0 var(--space-7);
}
.btn-hero { height: 52px; padding: 0 var(--space-8); font-size: var(--fs-lead); }

/* --- 実画面: 右下から大きくせり上がる --- */
.hero-stage {
  position: absolute;
  right: -7%; top: 168px;
  width: 66%;
  z-index: 1;
  transform: perspective(2000px) rotateY(-7deg) rotateX(1.2deg);
  transform-origin: left center;
}
.hero-pc {
  border: 1px solid var(--neutral-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(19, 43, 69, 0.16);
  background: var(--surface);
}
.hero-pc img { display: block; width: 100%; height: auto; }
.hero-sp {
  position: absolute;
  left: 4%; bottom: -12%;
  width: 21%;
  z-index: 2;
  border: 1px solid var(--neutral-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(19, 43, 69, 0.24);
  background: var(--surface);
}
.hero-sp img { display: block; width: 100%; height: auto; }

/* --- 一本線（PC） --- */
.hero-line {
  position: absolute;
  left: 0; right: 0; bottom: 96px;
  width: 100%; height: 132px;
  z-index: 4;
  pointer-events: none;
}
.hero-nodes {
  position: absolute;
  left: 0; bottom: 62px;
  width: 58.4%;                       /* SVG の 0〜700 に対応 */
  margin: 0; padding: 0 0 0 var(--space-6);
  list-style: none;
  display: grid; grid-template-columns: repeat(8, 1fr);
  z-index: 5;
}
.hero-nodes li {
  position: relative;
  padding-top: var(--space-6);
  font-size: var(--fs-md); font-weight: 600; color: var(--navy);
  text-align: center;
}
.hero-nodes li::before {
  content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.heroline { display: none; }          /* モバイル専用 */

@media (max-width: 1279px) {
  .hero { min-height: 660px; }
  .hero .h-hero { font-size: 56px; }
  .hero-stage { width: 72%; right: -12%; top: 150px; }
  .hero-nodes li { font-size: var(--fs-base); }
}
@media (max-width: 1023px) {
  .hero { min-height: 0; padding: 72px 0 0; text-align: center; }
  .hero .h-hero { font-size: 46px; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-line, .hero-nodes { display: none; }
  .heroline { display: flex; }
  .hero-stage {
    position: relative; right: auto; top: auto; width: 100%;
    transform: none; margin-top: var(--space-7);
  }
  .hero-pc { border-radius: 14px 14px 0 0; border-bottom: none; }
  .hero-sp { left: auto; right: 4%; bottom: 0; width: 22%; border-radius: 16px 16px 0 0; border-bottom: none; }
}

/* --- 第8回 微修正: 線とノードを同じ座標系に / スマホの重なり位置 --- */
.hero-flow {
  position: absolute; left: 0; right: 0; bottom: 96px;
  height: 132px; z-index: 4; pointer-events: none;
}
.hero-line { position: absolute; inset: 0; width: 100%; height: 100%; bottom: auto; }
.hero-nodes {
  position: absolute; left: 0; top: 72.7%;     /* viewBox y=96 / 132 */
  width: 58.3%;                                 /* viewBox x=700 / 1200 */
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(8, 1fr);
}
.hero-nodes li { position: relative; padding-top: var(--space-5); text-align: center; }
.hero-nodes li::before {
  content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}

/* スマホは PC の右寄りに重ね、工程名や案件名を隠さない */
.hero-sp { left: auto; right: 24%; bottom: -14%; width: 19%; }

@media (max-width: 1023px) {
  .hero-flow { display: none; }
  .hero-sp { left: auto; right: 4%; bottom: 0; width: 22%; }
}

/* 実画面をもう一段大きく、下の余白を締める */
.hero { min-height: 736px; }
.hero-stage { width: 70%; top: 182px; right: -8%; }

/* --- 第8回 §4〜6 モバイル: 見出し3行 / 余白を詰めて実画面を主役に --- */
@media (max-width: 1023px) {
  .hero { min-height: 0; }
}
@media (max-width: 767px) {
  .hero { padding: 56px 0 0; }
  .hero .h-hero { font-size: 38px; line-height: 1.20; margin-bottom: var(--space-5); }
  .hero .lead { font-size: var(--fs-body); max-width: 21em; margin-bottom: var(--space-6); }
  .btn-hero { height: 50px; padding: 0 var(--space-7); }

  .heroline { margin: var(--space-7) auto var(--space-6); max-width: 300px; }
  .heroline li { font-size: var(--fs-md); }
  .heroline li + li::before { width: 14px; margin: 0 var(--space-2); }

  /* 実画面をもっと主役に: 横幅いっぱい＋少しはみ出す。スマホを前面に大きく */
  .hero-stage { margin-top: 0; width: 108%; margin-left: -4%; max-height: 320px; }
  .hero-pc img { width: 260%; margin-left: -52%; }
  .hero-sp { right: 2%; bottom: 0; width: 34%; box-shadow: 0 -6px 26px rgba(19,43,69,0.26); }
}

/* PC 用の top 指定が、相対配置になるモバイルで効いてしまうのを打ち消す */
@media (max-width: 1023px) {
  .hero-stage { top: auto; right: auto; }
}

/* 390px: 上部のバーではなく、工程の帯（Retera らしい部分）が見える位置へ */
@media (max-width: 767px) {
  .hero-pc { overflow: hidden; }
  .hero-pc img { margin-top: -118px; }
}

/* ============================================================
   第9回 最終調整（2026-08-09）— 足さずに詰める
   ============================================================ */

/* --- PC: 見出しを 2 段に。横に伸ばし余白を感じる構成 --- */
.nbr { display: none; }
.hero-copy { max-width: 1040px; }
.hero .h-hero { font-size: 64px; line-height: 1.14; }
.hero .lead { max-width: 25em; }

/* --- PC: 実画面を少し右へ逃がし、コピーと競合させない --- */
.hero { min-height: 748px; }
.hero-stage {
  top: 296px; right: -15%; width: 68%;
  transform: perspective(2200px) rotateY(-6deg) rotateX(1deg);
  box-shadow: none;
}
.hero-pc { box-shadow: 0 18px 52px rgba(19, 43, 69, 0.12); }
.hero-sp { right: 26%; bottom: -18%; width: 18%; box-shadow: 0 14px 34px rgba(19, 43, 69, 0.20); }

/* --- PC: 一本線を軽く。工程名は主役にしない --- */
.hero-nodes { width: 46.7%; }                 /* viewBox x=560 / 1200 */
.hero-nodes li { font-size: var(--fs-base); color: var(--text-muted); font-weight: 500; padding-top: var(--space-4); }
.hero-nodes li::before {
  top: -4px; margin-left: -4px; width: 8px; height: 8px;
  border-width: 1.5px; border-color: rgba(244, 122, 32, 0.8);
}

@media (max-width: 1279px) {
  .hero .h-hero { font-size: 52px; }
  .hero-stage { width: 74%; right: -20%; top: 268px; }
  .hero { min-height: 680px; }
}

/* --- モバイル: 3 段見出しを維持し、CTA 下の余白を半分に --- */
@media (max-width: 1023px) {
  .nbr { display: inline; }
  .hero-copy { max-width: none; }
  .hero-stage { transform: none; box-shadow: none; }
}
@media (max-width: 767px) {
  .hero .h-hero { font-size: 38px; line-height: 1.20; }
  .hero .lead { max-width: 21em; }
  .hero .btn-primary { margin-bottom: var(--space-5); }   /* 64px → 16px */
  .heroline { margin: var(--space-7) auto var(--space-5); } /* 下も 24 → 16 */

  /* 実画面を上へ持ち上げ、スマホの存在感を強く。下端は行の途中で切る */
  .hero-stage { max-height: 330px; }
  .hero-pc img { margin-top: -136px; }
  .hero-sp { right: 2%; bottom: -6%; width: 37%; }

  /* ヘッダー: 3 要素の縦位置と左右余白 */
  .site-header .container { align-items: center; padding-left: var(--space-5); padding-right: var(--space-5); }
  .site-nav .btn-sm { height: 34px; padding: 0 var(--space-5); font-size: var(--fs-base); }
  .nav-toggle { width: 44px; height: 44px; }
}

/* PC 用の絶対配置プロパティは、相対配置になる 1023px 以下では必ず打ち消す
   （第8回・第9回で 2 度同じ事故を起こしたため、最終行に固定） */
@media (max-width: 1023px) {
  .hero-stage { position: relative; top: auto; right: auto; left: auto; bottom: auto; }
}

/* 「Retera（リテラ）」が行末で割れていたので、リード幅を微調整 */
.hero .lead { max-width: 27em; }
@media (max-width: 767px) { .hero .lead { max-width: 21em; } }

/* ============================================================
   第10回 最終仕上げ（2026-08-09）— 余白・位置・サイズ・クロップのみ
   ============================================================ */

/* ① コピーと UI の距離を縮める ／ ② 実画面を少し上へ */
.hero-stage { right: -12%; width: 69%; top: 274px; }

/* ③ 説明文: 幅だけで自然な 3 行に */
.hero .lead { max-width: 26em; }

/* ④ 一本線: 入金ノードの位置に合わせて列幅を調整（viewBox x=528 / 1200） */
.hero-nodes { width: 44%; }

@media (max-width: 1279px) {
  .hero-stage { right: -17%; width: 75%; top: 250px; }
}

/* ⑤ モバイル: 工程ラインを「線」として見せる */
@media (max-width: 1023px) {
  .heroline {
    display: flex; flex-wrap: wrap; justify-content: center;
    max-width: 340px; margin: var(--space-6) auto var(--space-4);
    padding: 0; gap: 20px 0;
  }
  .heroline li {
    position: relative; flex: 0 0 25%;
    padding-top: 15px; text-align: center;
    font-size: var(--fs-base); font-weight: 500; color: var(--text-muted);
    white-space: nowrap;
  }
  .heroline li::before {          /* 隣とつながって 1 本に見える細い線 */
    content: ""; position: absolute; top: 4px; left: 0; right: 0;
    height: 1px; background: rgba(244, 122, 32, 0.70);
    margin: 0; width: auto;
  }
  .heroline li::after {           /* 小ノード */
    content: ""; position: absolute; top: 1px; left: 50%; margin-left: -3.5px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--surface); border: 1.5px solid rgba(244, 122, 32, 0.85);
  }
  .heroline li:first-child::before { left: 12%; }
  .heroline li:nth-child(4)::before { right: 12%; }
  .heroline li:nth-child(5)::before { left: 12%; }
  .heroline li:last-child::before { right: 12%; }
}

/* ⑥ モバイル: 実画面をもう少し大きく・上へ */
@media (max-width: 767px) {
  .hero .lead { max-width: 21em; }
  .hero .btn-primary { margin-bottom: var(--space-4); }
  .hero-stage { width: 112%; margin-left: -8%; max-height: 340px; }
  .hero-pc img { margin-top: -142px; }
  .hero-sp { right: 2%; bottom: -8%; width: 39%; box-shadow: 0 -8px 30px rgba(19, 43, 69, 0.30); }

  /* ⑦ ヘッダー CTA のオレンジ面積を少しだけ抑える */
  .site-nav .btn-sm { height: 32px; padding: 0 14px; }
}

/* ============================================================
   【恒久対策】PC 用の絶対配置は 1023px 以下では必ず無効化する。
   第8・9・10回で 3 度同じ事故（モバイルで実画面が押し下がる）を起こしたため、
   順番に依存しないよう !important で固定する。
   PC 側の top / right を変更しても、ここが効いてモバイルには波及しない。
   ============================================================ */
@media (max-width: 1023px) {
  .hero-stage {
    position: relative !important;
    top: auto !important; right: auto !important;
    left: auto !important; bottom: auto !important;
  }
}
/* PC の UI 左端を 620〜640px の範囲に収める微調整 */
@media (min-width: 1280px) {
  .hero-stage { right: -12.5%; }
}

/* モバイル: 実画面の上端を 545〜550px に収める最終調整 */
@media (max-width: 767px) {
  .heroline { margin: var(--space-5) auto var(--space-2); }
}

/* モバイルの工程ライン: 旧ラウンドの端点指定が残って線が途切れて見えたので統一 */
@media (max-width: 1023px) {
  .heroline li:first-child,
  .heroline li:last-child { padding-left: 0; padding-right: 0; }
  .heroline li:first-child::after,
  .heroline li:last-child::after {
    top: 1px; left: 50%; right: auto; margin-left: -3.5px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--surface); border: 1.5px solid rgba(244, 122, 32, 0.85);
  }
  .heroline li::before { height: 1.5px; }
}

/* ============================================================
   第11回（2026-08-09）— モバイルの一本線を「本当に一本」にする
   工程ごとの短い線をやめ、行の背面に連続した1本の線を通す
   ============================================================ */
@media (max-width: 1023px) {
  .heroline {
    position: relative;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0;
    max-width: 296px;
    margin: var(--space-5) auto var(--space-2);
    padding: 0;
    /* 各行の背面に 1.5px の連続線を通す（行の高さ 44px ごとに繰り返す） */
    background-image: linear-gradient(
      to bottom,
      transparent 0, transparent 3.6px,
      rgba(244,122,32,0.70) 3.6px, rgba(244,122,32,0.70) 5.1px,
      transparent 5.1px, transparent 44px);
    background-size: 100% 44px;
    background-repeat: repeat-y;
  }
  /* 1段目の右端から2段目の左端へ、右側で緩く折り返す */
  .heroline::after {
    content: "";
    position: absolute; right: -15px; top: 3.6px;
    width: 15px; height: 44px;
    border: 1.5px solid rgba(244,122,32,0.70);
    border-left: none;
    border-radius: 0 22px 22px 0;
  }
  .heroline li {
    position: relative;
    flex: 0 0 25%;
    height: 44px;
    padding: 15px 0 0;
    text-align: center;
    font-size: var(--fs-base); font-weight: 500; color: var(--text-muted);
    white-space: nowrap;
  }
  /* 工程ごとの線は持たせない（背面の 1 本に統一） */
  .heroline li::before { content: none; display: none; }
  /* ノードは線の上に重ねる */
  .heroline li::after,
  .heroline li:first-child::after,
  .heroline li:last-child::after {
    content: ""; position: absolute;
    top: 1px; left: 50%; right: auto; margin-left: -3.5px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--surface); border: 1.5px solid rgba(244,122,32,0.85);
  }
}

/* 第11回: 一本線の行高を詰め、実画面の上端を 544px 前後に戻す */
@media (max-width: 1023px) {
  .heroline { margin-top: var(--space-3); background-size: 100% 40px; }
  .heroline li { height: 40px; padding-top: 13px; }
  .heroline::after { height: 40px; }
}

/* 第11回 §4: 説明文の実測右端が UI 左端に 40px 食い込んでいたため、
   UI は動かさず（第10回の位置を維持）、リード幅だけを詰めて接触を解消 */
@media (min-width: 1024px) {
  .hero .lead { max-width: 24em; }
}

/* 1920px では中央寄せのコンテナが右へ動くぶん UI に近づくため、
   最も狭い条件（1920px で 395px）に合わせて固定値で持つ */
@media (min-width: 1024px) {
  .hero .lead { max-width: 372px; }
}

/* 第11回 §4 恒久版:
   UI をビューポート基準（right: -%）からコンテナ基準に変更。
   1920px でコピーが右へ動いて UI に接触する問題を、幅に依存せず解消する。
   コンテナ左端 = 50% - 520px。そこから 440px をコピー欄として確保する。 */
@media (min-width: 1024px) {
  .hero-stage { left: calc(50% - 80px); right: auto; width: 69%; }
  .hero .lead { max-width: 380px; }
}

/* 旧ラウンドの連結棒（.heroline li + li::before）が残って太い破線に見えていたので無効化 */
@media (max-width: 1023px) {
  .heroline li + li::before { content: none !important; display: none !important; }
}

/* ============================================================
   第12回（2026-08-09）— 課題提起セクションを FV と同じ品質へ
   FV は一切触らない。白ベース・細い線・小ノードの言語を継承。
   ============================================================ */

.issue { padding: 148px 0; background: var(--bg); }
.issue .h-section {
  font-size: 46px; line-height: 1.25; color: var(--navy);
  text-align: center; max-width: 22em; margin: 0 auto var(--space-7);
}
.issue-lead {
  text-align: center; max-width: 34em; margin: 0 auto var(--space-9);
  font-size: var(--fs-lead); color: var(--text-muted);
}

/* --- 課題カード（SaaS の機能カードに見せない） --- */
.issue-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.issue-card {
  display: flex; gap: var(--space-5);
  background: var(--surface);
  border: 1px solid #E8EBF0;
  border-radius: 14px;
  padding: var(--space-7);
  box-shadow: 0 1px 2px rgba(19, 43, 69, 0.03);
}
.issue-card .ico { color: var(--navy); width: 28px; height: 28px; margin-top: 2px; }
.issue-card h3 { font-size: var(--fs-lead); font-weight: 700; color: var(--navy); margin-bottom: var(--space-3); line-height: 1.5; }
.issue-card p { font-size: var(--fs-body); color: var(--text-muted); margin: 0; line-height: 1.8; }

/* --- 業務が分断されている状態（抽象カード） --- */
.split-viz { margin-top: 88px; }
.split-viz-label {
  text-align: center; font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: var(--space-7);
}
.split-cards {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  max-width: 960px; margin: 0 auto;
}
.split-cards li {
  list-style: none;
  background: var(--surface);
  border: 1px solid #E8EBF0;
  border-radius: 12px;
  padding: var(--space-5) var(--space-3);
  text-align: center;
  font-size: var(--fs-base); color: var(--text-muted);
}
.split-cards li .ico { color: var(--navy); width: 22px; height: 22px; margin: 0 auto var(--space-3); display: block; }
/* 散らかりすぎない程度のずらし */
.split-cards li:nth-child(2) { transform: translateY(10px); }
.split-cards li:nth-child(3) { transform: translateY(-6px); }
.split-cards li:nth-child(4) { transform: translateY(12px); }
.split-cards li:nth-child(5) { transform: translateY(-4px); }
.split-cards li:nth-child(6) { transform: translateY(8px); }

/* --- 1本に集まる線（次セクションへの予告） --- */
.converge { display: block; width: 100%; max-width: 960px; margin: 0 auto; height: 132px; }
.issue-next {
  text-align: center; margin: 0; font-size: var(--fs-lead); color: var(--navy); font-weight: 700;
}

@media (max-width: 1023px) {
  .issue { padding: 96px 0; }
  .issue .h-section { font-size: 32px; line-height: 1.3; }
  .issue-cards { grid-template-columns: 1fr; gap: var(--space-5); }
  .split-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); max-width: 340px; }
  .split-cards li { transform: none !important; }
  .split-viz { margin-top: 56px; }
  .converge { height: 96px; }
}
@media (max-width: 767px) {
  .issue { padding: 84px 0; }
  .issue .h-section { font-size: 30px; margin-bottom: var(--space-6); }
  .issue-lead { margin-bottom: var(--space-8); font-size: var(--fs-body); }
  .issue-card { padding: var(--space-6); gap: var(--space-4); }
}

/* 締め文のあと、次セクションへ視線を渡す細い線 */
.issue-tail { width: 1.8px; height: 64px; margin: var(--space-7) auto 0; background: var(--primary); opacity: 0.55; }
.issue .h-section { margin-bottom: var(--space-9); }
.split-viz { margin-top: 96px; }
@media (max-width: 767px) {
  .issue-tail { height: 40px; margin-top: var(--space-6); }
  .split-viz { margin-top: 56px; }
}

/* 締め文は一本線の上に載せる（線は次セクションへ続く） */
.issue-tail { display: none; }
.issue-close { position: relative; padding: 44px 0 72px; }
.issue-close::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1.8px; margin-left: -0.9px; background: var(--primary); opacity: 0.55;
}
.issue-close .issue-next { position: relative; margin: 0; }
.issue-close .issue-next span { background: var(--bg); padding: 0 24px; }
@media (max-width: 767px) {
  .issue-close { padding: 28px 0 44px; }
  .issue-close .issue-next span { padding: 0 14px; }
}

/* ============================================================
   第13回 — 課題提起の圧縮／次セクションへの接続
   ============================================================ */

/* 1. PC: 課題セクションを 10〜15% 圧縮（情報は削らない） */
.issue { padding-top: 124px; padding-bottom: 0; }
.issue .h-section { margin-bottom: 52px; }
.split-viz { margin-top: 76px; }

/* 2. 課題カード: 見出しと本文の距離を統一／アイコンの位置を全カードで揃える */
.issue-cards { gap: 32px; }
.issue-card { align-items: flex-start; }
.issue-card .ico { margin-top: 3px; flex: 0 0 auto; }
.issue-card h3 { margin: 0 0 10px; }
.issue-card p { margin: 0; }

/* 3. 締め文のあとの縦線は、セクション下端まで通す（次セクションへ渡すため） */
.issue-close { padding: 40px 0 120px; }

/* 8. 次セクション冒頭: 縦線を受けて、ノードから横一本線へ展開する */
.flow-in { padding-top: 0; position: relative; }
.flow-join { position: relative; height: 132px; }
.flow-join .fj-v {
  position: absolute; left: 50%; top: 0; margin-left: -0.9px;
  width: 1.8px; height: 76px; background: var(--primary); opacity: 0.55;
}
.flow-join .fj-h {
  position: absolute; left: 0; right: 0; top: 76px; height: 1.2px; margin-top: -0.6px;
  background: linear-gradient(to right,
    rgba(244,122,32,0) 0%, rgba(244,122,32,0.55) 24%,
    rgba(244,122,32,0.55) 76%, rgba(244,122,32,0) 100%);
}
.flow-join .fj-n {
  position: absolute; left: 50%; top: 76px; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--surface); border: 1.8px solid var(--primary);
}
/* 展開したあとの見出しは中央へ。FV→課題→解決 の視線を1本に保つ */
.flow-in .kicker,
.flow-in > .container > .h-section { text-align: center; }
.flow-in > .container > .measure { margin-left: auto; margin-right: auto; }

/* 4・6. モバイル: 縦の長さを詰める（文字は小さくしない） */
@media (max-width: 767px) {
  .issue { padding-top: 72px; padding-bottom: 0; }
  .issue .h-section { margin-bottom: 46px; }
  .issue-cards { gap: 14px; }
  .issue-card { padding: 22px; }
  .issue-card p { line-height: 1.7; }
  .split-viz { margin-top: 32px; }
  .converge { height: 104px; }
  .issue-close { padding: 18px 0 68px; }
  .flow-join { height: 96px; }
  .flow-join .fj-v { height: 54px; }
  .flow-join .fj-h, .flow-join .fj-n { top: 54px; }
}

/* 集約線: PC / モバイルで別の図を出し分ける */
.converge-sp { display: none; }
@media (max-width: 767px) {
  .converge-pc { display: none; }
  .converge-sp { display: block; }
}

/* 第13回 — 解決パート冒頭の対比図を FV と同じ言語に（このセクション内だけ） */
.solve-viz { margin-top: var(--space-9); }
.solve-viz .cmp { border: none !important; background: transparent !important; padding: 0; }
.solve-viz .cmp + .cmp { margin-top: 56px; }
.solve-viz .cmp-label {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  text-align: center; margin-bottom: var(--space-5);
}
.solve-viz .cmp-before .cmp-label { color: var(--text-muted); }
.solve-viz .cmp-after .cmp-label { color: var(--primary-text); }
.solve-viz .cmp-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--space-3);
}
.solve-viz .cmp-box {
  background: var(--surface); border: 1px solid var(--neutral-border);
  border-radius: var(--radius-pill); padding: 10px 22px;
  font-size: var(--fs-md); color: var(--text); font-weight: 600;
}
/* 転記＝切れ目。線でつながず、破線のすき間として見せる */
.solve-viz .cmp-break {
  position: relative; padding: 0 26px;
  font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap;
}
.solve-viz .cmp-break::before,
.solve-viz .cmp-break::after {
  content: ""; position: absolute; top: 50%; width: 18px;
  border-top: 1px dashed var(--neutral-strong);
}
.solve-viz .cmp-break::before { left: 2px; }
.solve-viz .cmp-break::after  { right: 2px; }

/* RETERA 側 = 一本線の上に 9 つのノード（FV と同じ形） */
.solveline {
  position: relative; list-style: none; margin: 0; padding: 22px 0 0;
  display: grid; grid-template-columns: repeat(9, 1fr);
}
.solveline::before {
  content: ""; position: absolute; left: 5.55%; right: 5.55%; top: 0;
  height: 1.5px; background: var(--primary); opacity: .6;
}
.solveline li {
  position: relative; padding-top: var(--space-5); text-align: center;
  font-size: var(--fs-md); font-weight: 600; color: var(--navy);
}
.solveline li::before {
  content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}

@media (max-width: 767px) {
  .solve-viz .cmp + .cmp { margin-top: 40px; }
  .solve-viz .cmp-box { padding: 9px 16px; font-size: var(--fs-base); }
  .solve-viz .cmp-break { padding: 0 20px; }
  .solve-viz .cmp-break::before, .solve-viz .cmp-break::after { width: 13px; }
  /* 3列×3段。線は行ごとに、ノードとノードの間だけ引く */
  .solveline { grid-template-columns: repeat(3, 1fr); row-gap: 28px; padding-top: 18px; }
  .solveline::before { content: none; }
  .solveline li { font-size: var(--fs-base); padding-top: var(--space-4); }
  .solveline li::after {
    content: ""; position: absolute; top: 0; left: 50%; width: 100%;
    height: 1.5px; margin-top: -0.75px; background: var(--primary); opacity: .6;
  }
  .solveline li:nth-child(3n)::after { content: none; }
}

.solve-viz { margin-bottom: 56px; }
@media (max-width: 767px) { .solve-viz { margin-bottom: 36px; } }

/* ============================================================
   第14回 — 解決パート C の完成度向上
   ============================================================ */

/* 2. PC: セクション幅を広げ、対比図だけワイドにする */
.flow-in > .container { max-width: 1120px; }
.flow-in .measure { max-width: 720px; }
.solve-viz { max-width: 1040px; margin-left: auto; margin-right: auto; }

/* 3. よくある状態 — 分断をはっきり見せる */
.solve-viz .cmp-before .cmp-row { gap: 0; }
.solve-viz .cmp-box { padding: 12px 26px; }
.solve-viz .cmp-break {
  padding: 0 8px; min-width: 132px; text-align: center;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.solve-viz .cmp-break::before,
.solve-viz .cmp-break::after {
  content: ""; position: absolute; top: 50%; width: 34px;
  border-top: 1px dashed #C3CDD6;
}
.solve-viz .cmp-break::before { left: 6px; width: 26px; }
.solve-viz .cmp-break::after  { right: 6px; width: 26px; }
/* 破線は「手で転記」の手前で切れる。つながって見せない */
.solve-viz .cmp-before .cmp-row { position: relative; }

/* 3. RETERA — 一本線をワイドに */
.solve-viz .cmp-after { padding-top: 4px; }
.solve-viz .cmp-after .cmp-label { margin-bottom: var(--space-6); }
.solveline::before { height: 1.3px; opacity: .65; }
.solveline li { font-size: var(--fs-md); }

/* 5・6. 説明本文の主従 */
.solve-body { margin-top: var(--space-8); }
.solve-body p { margin: 0 0 20px; line-height: 1.8; }
.solve-body p:last-child { margin-bottom: 0; }
.solve-body p .emph { display: inline; }
.solve-body p:has(.emph) { margin-top: 28px; margin-bottom: 28px; }
.solve-body .muted.small { color: var(--text-faint); }

@media (max-width: 767px) {
  /* 4. 9工程を 1 本の蛇行ラインにする（順序は不変） */
  .solveline {
    position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 66px; row-gap: 0; padding: 6px 0 0;
  }
  .solveline li { padding-top: 16px; text-align: center; }
  /* 2段目だけ右→左へ折り返す */
  .solveline li:nth-child(4) { grid-column: 3; grid-row: 2; }
  .solveline li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .solveline li:nth-child(6) { grid-column: 1; grid-row: 2; }
  .solveline li:nth-child(7) { grid-column: 1; grid-row: 3; }
  .solveline li:nth-child(8) { grid-column: 2; grid-row: 3; }
  .solveline li:nth-child(9) { grid-column: 3; grid-row: 3; }
  /* 横のつながり */
  .solveline li::after {
    content: ""; position: absolute; top: 0; height: 1.3px;
    margin-top: -0.65px; background: var(--primary); opacity: .65;
  }
  .solveline li:nth-child(1)::after,
  .solveline li:nth-child(2)::after,
  .solveline li:nth-child(7)::after,
  .solveline li:nth-child(8)::after { left: 50%; width: 100%; }
  .solveline li:nth-child(4)::after,
  .solveline li:nth-child(5)::after { left: auto; right: 50%; width: 100%; }
  .solveline li:nth-child(3)::after,
  .solveline li:nth-child(6)::after,
  .solveline li:nth-child(9)::after { content: none; }
  /* 折返しの縦（右端 1→2段目、左端 2→3段目）。角はノードが受ける */
  .solveline::before,
  .solveline::after {
    content: ""; position: absolute; width: 1.3px; height: 66px;
    background: var(--primary); opacity: .65;
  }
  .solveline::before { left: 83.333%; margin-left: -0.65px; top: 6px; }
  .solveline::after  { left: 16.666%; margin-left: -0.65px; top: 72px; }

  /* 5. 説明本文を読みやすく */
  .solve-body p { font-size: var(--fs-md); line-height: 1.8; margin-bottom: 22px; }
  .solve-body p:has(.emph) { margin-top: 30px; margin-bottom: 30px; }
  .solve-body .muted.small { font-size: var(--fs-base); line-height: 1.8; }
}

/* 第14回追補 — 「よくある状態」も広く使い、分断を大きく見せる */
.solve-viz .cmp-before .cmp-row {
  max-width: 860px; margin: 0 auto; justify-content: space-between; flex-wrap: nowrap;
}
.solve-viz .cmp-break { flex: 1 1 auto; min-width: 0; }
.solve-viz .cmp-break::before { left: 14px; width: calc(50% - 60px); }
.solve-viz .cmp-break::after  { right: 14px; width: calc(50% - 60px); }

@media (max-width: 767px) {
  /* 横に並べると破線が行末で切れて見えるので、縦に積む */
  .solve-viz .cmp-before .cmp-row {
    flex-direction: column; flex-wrap: wrap; gap: 0; max-width: 100%;
  }
  .solve-viz .cmp-break {
    flex: 0 0 auto; width: 100%; padding: 34px 0; min-width: 0;
  }
  .solve-viz .cmp-break::before,
  .solve-viz .cmp-break::after {
    left: 50%; right: auto; width: 0; height: 14px; margin-left: -0.5px;
    border-top: none; border-left: 1px dashed #C3CDD6; top: auto;
  }
  .solve-viz .cmp-break::before { top: 10px; }
  .solve-viz .cmp-break::after  { bottom: 10px; }
}

/* 破線は「手で転記」の周りだけ。ピルまで届かせず、切れているのを見せる */
@media (min-width: 768px) {
  .solve-viz .cmp-break::before {
    left: auto; right: calc(50% + 42px); width: 52px;
  }
  .solve-viz .cmp-break::after {
    right: auto; left: calc(50% + 42px); width: 52px;
  }
}

/* 素の .cmp-break が持つ下線を無効化（分断表現は破線の断片で行う） */
.solve-viz .cmp-break { border-bottom: none; }

@media (max-width: 767px) {
  .solve-body p { font-size: 15px; line-height: 1.8; }
  .solve-body .muted.small { font-size: 14px; line-height: 1.8; }
}

/* ============================================================
   第15回 — D「協力業者に、別のサービスを契約させなくていい。」
   C と同じデザイン言語。実スマホ画面が主役。
   ============================================================ */
.partner { padding-top: 132px; padding-bottom: 132px; }
.partner > .container { max-width: 1120px; }
.partner .kicker,
.partner > .container > .h-section { text-align: center; }
.partner .pt-intro { max-width: 720px; margin: 0 auto; }
.partner .pt-intro p { line-height: 1.8; }

.pt-grid {
  display: grid; grid-template-columns: 40% 1fr; gap: 64px;
  align-items: start; margin-top: 72px;
}

.pt-label {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: var(--space-5);
}
.pt-label-on { color: var(--primary-text); text-align: center; }

/* --- 左: 分断 --- */
.pt-split {
  background: var(--surface-alt); border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg); padding: 28px;
}
.pt-chain { list-style: none; margin: 0; padding: 0; }
.pt-item {
  border: 1px solid var(--navy); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--navy);
  font-size: var(--fs-base); font-weight: 600;
  padding: 9px 16px; text-align: center;
}
.pt-item + .pt-item { margin-top: 8px; }
.pt-item-x { border-color: #B7C2CC; color: var(--text-muted); font-weight: 500; }
/* 切れ目。破線が途中で止まる */
.pt-cut { position: relative; height: 34px; }
.pt-cut::before, .pt-cut::after {
  content: ""; position: absolute; left: 50%; margin-left: -0.5px;
  width: 0; height: 11px; border-left: 1px dashed #B7C2CC;
}
.pt-cut::before { top: 3px; }
.pt-cut::after  { bottom: 3px; }
.pt-caption {
  font-size: var(--fs-sm); color: var(--text-muted);
  line-height: 1.7; margin: var(--space-5) 0 0;
}

/* --- 右: 接続 --- */
.pt-connect { text-align: center; }
.pt-line {
  position: relative; list-style: none; margin: 0 auto; padding: 22px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); max-width: 560px;
}
.pt-line::before {
  content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 0;
  height: 1.3px; margin-top: -0.65px; background: var(--primary); opacity: .65;
}
.pt-line li {
  position: relative; padding-top: var(--space-5); text-align: center;
  font-size: var(--fs-base); font-weight: 600; color: var(--navy);
}
.pt-line li::before {
  content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.pt-line li.is-main { color: var(--primary-text); }
.pt-connect .pt-caption { text-align: center; }
.pt-drop {
  width: 1.3px; height: 44px; margin: var(--space-6) auto 0;
  background: var(--primary); opacity: .65;
}
.pt-phone { margin: var(--space-6) auto 0; width: max-content; }
.pt-phone img {
  display: block; height: 400px; width: auto;
  border-radius: 16px; border: 1px solid var(--neutral-border);
  box-shadow: 0 10px 30px rgba(19, 43, 69, .10);
  transform: rotate(-1.2deg);
}
.pt-foot { max-width: 720px; margin: 72px auto 0; }

/* --- モバイル --- */
@media (max-width: 1023px) {
  .pt-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 767px) {
  .partner { padding-top: 80px; padding-bottom: 80px; }
  .pt-grid { margin-top: 44px; gap: 40px; }
  .pt-split { padding: 22px; }
  .pt-line { max-width: 100%; }
  .pt-line li { font-size: 13px; }
  .pt-line li:last-child { font-size: 12px; }
  .pt-drop { height: 32px; }
  .pt-phone img { height: auto; width: 52vw; max-width: 210px; }
  .pt-foot { margin-top: 44px; }
  .partner .pt-intro p, .pt-foot p { font-size: 15px; line-height: 1.8; }
}

/* 業者3社のラベル: PC は「・」で1行、モバイルは3行に分ける（途中改行を防ぐ） */
.pt-many span + span::before { content: "・"; }
.pt-drop { margin-bottom: 0; }
.pt-phone { margin-top: 0; }
@media (max-width: 767px) {
  .pt-many span { display: block; line-height: 1.6; }
  .pt-many span + span::before { content: none; }
  .pt-line li { font-size: 13px; }
  .pt-line li:last-child { font-size: 12px; }
}

/* ============================================================
   第16回 — E「入力した数字が、そのまま経営の道具になります。」
   実レポート画面を主役に。カードは補助ポイントへ。
   ============================================================ */
.biz { padding-top: 132px; padding-bottom: 132px; }
.biz > .container { max-width: 1120px; }
.biz .kicker { text-align: center; }
.biz > .container > .h-section {
  text-align: center; max-width: 860px; margin-left: auto; margin-right: auto;
  font-size: 46px; line-height: 1.25;
}
.biz-lead {
  max-width: 720px; margin: var(--space-6) auto 0;
  text-align: center; color: rgba(255,255,255,0.78); line-height: 1.85;
}

/* データの流れ: 本文 → 実画面 */
.biz-drop { width: 1.3px; height: 56px; margin: var(--space-7) auto 0; background: var(--primary); opacity: .7; }

/* 実レポート画面 = 主役 */
.biz-shot { margin: var(--space-6) auto 0; max-width: 76%; text-align: center; }
.biz-shot-title {
  font-size: var(--fs-md); font-weight: 600; letter-spacing: .02em;
  color: rgba(255,255,255,0.82); margin: 0 0 var(--space-5);
}
.biz-shot .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 70px rgba(0,0,0,.34);
}
.biz-shot .shot-frame img { display: block; width: 100%; height: auto; }
.biz-shot .shot-frame::after { display: none; }
.biz-shot .shot-more {
  display: inline-block; margin-top: var(--space-5);
  color: rgba(255,255,255,0.78); border-bottom-color: rgba(255,255,255,0.3);
}
.biz-shot .shot-note { margin-top: var(--space-3); font-size: var(--fs-sm); }

/* 実画面 → 6つの見えること（1本の流れ＋最小限の分岐） */
.biz-branch { position: relative; height: 92px; margin-top: var(--space-7); }
.biz-branch .bb-v {
  position: absolute; left: 50%; top: 0; margin-left: -0.65px;
  width: 1.3px; height: 56px; background: var(--primary); opacity: .7;
}
.biz-branch .bb-h {
  position: absolute; left: 0; right: 0; top: 56px; height: 1px;
  background: rgba(255,255,255,0.16);
}
.biz-branch .bb-n {
  position: absolute; left: 50%; top: 56px; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--navy); border: 1.8px solid var(--primary);
}

/* 補助ポイント: カードをやめ、罫線＋小ノード */
.biz-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px;
}
.biz-points li { position: relative; padding-left: 22px; }
.biz-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; border: 1.6px solid var(--primary);
}
.biz-points h3 {
  font-size: var(--fs-md); font-weight: 700; color: #fff;
  margin: 0 0 10px; line-height: 1.5;
}
.biz-points p {
  margin: 0; font-size: var(--fs-base); line-height: 1.85;
  color: rgba(255,255,255,0.70);
}
.biz-close {
  max-width: 720px; margin: 88px auto 0; text-align: center;
  color: rgba(255,255,255,0.82);
}

@media (max-width: 1023px) {
  .biz-shot { max-width: 92%; }
}
@media (max-width: 767px) {
  .biz { padding-top: 84px; padding-bottom: 84px; }
  .biz > .container > .h-section { font-size: 32px; line-height: 1.3; }
  .biz-lead { font-size: 15px; line-height: 1.8; }
  .biz-drop { height: 36px; margin-top: var(--space-6); }
  /* 実画面は左右いっぱいまで大胆に。横スクロールは出さない */
  .biz-shot { max-width: none; margin-left: calc(var(--space-6) * -1); margin-right: calc(var(--space-6) * -1); }
  .biz-shot-title, .biz-shot .shot-more, .biz-shot .shot-note { padding: 0 var(--space-6); }
  .biz-shot .shot-frame { border-radius: 0; border-left: none; border-right: none; }
  .biz-branch { height: 68px; margin-top: var(--space-6); }
  .biz-branch .bb-v { height: 40px; }
  .biz-branch .bb-h, .biz-branch .bb-n { top: 40px; }
  .biz-points { grid-template-columns: 1fr; gap: 28px; }
  .biz-points h3 { font-size: 15px; }
  .biz-points p { font-size: 14px; line-height: 1.8; }
  .biz-close { margin-top: 52px; font-size: 15px; }
}

/* モバイル: 実画面は縮小せず、利益集計が読める位置でクロップして大胆に見せる
   （UI 自体は一切加工していない。表示位置を切り出しているだけ） */
@media (max-width: 767px) {
  .biz-shot .shot-frame {
    position: relative; height: 306px; overflow: hidden;
    border-radius: 0; border-left: none; border-right: none;
  }
  .biz-shot .shot-frame img {
    position: absolute; width: 1040px; max-width: none; height: auto;
    left: -104px; top: -112px;
  }
}

/* ============================================================
   第17回 — 中間CTA の軽量化 ／ F「1件 ↔ 全体」の左右対比
   ============================================================ */

/* 1. 中間CTA: ページの呼吸。バナーに見せない */
.cta-band { padding: 88px 0; }
.cta-band .container {
  flex-direction: column; justify-content: center; text-align: center; gap: var(--space-5);
  max-width: 720px;
}
.cta-band h2 { font-size: 26px; line-height: 1.4; margin-bottom: 10px; }
.cta-band p { max-width: 620px; margin: 0 auto; color: var(--text-muted); }
.cta-band .btn-primary {
  background: transparent; color: var(--primary-text);
  border: 1.5px solid var(--primary); box-shadow: none;
}
.cta-band .btn-primary:hover { background: var(--primary-faint); color: var(--primary-dark); }

/* 2. F: 2つの実画面を左右同格に */
.dual-sec > .container { max-width: 1180px; }
.dual-sec .kicker,
.dual-sec > .container > .h-section {
  text-align: center; max-width: 900px; margin-left: auto; margin-right: auto;
}
.dual-sec > .container > .h-section { font-size: 46px; line-height: 1.25; }

.dual {
  position: relative; margin-top: 72px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px;
  grid-template-rows: auto auto auto; align-items: start;
}
.dual-a { grid-column: 1; }
.dual-b { grid-column: 2; }
.dual-t { grid-row: 1; font-size: 20px; line-height: 1.5; color: var(--navy); margin: 0 0 12px; }
.dual-t::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.6px solid var(--primary); margin-right: 10px; position: relative; top: -1px;
}
.dual-p { grid-row: 2; margin: 0 0 var(--space-6); font-size: 15px; line-height: 1.85; color: var(--text-muted); }
.dual-s { grid-row: 3; margin: 0; }
.dual-s .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border, #E8EBF0);
  background: #F7F9FC; box-shadow: 0 14px 40px rgba(19,43,69,.10);
}
.dual-s .shot-frame img { display: block; width: 100%; height: auto; }
.dual-s .shot-frame::after { display: none; }
.dual-s figcaption { text-align: center; margin-top: var(--space-4); }

/* 中央の細い1本。「同じデータを、違う見方で見ている」 */
.dual-rule {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px;
  background: linear-gradient(to bottom,
    rgba(244,122,32,0) 0%, rgba(244,122,32,.45) 14%,
    rgba(244,122,32,.45) 86%, rgba(244,122,32,0) 100%);
}
.dual-rule i {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--surface); border: 1.8px solid var(--primary);
}
.dual-note { text-align: center; margin-top: var(--space-7); }
.dual-close {
  max-width: 720px; margin: var(--space-7) auto 0; text-align: center;
  font-size: 16px; line-height: 1.85;
}

@media (max-width: 1023px) {
  .dual { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; }
  .dual-a, .dual-b { grid-column: 1; }
  .dual-t, .dual-p, .dual-s { grid-row: auto; }
  .dual-rule { display: none; }
}
@media (max-width: 767px) {
  .cta-band { padding: 64px 0; }
  .cta-band h2 { font-size: 21px; }
  .dual-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .dual { margin-top: 44px; }
  .dual-t { font-size: 17px; }
  .dual-p { font-size: 15px; line-height: 1.8; margin-bottom: var(--space-5); }
  /* 実画面は縮小せず、特徴的な部分をクロップして横幅いっぱいに（UI は加工していない） */
  .dual-s { margin: 0 calc(var(--space-6) * -1); }
  .dual-s .shot-frame {
    position: relative; height: 260px; overflow: hidden;
    border-radius: 0; border-left: none; border-right: none;
  }
  .dual-s .shot-frame img { position: absolute; width: 1000px; max-width: none; height: auto; }
  .dual-a .shot-frame img { left: -110px; top: -184px; }
  .dual-b .shot-frame img { left: -110px; top: -159px; }
  .dual-s figcaption { padding: 0 var(--space-6); }
  /* 詳細 → 一覧 をつなぐ縦線 */
  .dual-a.dual-s { margin-bottom: 0; }
  .dual-b.dual-t { position: relative; margin-top: 68px; }
  .dual-b.dual-t::after {
    content: ""; position: absolute; left: 50%; top: -56px; margin-left: -0.65px;
    width: 1.3px; height: 40px; background: var(--primary); opacity: .65;
  }
  .dual-close { font-size: 15px; margin-top: var(--space-6); }
}

/* 2画面の視覚高さを揃える（縦横比が違うため、下端だけ僅かに切る） */
@media (min-width: 1024px) {
  .dual-s .shot-frame { height: 298px; }
  .dual-s .shot-frame img { height: 100%; object-fit: cover; object-position: top center; }
}

/* モバイル: 見出し→本文→画面 を A・B の順で正しく並べる */
@media (max-width: 1023px) {
  .dual-rule { order: 0; }
  .dual-t.dual-a { order: 1; }
  .dual-p.dual-a { order: 2; }
  .dual-s.dual-a { order: 3; }
  .dual-t.dual-b { order: 4; }
  .dual-p.dual-b { order: 5; }
  .dual-s.dual-b { order: 6; }
  .dual-s.dual-a { margin-bottom: 0; }
  .dual-t.dual-b { margin-top: 68px; }
}

/* 中間CTA: 中央整理でも高さを増やしすぎない */
.cta-band { padding: 76px 0; }
.cta-band .container { gap: var(--space-4); }
@media (max-width: 767px) { .cta-band { padding: 58px 0; } }

/* ============================================================
   第18回 — G「14年の実務が土台にあり、いま、その全部が動いています。」
   ネイビーの角丸カードを廃止。年表そのものを一本線モチーフにする。
   ============================================================ */
.years { padding: 140px 0; background: var(--bg); }
.years > .container { max-width: 1120px; }
.years > .container > .h-section {
  text-align: center; max-width: 900px; margin: 0 auto;
  font-size: 46px; line-height: 1.25;
}

.yr { margin-top: 76px; }

/* 主役の 2 つの数字。白地にネイビー */
.yr-main {
  display: flex; align-items: center; justify-content: center; gap: var(--space-9);
}
.yr-num { text-align: center; color: var(--navy); }
.yr-num b {
  display: block; font-weight: 700; line-height: 0.86; letter-spacing: -0.03em;
}
.yr-14 b { font-size: 168px; }
.yr-226 b { font-size: 122px; }
.yr-num span {
  display: block; margin-top: var(--space-4);
  color: var(--text-muted); letter-spacing: 0.18em;
}
.yr-14 span { font-size: 26px; }
.yr-226 span { font-size: 18px; letter-spacing: 0.06em; }
.yr-x { font-size: 46px; color: var(--primary); font-weight: 700; line-height: 1; }

/* 2012 ●────────────● 2026 — これがこのセクションの一本線 */
.yr-line {
  display: flex; align-items: center; gap: var(--space-5);
  max-width: 760px; margin: 56px auto 0;
  font-size: var(--fs-sm); letter-spacing: 0.14em; color: var(--text-muted);
}
.yr-line i {
  position: relative; flex: 1; height: 1.3px; display: block;
  background: var(--primary); opacity: .65;
}
.yr-line i::before,
.yr-line i::after {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px;
  margin-top: -4.5px; border-radius: 50%;
  background: var(--surface); border: 1.8px solid var(--primary);
}
.yr-line i::before { left: -4.5px; }
.yr-line i::after  { right: -4.5px; }

/* 6 つの内訳は補助。罫線の上に小さく並べる */
.yr-sub {
  list-style: none; margin: 40px auto 0; padding: var(--space-6) 0 0;
  max-width: 900px; border-top: 1px solid var(--card-border, #E8EBF0);
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.yr-sub li { text-align: center; position: relative; }
.yr-sub li + li::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--card-border, #E8EBF0);
}
.yr-sub b {
  display: block; font-size: 21px; font-weight: 700; color: var(--navy); line-height: 1.2;
}
.yr-sub span { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; }

.yr-copy {
  text-align: center; margin: 44px 0 0;
  font-size: var(--fs-lead); color: var(--navy); font-weight: 600;
}
.yr-body { max-width: 720px; margin: 76px auto 0; }

@media (max-width: 1023px) {
  .yr-14 b { font-size: 128px; }
  .yr-226 b { font-size: 92px; }
}
@media (max-width: 767px) {
  .years { padding: 84px 0; }
  .years > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .yr { margin-top: 48px; }
  .yr-main { gap: var(--space-5); }
  .yr-14 b { font-size: 88px; }
  .yr-226 b { font-size: 46px; }
  .yr-14 span { font-size: 16px; }
  .yr-226 span { font-size: 13px; }
  .yr-x { font-size: 26px; }
  .yr-line { margin-top: 36px; gap: var(--space-4); }
  .yr-sub { grid-template-columns: repeat(3, 1fr); row-gap: 24px; max-width: 340px; margin-top: 32px; }
  .yr-sub li:nth-child(3n+1)::before { content: none; }
  .yr-sub b { font-size: 18px; }
  .yr-copy { font-size: 15px; margin-top: 32px; }
  .yr-body { margin-top: 44px; }
}

/* モバイル: 2つの数字は横に並べきれないので縦に積む（横スクロール対策） */
@media (max-width: 767px) {
  .yr-main { flex-direction: column; gap: var(--space-5); }
  .yr-14 b { font-size: 104px; }
  .yr-226 b { font-size: 56px; }
  .yr-14 span { font-size: 17px; }
  .yr-226 span { font-size: 13px; }
  .yr-x { font-size: 24px; }
  .yr-copy { font-size: 14px; }
}

/* ============================================================
   第19回 — H「誰が、いつ、何をしたか。全部残ります。」
   実監査ログ画面を主役に。10 YEARS の巨大数字は廃止（G と衝突するため）。
   ============================================================ */
.audit { padding: 132px 0; }
.audit > .container { max-width: 1120px; }
.audit > .container > .h-section {
  text-align: center; max-width: 940px; margin: 0 auto;
  font-size: 46px; line-height: 1.25;
}
.audit-lead {
  text-align: center; max-width: 720px; margin: var(--space-6) auto 0;
  font-weight: 600; color: var(--navy);
}
.audit-note {
  text-align: center; max-width: 720px; margin: var(--space-5) auto 0;
  font-size: var(--fs-base); line-height: 1.85; color: var(--text-muted);
}

/* 主役: 実監査ログ画面 */
.audit-shot { margin: 64px auto 0; max-width: 890px; text-align: center; }
.audit-shot .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 18px 50px rgba(19,43,69,.13);
}
.audit-shot .shot-frame img { display: block; width: 100%; height: auto; }
.audit-shot .shot-frame::after { display: none; }
.audit-shot .shot-more { display: inline-block; margin-top: var(--space-5); }
.audit-shot .shot-note { margin-top: var(--space-3); }

/* 7年 → 10年。細い線1本でつなぐ。数字は 52px まで */
.law {
  display: flex; align-items: center; justify-content: center; gap: var(--space-7);
  margin: 64px auto 0;
}
.law-item { text-align: center; }
.law-lb {
  display: block; font-size: var(--fs-sm); color: var(--text-muted);
  letter-spacing: .04em; margin-bottom: 6px;
}
.law-item b {
  display: block; font-size: 52px; font-weight: 700; line-height: 1;
  color: var(--text-muted); letter-spacing: -0.02em;
}
.law-item.is-retera b { color: var(--navy); }
.law-item.is-retera .law-lb { color: var(--primary-text); font-weight: 700; }
.law-link {
  position: relative; display: block; flex: 0 0 132px; height: 1.3px;
  background: var(--primary); opacity: .65; margin-top: 18px;
}
.law-link::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px;
  margin-top: -4.5px; border-radius: 50%;
  background: var(--primary-faint); border: 1.8px solid var(--primary);
}

/* 01〜06 は補助。カードにしない */
.audit-pts {
  list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 48px;
}
.audit-pts li { position: relative; padding-top: var(--space-4); border-top: 1px solid rgba(19,43,69,.10); }
.audit-pts .no {
  display: block; font-size: var(--fs-sm); font-weight: 700;
  color: var(--primary-text); letter-spacing: .1em; margin-bottom: 6px;
}
.audit-pts h3 { font-size: var(--fs-md); font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.5; }
.audit-pts p { margin: 0; font-size: var(--fs-base); line-height: 1.85; color: var(--text-muted); }

@media (max-width: 1023px) {
  .audit-shot { max-width: 100%; }
  .audit-pts { grid-template-columns: repeat(2, 1fr); gap: 30px 36px; }
}
@media (max-width: 767px) {
  .audit { padding: 84px 0; }
  .audit > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .audit-lead { font-size: 16px; margin-top: var(--space-5); }
  .audit-note { font-size: 15px; line-height: 1.8; margin-top: var(--space-4); }
  /* 実画面は縮小せず、日時・アクション・操作者が読める位置でクロップ */
  .audit-shot { margin: 40px calc(var(--space-6) * -1) 0; max-width: none; width: auto; }
  .audit-shot .shot-frame {
    position: relative; height: 290px; overflow: hidden;
    border-radius: 0; border-left: none; border-right: none;
  }
  .audit-shot .shot-frame img {
    position: absolute; width: 920px; max-width: none; height: auto;
    left: -101px; top: -198px;
  }
  .audit-shot .shot-more, .audit-shot .shot-note { padding: 0 var(--space-6); }
  .law { gap: var(--space-5); margin-top: 44px; }
  .law-item b { font-size: 40px; }
  .law-link { flex: 0 0 64px; margin-top: 16px; }
  .audit-pts { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .audit-pts li { padding-top: var(--space-3); }
  .audit-pts p { font-size: 14px; line-height: 1.8; }
}

/* ============================================================
   第20回 — I「買って、直して、売る。その全部が、1つの台帳に載ります。」
   C・D と同じ語彙（白ピル＋破線の切れ目／細いオレンジ一本線＋ノード）へ。
   実画面を背景に薄く敷く扱い（.deal2-bg）は廃止。
   ============================================================ */
.resale { padding: 132px 0; }
.resale > .container { max-width: 1120px; }
.resale .kicker,
.resale > .container > .h-section { text-align: center; }
.resale > .container > .h-section {
  font-size: 46px; line-height: 1.25; max-width: 900px; margin: 0 auto;
}
.resale-lead { max-width: 720px; margin: var(--space-6) auto 0; }
.resale-lead p { line-height: 1.85; }

.resale-viz { max-width: 1040px; margin: 72px auto 0; }
.rs + .rs { margin-top: 56px; }
.rs-label {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  color: var(--text-muted); text-align: center; margin-bottom: var(--space-6);
}
.rs-label-on { color: var(--primary-text); }

/* よくある状態 = 切れている */
.rs-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; max-width: 820px; margin: 0 auto;
}
.rs-box {
  background: var(--surface); border: 1px solid var(--neutral-border);
  border-radius: var(--radius-pill); padding: 12px 26px;
  font-size: var(--fs-md); color: var(--text); font-weight: 600; white-space: nowrap;
}
.rs-cut {
  position: relative; flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap;
}
.rs-cut::before, .rs-cut::after {
  content: ""; position: absolute; top: 50%; width: 52px;
  border-top: 1px dashed #C3CDD6;
}
.rs-cut::before { right: calc(50% + 48px); }
.rs-cut::after  { left: calc(50% + 48px); }

/* RETERA = 一本線の上に 4 つのノード（FV・C・D と同じ形） */
.rs-line {
  position: relative; list-style: none; margin: 0 auto; padding: 22px 0 0;
  max-width: 900px; display: grid; grid-template-columns: repeat(4, 1fr);
}
.rs-line::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 0;
  height: 1.3px; margin-top: -0.65px; background: var(--primary); opacity: .65;
}
.rs-line li {
  position: relative; padding-top: var(--space-5); text-align: center;
  font-size: var(--fs-md); font-weight: 600; color: var(--navy);
}
.rs-line li::before {
  content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.resale-foot { max-width: 720px; margin: 64px auto 0; }

@media (max-width: 767px) {
  .resale { padding: 84px 0; }
  .resale > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .resale-lead p { font-size: 15px; line-height: 1.8; }
  .resale-viz { margin-top: 44px; }
  .rs + .rs { margin-top: 40px; }
  /* 横に並べきれないので縦に積む。切れ目は縦の破線で示す */
  .rs-row { flex-direction: column; max-width: 100%; }
  .rs-box { width: 100%; text-align: center; padding: 11px 16px; font-size: 15px; white-space: normal; }
  .rs-cut { flex: 0 0 auto; width: 100%; padding: 32px 0; }
  .rs-cut::before, .rs-cut::after {
    left: 50%; right: auto; width: 0; height: 13px; margin-left: -0.5px;
    border-top: none; border-left: 1px dashed #C3CDD6; top: auto;
  }
  .rs-cut::before { top: 9px; }
  .rs-cut::after  { bottom: 9px; }
  /* 4 工程は 2 列 × 2 段。C と同じく 1 本の蛇行ラインにする（順序は不変） */
  .rs-line {
    position: relative; grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 62px; row-gap: 0; padding: 6px 0 0;
  }
  .rs-line::before { content: none; }
  .rs-line li { font-size: 14px; padding-top: 16px; }
  /* 2 段目は右→左へ折り返す */
  .rs-line li:nth-child(3) { grid-column: 2; grid-row: 2; }
  .rs-line li:nth-child(4) { grid-column: 1; grid-row: 2; }
  .rs-line li::after {
    content: ""; position: absolute; top: 0; height: 1.3px;
    margin-top: -0.65px; background: var(--primary); opacity: .65;
  }
  .rs-line li:nth-child(1)::after { left: 50%; width: 100%; }
  .rs-line li:nth-child(3)::after { left: auto; right: 50%; width: 100%; }
  .rs-line li:nth-child(2)::after,
  .rs-line li:nth-child(4)::after { content: none; }
  /* 折返しの縦（右端 1→2 段目）。角はノードが受ける */
  .rs-line::after {
    content: ""; position: absolute; left: 75%; margin-left: -0.65px; top: 6px;
    width: 1.3px; height: 62px; background: var(--primary); opacity: .65;
  }
  .resale-foot { margin-top: 44px; }
}

/* ============================================================
   第21回 — J「使わない機能は、閉じておけます。」
   意味を運ばない OFF／ON のトグル装飾を廃止。
   「開いている＝実線＋オレンジのノード」「閉じている＝破線＋空のノード」で示す。
   ============================================================ */
.onoff-sec { padding: 132px 0; }
.onoff-sec > .container { max-width: 1120px; }
.onoff-sec > .container > .h-section {
  text-align: center; font-size: 46px; line-height: 1.25;
  max-width: 900px; margin: 0 auto;
}
.onoff-lead {
  max-width: 720px; margin: var(--space-6) auto 0; text-align: center;
  font-size: var(--fs-lead); color: var(--text-muted);
}

.onoff2 {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 64px;
  max-width: 1000px; margin: 72px auto 0; align-items: start;
}
.oo h3 {
  font-size: var(--fs-md); font-weight: 700; color: var(--navy);
  margin: 0 0 var(--space-5); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--card-border, #E8EBF0);
}
.oo-later h3 { color: var(--text-muted); }
.oo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.oo li {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: var(--radius-pill); padding: 9px 18px;
  font-size: var(--fs-base); font-weight: 600;
}
.oo li::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
}
/* 開いている */
.oo-on li {
  background: var(--surface); border: 1px solid var(--neutral-border); color: var(--navy);
}
.oo-on li::before { background: var(--primary); }
/* 閉じている（＝いつでも開ける） */
.oo-later li {
  background: transparent; border: 1px dashed #C3CDD6; color: var(--text-muted);
}
.oo-later li::before { background: transparent; border: 1.5px solid #C3CDD6; }

.onoff-foot {
  max-width: 720px; margin: 64px auto 0; text-align: center;
  font-size: var(--fs-lead); line-height: 1.85;
}

@media (max-width: 767px) {
  .onoff-sec { padding: 84px 0; }
  .onoff-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .onoff-lead { font-size: 15px; margin-top: var(--space-5); }
  .onoff2 { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .oo li { padding: 8px 14px; font-size: 14px; }
  .onoff-foot { font-size: 15px; margin-top: 44px; }
}

/* ============================================================
   第22回 — K0「店舗の数字は、隠しません。」
   全面ネイビーを廃止（E だけを第2ヒーローとして残す）。
   色面ではなく、タイポグラフィと余白で立たせる。
   ============================================================ */
.creed {
  background: var(--surface);
  padding: 148px 0 124px;
}
.creed > .container { max-width: 1120px; }

.creed-h {
  margin: 0; max-width: 780px;
  font-size: 64px; font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--navy);
}
/* 白背景なので、文字のオレンジは AA を満たす #A45E00 を使う */
.creed-h .hi { display: block; color: var(--primary-text); }

/* 一本の境界。ノードは左端に 1 個だけ */
.creed-rule {
  position: relative; height: 1.3px; margin: 48px 0 44px;
  background: var(--primary); opacity: .65;
}
.creed-rule::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -1px; border-radius: 50%;
  background: var(--surface); border: 1.8px solid var(--primary); opacity: 1;
}

.creed-body { max-width: 620px; }
.creed-body p { margin: 0 0 22px; font-size: 16px; line-height: 1.9; color: var(--text-muted); }
.creed-body p:last-child { margin-bottom: 0; }
.creed-body .lead { color: var(--navy); font-weight: 600; }

@media (max-width: 767px) {
  .creed { padding: 92px 0 84px; }
  .creed-h { font-size: 38px; line-height: 1.2; max-width: 100%; }
  .creed-rule { margin: 32px 0 30px; }
  .creed-body p { font-size: 15px; line-height: 1.85; margin-bottom: 20px; }
}

/* lead をネイビーにしたぶん、強調が消えていたので戻す */
.creed-body .lead .emph { color: var(--primary-text); }

/* ============================================================
   第23回 — K「こんな会社に向いています。」
   K0（思想の言い切り）→ K（読者の自己診断）→ L（話してみる）の導線。
   5枚カードにはしない。ノードと細罫だけで組む。
   ============================================================ */
.fit-sec { background: #F7F9FC; padding: 112px 0 96px; }
.fit-sec > .container { max-width: 1120px; }
.fit-sec > .container > .h-section {
  text-align: center; font-size: 46px; line-height: 1.25;
  max-width: 800px; margin: 0 auto;
}

/* 2 列 × 2 段 ＋ 最終 1 項目を中央に */
.fit3 {
  list-style: none; margin: 56px auto 0; padding: 0;
  max-width: 940px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 32px;
}
.fit3 li {
  position: relative; display: grid; grid-template-columns: auto auto 1fr;
  align-items: baseline; gap: 12px;
  padding: 0 0 18px 0; border-bottom: 1px solid #DDE3EA;
  background: transparent;
}
/* チェック = FV から続く白抜きノード。緑のチェックは使わない */
.fit3 li::before {
  content: ""; position: relative; top: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.fit3 .n {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  color: var(--primary-text);
}
.fit3 .t { font-size: 17px; line-height: 1.6; color: var(--navy); font-weight: 600; }
/* 5 番目は 2 列にまたがって中央 */
.fit3 li:nth-child(5) {
  grid-column: 1 / -1; justify-self: center; max-width: 520px;
}

/* 結論へ渡す短い線 */
.fit-bridge {
  position: relative; width: 1.3px; height: 44px; margin: 48px auto 0;
  background: var(--primary); opacity: .65;
}
.fit-bridge::after {
  content: ""; position: absolute; left: 50%; bottom: -4.5px; margin-left: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #F7F9FC; border: 1.8px solid var(--primary);
}
.fit-close {
  max-width: 720px; margin: var(--space-6) auto 0; text-align: center;
  font-size: 23px; font-weight: 700; color: var(--navy); line-height: 1.55;
}

@media (max-width: 767px) {
  .fit-sec { padding: 80px 0 68px; }
  .fit-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  /* 1 列。左に細いオレンジ縦線を通し、各項目にノードを置く */
  .fit3 {
    position: relative; grid-template-columns: 1fr; row-gap: 26px;
    margin-top: 40px; padding-left: 26px;
  }
  .fit3::before {
    content: ""; position: absolute; left: 4.5px; top: 7px; bottom: 22px;
    width: 1.3px; background: var(--primary); opacity: .65;
  }
  .fit3 li {
    grid-template-columns: auto 1fr; align-items: baseline; gap: 10px;
    padding-bottom: 0; border-bottom: none;
  }
  .fit3 li::before {
    position: absolute; left: -26px; top: 7px;
    width: 10px; height: 10px; border: 2px solid var(--primary);
  }
  .fit3 li:nth-child(5) { grid-column: auto; justify-self: stretch; max-width: 100%; }
  .fit3 .t { font-size: 15px; line-height: 1.65; }
  .fit-bridge { height: 32px; margin-top: 34px; }
  .fit-close { font-size: 19px; line-height: 1.5; margin-top: var(--space-5); }
}

/* ============================================================
   第24回 — L 最終CTA ／ L → フッターの接続
   4ステップをブランドの一本線の帰結にする。CTA をページ内で最強に。
   ============================================================ */
.cta3 { padding: 112px 0 104px; }
.cta3 h2 { font-size: 58px; margin-bottom: var(--space-5); }
.cta3-eyebrow { font-size: var(--fs-sm); letter-spacing: 0.22em; margin-bottom: var(--space-5); }
.cta3-lead { color: rgba(255,255,255,0.76); margin: 0 auto var(--space-9); max-width: 40em; }

/* 4ステップ = FV から続く一本線とノード */
.cta3-steps { margin: 0 auto var(--space-8); }
.cta3-steps::before { top: 5px; height: 1.3px; opacity: 0.65; }
.cta3-step::before {
  content: ""; position: absolute; top: 0; left: 50%; margin-left: -5px; z-index: 1;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--navy); border: 2px solid var(--primary);
}
.cta3-step .n {
  display: block; width: auto; height: auto; background: none; border-radius: 0;
  color: var(--primary); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em;
  margin-top: 26px;
}
.cta3-step p { margin: 6px 0 0; font-size: var(--fs-base); color: rgba(255,255,255,0.82); }

/* 04 から CTA へ短く落とす。ボタンには触れさせない */
.cta3-drop {
  position: relative; width: 1.3px; height: 40px; margin: 0 auto var(--space-7);
  background: var(--primary); opacity: .65;
}
.cta3-drop::after {
  content: ""; position: absolute; left: 50%; bottom: -4.5px; margin-left: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--navy); border: 1.8px solid var(--primary);
}

/* CTA をページ内で最強に（色は増やさず、大きさと余白で差をつける） */
.btn-cta { width: auto; min-width: 264px; height: 62px; padding: 0 44px; font-size: 18px; }
.cta3-note { margin-top: var(--space-5); font-size: var(--fs-sm); color: rgba(255,255,255,0.62); }

/* ---- フッター: 上段ネイビー（L と連続）／下段 白（ロゴの判読性を守る） ---- */
.site-footer { background: transparent; border-top: none; border-bottom: 2px solid var(--primary); padding: 0; }
.footer-top { background: var(--navy); padding: 64px 0 56px; color: rgba(255,255,255,0.72); }
.footer-top .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-8); }
.footer-top .footer-brand p { max-width: 22em; margin: 0; line-height: 1.9; color: rgba(255,255,255,0.72); }
.footer-top .footer-col h2 { color: #fff; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; margin: 0 0 var(--space-4); line-height: inherit; }
.footer-top .footer-col li { margin-bottom: 10px; }
.footer-top .footer-col a { color: rgba(255,255,255,0.72); text-decoration: none; }
.footer-top .footer-col a:hover { color: #fff; }

.footer-base {
  display: block; background: var(--surface); margin: 0; padding: 22px 0; border-top: none;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.footer-base .container {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
}
.footer-base img { height: 22px; width: auto; display: block; }
.footer-base span:last-child { margin-left: auto; }

@media (max-width: 767px) {
  .cta3 { padding: 84px 0 76px; }
  .cta3 h2 { font-size: 34px; }
  .cta3-lead { margin-bottom: var(--space-8); }
  .cta3-drop { height: 30px; margin-bottom: var(--space-6); }
  .btn-cta { width: calc(100% - 48px); max-width: 320px; min-width: 0; height: 58px; padding: 0 24px; }
  .footer-top { padding: 48px 0 40px; }
  .footer-top .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-top .footer-col li { margin-bottom: 8px; }
  .footer-base { padding: 18px 0; }
  .footer-base .container { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-base span:last-child { margin-left: 0; }
}

/* ol の既定マーカー（1. 2. 3. 4.）が出ていたので消す */
.cta3-steps { list-style: none; padding: 0; }

/* モバイルフッターを情報を削らずに圧縮（12px 未満にはしない） */
@media (max-width: 767px) {
  .footer-top { padding: 40px 0 32px; }
  .footer-top .footer-grid { gap: 20px; }
  .footer-top .footer-col li { margin-bottom: 6px; }
  .footer-top .footer-brand p { line-height: 1.8; }
  .footer-base { padding: 16px 0; }
  .footer-base .container { gap: 8px; }
}

/* L と地続きだが、フッターの始まりは細い線で分かるようにする */
.footer-top { border-top: 1px solid rgba(255,255,255,0.10); }

/* ============================================================
   第25回 A-1 — C・D の見出しだけ 34px で階層が谷になっていたので揃える。
   46px 群より一段弱いまま、42px（モバイル 30px）へ。構造・コピーは不変。
   ============================================================ */
.flow-in > .container > .h-section,
.partner > .container > .h-section {
  font-size: 42px; line-height: 1.25;
}
@media (max-width: 767px) {
  .flow-in > .container > .h-section,
  .partner > .container > .h-section {
    font-size: 30px; line-height: 1.3;
  }
}

/* ============================================================
   第25回 B — features.html をトップと同じデザイン言語へ（第1回）
   対象: ファーストビュー ／ 2. 見積・契約
   ============================================================ */
.feat-hero { background: var(--surface); padding: 120px 0 104px; }
.feat-hero > .container { max-width: 1120px; }
.feat-hero .h-hero {
  font-size: 56px; line-height: 1.2; color: var(--navy);
  letter-spacing: -0.01em; margin: 0;
}
.feat-hero-lead {
  max-width: 640px; margin: var(--space-6) 0 0;
  color: var(--text-muted); line-height: 1.85;
}

/* 6 段階の一本線（トップの工程ラインと同じ形） */
.featline {
  position: relative; list-style: none; margin: 72px 0 0; padding: 22px 0 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.featline::before {
  content: ""; position: absolute; left: 8.33%; right: 8.33%; top: 0;
  height: 1.3px; margin-top: -0.65px; background: var(--primary); opacity: .65;
}
.featline li {
  position: relative; padding-top: var(--space-5); text-align: center;
  font-size: var(--fs-md); font-weight: 600; color: var(--navy);
}
.featline li::before {
  content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}

/* 見積 → 契約 → 請求。同じ数字が渡ることを示す */
.chainline {
  position: relative; list-style: none; margin: var(--space-7) 0 var(--space-8); padding: 22px 0 0;
  max-width: 560px; display: grid; grid-template-columns: repeat(3, 1fr);
}
.chainline::before {
  content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 0;
  height: 1.3px; margin-top: -0.65px; background: var(--primary); opacity: .65;
}
.chainline li {
  position: relative; padding-top: var(--space-5); text-align: center;
  font-size: var(--fs-md); font-weight: 600; color: var(--navy);
}
.chainline li::before {
  content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}

/* 外部サービスとの連携は、機能本体より弱く見せる */
.feat-opt {
  margin: var(--space-4) 0 0; padding-left: 12px;
  border-left: 2px solid var(--neutral-border);
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text-muted);
}

@media (max-width: 767px) {
  .feat-hero { padding: 84px 0 72px; }
  .feat-hero .h-hero { font-size: 32px; line-height: 1.3; }
  .feat-hero-lead { font-size: 15px; line-height: 1.8; }
  .featline {
    grid-template-columns: repeat(3, 1fr); row-gap: 26px; margin-top: 44px; padding-top: 18px;
  }
  .featline::before { content: none; }
  .featline li { font-size: 13px; padding-top: var(--space-4); }
  .featline li::after {
    content: ""; position: absolute; top: 0; left: 50%; width: 100%;
    height: 1.3px; margin-top: -0.65px; background: var(--primary); opacity: .65;
  }
  .featline li:nth-child(3n)::after { content: none; }
  .chainline { max-width: 100%; margin-top: var(--space-6); }
  .chainline li { font-size: 14px; }
}

/* ============================================================
   第26回 — features「1. 引合・顧客」を本編の基準セクションに
   実画面（一覧＋詳細）が主役。4機能は補助のポイント群へ。
   ============================================================ */
.lead-sec { padding: 96px 0 76px; }
.lead-sec > .container { max-width: 1120px; }
.lead-sec > .container > .h-section {
  font-size: 44px; line-height: 1.25; margin: 0;
}

/* ステージ表示: 丸ピルをやめ、01 / ラベル の軽い表記に */
.fstage { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--space-4); }
.fstage b { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; color: var(--primary-text); }
.fstage span { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; color: var(--navy); }
.fstage span::before { content: "/ "; color: var(--neutral-strong); font-weight: 400; }

/* 一覧を大きなベース、詳細を重ねる */
.lead-shots { position: relative; margin: 44px 0 0; padding-bottom: 24px; }
.ls-main { width: 70%; margin: 0; }
.ls-sub {
  position: absolute; right: 0; bottom: 0; width: 44%; margin: 0;
}
.lead-shots .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 14px 40px rgba(19,43,69,.12);
}
.ls-sub .shot-frame { box-shadow: 0 18px 44px rgba(19,43,69,.18); }
.lead-shots .shot-frame img { display: block; width: 100%; height: auto; }
.lead-shots .shot-frame::after { display: none; }
.ls-tag {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: 10px;
}
/* 一覧 → 詳細 を結ぶ短い線（ノード 2 個まで） */
.ls-link { display: none; }   /* 2枚が重なっている時点で関係が伝わるため、線は出さない */
.lead-note { margin-top: var(--space-5); }

/* 4 機能は補助のポイント群（カードにしない） */
.lead-pts {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 56px;
}
.lead-pts li { position: relative; padding-left: 22px; }
.lead-pts li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; border: 1.6px solid var(--primary);
}
.lead-pts h3 { font-size: var(--fs-md); font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.5; }
.lead-pts p { margin: 0; font-size: var(--fs-base); line-height: 1.85; color: var(--text-muted); }

@media (max-width: 1023px) {
  .ls-main { width: 100%; }
  .ls-sub { position: static; width: 78%; margin: 32px 0 0 auto; }
  .ls-link { display: none; }
  .lead-shots { padding-bottom: 0; }
}
@media (max-width: 767px) {
  .lead-sec { padding: 80px 0 68px; }
  .lead-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .lead-shots { margin-top: 40px; }
  /* 一覧は左右いっぱい。詳細はその下に少しずらして重ねない */
  .ls-main { margin: 0 calc(var(--space-6) * -1); width: auto; max-width: none; }
  .ls-main .shot-frame { border-radius: 0; border-left: none; border-right: none; }
  .ls-main .ls-tag { padding-left: var(--space-6); }
  .ls-sub { width: 86%; margin: 28px 0 0 auto; }
  .lead-pts { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
  .lead-pts p { font-size: 14px; line-height: 1.8; }
}

/* モバイル: 実画面は縮小せずクロップして読めるようにする（UI は加工していない） */
@media (max-width: 767px) {
  .ls-main .shot-frame, .ls-sub .shot-frame {
    position: relative; overflow: hidden;
  }
  .ls-main .shot-frame { height: 214px; }
  .ls-sub .shot-frame  { height: 196px; border-radius: 0; border-left: none; border-right: none; }
  .ls-main .shot-frame img, .ls-sub .shot-frame img {
    position: absolute; width: 1000px; max-width: none; height: auto;
  }
  .ls-main .shot-frame img { left: -104px; top: -159px; }
  .ls-sub  .shot-frame img { left: -110px; top: -184px; }
  .ls-sub { width: auto; margin: 26px calc(var(--space-6) * -1) 0; }
  .ls-sub .ls-tag { padding-left: var(--space-6); }
  .lead-pts { gap: 20px; }
  .lead-pts p { line-height: 1.75; }
}

/* ============================================================
   第27回 — features「6. 分析・評価」
   実画面2枚を縦積みから左右同格へ。features 本編の基準（第26回）に揃える。
   ============================================================ */
.ana-sec { padding: 96px 0 76px; }
.ana-sec > .container { max-width: 1160px; }
.ana-sec > .container > .h-section {
  font-size: 44px; line-height: 1.25; max-width: 880px; margin: 0;
}
/* 第41回: LTV 廃止（2026-08-14）に伴い、2枚並び（.ana-shots）から
   レポート1枚の全幅（.rep-shot）へ組み替えた */
.rep-shot { margin: 44px auto 0; max-width: 940px; }
.rep-shot .ls-tag { margin-bottom: var(--space-3); }
.rep-shot .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 16px 42px rgba(19,43,69,.12);
}
.rep-shot .shot-frame img { display: block; width: 100%; height: auto; }
.rep-shot .shot-frame::after { display: none; }
.rep-shot .shot-note { margin-top: var(--space-3); }
.ana-pts { margin-top: 48px; }

@media (max-width: 767px) {
  .ana-sec { padding: 72px 0 60px; }
  .ana-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .rep-shot { margin: 36px calc(var(--space-6) * -1) 0; max-width: none; }
  .rep-shot .ls-tag, .rep-shot .shot-note { padding: 0 var(--space-6); }
  /* 縮小せず、読める位置でクロップ（UI は加工していない） */
  .rep-shot .shot-frame {
    position: relative; height: 258px; overflow: hidden;
    border-radius: 0; border-left: none; border-right: none;
  }
  .rep-shot .shot-frame img {
    position: absolute; left: -104px; top: -140px; width: 1040px; max-width: none; height: auto;
  }
  .ana-pts { margin-top: 36px; }
}

/* ============================================================
   第28回 A — features「3. 工程」
   横断工程表は横に広いことに意味があるので、PC では切らずに最大級で出す。
   ============================================================ */
.gantt-sec { padding: 88px 0 68px; }
.gantt-sec > .container { max-width: 1160px; }
.gantt-sec > .container > .h-section {
  font-size: 44px; line-height: 1.25; max-width: 880px; margin: 0;
}
.gantt-shot { margin: 36px 0 0; }
.gantt-shot .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 14px 40px rgba(19,43,69,.12);
}
.gantt-shot .shot-frame img { display: block; width: 100%; height: auto; }
.gantt-shot .shot-frame::after { display: none; }
.gantt-shot .shot-more { display: inline-block; margin-top: var(--space-4); }
.gantt-note { margin-top: var(--space-4); }
.gantt-pts { margin-top: 40px; }

@media (max-width: 767px) {
  .gantt-sec { padding: 72px 0 60px; }
  .gantt-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  /* 全体縮小では潰れるので、案件名＋工程＋直近の工程バーが同時に見える位置でクロップ */
  .gantt-shot { margin: 36px calc(var(--space-6) * -1) 0; }
  .gantt-shot .shot-frame {
    position: relative; height: 250px; overflow: hidden;
    border-radius: 0; border-left: none; border-right: none;
  }
  .gantt-shot .shot-frame img {
    position: absolute; width: 980px; max-width: none; height: auto;
    left: -98px; top: -96px;
  }
  .gantt-shot figcaption, .gantt-note { padding: 0 var(--space-6); }
  .gantt-pts { margin-top: 36px; }
}

/* ============================================================
   第28回 B — features「1. 引合・顧客」モバイルだけ軽量化
   PC は 1px も変えていない。実画面のクロップにも触っていない。
   ============================================================ */
@media (max-width: 767px) {
  .lead-sec { padding: 64px 0 56px; }
  .lead-shots { margin-top: 32px; }
  .ls-sub { margin-top: 20px; }
  .lead-pts { margin-top: 34px; gap: 17px; }
}

/* ============================================================
   第29回 A — features「8. 記録・セキュリティ」
   トップ H は「全部残ります」という安心の表明。
   features は「絞り込める・件数が出る・CSV で出せる」という具体を見せる。
   ※ FIX 済みの 1・3・6 に波及させないため、専用 selector で閉じている。
   ============================================================ */
.audit-sec { padding: 88px 0 68px; }
.audit-sec > .container { max-width: 1160px; }
.audit-sec > .container > .h-section {
  font-size: 44px; line-height: 1.25; max-width: 880px; margin: 0;
}
.audit-shot2 { margin: 36px 0 0; }
.audit-shot2 .shot-frame {
  display: block; position: relative; height: 385px; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 14px 40px rgba(19,43,69,.12);
}
.audit-shot2 .shot-frame img {
  display: block; position: absolute; left: 0; top: -120px;
  width: 100%; height: auto;
}
.audit-shot2 .shot-frame::after { display: none; }
.audit-shot2 .shot-more { display: inline-block; margin-top: var(--space-4); }
.audit-note2 { margin-top: var(--space-4); }
.audit-pts2 { margin-top: 40px; }

@media (max-width: 767px) {
  .audit-sec { padding: 72px 0 60px; }
  .audit-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .audit-shot2 { margin: 36px calc(var(--space-6) * -1) 0; }
  .audit-shot2 .shot-frame {
    height: 280px; border-radius: 0; border-left: none; border-right: none;
  }
  .audit-shot2 .shot-frame img { width: 900px; max-width: none; left: -99px; top: -93px; }
  .audit-shot2 figcaption, .audit-note2 { padding: 0 var(--space-6); }
  .audit-pts2 { margin-top: 36px; }
}

/* ============================================================
   第29回 B — features「2. 見積・契約」のステージ・見出しだけ新基準へ
   構造・一本線・GMOサイン補足・4機能は変更していない。
   ============================================================ */
.est-sec > .container > .h-section { font-size: 44px; line-height: 1.25; margin: 0; }
.est-sec { padding-top: 116px; padding-bottom: 104px; }
@media (max-width: 767px) {
  .est-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .est-sec { padding-top: 72px; padding-bottom: 64px; }
}

/* ============================================================
   第30回 A — features「4. 発注・協力業者」
   トップ D（小さく傾けた 215×404px ＋ 一本線）に対し、
   features は「業者が実際に見る画面」を正対で大きく。線は使わない。
   ※ FIX 済み 1・2・3・6・8 に触れないよう専用 selector に閉じている。
   ============================================================ */
.po-sec { padding: 88px 0 72px; }
.po-sec > .container { max-width: 1160px; }
.po-sec > .container > .h-section {
  font-size: 44px; line-height: 1.25; max-width: 880px; margin: 0;
}
.po-grid {
  display: grid; grid-template-columns: 1fr 350px; gap: 64px;
  margin-top: 44px; align-items: start;
}
.po-pts { order: 1; margin-top: 0; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.po-shot { order: 2; margin: 0; }
.po-shot .shot-frame {
  display: block; position: relative; width: 350px; height: 450px; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 18px 48px rgba(19,43,69,.16);
}
.po-shot .shot-frame img { display: block; position: absolute; left: 0; top: 0; width: 350px; height: auto; }
.po-shot .shot-frame::after { display: none; }
.po-note { margin-top: var(--space-4); }

/* ============================================================
   第30回 B — features「5. 請求・入金」
   実画面が無いので、既存4項目の語だけで「入り」と「出」を組む。架空 UI は作らない。
   ============================================================ */
.money-sec { padding: 124px 0 108px; }
.money-sec > .container { max-width: 1160px; }
.money-sec > .container > .h-section {
  font-size: 44px; line-height: 1.25; max-width: 880px; margin: 0;
}
.money {
  position: relative; max-width: 720px; margin: 48px 0 0;
  display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-rows: 46px; row-gap: 64px;
}
/* ノードを上、ラベルを下に置き、線がラベルに触れないようにする */
.m-cell {
  position: relative; padding-top: 22px;
  font-size: var(--fs-md); font-weight: 600; color: var(--navy); white-space: nowrap;
}
.m-cell i {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--primary);
}
/* 請求書 → 入金管理 ／ 業者への支払い → 月次の締め */
.m-1::after, .m-3::after {
  content: ""; position: absolute; left: 5px; top: 5px; width: 100%;
  height: 1.3px; margin-top: -0.65px; background: var(--primary); opacity: .65;
}
/* 入金管理 → 月次の締め。2つの流れが同じ場所でまとまる */
.m-2::after {
  content: ""; position: absolute; left: 5px; top: 5px; width: 1.3px; height: 110px;
  margin-left: -0.65px; background: var(--primary); opacity: .65;
}
.money-pts { margin-top: 56px; }

@media (max-width: 1023px) {
  .po-grid { grid-template-columns: 1fr; gap: 40px; }
  .po-pts { order: 2; grid-template-columns: 1fr 1fr; }
  .po-shot { order: 1; }
}
@media (max-width: 767px) {
  .po-sec { padding: 56px 0 44px; }
  .po-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .po-grid { margin-top: 28px; gap: 24px; }
  .po-pts { grid-template-columns: 1fr; gap: 16px; }
  .po-shot .shot-frame { width: 58vw; max-width: 226px; height: 290px; margin: 0 auto; }
  .po-shot .shot-frame img { width: 58vw; max-width: 226px; }
  .po-shot .ls-tag, .po-note { text-align: center; }

  /* 第38回: 図（低い）から実画面（高い）に替えたのに余白が図のままで、前後より詰まっていた */
  .money-sec { padding: 64px 0 56px; }
  .money-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  /* 2つのまとまりが分かるよう、縦のペアを2組にする */
  /* 2つのまとまりが分かるよう、縦のペアを2組にする */
  .money { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 0; margin-top: 20px; }
  .m-cell { padding: 22px 0 0; white-space: normal; }
  .m-1, .m-3 { padding-bottom: 18px; }
  .m-2 { padding-bottom: 24px; }
  .m-1::after, .m-3::after {
    left: 5px; top: 12px; width: 1.3px; height: 40px; margin-left: -0.65px;
  }
  .m-2::after { content: none; }
  .money-pts { margin-top: 40px; }
}

/* ============================================================
   第31回 A — features「7. AI」
   「下書きまで。決めるのは、人。」を、細い境界線 1 本で見せる。
   グラデーション・光・ロボット・架空 AI UI は一切使わない。
   ============================================================ */
.ai-sec { padding: 88px 0 76px; }
.ai-sec > .container { max-width: 1160px; }
.ai-sec > .container > .h-section { font-size: 44px; line-height: 1.25; max-width: 880px; margin: 0; }
.ai-body { max-width: 720px; margin: var(--space-6) 0 0; }
.ai-body p { font-size: 15px; line-height: 1.85; margin: 0 0 18px; }
.ai-body p:last-child { margin-bottom: 0; }

.ai-split {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 72px; max-width: 860px; margin: 48px 0 0;
}
/* 中央の境界。ノードは 1 個だけ、矢印は使わない */
.ai-split::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.3px;
  margin-left: -0.65px; background: var(--primary); opacity: .55;
}
.ai-split::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--bg); border: 1.8px solid var(--primary);
}
.ai-col { padding: 0 0 0 0; }
.ai-human { padding-left: 40px; }
.ai-machine { padding-right: 40px; }
.ai-label {
  margin: 0 0 var(--space-4); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .12em; color: var(--text-muted);
}
.ai-human .ai-label { color: var(--navy); }
.ai-col ul { list-style: none; margin: 0; padding: 0; }
.ai-col li {
  position: relative; padding-left: 18px; margin-bottom: 12px;
  font-size: var(--fs-md); line-height: 1.6; color: var(--text-muted);
}
.ai-human li { color: var(--navy); font-weight: 600; }
.ai-col li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: transparent; border: 1.5px solid #B7C2CC;
}
.ai-human li::before { border-color: var(--primary); }

/* ============================================================
   第31回 B — features「9. 必要になったときに開ける機能」
   トップ J は開閉の"状態"。features は各機能の"中身"を読ませる。
   ON/OFF スイッチは作らない。
   ============================================================ */
.opt-sec { padding: 96px 0 84px; }
.opt-sec > .container { max-width: 1160px; }
.opt-sec > .container > .h-section { font-size: 44px; line-height: 1.25; max-width: 880px; margin: 0; }
.opt-list {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px; max-width: 1000px;
}
.opt-list li {
  position: relative; padding-top: var(--space-5);
  border-top: 1px dashed #C3CDD6;     /* 閉じている＝破線。スイッチにはしない */
}
.opt-list li::before {
  content: ""; position: absolute; left: 0; top: -5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.8px solid var(--primary);
}
.opt-list h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.5; }
.opt-list p { margin: 0; font-size: var(--fs-base); line-height: 1.85; color: var(--text-muted); }
.opt-note { max-width: 720px; margin-top: 48px; }

@media (max-width: 767px) {
  .ai-sec { padding: 56px 0 44px; }
  .ai-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .ai-body p { font-size: 15px; line-height: 1.8; }
  /* 左右をそのまま縮めず、上下の「境界」として見せる */
  .ai-split { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
  .ai-split::before {
    left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1.3px; margin: 0;
  }
  .ai-split::after { left: 50%; top: 50%; }
  .ai-machine { padding: 0 0 20px; }
  .ai-human { padding: 20px 0 0; }
  .ai-col li { margin-bottom: 8px; }

  .opt-sec { padding: 80px 0 68px; }
  .opt-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .opt-list { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .opt-list p { font-size: 14px; line-height: 1.8; }
  .opt-note { margin-top: 36px; }
}

/* ============================================================
   第32回 — features「10. 締め」
   ネイビーで終端を示し、フッター上段へ同色で連続させる。
   トップ L の複製ではなく、features 固有の「画面を見る」行動に集中させる。
   ============================================================ */
.feat-close {
  background: var(--navy);
  padding: 104px 0 96px;
  text-align: center;
}
.feat-close > .container { max-width: 1120px; }
.feat-close h2 {
  font-size: 54px; line-height: 1.25; color: #fff;
  max-width: 850px; margin: 0 auto;
}
.fc-lead {
  max-width: 660px; margin: var(--space-6) auto 0;
  font-size: 17px; line-height: 1.85; color: rgba(255,255,255,0.76);
}
.fc-drop {
  position: relative; width: 1.3px; height: 56px; margin: 48px auto 0;
  background: var(--primary); opacity: .65;
}
.fc-drop::after {
  content: ""; position: absolute; left: 50%; bottom: -4.5px; margin-left: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--navy); border: 1.8px solid var(--primary);
}
.fc-btn {
  margin-top: var(--space-8);
  width: auto; min-width: 264px; height: 62px; padding: 0 44px; font-size: 18px;
}

@media (max-width: 767px) {
  .feat-close { padding: 76px 0 68px; }
  .feat-close h2 { font-size: 35px; line-height: 1.3; }
  .fc-lead { font-size: 15px; line-height: 1.8; margin-top: var(--space-5); }
  .fc-drop { height: 40px; margin-top: 36px; }
  .fc-btn { width: calc(100% - 48px); max-width: 320px; min-width: 0; height: 60px; padding: 0 24px; font-size: 17px; }
}

/* ============================================================
   第33回 — company.html
   トップ専用 .hero の min-height を継承しない専用クラス。
   静かなページとして、タイポと余白で成立させる。
   ============================================================ */
.company-hero { background: var(--surface); padding: 140px 0 116px; }
.company-hero > .container { max-width: 1120px; }
.company-hero .h-hero {
  font-size: 54px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--navy); margin: 0;
}
/* 一本線モチーフを最小限だけ。ノードもアニメーションも無し */
.ch-rule {
  display: block; width: 48px; height: 1.5px; margin: var(--space-6) 0 0;
  background: var(--primary); opacity: .75;
}
.company-hero .lead {
  max-width: 660px; margin: var(--space-6) 0 0;
  color: var(--text-muted); line-height: 1.85;
}

/* company だけ 34px のまま残っていた見出しを揃える */
.company-sec { padding-top: 124px; padding-bottom: 124px; }
.company-sec .h-section { font-size: 42px; line-height: 1.25; }
.company-sec .measure { max-width: 720px; }

@media (max-width: 767px) {
  .company-hero { padding: 92px 0 72px; }
  .company-hero .h-hero { font-size: 40px; line-height: 1.2; }
  .ch-rule { margin-top: var(--space-5); }
  .company-hero .lead { font-size: 15px; line-height: 1.8; margin-top: var(--space-5); }
  .company-sec { padding-top: 80px; padding-bottom: 80px; }
  .company-sec .h-section { font-size: 31px; line-height: 1.3; }
}

/* ============================================================
   第34回 — company.html 最終回
   会社情報表（モバイル2列維持）／お問い合わせのネイビー化
   ============================================================ */
/* 表: PC は現状維持のまま、値だけ Design System の罫線に寄せる */
.info-table2 th, .info-table2 td { border-bottom: 1px solid var(--card-border, #E8EBF0); }
.info-table2 th { width: 168px; }
.info-table2 th, .info-table2 td { padding: 15px var(--space-5); }

/* お問い合わせ = 静かなネイビーの締め。FV と同じ「見出し → 短線 → 本文」の文法 */
.company-cta { background: var(--navy) !important; padding: 124px 0 112px; }
.company-cta .h-section { color: #fff; }
.company-cta .ch-rule { margin: var(--space-6) 0 0; }
.company-cta .measure { max-width: 660px; margin-top: var(--space-6); }
.company-cta .measure p { color: rgba(255,255,255,0.76); font-size: 17px; line-height: 1.85; }
.cc-btn {
  margin-top: var(--space-8);
  width: auto; min-width: 248px; height: 62px; padding: 0 40px; font-size: 18px;
}

@media (max-width: 767px) {
  /* モバイルでも 2 列を保ち、ラベルと値の対応関係を崩さない */
  .info-table2 th { display: table-cell; width: 88px; white-space: normal; border-bottom: 1px solid var(--card-border, #E8EBF0); }
  .info-table2 td { display: table-cell; }
  .info-table2 th, .info-table2 td { padding: 12px 10px; vertical-align: top; line-height: 1.7; }
  .info-table2 th { font-size: 12px; font-weight: 600; color: var(--text-muted); }
  .info-table2 td { font-size: 14px; color: var(--text); word-break: break-word; }

  .company-cta { padding: 90px 0 82px; }
  .company-cta .measure p { font-size: 15px; line-height: 1.8; }
  .cc-btn { width: auto; min-width: 232px; max-width: 100%; height: 60px; padding: 0 28px; font-size: 17px; }
}

/* ============================================================
   第35回 — contact.html
   最終コンバージョンページ。迷わず入力でき、必須が分かり、送信が怖くない状態にする。
   項目・順番・name・required・送信処理は 1 つも触っていない。
   ============================================================ */
.contact-hero { background: var(--surface); padding: 112px 0 88px; }
.contact-hero > .container { max-width: 1120px; }
.contact-hero .h-hero {
  font-size: 54px; line-height: 1.2; letter-spacing: -0.01em; color: var(--navy); margin: 0;
}
.contact-hero .ch-rule { margin: var(--space-6) 0 0; }
.contact-hero .lead { max-width: 660px; margin: var(--space-6) 0 0; color: var(--text-muted); line-height: 1.85; }

/* フォームは読みやすい幅に絞って中央へ */
.contact-form-sec { padding: 80px 0 88px; }
.contact-form-sec .form { max-width: 720px; margin: 0 auto; }

.contact-form-sec .field { margin-bottom: 24px; }
.contact-form-sec .field > label {
  display: block; font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 10px;
}
/* 必須は小さなオレンジ。文字ラベルは足していない */
.contact-form-sec .req { color: var(--primary-text); margin-left: 4px; font-weight: 700; }

.contact-form-sec input[type="text"],
.contact-form-sec input[type="email"],
.contact-form-sec input[type="tel"],
.contact-form-sec select {
  width: 100%; height: 48px; padding: 0 14px;
  font-size: 16px; color: var(--text); background: var(--surface);
  border: 1px solid var(--neutral-border); border-radius: var(--radius-sm);
}
.contact-form-sec textarea {
  width: 100%; height: 124px; padding: 12px 14px;
  font-size: 16px; line-height: 1.75; color: var(--text); background: var(--surface);
  border: 1px solid var(--neutral-border); border-radius: var(--radius-sm); resize: vertical;
}
.contact-form-sec input:focus,
.contact-form-sec select:focus,
.contact-form-sec textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(244,122,32,.18);
}
.contact-form-sec .hint { font-size: 13px; line-height: 1.75; color: var(--text-muted); margin: 0 0 10px; }

/* 主な事業の 6 択。既存の checkbox を Retera 色へ寄せる程度 */
.contact-form-sec .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.contact-form-sec .choice {
  display: flex; align-items: center; gap: 8px; min-height: 32px;
  font-size: 15px; color: var(--text); font-weight: 400; margin: 0;
}
.contact-form-sec .choice input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); flex: 0 0 auto; }

/* 余白だけで 3 つのまとまりを作る（新しい見出しは追加していない） */
.contact-form-sec .field:nth-child(6),
.contact-form-sec .field:nth-child(9) {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--neutral-faint);
}

/* privacy 同意は送信の直前に、はっきり見せる */
.contact-form-sec .consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 32px; font-size: 14px; line-height: 1.8; color: var(--text); font-weight: 400;
}
.contact-form-sec .consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); flex: 0 0 auto; }
.contact-form-sec .consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

.form-submit {
  margin-top: var(--space-6);
  width: auto; min-width: 256px; height: 62px; padding: 0 44px; font-size: 18px;
}

@media (max-width: 767px) {
  .contact-hero { padding: 76px 0 60px; }
  .contact-hero .h-hero { font-size: 40px; line-height: 1.2; }
  .contact-hero .lead { font-size: 15px; line-height: 1.8; margin-top: var(--space-5); }
  .contact-form-sec { padding: 60px 0 72px; }
  .contact-form-sec .field { margin-bottom: 20px; }
  .contact-form-sec .choices { grid-template-columns: 1fr; gap: 4px; }
  .contact-form-sec .choice { min-height: 44px; }   /* タップ領域 */
  .contact-form-sec .field:nth-child(6),
  .contact-form-sec .field:nth-child(9) { margin-top: 28px; padding-top: 20px; }
  .form-submit { width: 100%; max-width: 320px; min-width: 0; height: 60px; padding: 0 24px; font-size: 17px; }
}

/* 同意行はフィールドのラベルではないので、.field > label の指定に勝たせる */
.contact-form-sec .field > label.consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 32px 0 0; font-size: 14px; font-weight: 400; line-height: 1.8; color: var(--text);
}
@media (max-width: 767px) {
  .contact-form-sec .field > label.consent { margin-top: 28px; }
}

/* ============================================================
   第36回 — privacy.html
   同意する前に読めることだけを目的にする。条文は 1 文字も触っていない。
   ============================================================ */
.privacy-hero { background: var(--surface); padding: 112px 0 88px; }
.privacy-hero > .container { max-width: 1120px; }
.privacy-hero .h-hero {
  font-size: 54px; line-height: 1.2; letter-spacing: -0.01em; color: var(--navy); margin: 0;
}
.privacy-hero .ch-rule { margin: var(--space-6) 0 0; }
.privacy-hero .lead {
  max-width: 720px; margin: var(--space-6) 0 0;
  color: var(--text-muted); line-height: 1.85;
}

.privacy-content { padding: 72px 0 88px; }
.privacy-content > .container { max-width: 1120px; }
.privacy-content .measure { max-width: 740px; margin: 0 auto; }

/* 条項見出し: 14px → 21px。本文より明確に強くする */
.privacy-content h2.section-title {
  font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--navy);
  margin: 0 0 var(--space-5); padding: 0;
}
.privacy-content h2.section-title::before { content: none; }
/* 条項の切れ目は 21px / 700 の見出しで十分に分かるため、区切り線は置かず余白だけにした
   （10 条 × 罫線 88px で全高が 800px 近く増えるため） */
.privacy-content h2.section-title:not(:first-of-type) { margin-top: 44px; }
.privacy-content p {
  font-size: 17px; line-height: 1.9; color: var(--text);
  margin: 0 0 20px; overflow-wrap: anywhere;
}
.privacy-content p:last-child { margin-bottom: 0; }
.privacy-content a {
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
}
.privacy-content a:hover { color: var(--primary-text); }

@media (max-width: 767px) {
  .privacy-hero { padding: 76px 0 60px; }
  .privacy-hero .h-hero { font-size: 38px; line-height: 1.2; }
  .privacy-hero .lead { font-size: 15px; line-height: 1.8; margin-top: var(--space-5); }
  .privacy-content { padding: 56px 0 72px; }
  .privacy-content h2.section-title { font-size: 19px; }
  .privacy-content h2.section-title:not(:first-of-type) { margin-top: 36px; }
  .privacy-content p { font-size: 15px; line-height: 1.9; margin-bottom: 18px; }
}

/* ============================================================
   第37回 — 開発セッションから届いた実画面の反映（2026-08-10）
   ============================================================ */

/* --- トップ C: 見積画面（引合から引き継いだ情報が乗っていることの根拠） --- */
.solve-shot { margin: 72px auto 0; max-width: 940px; }
.solve-shot .ls-tag { margin-bottom: var(--space-3); }
.solve-shot .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 18px 50px rgba(19,43,69,.13);
}
.solve-shot .shot-frame img { display: block; width: 100%; height: auto; }
.solve-shot .shot-frame::after { display: none; }
.solve-shot .shot-note { margin-top: var(--space-3); text-align: center; }

/* 画面の上部だけを等倍で引き出す。ここが「打ち直していない」の証拠 */
.solve-zoom { position: relative; margin: 0 auto; padding-top: 40px; max-width: 620px; text-align: center; }
.solve-zoom .sz-line {
  position: absolute; left: 50%; top: 0; width: 1.3px; height: 26px;
  background: var(--primary); opacity: .7;
}
.solve-zoom .sz-line::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.solve-zoom > img {
  display: block; width: 402px; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid var(--card-border, #E8EBF0); border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 6px 18px rgba(19,43,69,.10);
}
.sz-note {
  margin: var(--space-4) auto 0; max-width: 520px;
  font-size: var(--fs-base); line-height: 1.85; color: var(--text-muted);
}

@media (max-width: 1023px) {
  .solve-shot { margin-top: 48px; }
}
@media (max-width: 767px) {
  /* 縮小すると明細が読めなくなるので、左上（案件・顧客・明細の頭）を切り出して見せる */
  .solve-shot { margin: 40px calc(var(--space-6) * -1) 0; max-width: none; width: auto; }
  .solve-shot .ls-tag { padding: 0 var(--space-6); }
  .solve-shot .shot-frame {
    position: relative; height: 300px; overflow: hidden;
    border-radius: 0; border-left: none; border-right: none;
  }
  .solve-shot .shot-frame img {
    position: absolute; left: -92px; top: -30px; width: 1000px; max-width: none; height: auto;
  }
  .solve-shot .shot-note { padding: 0 var(--space-6); }
  .solve-zoom { padding: 34px var(--space-6) 0; }
  .solve-zoom .sz-line { height: 22px; }
  .solve-zoom > img { width: 100%; }
}

/* --- トップ D / 機能 4: 協力業者ポータル（業者側の実画面） --- */
.pt-phone figcaption {
  margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); text-align: center;
}

/* --- 機能 5: 入金管理の実画面 --- */
.money-shot { margin: 0 0 var(--space-8); }
.money-shot .ls-tag { margin-bottom: var(--space-3); }
.money-shot .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 16px 42px rgba(19,43,69,.12);
}
.money-shot .shot-frame img { display: block; width: 100%; height: auto; }
.money-shot .shot-frame::after { display: none; }
.money-shot .shot-note { margin-top: var(--space-3); }

@media (max-width: 767px) {
  .money-shot { margin: 0 calc(var(--space-6) * -1) var(--space-7); }
  .money-shot .ls-tag, .money-shot .shot-note { padding: 0 var(--space-6); }
  .money-shot .shot-frame {
    position: relative; height: 268px; overflow: hidden;
    border-radius: 0; border-left: none; border-right: none;
  }
  .money-shot .shot-frame img {
    position: absolute; left: -92px; top: -178px; width: 1000px; max-width: none; height: auto;
  }
}

/* --- トップ I: 不動産業務の実画面（反響・追客の台帳） --- */
.re-shot { margin: 56px auto 0; max-width: 940px; }
.re-shot .ls-tag { margin-bottom: var(--space-3); }
.re-shot .shot-frame {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 18px 50px rgba(19,43,69,.13);
}
.re-shot .shot-frame img { display: block; width: 100%; height: auto; }
.re-shot .shot-frame::after { display: none; }
.re-shot .shot-note { margin-top: var(--space-3); text-align: center; }

@media (max-width: 767px) {
  .re-shot { margin: 40px calc(var(--space-6) * -1) 0; max-width: none; width: auto; }
  .re-shot .ls-tag { padding: 0 var(--space-6); }
  .re-shot .shot-frame {
    position: relative; height: 288px; overflow: hidden;
    border-radius: 0; border-left: none; border-right: none;
  }
  .re-shot .shot-frame img {
    position: absolute; left: -92px; top: -100px; width: 1000px; max-width: none; height: auto;
  }
  .re-shot .shot-note { padding: 0 var(--space-6); }
}

/* 第37回 — 業者スマホの実画面に差し替えたため、発注書ブロックの下端で切る */
.po-shot .shot-frame { height: 505px; }
.re-shot .shot-note { max-width: 700px; margin-left: auto; margin-right: auto; }
.sz-note { max-width: 600px; }
@media (max-width: 1023px) {
  .po-shot .shot-frame { height: 505px; }
}
@media (max-width: 767px) {
  .po-shot .shot-frame { width: 58vw; max-width: 226px; height: 326px; }
  .po-shot .shot-frame img { width: 58vw; max-width: 226px; }
}

/* 第37回追補 — モバイルの切り出し位置の調整 */
@media (max-width: 767px) {
  /* 見積: 案件番号・顧客・金額・明細の頭まで入れる */
  .solve-shot .shot-frame { height: 352px; }
  /* 入金: 縮めると数字が読めないので、入金欄（申込〜竣工）に寄せて切る */
  .money-shot .shot-frame { height: 268px; }
  .money-shot .shot-frame img { width: 1123px; left: -600px; top: -288px; }
}

/* ============================================================
   第39回 — features「2. 見積・契約」に見積画面を追加（2026-08-10、大西様承認）
   トップ C は同じ画面を「全体 940px ＋ 上部の等倍引き出し」で使い、
   引合からの引き継ぎ（左上）を語っている。
   こちらは「金額と、契約・請求への導線」だけを横長の帯で切り出し、役割を分ける。
   ※ est-sec 専用 selector に閉じ、FIX 済みの他セクションには一切かからない。
   ============================================================ */
.est-shot { margin: 44px 0 0; }
.est-shot .ls-tag { margin-bottom: var(--space-3); }
.est-shot .shot-frame {
  display: block; position: relative; height: 253px; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border, #E8EBF0);
  box-shadow: 0 16px 42px rgba(19,43,69,.12);
}
.est-shot .shot-frame img {
  display: block; position: absolute; left: -112px; top: -77px;
  width: 1104px; max-width: none; height: auto;
}
.est-shot .shot-frame::after { display: none; }
.est-shot .shot-note { margin-top: var(--space-3); }
/* 画面が入ったので、下の4項目との間を1段あける */
.est-sec .feat-grid { margin-top: 44px; }

@media (max-width: 767px) {
  /* 縮めると金額が読めないため、倍率は PC と同じまま左右を画面端まで使う */
  .est-shot { margin: 32px calc(var(--space-6) * -1) 0; }
  .est-shot .ls-tag, .est-shot .shot-note { padding: 0 var(--space-6); }
  .est-shot .shot-frame { border-radius: 0; border-left: none; border-right: none; }
  .est-shot .shot-frame img { left: -115px; }
  .est-sec .feat-grid { margin-top: 32px; }
}

/* ============================================================
   404 ページ（第39回 / 公開前作業 B-2）
   専用 selector に閉じている。既存ページには一切かからない。
   ============================================================ */
.nf-sec { padding: 132px 0 148px; text-align: center; }
.nf-sec .kicker { text-align: center; }
.nf-sec > .container > .h-section {
  font-size: 46px; line-height: 1.25; margin: 0 auto;
}
.nf-lead { margin: var(--space-7) auto 0; }
.nf-lead p { font-size: var(--fs-md); line-height: 1.9; color: var(--text-muted); }

/* 迷子の線をつなぎ直す。サイト共通の一本線モチーフ */
.nf-line {
  position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 720px; margin: 72px auto 0; padding: 0;
}
.nf-line::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 0;
  height: 1.3px; background: var(--primary); opacity: .7;
}
.nf-line li { position: relative; padding-top: 26px; }
.nf-line li::before {
  content: ""; position: absolute; top: -4.5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.nf-line a {
  font-size: var(--fs-base); font-weight: 700; color: var(--navy, #132B45);
  text-decoration: none; border-bottom: 1px solid transparent; transition: var(--t-fast);
}
.nf-line a:hover { color: var(--primary-text, #A45E00); border-bottom-color: currentColor; }

.nf-btn { margin-top: 64px; }
.nf-note { margin-top: var(--space-7); }
.nf-note a { color: var(--primary-text, #A45E00); }

@media (max-width: 767px) {
  .nf-sec { padding: 76px 0 92px; }
  .nf-sec > .container > .h-section { font-size: 31px; line-height: 1.3; }
  .nf-lead { margin-top: var(--space-6); }
  .nf-lead p { font-size: 15px; line-height: 1.8; }
  /* 2段組にすると下段のノードが線から外れてしまうので、1本のまま文字を詰める */
  .nf-line { margin-top: 52px; max-width: 100%; }
  .nf-line li { padding-top: 22px; }
  .nf-line a { font-size: 12px; }
  .nf-btn { margin-top: 48px; }
}

/* WebP を優先し、対応していないブラウザには PNG を返す（第40回 / SEO・表示速度）。
   picture は display:contents にして、既存の「.xxx img」指定と DOM 上の位置関係を変えない。 */
picture { display: contents; }

/* 会社概要: 登録番号の補足（適格請求書発行事業者）。値の後ろに小さく添える */
.info-table2 .th-note {
  display: block; margin-top: 4px;
  font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: .01em;
}
@media (max-width: 767px) {
  .info-table2 .th-note { font-size: 12px; }
}

/* 会社概要: 規模の数字に付ける計測時点の注記 */
.stats-note {
  margin: calc(var(--space-4) * -1) 0 var(--space-6);
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* ────────────────────────────────────────────────────────────
   提供準備中の明示
   2026-08-13 の実装照合で、AI の工事日程案が現状は動かないことが判明。
   記述は残す（大西様判断）が、準備中であることを本文と同じ視野に置く。
   ──────────────────────────────────────────────────────────── */
.prep-note {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--primary);
  background: var(--primary-faint);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}
.prep-note b { color: var(--primary-text); font-weight: 700; }

/* 第40回: §1 引合・顧客 は項目が 4→3 になった（「追客の記録」を不動産へ、
   「お客様専用の閲覧ページ」は画面が無いため削除）。2カラムのままだと
   右下が1マス空くので、この節だけ3カラムに組み替える。 */
@media (min-width: 861px) {
  .lead-sec .lead-pts { grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
}
/* AI 章の準備中表示は本文（.ai-body 720px）と同じ幅に揃える */
.ai-prep { max-width: 720px; margin-top: var(--space-6); }

/* 第41回: トップ F の項目が LTV 廃止で 4→3 になった。
   2カラムのままだと右下が1マス空くので3カラムへ。 */
@media (min-width: 1024px) {
  .biz-points { grid-template-columns: repeat(3, 1fr); gap: 40px 40px; }
}


/* ============================================================
   第39回（2026-08-17）— 図版の線の実測点検で見つかった不整合の修正
   ① .split-cards が ul 既定の padding-inline-start:40px を持ったままで、
      カード列が全幅で 20px 右にずれていた（集約線とカード中心が最大 32px ズレ）
   ② 768〜1023px では 3列×2段のカードに PC 用の 6 本線が出ていた
   ============================================================ */
.split-cards { padding: 0; }

/* PC: viewBox を上へ 8px 伸ばした分を負マージンで戻す（下端は従来どおり） */
@media (min-width: 1024px) {
  .converge-pc { height: 140px; margin-top: -8px; }
}

/* 1023px 以下は 3列×2段なので、常に 3 本版（converge-sp）を使う */
@media (max-width: 1023px) {
  .converge-pc { display: none; }
  .converge-sp { display: block; max-width: 340px; }
}

/* FV のノードは中心が線（viewBox y=96）から 0.95px 下にいた。中心を線上へ。 */
@media (min-width: 1024px) {
  .hero-nodes li::before { top: -5px; }
}

/* 集約点のノード（SVG の非等比スケールに影響されないよう CSS で置く） */
.converge-wrap { position: relative; }
.cv-node {
  position: absolute; left: 50%; width: 9px; height: 9px;
  margin: 0 0 -4.5px -4.5px; border-radius: 50%;
  background: var(--surface); border: 1.8px solid var(--primary);
}
@media (min-width: 1024px) { .cv-node { bottom: 25.71%; } }  /* viewBox y=96 / -8..132 */
@media (max-width: 1023px) { .cv-node { bottom: 30.77%; } }  /* viewBox y=72 / 0..104 */

/* ============================================================
   第39回 — 一本線モチーフ: 線とノードの高さを揃える
   ol 側の上パディング 22px が「線（ol 上端）」と「ノード（li 上端基準）」の
   間に挟まっていたため、横線がノード列の 24px 上を通っていた。
   ol のパディングを外し、線・ノードとも中心を li の上端に合わせる。
   ============================================================ */
@media (min-width: 768px) {
  .solveline, .rs-line, .featline { padding-top: 0; }
  .solveline::before, .rs-line::before, .featline::before { margin-top: -0.65px; }
}
.pt-line, .chainline { padding-top: 0; }
.pt-line::before, .chainline::before { margin-top: -0.65px; }
.nf-line::before { margin-top: -0.65px; }

.solveline li::before, .pt-line li::before, .rs-line li::before,
.featline li::before, .chainline li::before, .nf-line li::before { top: -7px; }

/* モバイル FV: 背面の連続線（各行 3.6〜5.1px）に対してノードが 1.65px 下にいた */
@media (max-width: 1023px) {
  .heroline li::after,
  .heroline li:first-child::after,
  .heroline li:last-child::after { top: -0.65px; }
}

/* features のモバイル: 3列×2段の一本線が段で切れて 2 本に見えていたので、
   solveline / rs-line と同じ折返し（2段目を右→左、右端を縦線でつなぐ）にする */
@media (max-width: 767px) {
  .featline { position: relative; }
  .featline li:nth-child(4) { grid-column: 3; grid-row: 2; }
  .featline li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .featline li:nth-child(6) { grid-column: 1; grid-row: 2; }
  .featline li:nth-child(4)::after,
  .featline li:nth-child(5)::after { left: auto; right: 50%; width: 100%; }
  .featline li:nth-child(6)::after { content: none; }
  .featline::before {
    content: ""; position: absolute; left: 83.333%; right: auto;
    margin-left: -0.65px; top: 18px;
    width: 1.3px; height: 58.8px;
    background: var(--primary); opacity: .65;
  }
}

/* AI / 人 の境界: ノードの中心が境界線から 1.8px ずれていた */
.ai-split::after { margin: -6.3px 0 0 -6.3px; }

/* モバイル FV: 背面の線が左右とも列の外（両端ノードの 12.5% 外側）まで伸びて
   左端が宙で切れていた。線を両端ノードの間だけに収め、折返しの弧も右端ノードに合わせる */
@media (max-width: 1023px) {
  .heroline { background-size: 75% 40px; background-position: center top; }
  .heroline::after { right: calc(12.5% - 15px); }
}

/* AI/人 の境界ノード: 実寸の半径は 5.5px。線の中心に合わせる */
.ai-split::after { margin: -5.5px 0 0 -5.5px; }
@media (max-width: 767px) { .ai-split::after { margin-top: -4.85px; } }

/* モバイルの fit3: 縦線がノード中心より 2px 左を通り、最後のノードの下に 5.5px はみ出していた */
@media (max-width: 767px) {
  .fit3::before { left: 6.35px; bottom: 27.5px; }
}

/* ============================================================
   第40回（2026-08-17）— 外部レビューの指摘反映
   ============================================================ */

/* FV: 業種が 5 秒で入らないという指摘。H1 の上に小さく置く（.kicker と同じ言語） */
.hero-eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-base); font-weight: 600;
  letter-spacing: 0.08em; color: var(--primary-text);
}
@media (max-width: 767px) {
  .hero-eyebrow { font-size: var(--fs-sm); margin-bottom: var(--space-3); }
}

/* G: 「14 × 227,044」が導入実績（14社 / 227,044件の納品）と誤読されるという指摘。
   単位を数字に添え、数字の直下で誤読を断つ */
.yr-note {
  max-width: 620px; margin: var(--space-6) auto 0;
  text-align: center; font-size: var(--fs-sm); line-height: 1.7;
  color: var(--text-muted);
}
@media (max-width: 767px) {
  .yr-note { font-size: 12px; margin-top: var(--space-5); padding: 0 4px; }
}

/* PC だけ改行（.nbr はモバイル専用なので対になるものを用意）。
   FV のリードを「〜請求も。」で切って PC 2 行に収める */
.br-pc { display: none; }
@media (min-width: 1024px) { .br-pc { display: inline; } }

/* --- SP: 協力業者のスマホ画面を「読める大きさ」にする（第40回） ---
   全景を 200px 台に縮めていたため、画面内の文字が実効 4.7px / 5.0px で読めなかった。
   スマホの形は角丸の枠で示したまま、中身を 0.8 倍まで拡大して上部をクロップする。 */
@media (max-width: 767px) {
  /* トップ I: 業者が自分のスマホで見る画面 */
  /* 画面の横幅は切らない（切ると左のバッジや右のボタンが欠ける）。
     枠の幅いっぱいに広げ、縦だけを切って上部を見せる */
  .pt-phone { width: 100%; margin-left: auto; margin-right: auto; }
  .pt-phone .ph-crop {
    position: relative; width: 100%; height: 340px; overflow: hidden;
    border-radius: 16px; border: 1px solid var(--neutral-border);
    box-shadow: 0 10px 30px rgba(19, 43, 69, .10);
  }
  .pt-phone .ph-crop img {
    position: absolute; left: 0; top: 0;
    width: 100%; max-width: none;   /* 上の .pt-phone img の max-width:210px を外す */
    height: auto; margin-left: 0;
    transform: none; border: 0; border-radius: 0; box-shadow: none;
  }

  /* features 4: 協力業者が見る画面（発注書の承諾と納品日の変更依頼） */
  .po-shot .shot-frame { width: 100%; max-width: none; height: 380px; }
  .po-shot .shot-frame img { width: 100%; max-width: none; left: 0; margin-left: 0; }
}

/* ============================================================
   第40回 — 問い合わせページの FAQ
   一本線モチーフを踏襲し、質問の左に白抜きノードを置く
   ============================================================ */
.faq-sec { padding: 108px 0 100px; }
.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
  position: relative;
  padding: 0 0 var(--space-6) 34px;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--card-border, #E8EBF0);
}
.faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.faq-item::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.faq dt {
  font-size: var(--fs-lead); font-weight: 700; color: var(--navy);
  line-height: 1.55; margin-bottom: var(--space-3);
}
.faq dd {
  margin: 0; font-size: var(--fs-md); line-height: 1.9; color: var(--text-muted);
}
.faq-foot {
  max-width: 820px; margin: var(--space-8) auto 0;
  font-size: var(--fs-base); color: var(--text-muted);
}

@media (max-width: 767px) {
  .faq-sec { padding: 76px 0 72px; }
  .faq-item { padding-left: 28px; padding-bottom: var(--space-5); margin-bottom: var(--space-5); }
  .faq-item::before { top: 6px; }
  .faq dt { font-size: 17px; }
  .faq dd { font-size: 15px; line-height: 1.85; }
  .faq-foot { margin-top: var(--space-6); font-size: 13px; }
}

/* 迷惑メール対策のおとり項目。読み上げにも出さず、画面にも出さない
   （display:none だと埋めないボットがいるので、画面外へ逃がす） */
.hp {
  position: absolute !important;
  left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

/* 送信に失敗したときの箱。.callout の色だけ差し替える */
.callout-warn {
  border-left-color: var(--danger);
  background: #FBF0EF;
}