/* ===========================================================
   分類8（提案）読み物・ブログ記事
   分類1との差分：見出しゴシック／影を解禁／角丸8px／H2に左バー／
                  リンクを紺／図表と囲みを必須／本文の行長は列幅で決める
   守るもの：色の骨格・署名・絵文字禁止・コントラスト・タップ44px
   =========================================================== */
:root{
  --bg:#FAF7F2; --surface:#FFFFFF;
  --ink:#1C1C1A; --muted:#4A4A42; --caption:#5F5F55;
  --primary:#1F3D2E; --primary-dark:#16301F;
  --accent:#8F6216; --accent-line:#C08A34;
  --line:#E2DDD1; --line-strong:#8E8878; --wash:#EDF2EF; --sand:#F5EBD8;
  --link:#1F3A5F;                      /* 分類8で追加。本文色と見分けるため */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --r:8px;                             /* 分類8：2px→8px */
  --shadow-1:0 1px 3px rgba(28,28,26,.08);
  --w-read:820px;            /* 分類8：読み物は720→820px。本文の行長はこの列幅で決める（PCで約40字） */
  --font-sans:-apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
              'Yu Gothic Medium', 'Yu Gothic', Meiryo, sans-serif;
}
*{ box-sizing:border-box }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:19px; line-height:1.9;
  -webkit-text-size-adjust:100%;
  line-break:strict;   /* 小書きの「っ」「ィ」や長音「ー」を行頭に置かせない（既定のnormalは許してしまう） */
  text-wrap:pretty;    /* 最終行が1〜2文字だけ残るのを防ぐ。balanceと違って行末は揃ったまま */
}
p{ max-width:none; margin:0 0 var(--sp-4) }   /* 行長は列幅で決める。個別のmax-widthを置くと右端が2本になる */
a{ color:var(--link); text-decoration:underline; text-underline-offset:3px }
a:hover{ color:var(--primary-dark); text-decoration-thickness:2px }
a:visited{ color:var(--link) }
a:active{ color:var(--primary-dark) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
img{ max-width:100%; height:auto; display:block }
main p a{ padding:var(--sp-1) 0 }   /* 本文中のリンクもタップ24px以上にする。折り返しは殺さない */

.wrap{ max-width:var(--w-read); margin:0 auto; padding:0 var(--sp-6) }
.site-header{ border-bottom:1px solid var(--line); background:var(--surface) }
.site-header .wrap{ display:flex; align-items:center; min-height:64px }
.brand{ font-size:15px; font-weight:700; letter-spacing:0.18em; color:var(--primary) }


/* ── 記事ヘッダ ── */
.article-head{ padding:var(--sp-7) 0 var(--sp-5) }
.label{ font-size:15px; font-weight:700; color:var(--accent); margin:0 0 var(--sp-3) }
h1{
  font-family:'Noto Serif JP',serif; letter-spacing:-0.03em;   /* H1だけ明朝を残す */
  font-size:40px; font-weight:700; line-height:1.4; margin:0 0 var(--sp-4);
}
.subtitle{ font-size:19px; color:var(--muted); line-height:1.8; margin:0 0 var(--sp-4) }
.article-meta{ font-size:15px; color:var(--caption); margin:0 }
.nb{ display:inline-block }              /* 見出しを文節で折る（変な位置で改行させない） */
/* 改行対策は見出しだけに当てる。text-wrap:balance で孤立行を防ぎ、
   word-break:auto-phrase で日本語の文節を割らない（未対応ブラウザは無視する）。
   本文に当ててはいけない。狭い列では文節が入りきらないたびに行末が丸ごと空き、
   スマホ375pxで行末のばらつきが27か所（最短は箱の53%）になった（2026-08-11 実測）。 */
h1,h2,h3,.faq-q,.author-name,.cta h2,.step-body > strong,
.toc li{ text-wrap:balance; word-break:auto-phrase; }
ruby rt{ font-size:12px; font-weight:400; color:var(--caption); letter-spacing:0.05em }

/* ── 監修者 ── */
.author{
  display:flex; gap:var(--sp-4); align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-5); margin:var(--sp-5) 0; box-shadow:var(--shadow-1);
}
.author img{ flex:0 0 auto; width:96px; height:96px; object-fit:cover; border-radius:50% }
.author-body{ flex:1 1 auto; min-width:0 }
.author-role{ font-size:12px; font-weight:500; letter-spacing:0.18em; color:var(--accent); margin:0 0 var(--sp-2) }
.author-name{ font-size:22px; font-weight:700; margin:0 0 var(--sp-2); max-width:none }
.author-desc{ font-size:15px; color:var(--muted); line-height:1.7; margin:0; max-width:none }

