/* =============================================================
   GENBA EDITORIAL v1 — ハブA「SGL — 製造現場AI研究室」
   意匠正本: web-design-master_SKILL.md（発明禁止・トークン厳守）
   紙 #F6F4EF / インク #1A1C20 / サブ #565B63 / 罫 #DBD5C9
   アクセント（ハブA・鉄紺）#1E3A5F
   見出し: Shippori Mincho / 本文: Noto Sans JP系
   角丸は最大4px・影なし・グラデーションなし（hairline罫で区切る）
   ============================================================= */

/* ---------- 1. トークン ---------- */
:root{
  --paper:#F6F4EF;              /* 紙 */
  --card:#FCFBF7;               /* 図版・表・フォームの地（紙より半段白い） */
  --txt:#1A1C20;                /* 本文インク */
  --ink:#1A1C20;
  --dim:#565B63;                /* サブ */
  --sub:#565B63;
  --line:#DBD5C9;               /* 罫線 */
  --acc:#1E3A5F;                /* 鉄紺（ハブAはこの1色のみ） */
  --acc-soft:rgba(30,58,95,.055);
  --serif:'Shippori Mincho',"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

/* ---------- 2. ベース ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);color:var(--txt);
  font-family:var(--sans);
  font-size:16px;line-height:1.95;
  border-top:3px solid var(--acc);   /* 極細のアクセント色トップバー */
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
.wrap{max-width:720px;margin:0 auto;padding:0 22px 72px}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
strong{color:var(--txt)}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- 3. サイト頭（サイトコード＋横並びセクション索引） ---------- */
header.site{padding:22px 0 14px;border-bottom:1px solid var(--txt);margin-bottom:12px}
header.site a{text-decoration:none}
.sitecode{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.05em;line-height:1.4}
.sitecode a{color:var(--txt)}
.sitenav{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:8px}
.sitenav a{color:var(--dim);font-size:12px;letter-spacing:.1em;padding:4px 0}
.sitenav a:hover{color:var(--acc)}
header.site .tag{display:block;color:var(--dim);font-size:12px;line-height:1.7;margin-top:6px}

/* ---------- 4. 見出し・記事体裁 ---------- */
h1{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1.55;
  letter-spacing:.02em;margin:14px 0 12px;text-wrap:balance}
h2{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.6;
  letter-spacing:.02em;margin:48px 0 14px;padding-bottom:8px;
  border-bottom:1px solid var(--line);text-wrap:balance}
h3{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.7;margin:32px 0 10px}
p{margin:16px 0}
ul,ol{margin:16px 0 16px 26px}
li{margin:8px 0}

/* kicker（分類小見出し・英小文字トラッキング広め） */
.kicker{font-size:11px;letter-spacing:.22em;text-transform:lowercase;
  color:var(--acc);margin:26px 0 0;font-weight:500}

/* 文書番号データ行（コード｜初版日｜改訂日） */
.doc-data{font-size:12px;letter-spacing:.06em;color:var(--dim);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:7px 0;margin:14px 0 22px}

@media (max-width:480px){
  h1{font-size:23px}
  h2{font-size:18.5px}
  .wrap{padding:0 16px 56px}
}

/* ---------- 5. 索引（番号付き索引リスト・新聞の目次型） ---------- */
.index-list{list-style:none;margin:0 0 8px;border-top:1px solid var(--line)}
.index-list li{margin:0;padding:14px 0 15px;border-bottom:1px solid var(--line)}
.index-list a{text-decoration:none;display:block}
.index-list a:hover .idx-title{color:var(--acc);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.idx-code{display:inline-block;font-size:11.5px;letter-spacing:.14em;color:var(--acc);
  min-width:6.2em;font-weight:500}
.idx-title{font-family:var(--serif);font-weight:600;font-size:16.5px;
  line-height:1.7;color:var(--txt)}
.idx-meta{display:block;color:var(--dim);font-size:13px;line-height:1.8;
  margin-top:4px;padding-left:0}

/* ハブトップのセクション見出し行 */
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;border-bottom:none;padding-bottom:0}
.sec-head .sec-no{font-family:var(--serif);font-size:15px;color:var(--acc);letter-spacing:.08em}
.sec-head a{color:var(--txt);text-decoration:none}
.sec-head a:hover{color:var(--acc)}
.sec-head .sec-tag{color:var(--dim);font-size:12.5px;font-weight:400;font-family:var(--sans);letter-spacing:.02em}

/* 関連セクション（記事末尾の小さな索引） */
.rel-list{list-style:none;margin:0;border-top:1px solid var(--line)}
.rel-list li{margin:0;padding:11px 0 12px;border-bottom:1px solid var(--line)}
.rel-list a{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--txt);text-decoration:none}
.rel-list a:hover{color:var(--acc);text-decoration:underline}
.rel-list .idx-meta{margin-top:2px}

