@charset "utf-8";
/* 退職ナビ — デザインシステム
 *
 * 読者は「もう限界かもしれない」状態で来る。だから配色で不安を足さない。
 * 相続の教科書の赤(--red:#B6111C)は流用しない。あれは格式のための赤で、
 * このサイトでは警告色として読まれてしまう。
 *
 * 基調 : 深い青緑(落ち着き・信頼) + 温かい生成り(緊張を下げる)
 * 行動 : テラコッタ(押せるが急かさない)
 * 警告 : 琥珀。赤は「本当に危険なこと」にだけ使う
 *
 * 余白は8pxの倍数。--s1..--s7 以外の数値を直接書かない。
 */

:root{
  /* 文字 */
  --ink:#1B2430;      /* 本文。真っ黒にしない(読み疲れる) */
  --ink-2:#3D4A59;    /* 副見出し */
  --grey:#5A6675;     /* 補足 */
  --mute:#828E9C;     /* 注記・確認日 */

  /* 面 */
  --bg:#FFFFFF;
  --surface:#F6F9FA;  /* カード・帯 */
  --warm:#FCF8F3;     /* 肯定パート専用の生成り */
  --line:#E2E8ED;
  --line-2:#CFD8E0;

  /* 主色 */
  --accent:#1E7A6B;
  --accent-dark:#155C51;
  --accent-soft:#E7F2F0;

  /* 行動 */
  --cta:#DD6B45;
  --cta-dark:#BE5231;
  --cta-soft:#FDF0EB;

  /* 状態 */
  --warn:#B07C1E;
  --warn-soft:#FBF4E4;
  --danger:#B33A3A;
  --ok:#1E7A6B;

  /* 余白(8px系) */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px;

  /* 角・影 */
  --r1:6px; --r2:10px; --r3:16px;
  --sh1:0 1px 2px rgba(27,36,48,.06);
  --sh2:0 2px 10px rgba(27,36,48,.07);
  --sh3:0 6px 24px rgba(27,36,48,.10);

  /* 幅 */
  --inner:1080px;   /* 通常 */
  --read:720px;     /* 本文。PCで横に伸ばさない */
  --wide:1240px;    /* 表・横並び比較 */

  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font);
  font-size:16px; line-height:1.9;      /* 日本語は1.9。1.6だと詰まって読めない */
  letter-spacing:.02em;
  overflow-wrap:anywhere;                /* 長いURLでレイアウトを壊さない */
  word-break:normal; line-break:strict;  /* 日本語の禁則を効かせる */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dark);text-underline-offset:3px}
a:hover{color:var(--accent)}

/* 数字と単位を切り離さない。「22,000円」の「円」だけ次行に落ちるのを防ぐ */
.nb{white-space:nowrap}

/* ---------- 器 ---------- */
.wrap{max-width:var(--inner);margin:0 auto;padding:0 var(--s3)}
.read{max-width:var(--read);margin-left:auto;margin-right:auto}
.wide{max-width:var(--wide);margin:0 auto;padding:0 var(--s3)}
main{display:block;padding-bottom:var(--s6)}
section{margin:var(--s6) 0}
section:first-child{margin-top:var(--s5)}

/* ---------- 見出し ---------- */
h1,h2,h3,h4{
  line-height:1.5;letter-spacing:.01em;text-wrap:balance;margin:0;
  /* 日本語の見出しを文節で折る。これが無いと「非弁行為」が「非／弁行為」に割れる。
     記事の見出しはMarkdownから生成されるので、手で塊を指定できない。
     未対応のブラウザはこの宣言を無視するだけで、表示は壊れない。 */
  word-break:auto-phrase;
}
h1{font-size:1.75rem;font-weight:700;margin-bottom:var(--s3)}
h2{
  font-size:1.35rem;font-weight:700;color:var(--ink);
  margin:var(--s6) 0 var(--s3);padding-left:var(--s3);
  border-left:4px solid var(--accent);
}
h3{font-size:1.1rem;font-weight:700;color:var(--ink-2);margin:var(--s5) 0 var(--s2)}
h4{font-size:1rem;font-weight:700;color:var(--ink-2);margin:var(--s4) 0 var(--s2)}
p{margin:0 0 var(--s3)}
.lead{font-size:1.05rem;color:var(--ink-2);line-height:2}
.eyebrow{
  font-size:.8rem;font-weight:700;color:var(--accent);
  letter-spacing:.08em;margin-bottom:var(--s2)
}
.muted{color:var(--mute);font-size:.85rem;line-height:1.8}

