/* =========================================================
   お知らせ一覧ページ専用スタイル（home.php）
   クラス名は.p-news-*ではなく.p-news__*でこのページの見出し・余白・背景だけを
   管理し、1行分の表示（日付・カテゴリー・タイトル）はTOPページのNEWSセクション
   （template-parts/news-item.php）と全く同じ見た目にするため、front.cssの
   .news-item__*ルールをこのファイル内に複製している（front.css自体は変更しない。
   本人無料券についてページのFAQ実装と同じ「CSSは複製し、既存ファイルには触れない」方針）。
========================================================= */
.p-news {
	background: var(--wp--preset--color--base-alt);
	padding-block: 56px;
}
.p-news__label {
	display: block;
	color: var(--wp--preset--color--river);
	margin-bottom: 12px;
}
.p-news__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 32px;
}
.p-news__list {
	border-top: 1px solid var(--wp--preset--color--sand);
}
.p-news__empty {
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}

/* ---------- 1行分の表示（TOPページのNEWSセクションと同じ見た目。front.cssの複製） ---------- */
.news-item__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 20px;
	padding-block: 11px;
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
.news-item__link:hover .news-item__title {
	color: var(--wp--preset--color--river);
}
.news-item__date {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	min-width: 90px;
}
.news-item__category {
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--river);
	border: 1px solid var(--wp--preset--color--river);
	border-radius: 3px;
	padding: 2px 7px;
}
.news-item__title {
	flex: 1 1 260px;
	min-width: 0;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s ease;
}

/* ---------- ページ送り（投稿数が1ページの表示件数を超えたときのみ出力される） ---------- */
.p-news .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 32px;
	font-size: 13px;
}
.p-news .page-numbers {
	color: var(--wp--preset--color--ink-soft);
}
.p-news a.page-numbers:hover {
	color: var(--wp--preset--color--forest);
}
.p-news .page-numbers.current {
	color: var(--wp--preset--color--forest);
	font-weight: 500;
}

@media (max-width: 768px) {
	.p-news {
		padding-block: 40px;
	}
	.p-news__heading {
		font-size: 22px;
		margin-bottom: 24px;
	}
	.news-item__link {
		gap: 8px 16px;
	}
	.news-item__title {
		flex-basis: 100%;
		white-space: normal;
	}
}