@charset "UTF-8";
/* 退職サポートガイド コラム（/column/）共通スタイル
   ブランド: 基調 #00a7c2 / 黄マーカー / Noto Sans JP / px単位
   voice/index.html のシェル（ヘッダー・LINEボタン・フッター）に揃える */

:root{
  --teal:#00a7c2;
  --teal-d:#008ba1;
  --teal-l:#e6f5f8;
  --yellow:#ffff00;
  --line:#06c755;
  --ink:#2b3336;
  --ink-sub:#657279;
  --border:#dfe9ec;
  --warn:#e2703a;
  --warn-bg:#fff6f1;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Noto Sans JP","Noto Sans",sans-serif;
  color:var(--ink);
  background:#fff;
  font-size:15px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.hd__inner{
  max-width:1120px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hd__logo{text-decoration:none;display:inline-flex;min-width:0}
.btn-line{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--line);color:#fff;
  font-size:14px;font-weight:700;text-decoration:none;
  padding:11px 22px;border-radius:999px;
  box-shadow:0 2px 8px rgba(6,199,85,.28);
  white-space:nowrap;
}
.btn-line svg{width:18px;height:18px;flex-shrink:0;fill:currentColor}
.btn-line:hover{background:#05b34c}
.btn-line__short{display:none}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--teal);color:#fff;
  padding:52px 20px 56px;text-align:center;
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.5) 2.2px,transparent 2.4px);
  background-size:14px 14px;opacity:.5;
}
.hero::before{width:230px;height:230px;top:-70px;left:-50px}
.hero::after{width:260px;height:260px;bottom:-90px;right:-60px}
.hero__inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.hero__eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  border:1px solid rgba(255,255,255,.7);border-radius:999px;
  padding:4px 18px;margin-bottom:18px;
}
.hero__title{font-size:34px;font-weight:900;letter-spacing:.04em;line-height:1.5;margin-bottom:14px}
.hero__lead{font-size:15px;line-height:2;opacity:.95}

/* ---------- article hero ---------- */
.ahero{
  position:relative;overflow:hidden;
  background:var(--teal);color:#fff;padding:44px 20px 46px;
}
.ahero::before{
  content:"";position:absolute;width:260px;height:260px;bottom:-96px;right:-64px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.5) 2.2px,transparent 2.4px);
  background-size:14px 14px;opacity:.5;
}
.ahero__inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.ahero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.ahero__cat{
  font-size:12px;font-weight:700;line-height:1;letter-spacing:.06em;
  background:#fff;color:var(--teal-d);border-radius:999px;padding:7px 14px;
}
.ahero__date{font-size:12.5px;opacity:.9}
.ahero__title{font-size:29px;font-weight:900;line-height:1.6;letter-spacing:.02em}
.ahero__lead{font-size:14.5px;line-height:2;margin-top:16px;opacity:.96}

/* ---------- breadcrumb ---------- */
.crumb{max-width:820px;margin:0 auto;padding:14px 20px 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--ink-sub)}
.crumb li::after{content:"›";margin-left:6px;color:#b3c4c9}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--teal-d);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------- article body ---------- */
.art{max-width:820px;margin:0 auto;padding:8px 20px 0}

.toc{
  background:#f7fbfc;border:1px solid var(--border);border-radius:14px;
  padding:22px 24px;margin:26px 0 34px;
}
.toc__ttl{font-size:15px;font-weight:900;margin-bottom:10px;color:var(--teal-d)}
.toc ol{list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;position:relative;padding:5px 0 5px 30px;font-size:14px;line-height:1.7}
.toc li::before{
  content:counter(toc);position:absolute;left:0;top:8px;
  width:20px;height:20px;border-radius:50%;
  background:var(--teal);color:#fff;
  font-size:11px;font-weight:700;line-height:20px;text-align:center;
}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--teal-d);text-decoration:underline}

.art h2{
  font-size:21px;font-weight:900;line-height:1.6;
  margin:46px 0 18px;padding-left:14px;
  border-left:5px solid var(--teal);
  scroll-margin-top:80px;
}
.art h3{
  font-size:17px;font-weight:800;line-height:1.7;
  margin:32px 0 12px;color:var(--teal-d);
}
.art p{margin:0 0 18px;font-size:15px;line-height:2}
.art p.lead{font-size:15.5px}
.mk{background:linear-gradient(transparent 66%,var(--yellow) 0%);padding:0 .1em;font-weight:700}
.art strong{font-weight:700}

