/*
 * お知らせ（news.php）。ページ名「お知らせ」（.page-title）の下に、くにたちお祭りBlog とおすすめ商店紹介の 2 節。
 * 節の見出し（.section-heading）は既定だとページ名と同じ大きさで、家の線と下線が付くぶんページ名より目立つ。一段小さくする
 */
.news-page .section-heading { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.news-page .section-heading__icon { width: 1.35rem; height: 1.35rem; }
.news-page .section-heading + .lead { margin-bottom: var(--sp-4); }

/*
 * くにたちお祭りBlog の一覧。アイキャッチは 16:9 で題字が絵の中にあるので、正方形に切らずに
 * 幅いっぱいの 16:9 で出す（トップの棚の .shelf__row--news と同じカード。2026-11-04）。
 * 列の幅（48rem）で 2 列、狭い画面は 1 列。
 */
/* おすすめ商店紹介の一覧: トップの棚と同じ正方形のコマ（css/components.css の .theme-card）。スマホは 1 列、40rem から 2 列（下の Blog の一覧と同じ区切り） */
.theme-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.theme-grid > li { display: flex; }
@media (min-width: 40rem) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.news-page .news-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); border-top: 0; }
@media (min-width: 40rem) { .news-page .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.news-page .news-item { flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-paper); border: var(--rule); }
.news-page .news-item__img { width: 100%; aspect-ratio: 16 / 9; }
@media (hover: hover) and (pointer: fine) {
  .news-page .news-item:hover { background: var(--c-sakura-deep); }
}