/* kit.css — faclog-kit を写したもの。**正本は fuku6**（2026-09-06 に fuku5 から引き継ぎ）。
   ★**版名だけを控えない。版名 + md5 + 引いた時刻 の3つを控える**（fuku6 OWNER.md §1-C・こちらが 18:13→18:24 で二度掴んだことによる決め）。
     版名        v1.1
     tokens.css      md5 f0174d47b1b3  （置き場の更新 2026-09-06 19:02）
     components.css  md5 c085bf5c401c  （置き場の更新 2026-09-06 19:02）
     引いた時刻  2026-09-06 22:0x（**3回目**。18:13 版→18:24 版→19:02 版）
   ★**同じ v1.1 で中身が3つあった。**18:13 は `.fk-header-1 .fk-badges{display:none}`、18:24 は2段目に置く形、
     19:02 は `--fk-star`→`--fk-score` の改名と、1位の丸の背景を `#f5b301` の直書きに戻したもの。
     **版名の一致は中身の一致を意味しない。**md5 で確かめること。
   ★元: tokens.css＋components.css。**要素そのもの（html/h1/h2/h3/a/img）への規則は外した**（部品 .fk-* だけ使う）。
   ★**同じ規則をこちらに二重に置かない。**キット本体に入った上書きは下のサイト固有部分から消してある。 */
/* faclog-kit v1 — tokens.css（共通I-10）。**値は実測（faclog-measure.md・2026-09-06 07:3x 撮影）で差し替え済み。**
   実測が無い変数は「暫定のまま」と行末に書く。ファクログの CSS はコピーしていない。自分の命名・自分の値。
   各サイトは :root を上書きして色だけ変えてよい（医師 --fk-primary:#1f4a6b／看護師 #5a4a86 など）。 */