/* ---------- ヘッダー ---------- */
.site-head{
  border-bottom:1px solid var(--line);background:var(--bg);
  position:sticky;top:0;z-index:50
}
.site-head .wrap{display:flex;align-items:center;gap:var(--s3);height:60px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);flex:1;min-width:0}
.brand-name{font-size:1.05rem;font-weight:700;letter-spacing:.02em}
.brand-sub{font-size:.7rem;color:var(--mute);line-height:1.4}
.head-nav{display:flex;gap:var(--s3);font-size:.85rem}
.head-nav a{color:var(--grey);text-decoration:none;white-space:nowrap}
.head-nav a:hover{color:var(--accent)}
/* スマホでナビを消さない。消すと記事に着地した読者が
 * 本文中のリンク以外でサイト内を移動できなくなる。
 * 横に流せる帯にして、タップ領域は維持する。 */
@media(max-width:640px){
  .site-head .wrap{height:auto;flex-direction:column;align-items:stretch;gap:0;padding-block:var(--s2)}
  .head-nav{
    gap:var(--s2);overflow-x:auto;margin-top:var(--s2);
    padding-bottom:var(--s1);scrollbar-width:none
  }
  .head-nav::-webkit-scrollbar{display:none}
  .head-nav a{
    flex:none;padding:0 var(--s3);border-radius:999px;
    background:var(--surface);color:var(--ink-2);font-weight:700;font-size:.85rem;
    /* padding だけで高さを作ると 32px 止まりでタップしづらい。
       min-height で明示し、中身を上下中央に置く。 */
    min-height:44px;display:inline-flex;align-items:center
  }
}

/* ---------- ヒーロー(肯定パート) ---------- */
.hero{background:var(--warm);border-bottom:1px solid var(--line);padding:var(--s6) 0 var(--s5)}
.hero .read{max-width:760px}
.hero h1{font-size:1.9rem;line-height:1.55}
.hero .lead{color:var(--ink-2)}
.hero-affirm{
  margin:var(--s4) 0 0;padding:var(--s4);
  background:var(--bg);border-radius:var(--r2);box-shadow:var(--sh1);
  border-left:4px solid var(--accent)
}
.hero-affirm p:last-child{margin-bottom:0}
@media(max-width:640px){
  .hero{padding:var(--s5) 0 var(--s4)}
  .hero h1{font-size:1.32rem}
}


/* ---------- 見出しを意味の塊で折る ----------
 * 日本語は文字単位で折り返すので、放っておくと「ありませ／ん」のように
 * 最後の1文字だけ次行へ落ちる。塊ごとに inline-block にして、
 * 塊の途中では折らない（塊が画面幅を超えたときだけ内部で折れる）。 */
.h1w > span{display:inline-block}

