@charset "UTF-8";
/* ===========================================================
   会社設立代行まとめ委員会 — components.css
   「委員会の掲示板」の視覚言語。
   ※ 変更したら inc/assets.php の KSD_ASSET_VER を上げる（ルール9）

   構図の方針（他サイトと署名が被らないよう意図的に決めている）：
     - 英字の小見出し（Categories / Latest…）は**使わない**。議題番号を使う。
     - セクション見出しは**左寄せの見出し帯**。中央寄せ＋下線グラデは使わない。
     - 一覧は均一の箱を並べない。**連番つきの議事録リスト**と**非対称**を混ぜる。
     - 影はぼかさない。**ずらした黒ベタ**。枠は太い墨。
   =========================================================== */

/* --- 1. ボタン ------------------------------------------------------------ */
.ksd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--ksd-radius-s);
  font-weight:800;font-size:15px;line-height:1.4;text-decoration:none;
  border:var(--ksd-bw) solid var(--ksd-ink);cursor:pointer;max-width:100%;
  transition:transform .12s ease, box-shadow .12s ease;
}
.ksd-btn--cta{color:var(--ksd-ink);background:var(--ksd-yellow);box-shadow:var(--ksd-hard);}
.ksd-btn--cta:hover{color:var(--ksd-ink);transform:translate(2px,2px);box-shadow:var(--ksd-hard-s)}
.ksd-btn--ghost{color:var(--ksd-ink);background:#fff;box-shadow:var(--ksd-hard-s)}
.ksd-btn--ghost:hover{color:var(--ksd-ink);transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ksd-ink)}
.ksd-btn--sm{padding:9px 18px;font-size:13px;border-width:2px;box-shadow:3px 3px 0 var(--ksd-ink)}

/* --- 2. ラベル・バッジ ---------------------------------------------------- */
.ksd-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:6px;font-size:11.5px;font-weight:800;
  line-height:1.6;text-decoration:none;white-space:nowrap;max-width:100%;
  border:2px solid var(--ksd-ink);
}
.ksd-badge--cat{color:var(--ksd-ink);background:var(--ksd-yellow)}
.ksd-badge--cat:hover{color:var(--ksd-ink);background:var(--ksd-yellow-d)}
.ksd-badge--tag{color:var(--ksd-ink);background:#fff}
.ksd-badge--tag:hover{background:var(--ksd-blue-l)}
.ksd-badge--new{color:#fff;background:var(--ksd-red)}
.ksd-taglist{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}

/* 連番（議事録の番号） */
.ksd-num{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:8px;font-size:15px;font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--ksd-ink);background:var(--ksd-yellow);
  border:2px solid var(--ksd-ink);
}
.ksd-num--gold{background:var(--ksd-yellow)}
.ksd-num--silver{background:#fff}
.ksd-num--bronze{background:var(--ksd-red-l)}

/* --- 3. セクション見出し（議題ラベル方式） -------------------------------- */
.ksd-sec{margin:clamp(34px,5.5vw,64px) 0}
.ksd-sec__head{margin-bottom:clamp(16px,2.6vw,26px);text-align:left}
.ksd-sec__no{
  display:inline-block;margin-bottom:10px;padding:4px 13px;
  background:var(--ksd-ink);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;border-radius:5px;
}
.ksd-sec__ttl{
  display:block;margin:0;position:relative;
  font-size:clamp(21px,3.6vw,31px);font-weight:800;color:var(--ksd-ink);
  line-height:1.42;letter-spacing:.01em;
  padding:0 0 0 16px;border-left:9px solid var(--ksd-red);
}
.ksd-sec__lead{margin:12px 0 0;max-width:42em;color:var(--ksd-ink2);font-size:14.4px;line-height:1.9}
/* 旧クラスの受け皿（英字eyebrowは使わない） */
.ksd-sec__en{display:none}

/* --- 4. カード共通 -------------------------------------------------------- */
.ksd-card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--ksd-paper);border:var(--ksd-bw) solid var(--ksd-ink);
  border-radius:var(--ksd-radius-s);overflow:hidden;
  box-shadow:var(--ksd-hard-s);
  transition:transform .12s ease, box-shadow .12s ease;
}
.ksd-card:hover{transform:translate(-2px,-2px);box-shadow:var(--ksd-hard)}
.ksd-card__link{position:absolute;inset:0;z-index:2;text-indent:-9999px;overflow:hidden}
.ksd-card__thumb{position:relative;overflow:hidden;background:var(--ksd-bg2);flex:0 0 auto;
  border-bottom:var(--ksd-bw) solid var(--ksd-ink)}
