/* ブログ一覧・記事ページ用（_shared.css の色・フォントに合わせています） */
.blog-wrap{max-width:860px;margin:auto;text-align:left}
.blog-empty{padding:40px 0;color:var(--muted);text-align:center}

.blog-list{display:grid;gap:22px}
.blog-card a{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:6px;color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.blog-card a:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(42,42,40,.06)}
.blog-thumb{aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--sub);display:grid;place-items:center}
.blog-thumb img{width:100%;height:100%;object-fit:cover}
.blog-thumb span{font-family:var(--serif);color:var(--accent);font-size:22px;letter-spacing:.08em}
.blog-card time,.blog-meta time{font-family:var(--serif);color:var(--accent);font-size:15px;letter-spacing:.06em}
.blog-card h2{font-family:var(--mincho);font-size:20px;line-height:1.6;margin:6px 0 8px}
.blog-card p{color:var(--muted);font-size:15px;line-height:1.8;margin:0}

.blog-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:40px}

.blog-meta{margin:0 0 18px}
.blog-eyecatch{width:100%;height:auto;border-radius:6px;margin-bottom:36px}
.blog-content{font-size:16px;line-height:2;color:var(--ink);overflow-wrap:anywhere}
.blog-content h2{font-family:var(--mincho);font-size:24px;line-height:1.5;margin:56px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.blog-content h3{font-family:var(--mincho);font-size:20px;margin:40px 0 14px;padding-left:12px;border-left:3px solid var(--accent)}
.blog-content p{margin:0 0 1.4em}
.blog-content img{max-width:100%;height:auto;border-radius:4px;margin:12px 0}
.blog-content ul,.blog-content ol{padding-left:1.4em;margin:0 0 1.4em}
.blog-content a{color:var(--main);text-decoration:underline}
.blog-content blockquote{margin:24px 0;padding:16px 20px;background:var(--sub);border-left:3px solid var(--accent)}
.blog-content iframe{max-width:100%}

.blog-after{margin-top:64px;padding:32px;background:var(--sub);border-radius:6px;text-align:center}
.blog-after .cta-row{justify-content:center}

@media (max-width:720px){
  .blog-card a{grid-template-columns:1fr;gap:14px;padding:14px}
  .blog-card h2{font-size:18px}
  .blog-content h2{font-size:21px}
  .blog-after{padding:24px 18px}
  .blog-pager .btn{padding-inline:14px}
}

/* 記事タイトルが長くても画面からはみ出さないように */
.blog-hero .container>div{min-width:0}
.blog-hero h1{overflow-wrap:anywhere;word-break:normal;line-height:1.45}
@media (max-width:720px){.blog-hero h1{font-size:clamp(24px,6.6vw,32px)}}

/* 記事ページの見出し：写真なし・本文幅にそろえて控えめに */
.blog-hero--article{padding-top:64px;padding-bottom:44px}
.blog-hero--article .container{display:block;max-width:860px}
.blog-hero--article .eyebrow a{color:inherit;text-decoration:none}
.blog-hero--article h1{font-size:clamp(24px,2.6vw,34px);line-height:1.55;text-wrap:pretty}
.blog-hero--article + .section{padding-top:48px}
@media (max-width:720px){
  .blog-hero--article{padding-top:40px;padding-bottom:28px}
  .blog-hero--article h1{font-size:clamp(21px,5.6vw,26px)}
  .blog-hero--article + .section{padding-top:32px}
}
/* 縦長のアイキャッチ写真で本文が下に押し出されすぎないように */
.blog-eyecatch{display:block;width:auto;max-width:100%;max-height:min(70vh,560px);margin:0 auto 36px}