/* =========================================================================
   個人事業主の会社設立と法人成り｜main.css
   ルール9：320 / 390 / 430px で横スクロールを出さない。
            固定列数を書かない。表は .khn-tw に包んで表だけ横スクロールさせる。
   ========================================================================= */

:root{
  --ink:#16233c;      /* 墨 */
  --main:#1d3f73;     /* 藍：判断の色 */
  --sub:#2f6ba8;
  --acc:#c8552f;      /* 朱：進める色 */
  --accl:#fbeee7;
  --bg:#f5f7fb;
  --panel:#fff;
  --line:#dde3ee;
  --muted:#61708c;
  --ok:#1f6f52;
  --warn:#a5401f;
  --radius:14px;
  --shadow:0 1px 2px rgba(22,35,60,.05),0 8px 24px -18px rgba(22,35,60,.35);
  --wrap:1120px;
  --ctah:96px;        /* 固定CTAバーの高さぶん、本文の下に余白を空ける */
  --f-body:"KHN Zen Kaku","Yu Gothic Medium","Yu Gothic","Hiragino Sans",Meiryo,system-ui,sans-serif;
  --f-head:"KHN Shippori","Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;
}

/* ============================================================
   Webフォント（自前ホスト・サブセット済み）
   姉妹サイトはすべて OS 標準のヒラギノ角ゴで表示されるため、
   このサイトだけ書体から変える。外部CDNは使わない（ルール3の考え方に合わせる）。
   見出しは明朝、本文は Zen Kaku Gothic New。
   いずれも SIL Open Font License 1.1。字形はサイト内で実際に使う文字だけに絞ってある。
   → 記事を追加したら tools/gen-webfont.sh でサブセットを作り直すこと。
   ============================================================ */