/* 冒頭のバイライン（1行）。詳しいプロフィールは末尾のカード */
.byline{ display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-5) 0 }
.byline img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 auto }
.byline p{ margin:0; max-width:none; font-size:15px; color:var(--caption) }
.byline strong{ color:var(--ink); font-size:16px }

/* この記事で分かること（結論を先に渡す） */
.lede-points{ background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--primary);
  border-radius:0 var(--r) var(--r) 0; padding:var(--sp-5); margin:var(--sp-6) 0 }
.lede-points p.lp-title{ font-size:17px; font-weight:700; margin:0 0 var(--sp-3); max-width:none; color:var(--primary) }
.lede-points ol{ margin:0; padding-left:1.3em }
.lede-points li{ font-size:17px; margin-bottom:var(--sp-3); line-height:1.8 }
.lede-points li:last-child{ margin-bottom:0 }

/* 別記事への誘導（定型。毎回置く） */
.seealso{ background:var(--wash); border-radius:var(--r); padding:var(--sp-4) var(--sp-5); margin:var(--sp-5) 0 }
.seealso p{ margin:0; font-size:17px }

/* 目次を畳む */
details.toc summary{ cursor:pointer; font-size:17px; font-weight:700; padding:var(--sp-2) 0; list-style:none }
details.toc summary::-webkit-details-marker{ display:none }
details.toc summary::before{ content:'▸ '; color:var(--primary) }
details.toc[open] summary::before{ content:'▾ ' }

/* ── アイキャッチ ── */
.hero-img{ border-radius:var(--r); overflow:hidden; margin:var(--sp-5) 0 }
.hero-img img{ width:100%; aspect-ratio:16/9; object-fit:cover }
figure{ margin:var(--sp-6) 0 }
figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r) }
figcaption{ font-size:15px; color:var(--caption); margin-top:var(--sp-2); line-height:1.7 }

/* ── 目次 ── */
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-5); margin:var(--sp-6) 0 }
.toc ol{ margin:0; padding-left:1.4em; font-size:17px }
.toc li{ margin-bottom:var(--sp-1) }
.toc li:last-child{ margin-bottom:0 }
.toc a{ display:inline-block; padding:var(--sp-2) 0 }   /* タップ24px以上を確保 */

/* ── 前提の流れ ── */
.steps{ list-style:none; margin:var(--sp-5) 0 0; padding:0 }
.steps li{ display:flex; gap:var(--sp-4); padding:var(--sp-4); border-bottom:1px solid var(--line);
  border-radius:var(--r) }
.steps li:last-child{ border-bottom:0 }
.steps li.now{ background:var(--wash); border-bottom:0; border-left:4px solid var(--accent-line) }
.step-no{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#FFFFFF;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700 }
.steps li.now .step-no{ background:var(--accent) }
.step-body{ flex:1 1 auto; min-width:0 }
.step-body > strong{ display:block; font-size:19px; line-height:28px; margin-bottom:var(--sp-1) }   /* 丸と同じ28pxにして頭を揃える。段落の中の強調に当てない */
/* ステップの時期。見出しの右に小さく添える。制度開始からの逆算で書く */
.step-when{ display:inline-block; margin-left:var(--sp-3); font-size:13px; font-weight:400;
  color:var(--accent); white-space:nowrap }
@media (max-width:640px){ .step-when{ display:block; margin-left:0; margin-top:2px } }

.step-here{ display:inline-block; margin-left:var(--sp-3); padding:var(--sp-1) var(--sp-2);
  background:var(--accent); color:#FFFFFF; font-size:12px; font-weight:700; border-radius:var(--r);
  vertical-align:middle; letter-spacing:0.05em }
.step-body p{ margin:0; font-size:17px; color:var(--muted); max-width:none }

/* ── 見出し（分類8：ゴシック＋左バー。面は敷かない） ── */
h2{
  font-family:var(--font-sans); letter-spacing:normal;
  font-size:28px; font-weight:700; line-height:1.4; color:var(--ink);
  border-left:6px solid var(--primary);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);
  margin:var(--sp-8) 0 var(--sp-5); max-width:none;
}
/* 淡い面（--wash）はクリーム地の上で1.06:1しかなく、見えないので置かない。
   H2は左バー、H3は下の罫線で区別する。本文19pxとの差はH2で9px・H3で3px */
