/* ===========================
   Blog Single
=========================== */

.blog-single.wrapper{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

/* Header */
.bs-header{ max-width: 840px; margin: 22px auto 18px; }
.bs-title{
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.25;
  margin: 0 0 8px;
}
.bs-meta{
  color:#666; font-size:.95rem;
  display:flex; gap:10px; flex-wrap:wrap;
}
.bs-cats{ display:flex; gap:8px; }
.bs-cat{
  display:inline-block; padding:2px 10px; border-radius:999px;
  background:#f5e9e6; color:#5a2a22; text-decoration:none; font-size:.9rem;
}
.bs-cat:hover{ text-decoration:underline; }
.bs-thumb{ margin: 14px 0 0; }
.bs-thumb img{
  width:100%; height:auto; display:block;
  aspect-ratio: 16/9; object-fit: cover;
  border-radius:18px; box-shadow:0 10px 28px rgba(0,0,0,.12);
}

/* TOC */
.bs-toc{ max-width: 840px; margin: 12px auto 18px; }
.bs-toc details{ border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:10px 12px; background:#faf7f6; }
.bs-toc__hd{ cursor:pointer; font-weight:700; }
.bs-toc__list{ margin:8px 0 0; padding-left:1.2em; }
.bs-toc__list .lv2{ margin-left:0; }
.bs-toc__list .lv3{ margin-left:1em; font-size:.95em; }

/* Content */
.bs-content{ max-width: 840px; margin: 0 auto; }
.bs-content p{ margin: 1.1em 0; }
.bs-content img{
  max-width:100%; height:auto; border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.bs-content h2{
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 1.6em 0 .6em;
  padding-bottom: .25em;
  border-bottom: 2px solid rgba(0,0,0,.08);
}
.bs-content h3{
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 1.2em 0 .4em;
}
.bs-content blockquote{
  margin: 1.2em 0; padding: 12px 16px;
  background:#f4f7ff; border-left:4px solid #9bb7ff;
  border-radius:8px;
}
.bs-content pre, .bs-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.bs-content pre{
  background:#0f172a; color:#e2e8f0; padding:14px; border-radius:10px; overflow:auto;
}
.bs-content table{
  width:100%; border-collapse: collapse; margin:1.2em 0;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.bs-content th, .bs-content td{
  border:1px solid rgba(0,0,0,.08); padding:8px 10px; text-align:left;
}
.bs-content thead th{ background:#f7f7fa; }

/* Share */
.bs-share{
  max-width:840px; margin: 18px auto 6px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.bs-share a{
  display:inline-block; padding:8px 14px; border-radius:999px; text-decoration:none; font-weight:700;
  background:#1d9bf0; color:#fff;
}
.bs-share .share-line{ background:#06C755; }

/* Related */
.bs-related{ max-width:1200px; margin: 28px auto 0; padding: 0 0 4px; }
.bs-related h2{ text-align:center; margin:0 0 12px; }
.bs-relgrid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 960px){ .bs-relgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .bs-relgrid{ grid-template-columns: 1fr; } }
.relcard{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.relcard:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.relcard img, .relcard__ph{
  display:block; width:100%; height:auto; aspect-ratio: 16/9; object-fit: cover; background:#eee;
}
.relcard__ttl{ font-size:1rem; margin:8px 10px 4px; }
.relcard__date{ color:#666; font-size:.9rem; margin: 0 10px 10px; }

/* Prev/Next */
.bs-prevnext{
  max-width: 840px; margin: 20px auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.pn-left a, .pn-right a{ text-decoration:none; color: var(--c-ink, #1b2430); }
.pn-left a:hover, .pn-right a:hover{ text-decoration: underline; }

/* === 電子書籍スタイル：本文中の図版 =================== */
/* 共通のfigure（画像＋キャプション） */
.ebook-figure {
  max-width: 840px;            /* 本文幅と揃える */
  margin: 1.2em auto;          /* 章の合間の余白 */
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* 画像 */
.ebook-figure > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;        /* 基本は16:9 */
  object-fit: cover;
}

/* 4:3を使うときは .ratio-43 を追加 */
.ebook-figure.ratio-43 > img {
  aspect-ratio: 4 / 3;
}

/* キャプション */
.ebook-figure > figcaption {
  font-size: .95rem;
  color: #444;
  padding: 10px 12px;
  background: #faf7f6;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* モバイル微調整 */
@media (max-width: 640px){
  .ebook-figure { border-radius: 12px; }
  .ebook-figure > figcaption { font-size: .92rem; padding: 10px; }
}