@charset "utf-8";
/* =========================================================
   mk-mix-article.css ── 記事の見出し周り：Workers Resort 型
   2026-08-27 / 検討用。★本番未反映
   ---------------------------------------------------------
   実測（sites/workersresort-desk-posture/design-qa.md）
     ・ヒーロー見出し 34px / lh1.75 / w400
     ・明パネル見出し 24px / lh1.0 / w500
     ・和文サブ      14px / lh1.8 / w400
     ・セクション間隔は一定でない：20 / 100 / 160 / 120 / 3 / 80 / 120px
       →「一律の padding で組んでいた」のを margin で個別に直した、と記録あり

   うちの実際の構造（実測 2026-08-27）
     body に .mk は無く、中の <div class="mk p-column"> に付く。
     h2 の実セレクタは
       .mk .mk-artgrid__main .mk-article h2 { margin:0 0 30px }   ← mk-article.css:74
     ブロック区切りは
       .mk-article__block + .mk-article__block { margin-top:60px } ← 同:73
   ========================================================= */

/* ---- 見出しの上に余白を入れる（いちばん重要） ----
   いまは margin:0 0 30px で「上ゼロ」。直前の本文にくっついている。 */
.mk .mk-artgrid__main .mk-article h2,
.mk .p-column .mk-article h2{
  margin-top:72px;
  margin-bottom:24px;
  font-weight:500;          /* WR は w400〜500。いまの 700 は重い */
  line-height:1.5;
  letter-spacing:.02em;
}
/* 記事の最初の見出しだけは上を詰める */
.mk .mk-artgrid__main .mk-article h2:first-child,
.mk .p-column .mk-article h2:first-child,
.mk .mk-article__block > h2:first-child{ margin-top:0; }

.mk .mk-artgrid__main .mk-article h3,
.mk .p-column .mk-article h3{
  margin-top:48px;
  margin-bottom:16px;
  font-weight:500;
  line-height:1.75;
}
.mk .mk-artgrid__main .mk-article h3:first-child,
.mk .p-column .mk-article h3:first-child{ margin-top:0; }

/* ---- 本文（WR は lh1.75。いまは 2.12 と広い。中間を取る） ---- */
.mk .mk-artgrid__main .mk-article p,
.mk .p-column .mk-article p{
  line-height:1.95;
  margin-bottom:20px;
}

/* ---- ブロック間隔をばらす（WR の実測をそのまま） ----
   いまは .mk-article__block 間が一律 60px。
   意味の切れ目は広く、続きものは詰める。 */
.mk .mk-artgrid__main .mk-article__block + .mk-article__block{
  margin-top:100px;
}
/* 使い分け用（原稿側でクラスを足せば効く） */
.mk .mk-article__block.-s20 { margin-top:20px  !important }
.mk .mk-article__block.-s80 { margin-top:80px  !important }
.mk .mk-article__block.-s120{ margin-top:120px !important }
.mk .mk-article__block.-s160{ margin-top:160px !important }

/* ---- 箇条書き・表・図版の前後（扉の実測より） ---- */
.mk .mk-artgrid__main .mk-article ul,
.mk .mk-artgrid__main .mk-article ol{ margin-top:20px; margin-bottom:20px }
.mk .mk-artgrid__main .mk-article table{ margin-top:30px; margin-bottom:45px }
.mk .mk-artgrid__main .mk-article figure{ margin-top:30px; margin-bottom:45px }

/* =========================================================
   ⑫ 記事の読みやすさ（2026-08-27 追記・ご指示）
   ---------------------------------------------------------
   実測でわかった問題
     ・本文の背後が body のグラデーション（白い面が無い）
     ・本文の色が rgba(37,58,79,.82) ＝ 82% で薄い
     ・箇条書きが 14px・項目間 0px で詰まっている
     ・段落間が 20px しかなく、段落の切れ目が見えない
   ========================================================= */