@font-face{
  font-family:"KHN Zen Kaku";
  src:url("fonts/kojin-houjinnari-zenkaku-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"KHN Zen Kaku";
  src:url("fonts/kojin-houjinnari-zenkaku-700.woff2") format("woff2");
  font-weight:700 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"KHN Shippori";
  src:url("fonts/kojin-houjinnari-shippori-700.woff2") format("woff2");
  font-weight:700 900;font-style:normal;font-display:swap;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;line-height:1.9;letter-spacing:.012em;
  overflow-x:hidden;padding-bottom:var(--ctah);
  -webkit-font-smoothing:antialiased;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{color:var(--main);text-underline-offset:.18em}
a:hover{color:var(--acc)}
h1,h2,h3,h4{line-height:1.5;letter-spacing:.005em;overflow-wrap:anywhere}
p,li,dd,dt,td,th{overflow-wrap:anywhere}
.khn-wrap{width:min(100% - 28px,var(--wrap));margin-inline:auto}
@media(min-width:768px){.khn-wrap{width:min(100% - 48px,var(--wrap))}}
.khn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- スキップリンク --- */
.khn-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--main);color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.khn-skip:focus{left:0}

/* =========================================================================
   ヘッダー
   ========================================================================= */
.khn-head{background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:60}
.khn-head::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--main) 0 62%,var(--acc) 62% 100%)}
.khn-head__in{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:wrap}
.khn-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.khn-logo__mk{flex:0 0 auto;width:46px;height:46px;border-radius:11px;background:linear-gradient(145deg,var(--main),#122c53);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px;letter-spacing:0;line-height:1;white-space:nowrap;overflow:hidden;position:relative}
.khn-logo__mk::after{content:"";position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:5px;background:var(--acc);border:2px solid #fff}
.khn-logo__tx{min-width:0}
.khn-logo__t{display:block;font-weight:700;font-size:15px;line-height:1.35;letter-spacing:.01em}
.khn-logo__s{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:2px}
@media(min-width:900px){.khn-logo__t{font-size:17px}}

.khn-navbtn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 13px;font-size:13px;font-weight:700;color:var(--main);cursor:pointer}
.khn-navbtn:hover{border-color:var(--main)}
@media(min-width:900px){.khn-navbtn{display:none}}

.khn-nav{width:100%;display:none;border-top:1px solid var(--line);padding:6px 0 12px}
.khn-nav.is-open{display:block}
@media(min-width:900px){.khn-nav{display:block!important;width:auto;border:0;padding:0;margin-left:auto}}
.khn-nav__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
@media(min-width:900px){.khn-nav__list{display:flex;gap:2px}}
.khn-nav__list a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.khn-nav__list a:hover{background:var(--bg);color:var(--main)}
.khn-nav__list .is-cur a{background:var(--main);color:#fff}

/* 検索小窓 */
.khn-hsearch{display:flex;gap:6px;width:100%;margin-top:8px}
@media(min-width:900px){.khn-hsearch{width:auto;margin:0 0 0 10px}}
.khn-hsearch input{flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:14px;background:var(--bg);color:var(--ink)}
.khn-hsearch input:focus{outline:2px solid var(--sub);outline-offset:1px}
.khn-hsearch button{flex:0 0 auto;border:0;background:var(--main);color:#fff;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer}
.khn-hsearch button:hover{background:var(--acc)}

/* =========================================================================
   パンくず
   ========================================================================= */
.khn-bc{background:var(--panel);border-bottom:1px solid var(--line);font-size:12.5px}
.khn-bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:5px 8px;margin:0;padding:9px 0;color:var(--muted)}
.khn-bc li{display:flex;align-items:center;gap:8px;min-width:0}
.khn-bc li+li::before{content:"›";color:#a9b4c8}
.khn-bc a{color:var(--main);text-decoration:none}
.khn-bc a:hover{text-decoration:underline}
.khn-bc [aria-current]{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(100%,42ch)}

/* =========================================================================
   レイアウト
   ========================================================================= */
.khn-main{padding:26px 0 46px}
.khn-cols{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.khn-cols{grid-template-columns:minmax(0,1fr) 306px;gap:32px;align-items:start}}
.khn-side{display:grid;gap:18px;min-width:0}
@media(min-width:1000px){.khn-side{position:sticky;top:14px}}

.khn-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.khn-pad{padding:18px}
@media(min-width:768px){.khn-pad{padding:26px 30px}}

/* =========================================================================
   記事本文
   ========================================================================= */
.khn-article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;min-width:0}
@media(min-width:768px){.khn-article{padding:32px 36px}}
.khn-ttl{font-size:clamp(21px,4.6vw,31px);margin:0 0 12px;letter-spacing:.002em}
.khn-meta{display:flex;flex-wrap:wrap;gap:7px 12px;font-size:12.5px;color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:13px;margin-bottom:20px}
.khn-meta__cat{background:var(--main);color:#fff;border-radius:999px;padding:2px 11px;text-decoration:none;font-weight:700}
.khn-meta__cat:hover{background:var(--acc);color:#fff}

.khn-body{font-size:16px}
@media(min-width:768px){.khn-body{font-size:16.5px}}
.khn-body h2{font-size:clamp(19px,3.5vw,24px);margin:2.4em 0 .85em;scroll-margin-top:14px}
.khn-body h3{font-size:clamp(17px,2.9vw,20px);margin:2em 0 .7em}
.khn-body h4{font-size:16.5px;margin:1.6em 0 .6em;color:var(--main)}
.khn-body p{margin:0 0 1.5em}
.khn-body ul,.khn-body ol{margin:0 0 1.6em;padding-left:1.5em}
.khn-body li{margin:.42em 0}
.khn-body strong{background:linear-gradient(transparent 62%,rgba(200,85,47,.2) 62%);font-weight:700}
.khn-body figure{margin:1.8em 0}
.khn-body figcaption{font-size:12.5px;color:var(--muted);margin-top:.6em;line-height:1.75}
.khn-body blockquote{margin:1.7em 0;padding:15px 18px;background:var(--bg);border-left:5px solid var(--sub);border-radius:0 10px 10px 0}
.khn-body blockquote p:last-child{margin:0}

/* 表：ルール9。出力側フィルタ khn_wrap_tables で .khn-tw に包む */
.khn-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6em 0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.khn-tw>table{margin:0;border:0;min-width:520px;width:100%;border-collapse:collapse;font-size:14.5px}
.khn-tw th,.khn-tw td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
.khn-tw thead th{background:var(--main);color:#fff;font-weight:700;border-color:rgba(255,255,255,.22);position:sticky;top:0}
.khn-tw tbody th{background:var(--bg);font-weight:700;white-space:nowrap}
.khn-tw tbody tr:nth-child(even) td{background:#fafbfd}
.khn-tw__hint{font-size:11.5px;color:var(--muted);padding:6px 12px;border-top:1px dashed var(--line);margin:0}
@media(min-width:700px){.khn-tw__hint{display:none}}

/* 注記ボックス */
.khn-note{margin:1.6em 0;padding:14px 17px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-size:15px;line-height:1.85}
.khn-note__t{display:block;font-weight:700;margin-bottom:.34em}
.khn-note--warn{background:#fdf1ec;border-color:#f0c9b8}.khn-note--warn .khn-note__t{color:var(--warn)}
.khn-note--ok{background:#eef6f2;border-color:#c5ded3}.khn-note--ok .khn-note__t{color:var(--ok)}
.khn-note--info{background:#eff4fb;border-color:#c9d9ee}.khn-note--info .khn-note__t{color:var(--main)}
.khn-note--memo{background:#fbf6e8;border-color:#e8d9ac}.khn-note--memo .khn-note__t{color:#8a6a17}

/* 冒頭「誰に向けた記事か」／末尾「呼びかけ」 */
.khn-forwhom__t{font-weight:700;color:var(--main);font-size:15.5px;margin:0 0 .5em!important}
.khn-forwhom p{margin:0 0 .7em}
.khn-forwhom p:last-child{margin:0}
.khn-callout-end{margin:2.6em 0 0;padding:20px 22px;border-radius:14px;background:linear-gradient(160deg,#eff3fa,#fbeee7);border:1px solid var(--line)}
.khn-callout-end h3{margin:0 0 .6em;color:var(--main);border:0;padding:0;font-size:18px}
.khn-callout-end p{margin:0 0 .7em}
.khn-callout-end p:last-child{margin:0}

/* 出典（ルール4） */
.khn-src{margin:.4em 0 2.2em;padding:10px 13px;background:var(--bg);border-left:4px solid var(--sub);border-radius:0 9px 9px 0;font-size:13px;line-height:1.8;color:var(--muted)}
.khn-src__lb{display:inline-block;background:var(--sub);color:#fff;font-size:11px;font-weight:700;border-radius:5px;padding:1px 7px;margin-right:7px}
.khn-src a{color:var(--main);font-weight:600}
.khn-src__org{color:var(--muted)}

/* 目次 */
.khn-toc{margin:0 0 30px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(180deg,#fff,var(--bg));overflow:hidden}
.khn-toc__h{display:flex;align-items:center;gap:9px;margin:0;padding:13px 17px;background:var(--main);color:#fff;font-size:15px;font-weight:700}
.khn-toc__h span{margin-left:auto;font-size:11.5px;font-weight:500;opacity:.85}
.khn-toc ol{list-style:none;margin:0;padding:12px 17px 15px;counter-reset:khntoc}
.khn-toc li{counter-increment:khntoc;margin:.28em 0;padding-left:2.15em;position:relative;font-size:14.5px;line-height:1.7}
.khn-toc li::before{content:counter(khntoc,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:ui-monospace,monospace;font-size:12px;color:var(--acc);font-weight:700}
.khn-toc a{color:var(--ink);text-decoration:none}
.khn-toc a:hover{color:var(--acc);text-decoration:underline}
.khn-toc__l3{padding-left:3.2em!important;font-size:13.5px;color:var(--muted)}
.khn-toc__l3::before{content:"–";color:#b3bdcf}

/* =========================================================================
   ルール2：紹介サイト
   ========================================================================= */
.khn-sites{margin:2.8em 0 0;border-top:3px solid var(--main);padding-top:20px}
.khn-sites__h{font-size:clamp(17px,3.1vw,21px);margin:0 0 .5em;color:var(--main)}
.khn-sites__note{font-size:12.5px;color:var(--muted);margin:0 0 1.1em;line-height:1.8}
.khn-sites__list{list-style:none;margin:0;padding:0;display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.khn-sites__list li{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px;min-width:0}
.khn-sites__list a{font-weight:700;font-size:14.5px;text-decoration:none;display:block;line-height:1.55;overflow-wrap:anywhere;line-break:anywhere;letter-spacing:0}
.khn-sites__list a:hover{text-decoration:underline}
.khn-sites__d{margin:.35em 0 0;font-size:12.5px;color:var(--muted);line-height:1.75;overflow-wrap:anywhere;line-break:anywhere}
.khn-sites__u{display:block;margin-top:.3em;font-size:11px;color:#93a0b6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ルール10：1件ずつ見た目を変える（7周期で色帯・番号・左罫を回す） */
.khn-sites__list li:nth-child(7n+1){border-left:5px solid var(--main)}
.khn-sites__list li:nth-child(7n+2){background:var(--bg)}
.khn-sites__list li:nth-child(7n+3){border-top:4px solid var(--acc)}
.khn-sites__list li:nth-child(7n+4){border-style:dashed}
.khn-sites__list li:nth-child(7n+5){background:linear-gradient(180deg,#fff,var(--accl))}
.khn-sites__list li:nth-child(7n+6){border-left:5px solid var(--sub);border-radius:3px 11px 11px 3px}
.khn-sites__list li:nth-child(7n+7){box-shadow:var(--shadow)}

/* =========================================================================
   ルール8：固定CTA
   ========================================================================= */
.khn-cta-fix{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-top:3px solid var(--acc);box-shadow:0 -6px 20px -12px rgba(22,35,60,.5)}
.khn-cta-fix__in{display:flex;align-items:center;gap:10px;padding:8px 0 7px;flex-wrap:wrap}
.khn-cta-fix__lb{flex:1 1 240px;min-width:0;font-size:12.5px;font-weight:700;line-height:1.55;color:var(--ink)}
@media(min-width:768px){.khn-cta-fix__lb{font-size:14px}}
.khn-cta-fix__b{flex:0 0 auto;background:linear-gradient(160deg,var(--acc),#a8401f);color:#fff;text-decoration:none;font-weight:700;font-size:14px;border-radius:10px;padding:11px 20px;white-space:nowrap;box-shadow:0 4px 12px -5px rgba(200,85,47,.8)}
.khn-cta-fix__b:hover{color:#fff;filter:brightness(1.08)}
.khn-cta-fix__n{flex:1 1 100%;font-size:10px;line-height:1.55;color:var(--muted);margin:0}
@media(max-width:520px){.khn-cta-fix__n{max-height:2.2em;overflow:hidden}}

/* 記事中CTA */
.khn-cta-in{margin:2.4em 0;border-radius:15px;background:linear-gradient(155deg,#1d3f73,#122c53);color:#fff;padding:22px;box-shadow:var(--shadow)}
.khn-cta-in h4{margin:0 0 .55em;font-size:17px;color:#fff;line-height:1.6}
.khn-cta-in p{margin:0 0 1em;font-size:14px;line-height:1.85;color:#dbe4f2}
.khn-cta-in a.khn-cta-in__b{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;border-radius:10px;padding:12px 24px;font-size:15px}
.khn-cta-in a.khn-cta-in__b:hover{filter:brightness(1.1);color:#fff}
.khn-cta-in__n{font-size:10.5px!important;color:#a9bad4!important;margin:.9em 0 0!important;line-height:1.6}

/* =========================================================================
   一覧（ルール10）：同じ形のブロックを並べない
   ========================================================================= */
.khn-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.khn-it{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.khn-it a{text-decoration:none;color:inherit}
.khn-it__im{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg)}
.khn-it__b{padding:14px 16px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto;min-width:0}
.khn-it__c{align-self:flex-start;font-size:11px;font-weight:700;color:var(--main);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.khn-it__t{margin:0;font-size:15.5px;line-height:1.6;font-weight:700}
.khn-it__t a:hover{color:var(--acc)}
.khn-it__x{margin:0;font-size:12.8px;color:var(--muted);line-height:1.75}
.khn-it__d{margin:auto 0 0;font-size:11.5px;color:#93a0b6}

/* 変種A：画像を左に */
.khn-it--l{grid-column:1/-1}
.khn-it--l>a{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:620px){.khn-it--l>a{grid-template-columns:minmax(0,236px) minmax(0,1fr)}
  .khn-it--l .khn-it__im{height:100%;aspect-ratio:auto;min-height:150px}}
/* 変種B：画像を右に */
.khn-it--r{grid-column:1/-1}
.khn-it--r>a{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:620px){.khn-it--r>a{grid-template-columns:minmax(0,1fr) minmax(0,236px)}
  .khn-it--r .khn-it__im{order:2;height:100%;aspect-ratio:auto;min-height:150px}
  .khn-it--r .khn-it__b{order:1}}
/* 変種C：画像を上に大きく1カラム */
.khn-it--w{grid-column:1/-1;border-top:5px solid var(--acc)}
.khn-it--w .khn-it__im{aspect-ratio:2.4/1}
.khn-it--w .khn-it__t{font-size:clamp(16px,3vw,20px)}
/* 変種D：画像なし・色帯 */
.khn-it--n{background:linear-gradient(160deg,var(--main),#122c53);color:#fff;border:0}
.khn-it--n .khn-it__c{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.khn-it--n .khn-it__x,.khn-it--n .khn-it__d{color:#c8d5e9}
.khn-it--n .khn-it__t a:hover{color:var(--accl)}
/* 変種E：番号つき・画像小 */
.khn-it--num .khn-it__b{position:relative;padding-top:20px}
.khn-it--num .khn-it__b::before{content:attr(data-n);position:absolute;right:12px;top:8px;font-family:ui-monospace,monospace;font-size:26px;font-weight:700;color:var(--line);line-height:1}
/* 変種F：枠線だけ・淡色 */
.khn-it--f{box-shadow:none;background:var(--bg);border-style:dashed}

/* カテゴリーカード */
.khn-cats{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));list-style:none;margin:0;padding:0}
.khn-cats li{margin:0;min-width:0}
.khn-cats a{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 15px;text-decoration:none;color:inherit;height:100%;box-shadow:var(--shadow)}
.khn-cats a:hover{border-color:var(--main);transform:translateY(-1px)}
.khn-cats__ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--bg);color:var(--main);display:grid;place-items:center;border:1px solid var(--line)}
.khn-cats__ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.khn-cats__t{display:block;font-weight:700;font-size:14.3px;line-height:1.5;color:var(--ink)}
.khn-cats__d{display:block;margin-top:.35em;font-size:12px;color:var(--muted);line-height:1.7}
.khn-cats__n{display:block;margin-top:.4em;font-size:11px;color:#93a0b6}
/* ルール10：5周期で見た目を変える */
.khn-cats li:nth-child(5n+2) a{background:var(--bg)}
.khn-cats li:nth-child(5n+3) a{border-left:5px solid var(--acc)}
.khn-cats li:nth-child(5n+3) .khn-cats__ic{background:var(--accl);color:var(--acc)}
.khn-cats li:nth-child(5n+4) a{flex-direction:column}
.khn-cats li:nth-child(5n+4) .khn-cats__ic{width:100%;height:34px;border-radius:8px}
.khn-cats li:nth-child(5n+5) a{border-top:4px solid var(--main);box-shadow:none}

/* タグ雲 */
.khn-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.khn-tags a{display:inline-block;font-size:12.5px;text-decoration:none;color:var(--main);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 12px;line-height:1.7}
.khn-tags a:hover{background:var(--main);color:#fff;border-color:var(--main)}
.khn-tags li:nth-child(4n+2) a{border-style:dashed}
.khn-tags li:nth-child(4n+3) a{background:var(--accl);color:var(--acc);border-color:#f0cdbc}
.khn-tags li:nth-child(4n+3) a:hover{background:var(--acc);color:#fff}

/* アーカイブ見出し */
.khn-ah{background:linear-gradient(155deg,var(--main),#122c53);color:#fff;border-radius:var(--radius);padding:22px;margin:0 0 22px;box-shadow:var(--shadow)}
.khn-ah__k{font-size:11.5px;letter-spacing:.14em;opacity:.8;margin:0 0 .4em}
.khn-ah h1{margin:0;font-size:clamp(20px,4.2vw,28px);line-height:1.45}
.khn-ah__d{margin:.8em 0 0;font-size:14px;line-height:1.85;color:#d5dff0}
.khn-ah__n{margin:.7em 0 0;font-size:12px;color:#a9bad4}

/* 絞り込み（カテゴリー×タグ） */
.khn-filter{margin:0 0 22px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.khn-filter__h{font-size:13px;font-weight:700;color:var(--main);margin:0 0 .6em}

/* サイドバー */
.khn-side__h{font-size:14px;font-weight:700;margin:0;padding:12px 15px;background:var(--main);color:#fff;border-radius:12px 12px 0 0;display:flex;align-items:center;gap:8px}
.khn-side__b{padding:14px 15px}
.khn-side ol,.khn-side ul{margin:0;padding:0;list-style:none}
.khn-side__rank li{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.4px;line-height:1.65}
.khn-side__rank li:last-child{border:0;padding-bottom:0}
.khn-side__rank a{text-decoration:none;color:var(--ink)}
.khn-side__rank a:hover{color:var(--acc)}
.khn-side__no{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--bg);color:var(--main);font-size:11.5px;font-weight:700;display:grid;place-items:center;font-family:ui-monospace,monospace}
.khn-side__rank li:nth-child(-n+3) .khn-side__no{background:var(--acc);color:#fff}

/* 関連記事 */
.khn-rel{margin:34px 0 0}
.khn-rel__h{font-size:clamp(17px,3vw,20px);margin:0 0 14px;padding-left:.6em;border-left:6px solid var(--acc);color:var(--main)}

/* 役に立った */
.khn-help{margin:2.4em 0 0;border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:17px 19px;text-align:center}
.khn-help__t{font-size:15px;font-weight:700;margin:0 0 .8em}
.khn-help__b{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--acc);background:#fff;color:var(--acc);font-weight:700;font-size:14.5px;border-radius:999px;padding:9px 22px;cursor:pointer}
.khn-help__b:hover{background:var(--acc);color:#fff}
.khn-help__b[disabled]{opacity:.62;cursor:default;background:var(--acc);color:#fff}
.khn-help__n{font-size:12px;color:var(--muted);margin:.7em 0 0}

/* 著者box */
.khn-author{margin:2.4em 0 0;display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:15px 17px}
.khn-author__ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--main);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.khn-author__t{font-weight:700;font-size:14px;margin:0 0 .3em}
.khn-author__x{font-size:12.5px;color:var(--muted);margin:0;line-height:1.8}

/* ページャ */
.khn-pager{margin:26px 0 0;display:flex;justify-content:center}
.khn-pager .page-numbers{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 11px;margin:0 3px;border:1px solid var(--line);border-radius:9px;background:var(--panel);text-decoration:none;color:var(--main);font-size:14px;font-weight:700}
.khn-pager .page-numbers.current{background:var(--main);color:#fff;border-color:var(--main)}
.khn-pager .page-numbers:hover{border-color:var(--acc);color:var(--acc)}
.khn-pager .dots{border:0;background:transparent}

/* SNS枠 */
.khn-sns{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));list-style:none;margin:0;padding:0}
.khn-sns a{display:flex;align-items:center;gap:9px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--ink);font-size:13px;font-weight:700}
.khn-sns a:hover{border-color:var(--main);color:var(--main)}
.khn-sns__ic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}

/* 統計 */
.khn-stat{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr));list-style:none;margin:0;padding:0}
.khn-stat li{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px 16px;min-width:0}
.khn-stat__n{display:block;font-family:ui-monospace,monospace;font-size:clamp(21px,4.5vw,27px);font-weight:700;color:var(--main);line-height:1.25}
.khn-stat__l{display:block;font-size:12.5px;font-weight:700;margin:.35em 0 .25em}
.khn-stat__s{display:block;font-size:11px;color:var(--muted);line-height:1.65}
.khn-stat__s a{color:var(--sub)}
.khn-stat li:nth-child(3n+2){background:var(--bg)}
.khn-stat li:nth-child(3n+3){border-top:4px solid var(--acc)}

/* セクション見出し（トップ） */
.khn-sec{margin:0 0 34px}
.khn-sec__h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0 0 15px;padding-bottom:9px;border-bottom:2px solid var(--line);position:relative}
.khn-sec__h::after{content:"";position:absolute;left:0;bottom:-2px;width:110px;height:2px;background:var(--acc)}
.khn-sec__h h2{margin:0;font-size:clamp(18px,3.4vw,23px)}
.khn-sec__h span{font-size:12px;color:var(--muted)}
.khn-sec__more{margin-left:auto;font-size:12.5px;font-weight:700;text-decoration:none}

/* ヒーロー（トップ） */
.khn-hero{background:linear-gradient(150deg,#1d3f73 0%,#122c53 55%,#0e2340 100%);color:#fff;border-radius:0 0 26px 26px;overflow:hidden;position:relative}
.khn-hero::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(200,85,47,.34),transparent 66%)}
.khn-hero__in{padding:30px 0 34px;position:relative;z-index:1}
.khn-hero__k{display:inline-block;font-size:11.5px;letter-spacing:.13em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:3px 13px;margin:0 0 13px}
.khn-hero h1{margin:0 0 14px;font-size:clamp(22px,5.2vw,36px);line-height:1.42;letter-spacing:.004em}
.khn-hero h1 b{color:#ffc9a8;font-weight:700}
.khn-hero__x{margin:0 0 20px;font-size:14.5px;line-height:1.95;color:#d3ddef;max-width:62ch}
.khn-hero__pt{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));list-style:none;margin:0 0 20px;padding:0}
.khn-hero__pt li{margin:0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.75;color:#e4ebf6;min-width:0}
.khn-hero__pt b{display:block;color:#fff;font-size:14.5px;margin-bottom:.25em}
.khn-hero__pt li:nth-child(2){background:rgba(200,85,47,.2);border-color:rgba(255,180,140,.35)}
.khn-hero__b{display:inline-flex;align-items:center;gap:9px;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;font-size:15px;border-radius:11px;padding:13px 26px}
.khn-hero__b:hover{color:#fff;filter:brightness(1.09)}

/* =========================================================================
   フッター
   ========================================================================= */
.khn-foot{background:#12203a;color:#c3cfe2;margin-top:44px;padding:30px 0 24px;font-size:13.5px}
.khn-foot a{color:#dbe4f2;text-decoration:none}
.khn-foot a:hover{color:#ffc9a8;text-decoration:underline}
.khn-foot__g{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.khn-foot__h{font-size:13px;font-weight:700;color:#fff;margin:0 0 .7em;padding-bottom:.45em;border-bottom:1px solid rgba(255,255,255,.16)}
.khn-foot ul{list-style:none;margin:0;padding:0}
.khn-foot li{margin:.34em 0;line-height:1.75}
.khn-foot__x{font-size:12.3px;line-height:1.9;color:#9fb0c9;margin:0}
.khn-foot__c{margin:24px 0 0;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);font-size:11.5px;color:#8ea0ba;line-height:1.8}

/* 印刷 */
@media print{.khn-cta-fix,.khn-navbtn,.khn-hsearch,.khn-side{display:none!important}body{padding-bottom:0}}
/* キーワード一覧（固定ページ） */
.khn-kw{margin:1.4em 0}
.khn-kw__h{font-size:clamp(16px,3vw,19px);margin:1.6em 0 .7em;color:var(--main);border-left:5px solid var(--acc);padding-left:11px}
.khn-kw__cats{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.khn-kw__cats li{margin:0;min-width:0}
.khn-kw__cats a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px;text-decoration:none;height:100%}
.khn-kw__cats a:hover{border-color:var(--acc)}
.khn-kw__cats li:nth-child(5n+1) a{border-left:5px solid var(--main)}
.khn-kw__cats li:nth-child(5n+3) a{background:var(--bg)}
.khn-kw__cats li:nth-child(5n+5) a{border-top:4px solid var(--acc)}
.khn-kw__n{display:block;font-weight:700;font-size:14.5px;color:var(--main);letter-spacing:0;overflow-wrap:anywhere}
.khn-kw__c{display:inline-block;margin-top:.3em;font-size:11.5px;color:#fff;background:var(--sub);border-radius:999px;padding:1px 9px}
.khn-kw__d{display:block;margin-top:.45em;font-size:12.5px;color:var(--muted);line-height:1.75;letter-spacing:0;overflow-wrap:anywhere}
.khn-kw__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.khn-kw__tags li{margin:0}
.khn-kw__tags a{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:13px;text-decoration:none;color:var(--main);letter-spacing:0}
.khn-kw__tags a:hover{border-color:var(--acc);background:var(--accl)}
.khn-kw__tags a span{font-size:11px;color:var(--muted)}

/* 役に立ったボタン */
.khn-helpful{margin:2.4em 0 0;padding:18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:13px;text-align:center}
.khn-helpful__q{margin:0 0 .8em;font-weight:700;font-size:15px;color:var(--main)}
.khn-helpful__b{display:inline-flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--acc);color:var(--acc);border-radius:999px;padding:9px 22px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.khn-helpful__b:hover:not(:disabled){background:var(--acc);color:#fff}
.khn-helpful__b:disabled{cursor:default;opacity:.85}
.khn-helpful.is-done .khn-helpful__b{background:var(--acc);color:#fff;border-color:var(--acc)}
.khn-helpful__i{font-size:17px;line-height:1}
.khn-helpful__n{background:var(--main);color:#fff;border-radius:999px;padding:1px 10px;font-size:13px;letter-spacing:0}
.khn-helpful.is-done .khn-helpful__n{background:rgba(255,255,255,.28)}
.khn-helpful__x{margin:.9em 0 0;font-size:11.5px;color:var(--muted);line-height:1.8}

/* トップの統計セクション */
.khn-stats__list{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.khn-stats__i{margin:0;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px 16px}
.khn-stats__i:nth-child(3n+1){border-left:5px solid var(--main)}
.khn-stats__i:nth-child(3n+2){border-top:4px solid var(--acc)}
.khn-stats__i:nth-child(3n+3){background:var(--bg)}
.khn-stats__lb{margin:0;font-size:12.5px;color:var(--muted);letter-spacing:0;line-height:1.7;overflow-wrap:anywhere}
.khn-stats__v{margin:.25em 0 .5em;font-weight:700;font-size:clamp(17px,3.4vw,22px);color:var(--main);letter-spacing:0;line-height:1.45;overflow-wrap:anywhere}
.khn-stats__n{margin:0;font-size:13px;line-height:1.85;letter-spacing:0;overflow-wrap:anywhere}
.khn-stats__d{margin:.5em 0 0;font-size:12px;color:var(--muted);line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.khn-stats__s{margin:.6em 0 0;font-size:11.5px;color:var(--muted);letter-spacing:0;overflow-wrap:anywhere}
.khn-stats__s a{color:var(--sub)}
.khn-stats__f{margin:1.1em 0 0;font-size:12.5px;color:var(--muted);line-height:1.9}

/* カテゴリーページの SNS 枠 */
.khn-social{margin:2.6em 0 0;padding-top:20px;border-top:3px solid var(--sub)}
.khn-social__h{font-size:clamp(16px,3.1vw,20px);margin:0 0 .5em;color:var(--main)}
.khn-social__x{font-size:12.5px;color:var(--muted);margin:0 0 1.1em;line-height:1.85}
.khn-social__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.khn-social__i{margin:0;min-width:0}
.khn-social__i a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px;text-decoration:none;height:100%}
.khn-social__i a:hover{border-color:var(--acc)}
.khn-social__i--youtube a{border-left:5px solid #c8352b}
.khn-social__i--x a{border-left:5px solid #14171a}
.khn-social__i--instagram a{border-left:5px solid #b3438f}
.khn-social__i--tiktok a{border-left:5px solid #0f8f8f}
.khn-social__n{display:block;font-weight:700;font-size:14px;color:var(--main);letter-spacing:0}
.khn-social__d{display:block;margin-top:.4em;font-size:12px;color:var(--muted);line-height:1.75;letter-spacing:0;overflow-wrap:anywhere}

/* ============================================================
   khn-tl ｜ トップの主軸：法人成りの4段階タイムライン
   「カテゴリーから探す」型ではなく「いま自分はどの段階か」から入る。
   縦のレールを1本通し、段階を上から下へ流す。
   スマホ幅ではレールを左端に寄せ、中身はすべて1カラムに畳む。
   ============================================================ */
.khn-tl{margin:0 0 56px}
.khn-tl__head{margin:0 0 30px}
.khn-tl__h{margin:0 0 .5em;font-size:clamp(21px,4.4vw,29px);line-height:1.45;color:var(--ink);letter-spacing:.01em}
.khn-tl__h::after{content:"";display:block;width:54px;height:4px;margin-top:.55em;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--main))}
.khn-tl__x{margin:0 0 1.2em;font-size:14.5px;line-height:2;color:var(--muted);max-width:68ch}

/* 段階への飛び先 */
.khn-tl__nav{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,186px),1fr))}
/* 2行になる段階名があるので、li を伸ばして a を高さいっぱいにする（揃えないと1つだけ背が高くなる） */
.khn-tl__nav li{display:flex;min-width:0}
.khn-tl__nav a{display:flex;align-items:center;gap:9px;padding:11px 13px;width:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);
  font-size:13.5px;font-weight:700;line-height:1.55;transition:border-color .15s,transform .15s}
.khn-tl__nav a:hover{border-color:var(--sub);transform:translateY(-1px)}
.khn-tl__nav b{flex:none;align-self:center;width:22px;height:22px;border-radius:50%;background:var(--main);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800}

/* レール本体 */
.khn-tl__list{list-style:none;margin:0;padding:0;position:relative}
.khn-tl__list::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--main),var(--sub),var(--acc));opacity:.28;border-radius:1px}
.khn-tl__st{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;
  padding:0 0 34px;align-items:start}
.khn-tl__st:last-child{padding-bottom:0}
.khn-tl__mk{position:relative;z-index:1}
.khn-tl__no{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--main);color:#fff;font-size:16px;font-weight:800;
  box-shadow:0 0 0 5px var(--bg)}
.khn-tl__st--go .khn-tl__no{background:var(--acc)}

.khn-tl__bd{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 22px;box-shadow:var(--shadow);min-width:0}
.khn-tl__st--go .khn-tl__bd{border-color:#f0d6c9}
.khn-tl__lead{margin:0 0 .35em;font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:.03em}
.khn-tl__st--go .khn-tl__lead{color:var(--acc)}
.khn-tl__t{margin:0 0 .55em;font-size:clamp(17px,3.4vw,21px);line-height:1.5;color:var(--ink)}
.khn-tl__p{margin:0 0 .9em;font-size:14px;line-height:2;color:var(--ink);opacity:.9}
.khn-tl__when{margin:0;display:inline-block;padding:5px 11px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.6}

/* 段階④の期限 */
.khn-tl__kgh{margin:1.3em 0 .7em;font-size:13px;font-weight:700;color:var(--ink)}
.khn-tl__kgs-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,244px),1fr))}
.khn-tl__kg{padding:12px 13px;background:var(--accl);border-radius:10px;border-left:4px solid var(--acc);min-width:0}
.khn-tl__kgv{display:block;font-size:14px;font-weight:800;color:var(--warn);line-height:1.6;overflow-wrap:anywhere}
.khn-tl__kgl{display:block;margin-top:.35em;font-size:12.5px;color:var(--ink);line-height:1.75;overflow-wrap:anywhere}
.khn-tl__kgs{display:block;margin-top:.5em;font-size:11.5px;color:var(--muted);line-height:1.7;overflow-wrap:anywhere}
.khn-tl__kgs a{color:var(--sub)}
.khn-tl__kgn{margin:.8em 0 0;font-size:11.5px;line-height:1.85;color:var(--muted)}

/* その段階のカテゴリー */
.khn-tl__ch{margin:1.4em 0 .7em;font-size:13px;font-weight:700;color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em}
.khn-tl__ch span{font-size:11.5px;font-weight:500;color:var(--muted)}
.khn-tl__cats{list-style:none;margin:0;padding:0;display:grid;gap:7px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,252px),1fr))}
/* li を伸ばし、a を li いっぱいに広げる。これをやらないと2行になった枠だけ背が高くなり、行がガタつく。 */
.khn-tl__cats li{display:flex;min-width:0}
.khn-tl__cats a{display:flex;align-items:center;gap:8px;padding:10px 11px;min-width:0;width:100%;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;
  text-decoration:none;color:var(--ink);font-size:12.5px;line-height:1.6;
  transition:background .15s,border-color .15s}
.khn-tl__cats a:hover{background:#fff;border-color:var(--sub)}
/* 日本語は文字間で自然に折り返るので overflow-wrap:anywhere は付けない（英数字だけ保険をかける） */
.khn-tl__cats a span{flex:1 1 auto;min-width:0;word-break:normal;overflow-wrap:break-word}
.khn-tl__cats a i{flex:none;align-self:center;font-style:normal;font-size:11px;font-weight:700;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.khn-tl__ic{flex:none;align-self:center;width:18px;height:18px;color:var(--sub);display:grid;place-items:center}
/* このアイコンは塗りではなく線で描くので、fill:none と stroke の指定が要る。
   外側の span だけ書くと、中の svg が既定の黒塗りになって潰れる。 */
.khn-tl__ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:600px){
  .khn-tl__list::before{left:13px}
  .khn-tl__st{grid-template-columns:28px minmax(0,1fr);gap:11px;padding-bottom:26px}
  .khn-tl__no{width:28px;height:28px;font-size:13px;box-shadow:0 0 0 4px var(--bg)}
  .khn-tl__bd{padding:16px 15px 18px}
  .khn-tl__nav{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
}

/* 見出しは明朝にする。姉妹サイトはすべてゴシック見出しなので、ここが一番はっきり分かれる。 */
h1,h2,h3,
.khn-hero h1,.khn-sec__h h2,.khn-tl__h,.khn-tl__t,
.khn-body h2,.khn-body h3,
.khn-stats h2,.khn-sites__h,.khn-arch__t{
  font-family:var(--f-head);
  font-weight:700;
  letter-spacing:.02em;
}
/* 明朝は線が細いので、小さい字では字間をわずかに開けて読みやすさを保つ */
.khn-tl__lead,.khn-tl__when,.khn-card__t{letter-spacing:.01em}
/* 数字は等幅のままにして、期限や金額を読み違えにくくする */
.khn-tl__kgv,.khn-stats__v,.khn-stat__n{font-feature-settings:"palt" 0;letter-spacing:0}

/* ============================================================
   khn-sb ｜ カテゴリーページの「いまどの段階か」の帯
   トップのタイムラインと同じ4段階を横に並べ、現在地を示す。
   分類ページ単体で来た読者にも、全体のどこにいるかが分かるようにする。
   ============================================================ */
.khn-sb{margin:0 0 26px;padding:18px 18px 20px;background:var(--panel);
  border:1px solid var(--line);border-left:5px solid var(--main);border-radius:var(--radius);box-shadow:var(--shadow)}
.khn-sb__h{margin:0 0 .9em;font-size:13.5px;color:var(--muted);line-height:1.7}
.khn-sb__h b{color:var(--main);font-size:15px}

.khn-sb__rail{list-style:none;margin:0 0 .9em;padding:0;display:grid;gap:6px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr))}
.khn-sb__rail li{display:flex;min-width:0}
.khn-sb__i a{display:flex;align-items:center;gap:7px;padding:8px 10px;min-width:0;width:100%;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);
  text-decoration:none;color:var(--muted);font-size:12px;line-height:1.55;
  transition:border-color .15s,background .15s}
.khn-sb__i a:hover{border-color:var(--sub)}
.khn-sb__no{flex:none;align-self:center;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  background:var(--line);color:var(--panel);font-size:11px;font-weight:800}
.khn-sb__t{flex:1 1 auto;min-width:0;word-break:normal;overflow-wrap:break-word}
.khn-sb__i.is-done a{color:var(--ink);opacity:.72}
.khn-sb__i.is-done .khn-sb__no{background:var(--sub)}
.khn-sb__i.is-now a{background:var(--main);border-color:var(--main);color:#fff;font-weight:700}
.khn-sb__i.is-now .khn-sb__no{background:#fff;color:var(--main)}

.khn-sb__lead{margin:0;font-size:13px;line-height:1.9;color:var(--ink);opacity:.9}
.khn-sb__sh{margin:1.2em 0 .6em;font-size:12.5px;font-weight:700;color:var(--ink)}
.khn-sb__sib{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.khn-sb__sib a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--ink);font-size:12px;line-height:1.6}
.khn-sb__sib a:hover{border-color:var(--sub);background:#fff}
.khn-sb__sib i{font-style:normal;font-size:10.5px;color:var(--muted)}

.khn-sb__nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1em;
  padding-top:.9em;border-top:1px dashed var(--line)}
.khn-sb__nav a{font-size:12.5px;color:var(--sub);text-decoration:none;line-height:1.7}
.khn-sb__nav a:hover{text-decoration:underline}
.khn-sb__nx{margin-left:auto}

@media(max-width:600px){
  .khn-sb{padding:15px 14px 16px}
  .khn-sb__rail{grid-template-columns:repeat(auto-fit,minmax(min(100%,116px),1fr))}
  .khn-sb__nx{margin-left:0}
}