/* =============================================================
   v3.1 ブラッシュアップ上書き CSS（co-jp.css ベースのトップを洗練）
   方針: 配色・フォント・コンポーネント構造・コピーは変更しない。
        余白・情報階層・可読性・配置のみを調整する。
   既存変数を利用: --tech(シアン) / --touch(アンバー) / --gov(エメラルド)
                  --ink / --ink-soft / --ink-mute / --line / --line-soft / --bg

   ★移植時の注意:
   - co-jp.css は /co-jp など他案でも共有されるため、本ブロックを co-jp.css
     末尾へそのまま足すと他ページにも適用される。/v3.1 のみへ効かせるなら
     公開側で v3.1 専用 CSS として読み込むか、ラッパクラス（例 body.v3p1）配下に
     スコープすること。プレビュー（単一HTML）ではグローバルのままで問題ない。
   ============================================================= */

/* ---------- 1. 日本語の語中改行を防止（最重要・明瞭性に直結） ---------- */
.sh-title, .concept-title, .concept-jp, .sol-title, .cs-title,
.cases-title, .nc-title, .u2b-faq-title, .contact-title,
.solc-title, .u2b-consult-card h3, .u2b-search-copy h2,
.cf-tagline, .co-jp, .shp-text {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* ---------- 2. リード文の可読幅・行間を統一（読みやすい折返し幅） ---------- */
.concept-lead { max-width: 680px; font-size: clamp(15px, 1.04rem, 16px); line-height: 1.9; }
.sol-lead     { max-width: 660px; margin-left: auto; margin-right: auto; line-height: 1.95; }

/* ---------- 3. セクションの上下律動を穏やかに統一（突出した余白を整える） ---------- */
.concept   { padding-top: clamp(96px, 10vw, 132px); padding-bottom: clamp(96px, 10vw, 130px); }
.solutions { padding-top: clamp(96px, 10vw, 130px); padding-bottom: clamp(96px, 10vw, 130px); }
.sol-head  { margin-bottom: 60px; }
.concept-flow { margin-top: 72px; }          /* 88px → 72px：詰めすぎず締める */
.concept-outcomes { margin-top: 80px; }       /* 96px → 80px */

/* ---------- 4. ヒーロー：本文と相談ピラーの可読性を底上げ ---------- */
.sh-desc { font-size: 15.5px; line-height: 1.9; max-width: 480px; }
.sh-desc-touch { max-width: 480px; }
.shp { padding: 16px 16px; gap: 10px; }
.shp-text { font-size: 13px; line-height: 1.45; }

/* ---------- 5. コンセプト「3つの約束」：小さすぎる本文を読める大きさへ ---------- */
.co-item { gap: 18px; padding: 10px 6px; }
.co-num  { font-size: 30px; }
.co-jp   { font-size: 16px; line-height: 1.6; }

/* ---------- 6. サポート6カード：間延び解消・階層強調・整列 ---------- */
.sol-card  { display: flex; flex-direction: column; padding: 26px 26px 22px; }
.solc-top  { margin-bottom: 14px; }
.solc-title { font-size: 19.5px; line-height: 1.45; margin-bottom: 8px; }
.solc-desc { font-size: 14px; line-height: 1.85; margin-bottom: 16px; flex: 1 0 auto; } /* 説明を伸縮させタグ列を下端へ揃える */
.solc-tags { padding-top: 14px; }
.solc-tag  { font-size: 12px; }

/* ---------- 7. よくあるご相談：見出し・本文・導線の可読性 ---------- */
.u2b-consult-card h3 { font-size: 17px; line-height: 1.6; }
.u2b-consult-card p  { font-size: 13.5px; line-height: 1.85; }
.u2b-consult-tag     { font-size: 12px; }
.u2b-consult-go      { font-size: 13.5px; }

/* ---------- 8. 補助金クイック検索：入力を少しゆったり ---------- */
.u2b-search-kw input { font-size: 1rem; padding-top: .95rem; padding-bottom: .95rem; }

/* ---------- 9. フォーカス可視化（アクセシビリティ） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--tech);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 10. モバイル微調整（詰まり防止） ---------- */
@media (max-width: 720px) {
  .concept   { padding-top: 84px; padding-bottom: 84px; }
  .solutions { padding-top: 84px; padding-bottom: 84px; }
  .co-jp     { font-size: 15.5px; }
  .solc-title { font-size: 18.5px; }
}

/* =============================================================
   サブページ（k8 系：記事・補助金・サービス・お問い合わせ）の
   ブラッシュアップ。v48.css の :root 変数（--biz-blue / --en /
   --line / --paper-2 / --shadow-s 等）を利用。/v3.1 のみ読込のため
   /v3・/co-jp へは影響しない。トップの co-jp クラスとは別系統。
   ============================================================= */

/* ---------- k1. 本文の可読性（記事・解説） ---------- */
.k8-prose { font-size: 1.05rem; line-height: 1.95; }
.k8-prose h2 { font-size: 1.5rem; margin: 2.6rem 0 1.1rem; padding-left: .9rem; }
.k8-prose h3 { margin: 2rem 0 .8rem; }
.k8-prose ul, .k8-prose ol { margin-bottom: 1.4rem; }
.k8-prose li { margin-bottom: .55rem; line-height: 1.9; }
/* 記事本文は読みやすい行長に。図・表・引用はフル幅を保つ */
.k8-article-content > p,
.k8-article-content > ul,
.k8-article-content > ol,
.k8-article-content > h2,
.k8-article-content > h3,
.k8-article-content > blockquote { max-width: 44em; }

/* ---------- k2. 「申請の流れ」をタイムライン図へ格上げ ---------- */
/* 平板な STEP カード → 接続線つきの番号バッジ・タイムライン */
.k8-steps { position: relative; gap: 0; }
.k8-steps li {
  position: relative; counter-increment: k8step;
  margin: 0; padding: 0 0 1.5rem 3.6rem;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.k8-steps li:last-child { padding-bottom: 0; }
/* 縦の接続線 */
.k8-steps li::before {
  content: ""; position: absolute; left: 1.2rem; top: .5rem; bottom: -.1rem;
  width: 2px; background: color-mix(in srgb, var(--biz-blue) 26%, var(--line));
}
.k8-steps li:last-child::before { display: none; }
/* 番号バッジ（01, 02 …） */
.k8-steps li::after {
  content: counter(k8step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 50%; color: #fff; font-family: var(--en);
  font-weight: 800; font-size: .92rem; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--biz-blue), var(--biz-blue-light));
  box-shadow: 0 5px 14px rgba(15,76,129,.30);
}
.k8-steps .k8-step-n { display: none; }            /* 旧「STEP 01」ラベルは番号バッジへ置換 */
.k8-steps strong { font-size: 1.07rem; line-height: 1.5; }
.k8-steps p { margin-top: .35rem; line-height: 1.8; }

/* ---------- k3. カード一覧（補助金・記事）の律動・整列 ---------- */
.k8-grid-cards { gap: 1.5rem; }
.k8-card { padding: 1.6rem; }
.k8-card-title { font-size: 1.2rem; line-height: 1.5; }
.k8-card-sum { line-height: 1.85; }
.k8-card-meta { gap: 1.3rem; }

/* ---------- k4. 申請枠などの表：余白・行間 ---------- */
.k8-table thead th { padding: .9rem 1.1rem; }
.k8-table tbody th, .k8-table td { padding: .85rem 1.1rem; line-height: 1.7; }
.k8-table-wrap { box-shadow: var(--shadow-s); }

/* ---------- k5. 定義リスト・コールアウト：カード感を統一 ---------- */
.k8-deflist { padding: 1.2rem 1.4rem; gap: 1rem 1.6rem; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.k8-callout { padding: 1.3rem 1.5rem; }

/* ---------- k6. 申請の流れ（Mermaid 風 .k8-flow）の仕上げ ---------- */
.k8-flow-node { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.k8-flow-node:hover { border-color: var(--biz-blue); box-shadow: var(--shadow-m); transform: translateY(-1px); }

/* ---------- k7. お問い合わせフォーム：余白・入力のゆとり ---------- */
.k8-form { padding: 2rem; }
.k8-field-grid { gap: 1.2rem; }
.k8-field input, .k8-field select, .k8-field textarea { padding: .85rem 1rem; }

/* ---------- k8. 詳細ヒーローのキーメタ・サイドの上質感 ---------- */
.k8-keymeta div { padding: .95rem 1.1rem; }
.k8-keymeta dd { font-size: 1.1rem; }
.k8-detail-sum { line-height: 1.85; }

/* ---------- k9. 一覧ページヒーロー・セクション見出しの調和 ---------- */
.k8-page-lead { line-height: 1.85; }
.k8-sec-lead { line-height: 1.85; }
.k8-tab { padding: .58rem 1.15rem; }
.k8-result-meta { margin-bottom: 1.6rem; }