お知らせ・新着情報一覧のCSS素材

カテゴリの色は cs-nw01__cat--info（お知らせ）--event（イベント）--holiday（休業）で変えています。スマホ幅では日付・カテゴリの下にタイトルが回ります。

1行全体がリンクです。マウスを乗せると行の背景が付き、右の丸い矢印が色付きになって少し右に動きます。

日付を大きく見せるカードです。カードは幅に合わせて自動で列の数が変わり、高さもそろいます。

上のボタンを押すと、そのカテゴリのお知らせだけが表示されます。ボタンの data-cat と、各行の data-cat を同じ文字にしてください。「すべて」は data-cat="all" です。

トップページのメイン画像の下などに置く、最新の1件だけを見せる帯です。長いタイトルは1行で「…」に省略されます。

臨時休業や台風・大雪の影響など、いちばん目立たせたいお知らせ用です。数件まで並べられます。

年の見出しが左の列に入り、その年の一覧をスクロールしている間は上に止まります（position: sticky）。スマホ幅では見出しが上に乗ります。

新しい記事の <li> に cs-nw08__new を付けると、タイトルの後ろに「NEW」が出ます。WordPressなら投稿日から○日以内のときだけクラスを付けると便利です。

月と日を小さなカレンダーのような四角に入れます。イベントの告知や、開催日の決まったお知らせに向きます。

最初は3件だけ見せて、残りは <details> の中に入れています。JavaScriptなしで開け閉めでき、開くとボタンの文字が「閉じる」に変わります。