/*
* RingiQuest ブログ（記事一覧・個別記事）の追加スタイルシート。
*
* `styles.css` が定義するデザイントークン（--bg / --surface / --accent 等）を
* そのまま継承する前提で、ここには**差分のみ**を書く。トークンの再定義はしない。
* `styles.css` を先に読み込み、このファイルは常にその後に読み込むこと
* （HTML 側の の順序に依存する）。
*
* ビルドステップ無し・第三者フォント無しの原則は LP トップと同じ。
*/
/* ---------- パンくず ---------- */
/*
* 個別記事の先頭に置く現在地表示。区切りの「/」は疑似要素で描画し、
* マークアップ側にセパレータの文字を持たせない（スクリーンリーダーの
* 読み上げに余計な記号を混ぜないため）。
*/
.breadcrumb {
margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
font-size: 0.875rem;
color: var(--text-muted);
}
.breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.breadcrumb li {
display: flex;
align-items: center;
gap: 0.35rem;
}
.breadcrumb li + li::before {
content: "/";
color: var(--border);
}
.breadcrumb a {
color: var(--text-muted);
text-decoration: none;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
color: var(--accent);
}
.breadcrumb li[aria-current="page"] {
color: var(--text);
}
/* ---------- 記事一覧（/blog/） ---------- */
.blog-index {
padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.post-list {
list-style: none;
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/*
* カード全体をクリック可能にしたいが、