:root {
  /* 色 */
  --fk-bg: #ffffff;            /* 実測 top-1280 header/背景 */
  --fk-text: #252525;          /* 実測 全ページ body color rgb(37,37,37) */
  --fk-heading: #252525;       /* 実測 ranking/company/condition h2 color */
  --fk-primary: #006c9d;       /* 実測 company-1280 出現 363 回 rgb(0,108,157)＝リンク・見出しの青 */
  --fk-primary-deep: #0485c0;  /* 実測 top-1280 h2 color rgb(4,133,192)（濃淡の役割は自分で決めた） */
  --fk-primary-pale: #cde6ed;  /* 実測 condition-1280 出現 240 回 rgb(205,230,237) */
  --fk-accent: #ffa215;        /* 実測 全ページ CTA 背景 rgb(255,162,21) */
  --fk-accent-deep: #d3660f;   /* 暫定のまま（hover の濃色は未測定） */
  --fk-rule: #bfbfbf;          /* 実測 ranking/condition td 下罫線 rgb(191,191,191) */
  --fk-rule-soft: #e0e0e0;     /* 実測 magazine td 下罫線 rgb(224,224,224) */
  --fk-muted: #555555;         /* 実測 magazine-index h3 color rgb(85,85,85) */
  --fk-danger: #c0392b;        /* 暫定のまま（未測定） */
  /* **名前を `--fk-star` から `--fk-score` に替えた（2026-09-07・恋愛 fuku2 の指摘）。**
     **星を出さないのが8サイト共通の決め**なのに、`star` という名前のトークンが在ると
     「枠があるから埋めよう」と次に触る人が考える。**禁止が文で、部品が手元にある組み合わせが危ない。**
     色そのものは「**数えた点数**」の文字に使うので残す。 */
  --fk-score: #8a6100;         /* **白地で AA を通す濃さに変えた（2026-09-07）。**
                                    元の #f5b301 は白地でコントラスト1.85で、20pxの点数に使うと基準3を割ると
                                    fuku3 が実測。**点数の文字に使う色**なので、見た目の黄色より可読性を採る。
                                    背景色として塗る（文字ではない）用途なら #f5b301 を直接書いてよい */
  --fk-card-shade: #f0f3f5;    /* 実測 カードの影と上罫線 rgb(240,243,245) */
  /* 字 */
  --fk-font: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;  /* 実測 全ページ fontFamily */
  --fk-fs: 16px;               /* 実測 全ページ body/p 16px（マガジン 768↑ は 17.12px＝1.07em。採らない） */
  --fk-lh: 1.9;                /* 実測 ranking/condition p 30.88px ÷ 16px */
  --fk-fs-sm: 14px;            /* 実測 company p 14px */
  --fk-fs-xs: 12px;            /* 実測 magazine td 12px */
  --fk-h1: 26px;               /* 暫定のまま（h1 は未測定） */
  --fk-h2: 24px;               /* 実測 768/1280 h2 24px/36px */
  --fk-h3: 18px;               /* 実測 ranking/condition/company-768↑ h3 18px */
  --fk-h2-mb: 40px;            /* 実測 h2 marginBottom 40px（1280） */
  /* 寸法 */
  --fk-header-h: 72px;         /* 実測 1280 header 72px（fixed） */
  --fk-header2-h: 40px;        /* 実測から差し引き：768 以下は 112px＝72＋40（2 段目） */
  --fk-logo-w: 185px;          /* 実測 top-1280 logo 185×59 */
  --fk-content-w: 720px;       /* 暫定のまま（本文カラムの実幅は未測定：main に max-width が無い） */
  --fk-wide-w: 1080px;         /* 暫定のまま */
  --fk-side-w: 300px;          /* 暫定のまま（aside の実幅は未測定） */
  --fk-card-pad: 20px;         /* 実測 top/ranking/condition card padding 20px */
  --fk-card-mb: 30px;          /* 実測 card marginBottom 30px */
  --fk-radius: 5px;            /* 実測 card borderRadius 5px */
  --fk-radius-lg: 12px;        /* 実測 magazine-1280 card borderRadius 12px */
  --fk-shadow: 0 3px 8px 0 #f0f3f5;               /* 実測 top/ranking/condition card boxShadow */
  --fk-shadow-lg: 0 2px 4px 0 rgba(67,133,187,.07); /* 実測 magazine card boxShadow */
  --fk-card-border: 2px solid #f0f3f5;             /* 実測 card borderTop 2px rgb(240,243,245) */
  --fk-cta-h: 80px;            /* 実測 全ページ CTA 高さ 80px（幅 322px・18px・padding-left 30px・radius 0） */
  --fk-cta-radius: 0;          /* 実測 CTA borderRadius 0 */
  --fk-btn-h: 35px;            /* 実測 top-1280 小ボタン 40×35（radius 0 3px 3px 0） */
  --fk-th-bg: rgba(0,0,0,.05); /* 実測 ranking/condition th 背景 */
  --fk-cell-pad: 6.4px;        /* 実測 ranking/condition th/td padding 6.4px */
  --fk-sp-1: 8px; --fk-sp-2: 16px; --fk-sp-3: 24px; --fk-sp-4: 32px; --fk-sp-6: 48px; --fk-sp-8: 64px;  /* 暫定のまま（間隔の尺は自分の値） */
  --fk-thumb-ratio: 1200 / 630;  /* 暫定のまま（サムネ比率は未測定：lazy 画像で naturalWidth 0） */
}
@media (max-width: 768px) {
  :root {
    --fk-header-h: 112px;      /* 実測 375/768 header 112px */
    --fk-h2: 20px;             /* 実測 375 h2 20px/30px */
    --fk-h2-mb: 30px;          /* 実測 top-375 h2 marginBottom 30px */
    --fk-h1: 22px;             /* 暫定のまま */
    --fk-h3: 17px;             /* 暫定のまま（375 の h3 は 16〜20px でページごとに違う） */
    --fk-card-pad: 20px;       /* 実測 375 でも card padding 20px */
  }
}
/* 差し替えた変数 28／暫定のまま 12（2026-09-06 09:3x fuku5） */

/* faclog-kit v1 — components.css（共通I-10）。自分の命名（fk-）・自分のコード。ファクログの CSS・SVG はコピーしていない。
   部品：header／footer／hero／search／carousel／article-card／rank-card／score-bar／tag／table／tabs／toc／cta／banner／sidebar／supervisor／share
   寸法・色は tokens.css の変数だけで指定（11-B-2）。8px グリッド。 */
.fk-wrap { max-width: var(--fk-wide-w); margin: 0 auto; padding: 0 var(--fk-sp-2); }
.fk-content { max-width: var(--fk-content-w); }
.fk-num { white-space: nowrap; }   /* 数字＋単位は割らない */

/* ---- header（2段）---- */
.fk-header { background: var(--fk-bg); border-bottom: 1px solid var(--fk-rule); position: sticky; top: 0; z-index: 30; }
.fk-header-1 { display: flex; align-items: center; justify-content: space-between; height: var(--fk-header-h); gap: var(--fk-sp-2); }
.fk-logo { font-weight: 800; font-size: 22px; color: var(--fk-primary); text-decoration: none; width: var(--fk-logo-w); }
/* **flex の子は既定で min-width:auto。中身より狭くならないので、狭い幅で親からはみ出す。**
   2026-09-07：恋愛（fuku2）が 320px で「バッジ2枚 178+150=328px が幅288pxに入らず、ページ全体に横スクロール」、
   エンジニア（fuku3）が同じ所で「文書幅 606px（画面320）」を独立に実測。**2作業場が別々に同じ穴を踏んだ**ので直す。 */