/* ---------- ボタン ---------- */
.btn-cta,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:var(--s2) var(--s4);
  border-radius:var(--r2);font-weight:700;font-size:1rem;
  text-decoration:none;text-align:center;line-height:1.4;
  transition:background .15s,box-shadow .15s
}
.btn-cta{background:var(--cta);color:#fff;box-shadow:var(--sh2)}
.btn-cta:hover{background:var(--cta-dark);color:#fff}
.btn-ghost{background:var(--bg);color:var(--accent-dark);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dark)}
.btn-block{display:flex;width:100%}
.cta-note{font-size:.8rem;color:var(--mute);margin-top:var(--s2);line-height:1.7}

/* ---------- サマリーカード(30秒で判断できる情報) ---------- */
.summary{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r3);padding:var(--s4);margin:var(--s4) 0
}
.summary-t{font-size:.8rem;font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:var(--s3)}
.summary dl{display:grid;grid-template-columns:9em 1fr;gap:var(--s2) var(--s3);margin:0}
.summary dt{font-size:.85rem;color:var(--grey);font-weight:400}
.summary dd{margin:0;font-size:.95rem;font-weight:700;color:var(--ink)}
.summary dd.na{font-weight:400;color:var(--mute)}   /* 「明示なし」は太字にしない */
.summary .btn-cta{margin-top:var(--s4)}
@media(max-width:560px){
  .summary dl{grid-template-columns:1fr;gap:0}
  .summary dt{margin-top:var(--s3);font-size:.8rem}
  .summary dd{margin-bottom:0}
}

/* ---------- チップ ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0}
.chip{
  display:inline-flex;align-items:center;gap:var(--s1);
  padding:var(--s1) var(--s3);border-radius:999px;
  font-size:.8rem;font-weight:700;line-height:1.8;
  background:var(--accent-soft);color:var(--accent-dark)
}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-na{background:var(--surface);color:var(--mute);font-weight:400}

/* ---------- カード ---------- */
/* minmax の最小値を器より大きくすると、狭い画面ではみ出す。
   320px では内容幅が 288px しかないので min(100%, N) で頭打ちにする。
   幅ごとの専用CSSを足すのではなく、定義そのものを壊れない形にする。 */
.cards{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);box-shadow:var(--sh1);
  display:flex;flex-direction:column          /* カード高さを揃える */
}
.card h3{margin-top:0}
.card .btn-cta,.card .btn-ghost{margin-top:auto}


/* 記事カードはカード全体を1つのリンクにする。
 * 「読む」ボタンを別に置くと、タップ先が2つあるように見えるうえ
 * スマホで縦に伸びる。見出し＋1行の手がかりで足りる。 */
.cards-slim{gap:var(--s2)}
.card-link{
  text-decoration:none;color:inherit;padding:var(--s3) var(--s4);
  transition:border-color .15s,box-shadow .15s
}
.card-link h3{margin:0 0 var(--s1);font-size:1rem;color:var(--accent-dark)}
.card-link p{margin:0}
.card-link:hover{border-color:var(--accent);box-shadow:var(--sh2)}

/* サービスカード */
.svc{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch}
.svc-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);box-shadow:var(--sh1)
}
.svc-name{font-size:1.1rem;font-weight:700;margin:0}
/* カード見出しのリンクは、文字の高さ(25px)しかタップ領域が無かった。
   見出しの見た目は変えずに、当たり判定だけ上下へ広げる。 */
.svc-name a{display:inline-block;padding:var(--s2) 0;text-decoration-thickness:1px}
.svc-op{font-size:.8rem;color:var(--mute);margin:0}
.svc-cost{font-size:1.05rem;font-weight:700;color:var(--ink);margin:var(--s2) 0 0}
.svc-cost .na{font-size:.9rem;font-weight:400;color:var(--mute)}
/* 料金の但し書き。金額と同じ行に流すと狭い列で金額が割れる。
   必ず別行に落として、小さく弱く見せる。 */
.cost-note{display:block;font-size:.78rem;font-weight:400;color:var(--mute);line-height:1.6;margin-top:2px}
.svc-why{font-size:.9rem;color:var(--grey);margin:0}
.svc-card .btn-cta,.svc-card .btn-ghost{margin-top:auto}


/* ---------- カードの並びだけ器の幅に広げる ----------
 * 本文は720pxのままにして読みやすさを保ちつつ、カードの並びは器(1080px)まで広げる。
 * 「全部同じ max-width にしない」ため。720pxのままだと3枚が 2+1 に割れて、
 * 3枚目だけ左に取り残される。
 * 本文幅より狭い画面では広げない（760px未満では何もしない）。 */
