/* =============================================================
   GENBA EDITORIAL v1 — ハブB「SJL 資格実務ラボ」 style.css
   意匠正本: /home/claude/work/hire/web-design-master_SKILL.md
   - 紙 #F6F4EF / インク #1A1C20 / サブ #565B63 / 罫線 #DBD5C9
   - アクセント: 深緑 #2E4B3C（1ハブ1色・多色禁止）
   - 見出し: Shippori Mincho ／ 本文: Noto Sans JP系サンセリフ
   - 角丸は最大4px。影・グラデーション全面禁止（hairline罫線で区切る）
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&display=swap');

:root{
  --paper:#F6F4EF;   /* 紙 */
  --ink:#1A1C20;     /* 本文インク */
  --sub:#565B63;     /* サブテキスト */
  --rule:#DBD5C9;    /* hairline罫線 */
  --acc:#2E4B3C;     /* アクセント: 深緑（ハブB） */
  --acc-soft:rgba(46,75,60,.06);
  --panel:#FCFBF7;   /* わずかに明るい紙（表・図の地） */
  --serif:'Shippori Mincho',"Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  /* 旧テンプレ互換エイリアス（記事内SVG図版が参照） */
  --bg:var(--paper);
  --card:var(--panel);
  --line:var(--rule);
  --txt:var(--ink);
  --dim:var(--sub);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  border-top:3px solid var(--acc); /* 極細アクセント色トップバー */
}
.wrap{max-width:720px;margin:0 auto;padding:0 22px 72px}

/* ---------- サイト頭: サイトコード＋セクション索引 ---------- */
header.site{
  padding:20px 0 14px;border-bottom:1px solid var(--rule);
  margin-bottom:30px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;
}
header.site .sitecode{
  font-family:var(--serif);font-weight:700;font-size:17px;
  letter-spacing:.06em;color:var(--ink);text-decoration:none;
}
header.site .sitecode:hover{color:var(--acc)}
nav.site-index{display:flex;flex-wrap:wrap;gap:2px 18px;margin-left:auto}
nav.site-index a{
  color:var(--sub);text-decoration:none;font-size:12.5px;letter-spacing:.04em;
  padding:4px 0;
}
nav.site-index a:hover{color:var(--acc);text-decoration:underline}

/* ---------- ヒーロー: 明朝の断言＋hairline ---------- */
.hero{padding:6px 0 26px;border-bottom:1px solid var(--rule);margin:0 0 34px}
.hero h1{
  font-family:var(--serif);font-weight:600;
  font-size:30px;line-height:1.55;letter-spacing:.02em;
  margin:10px 0 18px;text-wrap:balance;
}
.hero p{color:var(--ink);font-size:15.5px;margin:0 0 10px;max-width:40em}
.hero .agenda{color:var(--sub)}

/* ---------- kicker / 文書番号データ行 / 問い ---------- */
.kicker{
  font-family:var(--sans);
  font-size:11.5px;letter-spacing:.22em;text-transform:lowercase;
  color:var(--acc);margin:6px 0 10px;
}
.docline{
  color:var(--sub);font-size:13px;letter-spacing:.03em;
  margin:14px 0 8px;padding-bottom:14px;border-bottom:1px solid var(--rule);
}
.docline .doc-code{
  font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:.08em;
}
.agenda{
  font-size:14.5px;color:var(--sub);margin:14px 0 26px;
  padding-left:14px;border-left:2px solid var(--acc);
}
.agenda .agenda-label{
  font-family:var(--serif);font-weight:700;color:var(--acc);margin-right:.5em;
}