h3{
  font-size:22px; font-weight:700; line-height:1.4; color:var(--primary);
  border-bottom:1px solid var(--line); padding-bottom:var(--sp-2);
  margin:var(--sp-7) 0 var(--sp-4); max-width:none;
}

/* ── 会話 ── */
.turn{ display:flex; gap:var(--sp-4); margin:0 0 var(--sp-5) }
.turn-me{ flex-direction:row-reverse }
.avatar{ flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; line-height:1; overflow:hidden }
.avatar img{ width:100%; height:100%; object-fit:cover }
.avatar-editor{ background:var(--primary); color:#FFFFFF }
.avatar-boss{ background:var(--surface); color:var(--primary); border:1px solid var(--primary) }
.avatar-hr{ background:var(--sand); color:var(--accent); border:1px solid var(--accent-line) }
.bubble{ flex:1 1 auto; min-width:0; border-radius:var(--r); padding:var(--sp-4) var(--sp-5) }
.bubble-them{ background:var(--wash) }
.bubble-me{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1) }
.bubble p{ margin-bottom:var(--sp-3) }
.bubble p:last-child{ margin-bottom:0 }
.speaker{ font-size:15px; color:var(--caption); margin:0 0 var(--sp-2)!important; max-width:none }
.turn-me .speaker{ text-align:right }

/* ── 実在の人の言葉 ── */
.quote{ margin:var(--sp-5) 0; padding:var(--sp-4) var(--sp-5);
  background:var(--sand); border-left:4px solid var(--accent-line); border-radius:0 var(--r) var(--r) 0 }
.quote p{ margin:0; font-size:19px }
.quote p + p{ margin-top:var(--sp-3) }
.quote .q-who{ font-size:15px; font-weight:700; color:var(--accent); margin-bottom:var(--sp-2) }
.quote-cap{ font-size:14px; color:var(--caption); margin:var(--sp-2) 0 0; max-width:none }

/* ── 相談導線 ── */
.cta{ background:var(--primary); color:#FFFFFF; border-radius:var(--r);
  padding:var(--sp-6); margin:var(--sp-7) 0 }
