/* ============================================================
   マワリエ — 業務自動化・DX開発サービス 共通スタイル
   文字サイズのスケールは README.md §1.17 が正本（下限14px・例外の一覧・戻してはいけない値）。
   Process の階調は §1.12、料金カードの寸法計算は §1.13 を参照。
   ※ 以前ここに書いていた「企画書/02_HP企画書_詳細設計版.md 1-3 が正本」は誤りです。
     02 は旧版・参照のみで、§1-3 は CTA 文言の規定であり、タイポグラフィ表は存在しません
   ============================================================ */

/* ---------- 配色トークン（2026-08-12 全面改訂） ----------
   旧配色は濃紺 #0D2138 ＋ 汎用ブルー #0B69E3 だった。#0B69E3 はテンプレートSaaSで最も多い青で、
   それ自体が「どこかで見た画面」に見える原因になっていた。新配色は ferret-one.com を参照し、
   インディゴ #4158A2 ＋ アクア #60B9D6 ＋ 淡青の地 #F5F9FC で組み直している。

   **--aqua を文字色に使わないこと。** 白に対し 2.23:1 で、どの文字サイズでもAA未達。
   アクアは「図版の線・区切り・状態の印」専用で、文字に載せる必要が出たら --aqua-text（4.88:1）を使う。
   この2つを取り違えると、図版と文字で同じ色に見えるのに片方だけ読めない状態になる。

   白文字とのコントラスト実測：
     --brand      #4158A2  6.68:1  ← CTA。旧 #0B69E3 の 5.07:1 より上
     --brand-deep #33477F  9.02:1  ← hover
     --ink        #16264F 14.74:1  ← ダーク面
   白地の文字：
     --text-primary   #16264F 14.74:1
     --text-secondary #58698A  5.52:1（--bg-secondary 上でも 5.24:1）
     --aqua-text      #1C7A9B  4.88:1
   ------------------------------------------------------------ */
:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F9FC;
  --bg-dark: #16264F;
  --bg-dark-soft: #1E3468;
  --text-primary: #16264F;
  --text-secondary: #58698A;
  --accent: #4158A2;
  --accent-deep: #33477F;
  --accent-soft: #EDF2FB;
  /* 図版・罫線・状態の印だけに使うアクア。文字に載せないこと（上の注記） */
  --aqua: #60B9D6;
  --aqua-soft: #E4F2F7;
  --aqua-text: #1C7A9B;
  --good: #0E9F6E;
  /* 薄い背景上の肯定的な結果テキスト用（--bg-secondary とのコントラスト 4.5:1 以上） */
  --good-text: #0A7350;
  /* 白文字を載せる面だけに使う濃い緑（白とのコントラスト 5.86:1）。--good は 3.39:1 で
     通常サイズの白文字には AA 未達のため。薄い地色・罫線・記号は --good のままにする */
  --good-deep: #0A7350;
  /* 白い番号マーカーの輪郭。--line（白に対し 1.28:1）では輪郭が見えず、
     「白＝それ以外の工程」という状態が読み取れない。3:1（WCAG 1.4.11 非テキストコントラスト）を満たす最も薄い値。
     非テキスト専用——白に対し 3.01:1 で 14px の文字色に使うと AA 未達（2026-08-29 に .guide-toc__num から外した） */
  --line-strong: #8496B0;
  /* 副色（琥珀 --alt / --alt-deep / --alt-soft）は 2026-07-27 に削除。Process の2経路を区別するためだけの色で、経路が1本になり用途が消えた。復活させないこと（README §1.12-1） */
  --line: #DFE9F0;
  --shadow-card: 0 1px 3px rgba(22, 38, 79, 0.06);
  /* 影を2段に分けた（2026-08-12）。旧版は全カードが同じ 1px の影で、
     どれが押せる面でどれが読む面かが影から読み取れなかった */
  --shadow-lift: 0 2px 4px rgba(22, 38, 79, 0.04), 0 12px 28px -12px rgba(22, 38, 79, 0.18);
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /* 英字・数値のユーティリティ書体。2026-08-12に Inter から Manrope へ。
     Inter はUIの既定書体として使われすぎており、eyebrow と実績数値という
     「サイトで最も目に入る英字」が既製品に見えていた。Manrope は字幅が広く、
     tnum を持ち、Noto Sans JP と並べたときの字面の高さが近い */
  --font-en: "Manrope", "Noto Sans JP", sans-serif;
  --header-h: 60px;
}
@media (min-width: 800px) {
  :root { --header-h: 76px; }
}