/* ---------- 見出し・本文 ---------- */
h1{
  font-family:var(--serif);font-weight:600;
  font-size:26px;line-height:1.6;letter-spacing:.02em;
  margin:14px 0 6px;text-wrap:balance;
}
h2{
  font-family:var(--serif);font-weight:600;
  font-size:20px;line-height:1.6;margin:48px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--rule);
  text-wrap:balance;
}
h3{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.7;margin:30px 0 10px}
p{margin:16px 0}
ul,ol{margin:16px 0 16px 28px}
li{margin:8px 0}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
strong{color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

@media (max-width:520px){
  body{font-size:15.5px}
  .hero h1{font-size:24px}
  h1{font-size:21px}
  h2{font-size:18.5px}
  .wrap{padding:0 16px 56px}
  header.site{flex-direction:column;gap:4px}
  nav.site-index{margin-left:0}
}

/* ---------- 索引: 番号付きリスト（新聞の目次型・カード禁止） ---------- */
ol.index-list{
  list-style:none;margin:26px 0;padding:0;
  counter-reset:idx;
  border-top:1px solid var(--rule);
}
ol.index-list>li{
  counter-increment:idx;
  margin:0;padding:18px 0 18px 52px;position:relative;
  border-bottom:1px solid var(--rule);
}
ol.index-list>li::before{
  content:counter(idx,decimal-leading-zero);
  position:absolute;left:2px;top:20px;
  font-family:var(--serif);font-weight:700;font-size:17px;
  color:var(--acc);letter-spacing:.04em;
}
ol.index-list>li>a{
  font-family:var(--serif);font-weight:600;font-size:17.5px;line-height:1.65;
  color:var(--ink);text-decoration:none;display:block;
}
ol.index-list>li>a:hover{color:var(--acc);text-decoration:underline}
.idx-meta{color:var(--sub);font-size:13.5px;line-height:1.8;margin:6px 0 0}
.idx-code{
  font-family:var(--serif);font-weight:700;font-size:12px;
  color:var(--acc);letter-spacing:.1em;margin-right:.8em;
}
ol.index-list ol.sub-index{
  list-style:none;margin:10px 0 0;padding:0;
}
ol.index-list ol.sub-index li{
  margin:0;padding:5px 0;font-size:14px;line-height:1.7;
}
ol.index-list ol.sub-index a{color:var(--ink);text-decoration:none}
ol.index-list ol.sub-index a:hover{color:var(--acc);text-decoration:underline}

/* ---------- パンくず ---------- */
.crumb{color:var(--sub);font-size:12.5px;margin:0 0 8px;letter-spacing:.03em}
.crumb a{color:var(--sub);text-decoration:none}
.crumb a:hover{color:var(--acc);text-decoration:underline}

/* ---------- 要点・目次・注記（hairline区切り・角丸最小） ---------- */
.keypoint{
  background:var(--acc-soft);border-left:2px solid var(--acc);
  padding:16px 20px;margin:26px 0;
}
.keypoint-title{
  font-family:var(--serif);font-weight:700;font-size:13px;
  color:var(--acc);letter-spacing:.08em;margin:0;
}
.keypoint ul,.keypoint ol{margin:10px 0 0 22px;font-size:14.5px}
.keypoint li{margin:7px 0}

.toc{border:1px solid var(--rule);background:var(--panel);padding:16px 20px;margin:26px 0}
.toc-title{
  font-family:var(--serif);font-weight:700;font-size:13px;
  color:var(--sub);letter-spacing:.08em;margin:0;
}
.toc ol{margin:10px 0 0 24px;font-size:14.5px}
.toc li{margin:6px 0}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--acc);text-decoration:underline}

.note{
  background:var(--panel);border:1px solid var(--rule);border-left:2px solid var(--acc);
  padding:14px 18px;font-size:14px;line-height:1.9;margin:26px 0;
}

/* ---------- 表 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0}
table{
  width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;
  background:var(--panel);border:1px solid var(--rule);
}
th,td{padding:10px 14px;border:1px solid var(--rule);text-align:left;vertical-align:top;min-width:6em}
th{
  background:var(--acc-soft);font-family:var(--serif);font-weight:700;
  white-space:nowrap;color:var(--ink);
}
td .meta{font-size:12.5px}
.meta{color:var(--sub);font-size:13px;line-height:1.8}

/* ---------- リッチ比較表 .rich-compare（§8仕様・星/順位表記なし） ----------
   ①先頭列sticky ②選択肢ヘッダーセル（名称+一言タグライン）
   ③属性行は記号表記（◎○△—・各記号に脚注番号） ④列ごとの「詳細を見る」行
   ⑤横スクロール可。記号は出典事実の翻訳のみ（星評価・王冠・順位数字は禁止） */