@media(min-width:760px){
  /* 直接の子だけを対象にすると <section> の中の表やカードに効かない。
     子孫セレクタにする（section は .read の幅いっぱいなので計算は同じ）。 */
  .read .wide-block{
    /* 器の「中身の幅」は min(--inner, 100vw) から左右の padding を引いたもの。
       padding を勘定に入れないと 768px で 8px はみ出す（実測して修正）。 */
    margin-inline:calc(-1 * (min(var(--inner), 100vw) - var(--s3) * 2 - var(--read)) / 2);
  }
}

/* ---------- 意味のある箱 ---------- */
.box{border-radius:var(--r2);padding:var(--s4);margin:var(--s4) 0}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.box-concl{background:var(--accent-soft);border-left:4px solid var(--accent)}
.box-warn{background:var(--warn-soft);border-left:4px solid var(--warn)}
.box-note{background:var(--surface);border-left:4px solid var(--line-2)}
.box-t{font-weight:700;margin-bottom:var(--s2);font-size:.95rem}
.box-concl .box-t{color:var(--accent-dark)}
.box-warn .box-t{color:var(--warn)}

/* ---------- 表 ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s4) 0;border-radius:var(--r2)}
.tbl-wrap::after{content:"";display:block}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.9rem;background:var(--bg)}
th,td{padding:var(--s3);border:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.75}
th{background:var(--surface);font-weight:700;color:var(--ink-2);white-space:nowrap}
td .na{color:var(--mute);font-size:.85rem}
.tbl-hint{font-size:.78rem;color:var(--mute);margin:calc(var(--s3)*-1) 0 var(--s3)}
/* 比較表の列幅を設計する。放っておくと短い値の列が潰れて、
   「民間企業（顧問弁護士監修・労働組合連携）」が91pxの中で折り返す。 */
table th.nb, table td.nb{white-space:nowrap}
/* ○×は色だけで区別しない。文字も添える */
.yes{color:var(--ok);font-weight:700}
.no{color:var(--danger);font-weight:700}


/* ---------- 比較表：スマホではカードに組み替える ----------
 * 5列の表を狭い画面に縮めると1列あたり110px程度になり、
 * 「18,800〜21,800円＋組」のように値が途中で折り返す。
 * 横スクロールで逃げるのではなく、構造そのものを変える。
 *
 * data-label をラベル列にして、2列の definition grid にする。
 * (SITE_REVIEW_STANDARD.md 11-F-7 / 11-F-10)
 */
@media(max-width:768px){
  .tbl-wrap{overflow-x:visible;border-radius:0}
  .tbl-wrap table{min-width:0;width:100%;background:transparent;border-collapse:separate}
  /* clip で隠すと th のレイアウトが残ってビューポートからはみ出す。
     ラベルは data-label で出しているので display:none でよい。 */
  .tbl-wrap thead{display:none}
  .tbl-wrap tr{
    display:block;background:var(--bg);border:1px solid var(--line);
    border-radius:var(--r2);padding:var(--s3);margin-bottom:var(--s3);box-shadow:var(--sh1)
  }
  .tbl-wrap td{
    display:grid;grid-template-columns:5.5em 1fr;gap:var(--s3);
    border:0;border-bottom:1px solid var(--line);padding:var(--s2) 0;font-size:.9rem
  }
  /* 値は1つのグリッドセルに収める。min-width:0 が無いと中身が縮まずはみ出す。 */
  .tbl-wrap td > .v{min-width:0}
  .tbl-wrap tr td:last-child{border-bottom:0;padding-bottom:0}
  .tbl-wrap td::before{
    content:attr(data-label);color:var(--grey);font-size:.8rem;font-weight:400
  }
  /* 1行目（サービス名）はラベルを出さず、カードの見出しとして見せる */
  .tbl-wrap tr td:first-child{
    display:block;font-size:1.05rem;font-weight:700;
    padding:0 0 var(--s2);margin-bottom:var(--s2)
  }
  .tbl-wrap tr td:first-child::before{content:none}
  .tbl-wrap tr td:first-child .na{font-size:.8rem;font-weight:400;display:block;margin-top:2px}
  /* 表の下の注記が表と離れないように */
  .tbl-hint{margin-bottom:var(--s3)}
}