/* ---------- リセット・ベース ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 800px) { body { font-size: 17px; } }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
strong { font-weight: 700; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 共通レイアウト ---------- */
/* 2026-08-12：1080px → 1180px（オーナー判断）。1920pxの画面で左右に420pxずつ空き、
   参考にしたB2Bサイト（ferret One 約1175px／SATORI 約1170px／Toreru 約1280px）より
   90〜200px狭かった。**1080pxへ戻さないこと。**
   ヘッダー（.site-header__inner＝1200px）と内容の左端が10px差でほぼそろう値でもある。
   .container-text は760pxのまま。**こちらを広げないこと**——1行約45字が日本語の可読上限で、
   広く見せたい場合は幅ではなく「文章の横に図版を置く」組みで解く（README §1.21） */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container-text { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
/* 2026-08-12：128px → 96px（オーナー判断）。セクション間が256px空き、スクロール中に
   何も無い区間が長すぎた。参考3社は80〜100px。**128pxへ戻さないこと** */
@media (min-width: 800px) { .section { padding: 96px 0; } }
.section--alt { background: var(--bg-secondary); }
/* 1要素だけを置く細いセクション（無料コンテンツ間の送客ノートなど） */
.section--slim { padding: 40px 0; }
@media (min-width: 800px) { .section--slim { padding: 56px 0; } }
.section--dark { background: var(--bg-dark); color: #fff; }

/* eyebrow は「アクアの短い線 ＋ 英字ラベル」。この線がサイト全体を貫く流れ線の起点で、
   FVの図版・Process・事例図版6枚の線と同じ #60B9D6・同じ2px。
   線を消さないこと——消すと eyebrow が単なる青い小見出しに戻り、図版との関係が切れる。
   線は装飾ではなく「ここから1本の流れが始まる」という合図として置いている */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-en);
  /* 14px を下回らないこと（README §1.17／sites-build.test.mjs が例外13件を数えている）。
     小さくして締まって見せたくなるが、例外枠は既に使い切っている */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--aqua);
}
@media (min-width: 800px) { .eyebrow { font-size: 15px; } }
.section--dark .eyebrow { color: #9CD4E8; }
.section--dark .eyebrow::before { background: var(--aqua); }
/* 左寄せの文脈（FV・下層ページの見出し）では線も左端から始める */
.fv .eyebrow, .page-head .eyebrow { justify-content: flex-start; }

.section-head { text-align: center; margin-bottom: 48px; }
@media (min-width: 800px) { .section-head { margin-bottom: 64px; } }
/* 2026-08-12：見出しに letter-spacing を入れた。日本語の太いゴシックは既定の字送りだと
   大きいサイズで字間が詰まって見え、それが「雑に組んだ」印象になっていた。
   line-height も 1.5 → 1.45 へ。サイズを上げたぶん行間が空きすぎるため */
.section-head h2 { font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: 0.02em; }
@media (min-width: 800px) { .section-head h2 { font-size: 36px; } }
/* For Managementの見出しはPCのみ意味の切れ目で2行にする。SPは画面幅に合わせて自然に折り返す。 */
@media (min-width: 800px) { .management-title-prefix { display: block; } }
.section-lead { max-width: 720px; margin: 20px auto 0; color: var(--text-secondary); text-align: left; }
.section--dark .section-lead { color: rgba(255, 255, 255, 0.72); }
@media (min-width: 800px) { .section-lead { text-align: center; } }

.caption { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
@media (min-width: 800px) { .caption { font-size: 15px; } }
.section--dark .caption { color: rgba(255, 255, 255, 0.75); }

/* ---------- ボタン ---------- */
/* 2026-08-12：角丸6px→10px、主ボタンに影と1pxの持ち上がりを追加。
   旧版は主・副・反転の3種が同じ平らな角丸で、押せる面の階層が色でしか出ていなかった */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn:hover { text-decoration: none; }
@media (min-width: 800px) { .btn { min-height: 58px; font-size: 17px; } }
.btn--primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 4px rgba(22, 38, 79, 0.10), 0 10px 24px -10px rgba(65, 88, 162, 0.55);
}
.btn--primary:hover {
  background: var(--accent-deep); color: #fff;
  box-shadow: 0 2px 4px rgba(22, 38, 79, 0.12), 0 14px 30px -10px rgba(65, 88, 162, 0.6);
  transform: translateY(-1px);
}
.btn--secondary { background: #fff; color: var(--text-primary); border-color: var(--line); box-shadow: var(--shadow-card); }
.btn--secondary:hover { background: var(--bg-secondary); border-color: var(--line-strong); }
.btn--inverse { background: #fff; color: var(--bg-dark); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); }
.btn--inverse:hover { background: var(--accent-soft); color: var(--accent-deep); transform: translateY(-1px); }
.btn--header { min-height: 42px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
@media (min-width: 800px) { .btn--header { min-height: 46px; padding: 0 22px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transform: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
}

.cta-unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cta-unit[hidden] { display: none; }
.cta-unit .caption { text-align: center; }

/* ---------- ヘッダー ---------- */
/* 2026-08-12：半透明＋backdrop-filter をやめて不透明の白にした。理由は2つ。
   (1) すりガラスのヘッダーは既製テンプレートで最も多い処理で、それ自体が「見たことのある画面」に見える
   (2) backdrop-filter は子孫の position:fixed に対する包含ブロックを作るため、
       ドロワーの実装に「fixed を使うな」という注意書きが必要な状態がずっと続いていた
   **不透明を半透明へ戻さないこと。** 戻すと (2) の制約が復活する。
   FVの背景は最上部を純白から始めてあるので、白いヘッダーとの間に境目は出ない（.fv の背景指定） */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s;
}
.site-header.is-scrolled { box-shadow: 0 1px 16px rgba(22, 38, 79, 0.07); }
/* ナビとCTAを右へ寄せる（旧版は space-between で、ロゴとナビの間に画面幅ぶんの穴が空いていた）。
   ロゴ＝左端、操作＝右端という2極の構成にして、間の余白を1つにまとめている */
.site-header__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  height: 100%;
  display: flex; align-items: center; gap: 16px;
}
/* margin-right:auto がナビとCTAを右端へ寄せる。**auto をナビ側や操作側へ移さないこと**——
   899px以下ではナビが position:absolute で流れから外れるため、右寄せの起点はロゴ側に置かないと
   PCとSPで別々の指定が要る（両方に auto を書くと余白が2分割されてナビが中央へずれる） */
.site-header__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-right: auto; color: var(--text-primary); text-decoration: none; }
.site-header__logo:hover { text-decoration: none; }
.site-header__logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* ワードマーク logo-wordmark.svg は viewBox 1434x220（縦横比 6.518）。字面は箱の高さの 0.727（y=30〜190）。
   MAWARIE は全大文字7字で、混植だった旧ロゴより光学的に大きく見えるため、
   旧アセンダー26.5pxには合わせず字面高さ約22.5px（=31px×0.727）に抑えている。
   末尾がAからEになり字面幅が縮んだぶん、高さ31pxを保ったまま幅を208px→202pxへ。
   2026-08-09に600px未満の正方形マークを廃止し、全幅でワードマークに統一（README §ブランドロゴ）。
   **3段とも縦横比6.518を守ること。** ロゴを差し替えたら3つとも再計算する */
.site-header__brand-image { display: block; width: 156px; height: 24px; object-fit: contain; }
/* ロゴ156＋無料相談ボタン約96＋ハンバーガー44＋左右padding40＋gap8×2＝352px。
   360px端末で余白8pxしか残らないため、374px以下だけ130×20へ落とす（同幅で320px） */
@media (max-width: 374px) { .site-header__brand-image { width: 130px; height: 20px; } }
/* ヘッダーが68px→76pxになったぶん、ロゴも202×31→215×33へ（2026-08-12）。
   縦横比6.518は維持（215÷33＝6.515）。3段とも比率を守ること */
@media (min-width: 600px) { .site-header__brand-image { width: 215px; height: 33px; } }
/* タグラインはアクアの縦線で区切る。ロゴの直後に灰色の小さい文が続くだけだと
   ワードマークの一部なのか別の要素なのかが読み取れない */
.logo-sub {
  display: none;
  padding-left: 12px;
  border-left: 2px solid var(--aqua);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
@media (min-width: 1200px) { .logo-sub { display: inline-block; } }
.site-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* 基底＝PCの横並び。899px以下でドロワーへ組み替える（下の max-width:899px ブロック）。
   **CTAが無いページ（estimate/privacy）で .site-header__actions を使わないこと。**
   .site-header__inner は space-between なので、display:none のトグルだけを包んだ幅0の
   ラッパーが flex item として残り、PCで nav が右端から中央へずれる */
.site-header__nav { display: flex; gap: 12px; }
@media (min-width: 1100px) { .site-header__nav { gap: 16px; } }
@media (min-width: 1200px) { .site-header__nav { gap: 24px; } }
.site-header__nav a {
  position: relative;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.site-header__nav a:hover { color: var(--accent); text-decoration: none; }
.site-header__nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 3px;
}
/* 下線はアクア。eyebrow・図版と同じ #60B9D6・同じ2pxで、サイトを貫く1本の線の一部として置いている。
   hover は中央から伸び、現在地は最初から全幅。線の色を --accent（インディゴ）へ戻さないこと——
   文字の hover 色と同じになり、線が「もう1つの文字色」に見えて印になっていない状態へ戻る */
.site-header__nav a::after {
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: var(--aqua);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}
.site-header__nav a:hover::after { transform: scaleX(1); }
.site-header__nav a[aria-current="page"] { font-weight: 700; }
.site-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .site-header__nav a::after { transition: none; }
}

/* ---------- 899px以下：同じ nav をドロワーへ組み替える ---------- */
/* リンクを二重に持たないため、PCの横並びと同じ <nav> を作り替えている。
   **position: fixed を使わないこと。** .site-header は backdrop-filter を持ち、
   backdrop-filter は子孫の fixed に対する包含ブロックを作る。ヘッダー内に fixed と書くと
   ビューポート基準のつもりで実際はヘッダー基準になり、たまたま動いている状態になる。
   ヘッダー自身が fixed＝包含ブロックなので absolute + top:100% が明示的で確実 */
@media (max-width: 899px) {
  .site-header__nav {
    position: absolute;
    top: 100%; right: 0; left: 0;
    display: block;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 4px 20px calc(16px + env(safe-area-inset-bottom));
    /* **不透明にすること。** 半透明＋backdrop-filter だと、ヘッダー自身の backdrop-filter の
       内側に入れ子になり、環境によっては背後のFVの見出しが透けてメニュー項目と重なる。
       ヘッダーの帯が半透明なのは意図的な意匠だが、文字が並ぶパネルは地を確保する */
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(22, 38, 79, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
  }
  .site-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .site-header__nav a {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }
  .site-header__nav a:last-child { border-bottom: 0; }
  /* アクアの下線はPCの横並び用。縦積みでは行の罫線と重なって読めないので、
     hover・現在地とも ::after を丸ごと止める（旧版は現在地だけを止めており、
     hover下線を足した時点で罫線と二重になる状態だった） */
  .site-header__nav a::after { display: none; }
  /* 縦積みでは現在地を色と、行頭のアクアの短い縦線で示す。PCの下線と同じ役割を別の形で持たせる */
  .site-header__nav a[aria-current="page"] {
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--aqua);
    padding-left: 12px;
    margin-left: -12px;
  }
}

/* 操作領域44px・見た目の3本線は内側の span が描く（追随CTAの×と同じ作法・README §51）。
   span 本体が中央の線、::before/::after が上下の線 */
.nav-toggle {
  display: grid;
  width: 44px; height: 44px;
  padding: 0;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--text-primary);
  flex-shrink: 0;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: background-color 0.2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  content: "";
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease, top 0.2s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.nav-toggle:hover { background: var(--bg-secondary); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* ヘッダー100 > 追随CTA90 > スクリム80。ドロワーはヘッダーの子なので追随CTAより前面に出る */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(22, 38, 79, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
@media (min-width: 900px) { .nav-scrim { display: none; } }
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .site-header__nav,
  .nav-scrim,
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after { transition: none; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .site-header__inner { padding-right: 12px; padding-left: 12px; }
  .btn--header { padding-right: 16px; padding-left: 16px; }
}
main { padding-top: var(--header-h); }
main.has-fv { padding-top: 0; }

/* ---------- 右下追随の無料相談CTA ---------- */
/* 寸法の正本は README §51。PC 280×約400px・SP 高さ約100px。
   文字は全て14px以上（README §1.17）。3項目を1行に収めるため吹き出しは204px必要で、
   これがカード幅280pxの下限を決めている。 */
.floating-consult {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 90;
  width: 280px;
  overflow: hidden;
  color: #16264F;
  background: #fff;
  border: 1px solid rgba(22, 38, 79, 0.1);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(22, 38, 79, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s;
}
.floating-consult.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.floating-consult.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(28px) scale(0.98);
}
.floating-consult__main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px 16px 14px;
}
/* 背景は developer.jpg をぼかして流用する（カード専用画像を増やさない・README §51）。
   ぼかしで縁が透けるため inset を負にして外へ逃がす。 */
.floating-consult__main::before {
  position: absolute;
  z-index: -1;
  inset: -30px;
  content: "";
  background-image: url(../img/developer.jpg?v=b8a1d0d4f3c1);
  background-position: 50% 18%;
  background-size: cover;
  filter: blur(24px);
}
.floating-consult__main::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(228, 242, 247, 0.86));
}
/* ボタン本体は44×44の操作領域（README §51）、内側の span が見た目の丸を担う */
.floating-consult__close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 5;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  background: none;
  border: 0;
}
.floating-consult__close span {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #16264F;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(22, 38, 79, 0.24);
}
.floating-consult__close span::before,
.floating-consult__close span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  content: "";
  background: currentColor;
  border-radius: 999px;
}
.floating-consult__close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.floating-consult__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.floating-consult__close:hover span { background: #0B1730; }
.floating-consult__close:focus-visible { outline: 0; }
.floating-consult__close:focus-visible span {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.floating-consult__wordmark {
  display: block;
  width: 104px;
  height: auto;
  margin: 0 auto 8px;
}
.floating-consult__kicker {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.floating-consult__title {
  margin-bottom: 12px;
  color: #16264F;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
}
.floating-consult__title span { color: var(--accent); }
/* 204px は追随カードの相談例を14pxで1行に収めるための幅 */
.floating-consult__details {
  position: relative;
  width: 204px;
  margin-bottom: 10px;
  padding: 12px 12px 13px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(22, 38, 79, 0.14);
}
.floating-consult__details::after {
  position: absolute;
  bottom: -9px;
  left: 26px;
  width: 0;
  height: 0;
  content: "";
  border-top: 10px solid #fff;
  border-right: 9px solid transparent;
}
.floating-consult__details-title {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}
.floating-consult__details li {
  position: relative;
  padding-left: 26px;
  color: #16264F;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.floating-consult__details li + li { margin-top: 6px; }
/* チェックは文字ではなく罫線で描く（グリフだと font-size が14px未満になり README §1.17 に触れる） */
.floating-consult__details li::before {
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  content: "";
  background: var(--accent-deep);
  border-radius: 50%;
}
.floating-consult__details li::after {
  position: absolute;
  top: 7px;
  left: 5px;
  width: 8px;
  height: 4px;
  content: "";
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}
/* 人物は __foot の子。PCは紺帯の直上（bottom:100%）に置き、SPでは静的な丸アイコンへ切り替える。
   切り抜きPNGを用意しない代わりに、上と左をマスクでぼかしてカード背景（同じ写真のぼかし）へ溶かす。 */
.floating-consult__portrait {
  position: absolute;
  right: -6px;
  bottom: 100%;
  width: 76px;
  height: 158px;
  object-fit: cover;
  object-position: 58% 16%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 38%),
    linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 38%),
    linear-gradient(to bottom, transparent 0, #000 22%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.floating-consult__foot {
  position: relative;
  z-index: 3;
  padding: 12px 16px;
  background: linear-gradient(135deg, #16264F, #101F44);
}
.floating-consult__link {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  color: #16264F;
  background: #fff;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.floating-consult__link:hover {
  color: #fff;
  background: var(--accent);
  text-decoration: none;
}
.floating-consult__link:hover .floating-consult__arrow {
  color: var(--accent);
  background: #fff;
}
.floating-consult__link:focus-visible {
  outline: 3px solid #9CD4E8;
  outline-offset: 3px;
}
.floating-consult__arrow {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
}
/* 30px円の幾何学中心は15px。2px線の中心と矢印先端の中心を16pxにそろえ、
   小さい円内で上寄りに見えないよう、見た目の重心を1px下へ補正する。 */
.floating-consult__arrow::before {
  position: absolute;
  top: 15px;
  left: 6px;
  width: 14px;
  height: 2px;
  content: "";
  background: currentColor;
  border-radius: 999px;
}
.floating-consult__arrow::after {
  position: absolute;
  top: 12px;
  right: 8px;
  width: 8px;
  height: 8px;
  content: "";
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.floating-consult__response {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
/* PCとSPで文面が違う（正本 04 A-14）。SPは主要流入が名刺QR＝代表と面識のある相手のため、
   「原則1営業日以内にメールで回答」が保証として働かない。返信の約束はPCカード・
   フォームページ・FAQが担保しており、SPは相談の敷居を下げる一文に振っている。
   リンクは1本のままラベルだけ入れ替えること——2本にすると data-cta の計測が二重になる */
.floating-consult__label--sp,
.floating-consult__response--sp { display: none; }
/* SPはカードをやめ、白基調のスリムバーにする（高さ約95px）。
   写真は左端＝「誰が答えるか→何をするか」の視線順にし、右端の矢印の着地点をボタンに残す。
   **紺帯へ戻さないこと（2026-08-09変更）。** 画面下に固定される帯は面積のわりに最も重く見え、
   PCカードが白基調になったあとはSPだけが濃紺で浮いていた。色の主張はボタン1つに集約する */
@media (max-width: 799px) {
  body.floating-consult-active {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
  .floating-consult {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-width: 520px;
    margin-inline: auto;
    border-radius: 16px;
    box-shadow: 0 -2px 12px rgba(22, 38, 79, 0.06), 0 12px 32px rgba(22, 38, 79, 0.16);
  }
  .floating-consult__main { display: none; }
  /* 白地の上に出るので、PCの紺丸だと主役のボタンより目立つ */
  .floating-consult__close {
    top: 2px;
    right: 2px;
  }
  .floating-consult__close span {
    width: 26px;
    height: 26px;
    color: var(--text-secondary);
    background: rgba(22, 38, 79, 0.08);
    box-shadow: none;
  }
  .floating-consult__close:hover span { background: rgba(22, 38, 79, 0.16); }
  .floating-consult__close:focus-visible span {
    outline-color: var(--accent);
  }
  .floating-consult__close span::before,
  .floating-consult__close span::after { width: 13px; }
  .floating-consult__foot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 10px;
    padding: 10px 12px;
    background: #fff;
  }
  .floating-consult__label--pc { display: none; }
  .floating-consult__label--sp { display: inline; }
  .floating-consult__response--pc { display: none; }
  .floating-consult__response--sp { display: block; }
  /* SPは肩まで入るバストアップの丸アイコンにする。developer.jpg は机まで入る
     引きのオフィス写真で顔が画像高の約29%しかなく、object-fit: cover は「はみ出さない
     最小倍率」までしか寄れないため、68px枠では顔が約19pxにしかならず誰だか
     分からなかった（2026-08-09の指摘）。**新しい画像ファイルは作らない**（README §51）。
     同じ file を背景画像として background-size で拡大している。
     **顔だけまで寄せないこと**——199%まで寄せた版は首から上だけが切り出されて
     「顔が浮いている」不自然な絵になった（同日の指摘）。肩と胸元、背景のオフィスが
     入ることが条件で、150%を超えると襟から下が消える。倍率・位置を変えたら375px実機で見ること */
  .floating-consult__portrait { display: none; }
  .floating-consult__foot::before {
    content: "";
    width: 68px;
    height: 68px;
    border: 2px solid rgba(22, 38, 79, 0.12);
    border-radius: 50%;
    background-image: url(../img/developer.jpg?v=b8a1d0d4f3c1);
    background-repeat: no-repeat;
    background-size: 145% auto;
    background-position: 49% 16%;
    grid-area: 1 / 1 / 3 / 2;
  }
  /* ボタンと同じグリッド列なので、中央揃えにすると視覚的な中心が揃う。
     **左寄せに戻さないこと**——ボタンのラベルは中央揃えのため、補足行だけ左寄せだと
     見た目の中心が約25pxずれる（2026-08-09の実測）。padding-right で×を避けると
     その分だけ中心がずれるので、余白ではなく文字数で×との間隔を確保する */
  .floating-consult__response {
    margin-top: 0;
    color: var(--text-secondary);
    text-align: center;
    grid-area: 1 / 2 / 2 / 3;
  }
  /* 白帯の上では白いボタンが消えるので、サイト共通のアクセント色に載せ替える。
     **色相を変えないこと。** 白文字が成立する色はどれも5〜6:1に収束し（濃オレンジ5.18・
     現行の青5.07・ティール5.73）、色を替えても視認性は上がらない。明るいオレンジは2.80:1で
     白文字が読めない。かつヘッダー・クロージング・セルフチェックと同じ estimate.html 行きなので、
     ここだけ色を変えると別の操作に見える。押しは面積と余白で作る */
  .floating-consult__link {
    min-height: 52px;
    padding: 6px 12px;
    color: #fff;
    background: var(--accent);
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(65, 88, 162, 0.28);
    grid-area: 2 / 2 / 3 / 3;
  }
  .floating-consult__link:hover { background: var(--accent-deep); color: #fff; }
  .floating-consult__link:focus-visible { outline-color: var(--accent); }
  /* **SPでは矢印を出さないこと。** 矢印を入れると flex の中央揃えがラベル＋gap＋矢印の
     まとまりに効くため、ラベルだけがボタン中心から18px左へずれる（実測）。
     真上の補足行はボタン中心に揃うので、2つの文字列が18pxずれて「バランスが悪い」状態になる。
     矢印は装飾で、塗りつぶしのピル自体が押せることを示せている。落としたぶんの幅で
     ラベルを16pxに戻せている（PCカードは矢印を維持） */
  .floating-consult__arrow { display: none; }
}
/* SPのボタン文言は「自社で減らせる仕事を相談」。写真を大きくしたぶん
   ボタン列が狭くなるので、狭幅では写真・文字・矢印を段階的に詰めて1行を守る。
   **折り返させないこと**——2行になるとボタンだけで80px近くなり、バーが画面を覆う */
@media (max-width: 374px) {
  body.floating-consult-active {
    padding-bottom: calc(144px + env(safe-area-inset-bottom));
  }
  .floating-consult__foot {
    gap: 4px 8px;
    padding: 10px;
  }
  /* SPの丸アイコンは __foot::before が描いている（__portrait は display:none）。
     background-size は枠に対する%なので、枠を縮めても顔の寄りは変わらない */
  .floating-consult__foot::before {
    width: 60px;
    height: 60px;
  }
  /* 16pxのままだと320px幅でボタン列216pxに対し内容216pxとなり折り返す */
  .floating-consult__link {
    padding: 6px 10px;
    font-size: 15px;
  }
  /* 狭い端末では補足行の末尾が×に重なる。**左右対称の padding で逃がすこと**——
     片側だけに padding を入れると中心がずれ、ボタンとの位置揃えが崩れる。
     収まらない幅では2行に折り返すが、確保余白144pxが高さの増加を吸収する */
  .floating-consult__response {
    padding: 0 24px;
  }
}
@media (max-width: 359px) {
  .floating-consult__foot::before {
    width: 56px;
    height: 56px;
  }
}
/* 高さ400pxなので通常のPCでは退避不要。極端に低いウィンドウでだけ吹き出しを畳む */
@media (min-width: 800px) and (max-height: 460px) {
  .floating-consult__details { display: none; }
  .floating-consult__portrait { height: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-consult { transition: none; }
}

/* ---------- スクロールフェードイン ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- FV（ファーストビュー） ----------
   2026-08-12：ダークな写真背景＋濃紺94%のオーバーレイを廃止し、白から淡青へ抜ける
   ライト構成へ組み替えた。**写真＋暗幕へ戻さないこと。** 理由は3つ。
   (1) 写真をほぼ潰す濃度のオーバーレイをかけており、写真は「暗い地色」としてしか機能していなかった
   (2) その「暗い写真＋白抜き見出し＋光るボタン」は既製テンプレートで最も多い型
   (3) ferret-one.com を含め、この層の読み手が見ているB2Bサイトは白基調が主流で、
       暗いFVは1枚目から「別の業種の会社」に見える
   背景の最上部を純白から始めているのは、不透明になったヘッダーとの境目を出さないため。
   グラデーションの0%を白以外へ変えないこと */
.fv {
  position: relative;
  overflow: hidden;
  color: var(--text-primary);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 26%, #F1F7FB 62%, #E8F1F8 100%);
  /* FV内の3つの帯（.fv__inner / .fv-outcomes__inner / .fv__stats-inner）が共有する左右の余白。
     **3つとも同じ値を使うこと**——見出し・4項目・実績の左端がそろっていないと段がずれて見える */
  --fv-gutter: 20px;
}
/* 1240px以上でガターを40pxへ。**48px以上にしないこと**——h1は white-space: nowrap なので、
   左カラムが「採用だけで解決しない。」（46px×11字≒511px）を割ると見出しがはみ出す。
   1240pxちょうどで左カラム＝(1240−80−48)×0.475＝528px となり、ここが下限 */
@media (min-width: 1240px) { .fv { --fv-gutter: 40px; } }
/* 背景に大きな円弧を置いていたが削除した（2026-08-12）。図版のループと交差して、
   意味の無い斜めの線が見出しの下を横切っていた。**戻さないこと**——
   回っていることは図版のループが既に言っており、背景の弧は同じことを二度言ったうえに読みにくくしていた */
/* 2026-08-12：max-width を 1240px から 2000px へ広げ、左右はガターだけにした（オーナー判断）。
   1240pxのままだと1920pxの画面で左右に340pxずつ何も無い帯ができ、参考にしたB2Bサイト
   （Helpfeel・SATORI・ferret One）がいずれもヒーローをビューポート端まで届かせているのに対し、
   **中央に小さく置かれた印象になっていた。** 1240pxへ戻さないこと。
   2000pxで頭打ちにしているのは、それ以上広げると2カラムが離れすぎて左右が別の塊に見えるため。
   縦のpaddingも同日に圧縮した（上84→40／下88→48）。**戻さないこと**——1920×1080で
   見出し・写真・4項目・実績スタッツまでが1画面に収まる配分にしてある */
.fv__inner {
  position: relative;
  max-width: 2000px; width: 100%;
  margin: 0 auto;
  padding: calc(var(--header-h) + 32px) var(--fv-gutter) 40px;
  display: grid;
  gap: 40px;
}
@media (min-width: 1000px) {
  .fv__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 48px;
    padding: calc(var(--header-h) + 40px) var(--fv-gutter) 48px;
  }
}
/* 見出しはHTMLの <br> だけで2行に分け、語の途中では折り返さない。
   375pxでは30pxを維持し、それ未満だけ11文字の2行目が収まるサイズまで縮小する。
   2カラムへ切り替わる1000px以上は、固定された左カラム幅に合わせて38〜46pxで可変にする。 */
.fv h1 { max-width: 100%; font-size: 30px; font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; white-space: nowrap; }
@media (max-width: 374px) { .fv h1 { font-size: calc((100vw - 40px) / 11.2); } }
@media (min-width: 900px) { .fv h1 { font-size: 46px; line-height: 1.38; } }
@media (min-width: 1000px) { .fv h1 { font-size: clamp(38px, 3.8vw, 46px); } }
/* 全幅化で左カラムが広がったぶん、1200px以上は見出しも大きくする（2026-08-12）。
   上限60pxの根拠：white-space: nowrap なので2行目「採用だけで解決しない。」＝11字が
   1行に収まる必要があり、60px×11≒660px。1920pxでの左カラムは843pxなので余裕がある。
   **60pxを超えないこと**、**新しい境界を作らないこと**（1200pxは既存） */
@media (min-width: 1200px) { .fv h1 { font-size: clamp(46px, 3.4vw, 60px); } }
.fv__lead { margin-top: 22px; color: var(--text-secondary); max-width: 34em; }
.fv__cta { margin-top: 36px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.fv__cta .cta-unit { align-items: flex-start; }
.fv__cta .cta-unit .caption { text-align: left; }
@media (min-width: 600px) { .fv__cta { flex-direction: row; align-items: flex-start; gap: 24px; } }

/* ---------- FV右の写真（3枚組） ----------
   2026-08-12、回る輪の図版（.fv-loop）から差し替えた。オーナー判断（README §FV右の図版）。
   輪が持っていた4項目は .fv-outcomes へ移してある。

   **1枚のコラージュ画像に戻さないこと。** 元素材は3枚組の1枚画像だが、余白の白が画像に
   焼き込まれており、FVの淡青グラデーション（#E8F1F8 側）の上では長方形の白ヌキとして浮く。
   3枚に分けると、写真のあいだの隙間がFVの背景色そのもので埋まる。

   **列比 876:643 を 1:1 にしないこと**——元コラージュの下2枚の実寸比で、この比のときだけ
   2枚の高さが揃う。1:1 にすると右の1枚だけ縦に伸びる。
   角丸14pxはカードの既定値で、素材に焼き込まれた角丸（表示換算で約9px）より大きい。
   **これより小さくしないこと**——焼き込まれた白い角が外側に残る */
.fv__aside { position: relative; }

/* **max-width を付けないこと。** 2026-08-12まで605pxで止めていたが、全幅化した右カラム
   （1920pxで約950px）の中で写真だけが小さく残り、FVの右半分に空きができていた */
.fv-photos {
  display: grid;
  grid-template-columns: 876fr 643fr;
  gap: 12px;
}
.fv-photos img {
  width: 100%;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  object-fit: cover;
}
/* 上の1枚は2列ぶち抜き。下2枚は height:100% で行の高さに合わせ、比のわずかな差は cover が吸う */
.fv-photos img:first-child { grid-column: 1 / -1; aspect-ratio: 1224 / 389; }
.fv-photos img:nth-child(2) { aspect-ratio: 700 / 380; height: 100%; }
.fv-photos img:nth-child(3) { aspect-ratio: 514 / 382; height: 100%; }

/* ---------- FVの効果4項目 ----------
   旧 .fv-loop__item。**文面と並び順は輪のときのまま引き継いでいる**（README §FV右の図版）。
   地色4色・濃紺1枚の強調・行頭の丸は 2026-08-12 にオーナー判断で廃止し、4枚を同じ組みにした。

   列数は既存の境界（600 / 1000）だけで切り替える。輪の専用境界だった 1160px は廃止した */
/* 幅は .container（1080px）ではなく .fv__inner と同じにする。同じ地の上に続けて置くので、
   左端がFVの eyebrow・h1 とそろっていないと段がずれて見える */
.fv-outcomes__inner { max-width: 2000px; margin: 0 auto; padding: 0 var(--fv-gutter) 32px; }
.fv-outcomes__lead {
  font-size: 16px; font-weight: 700; line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 14px;
}
/* リードは3語とも同じ太さ・同じ色にすること（2026-08-12・オーナー判断）。
   輪のときは「たとえば」だけ細字＋副次色で弱めていたが、1語だけ組みが違うと
   **弱めるつもりが逆に目立つ**。「一例である」ことの担保は語そのものが持っており、
   組みで弱める必要はない。**nth-child(2) の弱め指定を戻さないこと** */
.fv-outcomes__items { display: grid; gap: 12px; }
@media (min-width: 600px) { .fv-outcomes__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fv-outcomes__items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 節ごとに <span> で包み、句読点の位置で必ず2行に折る。
   **<wbr> に戻さないこと**——<wbr> は改行を「許可」するだけで、日本語は既定でどこでも
   折り返すため「人を増／やさずに回る」のように語中で割れる。
   **inline-block にしないこと**——幅に余裕があると短い項目（締め日〜＝15字）だけ1行に収まり、
   4枚のうち1枚だけ行数が違って見える。輪のときは項目幅が218px固定だったので inline-block でも
   必ず2行になっていた。
   block で固定できる根拠：最長の節「最新の数字が揃っている」＝11字×15px＝165px に
   左右padding 40px を足した **205px** が1枚の必要幅で、4列に切り替わる1000pxでも
   (1240−40−gap36)÷4＝281px 以上あるため足りる。**列数の境界を下げるときはこの計算をやり直すこと** */
.fv-outcomes__item span { display: block; }
/* ---- 4枚は同じ組み（2026-08-12・オーナー判断） ----
   輪のときは4色に塗り分け、濃紺1枚（取引が増えても〜）を起点の強調にしていたが、
   **4枚とも白地に統一した。** 4項目は並列の効果なので、器も並列にする。
   **色の塗り分け（濃紺／#D8EEF6／#E4E9FA／#DCF0E6）へ戻さないこと。**
   淡青の地の上で4色が並ぶと、直上の写真3枚と合わせて色数が増えすぎる。
   **行頭の丸（旧 ::before・--item-dot）も戻さないこと**——白地で1枚ずつの色分けが
   無くなった以上、丸は意味を持たない印になる。
   白地＋--shadow-card は .btn--secondary と同じ組みで、FVの淡青（#E8F1F8 側）から浮く */
.fv-outcomes__item {
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 15px; font-weight: 700; line-height: 1.6;
  color: var(--text-primary);
  background: #fff;
  box-shadow: var(--shadow-card);
}

/* FVスタッツバー */
.fv__stats {
  position: relative;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}
/* 2026-08-12：max-width 1080px（--two は920px）の中央寄せをやめ、.fv__inner と同じ
   2000px＋--fv-gutter にそろえた。**戻さないこと**——FVを全幅にした結果、上の4項目が
   画面端から40pxで始まるのに実績だけが中央寄せで、1920pxでは左端が320pxずれていた */
.fv__stats-inner {
  max-width: 2000px; margin: 0 auto; padding: 24px var(--fv-gutter);
  display: grid; gap: 24px;
}
@media (min-width: 700px) { .fv__stats-inner { grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 28px var(--fv-gutter); } }
@media (min-width: 700px) { .fv__stats-inner--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fv__stats-inner--two .stat__value { line-height: 1.35; }
/* 2列では長い実績値にも対応できるよう、デスクトップ時の数値サイズを34pxに抑える（2026-08-10） */
@media (min-width: 900px) { .fv__stats-inner--two .stat__value { font-size: 34px; } }
.stat__divider { margin: 0 8px; color: var(--line-strong); font-weight: 400; }
/* FVが明るくなったので、スタッツも白抜きから濃紺の文字へ（2026-08-12）。
   ラベルの頭にアクアの短い縦線を置き、2つのスタッツの区切りを罫線ではなく行頭の印で示す */
.stat { text-align: left; padding-left: 14px; border-left: 2px solid var(--aqua); }
.stat__label { font-size: 14px; color: var(--text-secondary); letter-spacing: 0.04em; }
/* ラベルが #developer へのリンクになる場合（1つ目のスタッツのみ。index.html のコメント参照）。
   a は inline なので display を戻さないこと——下線が字送りに追従せず .stat__value との間隔も詰まる。
   .btn を当てないこと。main.js が main .btn[data-cta] で追随CTAの出し入れを判定しており、
   ボタン化すると計測属性を付けたくなる方向へ引っ張られる（README §1.12-12 と同じ理由） */
a.stat__label {
  display: inline-block; text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid rgba(65, 88, 162, 0.4);
  transition: color 0.2s, border-color 0.2s;
}
a.stat__label:hover, a.stat__label:focus-visible { color: var(--accent-deep); border-color: var(--accent-deep); }
/* 32/44px は底上げの対象外（README §1.17）。すでに十分大きく、上げると3つのスタッツが375pxで折り返す */
.stat__value { font-family: var(--font-en); font-size: 32px; font-weight: 800; line-height: 1.2; margin-top: 4px; color: var(--text-primary); font-feature-settings: "tnum"; letter-spacing: -0.01em; }
@media (min-width: 900px) { .stat__value { font-size: 44px; } }
.stat__value small { font-family: var(--font-sans); font-size: 16px; font-weight: 700; margin-left: 2px; }
/* 数値＋単位＋述語を1かたまりにして、折り返しを「／」の後ろだけに限定する。
   これが無いと日本語の改行規則で「を削減」の直前が切れ、述語だけが次行に孤立する */
.stat__figure { white-space: nowrap; }
/* 数字ではない宣言文（既存環境を優先）用。.stat__value を流用しないこと——
   44px/tnum/font-en は「数字1〜2文字＋小さい単位」の想定サイズで、文章を入れるとh1（最大46px）より面積が大きくなる */
.stat__statement { font-size: 20px; font-weight: 700; line-height: 1.45; margin-top: 4px; }
@media (min-width: 900px) { .stat__statement { font-size: 24px; } }
/* max-width は全幅化（2026-08-12）で入れた。1920pxでは1カラムが約880pxあり、
   14pxの注記が1行80字を超えて読めなくなる。**外さないこと** */
.stat__note { font-size: 14px; color: var(--text-secondary); margin-top: 6px; line-height: 1.75; max-width: 46em; }

/* ---------- 課題共感（イラスト3列） ----------
   カード3枚（.problem-grid / .problem-card / .problem-card .icon）は廃止。枠・影・背景を持たせず
   白地に直接置く。直後の Why Us が箱型のフローなので、器を持たないことが両者の区別になる  */
.problem-list { display: grid; gap: 48px; }
.problem-item { display: grid; }
@media (min-width: 800px) {
  .problem-list { grid-template-columns: repeat(3, 1fr); gap: 32px; grid-template-rows: auto auto 1fr; }
  /* subgrid で3列のイラスト下端・見出し・本文の頭をそろえる */
  .problem-item { grid-row: span 3; grid-template-rows: subgrid; }
}
.problem-item__illust { display: flex; justify-content: center; align-items: flex-end; }
.problem-item__illust img { width: 200px; max-width: 62%; }
.problem-item h3 { font-size: 19px; font-weight: 700; line-height: 1.5; text-align: center; margin: 16px 0 10px; }
.problem-item h3 span { display: block; white-space: nowrap; }
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 800px) { .problem-item h3 { min-height: 2.7em; } }
}
.problem-item p { font-size: 16px; color: var(--text-secondary); }
/* Problems と Why Us の締め。どちらも直前の3列を受ける1文で、体裁を分ける理由がない */
.problem-close, .reason-close { text-align: center; margin-top: 48px; font-size: 17px; font-weight: 700; }
@media (min-width: 800px) {
  .problem-close, .reason-close { font-size: 19px; }
}

/* ---------- 選ばれる理由（悩み → 答えの4列。2026-08-08に3列から。README §1.19） ----------
   カード3枚（.reason-grid / .reason-card / .num）は廃止。答えだけが並び、
   その答えを必要とする理由が画面に出ていなかったため、各列の先頭に不安の1行を置いた。
   色は既存トークンのみで組む——琥珀（--alt 系）は復活させないこと（:root のコメント／README §1.12-1）  */
.reason-flow { display: grid; gap: 40px; }
.reason-col { display: grid; }
/* 2026-08-08に3列→4列（README §1.19）。800pxで4列にすると1列169px・イラスト105pxになり破綻するため、
   800〜1039pxは2×2、1040px以上で4列という3段階にしている。
   1040pxは .price-cards の3列開始と同じ既存の境界（README §1.17）。新しい境界を作らないこと。
   subgrid で悩みボックスの高さをそろえる。文量が違ってもイラスト・矢印・答えが横一線に並ぶ */
@media (min-width: 800px) {
  /* 2×2。4項目が2段に入るので、行の帯（悩み・矢印・イラスト・答え）を2組ぶん定義する */
  .reason-flow { grid-template-columns: repeat(2, 1fr); gap: 28px; grid-template-rows: repeat(2, auto auto auto 1fr); }
  .reason-col { grid-row: span 4; grid-template-rows: subgrid; }
}
/* 4列は1240px以上から。1040pxで4列にすると1列239pxになり、日本語が10文字前後で折り返して読めない
   （2026-08-08、オーナー指摘で1040px→1240pxへ引き上げ）。1040〜1239pxは上の2×2が受ける。
   gapを24pxに詰めて1列267pxを確保している（.container の内寸1140px − gap72 ÷ 4）。

   **margin-inline の張り出し（旧 -60px）は 2026-08-12 に削除した。** .container を
   1080→1180pxへ広げたことで内寸が1040→1140pxになり、張り出さなくても4列が確保できる。
   **復活させないこと**——1240pxちょうどのとき内容の左端はビューポートから50px（余白30＋padding20）
   しかなく、-60px だと左端が -10px になって横スクロールが出る。
   この列だけ左右へはみ出させないこと——サイト全体の .container（1180px）の枠から外れて見える */
@media (min-width: 1240px) {
  .reason-flow {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 24px;
  }
}
.reason-worry {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; font-size: 16px; line-height: 1.85; text-align: center;
}
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 800px) {
    .reason-worry { min-height: 92px; display: flex; align-items: center; justify-content: center; }
  }
}
.reason-illust { display: flex; justify-content: center; align-items: flex-end; padding: 12px 0 4px; }
.reason-illust img { width: 200px; max-width: 62%; }
.reason-arrow { display: flex; justify-content: center; padding: 4px 0 12px; }
/* 矢印は流れを示す要素なのでアクア系。ただし --aqua（#60B9D6）は白地で 2.23:1 しかなく、
   意味を持つ図形の下限3:1（WCAG 1.4.11）に届かない。文字用に用意した --aqua-text（4.88:1）を使う。
   **--aqua へ変えないこと**——並んでいる図版の線と同じ色にしたくなるが、あちらは alt で
   意味を持たない装飾で、この矢印は「悩み→答え」の向きそのものを担っている */
.reason-arrow::before {
  content: ""; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 13px solid var(--aqua-text);
}
.reason-answer { background: var(--accent-soft); border-radius: 14px; padding: 22px 22px 24px; }
.reason-answer h3 {
  font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 10px;
  color: var(--accent-deep); /* --accent-soft 上で 6.15:1 */
}
.reason-answer p { font-size: 16px; }
.reason-answer strong { color: var(--accent-deep); }

/* ---------- サービス（提供範囲・工程・対象領域） ---------- */
/* 節名は 2026-08-12 に「できること」から変更。id は services のまま（企画書/02 の §4 の節名は「できること」） */
/* カード3枚以上のグリッド（.service-grid / .service-card）は廃止。CASESと同じ見た目になり、
   抽象で言ったことを2セクション後に実画面付きで言い直す重複が視覚的にも成立していた（04正本 A-11） */

/* イラストは1枚だけ。Problems・Why Us がすでにイラスト3列のため、ここも3列にすると
   同じ絵面が3セクション続く（README §2.5）。表示幅は240pxで、両セクションの200pxより一段大きい */
.service-illust { display: flex; justify-content: center; margin: 0 0 40px; }
.service-illust img { width: 240px; max-width: 62%; }

.service-flow { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .service-flow { grid-template-columns: repeat(5, 1fr); gap: 12px; } }
/* .service-step / .service-step__no は 2026-08-29 に CSS ごと削除（HTML から未参照だった） */
.service-flow__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  margin-top: 28px;
}
.service-flow__links a {
  font-size: 15px; font-weight: 700; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
/* 2枚は最後まで同じ体裁にすること（2026-08-12の整えでも守っている）。片方だけに色・強い枠・大きい影を
   与えると、診断が「開発への通過点」に、あるいは開発が既定路線に見え、Why Us 列02「診断後に開発を契約する
   義務はありません」と視覚的に矛盾する（ルート図の終点と同じ規律。README §1.12-17 / 04正本 A-18） */
.service-paths { display: grid; gap: 20px; margin: 32px 0 0; }
@media (min-width: 800px) { .service-paths { gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* カードの中を2色にしないこと（2026-08-12に一度やって戻した）。工程だけを --bg-secondary の帯へ落とすと、
   帯の色がセクションの地色と同じなのでカードの下半分が背景に溶け、「カードが途中で切れている」ように見える。
   区切りは色でも罫線でもなく余白が担う——リード下の 24px と工程の行間 14px の差がそれ */
.service-path {
  display: flex; flex-direction: column;
  padding: 24px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-primary); box-shadow: var(--shadow-card);
}
@media (min-width: 800px) { .service-path { padding: 30px; } }
/* ホバーリフト（--shadow-lift）を付けないこと。押せる要素に見え、CASESのカードと同じ挙動に戻る（§1.16） */
.service-path__label {
  display: inline-flex; align-self: flex-start; margin-bottom: 12px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
}
.service-path h3 { margin-bottom: 10px; font-size: 22px; line-height: 1.5; text-wrap: balance; }
/* 24px は「説明」と「工程」を分ける唯一の手がかり。工程の行間（14px）より広いことが条件で、
   詰めると工程の始まりが読み取れなくなる。ol 側の margin-top: auto はこれ以上詰めない */
.service-path > p { margin-bottom: 24px; color: var(--text-secondary); }
/* margin-top: auto で2枚の工程リストの上端をそろえる（見出しやリードの行数が違っても左右で段が合う） */
.service-path ol { margin: auto 0 0; padding: 0; list-style: none; counter-reset: service-path; }
/* 工程のあいだに罫線を引かないこと（2026-08-12。旧版は5本すべてに引いていた）。行間と番号の列で
   十分に区切れており、戻すと工程が「表」に見える。地色の帯へ落とすのも同じ理由で不可（上の注記）。
   番号と本文はグリッドのベースライン揃え。文字サイズが変わっても番号が浮かない */
.service-path li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline;
  padding: 7px 0; color: var(--text-primary); font-weight: 500; counter-increment: service-path;
}
.service-path li::before {
  content: counter(service-path, decimal-leading-zero);
  color: var(--accent); font-family: var(--font-en); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
/* 終点（05）だけ太字にする。診断側は「診断レポートの報告・納品」、開発側は「納品後30日間の運用確認」で、
   どちらもそのサービスの終わり。2枚で同じ強さにすること（上のカード共通の注記と同じ理由） */
.service-path li:last-child { font-weight: 700; }
.service-path li:last-child::before { color: var(--accent-deep); }
/* text-wrap: balance は2行を均す。無いと2行目が「る範囲です。」だけになる幅がある */
.service-method { margin-top: 28px; text-wrap: balance; }

/* AI顧問の1行導線（2026-08-16新設。§1.16・04正本 A-24）。
   締めの1文（.service-method・17/19px 太字・中央）より弱く組むこと——同じ強さにすると
   2枚のカードを束ねる締めが「3商品の総括」に見え、月2.2万円が診断・開発と並ぶ。
   .service-path のカードにしないこと・.service-paths のグリッドへ入れないこと（3枚目に見える）。
   15px は §1.17 の下限14pxを満たす。--text-secondary のままにすること */
.service-advisor-note {
  max-width: 660px; margin: 16px auto 0;
  text-align: center; font-size: 15px; color: var(--text-secondary); text-wrap: pretty;
}
.service-advisor-note a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* .service-scope（自動化の対象になる仕事・3項目）は2026-08-08に削除。
   Serviceが持つのは提供範囲だけで、対象の切り分けはProblemsの締めの1文が持つ（04正本 A-11） */

.service-note { text-align: center; margin-top: 36px; color: var(--text-secondary); font-size: 16px; }
.service-note__label { display: block; margin-bottom: 12px; color: var(--text-primary); font-weight: 700; }
.service-note > p { margin-top: 12px; }
.tech-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.tech-chips li {
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.tech-chips--compact { justify-content: flex-start; gap: 6px; }
.tech-chips--compact li { padding: 4px 8px; font-size: 12px; }

/* ---------- 導入事例（Before/After） ---------- */
.cases-intro {
  max-width: 760px; margin: 0 auto 40px;
  font-size: 15px; color: var(--text-secondary);
  border-left: 3px solid var(--aqua); padding-left: 16px;
}
.case-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .case-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }
/* 6枚が同じ重さで並ぶセクションなので、影は最小のまま。hoverで少しだけ持ち上げて
   「読む面」ではなく「見比べる面」であることを出す（リンクではないので色は変えない） */
.case-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 24px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow 0.24s ease, border-color 0.24s ease;
}
.case-card:hover { box-shadow: var(--shadow-lift); border-color: #CBDBE8; }
@media (prefers-reduced-motion: reduce) { .case-card { transition: none; } }
.case-card h3 { font-size: 19px; font-weight: 700; line-height: 1.5; }
.case-impact {
  margin-top: -6px;
  color: var(--good-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
/* 上段＝Before、下段＝矢印＋After の2行固定。flex-wrapに戻すと、Before文が折り返したカードだけ
   矢印が行頭へ回り、帯の高さも1行分ずれる（6枚で矢印位置が2種類になる）ため、この構造を崩さないこと */
.case-ba {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 12px; row-gap: 4px; align-items: center;
  padding: 14px 16px; background: var(--bg-secondary); border-radius: 10px;
}
.case-ba .before { grid-column: 1 / -1; font-size: 15px; color: var(--text-secondary); }
.case-ba .arrow { grid-column: 1; color: var(--text-secondary); }
.case-ba .after { grid-column: 2; font-size: 16px; font-weight: 700; color: var(--good-text); }
/* line-height: 1 は必須。body の 1.9 を継承すると22pxの数字が行ボックスを約42pxまで押し上げ、
   この行を持つカード（経理の「0」）だけ帯が背高くなる */
.case-ba .after .big { font-family: var(--font-en); font-size: 22px; line-height: 1; font-feature-settings: "tnum"; }
.case-card .body { font-size: 16px; color: var(--text-secondary); flex: 1; }
.case-media {
  aspect-ratio: 2 / 1; margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.case-media img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}

/* ---------- 開発者紹介 ---------- */
/* 全幅の単カラム（見出し→写真→本文）。2026-08-08に .dev-intro（冒頭エピソードと数値帯）を
   全削除したため、850px以上の2カラム（"photo intro"）を撤去した——写真の隣に置く要素が無く、
   残すと写真の右に518pxの空白が空くだけになる。
   2026-08-07に2カラムを入れた理由は「縦位置4:5の写真に隣を持たせる」ことだったので、
   隣が無くなった時点で成立しない。写真の右に何かを置く案が出たら、
   企画書/04 A-10 の削除記録（何を書いて、なぜ消したか）を先に読むこと。
   position: sticky で空白を埋める案は採らない（写真を追随させない方針・2026-08-07） */
.dev-grid {
  display: grid; grid-template-areas: "head" "photo" "body";
  gap: 36px; align-items: start;
  width: 100%; max-width: 900px; margin: 0 auto;
}
.dev-head { grid-area: head; text-align: left; margin-bottom: 0; }
.dev-photo { grid-area: photo; }
.dev-body { grid-area: body; }
/* .dev-grid--no-photo は 2026-08-08 に削除。本人写真の配置後（2026-08-02）に使われなくなっていました */
/* 360pxで頭打ちにする。縦位置は幅を広げると高さが1.25倍で効いてきて、
   560pxだと高さ700px＝スマホの表示領域をほぼ占有し、本文が1行も画面に入らなくなる */
/* 影は隣の .dev-profile カードと同じ var(--shadow-card)。枠線だけだと写真が平面に見え、
   同じセクション内でカードとの質感が揃わない */
.dev-photo {
  width: 100%; max-width: 360px; margin: 0 auto;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-secondary); box-shadow: var(--shadow-card);
}
.dev-photo[hidden] { display: none; }
/* 運営者情報の「代表略歴」「メンバー」に置く人物写真。トップの .dev-photo（360px・中央寄せ）
   と違い、本文の左に回り込ませるため 200px で左寄せにする。写真・枠の作りは .dev-photo と同じ。
   .profile-block は float を内側で閉じるためのもの（無いと写真がフッターへはみ出す） */
.profile-block { display: flow-root; }
.profile-block + h2 { margin-top: 2em; }
/* 氏名＋肩書き。代表は info-table に氏名があるため使わず、メンバーの節だけで使う。
   組みはトップの .dev-profile .name に合わせている（罫線は本文に回り込むので付けない） */
.profile-name { margin-bottom: 0.8em; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.profile-name span { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--text-secondary); }
.profile-photo {
  width: 200px; max-width: 40%; margin: 0 1.2em 0.6em 0; float: left;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-secondary); box-shadow: var(--shadow-card);
}
.profile-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* 480px以下では回り込ませない。200pxの写真の横に残る本文幅が10文字前後になり、
   1段落が細長い柱のようになって読めなくなる */
@media (max-width: 480px) {
  .profile-photo { float: none; width: 100%; max-width: 240px; margin: 0 0 1.2em; }
}
/* 現在の写真はちょうど4:5なので object-fit は実際には切り抜かない。
   別の写真へ差し替えたときに枠が崩れないための保険として残す */
.dev-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.dev-photo img[hidden] { display: none; }
/* .asset-mock / __flag / __monogram / __eyebrow / --portrait は 2026-08-08 に削除しました。
   写真・イラストが未用意の間だけ表示していた代理表示の仕組みで、本人写真の配置（2026-08-02）と
   イラスト7枚の投入で用途が消えています。素材待ちの箱を作り直す前に README §2.5 を読むこと。
   この削除で 12px の該当箇所が 14件 → 11件 に減っています（README §1.17 の受け入れ条件） */
.dev-body p { margin-bottom: 1.2em; }
/* .dev-intro / .dev-result / .dev-result__fact は 2026-08-08 に削除した（冒頭エピソードと数値帯の全削除）。
   同じ器を作り直す前に 企画書/04 A-10 の削除記録を読むこと */
/* プロフィールは、短い紹介本文と区別して実績を確認しやすくするため白地のカードにする */
.dev-profile {
  margin-top: 20px; padding: 24px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-card);
  font-size: 15px; color: var(--text-secondary); line-height: 1.9;
}
.dev-profile .name {
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--text-primary);
}
.dev-profile .name span { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--text-secondary); }
.dev-profile dt { font-size: 14px; font-weight: 700; color: var(--accent-deep); }
.dev-profile dd { margin: 0 0 14px; }
.dev-profile dd:last-child { margin-bottom: 0; }
/* .dev-grid は単カラムで本文幅900pxだが、項目名は4文字までなので5emで足りる */
@media (min-width: 850px) {
  .dev-profile dl { display: grid; grid-template-columns: 5em 1fr; column-gap: 20px; row-gap: 12px; align-items: baseline; }
  .dev-profile dd { margin: 0; }
}
@media (max-width: 390px) { .dev-profile { padding: 18px; } }
/* 開発者紹介のプロフィール小見出し */
.dev-sub { margin: 36px 0 14px; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--text-primary); }

/* ---------- 料金 ---------- */
/* .price-table / .price-table--services / .price-table--bands は 2026-08-08に削除しました。
   料金セクションから表がすべて無くなったためです（一覧表→価格カード、価格帯表→「例 → 価格」の3組）。
   表に戻さないこと（README §1.13）。 */
/* .table-scroll は残します。料金では使わなくなりましたが、guide.html の2つの表と
   index.html のセルフチェック比較表（.sc-comparison）が使っています。消さないこと */
.table-scroll { overflow-x: auto; }

/* 料金：価格カード（2026-08-08。旧 .price-table--services を置き換え。2026-08-10に診断が
   別商品として復活し4枚に、2026-08-11に「入口バンド＋有料3枚」へ）。
   全体像を渡す地図で、比較して選ばせるUIではない（README §1.13-1）。
   4枚は並列の選択肢ではなく「無料相談 → 診断 → 開発 → 納品後の任意サポート」という順番で、
   その関係を担っているのが下の矢印コネクタ。消すと並列商品に見え、
   継続改善サポートが「選ばなかった方の商品」になる（README §1.13-4） */
/* align-items: start は必須。既定の stretch だと、1枚の折りたたみを開いたときに
   残りも同じ高さまで引き伸ばされ、空白の大きなカードが並ぶ */
/* 2026-08-12：max-width:1000px を外し、.container の内寸（1180−40＝1140px）いっぱいまで使う。
   .container を1080→1180pxへ広げたとき、ここだけ1000pxで止まって料金セクションだけ細く見えた。
   **3列の開始幅1040pxの根拠は変わらない**——ビューポート1040pxでは .container がまだ max-width に
   達しておらず内容幅は 1040−40＝1000px なので、下の計算はそのまま成立する */
.price-cards { display: grid; gap: 16px; margin: 0 auto; list-style: none; align-items: start; }
/* 3列の開始幅は 1040px。900px から引き上げました（2026-08-08、文字サイズ底上げ／README §1.17）。
   .container が max-width:1180px・padding:0 20px なので、ビューポート1040pxでちょうどコンテンツ幅が
   1000pxになります。900px開始のままだとカード幅が (900−40−68)/3 ＝ 264px、
   カード内の文字幅が 224px しかなく、.price-card__ex-sub を12pxより大きくできませんでした。
   1040px開始ならカード幅 (1000−56)/3 ＝ 314px・文字幅 274px で、15px／14px が収まります。
   900pxへ戻さないこと——戻すと料金の内訳が下限14pxを割ります。

   @media (min-width: 760px) の2列指定を復活させないこと（2026-08-11に削除）。
   2026-08-10に4枚目のカード（業務改善診断）が増えたとき2列指定だけが足され、周辺の不変条件が
   どれも追随していませんでした。その1行が次の4つを同時に壊していました——
     ① 下端の帯がそろわない：.price-card__price / __ex の min-height は 1040px 以上にしか
        効かないのに、横並びは 760px から始まっていた
     ② PCで矢印コネクタが1本も出ない：下の display:none が 760px で効き、1040px のブロックが
        戻していなかった（死にコード）
     ③ 2×2 になり、診断→開発という最も重い移行がちょうど行またぎに来る
     ④ 「3列時270px」を根拠にした文字数・文字サイズの制約が、実際の446px幅に対して過剰
   現在は「1040px未満＝1列／1040px以上＝バンド＋3列」。
   1040px は「3列開始」「min-height の境界」「矢印の向きが変わる境界」の3つを兼ねています。
   ずらすときは3つとも同じ値にすること */
@media (min-width: 1040px) { .price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

.price-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 22px 20px 24px; text-align: center;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  box-shadow: var(--shadow-card);
  /* scroll-margin-top を付けないこと。html の scroll-padding-top と加算され、着地が約96px下へずれる（2026-08-29） */
}
/* overflow: clip を付けないこと。.price-card__cond（カード上辺にはみ出すラベル）が切れる。
   下端の帯が角丸からはみ出す問題は .price-card__foot 側の border-radius で処理している */
/* 起点が0円であることを、価格帯表の最上段（55万円〜）より先に見せるためのカード。
   色が付くのはここだけ。有料3枚は同じ体裁にする——1枚を弱い組みにすると格下の商品に見える */
.price-card--free { background: var(--accent-soft); border-color: rgba(65, 88, 162, 0.3); }

/* 1040px以上では無料相談を全幅の入口バンドにする。有料3枚と並べないのは、順番
   （0円 → 13.2万 → 22万〜 → 16.5万／3か月）の起点であって、横並びで比較する商品ではないため。
   有料3枚が横一線に並んで初めて「予算の桁を示す地図」として比較できる（README §1.13・04正本 A-19）。

   このブロックを .price-card の定義より前へ動かさないこと。
   .price-card--free も .price-card もクラス1つ＝詳細度が同じため、前に置くと後勝ちで
   flex-direction: column / text-align: center に戻されます（メディアクエリは詳細度を上げません）。

   min-height の解除を外さないこと——効いたままだとバンドの中に約50pxの空白が入ります。
   .price-card__foot は共通ルールで align-self:stretch ＋ 負マージンの下端帯なので、上書きが必須です */
@media (min-width: 1040px) {
  .price-card--free {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; text-align: left;
    gap: 22px; padding: 16px 24px;
  }
  .price-card--free .price-card__illust { height: auto; margin: 0; flex: 0 0 auto; }
  .price-card--free .price-card__illust img { width: 104px; }
  .price-card--free .price-card__name { flex: 0 0 auto; }
  .price-card--free .price-card__price { margin: 0; min-height: 0; flex: 0 0 auto; }
  .price-card--free .price-card__ex { margin: 0; min-height: 0; flex: 1 1 auto; }
  .price-card--free .price-card__foot {
    flex: 0 0 auto; align-self: center;
    margin: 0; padding: 0; border-top: 0; border-radius: 0;
  }
}

/* 順番を示す矢印。1040px以上は「バンド↓」1本＋有料3枚のあいだ2本、それ未満は縦積みに合わせて下向き3本。
   境界は .price-cards の3列開始と必ず同じ値にすること（ずらすと縦積みなのに矢印が右を向く）。
   どちらかの商品を強調する装飾ではないため、色は罫線と同じ中立色にする。
   矢印を消さないこと——並列の選択肢ではなく順番であることを担っており、消すと継続改善サポートが
   「選ばなかった方の商品」に見える（README §1.13-4・04正本 A-7）。
   2026-08-11以前は @media (min-width: 760px) の display:none が効いたまま戻されておらず、
   PCで1本も出ていませんでした。display を再び止めないこと */
.price-card + .price-card::before,
.price-card--free::after {
  content: ""; position: absolute; z-index: 1; width: 11px; height: 11px;
  border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong);
}
/* バンド下の下向き矢印は1040px以上だけ。それ未満は縦積みで、隣の .price-card::before が同じ役割を持つ */
.price-card--free::after { display: none; }
@media (min-width: 1040px) {
  /* top を 50% にしないこと。折りたたみを1枚だけ開くとカードの高さが変わり、矢印だけが下へずれる。
     イラスト枠の中心（padding-top 22px + 144px / 2）に固定して、開閉に影響されないようにする */
  .price-card + .price-card::before { top: 94px; left: -23px; transform: rotate(45deg); }
  /* 診断はグリッドの1列目。左隣に矢印を置く場所が無いので消し、代わりにバンド下の1本が
     「無料相談 → 有料3枚」を示す */
  .price-card:nth-child(2)::before { display: none; }
  .price-card--free::after {
    display: block; bottom: -20px; left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}
@media (max-width: 1039px) {
  .price-card + .price-card::before { top: -13px; left: 50%; transform: translateX(-50%) rotate(135deg); }
}

/* 位置づけラベル。中立グレー——`--accent` と紐づけないこと。
   「おすすめ」型の語に変えないこと（README §1.13-4） */
.price-card__cond {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
  background: #E7EEF6; color: #4A5A75;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
}
/* 縦積みでは矢印もラベルもカード上辺の中央に来て重なる。ラベル側を通常フローに戻して逃がす。
   この上書きは必ず上の基底規則より後に置くこと——同じ詳細度なので、前に置くと効かない */
@media (max-width: 1039px) {
  .price-card__cond { position: static; transform: none; margin-bottom: 10px; }
}
/* 高さを固定して3枚の足元を揃える。画像側の460×400キャンバスが下端揃えで作られており、
   両方が揃って初めて3列のイラストの足元が揃う（assets/img/_credits.txt の加工手順）。
   この3枚だけは長辺ではなく「高さ340px」で正規化してある——枠が狭いため、長辺で揃えると
   横に広い構図（業務自動化のカード）だけ人物が小さく見える */
.price-card__illust { display: flex; align-items: flex-end; justify-content: center; height: 144px; margin-bottom: 12px; }
.price-card__illust img { width: 165px; }
/* 「何ができるか、いくらかかりそうかを知りたい」が最終行1文字で折り返すのを防ぐ */
.price-card__name, .price-card__ex { text-wrap: balance; }
.price-card__name { font-size: 16px; font-weight: 700; line-height: 1.6; }
.price-card__name a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.price-card__name a:hover { color: var(--accent-deep); }
.price-card--free .price-card__name a { color: var(--accent-deep); }
/* カード内で最も大きい要素にする。ここがセクションの視線の着地点で、
   小さくすると改稿前（14pxのテーブルセル）の「数字が探せない」状態に戻る */
.price-card__price {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap;
  margin: 6px 0 10px; color: var(--bg-dark);
}
.price-card__price strong { font-family: var(--font-en); font-size: 40px; line-height: 1.1; font-feature-settings: "tnum"; }
@media (max-width: 1039px) { .price-card__price strong { font-size: 34px; } }
.price-card__unit { font-size: 16px; font-weight: 700; }
/* 税込の表記はここ（各カードの価格行）だけ。注記（.price-cards__note）からは2026-08-29に「価格はすべて税込です」を削り、改定予告のみ残した */
.price-card__tax { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-left: 2px; }
.price-card__per { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
/* 3列のときだけ2行分を確保して、下端の帯（.price-card__fold / __foot）の高さを3枚で揃える。
   #continuous-support だけ .price-card__per が「／3か月（月あたり55,000円）」で、価格行が2行に折り返すため。
   71px は strong 40px × line-height 1.1 ＝ 44px ＋ __per 14px × body の line-height 1.9 ＝ 27px。
   .price-card__price strong の font-size か .price-card__per の文字数を変えたら必ず計算し直すこと。
   1039px以下は縦積みで高さを揃える必要がなく、strong も34pxに下がるため効かせない。
   .price-card__ex の min-height:52px と同じ手法・同じ guard（README §1.13-4-2） */
@media (min-width: 1040px) { .price-card__price { min-height: 71px; } }
.price-card--free .price-card__price { color: var(--accent-deep); }
.price-card__ex { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
/* 3列のときだけ2行分を確保して、下端の帯（.price-card__fold / __foot）の高さを3枚で揃える。
   縦積みでは全部1行に収まるので効かせない。
   52px は 15px × line-height 1.7 × 2行 ＝ 51px の切り上げ。.price-card__ex の font-size を変えたら
   必ずここも計算し直すこと（2026-08-08に 13px・44px から改めました） */
@media (min-width: 1040px) { .price-card__ex { min-height: 52px; } }
/* 説明文の2行目（#continuous-support だけが持つ）。p を2つに分けないこと——min-height が両方に効き、
   このカードの下端の帯だけが26px下がる。
   15pxに上げないこと。「単発のご依頼も承ります（1件5.5万円）」は14pxで約251pxあり、3列時のカード内
   文字幅 (1000−68)/3 − 40 ＝ 270px に収まるのは14pxまで。折り返すと1行目と合わせて3行になり、
   min-height:52px の2行分を超えてこのカードだけ帯が下へずれる。
   2行目の文字数を増やすときも、この270pxで測ること。
   価格の体裁（.price-card__price）を与えないこと——2価格が縦に並ぶと「同じ商品の2段階プラン」に見える */
.price-card__ex-sub { display: block; font-size: 14px; }

.price-cards__note { max-width: 1000px; margin: 14px auto 0; text-align: right; }

/* 料金：価格の目安（2026-08-08。3列の表をやめ「例 → 価格」の3組にした）。
   読み手が照合できるのは「例」のほうなので、例を先に大きく、価格を受けに置く。
   「価格 → 例」の順に戻さないこと——先に金額が来ると、自分の案件を探す前に高い/安いの判断が始まる */
.price-examples { margin: 4px 0 12px; }
.price-examples dt {
  position: relative; padding-left: 16px;
  font-size: 15px; line-height: 1.75; color: var(--text-primary);
}
.price-examples dt::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.price-examples dd {
  margin: 2px 0 14px 16px; padding-left: 14px;
  border-left: 2px solid var(--line);
  font-family: var(--font-en); font-size: 16px; font-weight: 700;
  color: var(--bg-dark); font-feature-settings: "tnum";
}
.price-examples dd::before { content: "→ "; color: var(--text-secondary); font-weight: 500; }
.price-examples dd:last-child { margin-bottom: 0; }

/* 料金：セクション見出し */
#pricing .section-head { max-width: 760px; margin-left: auto; margin-right: auto; }

/* 料金：カード下端の帯（2026-08-08。旧 .pricing-fold と .pricing-detail を置き換え）。
   詳細は「別のカード」ではなく「そのカードの中」で開く。カードの外に解説ブロックを戻さないこと（README §1.13）。
   3枚とも帯を1本ずつ持たせて高さを揃えること——無料相談は折りたたみではなくフォームへのリンク（.price-card__foot） */
.price-card__fold,
.price-card__foot {
  /* width は指定しないこと。width:100% を付けると幅がカードの内容ボックスに固定され、
     負のマージンで左へずれるだけになって右端が20px足りなくなる（開閉マークの位置がずれる）。
     align-self: stretch と左右の負マージンだけで、カードの罫線から罫線までいっぱいに広がる */
  align-self: stretch;
  margin: 18px -20px -24px; border-top: 1px solid var(--line);
  border-radius: 0 0 15px 15px; text-align: left;
}
.price-card--free .price-card__fold,
.price-card--free .price-card__foot { border-top-color: rgba(65, 88, 162, 0.25); }
/* 無料相談カードの帯。.btn を付けないこと——main.js が main .btn[data-cta] を監視して固定CTAバーを
   引っ込めるため、ボタンにするとモバイルで既存バーが消える。セクション末尾の主CTAとも競合させない（README §1.13-1） */
.price-card__foot {
  display: block; padding: 14px 20px;
  font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--accent-deep);
}
.price-card__foot::after { content: "\2192"; margin-left: 6px; }
/* summary の中身は必ず1つの span で包むこと。flex の直下に地の文と <strong> を並べると、
   それぞれが別のフレックスアイテムになって語のあいだが開く（金額を3つ並べる summary で破綻した） */
.price-card__fold > summary {
  position: relative; display: flex; align-items: center;
  /* 右42px→38px（2026-08-08）。summary を13px→15pxに上げた分、ラベルの使える幅を確保する。
     ＋/− マーカーは right:18px・字幅約13px なので、38pxでも重ならない */
  padding: 14px 38px 14px 20px;
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--accent-deep);
}
.price-card__fold > summary::-webkit-details-marker { display: none; }
.price-card__fold > summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 21px; font-weight: 500;
}
.price-card__fold[open] > summary::after { content: "−"; }
.price-card__fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.price-card__fold > summary strong { font-family: var(--font-en); white-space: nowrap; }
.price-card__fold-body { padding: 4px 20px 22px; font-size: 15px; }
.price-card__fold-body > p { margin-bottom: 12px; color: var(--text-secondary); }
.price-card__fold-body > h4 { margin: 20px 0 10px; font-size: 16px; color: var(--text-primary); }
.price-card__fold-body .caption { margin-bottom: 8px; }
/* カード幅では2列に組めない。#implementation の「お渡しするもの」と #continuous-support の範囲を1列に戻す */
.price-card__fold-body .included-list,
.price-card__fold-body .scope-list { grid-template-columns: 1fr; }
.price-card__note { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg-secondary); font-size: 14px; color: var(--text-secondary); }
/* スポット改修（2026-08-08新設）。継続改善サポートのカードの折りたたみ内に置く。
   地色・枠線・影を与えないこと——直前の .price-card__note が地色を持つため、ここも塗ると
   ブロックが2つ重なって「継続より先に見せている」形になる。区切りは上罫線1本と余白だけ。
   弱さはタイポグラフィが担う（見出し14px 副次色／価格16px／本文15px 副次色）。README §1.13-4 */
.spot-repair { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.spot-repair__lead { font-size: 14px; font-weight: 700; color: var(--text-secondary); letter-spacing: .04em; }
.spot-repair__price { margin-top: 4px; font-size: 16px; }
.spot-repair__body { margin-top: 4px; font-size: 15px; color: var(--text-secondary); }

.pricing-final-cta { margin-top: 34px; }

/* ---------- ご依頼の流れ（タイムライン） ---------- */
/* 2層構成（2026-08-11・README §1.12-16）。
   .process        ＝ 上段。無料相談ブロックのみ。第一読者（経営者）の判断に要る分
   .process-final-cta ＝ 上段直後のCTA。セクション末尾へ戻さないこと
   .process-later  ＝ 下段。ご契約後の工程（診断・開発の2ブロック）。第二読者（部門長）の参照情報
   縦積みを崩さないこと（README §1.12-1） */
.process { max-width: 720px; margin: 0 auto; }
/* カード体裁（枠線＋角丸＋白地＋影）は 2026-08-07 に廃止。工程が8つ縦に並ぶ長いカードは、
   同じ本文量でも中身の密度を上げて見せていた。ブロックの区切りは余白で足りる。復活させないこと（README §1.12-1）。
   Process 内で唯一カードになるのは .process-outcome（工程の外にある付随ブロック） */
.process-block { display: block; padding: 0; }
.process-block + .process-block { margin-top: 36px; }
/* 無料相談ブロックは「薄い緑の帯」。枠線・角丸・影は持たせないこと——持たせると開発ブロックと同格のカードが
   2枚並び、順番に進む前後の工程が「2つの選択肢」に見える（README §1.12-1）。
   margin-inline の負値と同値の padding で、地色は帯として広がりつつ工程の左端は開発ブロックと揃う */
.process-block--free {
  background: rgba(14, 159, 110, 0.05);
  margin-inline: -20px; padding: 20px;
}
.process-block--free .step:last-of-type { padding-bottom: 16px; }
/* 下段（ご契約後の工程）。.process と同じ max-width: 720px を持たせること——工程の左端が上段とずれる。
   従属は「上罫線＋副次色の小さめラベル＋ブロック見出し20px」が担う。<details> で折りたたまないこと
   （読まれない工程が出る）。工程本文（16px）以下は下げないこと（§1.17。想定読者は老眼世代） */
.process-later { max-width: 720px; margin: 40px auto 0; padding-top: 28px; border-top: 1px solid var(--line); }
.process-later__title { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--text-secondary); }
.process-later__lead { margin: 8px 0 28px; font-size: 15px; color: var(--text-secondary); }
/* .process-route-note（2枚組の条件カード）は 2026-08-11 に廃止。復活させないこと——上段の直後に
   二者択一のカードを置くと、無料相談の前に読み手がサービスを選ぶ図に見えるが、実際に選ぶのは無料相談のあと。
   ルートの説明は .process-later__lead の1文が持つ（README §1.12-16） */
/* 開発ブロックの左罫線（4px solid var(--accent)）は 2026-08-01 に削除。
   元は .process-route--main / --alt の2経路を色で区別する装置で、2026-07-27に経路が1本になった時点で
   区別する相手が消えていた。加えて、カード外周1px＋左端4px＋内側の縦タイムライン2pxで左側の線要素が過密になり、
   太さの違う罫線と border-radius:14px が角に三角のにじみを作っていた。復活させないこと（README §1.12-1） */
.process-block__head { margin-bottom: 18px; }
.process-block--free .process-block__head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px;
}
/* 見出しの階調（README §1.12-14）。2026-08-11の2層化で上段と下段に分かれました。
     上段（無料相談）  ブロック22px → 工程18px → 本文16px
     下段（ご契約後）  ブロック20px → 工程18px → 本文16px → 3択見出し16px（副次色）→ 3択本文15px
   下段のブロック見出しだけ 22→20px に落としてあります。上段に対する従属を字面で示すためで、
   最上段の差はここだけ2pxです（他は4px→2px→0→1px）。以前は16/17・15・14・15pxでほぼ差がなく階層が
   読めませんでした。2026-08-08の底上げでは 20/16/14/14/13 から差を保ったまま全体を持ち上げています。
   下だけ上げて上を据え置かないこと——差が1pxずつになり、階層が読めなかった状態に戻ります。
   下段の20pxを詰めて18pxにしないこと——工程タイトルと同値になり、ブロックの区切りが消えます */