.rich-compare{margin:26px 0 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);background:var(--panel)}
.rich-compare table{border-collapse:separate;border-spacing:0;width:100%;min-width:680px;background:var(--panel);border:none;font-size:13.5px;line-height:1.75}
.rich-compare th,.rich-compare td{border:none;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);padding:12px 14px;text-align:left;vertical-align:top;min-width:12em;white-space:normal}
.rich-compare tr:last-child th,.rich-compare tr:last-child td{border-bottom:none}
.rich-compare th:first-child,.rich-compare td:first-child{border-left:none}
/* 先頭列: sticky属性列 */
.rich-compare .rc-attr{position:sticky;left:0;z-index:2;background:var(--paper);border-right:1px solid var(--rule);font-family:var(--serif);font-weight:600;font-size:13px;color:var(--ink);min-width:9em;max-width:13em}
/* 選択肢ヘッダーセル（名称＋一言タグライン） */
.rich-compare th.rc-option{background:var(--acc-soft);vertical-align:bottom;white-space:normal}
.rc-option .rc-name{display:block;font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.02em}
.rc-option .rc-tagline{display:block;font-family:var(--sans);font-weight:400;font-size:12px;line-height:1.7;color:var(--sub);margin-top:4px}
/* 属性記号セル */
.rc-mark{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1;color:var(--acc);display:inline-block;margin-right:.4em;vertical-align:-1px}
.rc-mark.na{color:var(--sub)}
.rc-cell-note{display:block;font-size:12px;line-height:1.7;color:var(--sub);margin-top:4px}
/* 列ごとの「詳細を見る」行 */
.rich-compare tr.rc-detail td{background:var(--paper)}
.rich-compare tr.rc-detail a{font-family:var(--serif);font-weight:600;font-size:13px;color:var(--acc)}
/* 凡例（表直下に必ず置く） */
.rc-legend{font-size:12.5px;color:var(--sub);line-height:1.9;margin:10px 0 26px}
.rc-legend .rc-mark{font-size:14px}
@media (max-width:520px){
  .rich-compare .rc-attr{min-width:7.5em}
  .rich-compare th,.rich-compare td{min-width:11em;padding:10px 12px}
}

/* ---------- 図解枠（単色＋アクセント1色のSVGのみ） ---------- */
.fig{border:1px solid var(--rule);background:var(--panel);padding:20px;margin:30px 0}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{color:var(--sub);font-size:13px;line-height:1.8;margin-top:12px}
.fig .fig-src{display:block;font-size:12px;margin-top:2px}

/* ---------- 脚注型の出典 ---------- */
.footnotes{
  border-top:1px solid var(--rule);margin-top:44px;padding-top:14px;
  color:var(--sub);font-size:13px;line-height:1.9;
}
.footnotes .fn-title{
  font-family:var(--serif);font-weight:700;font-size:13px;
  color:var(--ink);letter-spacing:.08em;border:none;margin:0 0 6px;padding:0;
}
.footnotes ol{margin:6px 0 0 24px}
.footnotes li{margin:4px 0}
.footnotes a{color:var(--sub)}
.footnotes a:hover{color:var(--acc)}
sup.fnref,a.fnref{font-size:11px;vertical-align:super;line-height:1;text-decoration:none;color:var(--acc)}
a.fnref:hover{text-decoration:underline}

/* ---------- 広告枠（「広告」ラベル付きの静かな枠・1画面1枠） ---------- */
.adbox{border:1px solid var(--rule);background:var(--panel);padding:14px 18px;margin:32px 0}
.adbox .adlabel{
  display:inline-block;font-size:11px;letter-spacing:.2em;
  color:var(--sub);border:1px solid var(--rule);
  padding:1px 8px;margin-bottom:8px;
}
.adbox p{margin:0;color:var(--sub);font-size:13px;line-height:1.8}

/* ---------- 診断LP導線（静かな枠線リンク） ---------- */
.cta{
  display:block;text-align:center;
  padding:14px 18px;margin:30px 0 4px;
  color:var(--acc);border:1px solid var(--acc);
  font-family:var(--serif);font-weight:600;font-size:15px;
  text-decoration:none;letter-spacing:.03em;
}
.cta:hover{background:var(--acc-soft);color:var(--acc)}
.cta-note{display:block;text-align:center;color:var(--sub);font-size:12px;margin:6px 0 24px}

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

/* ---------- 汎用 ---------- */
.small{font-size:13px;color:var(--sub)}
.divider{border:none;border-top:1px solid var(--rule);margin:36px 0}
.src{color:var(--sub);font-size:13px;line-height:1.9;border-top:1px solid var(--rule);padding-top:12px;margin-top:36px}
.src a{color:var(--sub)}

/* ---------- フォーム（お問い合わせ） ---------- */
input,select,textarea{
  width:100%;padding:10px;border:1px solid var(--rule);
  background:var(--panel);color:var(--ink);font-family:var(--sans);
  font-size:15px;border-radius:2px;
}
button.cta{width:100%;cursor:pointer;background:transparent}

/* ---------- 印刷 ---------- */
@media print{
  :root{--paper:#fff;--panel:#fff;--ink:#000;--sub:#444;--rule:#999}
  .cta,.cta-note,.adbox{display:none}
}