/* ===============================
   news: お知らせ（post駆動）
   薄色ボックス+細枠。SP: 見出し中央+リスト+下部リンク
   PC: 見出し左上+リスト+右上リンク
   =============================== */

.news {
	padding-block: 0 var(--space-2);
}

/* ボックスはコンテナよりわずかに広い（モック実測: 画面端から約4px）。
   ガター分を差し引いた負マージンで張り出す（トークン値のみ使用） */
.news__box {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	margin-inline: calc(var(--space-1) - var(--container-gutter-mobile));
	padding: var(--space-4);
}

.news__title {
	text-align: center;
	font-size: var(--fs-h3);
	letter-spacing: 0.2em;
}

.news__list {
	margin-top: var(--space-3);
}

.news__row + .news__row {
	border-top: 1px solid var(--color-border);
}

.news__row-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-5) var(--space-2) 0;
	transition: opacity var(--duration-fast);
}

.news__row-link:hover {
	opacity: 0.7;
}

/* 行末の山括弧矢印。1px borderは許可例外 */
.news__row-link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--space-1);
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid var(--color-primary);
	border-right: 1px solid var(--color-primary);
	transform: translateY(-50%) rotate(45deg);
}

.news__date {
	flex: none;
	font-size: var(--fs-caption);
	letter-spacing: 0.08em;
	color: var(--color-text);
}

/* SPは背景なしのプレーンテキスト（モック準拠）。バッジ表現はPCのみ */
.news__badge {
	flex: none;
	font-size: var(--fs-caption);
	line-height: var(--lh-tight);
	letter-spacing: 0.1em;
	color: var(--color-text);
}

.news__item-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--fs-body-sm);
	letter-spacing: 0.05em;
}

.news__more {
	margin-top: var(--space-3);
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.1em;
	transition: opacity var(--duration-fast);
}

.news__more:hover {
	opacity: 0.7;
}

.news__more::after {
	content: "";
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

@media (min-width: 768px) {
	.news {
		padding-block: 0 var(--space-6);
	}

	/* モックのボックスはガター位置まで届く（コンテナ外幅いっぱい） */
	.news__box {
		margin-inline: calc(-1 * var(--container-gutter));
		padding: var(--space-5) var(--space-8);
	}

	.news__title {
		text-align: left;
		letter-spacing: 0.15em;
	}

	.news__list {
		margin-top: var(--space-3);
	}

	.news__row-link {
		gap: var(--space-5);
		padding-block: var(--space-2);
	}

	.news__row-link::after {
		display: none;
	}

	.news__date {
		font-size: var(--fs-body-sm);
	}

	/* PCのみ塗りバッジ。日付との間隔はgap+マージンで約40px */
	.news__badge {
		background: var(--color-primary);
		color: var(--color-text-inverse);
		padding: var(--space-1) var(--space-4);
		border-radius: var(--radius-sm);
		margin-left: var(--space-5);
	}

	.news__badge--event {
		background: var(--color-accent);
	}

	.news__item-title {
		font-size: var(--fs-body);
	}

	/* 一覧を見るは右上（見出しと同じ行）に1つ */
	.news__more {
		position: absolute;
		top: var(--space-5);
		right: var(--space-8);
		margin-top: 0;
		font-size: var(--fs-body);
	}
}