.fk-badges { display: flex; flex-wrap: wrap; gap: var(--fk-sp-1); align-items: center; min-width: 0; }
.fk-badge { font-size: var(--fk-fs-xs); border: 1px solid var(--fk-primary); color: var(--fk-primary); border-radius: 4px; padding: 2px 8px; white-space: nowrap; }
.fk-counts { display: flex; gap: var(--fk-sp-2); font-size: var(--fk-fs-sm); color: var(--fk-muted); }
.fk-counts b { color: var(--fk-heading); font-size: 18px; }
.fk-header-2 { display: flex; align-items: center; justify-content: space-between; height: var(--fk-header2-h); border-top: 1px solid var(--fk-rule); }
.fk-nav { display: flex; gap: var(--fk-sp-3); list-style: none; margin: 0; padding: 0; }
.fk-nav a { text-decoration: none; color: var(--fk-heading); font-weight: 700; font-size: 15px; }
.fk-menu-btn { display: none; }
@media (max-width: 768px) {
  .fk-header-2 { display: none; }
  .fk-menu-btn { display: inline-block; border: 1px solid var(--fk-rule); border-radius: var(--fk-radius); padding: 6px 12px; font-weight: 700; background: none; }
  .fk-counts { display: none; }
  /* **ここは「隠す」ではなく「2段にする」（2026-09-07・相続 fuku4 の読みで直した）。**
     トークンは ≤768px で `--fk-header-h` が 72→**112px**（＝72＋`--fk-header2-h` 40）になる。
     これは**ファクログの実測どおり**（375/768 で 112px・1280 で 72px）で、**もともと2段になる想定**だった。
     抜けていたのは折り返しの規則だけで、**高さだけ2段ぶん取って中身は一列**という形になっていた。
     ロゴ＋バッジ2つ＋MENU（336px超）が幅288pxの紙に一列で入らず、はみ出していた。
     → **1段目＝ロゴ＋MENU、2段目＝バッジ**に分ける。112px を使い切り、**バッジも消さずに済む**。 */
  .fk-header-1 { height: auto; min-height: var(--fk-header-h); flex-wrap: wrap; align-content: center; row-gap: 0; }
  .fk-header-1 .fk-badges { order: 3; width: 100%; min-height: var(--fk-header2-h); justify-content: flex-start; }
  .fk-menu { position: fixed; inset: 0; background: var(--fk-bg); z-index: 40; padding: var(--fk-sp-3); overflow: auto; }
  .fk-menu[hidden] { display: none; }
  .fk-menu .fk-nav { flex-direction: column; gap: var(--fk-sp-2); }
  .fk-menu .fk-entry { display: grid; gap: var(--fk-sp-1); margin-top: var(--fk-sp-3); }
}

/* ---- cta（オレンジ・2行型）---- */
.fk-cta { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--fk-cta-h); padding: 6px 20px; background: var(--fk-accent); color: #fff; border-radius: var(--fk-cta-radius); font-weight: 800; text-decoration: none; line-height: 1.25; text-align: center; }
.fk-cta small { font-size: var(--fk-fs-xs); font-weight: 700; opacity: .95; }
.fk-cta:hover { background: var(--fk-accent-deep); }
.fk-cta-block { display: flex; width: 100%; }
.fk-btn { display: inline-block; min-height: var(--fk-btn-h); line-height: var(--fk-btn-h); padding: 0 16px; border: 2px solid var(--fk-primary); color: var(--fk-primary); border-radius: var(--fk-radius); font-weight: 700; text-decoration: none; background: #fff; }
.fk-pr { font-size: var(--fk-fs-xs); color: var(--fk-muted); }
.fk-cta-bar { display: none; }
@media (max-width: 768px) { .fk-cta-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--fk-rule); z-index: 20; } .fk-cta-bar .fk-cta { width: 100%; } body { padding-bottom: 72px; } }

