/** お知らせ一覧 — 共通のお知らせリストをSPでも縦に読める構成にする。 */
.p-news-main {
	padding-block: var(--space-section-y);
	background: var(--color-base);
}

.p-news .c-news-item {
	flex-wrap: wrap;
	gap: calc(var(--space-3xs) * 3) calc(var(--space-3xs) * 4);
	padding-block: calc(var(--space-3xs) * 6);
}

.p-news .c-news-item__title {
	flex-basis: 100%;
	min-width: 0;
	min-height: var(--tap-min);
	display: flex;
	align-items: center;
	font-size: var(--fs-body);
	overflow-wrap: anywhere;
}

.p-news .c-tag {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.p-news-pagination,
.p-news-back {
	margin-top: var(--space-section-y);
}

.p-news-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--space-3xs) * 2);
	padding: 0;
	list-style: none;
}

.p-news-pagination a,
.p-news-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-min);
	min-height: var(--tap-min);
	padding-inline: calc(var(--space-3xs) * 3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	color: var(--color-text);
	font-size: var(--fs-body);
	text-decoration: none;
}

.p-news-pagination .current {
	background: var(--color-bg-cream);
	border-color: var(--color-secondary);
	font-weight: 700;
}

@media (hover: hover) {
	.p-news-pagination a:hover {
		background: var(--color-bg-cream);
		text-decoration: underline;
	}
}

@media (min-width: 1000px) {
	.p-news .c-news-item {
		flex-wrap: nowrap;
	}

	.p-news .c-news-item__title {
		flex: 1;
	}

	.p-news .c-tag {
		max-width: 25%;
	}
}