.process-block__head h3 { font-size: 22px; font-weight: 700; }
.process-block__name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.process-block__name h4 { font-size: 20px; font-weight: 700; }
/* 支払いのリード文（.process-block__lead）は 2026-08-07 に削除。タイミングは STEP 5・9 が図の上で示し、
   契約条件の正本は見積書・契約書が担う。Process に条件の説明文を書き戻さないこと
   （04正本 A-5・README §1.12-10） */
/* 条件ラベル（.process-cond / --main / --alt）は 2026-07-27 に削除。工程の頭に「そのまま開発に進む場合」の
   ような条件を付けると、読み手はそのブロック自体が例外経路だと考える。ルートの説明は
   .process-later__lead の1文が持つ。復活させないこと（README §1.12-2・16） */
.process-free-end {
  padding-top: 14px;
  border-top: 1px solid rgba(14, 159, 110, 0.25);
  font-size: 15px; color: var(--text-secondary);
}
.process-free-end strong { color: var(--good-deep); font-size: 16px; font-weight: 700; }
/* 分岐UI（.process-fork）は 2026-07-27 に削除。経路が1本になった。復活させないこと（README §1.12-2） */
/* 有料タグは中立グレーのまま。無料相談ブロックの「無料」タグとの対比で、どこから費用が発生するかを示す（README §1.12-10） */
.paid-tag {
  display: inline-block; vertical-align: 1px;
  padding: 2px 9px; border-radius: 999px;
  background: #E7EEF6; color: #4A5A75;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
}
/* 終点ボックス（.process-terminus）と開発への継続注記（.process-continue）は 2026-07-27 に削除。
   復活させないこと（README §1.12-5）——診断の終点は .process-outcome の2択が担っており、
   開発への合流はその第2項目の「STEP 4のお見積もりから進みます。」が1行で書く。
   専用のボックスを足すと、合流が「診断の主たる出口」に見え、開発契約が既定路線に読める */