/* ---- hero（左3行キャッチ・右ロゴ枠）---- */
.fk-hero { background: var(--fk-primary-pale); padding: var(--fk-sp-4) 0; }
.fk-hero-inner { display: grid; grid-template-columns: 1fr 320px; gap: var(--fk-sp-3); align-items: center; }
.fk-hero-copy p { margin: 0; }
.fk-hero-lines { font-size: 30px; font-weight: 800; line-height: 1.35; color: var(--fk-heading); }
.fk-hero-lines b { color: var(--fk-primary); }
.fk-hero-eyebrow { font-size: var(--fk-fs-sm); color: var(--fk-muted); margin-bottom: var(--fk-sp-1); }
.fk-hero-visual { aspect-ratio: 4 / 3; border-radius: var(--fk-radius-lg); background: #fff; box-shadow: var(--fk-shadow); display: flex; align-items: center; justify-content: center; overflow: hidden; }
@media (max-width: 768px) { .fk-hero-inner { grid-template-columns: 1fr; } .fk-hero-lines { font-size: 24px; } }

/* ---- search ---- */
.fk-search { display: flex; gap: var(--fk-sp-1); margin: var(--fk-sp-3) 0; }
.fk-search input { flex: 1; min-height: var(--fk-btn-h); border: 1px solid var(--fk-rule); border-radius: var(--fk-radius); padding: 0 12px; font-size: var(--fk-fs); }
.fk-search button { min-height: var(--fk-btn-h); padding: 0 16px; background: var(--fk-primary); color: #fff; border: 0; border-radius: var(--fk-radius); font-weight: 700; }
.fk-search-hits { list-style: none; padding: 0; margin: 4px 0 0; border: 1px solid var(--fk-rule); border-radius: var(--fk-radius); }
.fk-search-hits li a { display: block; padding: 8px 12px; border-top: 1px solid var(--fk-rule); text-decoration: none; }
.fk-search-hits li:first-child a { border-top: 0; }

/* ---- carousel（横スクロール・自動送りなし）---- */
.fk-carousel { display: flex; gap: var(--fk-sp-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--fk-sp-1); }
.fk-carousel > * { flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 769px) { .fk-carousel > * { flex-basis: 32%; } }
.fk-carousel-nav { display: flex; gap: var(--fk-sp-1); justify-content: flex-end; }
.fk-carousel-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fk-rule); background: #fff; }

/* ---- article-card（サムネ 1200×630・日付・題・カテゴリ）---- */
.fk-articles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fk-sp-3); }
.fk-articles.fk-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .fk-articles, .fk-articles.fk-cols-3 { grid-template-columns: 1fr; } }
.fk-article { display: block; text-decoration: none; color: inherit; border-radius: var(--fk-radius); overflow: hidden; background: #fff; box-shadow: var(--fk-shadow); }
.fk-article img { width: 100%; aspect-ratio: var(--fk-thumb-ratio); object-fit: cover; display: block; }
.fk-article-body { padding: 12px var(--fk-card-pad) var(--fk-card-pad); }
.fk-article-meta { display: flex; gap: var(--fk-sp-1); font-size: var(--fk-fs-xs); color: var(--fk-muted); margin-bottom: 4px; }
.fk-article-cat { color: var(--fk-primary); font-weight: 700; }
.fk-article-title { font-weight: 700; line-height: 1.5; margin: 0; }

/* ---- rank-card（1社ブロック：順位・ロゴ枠・点数・バー4・説明・タグ・表・ボタン）---- */
.fk-rank { background: #fff; border: 1px solid var(--fk-rule); border-top: var(--fk-card-border); border-radius: var(--fk-radius); padding: var(--fk-card-pad); box-shadow: var(--fk-shadow); margin: 0 0 var(--fk-card-mb); }
.fk-rank-head { display: grid; grid-template-columns: 56px 120px 1fr; gap: var(--fk-sp-2); align-items: center; }
.fk-rank-no { width: 56px; height: 56px; border-radius: 50%; background: var(--fk-primary); color: #fff; font-weight: 800; font-size: 24px; display: flex; align-items: center; justify-content: center; }
.fk-rank-no.is-1 { background: #f5b301; color: var(--fk-heading); }   /* 1位の丸は**背景**なので明るい色でよい（文字色は --fk-heading で AA） */
.fk-logo-box { width: 120px; height: 64px; border: 1px solid var(--fk-rule); border-radius: var(--fk-radius); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fk-fs-sm); text-align: center; padding: 4px; background: #fff; }
.fk-rank-name { margin: 0; font-size: 20px; }
.fk-rank-score { font-size: var(--fk-fs-sm); color: var(--fk-muted); }
.fk-rank-score b { color: var(--fk-score); font-size: 20px; }   /* **点数の文字**。白地で AA を通す濃さ（--fk-score） */
.fk-rank-desc { margin: var(--fk-sp-2) 0; }
.fk-rank-table { width: 100%; border-collapse: collapse; font-size: var(--fk-fs-sm); margin: var(--fk-sp-2) 0; }
.fk-rank-table th, .fk-rank-table td { border: 1px solid var(--fk-rule); padding: 8px; text-align: left; }
.fk-rank-table th { background: var(--fk-primary-pale); width: 34%; }
@media (max-width: 768px) { .fk-rank-head { grid-template-columns: 48px 1fr; } .fk-logo-box { display: none; } .fk-rank-no { width: 48px; height: 48px; font-size: 20px; } }

/* ---- score-bar（4本・自社値と中央値）---- */
.fk-bars { list-style: none; padding: 0; margin: var(--fk-sp-2) 0 0; display: grid; gap: 6px; }
.fk-bars li { display: grid; grid-template-columns: 9em 1fr auto; gap: 8px; align-items: center; font-size: var(--fk-fs-sm); }
.fk-bar { height: 10px; background: var(--fk-primary-pale); border-radius: 5px; position: relative; overflow: hidden; }
.fk-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fk-primary); border-radius: 5px; }
.fk-bar em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--fk-danger); }  /* 中央値 */
.fk-bars b { white-space: nowrap; }