.cta h2{ border:0; padding:0; margin:0 0 var(--sp-3); color:#FFFFFF; font-size:24px }
.cta p{ color:#FFFFFF; margin:0 0 var(--sp-4); font-size:17px }
.cta-btn{ display:inline-block; min-height:44px; padding:14px 28px; font-size:16px; font-weight:700;
  background:#FFFFFF; color:var(--primary); border-radius:var(--r); text-decoration:none;
  transition:background 150ms ease }
.cta-btn:hover{ background:var(--wash); color:var(--primary-dark); text-decoration:none }
.cta-btn:visited{ color:var(--primary) }
.cta-sub{ font-size:15px!important; margin:var(--sp-3) 0 0!important; opacity:.9 }
.links{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-5); margin:var(--sp-6) 0 }
.links p.links-title{ font-size:15px; font-weight:700; margin:0 0 var(--sp-3); max-width:none }
.links ul{ margin:0; padding-left:1.3em; font-size:17px }
.links li{ margin-bottom:var(--sp-2) }
.links li:last-child{ margin-bottom:0 }
.links a{ display:inline-block; padding:var(--sp-1) 0 }

/* ── 囲み ── */
.note{ padding:var(--sp-4) var(--sp-5); border-left:4px solid; border-radius:0 var(--r) var(--r) 0;
  font-size:16px; margin:var(--sp-5) 0 }
/* 前提・出典は読ませる文ではない。本文と同じ大きさで置かない（下限14px）*/
.note-warn{ font-size:14px; line-height:1.8 }
.note-warn .note-title{ font-size:13px; letter-spacing:.04em }

/* 計算の前提と出典。読みたい人だけが読む部分。
   面を敷くと文字を小さくしても目に入るので、罫線1本だけで本文と分ける。
   11px。socket-design-system §2-4 の下限（12px）を下回る。以西さんの指示（2026-08-13）で、
   読み物の出典・計算前提だけこの記事群を例外にした。不利益事実には使わない。
   不利益事実（元本割れ・60歳まで引き出せない）はここに入れない。
   あれは金額の直下に本文と同じ重みで置く（fp-proposal-format B-3）。 */
.fineprint{ font-size:11px; line-height:1.9; color:var(--caption);
  border-top:1px solid var(--line); padding-top:var(--sp-3); margin:var(--sp-5) 0 }
.fineprint b{ font-weight:700; color:var(--muted) }
.note-info{ color:var(--primary); background:var(--wash); border-color:var(--primary) }
.note-warn{ color:#8A6D1F; background:#FFF7E6; border-color:#D89B00 }
.note-title{ display:block; font-weight:700; margin-bottom:var(--sp-2) }
.note p{ max-width:none; margin:0 }

/* ── 表 ── */
.table-scroll{ overflow-x:auto; margin:var(--sp-5) 0 }
table{ border-collapse:collapse; width:100%; min-width:480px; background:var(--surface);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1) }
th{ background:var(--primary); color:#FFFFFF; padding:10px 12px; font-size:15px; text-align:left; font-weight:700 }
td{ padding:10px 12px; font-size:17px; border-bottom:1px solid var(--line); vertical-align:top }
tr:nth-child(even) td{ background:var(--bg) }
/* 左端を行見出しにした比較表。何の行かが分からない表を作らない */
th[scope="row"]{ background:var(--wash); color:var(--ink); width:24%; font-size:15px;
  vertical-align:top; border-bottom:1px solid var(--line) }
tr.key th[scope="row"], tr.key td{ background:var(--sand) }

/* ── FAQ ── */
.faq-item{ border-bottom:1px solid var(--line); padding:var(--sp-5) 0 }
.faq-item:last-child{ border-bottom:0 }
.faq-q{ font-size:19px; font-weight:700; margin:0 0 var(--sp-3); max-width:none;
  display:flex; gap:var(--sp-3); align-items:flex-start }
.faq-mark{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#FFFFFF;
  font-size:15px; display:flex; align-items:center; justify-content:center; line-height:1 }
.faq-mark-a{ background:var(--accent) }
.faq-a{ display:flex; gap:var(--sp-3); align-items:flex-start }
.faq-a p{ margin:0; font-size:17px; color:var(--muted) }

.site-footer{ border-top:1px solid var(--line); padding:var(--sp-6) 0; font-size:15px; color:var(--caption); margin-top:var(--sp-8) }
.site-footer p{ max-width:none; margin:0 0 var(--sp-2) }

@media (max-width:640px){
  .wrap{ padding:0 var(--sp-5) }
  body{ font-size:17px }
  h1{ font-size:27px }
  h2{ font-size:22px; margin-top:var(--sp-7) }
  h3{ font-size:20px }
  .cta h2{ font-size:21px }
  .avatar{ width:40px; height:40px; font-size:13px }
  .turn{ gap:var(--sp-3) }
  .bubble{ padding:var(--sp-4) }
  .quote p{ font-size:17px }
    /* スマホでも顔の右にテキストを置く。縦積みにしない */
  .author{ flex-direction:row; padding:var(--sp-4); gap:var(--sp-3) }
  .author img{ width:72px; height:72px }
  .author-name{ font-size:19px }
  .author-desc{ font-size:14px }
  /* 2列の表を横スクロールさせない。列を積んで見せる */
  table{ min-width:0; box-shadow:none; background:transparent }
  thead{ display:none }
  table,tbody,tr,td,th{ display:block; width:100% }
  /* 項目ごとに1枚の箱にする。A社とB社が隣り合って読める */
  tr{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
    margin-bottom:var(--sp-4); overflow:hidden }
  tr:last-child{ margin-bottom:0 }
  th[scope="row"], tr.key th[scope="row"]{ background:var(--primary); color:#FFFFFF; width:100%;
    padding:var(--sp-2) var(--sp-4); border-bottom:0 }   /* 白文字を薄い面に乗せない */
  td{ font-size:16px; padding:var(--sp-3) var(--sp-4); border-bottom:0 }
  td::before{ content:attr(data-label); display:block; font-size:14px; font-weight:700;
    color:var(--accent); margin-bottom:var(--sp-1) }
  tr:nth-child(even) td{ background:transparent }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }

/* ── 主体表示・免責（fp-proposal-format）── */
.legal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5); margin:var(--sp-4) 0 }
.legal .entity{ margin:0 0 var(--sp-3); font-size:14px; font-weight:700; color:var(--ink); line-height:1.8 }
.legal p{ font-size:13px; color:var(--muted); line-height:1.9; margin:0 0 var(--sp-3) }
.legal p:last-child{ margin-bottom:0 }
.legal .reg{ margin:0 0 var(--sp-3) }
.legal .reg dt{ font-size:13px; font-weight:700; color:var(--ink) }
.legal .reg dd{ margin:0; font-size:13px; color:var(--muted) }
/* 操作領域の下限。指の大きさで決まる値なので、パレットにもレイアウトにも依存しない。
   inline-block に変えると、block で縦に並んでいるリンクが横並びになる。
   padding-block なら inline の行送りを変えずに当たり判定だけ広がる（基盤司令塔の実測・2026-08-12）。 */
