/* ==========================================================================
   記事の目次と関連記事
   ========================================================================== */
.jct-toc, .jct-relposts{
  --ink:#171A1F; --muted:#5C6672; --faint:#8A939E; --line:#E7E0D7; --line2:#F0EAE2;
  --brand:#C0392B; --sand:#FAF6F1;
  --serif:"Fraunces",Georgia,serif; --sans:"Figtree",system-ui,-apple-system,"Hiragino Sans",sans-serif;
  font-family:var(--sans); color:var(--ink);
}

/* --- 目次 --- */
.jct-toc{
  background:var(--sand); border:1px solid var(--line); border-radius:12px;
  padding:20px 24px 22px; margin:0 0 34px;
}
.jct-toc-h{
  margin:0 0 12px; font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.jct-toc ol{margin:0; padding:0; list-style:none; counter-reset:toc}
.jct-toc li{margin:0 0 7px; line-height:1.5}
.jct-toc li:last-child{margin-bottom:0}
.jct-toc li.lv3{padding-left:18px; font-size:14.5px}
.jct-toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; font-size:15.5px}
.jct-toc li.lv3 a{color:var(--muted); font-size:14.5px}
.jct-toc a:hover{border-bottom-color:var(--brand); color:var(--brand)}

/* 目次から飛んだ見出しがヘッダーに隠れないように */
.entry-content h2[id], .entry-content h3[id],
.wp-block-post-content h2[id], .wp-block-post-content h3[id]{scroll-margin-top:90px}

/* --- 関連記事 --- */
.jct-relposts{display:block; margin:44px 0 8px; padding-top:26px; border-top:1px solid var(--line)}
.jct-relposts h2{font-family:var(--serif); font-size:clamp(19px,2.4vw,24px); font-weight:600; margin:0 0 16px}
.jct-relposts ul{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:10px; overflow:hidden}
@media (min-width:700px){.jct-relposts ul{grid-template-columns:1fr 1fr}}
.jct-relposts li{background:#fff; margin:0}
.jct-relposts li a{
  display:block; padding:15px 18px 6px; color:var(--ink); text-decoration:none;
  font-size:15.5px; font-weight:600; line-height:1.45;
}
.jct-relposts li a:hover{color:var(--brand)}
.jct-relposts li span{display:block; padding:0 18px 15px; font-size:12px; color:var(--faint); font-weight:600}