/* ---- tag（チップ・点灯/消灯）---- */
.fk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--fk-sp-1) 0; }
.fk-tag { font-size: var(--fk-fs-xs); border-radius: 999px; padding: 3px 10px; background: var(--fk-primary-pale); color: var(--fk-primary-deep); }
.fk-tag.is-off { background: transparent; color: var(--fk-muted); border: 1px solid var(--fk-rule); text-decoration: line-through; }

/* ---- table（横スクロール＋1列目固定）---- */
.fk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--fk-rule); border-radius: var(--fk-radius); }
.fk-table { border-collapse: collapse; min-width: 640px; width: 100%; font-size: var(--fk-fs-sm); }
.fk-table th, .fk-table td { padding: var(--fk-cell-pad) 10px; border-bottom: 1px solid var(--fk-rule); text-align: left; white-space: nowrap; }
.fk-table thead th { background: var(--fk-th-bg); position: sticky; top: 0; }
.fk-table th:first-child, .fk-table td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 var(--fk-rule); }
.fk-table thead th:first-child { z-index: 2; background: #f2f2f2; }   /* th-bg は半透明なので固定列では不透明の近い色 */

/* ---- tabs（並べ替え）---- */
.fk-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--fk-rule); margin: var(--fk-sp-3) 0 var(--fk-sp-2); overflow-x: auto; }
.fk-tab { padding: 10px 16px; font-weight: 700; color: var(--fk-muted); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; cursor: pointer; }
.fk-tab[aria-selected="true"] { color: var(--fk-primary); border-bottom-color: var(--fk-primary); }
.fk-tabpanel[hidden] { display: none; }

/* ★★**タブ4個のうち、320 / 360 / 390px のどれでも完全に見えているのは 2個だけだった（2026-09-11 実測）。**
   中身 482px に対して枠は 240 / 277 / 306px。`overflow-x: auto` なので指では出せるが、
   ★**スクロールできる合図が無い**（mask も背景のぼかしも `none`）。
   ——**「許可番号あり」「費用の明示あり」「未経験可あり」の後ろ2つに、読者が気づけない。**
   SITE_REVIEW_STANDARD 付録A:「収まらないなら、文字を縮めるのではなくレイアウトそのものを変えてください」。
   → **狭い幅では折り返す。**
   ⚠ オーナー指示（2026-09-08）「入りきらんやつは横スクロールにして」は **表**についての指示。
     **タブは押して切り替える道具なので、見えていないと押せない。**
   ⚠ **`.fk-tabs` が在るのは `/service/` の1枚だけ**（dist 全90枚を数えた）。
   ⚠ **`/service/` は 2026-09-11 04:1x に snippet 実験の対照群から外してある**（理由も書いた）。
   ★ **560px では足りなかった（2026-09-11 実測）。**561px で 482/466 の **16px はみ出し**が残った。
   1段で収まるのに要るのは中身 482px なので、**600px まで折り返す。** */
@media (max-width: 600px) {
  .fk-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }
  .fk-tab { padding: 10px 12px; }
}