.art ul,.art ol{margin:0 0 20px;padding-left:0;list-style:none}
.art ul li{position:relative;padding:5px 0 5px 22px;font-size:15px;line-height:1.95}
.art ul li::before{
  content:"";position:absolute;left:2px;top:15px;
  width:8px;height:8px;border-radius:50%;background:var(--teal);
}
.art ol{counter-reset:num}
.art ol li{counter-increment:num;position:relative;padding:5px 0 5px 32px;font-size:15px;line-height:1.95}
.art ol li::before{
  content:counter(num);position:absolute;left:0;top:9px;
  width:22px;height:22px;border-radius:50%;
  background:var(--teal-l);color:var(--teal-d);
  font-size:12px;font-weight:700;line-height:22px;text-align:center;
}

/* 要点ボックス */
.pt{
  background:var(--teal-l);border-radius:14px;
  padding:22px 24px 18px;margin:24px 0 28px;
}
.pt__ttl{
  display:inline-block;font-size:12px;font-weight:700;line-height:1;letter-spacing:.08em;
  background:var(--teal);color:#fff;border-radius:999px;padding:6px 14px;margin-bottom:12px;
}
.pt p:last-child,.pt ul:last-child,.pt ol:last-child{margin-bottom:0}
.pt ul li::before{background:var(--teal-d)}

/* 注意ボックス */
.warn{
  background:var(--warn-bg);border:1px solid #f3d6c5;border-radius:14px;
  padding:22px 24px 18px;margin:24px 0 28px;
}
.warn__ttl{font-size:14.5px;font-weight:900;color:var(--warn);margin-bottom:8px}
.warn p:last-child,.warn ul:last-child{margin-bottom:0}
.warn ul li::before{background:var(--warn)}