.process-block__link {
  display: inline-block; margin-top: 16px;
  font-size: 15px; font-weight: 700; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
/* 無料ブロック末尾の副導線。ボタンにしないこと（README §1.11／§1.12-12）。
   .btn を付けると main.js の固定CTAバー抑制ロジック（main .btn[data-cta]）に拾われ、モバイルでバーが消える */
/* 緑地の上に乗るリンク。--good（白地に対し 3.39:1）ではなく --good-deep を使う */
.process-block__link--free { margin-top: 12px; color: var(--good-deep); }
/* 2026-08-01に上罫線1本へ変更（理由：外側の .process-block がカードで、カード・イン・カードになっていた）。
   2026-08-07に外側のカードを廃止したことでその理由が消えたため、カード体裁へ戻した。Process 唯一のカード。
   「STEP 10より弱い組みにする」（§1.12-8）は次の3点で守ること——地色を敷かない／枠線は中立の var(--line)
   （--accent・--good を使わない）／box-shadow を付けない。開発ブロックが影を失った以上、ここだけ影があると
   ページ内で最も強い要素になる。弱さはタイポグラフィ（h4 16px・本文15px）が担い、枠線は「工程の外にある
   付随ブロック」という位置づけだけを示す */
.process-outcome {
  margin-top: 28px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 14px;
}
/* .process-later（h3）＞ ブロック見出し（h4）＞ ここ、の順で h5。見出し階層を飛ばさない
   （2026-08-11の2層化で1段深くなった）。工程タイトル（18px）より弱く、ただしこのブロックの
   本文（15px）より小さくしないこと——「進め方は選べる」は重要な安心材料で、
   注釈のように見せない（README §1.12-8） */
.process-outcome > h5 {
  margin: 0 0 14px;
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-secondary);
}
.process-outcome li { padding: 12px 0 0; }
.process-outcome li + li { margin-top: 12px; border-top: 1px solid var(--line); }
.process-outcome strong { display: block; margin-bottom: 3px; font-size: 16px; }
.process-outcome span { display: block; font-size: 15px; color: var(--text-secondary); }
/* 2026-08-11に上段（無料相談ブロック）の直後へ移動。セクション末尾へ戻さないこと——
   戻すと、押すまでに契約後の13工程を読み切る必要が生まれる（README §1.12-16） */