/* 旧カードのフォールバック（罫のみ・面や影は使わない） */
.card{border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin:14px 0;background:transparent}
.card a{color:var(--txt);text-decoration:none;font-weight:600;font-family:var(--serif)}
.card a:hover{color:var(--acc);text-decoration:underline}
.card .meta{margin:6px 0 0}

/* ---------- 6. 汎用テキスト ---------- */
.meta{color:var(--dim);font-size:13px;line-height:1.8}
.small{font-size:12.5px;color:var(--dim)}
.divider{border:none;border-top:1px solid var(--line);margin:44px 0 36px}
.crumb{color:var(--dim);font-size:12px;letter-spacing:.04em;margin:2px 0 4px}
.crumb a{color:var(--dim);text-decoration:none;display:inline-block;padding:5px 0}
.crumb a:hover{color:var(--acc)}
.pr-note{margin:0 0 20px;letter-spacing:.02em}

/* ---------- 7. 出典（末尾脚注型） ---------- */
.footnotes{border-top:1px solid var(--line);margin-top:52px;padding-top:4px}
.fn-label{font-family:var(--sans);font-size:11px;letter-spacing:.22em;color:var(--dim);
  font-weight:500;border-bottom:none;margin:14px 0 4px;padding-bottom:0}
.footnotes p,.footnotes li{color:var(--dim);font-size:13px;line-height:1.9}
.footnotes p{margin:8px 0}
.fn-list{margin:8px 0 8px 24px}
.fn-list li{margin:5px 0}
.footnotes a{color:var(--dim)}
.fn-note{font-size:12.5px}
/* 旧 .src フォールバック */
.src{color:var(--dim);font-size:13px;line-height:1.9;border-top:1px solid var(--line);
  padding-top:12px;margin-top:44px}
.src a{color:var(--dim)}

/* ---------- 8. 目次・要点・注意書き ---------- */
.toc{border:1px solid var(--line);border-radius:2px;padding:14px 18px;margin:24px 0;background:transparent}
.toc-title{font-size:11px;font-weight:500;color:var(--dim);letter-spacing:.2em;margin:0}
.toc ol{margin:10px 0 0 22px;font-size:14px}
.toc li{margin:5px 0}
.toc a{color:var(--txt);text-decoration:none;display:inline-block;padding:2px 0}
.toc a:hover{color:var(--acc);text-decoration:underline}

.keypoint{background:var(--acc-soft);border-left:2px solid var(--acc);
  border-radius:0;padding:14px 18px;margin:24px 0}
.keypoint-title{font-size:11px;font-weight:500;color:var(--acc);letter-spacing:.2em;margin:0}
.keypoint ul,.keypoint ol{margin:10px 0 0 22px;font-size:14.5px}
.keypoint li{margin:6px 0}

.note{border:1px solid var(--line);border-radius:2px;background:transparent;
  padding:13px 17px;font-size:13.5px;line-height:1.9;color:var(--dim);margin:28px 0}

/* ---------- 9. 表・図解 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;
  background:var(--card);border:1px solid var(--line);border-radius:0}
th,td{padding:9px 13px;border:1px solid var(--line);text-align:left;vertical-align:top;min-width:6em}
th{background:var(--acc-soft);font-weight:600;white-space:nowrap;font-family:var(--serif)}

/* ---------- 9b. リッチ比較表 .rich-compare（柱・money記事用） ----------
   規格: web-design-master_SKILL.md §8。先頭列sticky・記号◎○△—・凡例必須・
   横スクロール可・星評価/王冠/順位数字は実装しない（レッドライン）。 */
:root{--acc-soft-solid:#F0F0EF}   /* acc-soft を card 上で不透明化した実色（sticky列の地） */
.rich-compare{margin:28px 0}
.rc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--card)}
.rich-compare table{border-collapse:separate;border-spacing:0;border:none;width:max-content;min-width:100%;background:var(--card)}
.rich-compare th,.rich-compare td{border:none;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:10px 13px;font-size:13.5px;line-height:1.75;vertical-align:top;background:var(--card);
  min-width:11em;max-width:19em;white-space:normal}