.ksd-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ksd-card__body{padding:14px 16px 15px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.ksd-card__ttl{
  font-size:15.6px;font-weight:800;line-height:1.6;color:var(--ksd-ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ksd-card__ex{
  font-size:13px;line-height:1.85;color:var(--ksd-ink2);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ksd-card__meta{
  display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;
  font-size:11.4px;color:var(--ksd-ink3);margin-top:auto;padding-top:6px;
  border-top:2px dotted var(--ksd-line-mid);
}
.ksd-card__cat{position:absolute;left:9px;top:9px;z-index:3}

/* 変種1: 画像を上（比率は4/3。他サイトの16/10と変える） */
.ksd-card--imgtop .ksd-card__thumb{aspect-ratio:4/3}

/* 変種2: 注目（全幅・大きい1カラム）＝掲示板の一番上に貼る紙 */
.ksd-card--hero{
  grid-column:1/-1;box-shadow:var(--ksd-hard-h);
  background:var(--ksd-yellow-l);
}
.ksd-card--hero .ksd-card__thumb{aspect-ratio:16/5;max-height:340px}
.ksd-card--hero .ksd-card__ttl{font-size:clamp(18px,2.9vw,25px);-webkit-line-clamp:2;line-height:1.5}
.ksd-card--hero .ksd-card__ex{-webkit-line-clamp:2;font-size:13.8px}
.ksd-card--hero .ksd-card__body{padding:18px 20px 20px}
.ksd-card--hero::after{
  content:"注目の議題";position:absolute;right:-1px;top:-1px;z-index:3;
  padding:6px 16px;font-size:11.5px;font-weight:800;color:#fff;
  background:var(--ksd-red);border:var(--ksd-bw) solid var(--ksd-ink);
  border-radius:0 var(--ksd-radius-s) 0 12px;
}

/* 変種3・4: 画像左／画像右 */
.ksd-card--imgleft,.ksd-card--imgright{grid-column:1/-1;flex-direction:row;align-items:stretch}
.ksd-card--imgright{flex-direction:row-reverse}
.ksd-card--imgleft .ksd-card__thumb,
.ksd-card--imgright .ksd-card__thumb{
  width:min(36%,250px);aspect-ratio:auto;align-self:stretch;border-bottom:0;
}
.ksd-card--imgleft .ksd-card__thumb{border-right:var(--ksd-bw) solid var(--ksd-ink)}
.ksd-card--imgright .ksd-card__thumb{border-left:var(--ksd-bw) solid var(--ksd-ink)}
.ksd-card--imgleft .ksd-card__ttl,
.ksd-card--imgright .ksd-card__ttl{-webkit-line-clamp:2}
.ksd-card--imgright .ksd-card__cat{left:auto;right:9px}
@media(max-width:600px){
  .ksd-card--imgleft,.ksd-card--imgright{flex-direction:column}
  .ksd-card--imgleft .ksd-card__thumb,
  .ksd-card--imgright .ksd-card__thumb{
    width:100%;aspect-ratio:4/3;border-right:0;border-left:0;
    border-bottom:var(--ksd-bw) solid var(--ksd-ink);
  }
  .ksd-card--imgright .ksd-card__cat{right:auto;left:9px}
}

/* 変種5: 画像なし・色帯（ふせん） */
.ksd-card--band{background:var(--ksd-blue-l)}
.ksd-card--band::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:12px;
  background:var(--ksd-blue);border-right:var(--ksd-bw) solid var(--ksd-ink);
}
.ksd-card--band .ksd-card__body{padding-left:26px}
.ksd-card--band .ksd-card__ttl{-webkit-line-clamp:4}

/* 変種6: 議事録の一行（枠なし・横罫・連番） */
.ksd-card--flat{
  border:0;border-radius:0;background:transparent;box-shadow:none;
  border-bottom:3px solid var(--ksd-ink);
}
.ksd-card--flat:hover{transform:none;box-shadow:none;background:var(--ksd-yellow-l)}
.ksd-card--flat .ksd-card__body{padding:14px 6px 15px}
.ksd-card--flat .ksd-card__meta{border-top:0;padding-top:2px}

/* --- 5. 議事録リスト（均一グリッドの代わりに使う一覧） -------------------- */
.ksd-minutes{list-style:none;margin:0;padding:0;border-top:3px solid var(--ksd-ink)}
.ksd-minutes>li{
  position:relative;display:flex;gap:14px;align-items:flex-start;min-width:0;
  padding:14px 8px;border-bottom:2px solid var(--ksd-line-mid);
}
.ksd-minutes>li:nth-child(odd){background:rgba(255,255,255,.6)}
.ksd-minutes>li:hover{background:var(--ksd-yellow-l)}
.ksd-minutes__b{min-width:0;flex:1 1 auto}
.ksd-minutes__t{display:block;font-size:15px;font-weight:800;line-height:1.62;margin:0 0 5px}
.ksd-minutes__t a{color:var(--ksd-ink);text-decoration:none}
.ksd-minutes__t a:hover{text-decoration:underline}
.ksd-minutes__m{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:11.5px;color:var(--ksd-ink3)}

/* --- 6. カテゴリーカード -------------------------------------------------- */
.ksd-catcard{
  position:relative;display:flex;gap:12px;align-items:flex-start;min-width:0;
  padding:14px 15px;background:#fff;border:var(--ksd-bw) solid var(--ksd-ink);
  border-radius:var(--ksd-radius-s);text-decoration:none;box-shadow:var(--ksd-hard-s);
  transition:transform .12s ease, box-shadow .12s ease;
}
.ksd-catcard:hover{transform:translate(-2px,-2px);box-shadow:var(--ksd-hard)}
.ksd-catcard__ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:8px;
  display:grid;place-items:center;color:var(--ksd-ink);
  background:var(--ksd-yellow);border:2px solid var(--ksd-ink);
}
.ksd-catcard__ico svg{width:24px;height:24px}
.ksd-catcard__b{min-width:0}
.ksd-catcard__n{display:block;font-size:14.6px;font-weight:800;color:var(--ksd-ink);line-height:1.5}
.ksd-catcard__d{display:block;font-size:12.2px;color:var(--ksd-ink2);line-height:1.75;margin-top:5px}
.ksd-catcard__c{
  position:absolute;right:11px;top:11px;font-size:11px;font-weight:800;color:var(--ksd-ink3);
}
.ksd-catcard--stack{flex-direction:column;align-items:center;text-align:center}
.ksd-catcard--stack .ksd-catcard__ico{width:52px;height:52px;background:var(--ksd-blue-l)}
.ksd-catcard--solid{background:var(--ksd-ink)}
.ksd-catcard--solid .ksd-catcard__n{color:#fff}
.ksd-catcard--solid .ksd-catcard__d{color:#c8cbd2}
.ksd-catcard--solid .ksd-catcard__ico{background:var(--ksd-red);border-color:#fff;color:#fff}
.ksd-catcard--solid .ksd-catcard__c{color:#9aa0ab}
.ksd-catcard--edge{background:var(--ksd-green-l)}
.ksd-catcard--edge .ksd-catcard__ico{background:var(--ksd-green);color:#fff}

/* --- 7. 固定CTA（ルール8） ------------------------------------------------ */
.ksd-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--ksd-ink);border-top:4px solid var(--ksd-yellow);
  padding:9px 0 max(9px,env(safe-area-inset-bottom));
}
.ksd-cta__in{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center}
.ksd-cta__lb{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  font-size:clamp(12.5px,2.6vw,15px);font-weight:800;color:#fff;line-height:1.45;
}
.ksd-cta__lb::before{
  content:"！";display:grid;place-items:center;flex:0 0 auto;
  width:22px;height:22px;border-radius:50%;
  background:var(--ksd-red);color:#fff;font-size:13px;font-weight:800;
}
.ksd-cta__btn{padding:11px 26px;font-size:clamp(14px,2.8vw,16px);box-shadow:3px 3px 0 var(--ksd-yellow-d)}
.ksd-cta__btn:hover{box-shadow:1px 1px 0 var(--ksd-yellow-d)}
.ksd-cta__note{width:100%;text-align:center;margin:3px 0 0;font-size:10.5px;color:#9aa0ab;line-height:1.5}
@media(max-width:600px){
  .ksd-cta__in{gap:4px 10px}
  .ksd-cta__lb{width:100%;justify-content:center}
  .ksd-cta__btn{width:min(100%,340px)}
}
.ksd-ctabox{
  margin:2.4em 0;padding:clamp(18px,3vw,26px);border-radius:var(--ksd-radius-s);
  text-align:center;color:var(--ksd-ink);position:relative;
  background:var(--ksd-yellow-l);border:var(--ksd-bw) solid var(--ksd-ink);
  box-shadow:var(--ksd-hard);
}
.ksd-ctabox__t{font-size:clamp(16px,3vw,21px);font-weight:800;margin:0 0 8px;line-height:1.6}
.ksd-ctabox__p{font-size:13.8px;color:var(--ksd-ink2);margin:0 0 16px;line-height:1.9}
.ksd-ctabox__note{font-size:10.8px;color:var(--ksd-ink3);margin:10px 0 0}

/* --- 8. 目次 -------------------------------------------------------------- */
.ksd-toc{
  margin:2em 0;border:var(--ksd-bw) solid var(--ksd-ink);border-radius:var(--ksd-radius-s);
  background:#fff;overflow:hidden;box-shadow:var(--ksd-hard-s);
}
.ksd-toc__h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;margin:0;font-size:15px;font-weight:800;color:#fff;
  background:var(--ksd-ink);
}
.ksd-toc__h span{display:inline-flex;align-items:center;gap:8px}
.ksd-toc__tgl{
  border:2px solid #fff;background:transparent;border-radius:6px;
  padding:3px 11px;font-size:11.5px;font-weight:800;color:#fff;cursor:pointer;
}
.ksd-toc__tgl:hover{background:#fff;color:var(--ksd-ink)}
.ksd-toc__list{margin:0;padding:12px 15px 14px;list-style:none;counter-reset:ksdtoc}
.ksd-toc__list li{margin:0 0 8px}
.ksd-toc__list a{display:flex;gap:10px;align-items:baseline;text-decoration:none;
  font-size:14px;color:var(--ksd-ink);line-height:1.7}
.ksd-toc__list a:hover{text-decoration:underline}
.ksd-toc__list>li>a::before{
  counter-increment:ksdtoc;content:counter(ksdtoc);
  flex:0 0 auto;min-width:24px;height:24px;border-radius:6px;
  display:inline-grid;place-items:center;font-size:12px;font-weight:800;
  color:var(--ksd-ink);background:var(--ksd-yellow);border:2px solid var(--ksd-ink);
}
.ksd-toc__sub{list-style:none;margin:7px 0 9px;padding-left:34px}
.ksd-toc__sub a{font-size:13px;color:var(--ksd-ink2)}
.ksd-toc__sub a::before{content:"└";color:var(--ksd-line-mid);margin-right:3px}
.ksd-toc[data-open="0"] .ksd-toc__list{display:none}

/* --- 9. 出典（ルール4） --------------------------------------------------- */
.ksd-source{
  display:flex;gap:10px;align-items:flex-start;
  margin:1.1em 0 2.2em;padding:11px 14px;
  background:#fff;border:2px solid var(--ksd-ink);border-radius:var(--ksd-radius-s);
  font-size:12.6px;line-height:1.8;color:var(--ksd-ink2);
}
.ksd-source__lb{
  flex:0 0 auto;font-weight:800;font-size:11px;color:var(--ksd-ink);
  background:var(--ksd-green-l);border:2px solid var(--ksd-ink);
  border-radius:5px;padding:1px 8px;letter-spacing:.04em;
}
.ksd-source a{color:var(--ksd-blue-d);font-weight:800}

/* --- 10. 紹介サイト（ルール2） ------------------------------------------- */
.ksd-sites{margin:2.4em 0}
.ksd-sites__note{
  font-size:12.2px;color:var(--ksd-ink2);background:#fff;
  border:2px dashed var(--ksd-line-mid);border-radius:var(--ksd-radius-s);
  padding:10px 14px;margin:0 0 16px;line-height:1.8;
}
.ksd-sites__list{list-style:none;margin:0;padding:0;display:grid;gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));}
.ksd-site{
  position:relative;min-width:0;background:#fff;border:2px solid var(--ksd-ink);
  border-radius:var(--ksd-radius-s);padding:12px 14px 12px 48px;
}
.ksd-site__n{
  position:absolute;left:11px;top:11px;width:26px;height:26px;border-radius:6px;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  color:var(--ksd-ink);background:var(--ksd-yellow);border:2px solid var(--ksd-ink);
}
.ksd-site__t{display:block;font-size:14px;font-weight:800;line-height:1.55;margin-bottom:4px}
.ksd-site__t a{color:var(--ksd-ink);text-decoration:none}
.ksd-site__t a:hover{text-decoration:underline}
.ksd-site__d{margin:0;font-size:12.3px;color:var(--ksd-ink2);line-height:1.75}
.ksd-site__u{display:block;font-size:11px;color:var(--ksd-ink3);margin-top:5px}
.ksd-site--alt{background:var(--ksd-blue-l)}
.ksd-site--edge{background:var(--ksd-green-l)}
.ksd-site--plain{border-style:dashed}
.ksd-site--warm{background:var(--ksd-yellow-l)}
.ksd-site--warm .ksd-site__n{background:var(--ksd-red);color:#fff}

/* --- 11. サイドバーの箱 --------------------------------------------------- */
.ksd-widget{
  background:#fff;border:var(--ksd-bw) solid var(--ksd-ink);border-radius:var(--ksd-radius-s);
  box-shadow:var(--ksd-hard-s);margin-bottom:18px;overflow:hidden;
}
.ksd-widget__h{
  margin:0;padding:10px 14px;font-size:14px;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:8px;background:var(--ksd-ink);
}
.ksd-widget__b{padding:13px 14px 14px}
.ksd-ranklist{list-style:none;margin:0;padding:0}
.ksd-ranklist li{display:flex;gap:10px;padding:9px 0;border-bottom:2px dotted var(--ksd-line-mid);min-width:0}
.ksd-ranklist li:last-child{border-bottom:0;padding-bottom:0}
.ksd-ranklist a{font-size:13.2px;font-weight:700;color:var(--ksd-ink);text-decoration:none;line-height:1.65}
.ksd-ranklist a:hover{text-decoration:underline}

/* --- 12. 「役に立った」 --------------------------------------------------- */
.ksd-helpful{
  margin:2.4em 0;padding:18px;text-align:center;
  background:var(--ksd-green-l);border:var(--ksd-bw) solid var(--ksd-ink);
  border-radius:var(--ksd-radius-s);box-shadow:var(--ksd-hard-s);
}
.ksd-helpful__t{font-size:14.6px;font-weight:800;color:var(--ksd-ink);margin:0 0 12px}
.ksd-helpful__btn{
  display:inline-flex;align-items:center;gap:9px;padding:11px 24px;
  border-radius:var(--ksd-radius-s);border:var(--ksd-bw) solid var(--ksd-ink);
  background:#fff;color:var(--ksd-ink);font-weight:800;font-size:14.5px;cursor:pointer;
  box-shadow:var(--ksd-hard-s);
}
.ksd-helpful__btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ksd-ink)}
.ksd-helpful__n{font-variant-numeric:tabular-nums}

/* --- 13. 装飾パーツ ------------------------------------------------------- */
.ksd-marker{background:linear-gradient(transparent 58%,var(--ksd-yellow) 58%);font-weight:800;padding:0 2px}
.ksd-note{
  margin:1.6em 0;padding:14px 16px;border-radius:var(--ksd-radius-s);
  background:#fff;border:var(--ksd-bw) solid var(--ksd-ink);font-size:14px;line-height:1.9;
  box-shadow:var(--ksd-hard-s);
}
.ksd-note__h{display:flex;align-items:center;gap:7px;font-weight:800;margin:0 0 7px;font-size:14.5px}
.ksd-note{--acc:var(--ksd-yellow)}
.ksd-note__h::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--acc);border:2px solid var(--ksd-ink);flex:0 0 auto}
.ksd-caution{--acc:var(--ksd-red);background:var(--ksd-red-l)}
.ksd-info{--acc:var(--ksd-blue);background:var(--ksd-blue-l)}
.ksd-divider{
  height:0;margin:clamp(28px,4.6vw,50px) 0;border:0;border-top:3px dashed var(--ksd-line-mid);
}

/* --- 14. カテゴリーの見出し ---------------------------------------------- */
.ksd-archhead{
  background:var(--ksd-bg2);border-bottom:4px solid var(--ksd-ink);
  padding:clamp(20px,3.6vw,38px) 0;
}
.ksd-archhead__in{display:flex;gap:clamp(12px,2.2vw,20px);align-items:center;flex-wrap:wrap}
.ksd-archhead__ico{
  flex:0 0 auto;width:62px;height:62px;border-radius:12px;display:grid;place-items:center;
  background:#fff;border:var(--ksd-bw) solid var(--ksd-ink);box-shadow:var(--ksd-hard-s);
}
.ksd-archhead__ico svg{width:34px;height:34px}
.ksd-archhead__b{min-width:0;flex:1 1 260px}
.ksd-archhead__ttl{
  font-size:clamp(20px,3.8vw,31px);font-weight:800;color:var(--ksd-ink);margin:0 0 8px;line-height:1.42;
}
.ksd-archhead__d{margin:0;font-size:14.2px;color:var(--ksd-ink2);line-height:1.88}
.ksd-archhead__c{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12px;font-weight:800;color:var(--ksd-ink);
  background:#fff;border:2px solid var(--ksd-ink);border-radius:6px;padding:3px 12px;
}
.ksd-archhead__filter{display:inline-flex;align-items:center;gap:7px;margin-left:8px;
  font-size:clamp(14px,2.4vw,18px);font-weight:800;color:var(--ksd-red)}
.ksd-archhead__clear{
  display:inline-flex;align-items:center;gap:5px;margin:10px 0 0 8px;
  font-size:11.6px;font-weight:800;color:var(--ksd-ink);text-decoration:none;
  border:2px solid var(--ksd-ink);border-radius:6px;padding:3px 11px;background:#fff;
}
.ksd-archhead__clear:hover{background:var(--ksd-yellow)}

/* --- 15. 絞り込み --------------------------------------------------------- */
.ksd-filter{
  background:#fff;border:var(--ksd-bw) solid var(--ksd-ink);border-radius:var(--ksd-radius-s);
  padding:14px 16px;margin:20px 0;box-shadow:var(--ksd-hard-s);
}
.ksd-filter__h{font-size:13px;font-weight:800;color:var(--ksd-ink);margin:0 0 10px;
  display:flex;align-items:center;gap:7px}
.ksd-filter__h::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--ksd-red);border:2px solid var(--ksd-ink)}
.ksd-filter .ksd-taglist a.is-active{background:var(--ksd-ink);color:#fff}

/* --- 16. SNS枠 ------------------------------------------------------------ */
.ksd-sns{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
.ksd-sns__item{
  display:flex;align-items:center;gap:10px;min-width:0;padding:11px 13px;
  background:#fff;border:2px solid var(--ksd-ink);border-radius:var(--ksd-radius-s);
  text-decoration:none;box-shadow:var(--ksd-hard-s);
}
.ksd-sns__item:hover{transform:translate(-2px,-2px);box-shadow:var(--ksd-hard)}
.ksd-sns__ico{flex:0 0 auto;width:32px;height:32px;border-radius:7px;display:grid;place-items:center;color:#fff;border:2px solid var(--ksd-ink)}
.ksd-sns__ico svg{width:17px;height:17px;fill:currentColor}
.ksd-sns__t{font-size:12.8px;font-weight:800;color:var(--ksd-ink);line-height:1.5;min-width:0}
.ksd-sns__s{display:block;font-size:10.8px;color:var(--ksd-ink3);font-weight:700;margin-top:2px}

/* --- 17. トップの掲示板ヒーロー ------------------------------------------ */
.ksd-board{
  background:
    repeating-linear-gradient(45deg,rgba(35,37,43,.03) 0 10px,transparent 10px 20px),
    var(--ksd-bg2);
  border-bottom:4px solid var(--ksd-ink);
  padding:clamp(22px,4vw,44px) 0 clamp(26px,4.4vw,48px);
}
.ksd-board__tape{
  display:inline-block;margin-bottom:14px;padding:5px 16px;
  background:var(--ksd-red);color:#fff;font-size:12px;font-weight:800;
  border:var(--ksd-bw) solid var(--ksd-ink);border-radius:5px;box-shadow:var(--ksd-hard-s);
}
.ksd-board__ttl{
  font-size:clamp(25px,5.6vw,46px);font-weight:800;line-height:1.34;
  color:var(--ksd-ink);margin:0 0 16px;letter-spacing:.005em;
}
.ksd-board__lead{
  font-size:clamp(14px,2.4vw,15.6px);line-height:2;color:var(--ksd-ink2);
  margin:0 0 20px;max-width:36em;
}
.ksd-board__acts{display:flex;flex-wrap:wrap;gap:11px 12px;align-items:center}
.ksd-board__note{font-size:10.8px;color:var(--ksd-ink3);margin:11px 0 0}

/* 貼り紙（横並び・非対称） */
.ksd-notes{
  display:grid;gap:12px;margin-top:clamp(20px,3vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.ksd-note-card{
  position:relative;min-width:0;padding:16px 16px 15px;
  background:#fff;border:var(--ksd-bw) solid var(--ksd-ink);
  border-radius:var(--ksd-radius-s);box-shadow:var(--ksd-hard);
}
.ksd-note-card:nth-child(1){background:var(--ksd-yellow-l)}
.ksd-note-card:nth-child(2){background:var(--ksd-blue-l)}
.ksd-note-card:nth-child(3){background:var(--ksd-green-l)}
.ksd-note-card__n{
  position:absolute;right:12px;top:-14px;
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:var(--ksd-ink);color:#fff;font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ksd-note-card__t{margin:0 0 6px;font-size:15.5px;font-weight:800;color:var(--ksd-ink);line-height:1.55}
.ksd-note-card__d{margin:0;font-size:12.8px;color:var(--ksd-ink2);line-height:1.8}

/* --- 18. 委員会のキャラクター --------------------------------------------- */
.ksd-mascot{display:block;width:100%;height:auto;max-width:100%}

/* 掲示板ヒーロー：文章の隣に立たせる */
.ksd-board__in{
  display:grid;gap:clamp(16px,3vw,32px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.ksd-board__chars{
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2vw,18px);
  min-width:0;
}
.ksd-board__chars figure{
  /* min-width:0 が無いとキャプションの最小幅で押し広げられる（ルール9） */
  position:relative;min-width:0;flex:1 1 0;max-width:190px;text-align:center;
}
.ksd-board__chars img{
  width:100%;height:auto;
  filter:drop-shadow(4px 4px 0 rgba(35,37,43,.16));
}
.ksd-board__chars figcaption{
  margin-top:6px;display:inline-block;padding:3px 10px;
  background:#fff;border:2px solid var(--ksd-ink);border-radius:5px;
  font-size:11px;font-weight:800;color:var(--ksd-ink);line-height:1.4;
}
.ksd-board__chars figure:nth-child(2){max-width:130px}
/* 小さい画面では大きくなりすぎないように */
@media(max-width:600px){
  .ksd-board__chars figure{max-width:132px}
  .ksd-board__chars figure:nth-child(2){max-width:96px}
}

/* 説明ブロックの頭に置く小さいキャラ */
.ksd-note--char{padding-top:52px;position:relative}
.ksd-note--char .ksd-mascot{
  position:absolute;left:14px;top:-18px;width:62px;height:62px;
  background:#fff;border:var(--ksd-bw) solid var(--ksd-ink);border-radius:50%;
  padding:3px;
}
.ksd-note--char .ksd-note__h{margin-top:0}

/* サイドバーの案内に置くキャラ */
.ksd-widget__char{width:74px;height:74px;margin:0 auto 8px;display:block}

/* --- 19. カテゴリーのグループ見出し -------------------------------------- */
.ksd-catgroup{margin-bottom:clamp(22px,3.4vw,34px)}
.ksd-catgroup:last-of-type{margin-bottom:0}
.ksd-catgroup__h{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 14px;font-size:14.5px;font-weight:800;color:var(--ksd-ink2);
  padding-bottom:9px;border-bottom:3px dashed var(--ksd-line-mid);
}
.ksd-catgroup__n{
  display:inline-block;padding:4px 12px;border-radius:6px;
  background:var(--ksd-ink);color:#fff;font-size:12.5px;
}
.ksd-catgroup__c{
  margin-left:auto;font-size:12px;color:var(--ksd-ink3);
  border:2px solid var(--ksd-line-mid);border-radius:5px;padding:2px 9px;background:#fff;
}

/* --- 20. 「役に立った」ボタン ---------------------------------------------- */
.ksd-helpful{
  margin:2.4em 0 1.2em;padding:20px;text-align:center;
  background:var(--ksd-bg3);border:var(--ksd-bw) solid var(--ksd-ink);
  border-radius:var(--ksd-radius-s);box-shadow:var(--ksd-hard-s);
}
.ksd-helpful__q{margin:0 0 12px;font-weight:800;font-size:15px}
.ksd-helpful__btn{margin:0 auto}
.ksd-helpful__icon{font-size:18px;line-height:1}
.ksd-helpful__count{color:var(--ksd-ink3);font-weight:700}
.ksd-helpful[data-voted="1"] .ksd-helpful__btn{
  background:var(--ksd-green-l);border-color:var(--ksd-green-d);color:var(--ksd-green-d);
  cursor:default;box-shadow:none;transform:none;
}

/* --- 21. 統計セクション（トップページ） ------------------------------------ */
.ksd-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--ksd-gap);
}
.ksd-stat{
  background:#fff;border:var(--ksd-bw) solid var(--ksd-ink);border-radius:var(--ksd-radius-s);
  box-shadow:var(--ksd-hard-s);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;
}
.ksd-stat__num{margin:0;font-size:clamp(26px,4vw,34px);font-weight:800;color:var(--ksd-red-d);line-height:1.1}
.ksd-stat__label{margin:0;font-weight:800;font-size:14px;line-height:1.6}
.ksd-stat__note{margin:0;font-size:12.5px;color:var(--ksd-ink3);line-height:1.7;flex-grow:1}
.ksd-stat__src{
  margin-top:6px;font-size:11.5px;color:var(--ksd-ink3);text-decoration:none;
  border-top:2px dashed var(--ksd-line-mid);padding-top:8px;
}
.ksd-stat__src:hover{color:var(--ksd-blue-d);text-decoration:underline}