/* ==========================================================================
   記事ページ（/column/{記事}）だけの指定
   2026-08-07　器の出どころ 30_記事一覧と記事ページ_サンプル.md 第2部

     ・本文は 910px（トビラの本文カラムの実測値。49か所で最多）
     ・目次は PC＝右カラムに追従／スマホ＝本文の上
     ・H2で5〜7区切り。各H2の下は3〜6段落

   ★目次の追従（position:sticky）は、html,body の overflow-x が hidden だと
     効きません。mk-step4.css で clip に変えてあります。
   ========================================================================== */

/* --- 本文と目次の2段組（PC）------------------------------------------------ */
.mk .mk-artgrid{
  display:grid;
  grid-template-columns:minmax(0, 910px) 1fr;
  gap:60px;
  align-items:start;
}
.mk .mk-artgrid__side{position:sticky;top:200px;}
/* スマホ用の目次は、PCでは出さない */
.mk .mk-toc-sp{display:none;}

@media (max-width:1100px){
  .mk .mk-artgrid{grid-template-columns:1fr;gap:0;}
  .mk .mk-artgrid__side{display:none;}      /* 右カラムをやめる */
  .mk .mk-toc-sp{display:block;margin:30px 0 0;}
}


/* --- 目次 ------------------------------------------------------------------- */
.mk .mk-toc{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(37,58,79,.06);
  border-radius:12px;
  padding:30px;
}
.mk .mk-toc__title{
  margin:0 0 15px;
  font-size:clamp(10.4px,0.34vw + 9.1px,14px);
  font-weight:500;letter-spacing:1.28px;color:rgba(37,58,79,.5);
}
.mk .mk-toc ol{margin:0;padding:0;list-style:none;counter-reset:none;}
.mk .mk-toc li + li{margin-top:15px;}
.mk .mk-toc a{
  display:flex;gap:10px;align-items:baseline;
  font-size:clamp(10.4px,0.34vw + 9.1px,14px);
  font-weight:500;line-height:1.5;letter-spacing:1.28px;
  color:#253a4f;
}
.mk .mk-toc a span{
  font-family:"Hanken Grotesk",sans-serif;
  font-size:11px;font-weight:400;letter-spacing:.03em;
  color:rgba(37,58,79,.2);
  flex:0 0 auto;
}
.mk .mk-toc a:hover{color:#017cc8;}


/* --- 日付とタグ（見出しの上）------------------------------------------------ */
.mk .mk-post__meta{
  display:flex;align-items:center;gap:15px;
  margin:15px 0 8px;
}


/* --- 本文 -------------------------------------------------------------------
   H2 28px ／ 本文 16px 行間2.0 ／ ブロック間は前30・後60の2倍ルール */
.mk .p-column .mk-article,
.mk .mk-artgrid__main .mk-article{max-width:910px;margin-top:60px;}
.mk .mk-artgrid__main .mk-article__block{padding-top:0;border-top:0;}
.mk .mk-artgrid__main .mk-article__block + .mk-article__block{margin-top:60px;}
.mk .mk-artgrid__main .mk-article h2{
  margin:0 0 30px;
  font-size:clamp(18.7px,0.88vw + 15.3px,28px);
  font-weight:700;line-height:1.4;letter-spacing:.03em;
}
.mk .mk-artgrid__main .mk-article p{margin:0 0 17px;}
.mk .mk-artgrid__main .mk-article p:last-child{margin-bottom:0;}
.mk .mk-artgrid__main .mk-article b{font-weight:700;}

/* リード（結論を先に書く3〜4文） */
.mk .mk-artgrid__main > .mk-lead{max-width:910px;}

/* 書いた人 */
.mk .mk-author{margin-top:60px;max-width:910px;padding:30px;}