/* ブログ（/blog/ と /年/月/日/…/ の記事）。tools/make_blog.py が作るページの共通。クラスは .bl- */
/* 読み物なので、本文は幅 680px・行の高さ 2・段落のあいだを空ける。箱で囲まない、影・グラデーションなし */
.bl-w { max-width: 720px; } /* 左右の余白 20px を引いて、本文は 680px */

/* 頭：一覧へ → 公開日 → 題 */
.bl-head { padding-bottom: 8px; text-align: center; }
.bl-back { font-size: 13px; margin-bottom: 28px; }
.bl-back a { color: var(--teal); font-weight: 500; text-decoration: none; }
.bl-back a:hover { text-decoration: underline; }
.bl-date { font-family: var(--head); font-weight: 800; color: var(--teal); font-size: 14px; letter-spacing: .1em; margin-bottom: 10px; }
.bl-title { font-size: 26px; word-break: break-word; }

/* 本文 */
.bl-body { font-size: 16px; line-height: 2; letter-spacing: .05em; }
.bl-body p, .bl-body ul, .bl-body ol, .bl-body blockquote, .bl-body figure, .bl-body .bl-table { margin-top: 1.4em; }
.bl-body > :first-child { margin-top: 0; }
.bl-body strong { font-weight: 700; color: var(--ink); }
.bl-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.bl-body a:hover { text-decoration-thickness: 2px; }

/* 見出し：上は広く、下の本文とは詰める */
.bl-body h2, .bl-body h3, .bl-body h4 { font-family: var(--head); font-weight: 800; color: var(--ink); letter-spacing: .02em; line-height: 1.5; }
.bl-body h2 { font-size: 22px; margin-top: 64px; }
.bl-body h3 { font-size: 19px; margin-top: 44px; }
.bl-body h4 { font-size: 17px; margin-top: 36px; }
.bl-body h2 + *, .bl-body h3 + *, .bl-body h4 + * { margin-top: 12px; }
.bl-body h2 strong, .bl-body h3 strong { font-weight: 800; }

/* 元の記事で文字を大きくしていた段落 */
.bl-body .bl-big { font-size: 19px; line-height: 1.8; color: var(--ink); margin-top: 1.6em; }

/* リスト（site.css で消している印を戻す） */
.bl-body ul { list-style: disc; padding-left: 1.4em; }
.bl-body ol { list-style: decimal; padding-left: 1.6em; }
.bl-body li + li { margin-top: .3em; }
.bl-body li::marker { color: var(--teal); }

/* 引用：左に細い線1本だけ */
.bl-body blockquote { margin-left: 0; margin-right: 0; padding-left: 20px; border-left: 3px solid var(--teal); }
.bl-body blockquote > p:first-child { margin-top: 0; }

/* 区切り：線は引かず、余白だけ */
.bl-body hr { border: 0; height: 0; margin: 40px 0 0; }
.bl-body hr + * { margin-top: 24px; }

/* 画像：切らずにそのままの形で。角は丸めない */
.bl-body figure img { width: auto; max-width: 100%; max-height: 900px; margin: 0 auto; }
.bl-body figure a { display: block; }

/* 表：横にはみ出すときは表だけ横に動かす。線は行の下にだけ */
.bl-table { overflow-x: auto; }
.bl-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
.bl-table th, .bl-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid #d5d9db; }
.bl-table th { font-family: var(--head); font-weight: 800; color: var(--ink); }
.bl-table th:empty { padding: 0; border: 0; }
.bl-table tr > :first-child { white-space: nowrap; } /* 「月・火」などが1字ずつ折れないように */

/* 元のボタン */
.bl-btn .btn { color: #fff; text-decoration: none; }

/* 一覧：年ごとに、日付と題。箱で囲まない */
.bl-year { margin-top: 56px; }
.bl-year:first-child { margin-top: 0; }
.bl-list { margin-top: 12px; }
.bl-list li + li { margin-top: 4px; }
.bl-list a { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; align-items: baseline; padding: 10px 0; text-decoration: none; }
.bl-list time { font-size: 13px; color: var(--teal); font-weight: 500; white-space: nowrap; }
.bl-list b { font-family: var(--head); font-weight: 800; color: var(--ink); font-size: 17px; line-height: 1.6; letter-spacing: .02em; word-break: break-word; }
.bl-list a:hover b { color: var(--teal); }

/* 終わり：前の記事・次の記事 と 一覧へ */
.bl-end { padding-top: 48px; padding-bottom: 80px; }
.bl-pager { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.bl-pager a { text-decoration: none; font-family: var(--head); font-weight: 800; color: var(--ink); font-size: 16px; line-height: 1.5; max-width: 48%; word-break: break-word; }
.bl-pager small { display: block; font-size: 12px; color: var(--teal); letter-spacing: .1em; }
.bl-pager__next { text-align: right; margin-left: auto; }
.bl-pager a:hover { color: var(--teal); }

@media (min-width: 861px) {
  .bl-title { font-size: 32px; }
  .bl-body h2 { font-size: 26px; }
  .bl-body .bl-big { font-size: 21px; }
}
@media (max-width: 860px) {
  .bl-body { font-size: 15px; }
  .bl-body h2 { margin-top: 52px; }
  .bl-list a { grid-template-columns: 1fr; gap: 0; padding: 8px 0; }
  .bl-list b { font-size: 16px; }
  .bl-pager { flex-direction: column; }
  .bl-pager a { max-width: none; }
  .bl-pager__next { text-align: left; margin-left: 0; }
}