.process-final-cta { margin-top: 34px; }
/* 白抜き文字のため --good ではなく --good-deep（--good は白文字に対し 3.39:1 で AA 未達） */
.free-tag {
  font-size: 12px; font-weight: 700; color: #fff; background: var(--good-deep);
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.05em;
}
/* .free-tag--inline は 2026-08-08 に廃止。工程内の無償は本文の語が示す（README §1.12-6）。
   .free-tag 本体は無料相談ブロックの見出しで使用中 */
.step { display: flex; gap: 16px; padding: 0 0 24px; position: relative; }
.step::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 0;
  width: 2px; background: var(--line);
}
.step:last-child::before { display: none; }
/* .process-outcome が後続するため :last-child が効かないステップに付ける */
.step--last::before { display: none; }
/* 番号マーカーは費用状態の補助表示（2026-08-01）。緑＝契約前で費用が一切発生しない工程（無料相談ブロックの
   STEP 1〜3のみ）、濃紺＝実際の支払いタイミング、白＝契約後のそれ以外の工程。以前は全て --accent（青）で、
   支払いの有無と無関係だった。
   緑の定義は 2026-08-08 に「その工程で追加の支払いが発生しない」から上記へ変更し、STEP 10 を白にした。
   旧定義に戻さないこと——その理屈は支払いの発生しない STEP 4・6・7・8 にも及び、緑が濃紺以外へ広がる。
   縦線（.step::before）は時系列のみを表し、費用状態では色分けしないこと——
   1つの情報に2つの視覚表現を与えると規則が読み取れなくなる（README §1.12-14）。
   円は 32px 固定。box-sizing: border-box が全要素に効いているため2px枠を足しても外形は変わらず、
   縦線（left:15px・幅2px＝中心16px）と円の中心が揃う */
.step .no {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-strong); color: var(--text-primary);
  font-family: var(--font-en); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step--no-charge .no { background: var(--good-deep); border-color: var(--good-deep); color: #fff; }
.step--pay .no { background: var(--bg-dark); border-color: var(--bg-dark); color: #fff; }
/* 下段（診断・開発）の工程は通し番号を持たない（README §1.12-3）。外形は上段の番号円と同じ 32px・2px枠の
   ままにすること——小さくすると有料の工程が「小さい寄り道」に見える。外形が同じなので縦線（left:15px）と
   .txt の左端は無調整で上段と揃う。
   中央の点を外して空の円にしないこと。599px以下のセルフチェックの未選択ラジオ
   （20px・2px solid var(--line-strong) の白い空円）と同じ見た目のレシピになり、チェックボックスに読める */
.step--unnumbered .no::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-secondary);
}
/* 支払い工程（濃紺の塗り）の上では点を白にする。--text-secondary のままだと濃紺に沈んで点が消え、
   「実際の支払いタイミング」を示す唯一のマーカーが読めなくなる（README §1.12-14） */
.step--unnumbered.step--pay .no::after { background: #fff; }
/* 工程タイトル。ブロック見出し22px と本文16px のあいだの18pxを保つこと（上の階調コメント参照） */
.step .txt strong { display: block; font-size: 18px; margin-bottom: 2px; }
.step .txt p { font-size: 16px; color: var(--text-secondary); }
/* 記号の工程は Process から消えている。復活させないこと（README §1.12-3）——
   .step--sub（廃止した設計相談のA・B・C）は 2026-07-27 に、診断ブロックの D1〜D3 は 2026-08-11 に削除。
   D＝Diagnosis の頭文字だったが、ページのどこにも意味が書かれておらず、しかも参照が1つも無かった。
   「診断1」等の日本語ラベルにもしないこと（円は 32px・--font-en・16px 固定で入らないうえ、
   真上のブロック見出しと合わせて1ブロックで「診断」を4回読ませる）。診断の3工程は .step--unnumbered */
@media (max-width: 599px) {
  /* .process-block--free の margin-inline は -20px のまま（.container の padding と同値）。
     詰めると帯が画面端に届かず、中途半端な内寄せに見える */
  .process-outcome { margin-top: 24px; padding: 18px 16px; }
}

/* ---------- ご依頼の流れ／ルート図（.route-map。2026-08-11新設・README §1.12-17） ----------
   縦のタイムライン1本では図に出せない「分岐」と「診断→開発の合流」だけを持つ図。
   工程名は1つも持たない——持たせた時点で工程の正本が2つになる。
   掲載位置は下段（.process-later）の入口。セクション最上部・CTAより前へ移動させないこと（§1.12-0・2）。
   ノード2種（.route-map__start / .route-map__node）だけが枠を持つ。ルート全体を囲んでカードにしないこと——
   Process 内のコンテンツカードは .process-outcome だけという規律に触れる（§1.12-1）。
   色は既存トークンのみ。本流のコネクタ＝--accent、合流＝--line-strong の点線。琥珀（--alt）は復活させないこと。
   文字サイズは全て14px以上（§1.17。12pxは既存の .paid-tag の再利用で件数は増えない） */
.route-map { --route-map-center: clamp(96px, 32%, 112px); margin: 0 0 40px; }
/* ノードの共通レシピ。.route-map__start は .process-block--free と同じ緑（地色 5%・罫線 25%）で、
   「無料相談＝契約前で費用が一切発生しない」という §1.12-14 の色の定義に一致させている */
.route-map__start,
.route-map__node {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  text-align: center;
}
.route-map__start {
  padding: 14px 16px;
  background: rgba(14, 159, 110, 0.05); border-color: rgba(14, 159, 110, 0.25);
}
.route-map__node { padding: 12px 6px; }
/* ブロック見出し（h4・20px）より小さくすること。図は下の工程列に従属する参照情報で、
   同じ大きさにすると図が本体に見える（§1.12-16 の従属の考え方） */
.route-map__name { display: block; font-size: 17px; font-weight: 700; line-height: 1.5; text-wrap: balance; }
.route-map__node .route-map__name { font-size: 15px; }
.route-map__node .paid-tag { display: inline-block; margin-top: 8px; }

/* 全画面幅でPC版と同じ「左右への分岐＋中央の合流」を使う。
   スマホでも縦積みにしないこと——診断→開発の1本の必須ルートに見えるため。 */
.route-map__branch {
  position: relative; padding: 16px calc(50% + 12px) 0 0;
  font-size: 15px; color: var(--text-secondary);
}
/* 無料相談カード中央から分岐バーまで下りる幹 */
.route-map__branch::before {
  content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0;
  width: 2px; background: var(--accent);
}
.route-map__routes {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) var(--route-map-center) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  padding-top: 26px;
}
/* 左右カードの中心を結ぶ分岐バー。中央列が可変でも中心に合う計算式を使う */
.route-map__routes::before {
  content: ""; position: absolute; top: 0;
  left: calc((100% - var(--route-map-center)) / 4);
  right: calc((100% - var(--route-map-center)) / 4);
  height: 2px; background: var(--accent);
}
.route-map__route {
  display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 0;
  position: relative;
}
.route-map__route:first-of-type { grid-column: 1; }
.route-map__route:last-of-type { grid-column: 3; }
/* 分岐バーから各ルートへ落ちる線と入口の三角 */
.route-map__route::before {
  content: ""; position: absolute; top: -26px; left: calc(50% - 1px);
  width: 2px; height: 16px; background: var(--accent);
}
.route-map__route::after {
  content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--accent);
}
.route-map__cond {
  position: relative; margin-bottom: 10px;
  text-align: center; font-size: 15px; line-height: 1.6;
  color: var(--text-secondary); text-wrap: balance;
}
/* 終点。診断側と開発側で同じ組みにすること——弱くすると診断が「開発への通過点」に見え、
   Why Us 列02「診断後に開発を契約する義務はありません」と視覚的に矛盾する（04正本 A-18） */