footer a{ padding-block:5px; min-height:24px }


/* ---- カテゴリ・パンくず・前後の記事（2026-08-21） ---------------------- */
/* 一般的なブログにあるものを足した。値は socket-design-system v3 の
   トークンだけを使う。新しい px を作らない。 */
.crumbs{ font-size:15px; color:var(--caption); margin:0 0 var(--sp-5) }
.crumbs a{ color:var(--caption) }
.crumbs span{ margin:0 var(--sp-2); color:var(--line-strong) }

.label a{ text-decoration:none }
.label a:hover{ text-decoration:underline }
.label-sub{ margin-left:var(--sp-3); color:var(--caption); font-weight:400 }
.label-sub::before{ content:"／"; margin-right:var(--sp-3); color:var(--line-strong) }

.chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-6) 0 var(--sp-7) }
.chip{ display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:44px; padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--line-strong); border-radius:var(--r);
  font-size:16px; text-decoration:none; color:var(--primary); background:var(--surface) }
.chip:hover{ background:var(--wash) }
.chip-on{ background:var(--primary); border-color:var(--primary); color:#FFFFFF }
.chip-n{ font-size:14px; color:var(--caption) }
.chip-on .chip-n{ color:#FFFFFF }

.cat-block{ margin:0 0 var(--sp-8) }
.cat-h{ font-size:22px; margin:0; padding-bottom:var(--sp-3);
  border-bottom:3px solid var(--primary) }
.cat-h a{ text-decoration:none }
.cat-h a:hover{ text-decoration:underline }
.cat-d{ display:block; font-family:var(--font-sans); font-size:15px;
  font-weight:400; color:var(--caption); margin-top:var(--sp-2) }

.pager{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--sp-4); margin:var(--sp-7) 0 }
.pager-item{ display:block; padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); text-decoration:none }
.pager-item:hover{ background:var(--wash) }
.pager-kind{ display:block; font-size:14px; color:var(--caption); margin-bottom:var(--sp-2) }
.pager-next{ text-align:right }
.pager-title{ display:block; font-size:17px; font-weight:700; color:var(--primary) }

@media (max-width:640px){
  .pager-next{ text-align:left }
}