/* ブログ（/blog）と確認用の帯の書式。土台は style.css の変数と .読み物 で、ここは足りない分だけ。
   style.css と同じく、スマホが素の状態で、PC は下の @media だけ。 */

.確認用{background:var(--today);color:var(--tx);font-size:var(--t-caption);line-height:var(--lh-caption);padding:var(--s-sm) 0;}

.ブログ .cats{display:flex;flex-wrap:wrap;gap:var(--s-sm);margin:var(--s-lg) 0 0;}
.ブログ .cats a{border:1px solid var(--line);border-radius:var(--r-full);padding:var(--s-xs) var(--s-md);
  font-size:var(--t-label);line-height:var(--lh-label);color:var(--tx);text-decoration:none;}

.読み物 .posts{list-style:none;margin:var(--s-xl) 0 0;padding:0;}
.読み物 .posts li{margin:0;padding:var(--s-lg) 0;border-top:1px solid var(--line);}
.posts li:last-child{border-bottom:1px solid var(--line);}
.posts time{display:block;font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--tx2);}
.posts .ttl{display:inline-block;margin-top:var(--s-xs);font-size:var(--t-title);line-height:var(--lh-title);
  font-weight:700;color:var(--tx);text-decoration:none;}
.posts .ttl:hover{color:var(--goldtx);}
.読み物 .posts p{margin:var(--s-sm) 0 0;color:var(--tx2);}
.posts .thumb{display:none;}

.pager{display:flex;gap:var(--s-xl);align-items:center;margin-top:var(--s-xl);}
.pager span{color:var(--tx2);font-size:var(--t-label);}

.読み物 .crumbs ol{list-style:none;margin:0 0 var(--s-md);padding:0;display:flex;flex-wrap:wrap;gap:var(--s-xs) var(--s-sm);}
.読み物 .crumbs li{margin:0;font-size:var(--t-caption);line-height:var(--lh-caption);}
.crumbs li + li::before{content:"›";margin-right:var(--s-sm);color:var(--tx2);}
.crumbs a{color:var(--tx2);}

.記事 .meta{display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-lg);align-items:center;margin:0 0 var(--s-xl);
  font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--tx2);}
.記事 .cat{border:1px solid var(--line);border-radius:var(--r-full);padding:0 var(--s-md);color:var(--tx2);text-decoration:none;}
.記事 .hero{margin:0 0 var(--s-xl);}
.記事 .hero img{display:block;width:100%;height:auto;border-radius:var(--r-md);}
.記事 .body h2{margin-top:40px;}
.記事 .body img{max-width:100%;height:auto;}
.記事 .body blockquote{background:var(--track);border-left:3px solid var(--gold);padding:var(--s-md) var(--s-lg);border-radius:0 var(--r-md) var(--r-md) 0;}
.記事 .body blockquote p{margin:0;}

.post-cta{margin:40px 0 0;background:var(--today);padding:var(--s-xl);border-radius:var(--r-lg);text-align:center;}
.読み物 .post-cta .h{font-weight:700;font-size:var(--t-title);line-height:var(--lh-title);margin:0 0 var(--s-sm);}
.読み物 .post-cta p{margin:0 0 var(--s-lg);}
.back{margin-top:var(--s-xl);}

@media (min-width:900px){
  .posts .thumb{display:block;}
  .posts li:has(.thumb){display:grid;grid-template-columns:12rem 1fr;gap:var(--s-xl);align-items:start;}
  .posts .thumb img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r-sm);}
}