.route-map__end {
  position: relative; padding-top: 14px;
  text-align: center; font-size: 15px; color: var(--text-secondary);
}
.route-map__end::before {
  content: ""; position: absolute; top: 0; left: calc(50% - 1px);
  width: 2px; height: 10px; background: var(--line-strong);
}
/* 合流。本流（--accent の実線＋三角）より弱い点線・副次色を保つこと。
   専用のボックスにしないこと——合流が「診断の主たる出口」に見え、開発契約が既定路線に読める
   （§1.12-5・04正本 A-18）。「別料金・別契約」はここに書かない。診断ブロックの2択が正本。
   2026-08-11にオーナー指摘（「文字が見にくい」）で3点直した。14pxへ戻さないこと・地色を外さないこと——
   ①14px→15px（§1.17 の下限ぎりぎりの語を、図の中で最も読みにくい位置に置いていた。
   従属は点線・副次色・ノード名17pxとの差が担っており、1pxで買っていたものは無い）
   ②地色（--bg-secondary）の小さな面に載せた（白地に浮いた副次色の小さな文字は、
   図の中では線とも文字ともつかない灰色の塊に見える。地色があるとラベルとして読める）
   ③中央列を112px→172pxに広げ、2行で読点の位置に折り返すようにした（旧幅は
   「診断のあと、開/発をご依頼の場/合」と語の途中で3行に割れていた） */
.route-map__merge {
  position: absolute; grid-column: 2 / 3; grid-row: 2 / 3;
  inset: 0; margin: 0; padding: 0 4px;
  text-align: center; font-size: 15px; line-height: 1.6; color: var(--text-secondary);
}
.route-map__merge > span {
  position: absolute; left: 4px; right: 4px; bottom: calc(50% + 7px);
  display: inline-block; padding: 4px;
  background: var(--bg-secondary); border-radius: 10px;
}
.route-map__merge > span > span { display: inline; }
.route-map__merge::before {
  content: ""; position: absolute; top: 50%; left: 2px; right: 6px;
  height: 0; border-top: 2px dashed var(--line-strong);
}
.route-map__merge::after {
  content: ""; position: absolute; top: calc(50% - 5px); right: 0;
  border-left: 9px solid var(--line-strong);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
/* AI顧問の注記（2026-08-16新設。§1.12-18・04正本 A-24）。
   図の「外」の要素。.route-map の中（グリッド）へ入れないこと——3本目のルートに見える。
   枠線・角丸・地色を与えないこと：Process 内でカードになるのは .process-outcome だけという
   規律（§1.12-1）に触れ、かつ枠を持った瞬間に診断・開発のブロックと同格の商品ブロックに見える。
   .route-map が持つ margin-bottom: 40px との合計80pxが「図の一部ではない」ことの唯一の手がかり。
   この間隔を詰めないこと。中央寄せにしないこと——図（中央寄せ）の続きに見える */
.route-map__aside {
  max-width: 660px; margin: 0 0 40px;
  font-size: 15px; color: var(--text-secondary);
}
.route-map__aside a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 800px は .service-paths・.reason-flow・body の既存境界。新しい境界を作らないこと（§1.17） */
@media (min-width: 800px) {
  .route-map { --route-map-center: 172px; }
  .route-map__branch { padding: 18px 0 0; }
  .route-map__node { padding: 14px 16px; }
  .route-map__node .route-map__name { font-size: 17px; }
  .route-map__merge > span {
    position: absolute; left: 6px; right: 6px; bottom: calc(50% + 7px);
    padding: 5px 8px;
  }
  .route-map__merge > span > span { display: inline-block; }
}
/* subgrid 非対応環境のフォールバック（.reason-worry と同じ手法）。
   最小高さで左右をそろえる。39px ＝ 条件1行（15px × 1.9）＋ margin-bottom 10px、
   92px ＝ ノード1行（17px × 1.5）＋ タグ（22px＋margin-top 8px）＋ padding 28px。
   条件名・サービス名が2行になる文言へ変えたら、両方とも計算し直すこと */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 800px) {
    .route-map__cond { min-height: 39px; }
    .route-map__node { min-height: 92px; }
  }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 44px; }
.faq-category { min-width: 0; }
.faq-category__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.faq-category__head > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-deep); font-family: var(--font-en); font-size: 12px; font-weight: 700;
}
.faq-category__head h3 { font-size: 19px; line-height: 1.5; }
.faq-category__items { background: #fff; border-radius: 14px; padding: 0 18px; box-shadow: var(--shadow-card); }
/* .faq-category--kit は 2026-08-08 に削除。prompts.html のFAQが通常の .faq-category に統一され、
   有料キット時代の弱い組みの変種が使われなくなっていました */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 20px 40px 20px 4px; position: relative;
  font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.7;
}
@media (min-width: 800px) { .faq-q { font-size: 17px; padding: 24px 48px 24px 4px; } }
.faq-q::before { content: "Q."; color: var(--accent); font-family: var(--font-en); font-weight: 700; margin-right: 10px; }
.faq-q::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.25s;
}
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
.faq-item.is-open .faq-q::after { transform: translateY(-30%) rotate(225deg); }
/* 答えは問いより1段小さくすること（Q 16/17px に対して A 15/16px）。同値にすると、
   閉じているときに縦に並ぶ問いの列と、開いた答えの区別が太さだけになる */
.faq-a { display: none; padding: 0 4px 24px; font-size: 15px; color: var(--text-secondary); }
@media (min-width: 800px) { .faq-a { font-size: 16px; } }
.faq-item.is-open .faq-a { display: block; }
@media (min-width: 800px) {
  .faq-list { gap: 56px; }
  .faq-category__head h3 { font-size: 21px; }
  .faq-category__items { padding: 0 26px; }
}

/* ---------- クロージング ---------- */
.closing { text-align: center; }
.closing h2 { font-size: 26px; font-weight: 700; line-height: 1.6; }
@media (min-width: 800px) { .closing h2 { font-size: 34px; } }
.closing p { margin-top: 20px; color: rgba(255, 255, 255, 0.85); }
.closing .cta-unit { margin: 32px auto 0; }
.closing .note { margin-top: 24px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }

/* ---------- フッター ----------
   2026-08-12：濃紺のフッターをやめ、淡青の地へ。**濃紺へ戻さないこと。** 理由は2つ。
   (1) index.html では直前のクロージングが .section--dark で、同じ濃紺のフッターが続くと
       2つの面が1つの黒い塊に見え、最後のCTAの重さが消えていた。暗いのはCTAだけにする
   (2) 濃紺の地にロゴを置くために、ロゴを白い角丸の箱で囲んでいた。あれは配色の
       つじつま合わせで、フッターの中でロゴだけが別のサイトから貼られたように見えていた。
       地が明るくなれば箱は不要になり、ロゴをそのまま置ける
   タグラインはHTMLの文字にした。ロックアップSVGのアウトライン化された文字を使うのをやめたので、
   本文と同じ書体で組まれ、拡大しても粗くならず、選択・検索もできる */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--line);
  color: var(--text-secondary);
  padding: 56px 0 32px;
  font-size: 15px;
}
@media (min-width: 800px) { .site-footer { padding: 72px 0 32px; } }
.site-footer__main { display: grid; gap: 40px; }
@media (min-width: 800px) {
  .site-footer__main { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: start; }
}
.site-footer__brand-link { display: inline-block; max-width: 100%; text-decoration: none; }
.site-footer__brand-link:hover { text-decoration: none; }
.site-footer__brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
/* ヘッダーと同じ縦横比6.518を守ること（README §ブランドロゴ） */
.site-footer__brand-link img { display: block; width: 202px; height: 31px; }
@media (min-width: 600px) { .site-footer__brand-link img { width: 228px; height: 35px; } }
.site-footer__tagline {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--aqua);
  font-size: 17px; font-weight: 700; line-height: 1.6;
  color: var(--text-primary);
}
.site-footer__rep { margin-top: 16px; font-size: 14px; max-width: 30em; }