.rich-compare tr>*:last-child{border-right:none}
.rich-compare tbody tr:last-child>*{border-bottom:none}
.rich-compare thead th{background:var(--acc-soft-solid);font-family:var(--serif);font-weight:600}
.rc-name{display:block;font-size:14.5px;line-height:1.6}
.rc-tag{display:block;font-family:var(--sans);font-weight:400;color:var(--dim);
  font-size:11.5px;line-height:1.7;letter-spacing:.02em;margin-top:3px}
/* 先頭列（属性名）: sticky */
.rc-col1{position:sticky;left:0;z-index:2;background:var(--acc-soft-solid);
  font-family:var(--serif);font-weight:600;font-size:13px;
  min-width:7.5em;max-width:9em;box-shadow:1px 0 0 var(--line)}
.rich-compare thead .rc-col1{z-index:3}
/* 記号（◎○△—）: 出典事実の翻訳のみ。星・順位は使わない */
.rc-mark{font-family:var(--sans);font-weight:700;font-size:15px;display:inline-block;margin-right:5px;line-height:1.4}
.rc-mark.m-yes{color:var(--acc)}      /* ◎ 公式資料に明記 */
.rc-mark.m-part{color:var(--txt)}     /* ○ 条件付き・一部 */
.rc-mark.m-weak{color:var(--dim)}     /* △ 弱い・要確認 */
.rc-mark.m-no{color:var(--dim)}       /* — 非対応 */
.rc-why{display:block;color:var(--dim);font-size:12px;line-height:1.7;margin-top:2px}
/* 「詳細を見る」行 */
.rc-detail td{padding:9px 13px}
.rc-detail a{font-family:var(--serif);font-weight:600;font-size:13px;color:var(--acc);text-decoration:none}
.rc-detail a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* 凡例（表直下に必ず置く） */
.rc-legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;
  margin:10px 0 0;padding:0;font-size:12px;color:var(--dim);line-height:1.8}
.rc-legend li{margin:0}
.rc-legend .rc-mark{font-size:13px;margin-right:4px}
.rc-caption{color:var(--dim);font-size:12.5px;line-height:1.8;margin:8px 0 0}

.fig{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:20px;margin:28px 0}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{color:var(--dim);font-size:12.5px;line-height:1.7;margin-top:12px}
.fig .fig-src{display:block;font-size:12px;margin-top:2px}

/* ---------- 10. 広告枠（「広告」ラベル付きの静かな枠・1画面1枠まで） ---------- */
.ad-slot{margin:32px 0;border:1px solid var(--line);border-radius:2px;padding:14px;text-align:center}
.ad-slot::before{content:"広告";display:block;font-size:10px;letter-spacing:.3em;
  color:var(--dim);margin-bottom:8px}
.ad-slot:empty{display:none;border:none;padding:0;margin:0}
.rec-lead{margin:0 0 8px;font-size:14px}
.rec-note{margin:8px 0 0;font-size:11px;color:var(--muted,#888)}

/* ---------- 11. 導線（診断LP等・静かな罫線リンク） ---------- */
.cta{display:block;text-align:center;padding:13px 18px;margin:32px 0 4px;
  background:transparent;color:var(--acc);border:1px solid var(--acc);
  border-radius:2px;font-weight:600;font-size:14.5px;letter-spacing:.03em;
  text-decoration:none;font-family:var(--serif)}
.cta:hover{background:var(--acc-soft)}
.cta-note{display:block;text-align:center;color:var(--dim);font-size:12px;margin:6px 0 24px}

/* ---------- 12. フォーム（contact） ---------- */
input[type="text"],input[type="email"],select,textarea{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:2px;
  background:var(--card);color:var(--txt);font-size:16px;font-family:var(--sans)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);outline:none}
button.cta{width:100%;cursor:pointer}

/* ---------- 13. フッター（5リンク） ---------- */
footer{color:var(--dim);font-size:12.5px;border-top:1px solid var(--txt);
  padding-top:16px;margin-top:56px;line-height:1.9}
.foot-id{margin:0 0 4px;letter-spacing:.03em}
footer a{color:var(--dim)}
.foot-nav{display:flex;flex-wrap:wrap;gap:2px 20px;margin:8px 0 0}
.foot-nav a{color:var(--dim);font-size:12.5px;text-decoration:none;
  display:inline-block;padding:6px 0}
.foot-nav a:hover{color:var(--acc);text-decoration:underline}

/* ---------- 14. 印刷 ---------- */
@media print{
  :root{--paper:#fff;--card:#fff;--txt:#000;--dim:#444;--line:#999}
  body{border-top:none}
  .cta,.cta-note,.ad-slot{display:none}
}