/* ---- toc（表示/非表示トグル）---- */
.fk-toc { border: 1px solid var(--fk-rule); border-radius: var(--fk-radius); padding: 12px 16px; margin: var(--fk-sp-3) 0; background: #fff; }
.fk-toc summary { font-weight: 700; cursor: pointer; }
.fk-toc ol { margin: 8px 0 0; padding-left: 20px; }
.fk-toc ol ol { padding-left: 16px; font-size: var(--fk-fs-sm); }

/* ---- banner（口コミ投稿／広告掲載・2枚横並び）---- */
.fk-banners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fk-sp-2); margin: var(--fk-sp-4) 0; }
@media (max-width: 768px) { .fk-banners { grid-template-columns: 1fr; } }
.fk-banner { display: block; text-decoration: none; color: inherit; border: 2px solid var(--fk-primary); border-radius: var(--fk-radius-lg); padding: var(--fk-sp-3); text-align: center; font-weight: 800; background: var(--fk-primary-pale); }
.fk-banner small { display: block; font-weight: 400; color: var(--fk-muted); margin-top: 4px; }
/* 一括見積もりCTA型（ロゴ枠5＋ボタン） */
.fk-bulk { border: 1px solid var(--fk-rule); border-radius: var(--fk-radius-lg); padding: var(--fk-sp-3); text-align: center; background: #fff; box-shadow: var(--fk-shadow); }
.fk-bulk-logos { display: flex; gap: var(--fk-sp-1); justify-content: center; flex-wrap: wrap; margin-bottom: var(--fk-sp-2); }
.fk-bulk-logos .fk-logo-box { width: 100px; height: 52px; }

/* ---- sidebar（PC右カラム／スマホは本文の下）---- */
.fk-layout { display: grid; grid-template-columns: 1fr var(--fk-side-w); gap: var(--fk-sp-4); }
@media (max-width: 1024px) { .fk-layout { grid-template-columns: 1fr; } }
.fk-side > section { margin-bottom: var(--fk-sp-4); }
.fk-side h2 { font-size: var(--fk-h3); border-left-width: 4px; margin-top: 0; }
.fk-side-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--fk-sp-1); }
.fk-side-list a { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; text-decoration: none; color: inherit; font-size: var(--fk-fs-sm); font-weight: 700; }
.fk-side-list img { width: 96px; aspect-ratio: var(--fk-thumb-ratio); object-fit: cover; border-radius: 4px; }
.fk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fk-chip { font-size: var(--fk-fs-xs); border: 1px solid var(--fk-rule); border-radius: 999px; padding: 4px 10px; text-decoration: none; color: var(--fk-heading); background: #fff; }

/* ---- supervisor（監修者→編集部ブロック）---- */
.fk-super { display: grid; grid-template-columns: 72px 1fr; gap: var(--fk-sp-2); border: 1px solid var(--fk-rule); border-radius: var(--fk-radius-lg); padding: var(--fk-card-pad); background: #fff; margin: var(--fk-sp-3) 0; }
.fk-super-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--fk-primary-pale); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--fk-primary); }
.fk-super-name { font-weight: 800; margin: 0; }
.fk-super-role { font-size: var(--fk-fs-sm); color: var(--fk-muted); margin: 2px 0 8px; }
.fk-super details summary { color: var(--fk-primary); cursor: pointer; font-size: var(--fk-fs-sm); }

/* ---- share ---- */
.fk-share { display: flex; gap: var(--fk-sp-1); align-items: center; margin: var(--fk-sp-2) 0; }
.fk-share a { font-size: var(--fk-fs-xs); border: 1px solid var(--fk-rule); border-radius: 4px; padding: 4px 10px; text-decoration: none; color: var(--fk-heading); }

/* ---- footer ---- */
.fk-footer { background: var(--fk-primary-pale); margin-top: var(--fk-sp-8); padding: var(--fk-sp-6) 0 var(--fk-sp-4); font-size: var(--fk-fs-sm); }
.fk-footer h2 { font-size: var(--fk-fs); border: 0; padding: 0; margin: var(--fk-sp-3) 0 var(--fk-sp-1); }
.fk-footer .fk-chips { margin-bottom: var(--fk-sp-2); }
.fk-pref { columns: 4; column-gap: var(--fk-sp-2); }
@media (max-width: 768px) { .fk-pref { columns: 2; } }
.fk-footer-links { display: flex; flex-wrap: wrap; gap: var(--fk-sp-2); list-style: none; padding: 0; margin: var(--fk-sp-3) 0; }
.fk-copy { color: var(--fk-muted); font-size: var(--fk-fs-xs); margin-top: var(--fk-sp-3); }

/* ---- 信頼の帯・パンくず（共通）---- */
.fk-crumb { font-size: var(--fk-fs-xs); color: var(--fk-muted); margin: var(--fk-sp-2) 0; }
.fk-trust { font-size: var(--fk-fs-xs); color: var(--fk-muted); margin: 4px 0 var(--fk-sp-2); }