.footer-nav { display: grid; gap: 32px; }
@media (min-width: 520px) { .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
@media (min-width: 800px) { .footer-nav { gap: 64px; } }
.footer-nav__title {
  font-family: var(--font-en);
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.footer-nav ul { display: grid; gap: 4px; }
.footer-nav a {
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  color: var(--text-primary);
  white-space: nowrap;
}
.footer-nav a:hover { color: var(--accent); text-decoration: none; }
.footer-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.site-footer__bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.copyright { font-size: 14px; color: var(--text-secondary); }

/* ---------- ページヘッダー（下層） ---------- */
.page-head { padding: 56px 0 0; }
/* 下層ページの本文セクション（page-head の直後）。インライン style を置かない */
.section--after-head { padding-top: 48px; }
.mt-0 { margin-top: 0; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
@media (min-width: 800px) { .page-head { padding: 80px 0 0; } }
.page-head h1 { font-size: 28px; font-weight: 700; line-height: 1.5; }
@media (min-width: 800px) { .page-head h1 { font-size: 36px; } }
.page-head .lead { margin-top: 16px; color: var(--text-secondary); }
/* estimate.html だけ、直後の .form-section が地色を持つ（2026-08-11）。下余白が0のままだと
   リード文の行末で白から地色へ切り替わり、文字が境界に貼り付いて見える。
   .page-head は7ページが共有しているので :has() でこのページだけに効かせること */
.page-head:has(+ .form-section) { padding-bottom: 36px; }

/* ---------- フォーム ---------- */
/* 2026-08-11：地色を敷き、説明ボックスと入力欄を2枚の白いカードに分けた（オーナー指摘「安っぽい」）。
   旧版は .page-head から送信ボタンまで全部が白一色の上に置かれ、入力欄の細い罫線だけが
   フォームの輪郭を示していた。**`.form-section` を白へ戻さないこと**——戻すとカードの縁が
   地と同化し、2枚に分けた意味が消える。
   `.form-section` と `.estimate-form` は estimate.html 専用（他ページは使っていない）。 */
.form-section { padding: 40px 0 80px; background: var(--bg-secondary); }
@media (min-width: 800px) { .form-section { padding: 56px 0 128px; } }
.estimate-form {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 26px 22px;
}
@media (min-width: 800px) { .estimate-form { padding: 40px 34px; } }
.form-field { margin-bottom: 30px; }
.form-label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
/* 既定はラベル直下（入力欄の前）に置く用。負のmarginはラベルとの間を詰めるためのもので、
   入力欄の「後ろ」に置くと入力欄へ食い込む。後置きする場合は下の2つの上書きが要る */
.form-field__help { margin: -2px 0 12px; }
.form-input + .form-field__help { margin: 8px 0 0; }
.form-label .req, .form-label .opt {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 4px; margin-left: 8px; vertical-align: 2px;
}
.form-label .req { color: #fff; background: #C2410C; }
.form-label .opt { color: var(--text-secondary); background: var(--bg-secondary); }
/* 入力欄はカード（白）の上に載るので、白地＋細罫だと面が沈んで見えない。ごく淡い地色を敷き、
   フォーカスで白へ抜けることで「いま入力している欄」を面で示す（2026-08-11） */
.form-input, .form-textarea {
  width: 100%; padding: 14px 16px; font-size: 17px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: #FBFDFE;
  color: var(--text-primary);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.form-input::placeholder, .form-textarea::placeholder { color: #78889F; }
.form-input:hover, .form-textarea:hover { border-color: var(--line-strong); }
.form-input:focus, .form-textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
  border-color: var(--accent); background: #fff;
}
.form-textarea { min-height: 140px; resize: vertical; line-height: 1.8; }
.form-error { display: none; font-size: 15px; color: #C2410C; margin-top: 6px; }
.form-field.has-error .form-error { display: block; }
.form-field.has-error .form-input, .form-field.has-error .form-textarea { border-color: #C2410C; }

/* 選択カード */
.select-cards { display: grid; gap: 10px; }
.select-card { position: relative; }
.select-card input { position: absolute; opacity: 0; pointer-events: none; }
.select-card label {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 16px; line-height: 1.6;
  transition: border-color 0.15s, background-color 0.15s;
}
.select-card label:hover { border-color: var(--accent); }
.select-card input:checked + label { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.select-card input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.select-card .t { font-weight: 700; display: block; }
.select-card .d { font-size: 15px; color: var(--text-secondary); display: block; margin-top: 2px; }

/* 選択チップ */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip label {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: 16px; line-height: 1.4;
  transition: all 0.15s;
}
.chip label:hover { border-color: var(--accent); }
.chip input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.chip input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
/* .chip-note は予算7択の帯別注記と、セルフチェック結果を補足欄へ転記したときの通知の2つが
   使っていた。2026-08-11に予算設問を廃止（04正本 A-4-9）したが、**転記通知が現役なので消さないこと**
   ——`main.js` が `p.chip-note.is-visible` を生成して補足欄の下に差し込む。
   名前がチップ由来なのは経緯であって、チップ専用の意味ではない。
   **`.chips` / `.chip` も削除しないこと**——index.html の1分セルフチェック6問が使っている */
.chip-note {
  display: none; margin-top: 12px; padding: 12px 16px; border-radius: 10px;
  background: var(--bg-secondary); font-size: 15px; color: var(--text-secondary);
}
.chip-note.is-visible { display: block; }

/* 相談情報の必須項目の終わりを示す区切り（estimate.html）。必須6項目のあとに任意が3つ続く。
   プライバシーポリシーへの同意チェックは置かない（2026-08-29廃止。利用目的は送信ボタン上の1文で明示する）。
   「必須入力は終わった」と伝えて残りの長さを負担に見せない。
   任意の電話番号欄をこの区切りより上へ動かさないこと（04正本 A-4-12） */
.form-optional-head, .form-group-head {
  display: flex; align-items: center; gap: 14px;
  margin: 44px 0 28px; font-size: 15px; font-weight: 700;
  color: var(--text-secondary); white-space: nowrap;
}
.form-optional-head::before, .form-optional-head::after,
.form-group-head::before, .form-group-head::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
/* 「ご連絡先」の区切り（estimate.html）。任意の区切りと同じ見た目で、相談内容と連絡先の切れ目を1本で示す。
   フォーム先頭に「ご相談内容」の見出しを置かないこと——直下のラベル「ご相談の種類」と語が重なり、
   最初の入力欄までの文字量が増える（2026-08-29） */

.form-submit { margin-top: 40px; text-align: center; }
.form-submit .caption { display: block; margin-bottom: 14px; }
.form-submit .btn { width: 100%; }
@media (min-width: 600px) { .form-submit .btn { width: auto; min-width: 320px; } }
/* 電話番号（2026-08-11新設・04正本 A-20）。送信ボタンの下に置き、上罫線1本＋余白だけで分けること。
   地色・枠線・影を与えないこと——与えると送信ボタンと同格の2つ目のCTAに見え、主導線がフォームで
   あるという序列が崩れる。弱さはタイポグラフィが担う（番号20px ＞ 説明15px）。
   12px以下を足さないこと。§1.17「下限14pxの例外」は13件で、増やすとREADME本文とチェックリストの
   両方を直す必要が出る（この節は最小15px） */
.form-phone { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-phone__lead { font-size: 15px; color: var(--text-secondary); }
.form-phone__num { margin-top: 6px; display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.form-phone__num a {
  font-family: var(--font-en); font-size: 20px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px;
}
.form-phone__num span { font-size: 15px; color: var(--text-secondary); }
.form-phone__note { margin-top: 8px; font-size: 15px; color: var(--text-secondary); }
.form-notice {
  display: none; margin-top: 16px; padding: 14px 16px; border-radius: 10px;
  background: #FEF3EB; color: #9A3412; font-size: 15px; text-align: left;
}
.form-notice.is-visible { display: block; }

/* チェック項目（任意のオンライン相談。プライバシーポリシー同意チェックは2026-08-29に廃止） */
.form-consent {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 16px; line-height: 1.7;
  transition: border-color 0.15s, background-color 0.15s;
}
.form-consent:hover { border-color: var(--accent); }
.form-consent input {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 4px;
  accent-color: var(--accent);
}
.form-consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-consent:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.form-field.has-error .form-consent { border-color: #C2410C; }
.form-consent + .form-field__help { margin: 8px 0 0; }

/* ---------- 下層ページ（プレーン記事） ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 21px; font-weight: 700; margin: 48px 0 16px; line-height: 1.6; }
@media (min-width: 800px) { .prose h2 { font-size: 26px; } }
.prose h3 { font-size: 17px; font-weight: 700; margin: 32px 0 12px; }
@media (min-width: 800px) { .prose h3 { font-size: 19px; } }
.prose p { margin-bottom: 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.prose ul li { list-style: disc; margin-bottom: 0.4em; }
.prose ol li { list-style: decimal; margin-bottom: 0.4em; }
.prose .tech-chips { margin: 0; padding: 0; list-style: none; }
.prose .tech-chips li { margin-bottom: 0; list-style: none; }
.prose .caption { margin-top: -0.6em; margin-bottom: 1.4em; }

/* チェックリスト
   2026-08-12、塗り面をゼロにしました。旧版は 18×18 の塗りつぶし角丸四角（--good）に白抜きの✓を載せ、
   さらに白いカード（1px罫＋角丸12px＋padding 24px）で囲っていました。フォーム部品の記号であり、
   読み物の中では玩具に見えます。estimate.html で 2026-08-11 に下した判断
   （塗りつぶしの丸 → 線のチェックへ落とし、緑は意味だけを担う）と同じ方向へ揃えたものです。
   塗り面・枠・背景を戻さないこと。使用は guide.html（4箇所）と tools.html（2箇所）で、
   tools.html では .tool-card の中に入るため、枠を持たせるとカードの二重入れ子になります */
.checklist { margin: 0 0 1.6em; }
.prose .checklist li { list-style: none; padding-left: 26px; position: relative; margin-bottom: 10px; font-size: 16px; }
.checklist li:last-child { margin-bottom: 0; }
.checklist li::after {
  content: ""; position: absolute; left: 1px; top: 7px; width: 11px; height: 6px;
  border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg);
}

/* 定義テーブル（運営者情報） */
/* 角丸は table 自身ではなくラッパー .table-scroll--framed に持たせる（table の border-radius+overflow:hidden はエンジン差がある） */
.table-scroll--framed { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 1.6em; }
.info-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.info-table th, .info-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }
.info-table th { width: 32%; background: var(--bg-secondary); font-weight: 700; font-size: 15px; }
@media (max-width: 599px) {
  .info-table th { width: 38%; }
}
/* 所在地（2026-08-20）。郵便番号は <br> で改行し、住居表示と建物名はそれぞれ塊で置く。
   td は760px幅でも458px、599px以下では viewport の62%弱しかなく、住居表示（約224px）が
   1行に入るのは約453px以上の画面だけ。inline-block にしておくと、入らないときだけ
   塊ごと次の行へ落ちるので、広い画面では2行・スマホでは3行になり、どの幅でも
   「北青山一丁」「アールキューブ青」のような語の途中では切れない。
   **nowrap にしないこと**——320px級では塊自体が td を超えるので、折り返せずに溢れる */
.info-table .addr-part { display: inline-block; }
/* guide.html 本文中の3つの表だけに当てる修飾（2026-08-12）。company.html の
   定義テーブルには当てないこと——あちらは項目数が少なく、外枠があるほうが「表」として読める。
   ガイドは §3 だけで13行あり、外枠＋角丸＋th の地色まで付くと塊に見えて読み進められません。
   3つの表すべてに当てること——1つだけ枠付きで残すと、同じページで表の作りが2種類に見えます。
   th を 46% にしているのは用途の文言が長く、32%では2〜3行に折り返すためです */
.info-table--article { margin-bottom: 1.6em; }
.info-table--article tr:first-child th, .info-table--article tr:first-child td { border-top: 1px solid var(--line); }
.info-table--article th { background: transparent; width: 46%; color: var(--text-primary); }
.info-table--article th, .info-table--article td { padding: 13px 14px 13px 0; }
.info-table--article tr:last-child th, .info-table--article tr:last-child td { border-bottom: 1px solid var(--line); }
@media (max-width: 599px) { .info-table--article th { width: 44%; } }

/* 記事末尾CTA */
.article-cta {
  margin-top: 64px; padding: 36px 28px; border-radius: 14px;
  background: var(--bg-secondary); text-align: center;
}
.article-cta p { margin-bottom: 20px; font-weight: 700; }

/* 無料ツールカード（tools.html） */
.tool-card {
  max-width: 900px; margin: 40px auto 0; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 32px 24px;
  box-shadow: var(--shadow-card);
}
.tool-card h2 { font-size: 21px; font-weight: 700; line-height: 1.6; margin: 8px 0 14px; }
.tool-card > p { margin-bottom: 16px; }
.tool-card__preview { margin: 24px 0; }
.tool-card__preview img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.tool-card__preview figcaption { margin-top: 8px; font-size: 14px; color: var(--text-secondary); }
.tool-card__lead { font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.tool-card .checklist li { list-style: none; padding-left: 30px; position: relative; margin-bottom: 10px; font-size: 16px; }
.tool-card .checklist li:last-child { margin-bottom: 0; }
.tool-card__meta { margin: 20px 0 24px; font-size: 15px; color: var(--text-secondary); }
.tool-card__next { margin-top: 24px; margin-bottom: 0; border-top: 1px solid var(--line); padding-top: 16px; font-size: 15px; color: var(--text-secondary); }
@media (min-width: 800px) {
  .tool-card { padding: 40px 44px; }
  .tool-card h2 { font-size: 26px; }
}

/* ============================================================
   v2 追加コンポーネント（写真・料金カード・装飾強化）
   ============================================================ */

/* 旧「eyebrowの下線装飾」（.section-head .eyebrow::after）は 2026-08-12 に削除。
   ラベルの下に敷く28pxの青い線で、新しい ::before のアクア線と役割が重複していた。
   加えて .eyebrow が display:flex になったことで、この ::after は下の行ではなく
   横並びの3つ目の要素になり、margin:auto が余白を全部吸ってラベルを左端へ押し出していた。
   **復活させないこと。** 線は ::before の1本だけにする */

/* カードのhoverリフト */
/* 旧 .service-step（2026-08-29 に CSS ごと削除済み）を復活させてここへ足さないこと。押せる要素に見え、CASESのカードと同じ挙動に戻る（README §1.16）。
   廃止した .service-card はここから外した。.plan-card と .guide-banner も 2026-08-08 に外している
   （どちらもCSSごと削除済み）。現在ホバーリフトを持つのは CASES のカードだけ */
.case-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(22, 38, 79, 0.12);
  }
}

/* 写真帯（セクション内のワイド写真） */
.photo-band {
  border-radius: 16px; overflow: hidden;
  margin: 0 0 40px;
  box-shadow: 0 8px 32px rgba(22, 38, 79, 0.12);
}
.photo-band img { width: 100%; height: 240px; object-fit: cover; }
@media (min-width: 800px) { .photo-band img { height: 340px; } }

/* ---------- 料金プランカード（規模別3プラン）は削除済み ---------- */
/* .plan-grid / .plan-card / .plan-card--featured / .plan-badge / .plan-name / .plan-scope /
   .plan-price / .plan-list / .plan-note / .pricing-help は 2026-08-08 に削除しました。

   **書き直さないこと。** これは `企画書/01_事業計画書.md` §4 が「再導入しないこと」と定めた
   月額2プラン／規模別3プランの構造そのもので、README §1.13-1 が禁じている「推奨マーク」も
   .plan-card--featured（アクセント色の2px枠）と .plan-badge として揃っていました。
   HTMLが無いだけの休眠状態だったため、数行書けば復活できてしまう状態だったのを解消したものです。

   現行の料金セクションは .price-cards（無料相談の入口バンド＋業務改善診断／AI／自動化システム開発／
   継続改善サポートの有料3枚）で、矢印コネクタが「選択肢」ではなく「順番」を示します。
   おすすめ表示・カードごとのCTAは作らないこと。**スポット改修のカードも作らないこと**——矢印が
   1本増えて「継続の次にスポット」という誤った順番になります（実際は継続の代わり）。
   README §1.13-1・§1.13-4 */

/* ROI簡易計算機。2026-08-10、折りたたみ機能を廃止して常時表示にした。
   22万円を社内で通すための材料なので、クリックを挟まないこと・
   カード（.price-card）の中に入れないこと（README §1.13） */
.roi-band {
  max-width: 900px; margin: 34px auto 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.roi-band__title {
  margin: 0; padding: 18px 8px;
  text-align: center;
  font-size: 16px; font-weight: 700; color: var(--accent-deep);
}
.roi-calc {
  max-width: 900px; margin: 48px auto 0;
  background: #fff; border: 2px solid var(--accent); border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(65, 88, 162, 0.1);
}
@media (min-width: 800px) { .roi-calc { padding: 36px 40px; } }
/* 帯の中では枠・影・地色を持たせない（.roi-calc は他ページでも使うため、基底は残す） */
.roi-band .roi-calc { margin: 0 auto; padding: 4px 0 30px; background: none; border: none; box-shadow: none; }
/* AI顧問の帯。2026-08-15に面（白）を与えた——それ以前は地色・角丸・影のいずれも持たず、
   上下1pxの罫線だけでセクションの地（--bg-secondary）に直接置かれていた。図と地が分離せず、
   しかも直後の .roi-band と max-width・margin・罫線・見出しの体裁が完全に同じだったため、
   商品の掲載ではなく「計算機の付属パーツ」に見えていた（オーナー指摘「背景と同化している」）。
   .service-path のコメント（このファイル上方）にある「セクションの地色と同じ帯は背景に溶ける」
   と同じ失敗である。

   角丸と影を与えないこと。カード（border-radius:16px ＋ --shadow-card）との違いはここが担保する。
   幅を絞らないこと（旧 max-width:900px）——白く塗ったうえで幅を絞ると「中央に浮いた白い箱」に
   なり、カードの文法に入る。コンテナ幅いっぱいに伸ばすことで帯として読め、900px のままの
   .roi-band とも一目で区別がつく。カードでないことの視覚的な根拠は、角丸・影が無いことと
   カード列より広いことの2つ（04正本 A-19・README §1.13） */
.advisor-band {
  margin: 34px 0 0;
  padding: 24px 20px 28px;
  background: var(--bg-primary);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.advisor-band__lead { margin: 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--accent-deep); }
.advisor-band__name { margin: 10px 0 0; text-align: center; font-size: 18px; font-weight: 700; }
.advisor-band__price { margin-left: 12px; font-size: 16px; font-weight: 700; }
/* 契約単位（2026-08-16新設。04正本 A-24）。価格カードの .price-card__per と同じレシピ——
   14px・font-weight: 500・--text-secondary。太字化・拡大をしないこと：2つ目の価格が立ち、
   月額22,000円と前払い66,000円が「同じ商品の2段階プラン」に見える（.price-card__per と同じ理由）。
   狭い幅で価格の下へ折り返してよいので inline-block にすること——インラインのままだと
   「／3か月単位・前払い」「66,000円」のように語の途中で割れる */
.advisor-band__term {
  display: inline-block; margin-left: 4px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
}
.advisor-band__body { max-width: 720px; margin: 12px auto 0; font-size: 15px; color: var(--text-secondary); }
.advisor-band__note { max-width: 720px; margin: 8px auto 0; font-size: 14px; color: var(--text-secondary); }
.roi-calc h3 { font-size: 21px; font-weight: 700; text-align: center; margin-bottom: 22px; }
.roi-inputs { display: grid; gap: 16px; margin-bottom: 24px; }
@media (min-width: 700px) { .roi-inputs { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.roi-inputs label { font-size: 15px; color: var(--text-secondary); font-weight: 500; }
.roi-field { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 15px; color: var(--text-primary); }
.roi-inputs input {
  width: 110px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font-en); font-size: 17px; font-weight: 600; color: var(--text-primary);
  font-feature-settings: "tnum";
}
.roi-inputs input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(65, 88, 162, 0.12); }
.roi-results { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; }
@media (min-width: 700px) { .roi-results { grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; } }
.roi-result { display: flex; flex-direction: column; gap: 4px; }
.roi-result .label { font-size: 14px; color: var(--text-secondary); }
.roi-result .value { font-family: var(--font-en); font-size: 28px; font-weight: 700; color: var(--good); font-feature-settings: "tnum"; }
@media (min-width: 700px) { .roi-result .value { font-size: 32px; } }
.roi-note { font-size: 14px; color: var(--text-secondary); margin-top: 18px; text-align: center; }

/* 1分セルフチェック */
/* padding をカスタムプロパティで持ち、結果パネル（.sc-result）の負マージンと機械的に一致させる。
   以前は両方に生値を書いて「ずらすな」とコメントで縛っていたが、手作業の同期は必ずずれる */
.selfcheck {
  --sc-pad-x: 16px;
  --sc-pad-b: 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 22px var(--sc-pad-x) var(--sc-pad-b);
  box-shadow: 0 10px 40px rgba(22, 38, 79, 0.08);
  overflow: hidden;
}
@media (min-width: 700px) {
  .selfcheck { --sc-pad-x: 36px; --sc-pad-b: 32px; padding: 32px var(--sc-pad-x) var(--sc-pad-b); }
}

/* 進捗バー */
.sc-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sc-progress__bar {
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--bg-secondary); overflow: hidden;
}
.sc-progress__bar span {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, #60B9D6 100%);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sc-progress__count {
  font-size: 14px; color: var(--text-secondary); white-space: nowrap;
  font-feature-settings: "tnum";
}
.sc-progress__count b { font-family: var(--font-en); font-size: 16px; color: var(--accent); }

/* **minmax(0, 1fr) を外さないこと。** 既定の auto トラックは子の min-content で下限が決まるため、
   white-space: nowrap を持つ子が1つあるだけでトラックがカード幅を超えて広がり、
   .selfcheck の overflow:hidden が全6問を無言で切り落とす（2026-08-09に .sc-divider で実際に発生）。
   スクロールバーが出ないので、実機で文字が消えるまで気づけない */
.sc-questions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: scq; }
.sc-q {
  list-style: none; counter-increment: scq;
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 12px;
  padding: 14px 10px; border-radius: 14px;
  border: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
@media (min-width: 700px) { .sc-q { padding: 16px 18px; } }
/* 番号バッジ（回答済みでチェックに変わる） */
.sc-q::before {
  content: counter(scq);
  grid-row: 1; grid-column: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 15px; font-weight: 700;
  color: var(--accent); border: 1.5px solid var(--accent);
  background: #fff;
  transition: background 0.2s, color 0.2s;
}
.sc-q.is-answered::before { content: "✓"; background: var(--accent); color: #fff; }
.sc-q .sc-text { grid-row: 1; grid-column: 2; align-self: center; font-size: 16px; font-weight: 500; line-height: 1.6; }
/* 選択肢：結合セグメントコントロール */
.sc-q .chips {
  grid-row: 2; grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr; gap: 4px;
  width: 100%;
  background: var(--bg-secondary);
  border-radius: 14px; padding: 4px;
}
@media (min-width: 600px) { .sc-q .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; } }
.sc-q .chip label {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 40px;
  padding: 8px;
  border: none; border-radius: 9px;
  background: transparent;
  text-align: center;
  font-size: 15px; line-height: 1.5; color: var(--text-secondary);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.sc-q .chip label:hover { background: #fff; color: var(--text-primary); }
.sc-q .chip input:checked + label {
  background: var(--accent); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(65, 88, 162, 0.35);
}
/* SPは3分割にできない（最長「一部当てはまる」7字を15pxで1/3幅に収めると14px下限を割る・§1.17）。
   縦積みのまま、薄グレー地に文字が乗るだけの状態をやめて1件ずつ白カード＋ラジオ丸にする */
@media (max-width: 599px) {
  .sc-q .chips { background: transparent; padding: 0; gap: 8px; }
  .sc-q .chip label {
    justify-content: flex-start; gap: 10px;
    min-height: 48px; padding: 10px 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    color: var(--text-primary); text-align: left;
    box-shadow: 0 1px 2px rgba(22, 38, 79, 0.04);
  }
  /* 未選択の輪は --line-strong。白地に対し3:1以上で WCAG 1.4.11（非テキストコントラスト）を満たす */
  .sc-q .chip label::before {
    content: ""; flex: 0 0 auto;
    width: 20px; height: 20px;
    border: 2px solid var(--line-strong); border-radius: 50%;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .sc-q .chip input:checked + label {
    background: var(--accent-soft); border-color: var(--accent);
    color: var(--accent-deep); font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  /* 内側の白い inset が塗りとの隙間になり、ラジオの「中黒」に見える */
  .sc-q .chip input:checked + label::before {
    border-color: var(--accent); background: var(--accent);
    box-shadow: inset 0 0 0 3px #fff;
  }
}
.sc-q.is-missing { border-color: var(--accent); background: rgba(65, 88, 162, 0.05); }
.sc-action { margin-top: 26px; text-align: center; }
.sc-hint { margin-top: 12px; font-size: 15px; color: var(--accent); }
/* **white-space: nowrap を戻さないこと。** この文は24字あり、14px＋字間0.08emだと
   min-content が約363px、左右の罫線と gap を足して約427px。SPのカード内側（約300px）に
   収まらず、親グリッドのトラックごと広げて全6問をクリップさせていた（2026-08-09修正） */
.sc-divider {
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.08em;
  margin: 12px 0 6px;
}
.sc-divider::before, .sc-divider::after {
  content: ""; flex: 1; height: 1px;
  background: var(--line); min-width: 20px;
}
/* SPは左右の罫線をやめ、上罫線＋左寄せの見出しにする。折り返しても形が崩れない */
@media (max-width: 599px) {
  .sc-divider {
    display: block;
    margin: 14px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    line-height: 1.6;
  }
  .sc-divider::before, .sc-divider::after { content: none; }
}

/* 結果パネル（診断書風・ネイビー）。
   左右と下をカードの padding ぶん食い出させて全面帯にする。値は .selfcheck が持つ
   --sc-pad-x / --sc-pad-b から導くので、padding を変えても手で合わせ直す必要はない */
.sc-result {
  margin: 28px calc(-1 * var(--sc-pad-x)) calc(-1 * var(--sc-pad-b));
  padding: 30px 24px 32px;
  background: linear-gradient(150deg, var(--bg-dark) 0%, #1E3468 100%);
  color: #fff;
}
@media (min-width: 700px) { .sc-result { margin-top: 32px; padding: 36px 40px 40px; } }
.sc-result__head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 24px;
}
.sc-priority { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.sc-priority .badge {
  min-width: 72px; min-height: 52px; padding: 10px 12px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  max-width: 16em; font-size: 15px; font-weight: 700; line-height: 1.5;
  text-align: center; white-space: normal;
  background: #fff; color: var(--bg-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.sc-priority .cap { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.sc-result__label { display: block; font-size: 12px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.65); margin-bottom: 4px; }
.sc-result__title h3 { font-size: 21px; font-weight: 700; line-height: 1.4; color: #fff; }
@media (min-width: 700px) { .sc-result__title h3 { font-size: 25px; } }
.sc-meters { display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 700px) { .sc-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 699px) {
  .sc-result__head { flex-direction: column; align-items: flex-start; }
  .sc-priority { align-items: flex-start; }
}
.sc-meter .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; color: rgba(255, 255, 255, 0.75); margin-bottom: 6px;
}
.sc-meter .val { font-family: var(--font-en); font-size: 17px; font-weight: 700; color: #fff; font-feature-settings: "tnum"; }
.sc-meter .bar {
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.15); overflow: hidden;
}
.sc-meter .bar span {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #60B9D6, #9CD4E8);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sc-meter .bar--ai span { background: linear-gradient(90deg, #0E9F6E, #5BD3A8); }
.sc-result__desc { font-size: 16px; line-height: 1.9; color: rgba(255, 255, 255, 0.85); max-width: 44em; margin-bottom: 24px; }
.sc-result__notice {
  font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.78);
  padding: 12px 14px; border-radius: 9px; background: rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}
.sc-comparison { margin: 0 0 18px; }
/* min-width は font-size と連動させること。12px→14px（2026-08-08）に合わせて 560→640px。
   据え置くとセルが縦に潰れて表が読めなくなる。親の .table-scroll が横スクロールを持つ */
.sc-comparison table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.sc-comparison th, .sc-comparison td { padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.18); text-align: left; }
.sc-comparison thead th { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sc-comparison tbody th { color: #fff; white-space: nowrap; }
.sc-comparison td { color: rgba(255, 255, 255, 0.8); }
.sc-result .cta-unit { align-items: center; }
.sc-result .caption { color: rgba(255, 255, 255, 0.65); }
/* まだ相談段階でない人の受け皿。主CTA（無料相談）と競合しないよう、ボタンにせず一文で置く */
.sc-result__free { margin-top: 18px; font-size: 14px; line-height: 1.8; text-align: center; color: rgba(255, 255, 255, 0.72); }
.sc-result__free a { color: #9CD4E8; font-weight: 700; }
.sc-result__free a:focus-visible { outline: 2px solid #9CD4E8; outline-offset: 3px; }

/* 注意書きの帯 */
/* .service-tech-note / .usecase-grid / .usecase-card / .usecase-effect は 2026-08-08 に削除しました。
   AI活用例のカードグリッドは、CASESの6事例（実画面付き）と役割が重複していたため廃止済みです。
   カードで例を並べ直す前に 04正本 A-11「なぜ組み替えたか」を読むこと。
   .usecase-note だけは現役（prompts.html の入力情報についての注意書き）なので残しています */
.usecase-note { max-width: 820px; margin: 30px auto 0; padding: 16px 18px; border-radius: 10px; background: var(--bg-secondary); font-size: 15px; color: var(--text-secondary); }

/* 無料コンテンツどうしの送客用。注意書き（.usecase-note）とは用途が違うので別クラスにする */
.crosslink-note {
  max-width: 820px; margin: 28px auto 0; padding: 14px 18px;
  border-left: 2px solid var(--accent); border-radius: 2px 10px 10px 2px;
  background: var(--bg-secondary);
  font-size: 15px; line-height: 1.8; color: var(--text-secondary);
}
.crosslink-note a { font-weight: 700; }
.crosslink-note:first-child { margin-top: 0; }

/* 料金カードの折りたたみ内で使うリスト。
   .pricing-detail / .pricing-detail__cond / __head / __price / __note / __target /
   .pricing-disclosure / .excluded-list / .phase-split 系 / .pricing-aside は
   2026-08-08に削除しました。詳細カード2枚を廃止して中身を .price-card__fold へ移したためです。
   詳細を「別のカード」に戻さないこと——「カードが多すぎて見栄えが悪い」という指摘への対応（README §1.13）。
   位置づけラベルは .price-card__cond、締めの注記は .price-card__note が引き継いでいます */
.included-list { display: grid; gap: 8px; }
@media (min-width: 700px) { .included-list { grid-template-columns: repeat(2, 1fr); } }
.included-list li { position: relative; padding-left: 22px; list-style: none; font-size: 15px; }
.included-list li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.scope-list { display: grid; gap: 8px; }
@media (min-width: 700px) { .scope-list { grid-template-columns: repeat(2, 1fr); } }
.scope-list li { position: relative; padding-left: 20px; list-style: none; font-size: 15px; }
.scope-list li::before { content: "・"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* .service-comparison / __grid は 2026-08-08 に削除しました。商品どうしを2列で見比べさせる枠で、
   現在この役割は guide.html の .guide-columns--two（2支援カード。2026-08-12に3枚から変更）と
   セルフチェック結果の .sc-comparison が持っています */

/* ガイドの向く／向かない比較 */
.guide-columns { display: grid; gap: 24px; margin: 24px 0; }
@media (min-width: 700px) { .guide-columns { grid-template-columns: 1fr 1fr; } }
/* 2026-08-12、枠をやめました。旧版は 1px罫＋角丸12px＋白背景＋padding 22px のカードで、
   白地のページの上に白いカードを置いても情報の区別に効かず、枠だけが増えていました。
   いまは各カラムの上に2pxの罫を引いて始まりを示します。枠・角丸・背景を戻さないこと */
.guide-columns > div { padding: 18px 0 0; border-top: 2px solid var(--text-primary); }
.guide-columns > div > h3 { margin-top: 0; }
/* カードの項目数が揃わない（5項目／4項目＋段落）ので、末尾リンクを下端で揃える */
.guide-columns--two > div { display: flex; flex-direction: column; }
.guide-columns--two > div > p:last-child { margin-top: auto; margin-bottom: 0; }
/* カード枠の中でチェックリストの枠を重ねない。二重の角丸になるうえ、左右48px分が本文幅から失われる */
.guide-columns .checklist { padding: 0; border: none; background: transparent; }
/* 3列用の張り出し（1080px以上で内容幅1040pxへ広げる負のマージン）は 2026-08-12 に削除しました。
   支援カードが3枚→2枚になり、既定の 1fr 1fr で1列348pxを確保できるため不要です。
   3枚に戻す場合は復活させること——3列を本文幅（.prose 760px＝内容幅720px）に収めると
   1列の実効本文幅が約100px＝日本語7文字で折り返します。100vw はスクロールバー幅を含み
   横溢れするので、固定px＋メディアクエリで出すこと。上下の 24px を保つため margin の一括指定は使わない */
/* .not-suitable-list は 2026-08-08 に削除しました。「向いていないケース」を箇条書きで並べる器で、
   現在この内容は guide.html の2支援カード（どの支援が向くか）と FAQ が肯定形で持っています。
   断りの列挙に戻さないこと（README §1.8 の無条件の列挙約束の禁止と同じ方向の判断） */

/* ---------- 業務AIプロンプト集ページ（prompts.html／クラス名の kit- 接頭辞は据え置き） ---------- */
.kit-page-head { padding-bottom: 56px; background: var(--bg-secondary); }
/* 枠付きボックスをやめ、区切り線だけの3カラムにしてヒーローを軽くする */
.kit-hero-facts { display: grid; gap: 12px; margin-top: 28px; }
.kit-hero-facts > div { padding-left: 14px; border-left: 2px solid var(--line); }
.kit-hero-facts span { display: block; margin-bottom: 2px; font-size: 12px; color: var(--text-secondary); }
.kit-hero-facts strong { font-size: 16px; }
.kit-hero-facts .is-free { color: var(--good-text); }
@media (min-width: 700px) {
  .kit-hero-facts { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .kit-hero-facts > div { padding-right: 14px; }
}

/* 使い方の3ステップ。旧 How to Use セクションをヒーロー内の1行ストリップへ圧縮 */
.kit-steps { display: grid; gap: 14px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.kit-steps li {
  display: grid; align-items: start; column-gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num title" "num desc";
}
.kit-steps span { grid-area: num; font-family: var(--font-en); font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--accent); }
.kit-steps strong { grid-area: title; font-size: 16px; line-height: 1.7; }
.kit-steps small { grid-area: desc; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
@media (min-width: 700px) { .kit-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.next-step-grid { display: grid; gap: 18px; max-width: 920px; margin: 0 auto; }
@media (min-width: 700px) { .next-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.next-step-card {
  display: flex; min-width: 0; height: 100%; flex-direction: column;
  padding: 28px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; box-shadow: none; color: var(--text-primary); text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.next-step-card:hover { text-decoration: none; }
.next-step-card h3 { margin-bottom: 8px; font-size: 19px; line-height: 1.55; color: var(--text-primary); }
.next-step-card__price { margin-bottom: 14px; font-size: 16px; line-height: 1.7; color: var(--bg-dark); }
.next-step-card__note { font-size: 15px; color: var(--text-secondary); }
.next-step-card__label {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px;
  margin-top: auto; padding-top: 22px; color: var(--accent); font-size: 15px; font-weight: 700;
}
.next-step-card__arrow { display: inline-block; transition: transform .25s ease; }
.next-step-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .next-step-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 20px rgba(22, 38, 79, .08); }
  .next-step-card:hover .next-step-card__arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .next-step-card, .next-step-card__arrow { transition: none; }
  .next-step-card:hover, .next-step-card:hover .next-step-card__arrow { transform: none; }
}

.kit-product-group { max-width: 980px; margin: 0 auto 56px; counter-increment: prompt-group; }
.kit-product-group:last-of-type { margin-bottom: 0; }
.kit-product-group > h3 {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); font-size: 21px;
}
.kit-product-group > h3::before {
  content: counter(prompt-group, decimal-leading-zero);
  font-family: var(--font-en); font-size: 15px; font-weight: 700;
  letter-spacing: .08em; color: var(--accent);
}
.kit-product-grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .kit-product-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.kit-product-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 24px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* カード間で行の高さを揃える（旧 min-height による力技の置き換え）。
   直下の子は category / h4 / p / dl / kit-copy / kit-sample-group の6つで全カード共通 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .kit-product-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
  }
}
.kit-product-card__category {
  align-self: flex-start; justify-self: start;
  margin-bottom: 10px; padding: 4px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 12px; font-weight: 700; line-height: 1.6;
}
.kit-product-card h4 { margin-bottom: 10px; font-size: 19px; line-height: 1.55; }
@media (min-width: 800px) { .kit-product-card h4 { font-size: 21px; } }
.kit-product-card > p { font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
@media (hover: hover) {
  .kit-product-card:hover { border-color: #B9C7D8; box-shadow: 0 10px 26px rgba(22, 38, 79, .12); }
}
@media (prefers-reduced-motion: reduce) { .kit-product-card { transition: none; } }
.kit-product-card dl { display: grid; gap: 8px; margin: 18px 0; padding: 14px; border-radius: 9px; background: var(--bg-secondary); }
.kit-product-card dl > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; font-size: 14px; }
.kit-product-card dt { color: var(--text-secondary); }
.kit-product-card dd { font-weight: 500; }
.kit-sample-group { display: grid; align-content: start; gap: 8px; }
.kit-sample[hidden] { display: none; }
.kit-sample { margin: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; }
.kit-sample summary { position: relative; padding: 12px 40px 12px 14px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; }
.kit-sample summary::-webkit-details-marker { display: none; }
.kit-sample summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 19px; }
.kit-sample[open] summary::after { content: "−"; }
.kit-sample summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.kit-sample__body { padding: 0 14px 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-secondary); }
.kit-sample__body h5 { margin: 14px 0 6px; font-size: 14px; color: var(--text-primary); }
.kit-sample__body pre { margin: 0; padding: 10px 12px; border-radius: 7px; background: var(--bg-secondary); font-family: inherit; font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }

/* プロンプト全文のコピー操作。details の外に出し、カード唯一のプライマリ操作にする */
.kit-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.kit-copy .btn { width: 100%; min-height: 46px; padding: 0 16px; font-size: 16px; }
/* コピー成否の表示で行が増えると、subgrid の行高が変わってカードが跳ねる。常に1行分を確保する */
.kit-copy__status { width: 100%; min-height: 18px; font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--good); }
.kit-copy__status[data-state="error"] { color: #A8391A; }

/* 有料導線（プロンプトカード群の直後・テキストリンクのみ） */
/* 文言は README §1.5 の5点ルールで固定。圧を下げるのは余白と枠の強さだけに留める */
.prompt-upsell {
  max-width: 900px; margin: 44px auto 0; padding: 20px 22px;
  border-left: 2px solid var(--accent); border-radius: 2px 10px 10px 2px;
  background: var(--bg-secondary);
}
.prompt-upsell > strong { display: block; margin-bottom: 8px; font-size: 16px; line-height: 1.55; }
.prompt-upsell p { font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.prompt-upsell ul { display: grid; gap: 4px; margin-top: 12px; }
.prompt-upsell li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.prompt-upsell li::before { content: "・"; position: absolute; left: 0; color: var(--accent); }
.prompt-upsell__link { margin-top: 16px; font-weight: 700; }
.prompt-upsell__link a { font-size: 15px; }

.kit-disclosures { display: grid; gap: 12px; }
.kit-disclosures details { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.kit-disclosures summary { position: relative; padding: 18px 48px 18px 18px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; }
.kit-disclosures summary::-webkit-details-marker { display: none; }
.kit-disclosures summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 22px; }
.kit-disclosures details[open] summary::after { content: "−"; }
.kit-disclosures summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.kit-disclosures details > div { padding: 0 18px 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-secondary); }
.kit-disclosures ul { display: grid; gap: 7px; margin-top: 16px; }
.kit-disclosures li { position: relative; padding-left: 18px; }
.kit-disclosures li::before { content: "・"; position: absolute; left: 0; color: var(--accent); }
/* 手順の番号付きリスト。グローバルの list-style:none と上の ・ を打ち消して連番を出す */
.kit-disclosures ol { display: grid; gap: 9px; margin-top: 16px; counter-reset: disclosure-step; }
.kit-disclosures ol li { padding-left: 24px; counter-increment: disclosure-step; }
.kit-disclosures ol li::before { content: counter(disclosure-step) "."; color: var(--accent); font-weight: 700; }
.kit-disclosures strong { color: var(--text-primary); }
.kit-disclosures p { margin-top: 14px; }
.kit-disclosures details > div > p:first-child { margin-top: 16px; }

/* ---------- Prompts セクション（ダーク背景に白カードを浮かせて主役化） ---------- */
.section--prompts { counter-reset: prompt-group; }
.section--prompts .kit-product-group > h3 { color: #fff; border-bottom-color: rgba(255, 255, 255, .18); }
.section--prompts .kit-product-group > h3::before { color: #9CD4E8; }
/* 白カードの中身が .section--dark の color:#fff を継承して白飛びするため、地の文字色を戻す */
.section--prompts .kit-product-card { color: var(--text-primary); border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
@media (hover: hover) {
  .section--prompts .kit-product-card:hover { border-color: transparent; box-shadow: 0 16px 40px rgba(0, 0, 0, .34); }
}
.section--prompts .prompt-upsell { background: rgba(255, 255, 255, .06); border-left-color: #9CD4E8; }
.section--prompts .prompt-upsell p,
.section--prompts .prompt-upsell li { color: rgba(255, 255, 255, .72); }
.section--prompts .prompt-upsell li::before { color: #9CD4E8; }
.section--prompts .usecase-note { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); }
/* ダーク地の上に出るテキストリンクだけを対象にする。
   白カード内のリンクとプライマリボタンの文字色は変えない */
.section--prompts .prompt-upsell a,
.section--prompts .usecase-note a { color: #9CD4E8; }
.section--prompts .prompt-upsell a:focus-visible,
.section--prompts .usecase-note a:focus-visible { outline: 2px solid #9CD4E8; outline-offset: 3px; }

/* .deliverable-box（estimate.html の「無料でお答えできる内容」ボックス）は2026-08-11に削除。
   HTMLごと外している（04正本 A-4-4 の廃止記録）。**セレクタを書き戻さないこと。**
   同日にデザインを一度作り直したが（点線枠→実線＋影、2カラム→1カラム、塗り丸のチェック→線、
   見出し17px→20px）、その直後にボックス自体が「考える・読むが増えて離脱率が上がる」という
   オーナー判断で廃止された。**デザインが理由で消えたのではないので、「作り直せば残せる」と
   読まないこと。** 中身の行き先は estimate.html のコメントに列挙してある */

/* ガイド導線バナー（写真背景版） */
/* .guide-banner--photo は 2026-08-08 に削除しました。基底の .guide-banner ごと廃止しています（上記）。
   guide-hero.webp（2026-08-29 に jpg から変換）自体は guide.html の .photo-band が img として使っているので消さないこと */

/* クロージング（2026-08-12：写真背景を廃止）
   旧版は宇宙から見た夜の地球（closing.jpg）に濃紺72%をかぶせていた。実写だが、中小企業の
   バックオフィス自動化とは何の関係もない汎用ストック画像で、ページ最後のCTAから視線を奪っていた。
   **写真へ戻さないこと。** 代わりに、FVのループと同じ「回る」モチーフを、
   切れた大きな輪として地の中に置いている。これはこの会社の地であって、どこかで見た地ではない。
   輪を2本以上に増やさないこと——増やすと模様になり、意味が消える */
.closing {
  position: relative;
  overflow: hidden;
  background: radial-gradient(125% 150% at 12% 0%, #223A6E 0%, #1A2C57 46%, #131F42 100%);
}
.closing::before {
  content: "";
  position: absolute;
  right: -120px; bottom: -360px;
  width: 760px; height: 760px;
  border: 2px solid rgba(96, 185, 214, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
@media (max-width: 799px) {
  .closing::before { right: -220px; bottom: -420px; width: 620px; height: 620px; }
}
.closing > * { position: relative; }

/* 下層ページヘッダーの写真帯 */
.page-head .photo-band { margin-top: 32px; margin-bottom: 0; }

/* thanks */
.thanks-wrap { max-width: 640px; margin: 0 auto; text-align: center; padding: 80px 20px 120px; }
.thanks-wrap .mark { width: 64px; height: 64px; margin: 0 auto 24px; color: var(--good); }
.thanks-wrap h1 { font-size: 28px; font-weight: 700; margin-bottom: 20px; }
.thanks-wrap p { color: var(--text-secondary); margin-bottom: 1.2em; text-align: left; }
.thanks-wrap .actions { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* ---------- 自動化ガイドの記事レイアウト（guide.html 専用・2026-08-12新設） ----------
   「カードを増やす」ではなく「カードを減らし、余白・罫線・活字で組む」方針です。
   枠付きカードを足す方向へ戻さないこと——安っぽく見えていた原因がそれでした。
   font-size は 14px 未満を1つも使いません。sites-build.test.mjs が
   `font-size: 1[0-3]px` の出現数を13で固定しており、増やすとテストが落ちます */

/* 目次。6章ある長文に道しるべが無く、未完成に見えていました */
.guide-toc { margin: 0 0 56px; padding: 22px 0; border-top: 2px solid var(--text-primary); border-bottom: 1px solid var(--line); }
.guide-toc__title { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 14px; color: var(--text-secondary); }
/* .prose ol li が list-style: decimal を持つため、セレクタは .prose 込みで書くこと。
   .guide-toc li だけでは詳細度で負けて番号が2重に出る */
.prose .guide-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
@media (min-width: 700px) { .prose .guide-toc ol { grid-template-columns: 1fr 1fr; gap: 2px 32px; } }
.prose .guide-toc li { list-style: none; margin: 0; }
.guide-toc a { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid transparent; }
.guide-toc a:hover { color: var(--accent); border-bottom-color: var(--line); }
.guide-toc__num { font-family: var(--font-en); font-size: 14px; font-weight: 700; color: var(--text-secondary); flex: none; }
.guide-toc a:hover .guide-toc__num { color: var(--accent); }

/* 章見出し。番号を見出し文から切り離し、意匠として持たせる */
.ch { margin: 72px 0 20px; }
.ch:first-of-type { margin-top: 8px; }
.ch__num { display: block; font-family: var(--font-en); font-size: 34px; font-weight: 700; line-height: 1; color: var(--line-strong); }
@media (min-width: 800px) { .ch__num { font-size: 44px; } }
.ch__num::after { content: ""; display: block; width: 40px; height: 2px; margin: 12px 0 14px; background: var(--accent); }
.prose .ch h2 { margin: 0; }

/* 章見出しの右にイラストを置く変種（§1・§6） */
@media (min-width: 800px) {
  .ch--illus { display: grid; grid-template-columns: 1fr 200px; gap: 32px; align-items: center; }
  .ch--illus .ch__body { min-width: 0; }
}
.ch__illus { margin: 16px 0 0; }
.ch__illus img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
@media (min-width: 800px) { .ch__illus { margin: 0; } }

/* 本文中の図解（インラインSVG） */
.guide-figure { margin: 28px 0 1.6em; }
.guide-figure svg { display: block; width: 100%; height: auto; }
.guide-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--text-secondary); }