/* ============================================================
   ブログ（blog/*.html）の見た目
   ・ヘッダーとフッターはサイトのまま、本文だけ明るい紙の色（body に bl-paper）
   ・表・動画・この記事でわかること・書いた人
   lowline.css の .ll-page の上に重ねる。色は main の中だけ上書きする
   ============================================================ */
/* ブログだけの部品（表・動画・書いた人） */
.ll-page .bl-meta { margin-top: 18px; font-size: 13px; color: var(--muted); }
.ll-page .bl-tablewrap { margin: 22px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ll-page .bl-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.ll-page .bl-table th, .ll-page .bl-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ll-page .bl-table thead th { color: var(--muted); font-weight: 500; font-size: 12.5px; border-bottom-color: var(--line-2, #3a3a3a); }
.ll-page .bl-table tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ll-page .bl-table td { color: var(--ink-soft); }
.ll-page .bl-table--wide { min-width: 640px; }
.ll-page .bl-table .acc { color: var(--acc); font-weight: 700; }
.ll-page .g-shot video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: #000; }
.ll-page .bl-h3 { margin: 40px 0 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.ll-page .g-p + .g-p, .ll-page .g-list + .g-p, .ll-page .ll-flow + .g-p { margin-top: 14px; }
.ll-page .bl-author { margin-top: 48px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); display: flex; gap: 20px; align-items: flex-start; }
.ll-page .bl-author__img { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.ll-page .bl-author__body { min-width: 0; }
.ll-page .bl-author__label { display: block; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.ll-page .bl-author b { display: block; margin-top: 2px; font-size: 17px; color: var(--ink); }
.ll-page .bl-author__role { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.ll-page .bl-author p { margin: 10px 0 0; font-size: 14px; line-height: 1.85; color: var(--ink-soft); }
.ll-page .bl-author__links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.ll-page .bl-author__links a { font-size: 13px; padding: 5px 12px; border: 1px solid var(--line-2, #3a3a3a); border-radius: 999px; color: var(--ink); text-decoration: none; }
.ll-page .bl-author__links a:hover { border-color: var(--acc); }
@media (max-width: 560px) {
  .ll-page .bl-author { flex-direction: column; align-items: center; text-align: center; }
  .ll-page .bl-author__links { justify-content: center; }
  .ll-page .bl-author p { text-align: left; }
}
.ll-page .bl-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== ブログ型（明るい紙の背景）：ヘッダーとフッターはサイトのまま、本文だけ明るく ===== */
.bl-paper main { background: #f6f4ef; }
.bl-paper main, .bl-paper .g-rail {
  --ink: #1d1c19; --ink-soft: #34322e; --muted: #6d6a63; --faint: #8a877f;
  --line: #e0dcd4; --line-2: #cfcac0; --card: #ffffff; --acc-tint: #fff1c2;
  --col: 680px; color: var(--ink);
}
.bl-paper .section { padding-top: 36px; padding-bottom: 8px; }
.bl-paper .ll-hero { padding-top: 48px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.bl-paper .ll-hero .wrap > * { text-align: left !important; margin-left: 0 !important; }
.bl-paper .ll-hero .h-sec { font-size: clamp(26px, 4.4vw, 34px); line-height: 1.45; color: var(--ink); }
.bl-paper .ll-sub { color: var(--ink-soft); font-size: 17px; margin-top: 10px; }
.bl-paper .g-sec .eyebrow { display: none; }
.bl-paper .g-sec .h-sec { text-align: left; font-size: 23px; line-height: 1.5; padding: 2px 0 2px 14px; border-left: 5px solid var(--acc); color: var(--ink); }
.bl-paper .g-p { font-size: 17px; line-height: 1.95; color: var(--ink-soft); }
/* 英語の記事は日本語ほど行間が要らない */
html[lang="en"] .bl-paper .g-p { line-height: 1.75; }
html[lang="en"] .bl-paper .g-list li, html[lang="en"] .bl-paper .ll-qa dd { line-height: 1.7; }
.bl-paper .g-list li, .bl-paper .ll-flow li { font-size: 16px; color: var(--ink-soft); }
.bl-paper .ll-flow li { background: #fff; }
.bl-paper .g-note { font-size: 14px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.bl-paper .bl-h3 { font-size: 19px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.bl-paper .ll-mail { color: #8a5a00; text-decoration: underline; }
.bl-paper .bl-table thead th { background: #efebe3; color: var(--ink-soft); }
.bl-paper .bl-table tbody th { color: var(--ink); }
.bl-paper .bl-table .acc { color: #8a5a00; }
.bl-paper .g-shot img, .bl-paper .g-shot video { border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.bl-paper .g-box { background: #fff; }
.bl-paper .g-box h3 { color: #8a5a00; }
.bl-paper .g-toc a { background: #fff; }
.bl-paper .btn--ghost { color: var(--ink); border-color: var(--line-2); }
.bl-paper .bl-summary { margin-top: 26px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--acc); border-radius: var(--r); padding: 16px 20px; }
.bl-paper .bl-summary b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.bl-paper .bl-summary ul { margin: 0; padding-left: 1.2em; color: var(--ink-soft); font-size: 15.5px; line-height: 1.9; }
.bl-paper .g-rail a { color: var(--muted); }
.bl-paper .g-toc span { color: #8a5a00; background: var(--acc-tint); }
.bl-paper .g-rail a span { color: #8a5a00; }