/* Blog 固有のスタイル（blog.miraigen.co.jp）
   会社サイトの css/site.css を複製したうえで、Blog だけで使う指定をここに置く。
   ⚠ site.css は会社サイトからの複製なので直さない（会社サイトを直したら取り直す）。 */

/* 記事タイルの並び。会社サイトの techNotes.html がページ内に持っている指定が元。
   🔴 区分の見出し（道具／PDLC／miraiGen.Cube／その他）は、
   **上を広く・下を狭く**する。上下が同じだと、見出しがどちらの区分のものか目で分からない
   （2026-10-22 の指摘。元は上 40px・下 16px で、実際の表示では差が出ていなかった）。 */
.mg-notes{display:grid;gap:16px;margin-top:40px}
.mg-notes .mg-tile h3{margin-bottom:8px}

.mg-notes-h{
  font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);
  /* 🔴 上の余白は padding で作る。margin だと前の要素と相殺されて効かないことがある
     （2026-10-22：margin:72px が画面で効かず、札と見出しが重なりかけた） */
  margin:0;
  padding:64px 0 9px;
  border-bottom:1px solid var(--line);
}
/* ← 自分の配下には近づける（上 64px に対して下 14px＝4倍以上の差をつける） */
.mg-notes-h + .mg-notes{margin-top:14px}
.mg-notes-h + .mg-note{margin-top:12px}     /* 記事が無い区分の文言 */

/* 直前が札のときは空けすぎない。ただし札とくっつかないだけの間は必ず取る */
.bl-cats + .mg-notes-h,
.bl-subcats + .mg-notes-h{padding-top:36px}
.mg-wrap > .mg-notes-h:first-child{padding-top:0}

/* カテゴリの札と日付 */
.bl-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.bl-cat{font-size:11px;letter-spacing:.1em;padding:3px 10px;border:1px solid var(--line-2);
  border-radius:3px;color:var(--accent);white-space:nowrap}
.bl-date{font-size:12px;color:var(--mute);letter-spacing:.06em}

/* カテゴリの絞り込み（いまは全件表示。記事が増えたらカテゴリ別の索引を作る） */
.bl-cats{display:flex;gap:10px 10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.bl-cats a{display:inline-block;font-size:13px;text-decoration:none;color:var(--fg-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 16px;transition:.2s var(--ease)}
.bl-cats a:hover{border-color:var(--accent-2);color:var(--accent)}
/* いま見ているカテゴリ（トップ＝日々思うこと） */
.bl-cats a.on{border-color:var(--accent);color:var(--accent);background:rgba(143,220,255,.08)}

/* 「この Blog の作り方」＝全ページのフッターに入れる表示 */
.bl-howto{border:1px solid var(--line);background:var(--bg-2);border-radius:6px;
  padding:18px 20px;margin:0 0 30px;font-size:13.5px;line-height:1.95;color:var(--fg-2);
  max-width:72ch}
.bl-howto b{color:var(--fg);font-weight:600;display:block;margin-bottom:4px}

/* 記事ページ：先頭の日付・カテゴリ、末尾の戻り導線 */
.bl-head-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.bl-back{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);font-size:14px}
.bl-back a{color:var(--accent);text-decoration:none}
.bl-back a:hover{border-bottom:1px solid var(--accent)}

/* 記事中の表（会社サイトの mg-tblwrap に合わせた最小限の指定） */
.mg-prose table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px}
.mg-prose th,.mg-prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;
  vertical-align:top}
.mg-prose th{background:var(--bg-3);color:var(--fg);font-weight:500;white-space:nowrap}
.mg-prose h2.mg-subh{margin-top:38px}

/* 記事に差し込む画面の記録 */
.bl-shot{margin:26px 0;max-width:72ch}
.bl-shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px}
.bl-shot figcaption{font-size:12.5px;color:var(--mute);margin-top:9px;line-height:1.7}

/* 区分（サブカテゴリ）の札。親のカテゴリより一段小さく、少し下げて従属を示す */
/* 🔴 上の余白は padding で作る（margin だと前の札と相殺されて効かないことがある） */
.bl-subcats{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:10px 0 0 2px;list-style:none}
.bl-subcats a{display:inline-block;font-size:12.5px;text-decoration:none;color:var(--mute);
  border:1px solid var(--line);border-radius:999px;padding:5px 15px;transition:.2s var(--ease)}
.bl-subcats a:hover{border-color:var(--accent-2);color:var(--accent)}
.bl-subcats a.on{border-color:var(--accent-2);color:var(--accent);background:rgba(143,220,255,.08)}