/* ---- flex の min-width:auto をまとめて外す（2026-09-07・fuku3 の実測） ----
   **同じ根で3か所が縮まなかった。**中身（画像の実寸・input の既定幅）が最小幅を決めてしまう形。 */
.fk-hero-inner > *, .fk-hero-visual { min-width: 0; }          /* 画像の実寸でヒーローが広がる */
.fk-search { flex-wrap: wrap; }
.fk-search input { min-width: 0; }                              /* 入力欄が縮まない */
.fk-rank, .fk-rank-head > * { min-width: 0; }                   /* 順位カードが縮まない */
.fk-layout > *, .fk-articles > * { min-width: 0; }              /* 同じ根の予防（本文と記事カード） */


/* ---- このサイトの色（tokens の実測値を上書き。寸法は触らない）---- */
:root{
  --fk-primary:#00587F;        /* 既存 --fc-navy（見出し・リンクの紺） */
  --fk-primary-deep:#003f5c;
  --fk-primary-pale:#EEF1F4;   /* 既存 --gray-pale（面・帯） */
  --fk-accent:#B6111C;         /* 既存 --red（CTA） */
  --fk-accent-deep:#8f0d16;    /* 既存 --red-dark */
  --fk-text:#231815;           /* 既存 --ink */
  --fk-heading:#231815;
  --fk-rule:#DDDFE3;           /* 既存 --gray-line */
  --fk-muted:#736C68;          /* 2026-09-06: 元は #78706C（既存 --ink-3）。ヒーローの淡青地 #EEF1F4 の上で 4.28 と AA(4.5) を割っていたので少し暗くした。淡青地 4.55／白地 5.15 */
  --fk-font:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","Noto Sans JP","ヒラギノ角ゴ Pro W3",メイリオ,sans-serif;  /* 既存 --font */
  --fk-wide-w:1110px;          /* 既存 --w */
}

/* ---- このサイトでの部品の当て方（キット v1.1 に無いものだけ）----
   ★2026-09-06 18:2x: キット v1.1（fuku5）が、こちらが実測して送った5件を取り込んだので、
     **重複していた規則をここから消した**（.fk-badges の折り返しと768px以下で隠す／.fk-hero-inner > * と .fk-hero-visual の min-width:0／
     .fk-search の折り返しと入力欄の min-width:0／.fk-rank と .fk-rank-head > * の min-width:0）。
     旧CSSを残して上書きを足さない、という決めに従って**同じ規則を2か所に置かない**。 */
.fk-logo{display:inline-flex;align-items:center;gap:8px}
.fk-logo svg{color:var(--fk-accent);flex:none}
.fk-hero-sub{font-size:var(--fk-fs);margin:var(--fk-sp-2) 0 0}
.fk-hero-entry{display:flex;flex-wrap:wrap;gap:var(--fk-sp-1);margin:var(--fk-sp-2) 0 0}
.fk-hero-visual img{width:100%;height:100%;max-width:100%;object-fit:cover;display:block}
.fk-article-desc{font-size:var(--fk-fs-sm);color:var(--fk-muted);margin:6px 0 0;line-height:1.7}
.fk-hero .fk-trust span{white-space:nowrap}

/* ---- Codex P1/P2（2026-09-06 Day2）---- */
.fk-cta-plain{background:var(--fk-primary)}                       /* 広告でない CTA（社名ページ・参加中が無いとき）は紺 */
.fk-cta-why{font-size:var(--fk-fs-xs);color:var(--fk-muted);margin-left:8px;white-space:nowrap}   /* 広告枠の決め方（/about/#koukoku） */
/* 下の固定CTAは1行に固定＝高さが増えて本文を隠さない（2026-09-06・重複していた2つの規則を1つにまとめた） */
.fk-cta-bar .fk-cta{width:100%;min-height:56px;max-height:56px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 12px}
@media (max-width:768px){ body{padding-bottom:calc(72px + env(safe-area-inset-bottom))} }
html:not(.js) .fk-search, html:not(.js) .fk-tabs, html:not(.js) .fk-carousel-nav{display:none}   /* JS が無いときは動かない道具を出さない（札と一覧は残る） */
html:not(.js) .fk-tabpanel[hidden]{display:block}                                                 /* JS が無いときは軸ごとの一覧も全部見える */

