/* コラム記事の共通スタイル（column/*.html。各ページのインラインstyleの後に読み込んで上書き） */
.crumb{margin:18px 0 0}

/* 見出しブロック：枠とグラデーションをやめ、文字と罫線で構成 */
.hero-mini{background:none;border:0;border-bottom:2px solid var(--text);border-radius:0;padding:6px 0 22px;margin:12px 0 8px}
.hero-mini h1{font-family:'Outfit','Zen Kaku Gothic New',sans-serif;font-weight:800;font-size:clamp(24px,3.6vw,34px);line-height:1.35;letter-spacing:-.4px;margin:0 0 14px;max-width:22em}
.hero-mini p{font-size:15px;line-height:1.85;color:var(--text2);max-width:40em}

/* 本文：読みやすい行長 */
.col{line-height:1.95;margin:6px 0 20px}
.col > p,.col > ul,.col > ol,.col > .callout,.col > h2,.col > h3,.col > .faq,.col > .muted{max-width:42em}
.col h2{font-size:21px;font-weight:800;margin:44px 0 12px;padding:14px 0 0;border:0;border-top:1px solid var(--border);border-left:0;letter-spacing:-.2px}
.col h3{font-size:16px;color:var(--text);margin:26px 0 6px}
.col li{margin:6px 0}
.col a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.col a:hover{text-decoration-thickness:2px}

/* 補足ボックス：意味を示す左の色線だけ残す */
.callout{background:var(--panel2);border:0;border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:14px 18px;margin:20px 0}

/* 表：横罫のみ */
.ctable{max-width:42em;font-size:14px;border-top:2px solid var(--text)}
.ctable th,.ctable td{border:0;border-bottom:1px solid var(--border);padding:11px 14px 11px 0}
.ctable th{background:none;font-weight:700;color:var(--text2);font-size:12.5px;border-bottom:1px solid var(--text2)}
.ctable td:first-child{font-weight:700;white-space:nowrap}

/* よくある質問：箱をやめて罫線で区切る */
.faq{border-top:2px solid var(--text);margin-top:14px}
.faq details{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0;padding:0}
.faq summary{padding:15px 0}
.faq details[open] summary{border-bottom:0}
.faq .a{padding:0 0 18px}

/* 関連ページ：カードではなく一覧 */
.relbox{background:none;border:0;border-top:2px solid var(--text);border-radius:0;padding:14px 0 0;margin:36px 0 28px}
.relbox h2{font-size:15px;margin:0 0 4px}
.relcards{display:block}
.relcards a{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:12px 2px;color:var(--accent);font-weight:700}
.relcards a:hover{border-color:var(--border);text-decoration:underline}

/* ---- チェックリスト記事（taifu-junbi-checklist）：時間の流れを縦の線で表す ---- */
.cl-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:18px 0 0;font-size:13.5px;max-width:42em}
.cl-sum b{font-family:'Outfit',sans-serif;font-size:15px;font-variant-numeric:tabular-nums}
.cl-bar{flex:1 1 140px;height:6px;border-radius:3px;background:var(--panel2);overflow:hidden;border:1px solid var(--border)}
.cl-bar i{display:block;height:100%;width:0;background:var(--safe);transition:width .2s}
.cl-reset{appearance:none;background:none;border:0;color:var(--text2);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0}
.cl-stage{position:relative;margin:30px 0 0 10px;padding:0 0 6px 28px;border-left:3px solid var(--border);max-width:42em}
.cl-stage.done{border-left-color:var(--safe)}
.cl-stage > h2{margin:0 0 8px;padding:0;border:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.cl-stage > h2::before{content:"";position:absolute;left:-9px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--panel);border:4px solid var(--border);box-sizing:border-box}
.cl-stage.done > h2::before{border-color:var(--safe);background:var(--safe)}
.cl-n{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
.cl-stage ul{list-style:none;margin:0;padding:0}
.cl-stage li{margin:0;border-top:1px solid var(--border)}
.cl-stage li:last-child{border-bottom:1px solid var(--border)}
.cl-l{display:flex;gap:12px;align-items:flex-start;padding:11px 0;cursor:pointer}
.cl-l input{flex:0 0 auto;width:20px;height:20px;margin:4px 0 0;accent-color:var(--safe);cursor:pointer}
.cl-l input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cl-l input:checked + .cl-t{color:var(--text2);text-decoration:line-through;text-decoration-color:var(--border)}
.cl-l input:checked + .cl-t a{color:var(--text2)}
@media(prefers-reduced-motion:reduce){.cl-bar i{transition:none}}
