/* =========================================================================
   ブログ用スタイル（読み物特化・1カラム・モバイルファースト）
   読み込み：parts/header.php で $_header['blog_css'] がある時のみ（blog配下）。
   var(--primary-color) は style.css の :root で定義。
   ========================================================================= */

/* ヒーロー（ブログの顔＝ブログ名） */
.blog-hero{ text-align:center; padding:1.6rem 1.2rem 1.9rem; margin-bottom:2.4rem; border-bottom:1px solid #e8e0d5; }
.blog-hero a{ text-decoration:none; color:inherit; display:inline-block; }
.blog-hero-name{ font-size:1.7rem; font-weight:700; letter-spacing:.06em; color:var(--primary-color); margin:0; line-height:1.5; }
.blog-hero-tag{ font-size:.78rem; color:#7d7466; margin:.65rem 0 0; letter-spacing:.08em; }
@media (max-width:600px){ .blog-hero{ padding:1.2rem .5rem 1.3rem; margin-bottom:1.8rem; } .blog-hero-name{ font-size:1.3rem; } .blog-hero-tag{ font-size:.72rem; letter-spacing:.02em; } }

/* コンテナ（読みやすい幅・中央寄せ・左右余白） */
.blog-article{ max-width:720px; margin:0 auto; padding:0 1.2rem 1rem; }
.blog-list-wrap{ max-width:980px; margin:0 auto; padding:0 1.2rem 1rem; }
/* 読み物本文はゴシック体で視認性UP（見出し・ブランド名は明朝を維持） */
.blog-article,.blog-list-wrap{ font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif; }
/* スマホは左右余白を詰めてコンテンツ幅を広げる */
@media (max-width:600px){ .blog-article,.blog-list-wrap{ padding-left:.3rem; padding-right:.3rem; } }

/* 記事ヘッダー（タイトル＋メタを密着させ、本文へ繋げる。左寄せ＝アメブロ準拠） */
.blog-article-head{ text-align:left; margin:0 0 2rem; padding-bottom:1.3rem; border-bottom:1px solid #ece7e0; }
.blog-article-title{ font-family:"Noto Serif JP","Hiragino Mincho ProN",serif; font-size:1.85rem; font-weight:700; line-height:1.5; margin:0 0 .7rem; color:var(--primary-color); }
@media (max-width:600px){ .blog-article-title{ font-size:1.45rem; } }
.blog-article-meta{ display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:.7rem; font-size:.8rem; color:#8a8175; letter-spacing:.04em; margin:0; }
.blog-article-cat{ display:inline-block; border:1px solid #d8d0c6; border-radius:999px; padding:.1rem .7rem; color:var(--primary-color); }

/* 本文（先生の色/サイズ/縦の間を保持。基本16px・行間1.7・既定は左寄せ） */
.blog-body{ color:#2b2b2b; font-size:16px; line-height:1.8; text-align:left; }
.blog-body p{ margin:0; }
.blog-body img{ border-radius:6px; max-width:100%; height:auto; }
.blog-body a:not(.blog-relcard){ color:var(--primary-color); text-decoration:underline; text-underline-offset:2px; }
.blog-body h1,.blog-body h3{ font-size:1.25rem; font-weight:600; line-height:1.5; margin:1.8em 0 .6em; }
/* 見出し：中央揃え・太字。display:block でグローバル main h2{display:flex;align-items:flex-start} を打ち消す */
.blog-body h2{ display:block; font-size:1.3rem; font-weight:700; line-height:1.5; text-align:center; color:var(--primary-color); margin:2.2em 0 1.2em; }
/* 見出し下の装飾バー（アメブロの色バーを再現。色は先生の指定を継承） */
.blog-body h2 .blog-h2bar{ display:block; width:72px; height:3px; margin:.55em auto 0; border-radius:2px; }
/* 先生の背景色ハイライト：元アメブロで付いていた内側余白を復元（layout系は剥いだため）。
   ブロック(div/p)＝ボックス余白／インライン(span)＝ハイライト余白。装飾バー(h2bar)は除外。 */
.blog-body div[style*="background-color:rgb"]:not(.eframe-keep), .blog-body div[style*="background-color:#"]:not(.eframe-keep),
.blog-body p[style*="background-color:rgb"]:not(.eframe-keep),   .blog-body p[style*="background-color:#"]:not(.eframe-keep){ padding:.8em 1em; border-radius:4px; }
.blog-body span[style*="background-color:rgb"]:not(.blog-h2bar):not(.eframe-keep), .blog-body span[style*="background-color:#"]:not(.blog-h2bar):not(.eframe-keep){ padding:.05em .35em; border-radius:3px; }
/* アメブロ装飾フレーム（写真＋飾り枠の重ね）は inline style の position/transform をそのまま活かす。
   背景色ハイライトの padding 誤爆だけ上の :not(.eframe-keep) で除外している。 */

/* 記事下CTA（予約＞問い合わせ＞LINE） */
.blog-cta{ margin:3rem 0 1rem; padding:1.6rem 1.4rem; border:1px solid var(--primary-color); border-radius:10px; background:#faf7f3; }
.blog-cta-lead{ margin:0 0 .4rem; font-size:1.15rem; font-weight:600; color:var(--primary-color); text-align:center; letter-spacing:.05em; }
.blog-cta-note{ margin:0 0 1.2rem; font-size:.85rem; color:#8a8378; text-align:center; line-height:1.7; }
.blog-cta-actions{ display:flex; flex-direction:column; gap:.7rem; max-width:420px; margin:0 auto; }
.blog-cta-btn{ display:block; text-align:center; padding:.9rem 1rem; border-radius:999px; text-decoration:none; font-size:1rem; border:1px solid var(--primary-color); color:var(--primary-color); background:#fff; transition:opacity .2s; }
.blog-cta-btn:hover{ opacity:.72; }
.blog-cta-primary{ background:var(--primary-color); color:#fff; font-weight:600; }
.blog-cta-line{ border-color:#06c755; color:#06c755; }

/* 本文中の内部リンクカード（アメブロogpCard由来）＝左:タイトル+要約／右:キャッチ画像 */
.blog-relcard{ display:flex; align-items:stretch; border:1px solid #e2e2e2; border-radius:6px; overflow:hidden; margin:.3rem 0; text-decoration:none; background:#fff; transition:box-shadow .2s; }
.blog-relcard:hover{ box-shadow:0 4px 14px rgba(0,0,0,.07); }
.blog-relcard-body{ flex:1 1 auto; min-width:0; padding:.8rem 1rem; text-align:left; }
.blog-relcard-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:600; color:var(--primary-color); line-height:1.5; word-break:break-word; }
.blog-relcard-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:.35rem; font-size:.85rem; color:#8a8378; line-height:1.6; }
.blog-relcard-thumb{ flex:0 0 104px; align-self:stretch; background:transparent; display:flex; }
/* 画像は左（内側＝本文側）を0＝四角のまま、右（外側）だけカードと同じ6pxで丸める */
.blog-relcard-thumb img{ width:104px; height:100%; min-height:76px; object-fit:cover; display:block; border-radius:0 6px 6px 0; }
@media (max-width:600px){ .blog-relcard-thumb{ flex-basis:88px; } .blog-relcard-thumb img{ width:88px; } }

/* 記事下：前後の記事ナビ */
.blog-pager{ display:flex; gap:.8rem; margin:2.4rem 0 1rem; }
.blog-pager-item{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.25rem; padding:.75rem .95rem; border:1px solid #e2e2e2; border-radius:8px; text-decoration:none; background:#fff; transition:box-shadow .2s; }
.blog-pager-item:hover{ box-shadow:0 4px 14px rgba(0,0,0,.06); }
.blog-pager-item.is-empty{ border:0; background:none; pointer-events:none; }
.blog-pager-next{ text-align:right; }
.blog-pager-label{ font-size:.72rem; color:#a89f90; }
.blog-pager-title{ font-size:.85rem; font-weight:600; color:var(--primary-color); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 追従バー（画面下固定）＝記事一覧＋鑑定予約＋LINE。スクロール不要でCTA/導線に到達 */
.blog-stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; background:#fff; border-top:1px solid #e8e0d5; box-shadow:0 -2px 12px rgba(0,0,0,.06); }
.blog-sticky-item{ flex:1 1 0; text-align:center; padding:.9rem .3rem; font-size:.85rem; font-weight:600; text-decoration:none; color:var(--primary-color); border-right:1px solid #eee; }
.blog-sticky-item:last-child{ border-right:0; }
.blog-sticky-cta{ background:var(--primary-color); color:#fff; }
.blog-sticky-line{ color:#06c755; }
/* PC（≥900px）では下部追従バーは不要 → 非表示（代わりにサイドの鑑定予約バナー）。下余白も戻す */
@media (min-width:900px){ .blog-stickybar{ display:none; } body{ padding-bottom:0; } }
/* ＜900px は下部追従バーを使うので、サイドの予約バナー（footer.phpの#side-btns）は隠す＝競合回避 */
@media (max-width:899px){ #side-btns{ display:none; } }
/* 追従バーに最終行が隠れないよう、ページ下に余白（blog配下のみ適用） */
body{ padding-bottom:3.6rem; }