/* ---------- ブログ記事本文（.post） ---------- */
.post{
  max-width:34em;
  margin-inline:auto;
  font-size:16px;
  color:var(--c-ink);
}
.post > *:first-child{ margin-top:0; }

.post h2{
  font-family:var(--ff-serif);
  font-size:var(--fs-h3);
  color:var(--c-navy-ink);
  line-height:var(--lh-head);
  margin-top:2.4em;
  margin-bottom:.9em;
  padding-bottom:12px;
  position:relative;
}
.post h2::after{
  content:"";
  position:absolute; left:0; bottom:0; width:32px; height:3px;
  border-radius:var(--radius-pill); background:var(--c-teal);
}
.post h3{
  font-size:17px;
  color:var(--c-navy-ink);
  margin-top:2em;
  margin-bottom:.7em;
}
.post p{
  margin-top:0;
  margin-bottom:1.4em;
  line-height:var(--lh-body);
}
.post ul,
.post ol{
  margin-bottom:1.4em;
  padding-left:1.4em;
  display:flex;
  flex-direction:column;
  gap:.5em;
}
.post ul{ list-style:disc; }
.post ol{ list-style:decimal; }
.post li{ line-height:1.8; }
.post li::marker{ color:var(--c-teal-deep); }
.post strong{ color:var(--c-navy-ink); font-weight:700; }

.post blockquote{
  margin:1.6em 0;
  padding:18px 22px;
  background:var(--c-teal-soft);
  border-left:4px solid var(--c-teal);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--c-navy-deep);
}
.post blockquote p{ margin-bottom:.6em; }
.post blockquote p:last-child{ margin-bottom:0; }

.post figure{
  margin:2em 0;
}
.post figure img{
  border-radius:var(--radius-sm);
  border:1px solid var(--c-line);
  width:100%;
  height:auto;
}
.post figcaption{
  margin-top:10px;
  font-size:13px;
  color:var(--c-muted);
  text-align:center;
  line-height:1.6;
}

.post .table-wrap{ margin-block:1.8em; }
.post .table{ font-size:14px; }

.post a{
  color:var(--c-teal-deep);
  text-decoration:underline;
  text-decoration-color:var(--c-sky);
  text-underline-offset:2px;
}
.post a:hover{ color:var(--c-navy); }

/* ---------- 記事メタ（公開日・更新日） ---------- */
.post-meta{
  font-size:13px;
  color:var(--c-muted);
  margin-top:16px;
}
.post-meta span + span{ margin-left:14px; }

/* ---------- ブログ一覧カード ---------- */
.blog-cards{
  display:grid; gap:24px; grid-template-columns:1fr;
}
@media (min-width:640px){ .blog-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .blog-cards{ grid-template-columns:repeat(3,1fr); } }
.blog-card{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.blog-card-thumb{
  aspect-ratio:16/9; overflow:hidden; background:var(--c-bg-soft);
  display:flex; align-items:center; justify-content:center; padding:8px;
}
.blog-card-thumb img{ width:100%; height:100%; object-fit:contain; }
.blog-card-body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.blog-card-meta{ font-size:12px; color:var(--c-muted); display:flex; align-items:center; gap:10px; }
.blog-card-cat{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--c-teal-deep); background:var(--c-teal-soft); padding:3px 10px; border-radius:var(--radius-pill);
}
.blog-card-body h3{ font-size:16px; color:var(--c-navy-ink); line-height:1.5; }
.blog-card-body p{ font-size:14px; color:var(--c-muted); flex-grow:1; }

/* ---------- 関連記事 ---------- */
.related-posts{ margin-top:var(--sp-block); }