/* components.css — 2ページ以上で使う再利用部品。BEM・トークン参照。 */
.button {
	display: inline-block; text-decoration: none;
	background: var(--wp--preset--color--brand); color: var(--wp--preset--color--base);
	padding: 0.9rem 2rem; border-radius: 999px; font-weight: 600;
	transition: background-color .2s ease;
}
.button:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }

.page-header { background: var(--wp--preset--color--base-2); padding-block: var(--wp--preset--spacing--lg); }
.page-header__inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--md); }

.page-body__inner { max-width: var(--wp--style--global--content-size, 720px); margin-inline: auto; padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md); }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); font-size: var(--wp--preset--font-size--sm); }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: .5rem; color: var(--wp--preset--color--ink-soft); }

.blog-list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--md); }
@media (min-width: 768px) { .blog-list__items { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .blog-list__items { grid-template-columns: repeat(3, 1fr); } }