/* 2026-09-21: サイトの地がピンクのドット柄になったので、読み物の面は白で浮かせる。
   他のページのカードと同じ扱いにし、本文と地の対比も確保する（地の上に直に置くと
   見出しの桃色が 4.28 まで落ちて、読みづらい大きさになるため）。 */
.blog-shell {
  max-width: 860px;
  margin: 18px auto;
  padding: 26px 24px 34px;
  overflow-wrap: anywhere;
  background: #fffdf9;
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 7px 7px 0 var(--ink);
}
.blog-shell .blog-kicker { color: var(--brand-rose, #b42364); font-weight: 900; letter-spacing: .12em; font-size: .78rem; }
.blog-shell h1 { font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.55; margin: 16px 0; }
.blog-intro { max-width: 42em; line-height: 2; }
.blog-meta, .blog-breadcrumb { font-size: .85rem; line-height: 1.8; }
.blog-meta { color: #59534f; }
.blog-breadcrumb { margin-bottom: 25px; }
.blog-cards { display: grid; gap: 28px; margin: 30px 0; }
.blog-card { padding: 22px; background: #fffdf9; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--brand-lavender, #dbd5ff); }
.blog-card h2 { font-size: 1.35rem; line-height: 1.65; margin: 18px 0 10px; }
.blog-card img, .blog-cover img { width: 100%; height: auto; display: block; border-radius: 14px; }
.blog-card a, .blog-shell a { color: #8c1e50; text-underline-offset: 3px; }
.blog-cover { margin: 26px 0; }
.blog-cover figcaption, .blog-body figcaption { color: #59534f; font-size: .82rem; margin-top: 9px; line-height: 1.8; }
.blog-answer { padding: 24px; background: #ffe4ef; border: 2px solid var(--ink); border-radius: 18px; margin: 26px 0; }
.blog-answer h2 { font-size: 1.2rem; margin: 0 0 12px; }
.blog-answer p { margin-bottom: 0; line-height: 2; }
.blog-body, .blog-faq, .blog-sources { font-size: 1rem; line-height: 2.15; }
.blog-body h2, .blog-faq h2, .blog-sources h2 { font-size: 1.45rem; line-height: 1.7; margin: 44px 0 18px; border-bottom: 3px solid #ffb7d8; padding-bottom: 12px; }
.blog-body p { margin: 0 0 24px; }
.blog-body figure { margin: 30px 0; }
.blog-body img { width: 100%; height: auto; }
.blog-table { overflow-x: auto; }
.blog-body table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.blog-body th, .blog-body td { border: 1px solid #ada49d; padding: 12px; text-align: left; }
.blog-body th { background: #fff1b9; }
.blog-opinion { border-left: 5px solid #e894b8; padding: 4px 20px; background: #fff7fa; }
.blog-faq h3 { font-size: 1.08rem; margin: 26px 0 10px; line-height: 1.8; }
.blog-author { display: flex; gap: 20px; align-items: flex-start; padding: 24px; margin: 36px 0; border: 2px solid var(--ink); border-radius: 18px; background: #fff8de; }
.blog-author img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; flex: 0 0 88px; }
.blog-author h2 { margin: 0 0 8px; font-size: 1.15rem; }
.blog-author p { margin: 0 0 10px; line-height: 1.9; }
.blog-disclaimer { font-size: .85rem; line-height: 1.95; padding: 20px; background: #f4f1ec; border-radius: 12px; }
@media (max-width: 480px) {
  .blog-shell { padding-top: 18px; }
  .blog-card, .blog-answer, .blog-author { padding: 18px; }
  .blog-author { flex-direction: column; }
}