/* ---------- 手順 ---------- */
.flow{counter-reset:f;display:grid;gap:var(--s3);margin:var(--s4) 0;padding:0;list-style:none}
.flow li{
  counter-increment:f;position:relative;
  padding:var(--s3) var(--s3) var(--s3) var(--s5);
  background:var(--surface);border-radius:var(--r2);line-height:1.85
}
.flow li::before{
  content:counter(f);position:absolute;left:var(--s3);top:var(--s3);
  width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.8rem;font-weight:700;
  display:grid;place-items:center
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin:var(--s4) 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:var(--s3) var(--s4) var(--s3) 0;
  font-weight:700;font-size:.98rem;list-style:none;position:relative;line-height:1.7
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"＋";position:absolute;right:0;top:var(--s3);color:var(--accent);font-weight:700
}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 var(--s3);color:var(--grey);font-size:.95rem}
.faq .a p:last-child{margin-bottom:0}

/* ---------- ページ内ナビ ---------- */
.pagenav{
  display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s2) 0;margin:var(--s4) 0;
  border-block:1px solid var(--line);scrollbar-width:thin
}
.pagenav a{
  flex:none;padding:var(--s2) var(--s3);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font-size:.85rem;
  font-weight:700;text-decoration:none;white-space:nowrap
}
.pagenav a:hover{background:var(--accent-soft);color:var(--accent-dark)}
:target{scroll-margin-top:76px}   /* sticky ヘッダーに隠れないように */

/* ---------- 帯 ---------- */
.band{background:var(--surface);padding:var(--s6) 0;margin:var(--s6) 0}
.band-warm{background:var(--warm)}
.band h2{margin-top:0}

/* ---------- 公的窓口(このジャンルでは常設する) ---------- */
.helpline{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);margin:var(--s5) 0;font-size:.9rem;line-height:1.85
}
.helpline .box-t{color:var(--ink-2)}
.helpline ul{margin:var(--s2) 0 0;padding-left:1.2em}
.helpline li{margin-bottom:var(--s1)}

/* ---------- 出典・確認日 ---------- */
.source{
  font-size:.8rem;color:var(--mute);line-height:1.8;
  border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s5)
}
.source a{color:var(--grey)}

/* ---------- PR表記 ---------- */
.pr-bar{
  background:var(--surface);border-bottom:1px solid var(--line);
  font-size:.75rem;color:var(--grey);padding:var(--s2) 0;line-height:1.6
}

/* ---------- フッター ---------- */
.site-foot{background:var(--ink);color:#C7D0DA;margin-top:var(--s7);padding:var(--s6) 0 var(--s5)}
.site-foot a{color:#C7D0DA;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:.85rem;margin-bottom:var(--s4)}
.foot-copy{font-size:.75rem;color:#8C99A8;line-height:1.8}

/* ---------- スマホ固定CTA ---------- */
.fixed-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  padding:var(--s2) var(--s3);box-shadow:0 -2px 12px rgba(27,36,48,.10);
  display:none
}
.fixed-cta .btn-cta{min-height:48px;font-size:.95rem}
@media(max-width:768px){
  .fixed-cta{display:block}
  body{padding-bottom:72px}
}

/* ---------- 本文中のリスト ---------- */
main ul,main ol{margin:0 0 var(--s3);padding-left:1.4em}
main li{margin-bottom:var(--s1);line-height:1.85}

/* ---------- パンくず ---------- */
.crumb{font-size:.78rem;color:var(--mute);margin:var(--s3) 0 0}
.crumb a{color:var(--grey);text-decoration:none}
.crumb a:hover{text-decoration:underline}