/* トップの「最初の画面の下」（design 2026-09-25・CEO 22:3x「上の1画面だけ変わり、下は旧のまま」への作り直し）
 * 正本：コンセプト1枚 /drafts/km-top-renewal/nurikae/ §4 の骨組み（建設会社を探す→役立つ情報4枚→「建設みらいは…です」3枚→お知らせ→よくある質問）
 * 決まり：地は最初の画面と同じ淡い水色・欄はすべて白い枠（大きい枠 16px・小さい部品 6px）・紺の箱は使わない
 * 色は tokens.css と top-fv.css の変数だけ（直書きしない） */
html body { background: var(--kfv-bg); } /* index.html の中の body { background: var(--km-bg) } より後から勝たせる */
/* 最初の画面の帯 .kfv は 100vw の全幅（margin: 0 calc(50% - 50vw)）＝縦のスクロールバーが幅を取る PC（Windows の既定）で横に 9px はみ出していた（リーダー 23:21）。
   地の色はページ全体と同じになったので全幅は要らない＝入れ物 .container の余白の分だけ広げる（common.css：20px・768px 以下 10px） */
.kfv { margin-left: calc(-1 * var(--spacing-lg)); margin-right: calc(-1 * var(--spacing-lg)); }
@media (max-width: 768px) { .kfv { margin-left: calc(-1 * var(--spacing-sm)); margin-right: calc(-1 * var(--spacing-sm)); } }
.kfv { margin-bottom: 0; }
.ktb { display: grid; gap: 20px; padding: 20px 0 32px; color: var(--km-text); }
.ktb h2, .ktb h3 { text-align: left; background: none; border: 0; padding: 0; text-shadow: none; }
.ktb__box { background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 16px; padding: 24px; box-shadow: var(--km-shadow-1); }
.ktb__box > h2 { font-size: 22px; line-height: 1.4; margin: 0 0 14px; color: var(--km-brand); }
.ktb__part { padding: 18px 0 0; margin-top: 18px; border-top: 1px solid var(--km-border); }
.ktb__part:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.ktb__part > h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 12px; color: var(--km-brand); }
.ktb__no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kfv-accent); color: var(--km-text-invert); font-size: 14px; flex: none; }
/* エリア：県のカード8枚（千葉が先頭）・千葉の市・地方別の47県 */
.ktb__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.ktb__cards a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 56px; padding: 12px 14px; border: 1px solid var(--km-border); border-radius: 6px; background: var(--kfv-bg); color: var(--km-text); text-decoration: none; }
.ktb__cards a:hover { border-color: var(--kfv-accent); }
.ktb__cards a.is-first { border-color: var(--kfv-accent); background: var(--kfv-tint2); }
.ktb__cards b { font-size: 16px; color: var(--km-brand); }
.ktb__cards span { font-size: 13px; color: var(--km-text-muted); white-space: nowrap; }
.ktb__links { margin: 14px 0 0; font-size: 15px; line-height: 1.5; }
.ktb__links .ktb__lbl, .ktb__regions .ktb__lbl { font-weight: 700; color: var(--km-brand); margin-right: 4px; }
.ktb__links a, .ktb__regions a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--kfv-accent); text-decoration: underline; text-underline-offset: 3px; }
.ktb__regions { margin: 8px 0 0; font-size: 15px; }
.ktb__regions p { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.ktb__regions .ktb__lbl { min-width: 112px; }
/* 業種：線の絵8つ */
.ktb__types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.ktb__types a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--km-border); border-radius: 6px; background: var(--km-surface); color: var(--km-text); text-decoration: none; font-weight: 700; font-size: 15px; }
.ktb__types a:hover { border-color: var(--kfv-accent); }
.ktb__ic { width: 36px; height: 36px; flex: none; }
.ktb__types a span { word-break: keep-all; } /* 2026-10-05 design：業種名を語の途中で折らない（幅400 で「とび・土工工事業」が「とび・土工工」「事業」に割れた）。折るのは「・」の後だけ */
.ktb__all { margin: 10px 0 0; font-size: 15px; }
.ktb__all a { display: inline-flex; align-items: center; min-height: 44px; color: var(--kfv-accent); text-underline-offset: 3px; }
/* 業種と都道府県を選ぶ（今の欄を白い枠の中へ・紺の箱をやめる） */
.ktb .km-type-pref-section { background: none; color: inherit; border-radius: 0; padding: 14px 0 0; margin: 12px 0 0; box-shadow: none; border-top: 1px dashed var(--km-border); }
.ktb .km-type-pref-section h2 { font-size: 16px; margin: 0 0 10px; color: var(--km-brand); border: 0; padding: 0; }
.ktb .km-type-pref-form select { border: 1px solid var(--km-border-input); border-radius: 6px; min-height: 44px; }
.ktb .km-type-pref-go { border-radius: 6px; min-height: 44px; background: var(--kfv-accent); }
/* 役立つ情報のカード4枚 */
.ktb__info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.ktb__info a { display: block; height: 100%; background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 16px; padding: 18px; color: var(--km-text); text-decoration: none; }
.ktb__info a:hover { border-color: var(--kfv-accent); }
.ktb__info b { display: block; font-size: 16px; color: var(--km-brand); margin-bottom: 4px; }
.ktb__info span { font-size: 14px; color: var(--km-text-muted); }
/* 「建設みらいは…です」＋線の絵3枚 */
.ktb__about > h2 { text-align: center; font-size: 24px; }
.ktb__about > h2 em { font-style: normal; color: var(--kfv-accent); }
.ktb__about .header-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--km-text-muted); text-align: left; background: none; padding: 0; box-shadow: none; }
.ktb__three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.ktb__three li { background: var(--kfv-bg); border: 1px solid var(--km-border); border-radius: 6px; padding: 18px; }
.ktb__ic3 { width: 44px; height: 44px; display: block; margin-bottom: 8px; }
.ktb__three b { display: block; font-size: 16px; color: var(--km-brand); margin-bottom: 4px; }
.ktb__three span { font-size: 14px; color: var(--km-text-muted); }
/* お知らせと最新の記事 */
/* 2026-09-27 CEO「そろっていない」＝2つの箱の上下・見出しの行・一覧の字と線を同じ形に（高さは stretch・見出しは 44px の行の中央） */
.ktb__two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.ktb__two > * { margin: 0 !important; box-sizing: border-box; }
.ktb .blog-latest-list { list-style: none; margin: 0; padding: 0; }
.ktb .blog-latest-list li { display: block; min-height: 0; padding: 10px 0; border-top: 1px solid var(--km-border); border-bottom: 0; font-size: 15px; line-height: 1.6; }
.ktb .blog-latest-list a { color: var(--kfv-accent); }
.ktb .blog-latest-date { display: block; margin: 0; font-size: 13px; color: var(--km-text-muted); }
.ktb__more-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--kfv-accent); font-size: 14px; }
.ktb .km-updates { border-radius: 16px; padding: 24px; box-shadow: var(--km-shadow-1); } /* お知らせの部品（km-updates-latest.php）を白い大きな枠にそろえる */
.ktb .km-updates__head { align-items: center; min-height: 44px; margin: 0 0 10px; }
.ktb .km-updates__title { font-size: 22px; line-height: 1.4; }
.ktb .km-updates__list li { display: block; padding: 10px 0; font-size: 15px; line-height: 1.6; }
.ktb .km-updates__list time { display: block; font-size: 13px; } /* 日付は文の上に＝ブログの最新記事と同じ形 */
.ktb__two .ktb__box > h2 { display: flex; align-items: center; min-height: 44px; font-size: 22px; line-height: 1.4; margin: 0 0 10px; }
/* よくある質問（今の .section の飾り＝中央・青・下線をやめ、ほかの枠にそろえる） */
.ktb .faq-snippet-section { margin: 0; border-radius: 16px; padding: 24px; box-shadow: var(--km-shadow-1); }
.ktb .faq-snippet-section h2 { font-size: 22px; color: var(--km-brand); text-align: left; border: 0; padding: 0; margin: 0 0 14px; }
/* くわしい説明（長い文5つ）＝消さずに1か所の折りたたみへ */
.ktb__more { background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 16px; padding: 0 24px; }
.ktb__more > summary { display: flex; align-items: center; min-height: 56px; cursor: pointer; font-weight: 700; font-size: 17px; color: var(--km-brand); }
.ktb__more[open] > summary { border-bottom: 1px solid var(--km-border); margin-bottom: 18px; }
.ktb__more .hero, .ktb__more .section { background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 28px; }
.ktb__more .hero h2, .ktb__more .section h2 { text-align: left; font-size: 20px; color: var(--km-brand); border: 0; padding: 0; margin: 0 0 12px; }
.ktb__more .search-card, .ktb__more .guide-section, .ktb__more .quick-search, .ktb__more .popular-regions { background: var(--kfv-bg); border: 1px solid var(--km-border); border-radius: 6px; box-shadow: none; }
.ktb__more .search-card:hover { transform: none; }
.ktb__more .search-card a { background: var(--kfv-accent); border-radius: 6px; }
.ktb__more .region-link, .ktb__more .stat-card { background: var(--km-surface) !important; color: var(--km-brand) !important; border: 1px solid var(--km-border); border-radius: 6px; }
.ktb__more .region-link .company-count { color: var(--km-text-muted); }
@media (max-width: 800px) {
  .ktb { gap: 14px; padding: 14px 0 24px; }
  .ktb__box, .ktb .km-updates, .ktb .faq-snippet-section { padding: 16px; border-radius: 16px; }
  .ktb .km-updates__title, .ktb .faq-snippet-section h2, .ktb__two .ktb__box > h2 { font-size: 19px; }
  .ktb__box > h2 { font-size: 19px; }
  .ktb__part > h3 { font-size: 16px; }
  .ktb__cards, .ktb__types { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ktb__links a, .ktb__regions a { font-size: 14px; padding: 0 6px; }
  .ktb__regions .ktb__lbl { min-width: 0; width: 100%; margin-top: 6px; }
  .ktb__info { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ktb__info a { padding: 14px; }
  .ktb__about > h2 { font-size: 19px; }
  .ktb__three, .ktb__two { grid-template-columns: 1fr; }
  .ktb__more { padding: 0 16px; }
}
@media (max-width: 480px) {
  .ktb__info { grid-template-columns: 1fr; }
}

/* トップのアクセスランキングの帯（2026-09-27 CEO 決定 A・各行に閲覧の回数・本日／1週間／1か月・上位5件＋もっと見るで10位） */
.kra{margin:14px 0 4px;padding:10px 12px;border:1px solid var(--km-border,#DFE3E8);border-radius:8px;background:var(--km-surface,#fff)}
.kra__head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kra__ttl{margin:0;font-size:14px;font-weight:700;color:var(--km-brand,#1B3A5C)}
.kra__tabs{display:flex;gap:6px}
.kra__tabs button{min-height:44px;min-width:44px;padding:4px 14px;border:1px solid var(--km-border-strong,#B8C2CC);border-radius:var(--km-radius-pill,999px);background:#fff;color:var(--km-brand,#1B3A5C);font-size:13px;cursor:pointer}
.kra__tabs button[aria-pressed="true"]{background:var(--km-brand,#1B3A5C);border-color:var(--km-brand,#1B3A5C);color:#fff}
.kra__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:8px 0 0;padding:0;list-style:none}
.kra__list li{min-width:0}
.kra__list a{display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 8px;border:1px solid var(--km-border,#DFE3E8);border-radius:6px;color:var(--km-brand,#1B3A5C);text-decoration:none;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.kra__list a:hover{background:var(--km-accent-tint,#EEF5FA)}
.kra__no{flex:0 0 auto;min-width:20px;font-weight:700;color:var(--km-text-muted,#5B6773)}
.kra__range{margin-left:8px;font-size:12px;font-weight:400;color:var(--km-text-muted,#5B6773)}
.kra__name{flex:1 1 auto;min-width:0;word-break:keep-all}/* 2026-10-05 design：業種名を語の途中で折らない（幅400 で「とび・土工工事業」が「とび・土工工」「事業」に割れた＝06）。折るのは「・」の後だけ */
.kra__cnt{flex:0 0 auto;margin-left:auto;font-size:12px;font-weight:400;color:var(--km-text-muted,#5B6773);white-space:nowrap;font-variant-numeric:tabular-nums}
.kra__list li:nth-child(-n+3) .kra__no{color:var(--km-warn,#B26A00)}
.kra__list li.is-more{display:none}
.kra.is-open .kra__list li.is-more{display:block}
.kra__msg{grid-column:1/-1;font-size:13px;color:var(--km-text-muted,#5B6773);padding:6px 0}
.kra__foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0 0;font-size:14px}
.kra__more{min-height:44px;padding:0;border:0;background:none;color:var(--km-accent,#0B6E99);font-size:14px;text-decoration:underline;cursor:pointer}
.kra__foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--km-accent,#0B6E99)}
@media (max-width:600px){.kra__list{grid-template-columns:repeat(2,minmax(0,1fr))}.kra__list li:nth-child(5){grid-column:1/-1}}
/* 千葉県の枠（includes/km-top-chiba.php）・今週の千葉県（includes/km-top-chiba-week.php）
   2026-09-28 design：部品の中の <style> から移した（ページ内 CSS に色を書かない・TC-715）。中身は1文字も変えていない */
.ktc__lead{margin:0 0 14px;color:var(--km-text,#1B2530);font-size:var(--km-fs-base,16px)}
.ktc{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ktc a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:10px 12px;background:var(--km-surface,#fff);border:1px solid var(--km-border,#DFE3E8);border-radius:var(--km-radius-md,8px);text-decoration:none;color:var(--km-text,#1B2530)}
.ktc a:hover{border-color:var(--km-accent,#0B6E99);background:var(--km-accent-tint,#E6F1F6)}
.ktc b{font-size:16px;color:var(--km-brand,#123A5F)}
.ktc__n{font-size:13px;color:var(--km-text-muted,#5B6773)}
.ktc__h{font-size:13px;color:var(--km-accent,#0B6E99);font-weight:700}
@media (max-width:900px){.ktc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.ktc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ktw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ktw__card{background:var(--km-surface,#fff);border:1px solid var(--km-border,#DFE3E8);border-radius:var(--km-radius-md,8px);padding:12px 14px;min-width:0}
.ktw__kind{display:inline-block;font-size:13px;font-weight:700;color:var(--km-brand,#123A5F);background:var(--km-brand-tint,#E8EEF4);border-radius:999px;padding:1px 10px;margin-bottom:6px}
.ktw__a{display:block;text-decoration:none;color:var(--km-text,#1B2530);min-height:44px}
.ktw__t{display:block;font-size:15px;line-height:1.5;color:var(--km-accent,#0B6E99)}
.ktw__s{display:block;font-size:13px;color:var(--km-text-muted,#5B6773);margin-top:4px}
@media (max-width:640px){.ktw{grid-template-columns:1fr}}