/* ★点数の色に「星の色」を使わない（2026-09-06 実測: 元の #f5b301 は白地で 1.85・20px の基準 3 を割っていた）。
   キット v1.1 は #8a6100 に直したので基準は通るが、**このサイトは星を出さない**ので、星用の色を数字に使う理由がない。見出しと同じ紺にする。 */
.fk-rank-score b { color: var(--fk-primary) }

/* ランキングの並び（.rank-grid はこのサイトの器）。カードの中の表は狭いときだけ横に流す */
.rank-grid > * { min-width: 0 }
.fk-rank .fk-rank-table { display: block; overflow-x: auto; white-space: nowrap }
@media (min-width: 601px) { .fk-rank .fk-rank-table { display: table; white-space: normal } }

/* ★狭い画面での折り返し（2026-09-06 実測）。
   申込ボタンは中身300px＞枠213px、カードの見出しは「エンジニアデータバンク」で中身268px＞枠213px。
   どちらも**組版の都合で nowrap の塊に包まれていて折り返せない**のが原因。ボタンは overflow:hidden なので、そのままだと文字が切れる。 */
@media (max-width: 480px) {
  .fk-rank .shine-btn .nowrap-x, .fk-rank .shine-btn .nowrap-u,
  .fk-rank .rank-cta .nowrap-x, .fk-rank .rank-cta .nowrap-u { white-space: normal }
  .fk-rank-name, .fk-rank-name a { overflow-wrap: anywhere }
  .fk-rank-name .nowrap-u, .fk-rank-name .nowrap-x { white-space: normal }
  .fk-rank-name { font-size: 17px }
}

/* ★部品の境界だけ、見える濃さにする（2026-09-07 00:1x・fuku6 の実測を受けて）
   fuku6 が v1.1 の色を測ったら6件が基準を割っていた。**こちらの本番に出ていたのは2件**——
   **入力欄の枠とチップの枠**。しかも**こちらのほうが悪い**（正本 #bfbfbf で 1.84、こちらは
   `--fk-rule: #DDDFE3` に上書きしているので **1.33**。基準は 3.0）。
   ★**こちらの `contrast-check` は見つけられない。**あれは**文字の色と地色**しか比べておらず、
     **枠の色を見ていない**（`getComputedStyle(e).color` と背景だけ）。**判定の対象が違う。**
   ★**表の罫線は装飾なので基準は掛からない**（fuku6 の整理）。**`--fk-rule` は表のために残す。**
     **部品の境界（入力欄・チップ）だけ**を分けて濃くする。
   ★**これは v1.2 が配られるまでの仮置き。**正本に `--fk-border-ui` が入ったら、この節は消す
     （旧CSSを残して上書きを足さない、という決めのため。**いま2か所にあることを承知で置いている**）。 */
:root{ --fk-border-ui:#767676 }   /* 白地で 4.54。基準3.0 を超える */
.fk-search input{ border:1px solid var(--fk-border-ui) }   /* **省略形で書く。**border-color だけだと、静的に読む道具が拾えない（2026-09-07 実測） */
.fk-chip{ border:1px solid var(--fk-border-ui) }
/* ★実画面で測ったら、fuku6 の一覧に無い部品も3つ割っていた（2026-09-07 00:2x・390px の computed style）。
   MENU ボタン 1.33 ／ カルーセルの前後ボタン 1.33 ／ 検索候補の枠 1.33。**どれも押せる部品の境界。**
   静的に読む道具は「同じセレクタの後続規則で色を見失う」ので、**描かせて測らないと出ない。** */
.fk-menu-btn{ border:1px solid var(--fk-border-ui) }
.fk-carousel-nav button{ border:1px solid var(--fk-border-ui) }
.fk-search-hits{ border:1px solid var(--fk-border-ui) }
.fk-search-hits li a{ border-top:1px solid var(--fk-rule) }   /* 候補どうしの区切りは装飾。枠だけ濃くする */

/* ★入力する部品と押すボタンの枠（2026-09-07 00:5x・枠の検査を足して見つかった残り4件）
   ・`/kuchikomi/` の投稿フォームは **ブラウザ既定の #bfbfbf**（1.84）。キットにも当サイトのCSSにも規則が無かった。
   ・トップの淡い地の上のボタンは **枠 #DDDFE3 / 地 rgb(228,218,203) で 1.04**——**枠と地がほぼ同色**で、
     境界が見えていない。**「薄い」ではなく「見えない」。**
   **枠の色は、その部品が乗っている地との対比で決まる。**白の上で足りていても、淡い地の上では足りない。 */
input:not([type=hidden]):not([type=submit]), select, textarea { border: 1px solid var(--fk-border-ui) }
button { border-color: var(--fk-border-ui) }