/* テーブル */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px}
.art table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px;line-height:1.75}
.art table.wide{min-width:660px}
.art th,.art td{border:1px solid var(--border);padding:11px 12px;text-align:left;vertical-align:top}
/* 結合セルは中央寄せにしないと、先頭行だけの値に見えてしまう */
.art th[rowspan],.art td[rowspan]{vertical-align:middle}
.art thead th{background:var(--teal);color:#fff;font-weight:700;white-space:nowrap}
.art tbody th{background:#f4fafb;color:var(--teal-d);font-weight:700;white-space:nowrap}
.art td.num{text-align:right;white-space:nowrap}
.art tbody tr:nth-child(even) td{background:#fbfdfd}
.cap{font-size:12px;color:var(--ink-sub);line-height:1.8;margin:0 0 26px}

/* シミュレーション導線 */
.simcta{
  display:block;text-decoration:none;
  border:2px solid var(--teal);border-radius:16px;
  background:#fff;padding:24px 26px;margin:30px 0 32px;
  box-shadow:0 4px 14px rgba(0,113,133,.08);
}
.simcta:hover{background:#f7fcfd}
.simcta__tag{
  display:inline-block;font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.08em;
  background:var(--teal);color:#fff;border-radius:999px;padding:6px 13px;margin-bottom:10px;
}
.simcta__ttl{font-size:18px;font-weight:900;line-height:1.6;color:var(--teal-d);margin-bottom:6px}
.simcta__txt{font-size:14px;line-height:1.9;color:#3f4a4e}
.simcta__go{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:14px;font-weight:700;color:var(--teal-d);
}
.simcta__go::after{content:"→"}

/* 関連記事 */
.rel{max-width:820px;margin:0 auto;padding:10px 20px 0}
.rel__ttl{font-size:16px;font-weight:900;margin-bottom:14px}
.rel ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rel a{
  display:block;text-decoration:none;
  border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;font-size:14px;font-weight:700;line-height:1.7;
}
.rel a:hover{border-color:var(--teal);background:#f7fcfd}
.rel span{display:block;font-size:11.5px;font-weight:700;color:var(--teal-d);margin-bottom:4px}

/* ---------- 一覧カード ---------- */
.list{max-width:1120px;margin:0 auto;padding:52px 20px 8px}
.sec-head{text-align:center;margin-bottom:34px}
.sec-head h2{
  font-size:25px;font-weight:900;letter-spacing:.04em;display:inline-block;
  background:linear-gradient(transparent 74%,var(--yellow) 0%);padding:0 .2em;
}
.sec-head p{font-size:13px;color:var(--ink-sub);margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ccard{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:26px 24px 22px;text-decoration:none;
  box-shadow:0 2px 10px rgba(0,70,85,.05);
  transition:border-color .15s,box-shadow .15s;
}
.ccard:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(0,113,133,.12)}
.ccard__top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ccard__cat{
  font-size:11.5px;font-weight:700;line-height:1;
  color:var(--teal-d);background:var(--teal-l);border-radius:999px;padding:6px 12px;
}
.ccard__date{font-size:12px;color:var(--ink-sub)}
.ccard__ttl{font-size:18px;font-weight:900;line-height:1.65;margin-bottom:10px}
.ccard__lead{font-size:14px;line-height:1.95;color:#3f4a4e;flex:1}
.ccard__go{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--teal-d);
}
.ccard__go::after{content:"　→"}
/* 一覧カードのアイキャッチ（2026-08-09追加・追加クラスのみ） */
.ccard__img{margin:-26px -24px 16px;border-radius:15px 15px 0 0;overflow:hidden;border-bottom:1px solid var(--border);background:var(--teal-l)}
.ccard__img img{width:100%;aspect-ratio:1200/630;object-fit:cover}

/* ---------- disclaimer / CTA / footer ---------- */
.disclaim{max-width:820px;margin:34px auto 0;padding:0 20px}
.disclaim p{font-size:12px;color:var(--ink-sub);line-height:1.9;background:#f7f9fa;border-radius:10px;padding:16px 18px}
.disclaim--wide{max-width:1120px}

.cta{max-width:1120px;margin:0 auto;padding:44px 20px 68px;text-align:center}
.cta__title{font-size:22px;font-weight:900;line-height:1.6;margin-bottom:8px}
.cta__lead{font-size:14px;color:var(--ink-sub);margin-bottom:22px}
.cta__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--line);color:#fff;
  font-size:19px;font-weight:700;text-decoration:none;
  padding:19px 46px;border-radius:999px;
  box-shadow:0 6px 16px rgba(6,199,85,.32);max-width:100%;
}
.cta__btn svg{width:24px;height:24px;flex-shrink:0;fill:currentColor}
.cta__btn:hover{background:#05b34c}
.cta__sub{font-size:12px;color:var(--ink-sub);margin-top:14px}

.ft{background:#233034;color:#fff;padding:44px 20px 30px}
.ft__inner{max-width:1120px;margin:0 auto;text-align:center}
.ft__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin:24px 0 26px;list-style:none}
.ft__nav a{font-size:13px;color:#dfe8ea;text-decoration:none}
.ft__nav a:hover{text-decoration:underline}
.ft__copy{font-size:12px;color:#93a3a8;border-top:1px solid rgba(255,255,255,.14);padding-top:20px}

/* ==========================================================
   v2 部品（2026-08-09 kanyu-kikan.html から導入・追加クラスのみ）
   既存記事には影響しない。リライト時にこの部品群を使う
   ========================================================== */

/* 読了目安チップ */
.ahero__read{
  font-size:12px;line-height:1;opacity:.92;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:5px 12px;
}

/* ヒーロー装飾イラスト（1100px以上でのみ表示） */
.ahero__art{
  display:none;position:absolute;z-index:1;
  right:28px;bottom:-26px;width:200px;height:200px;
  transform:rotate(5deg);opacity:.95;pointer-events:none;
}
/* 1280px未満はリード文と重なるため出さない */
@media (min-width:1280px){
  .ahero__art{display:block}
}

/* キー数字タイル */
.kf{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 10px}
.kf__item{
  background:#fff;border:1px solid var(--border);border-top:4px solid var(--teal);
  border-radius:12px;padding:16px 18px 14px;
  box-shadow:0 2px 10px rgba(0,70,85,.06);
}
.kf__label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-sub);line-height:1.6;margin-bottom:4px}
.kf__num{font-size:30px;font-weight:900;color:var(--teal-d);line-height:1.25}
.kf__num small{font-size:15px;font-weight:800;margin-left:2px}
.kf__note{display:block;font-size:12.5px;color:var(--ink-sub);line-height:1.7;margin-top:6px}

/* 図解共通 */
.fig{margin:24px 0 30px}
.fig figcaption{
  font-size:12.5px;color:var(--ink-sub);line-height:1.9;margin-top:12px;
  padding:10px 14px;background:#f7f9fa;border-radius:10px;
}

/* タイムライン（月の区切り方） */
.tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 6px}
.tl{display:flex;align-items:stretch;gap:8px;min-width:600px}
.tl__seg{
  flex:1;border:1.5px solid var(--teal);background:var(--teal-l);
  border-radius:10px;padding:12px 8px 10px;text-align:center;
}
.tl__seg--frac{border-style:dashed;border-color:#9fb3b9;background:#fff;flex:.8}
.tl__range{display:block;font-size:13.5px;font-weight:800;color:var(--teal-d);white-space:nowrap}
.tl__seg--frac .tl__range{color:var(--ink-sub)}
.tl__tag{
  display:inline-block;font-size:11px;font-weight:700;line-height:1;
  background:var(--teal);color:#fff;border-radius:999px;padding:4px 10px;margin-top:8px;white-space:nowrap;
}
.tl__seg--frac .tl__tag{background:#8fa6ad}
.tl__flag{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;
  background:var(--ink);color:#fff;border-radius:10px;padding:10px 14px;
  font-size:12.5px;font-weight:900;line-height:1.5;white-space:nowrap;
}

/* 判定フローチャート */
.flow{margin:22px 0 10px}
.flow__q{
  background:#fff;border:2px solid var(--teal);border-radius:12px;
  padding:13px 16px;text-align:center;
  font-size:14.5px;font-weight:800;line-height:1.7;margin:0 0 12px;
}
.flow__branches{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.flow__br{border-radius:12px;padding:13px 14px;text-align:center;font-size:14px;font-weight:800;line-height:1.7}
.flow__br--yes{background:var(--teal);color:#fff}
.flow__br--next{background:#f1f5f6;color:var(--ink-sub)}
.flow__br--ng{background:#e9edef;color:#6b787d}
.flow__pill{
  display:block;width:fit-content;margin:0 auto 6px;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.06em;
  background:rgba(255,255,255,.92);color:var(--teal-d);
  border-radius:999px;padding:4px 12px;
}
.flow__br--next .flow__pill,.flow__br--ng .flow__pill{background:#fff;color:#6b787d;border:1px solid #d5dde0}

/* 通算ケース比較 */
.case{border:1px solid var(--border);border-radius:14px;background:#fff;padding:18px 18px 14px;margin:0 0 14px;box-shadow:0 2px 10px rgba(0,70,85,.05)}
.case__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.case__name{font-size:14.5px;font-weight:900;line-height:1.6}
.case__verdict{font-size:12px;font-weight:800;line-height:1;border-radius:999px;padding:7px 14px;white-space:nowrap}
.case__verdict--ok{background:var(--teal);color:#fff}
.case__verdict--ng{background:#c25325;color:#fff}
.case__barwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.case__bar{display:flex;gap:5px;min-width:520px;align-items:stretch}
.case__seg{border-radius:8px;padding:9px 6px;text-align:center;font-size:12px;font-weight:700;line-height:1.55;display:flex;flex-direction:column;justify-content:center}
.case__seg--work{background:var(--teal);color:#fff}
.case__seg--work2{background:var(--teal-d);color:#fff}
.case__seg--gap{
  background:repeating-linear-gradient(45deg,#eef3f5,#eef3f5 6px,#f8fafb 6px,#f8fafb 12px);
  color:var(--ink-sub);border:1px dashed #c2d0d5;
}
.case__seg--event{background:#3f4a4e;color:#fff}
.case__foot{font-size:12.5px;color:var(--ink-sub);line-height:1.8;margin:10px 0 0}

/* 表の判定バッジ */
.jd{display:inline-block;min-width:46px;text-align:center;font-size:12px;font-weight:800;line-height:1.6;border-radius:999px;padding:3px 10px}
.jd--ok{background:var(--teal-l);color:var(--teal-d)}
.jd--ng{background:#f0f2f3;color:#5f6b70}
.art td.res{font-weight:800;color:var(--teal-d);white-space:nowrap}
.art td.res--ng{color:#8a969b}

/* Q&Aカード */
.art .qa{border:1px solid var(--border);border-radius:14px;margin:0 0 16px;overflow:hidden;background:#fff}
.art .qa h3{
  display:flex;gap:12px;align-items:flex-start;margin:0;
  background:#f7fbfc;border-bottom:1px solid var(--border);
  padding:14px 18px;font-size:15.5px;font-weight:800;line-height:1.7;color:var(--ink);
}
.art .qa h3::before{
  content:"Q";flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--teal);color:#fff;
  font-size:14px;font-weight:900;line-height:26px;text-align:center;margin-top:1px;
}
.qa__a{display:flex;gap:12px;padding:16px 18px 4px}
.qa__a::before{
  content:"A";flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--teal);color:var(--teal-d);background:#fff;
  font-size:13px;font-weight:900;line-height:22px;text-align:center;margin-top:2px;
}
.qa__body{flex:1;min-width:0}
.qa__body p{margin-bottom:14px}

/* 出典（一次情報）ボックス */
.src{background:#f7f9fa;border:1px solid var(--border);border-radius:14px;padding:20px 22px 16px;margin:32px 0 6px}
.src__ttl{font-size:13.5px;font-weight:900;letter-spacing:.04em;margin-bottom:8px}
.src ul{margin:0 0 4px}
.src li{font-size:13px;line-height:1.9;padding:4px 0 4px 20px}
.src li::before{width:6px;height:6px;top:15px;background:#9fb3b9}
.src a{color:var(--teal-d)}
.src__note{font-size:11.5px;color:var(--ink-sub);line-height:1.8;margin:8px 0 0}

/* ---------- SP ---------- */
@media (max-width:860px){
  .hero{padding:40px 18px 44px}
  .hero__title{font-size:25px}
  .ahero{padding:34px 18px 38px}
  .ahero__title{font-size:23px}
  .list{padding:40px 18px 8px}
  .sec-head h2{font-size:21px}
  .cards{grid-template-columns:1fr;gap:18px}
  .rel ul{grid-template-columns:1fr}
  .hd__inner{padding:10px 16px}
  .btn-line{font-size:13px;padding:10px 16px}
  .cta__btn{font-size:16px;padding:17px 26px;width:100%}
  .cta__title{font-size:19px}
  .art{padding:8px 18px 0}
  .crumb,.rel,.disclaim{padding-left:18px;padding-right:18px}
  .art h2{font-size:19px}
  .art h3{font-size:16px}
}
@media (max-width:480px){
  .hd__inner{padding:10px 14px;gap:10px}
  .hj-logo{gap:6px}
  .hj-logo__mark{width:26px}
  .hj-logo__text{font-size:18px}
  .btn-line{font-size:12px;padding:9px 14px;gap:6px}
  .btn-line svg{width:15px;height:15px}
  .btn-line__long{display:none}
  .btn-line__short{display:inline}
  .hero__title{font-size:22px}
  .ahero__title{font-size:20px}
  .ccard{padding:22px 18px 18px}
  .ccard__img{margin:-22px -18px 14px}
  .ccard__ttl{font-size:16.5px}
  .toc{padding:18px 16px}
  .pt,.warn{padding:18px 16px 14px}
  .simcta{padding:20px 18px}
  .simcta__ttl{font-size:16px}
  .art h2{font-size:18px;padding-left:11px;border-left-width:4px}
}
@media (max-width:360px){
  .hj-logo__text{font-size:16px}
  .hj-logo__mark{width:23px}
}

/* v2部品のSP調整 */
@media (max-width:480px){
  .kf{grid-template-columns:1fr 1fr;gap:10px}
  .kf__item{padding:13px 14px 11px}
  .kf__num{font-size:25px}
  .flow__q{font-size:13.5px;padding:11px 12px}
  .flow__br{font-size:13px;padding:11px 10px}
  .case{padding:15px 14px 12px}
  .case__name{font-size:13.5px}
  .art .qa h3{padding:12px 14px;font-size:14.5px;gap:10px}
  .qa__a{padding:14px 14px 2px;gap:10px}
  .src{padding:16px 16px 12px}
}