/* --- ① 本文の下に白い面を敷く --- */
.mk .mk-artgrid__main{
  background:#fff;
  border-radius:12px;
  padding:48px 56px;
}
@media (max-width:900px){
  .mk .mk-artgrid__main{ padding:28px 22px; border-radius:8px; }
}
/* 白い面を敷いたぶん、本文カラムの上限は中で決める */
.mk .mk-artgrid__main .mk-article{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

/* --- ② 本文の色を濃くする（82% → 不透明） --- */
.mk .mk-artgrid__main .mk-article p,
.mk .mk-artgrid__main .mk-article li{
  color:#253a4f;
}

/* --- ③ 段落の間を広げる --- */
.mk .mk-artgrid__main .mk-article p{
  font-size:16px;
  line-height:2.0;
  margin-bottom:28px;      /* 20px → 28px */
}
.mk .mk-artgrid__main .mk-article p:last-child{ margin-bottom:0; }

/* --- ④ 箇条書きを読みやすく --- */
.mk .mk-artgrid__main .mk-article ul,
.mk .mk-artgrid__main .mk-article ol{
  margin:24px 0 28px;
  padding-left:1.4em;
}
.mk .mk-artgrid__main .mk-article li{
  font-size:16px;          /* 14px → 16px。本文と揃える */
  line-height:1.9;
  margin-bottom:10px;      /* 0px → 10px。項目が分かれて見える */
}
.mk .mk-artgrid__main .mk-article li:last-child{ margin-bottom:0; }

/* --- ⑤ 見出しの間隔（ブロックの先頭かどうかで変える） --- */
.mk .mk-artgrid__main .mk-article h3{
  margin-top:44px;
  margin-bottom:14px;
  font-size:20px;
  font-weight:700;
  line-height:1.6;
}
.mk .mk-artgrid__main .mk-article h3:first-child{ margin-top:0; }

/* --- ⑥ 記事のブロック間 --- */
.mk .mk-artgrid__main .mk-article__block + .mk-article__block{
  margin-top:72px;
}

/* --- ⑦ 太字を目立たせる（いまは w700 だけ） --- */
.mk .mk-artgrid__main .mk-article b,
.mk .mk-artgrid__main .mk-article strong{
  font-weight:700;
  color:#0f1524;
}

/* --- ⑧ 白い面の上なので、目次や表の地は不透明に戻す --- */
.mk .mk-artgrid__main .mk-toc{
  background:#fff;
  border:1px solid #017cc8;
}
.mk .mk-artgrid__main .mk-cite{
  background:rgba(15,21,36,.035);
}

/* =========================================================
   ⑬ 新しい記事（copilot-free）のデザイン崩れを直す
   ---------------------------------------------------------
   ★原因（2026-08-27 実測）
     既存4本： .mk-artgrid__main > .mk-article > .mk-article__block
     新しい1本： .mk-artgrid__main > いきなり <p><h2><h3><ul>
     → .mk-article を前提にした指定が全部あたらず、素のHTMLのまま出ていた。
     さらに引用が <blockquote>（既存は .mk-cite）、図が無い。
   ★HTMLは直さず、.mk-article が無い場合にも同じ見た目になるよう
     .mk-artgrid__main の直下にも同じ指定を当てる。
   ========================================================= */

/* 本文 */
.mk .mk-artgrid__main > p{
  font-size:16px;
  line-height:2.0;
  color:#253a4f;
  margin:0 0 28px;
  max-width:720px;
}
.mk .mk-artgrid__main > p:last-child{ margin-bottom:0; }

/* リード文 */
.mk .mk-artgrid__main > p.mk-lead{
  font-size:17px;
  line-height:2.0;
  color:#0f1524;
  margin-bottom:32px;
  max-width:720px;
}

/* 大見出し */
.mk .mk-artgrid__main > h2{
  font-size:28px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.02em;
  color:#0f1524;
  margin:72px 0 24px;
  max-width:720px;
}
.mk .mk-artgrid__main > h2:first-child{ margin-top:0; }

/* 小見出し */
.mk .mk-artgrid__main > h3{
  font-size:20px;
  font-weight:700;
  line-height:1.6;
  color:#0f1524;
  margin:44px 0 14px;
  max-width:720px;
}

/* 箇条書き */
.mk .mk-artgrid__main > ul,
.mk .mk-artgrid__main > ol{
  margin:24px 0 28px;
  padding-left:1.4em;
  max-width:720px;
}
.mk .mk-artgrid__main > ul > li,
.mk .mk-artgrid__main > ol > li{
  font-size:16px;
  line-height:1.9;
  color:#253a4f;
  margin-bottom:10px;
}
.mk .mk-artgrid__main > ul > li:last-child,
.mk .mk-artgrid__main > ol > li:last-child{ margin-bottom:0; }

/* 引用（新しい記事は <blockquote>。既存の .mk-cite と同じ見た目にする） */
.mk .mk-artgrid__main blockquote{
  margin:24px 0 28px;
  padding:20px 24px;
  background:rgba(15,21,36,.035);
  border:0;
  border-radius:6px;
  max-width:720px;
}
.mk .mk-artgrid__main blockquote p{
  margin:0;
  font-size:15px;
  line-height:1.9;
  color:rgba(15,21,36,.78);
}
.mk .mk-artgrid__main blockquote p + p{ margin-top:12px; }

/* 表 */
.mk .mk-artgrid__main > .mk-tablewrap{
  margin:30px 0 45px;
  max-width:720px;
  overflow-x:auto;
}
.mk .mk-artgrid__main table{
  border-collapse:collapse;
  width:100%;
  font-size:14px;
}
.mk .mk-artgrid__main table th,
.mk .mk-artgrid__main table td{
  border:1px solid #dfe6e8;
  padding:12px 15px;
  letter-spacing:.7px;
  line-height:1.7;
  text-align:left;
  vertical-align:top;
}
.mk .mk-artgrid__main table th{
  background:#f0f4f5;
  font-weight:700;
  color:#222;
  white-space:nowrap;
}

/* 注記（.mk-note）── 新しい記事だけが使っている */
.mk .mk-artgrid__main .mk-note{
  margin:20px 0 28px;
  padding:16px 20px;
  background:rgba(1,124,200,.05);
  border-radius:6px;
  font-size:14px;
  line-height:1.8;
  color:rgba(15,21,36,.75);
  max-width:720px;
}
.mk .mk-artgrid__main .mk-note p{ margin:0; font-size:14px; }

/* 太字 */
.mk .mk-artgrid__main b,
.mk .mk-artgrid__main strong{ font-weight:700; color:#0f1524; }

/* リンクは青にする（本文と同じ色だと見分けがつかない） */
.mk .mk-artgrid__main a{
  color:#017cc8;
  text-decoration:underline;
  text-underline-offset:3px;
}
.mk .mk-artgrid__main a:hover{ color:#004fb2; }

/* =========================================================
   ⑭ B：目次に h3 をぶら下げる ／ C：章の区切りを見せる
   ---------------------------------------------------------
   articles.py 側の変更
     ・h3 に id="s{章}_{連番}" を振った（33個）
     ・目次に <ul class="mk-toc__sub"> を追加
     ・各章に <p class="mk-article__no">01</p> を追加
     ・中身の量で .-lg / .-sm を付けた（余白を変える）
   ========================================================= */

/* --- B: 目次の h3 --- */
.mk .mk-toc__sub{
  list-style:none;
  margin:6px 0 10px;
  padding:0 0 0 14px;
  border-left:1px solid rgba(15,21,36,.10);
}
.mk .mk-toc__sub li{ margin:0; }
.mk .mk-toc__sub a{
  display:block;
  font-size:13.5px;
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(15,21,36,.62);
  text-decoration:none;
  padding:5px 0;
  border-bottom:0;
}
.mk .mk-toc__sub a:hover{ color:#017cc8; }
/* 親（h2）はそのまま太めに */
.mk .mk-toc > ol > li > a{ font-weight:500; }

/* いま読んでいる位置を示す（スクロール連動なしでも hover で分かる） */
.mk .mk-toc a:target,
.mk .mk-toc__sub a:target{ color:#017cc8; }

/* --- C: 章番号 ---
   ★.mk-artgrid__main > p の指定（16px/2.0）が先に当たるので、
     より詳細度の高いセレクタで上書きする。 */
.mk .mk-artgrid__main .mk-article .mk-article__no,
.mk .mk-artgrid__main .mk-article__no,
.mk .mk-article__no{
  font-family:"Hanken Grotesk", sans-serif;
  font-size:13px;
  font-weight:400;
  letter-spacing:.14em;
  color:rgba(15,21,36,.32);
  margin:0 0 8px;
  line-height:1;
  max-width:none;
}
/* 「この記事で分かること」「出典」など番号が不要な章は消す
   （中身が短い＝-sm の章のうち、先頭と末尾） */
.mk .mk-article__block:first-child .mk-article__no{ display:none; }

/* --- C: 章の重みで余白を変える（Workers Resort の型） --- */
.mk .mk-artgrid__main .mk-article__block + .mk-article__block{ margin-top:72px; }
.mk .mk-artgrid__main .mk-article__block.-lg + .mk-article__block,
.mk .mk-artgrid__main .mk-article__block + .mk-article__block.-lg{ margin-top:120px; }
.mk .mk-artgrid__main .mk-article__block.-sm + .mk-article__block.-sm{ margin-top:56px; }

/* 章の頭に細い区切り線を入れて、切れ目をはっきりさせる */
.mk .mk-artgrid__main .mk-article__block + .mk-article__block{
  border-top:1px solid rgba(15,21,36,.08);
  padding-top:44px;
}
.mk .mk-artgrid__main .mk-article__block.-lg + .mk-article__block,
.mk .mk-artgrid__main .mk-article__block + .mk-article__block.-lg{ padding-top:56px; }

/* 見出し直下の余白（番号が入ったぶん詰める） */
.mk .mk-artgrid__main .mk-article h2{ margin-top:0; }

/* --- D: 太字を落ち着かせる（原稿を変えずにできる範囲） --- */
.mk .mk-artgrid__main .mk-article b,
.mk .mk-artgrid__main .mk-article strong{
  font-weight:700;
  color:#0f1524;
  /* 下線などは付けない。色と太さだけで示す */
}

/* =========================================================
   ⑮ 記事の「強弱」を作る（2026-08-27 実測にもとづく）
   ---------------------------------------------------------
   ★測って分かったこと（1000字あたり）
     囲み・罫線・箇条書きの「数」は、うちのほうが多いくらいだった。
     足りないのは数ではなく、次の3つ。

     ① 差し色がない
        SmartHR 黒197回＋青36回 ／ LISKUL 黒277回＋橙71回
        うち    #253a4f 153回＋同系色の濃さ違いばかり
        → 同じ色の濃淡だけなので、いくら増えても差が出ない

     ② 太さの差が小さい
        SmartHR w400 60% / w700 39%（差300）
        うち    w400 44% / w500 49%（差100）＝ ほぼ同じ太さが半々
        しかも <b> が w500 で、本文とほとんど変わらなかった
        <li> は w300 で、本文より細かった

     ③ マーカーがない
   ========================================================= */

/* --- ① 太字を、本当に太くする（w500 → w700） --- */
.mk .mk-artgrid__main b,
.mk .mk-artgrid__main strong,
.mk .mk-artgrid__main .mk-article b,
.mk .mk-artgrid__main .mk-article strong{
  font-weight:700 !important;
  color:#0f1524 !important;
}

/* --- 本文と箇条書きの太さを w400 に統一（w300 混在をやめる） --- */
.mk .mk-artgrid__main .mk-article p,
.mk .mk-artgrid__main .mk-article li,
.mk .mk-artgrid__main > p,
.mk .mk-artgrid__main > ul > li,
.mk .mk-artgrid__main > ol > li{
  font-weight:400 !important;
  color:#253a4f;
}

/* --- ② 見出しの太さに差をつける --- */
.mk .mk-artgrid__main .mk-article h2,
.mk .mk-artgrid__main > h2{
  font-weight:700 !important;      /* 500 → 700。章の頭をはっきり */
  color:#0f1524 !important;
  font-size:26px;
  letter-spacing:.01em;
}
.mk .mk-artgrid__main .mk-article h3,
.mk .mk-artgrid__main > h3{
  font-weight:700 !important;
  color:#0f1524 !important;
  font-size:19px;
}
/* ★左に棒を出すデザインは廃止（ご指示・2回目）。
   h3 は「青い文字」で h2 と差をつける。棒は使わない。 */
/* h3 は色ではなく「大きさと余白」で h2 と差をつける。
   青は使わない（青いだけの見出しが多すぎる、というご指摘）。 */
.mk .mk-artgrid__main .mk-article h3,
.mk .mk-artgrid__main > h3{
  padding-left:0;
  border-left:0;
  line-height:1.5;
  color:#0f1524 !important;
  font-size:18px;
}

/* --- ③ 差し色を入れる ---
   本文中の <b> のうち、文頭にあるもの（「具体例：」など）は青にする。
   ただし全部を青にすると効かないので、
   ・段落の先頭にある <b> ＝ 小見出し的な役割 → 青
   ・文中の <b> ＝ 強調 → 黒のまま太字
*/
/* ★<b> は青にしない（ご指摘）。
   段落の先頭にある太字も「強調」であって見出しではないので、
   黒の太字のままにする。青は h3 だけの意味に絞る。 */

/* --- ④ マーカー（結論の1〜2箇所に使う） ---
   原稿側で <mark> を書けば効く。いまは未使用。 */
.mk .mk-artgrid__main mark{
  background:linear-gradient(transparent 62%, rgba(1,124,200,.22) 62%);
  color:inherit;
  font-weight:700;
  padding:0 2px;
}

/* --- ⑤ 章番号を青にして、区切りをはっきりさせる --- */
/* 章番号だけ青。これが記事の中で唯一の差し色になる（12箇所） */
.mk .mk-artgrid__main .mk-article .mk-article__no,
.mk .mk-artgrid__main .mk-article__no{
  color:#017cc8 !important;
  font-weight:500;
  font-size:12px;
  letter-spacing:.18em;
}

/* --- ⑥ 表の見出し行に色を入れる（いまは薄いグレー） --- */
.mk .mk-artgrid__main .mk-datatable th{
  background:rgba(1,124,200,.08) !important;
  color:#0f1524 !important;
  font-weight:700 !important;
}

/* --- ⑦ 引用の左に青の細い線（囲みだけだと弱い） --- */
/* ★左の棒はやめて、面と文字色だけで示す */
.mk .mk-artgrid__main .mk-cite,
.mk .mk-artgrid__main blockquote{
  background:rgba(1,124,200,.055) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  border:0 !important;
  padding:22px 26px !important;
}
.mk .mk-artgrid__main blockquote p,
.mk .mk-artgrid__main .mk-cite p{
  color:rgba(15,21,36,.80) !important;
}

/* --- ⑧ 注記（mk-note）も差し色つきに --- */
.mk .mk-artgrid__main .mk-note{
  background:rgba(1,124,200,.05);
  box-shadow:none;
  border-radius:6px;
}

/* =========================================================
   ⑯ 見出しの階層 ── A案（h2 の下に 2px の罫線）
   ---------------------------------------------------------
   ★実測で分かったこと
     h2 と h3 のサイズ差は うち 8px で、参考2社（2〜4px）より大きい。
     それでも見分けられなかったのは、両方とも「黒い太字」で
     形が同じだったため。
       SmartHR  h2 に下線2px ／ h3 は字下げ
       LISKUL   h2 に地色＋棒 ／ h3 に下線2px
     → サイズではなく「形」で差をつける。棒は使わない（ご指示）。
   ========================================================= */
.mk .mk-artgrid__main .mk-article h2,
.mk .mk-artgrid__main > h2{
  padding-bottom:16px !important;
  border-bottom:2px solid #0f1524 !important;
  margin-bottom:28px !important;
}
/* h3 は罫線を持たない。太字とサイズだけで示す */
.mk .mk-artgrid__main .mk-article h3,
.mk .mk-artgrid__main > h3{
  font-size:19px !important;
  border-bottom:0 !important;
  padding-bottom:0 !important;
}

/* =========================================================
   ⑰ h3 と 太字（<b>）の見分けがつかない
   ---------------------------------------------------------
   ★実測
     h3          19px w700 #0f1524
     段落先頭の b 16px w700 #0f1524   ← 3px差・同じ太さ・同じ色
     しかも中身は「同じものが2つの名前で呼ばれている状態です。」
     のような“文”であって、見出しではない。

   → 役割が違うので、見た目を分ける。
     h3 ＝ 節の見出し（大きく・字間を空ける）
     b  ＝ 文中の強調（本文と同じ大きさのまま、色で示す）
   ========================================================= */

/* h3：見出しらしく。サイズを上げ、字間を空け、上の余白を広げる */
.mk .mk-artgrid__main .mk-article h3,
.mk .mk-artgrid__main > h3{
  font-size:21px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  line-height:1.55 !important;
  color:#0f1524 !important;
  margin-top:52px !important;
  margin-bottom:16px !important;
}

/* 太字：見出しに見えないよう、本文と同じ 16px のまま。
   太さは w700 を保ちつつ、色を本文寄りにして「文の一部」に見せる。 */
.mk .mk-artgrid__main .mk-article b,
.mk .mk-artgrid__main .mk-article strong,
.mk .mk-artgrid__main > p b,
.mk .mk-artgrid__main > p strong,
.mk .mk-artgrid__main li b,
.mk .mk-artgrid__main li strong{
  font-size:inherit !important;
  font-weight:700 !important;
  color:#253a4f !important;   /* 見出しの #0f1524 より薄い＝本文と同じ色 */
  letter-spacing:inherit !important;
}

/* =========================================================
   ⑱ D案：太字をやめてマーカーにする（決定）
   ---------------------------------------------------------
   ★実測で分かったこと
     参考2社も h3 と太字は「同じ色・サイズ差4〜7px」だった。
     うち（5px差）と大差ない。違うのは h3 の“形”。
       SmartHR  h3 に左14pxの字下げ
       LISKUL   h3 に下線2px
     ただし うちは h2 に下線を使っており、棒は却下ずみ。
   → h3 を変えるのではなく、太字（37箇所）のほうをやめる。
     マーカーなら見出しに見えないので、h3 と競合しない。
   ========================================================= */
.mk .mk-artgrid__main .mk-article b,
.mk .mk-artgrid__main .mk-article strong,
.mk .mk-artgrid__main > p b,
.mk .mk-artgrid__main > p strong,
.mk .mk-artgrid__main li b,
.mk .mk-artgrid__main li strong{
  font-weight:400 !important;          /* 太字をやめる */
  color:#253a4f !important;
  background:linear-gradient(transparent 58%, rgba(1,124,200,.26) 58%) !important;
  padding:0 1px !important;
}
/* h3 は太字のまま。マーカーと形が違うので見分けられる */
.mk .mk-artgrid__main .mk-article h3,
.mk .mk-artgrid__main > h3{
  font-size:21px !important;
  font-weight:700 !important;
  color:#0f1524 !important;
  background:none !important;
}

/* =========================================================
   ⑲ 目次が細くて読めない（ご指摘）
   ---------------------------------------------------------
   ★実測（1440px時）
     グリッド    910px : 274px（gap 56px）
     目次のリンク 16px の文字が 186px 幅 → 2〜3行に折り返す
     目次の高さ  3,225px（45リンク）→ 画面より遥かに長く、
                sticky が意味をなしていない
   → ① 列幅を 274 → 320px に広げる（本文は 910 → 864px）
     ② 文字を 16 → 15px に落として1行に収める
     ③ 画面内に収まるよう高さを制限して、中でスクロールさせる
   ========================================================= */

/* --- ① 列の割り当てを変える --- */
.mk .mk-artgrid{
  grid-template-columns:minmax(0,1fr) 320px !important;
  gap:48px !important;
  align-items:start;
}
@media (max-width:1100px){
  .mk .mk-artgrid{ grid-template-columns:1fr !important; gap:0 !important; }
}

/* --- ② 目次の中身を1行に収める --- */
.mk .mk-artgrid__side .mk-toc{
  padding:24px 22px !important;
}
.mk .mk-artgrid__side .mk-toc__title{
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  color:#0f1524 !important;
  margin-bottom:14px !important;
  padding-bottom:12px;
  border-bottom:1px solid rgba(15,21,36,.10);
}
/* 親（章）のリンク */
.mk .mk-artgrid__side .mk-toc > ol > li > a{
  font-size:14px !important;
  line-height:1.6 !important;
  letter-spacing:.01em !important;
  padding:7px 0 !important;
  border-bottom:0 !important;
  font-weight:500;
}
/* 子（節）のリンク */
.mk .mk-artgrid__side .mk-toc__sub a{
  font-size:12.5px !important;
  line-height:1.55 !important;
  padding:4px 0 !important;
}
.mk .mk-artgrid__side .mk-toc__sub{
  margin:2px 0 8px !important;
  padding-left:12px !important;
}

/* --- ③ 画面内に収めて、中だけスクロール --- */
.mk .mk-artgrid__side{
  position:sticky;
  top:96px;
  align-self:start;
}
.mk .mk-artgrid__side .mk-toc{
  max-height:calc(100vh - 140px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* スクロールバーを細く目立たなくする */
.mk .mk-artgrid__side .mk-toc::-webkit-scrollbar{ width:6px }
.mk .mk-artgrid__side .mk-toc::-webkit-scrollbar-thumb{
  background:rgba(15,21,36,.18); border-radius:3px }
.mk .mk-artgrid__side .mk-toc::-webkit-scrollbar-track{ background:transparent }

/* 本文側の内側余白も少し詰めて、本文幅を確保する */
@media (min-width:1101px){
  .mk .mk-artgrid__main{ padding:44px 48px !important; }
}