/* ==========================================================================
   お知らせ（home.php・archive.php・single.php）＋ 分類のチップ（c-filter）
   Figma: 一覧 75:1727 / 詳細 75:1947、SP 242:2599 / 242:2908
   - c-news-item・c-tag・c-breadcrumb・c-button はコーポレートの共通パーツ。c-pagination は project-works.css
   ========================================================================== */

/* ---------- 分類のチップ（c-filter） ---------- */
.c-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.c-filter__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* 押せる大きさ（Figma の PC は 41px） */
	padding: 0 18px;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	color: var(--color-text-primary);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s;
}

.c-filter__chip:hover {
	border-color: var(--color-border-brand);
}

.c-filter__chip.is-active {
	border-color: var(--color-bg-brand);
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

/* ==========================================================================
   お知らせ 一覧（p-news-archive）
   ========================================================================== */
.p-news-archive__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	max-width: calc(1000px + var(--container-gutter, 40px) * 2);
	padding-block: var(--space-5xl) 140px; /* 下の余白は Figma の 140px */
}

.p-news-archive__list {
	border-top: 1px solid var(--color-border-default);
}

.p-news-archive__empty {
	padding: var(--space-3xl) var(--space-xl);
	border-radius: 20px;
	background: var(--color-bg-subtle);
	color: var(--color-text-secondary);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
}

@media (max-width: 767px) {
	.c-filter__list {
		gap: var(--space-xs);
	}

	.p-news-archive__inner {
		gap: var(--space-2xl);
		padding-block: var(--space-2xl) var(--space-6xl);
	}
}

/* ==========================================================================
   お知らせ 詳細（p-news-single。本文の幅 720px）
   ========================================================================== */
.p-news-single__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	align-items: stretch;
	padding-block: var(--space-3xl) var(--space-6xl);
}

.p-news-single__inner > .c-breadcrumb {
	align-self: flex-start;
	max-width: 100%;
}

.p-news-single__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

.p-news-single__date {
	color: var(--color-text-tertiary);
	font: var(--text-en-date);
	letter-spacing: var(--ls-en-date);
}

.p-news-single__title {
	color: var(--color-text-primary);
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
	text-wrap: balance; /* 最後の行が1〜2文字だけにならないように（施工事例の題と同じ。2026-10-05） */
}

/* 本文（上の線は Figma p-news-single__divider） */
.p-news-single__content {
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border-default);
	color: var(--color-text-primary);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
}

.p-news-single__content > * + * {
	margin-top: var(--space-xl);
}

.p-news-single__content h2 {
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
}

.p-news-single__content h3 {
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.p-news-single__content a {
	color: var(--color-text-brand);
}

.p-news-single__content ul,
.p-news-single__content ol {
	padding-left: 1.5em;
}

.p-news-single__content img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.p-news-single__content figure {
	margin-inline: 0;
}

/* 前のお知らせ・お知らせ一覧へ・次のお知らせ */
.p-news-single__pager {
	display: grid;
	grid-template-areas: "prev back next";
	grid-template-columns: 1fr auto 1fr;
	gap: var(--space-md);
	align-items: center;
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border-default);
}

.p-news-single__meta {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px;
	color: var(--color-text-brand);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	text-decoration: none;
}

a.p-news-single__meta:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.p-news-single__meta .c-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.p-news-single__meta--prev {
	grid-area: prev;
	justify-self: start;
}

.p-news-single__meta--next {
	grid-area: next;
	justify-self: end;
}

.p-news-single__meta.is-disabled {
	color: var(--color-text-tertiary);
	opacity: 0.4;
}

.p-news-single__back {
	grid-area: back;
}

@media (max-width: 767px) {
	.p-news-single__inner {
		gap: 20px;
		padding-block: var(--space-xl) var(--space-6xl);
	}

	/* 375px より細い画面では題を幅に合わせて小さく（375px で 28px・320px で 24px。320px で「いただきまし／た。」と1字だけ落ちていた） */
	.p-news-single__title {
		font-size: min(var(--fs-h1), 7.5vw);
	}

	.p-news-single__content {
		padding-top: 20px;
	}

	.p-news-single__content > * + * {
		margin-top: 20px;
	}

	/* SP: 前へ・次へを1行に、「お知らせ一覧へ」はその下に幅いっぱい（Figma 242:2928） */
	.p-news-single__pager {
		grid-template-areas:
			"prev next"
			"back back";
		grid-template-columns: 1fr 1fr;
		padding-top: var(--space-lg);
	}

	.p-news-single__back .c-button {
		width: 100%;
	}
}

/* ==========================================================================
   専用のテンプレートがない一覧（archive.php のお知らせ以外）
   ========================================================================== */
.p-archive {
	padding-block: var(--space-5xl);
}

.p-archive__title {
	margin-bottom: var(--space-xl);
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
}

.p-archive__list {
	margin-bottom: var(--space-2xl);
	border-top: 1px solid var(--color-border-default);
}

.p-archive__link {
	display: flex;
	gap: var(--space-lg);
	padding: var(--space-md) var(--space-xs);
	border-bottom: 1px solid var(--color-border-default);
	color: var(--color-text-primary);
	font: var(--text-body-bold);
	text-decoration: none;
}

.p-archive__date {
	color: var(--color-text-tertiary);
	font: var(--text-en-date);
}