/* ==========================================================================
   施工事例（archive-works.php・single-works.php）＋ 一覧で使う形（c-pagination・c-back-link）
   Figma: 一覧 74:1275 / 詳細 74:1616、SP 241:10857 / 241:11183
   - c-works-card・c-tag・c-breadcrumb・c-button はコーポレートの共通パーツ（component の CSS）
   - c-pagination はお知らせの一覧でも使う。c-back-link は「一覧へ戻る」の文字リンク
   ========================================================================== */

/* ---------- 小さいアイコン（template-parts/corporate/pages-icon.php） ---------- */
.p-works-archive .c-icon,
.p-works-single .c-icon,
.c-pagination .c-icon,
.c-back-link .c-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* ---------- ページ送り（c-pagination） ---------- */
.c-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
}

.c-pagination__num,
.c-pagination__icon,
.c-pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	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-en-label);
	letter-spacing: var(--ls-en-label);
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s;
}

.c-pagination__icon {
	color: var(--color-text-brand);
}

a.c-pagination__num:hover,
a.c-pagination__icon:hover {
	border-color: var(--color-border-brand);
	background: var(--color-bg-muted);
}

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

/* PC: 押せない「前へ・次へ」は出さない（Figma 74:1503） */
.c-pagination__icon.is-disabled {
	display: none;
}

@media (max-width: 767px) {
	/* SP: ‹ 1 2 3 › だけ（最初・最後のページと「…」は出さない。押せない矢印は薄く出す） */
	.c-pagination__item.is-edge {
		display: none;
	}

	.c-pagination__icon.is-disabled {
		display: inline-flex;
		opacity: 0.4;
	}
}

/* ---------- 一覧へ戻る（c-back-link） ---------- */
.c-back-link {
	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;
}

.c-back-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ==========================================================================
   施工事例 一覧（p-works-archive）
   ========================================================================== */
.p-works-archive {
	padding-block: var(--space-5xl) 140px; /* 下の余白は Figma の 140px（トークンにない値） */
}

.p-works-archive__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
}

/* 絞り込み（灰色の箱） */
.p-works-archive__filter {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: 28px var(--space-xl);
	border-radius: 20px;
	background: var(--color-bg-subtle);
}

.p-works-archive__row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.p-works-archive__row--area {
	justify-content: space-between;
}

.p-works-archive__label {
	flex-shrink: 0;
	width: 110px;
	color: var(--color-text-secondary);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.p-works-archive__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.p-works-archive__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* 押せる大きさ（Figma の PC は 39px） */
	padding: 0 var(--space-md);
	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;
}

.p-works-archive__chip:hover {
	border-color: var(--color-border-brand);
}

.p-works-archive__chip.is-active {
	border-color: var(--color-bg-brand);
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

.p-works-archive__area {
	display: flex;
	gap: 10px;
	align-items: center;
}

/* 地域のセレクト（Figma p-works-archive__meta） */
.p-works-archive__meta {
	position: relative;
	color: var(--color-text-primary);
}

.p-works-archive__select {
	min-width: 190px;
	min-height: 54px;
	padding: 10px 46px 10px var(--space-md);
	border: 1px solid var(--color-border-strong);
	border-radius: 10px;
	background: var(--color-bg-canvas);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	cursor: pointer;
	appearance: none;
}

.p-works-archive__select:hover {
	border-color: var(--color-border-brand);
}

.p-works-archive .p-works-archive__meta-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--color-text-secondary);
	pointer-events: none;
	transform: translateY(-50%);
}

/* JS がないときの「絞り込む」 */
.p-works-archive__submit {
	min-height: 44px;
	padding: 0 var(--space-md);
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	color: var(--color-text-brand);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.p-works-archive__count {
	color: var(--color-text-primary);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

/* カードの一覧（PC 3列。横に並ぶカードは高さをそろえる） */
.p-works-archive__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px var(--space-lg);
}

.p-works-archive__item,
.p-works-single__item {
	display: flex;
}

.p-works-archive__item > *,
.p-works-single__item > * {
	flex: 1;
	min-width: 0;
}

.p-works-archive__empty {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
	padding: var(--space-3xl) var(--space-xl);
	border-radius: 20px;
	background: var(--color-bg-subtle);
}

.p-works-archive__empty-text {
	color: var(--color-text-secondary);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
}

@media (max-width: 1023px) {
	.p-works-archive__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.p-works-archive {
		padding-block: var(--space-2xl) var(--space-6xl);
	}

	.p-works-archive__inner {
		gap: var(--space-2xl);
	}

	.p-works-archive__filter {
		gap: var(--space-lg);
		padding: var(--space-lg) var(--space-md);
	}

	.p-works-archive__row,
	.p-works-archive__area {
		flex-direction: column;
		align-items: stretch;
	}

	.p-works-archive__label {
		width: auto;
	}

	.p-works-archive__chips {
		gap: var(--space-xs);
	}

	.p-works-archive__select {
		width: 100%;
		min-height: 52px;
	}

	.p-works-archive__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2xl);
	}
}

/* ==========================================================================
   施工事例 詳細（p-works-single）
   ========================================================================== */

/* 見出し（パンくず・工事の種類と日付・題名・リード） */
.p-works-single__head-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	padding-block: var(--space-2xl) var(--space-3xl);
}

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

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

.p-works-single__title {
	color: var(--color-text-primary);
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
	/* Wix から移した長い題で、最後の行が1〜2文字だけにならないように、行の長さをそろえる（文節の区切りは foundation の auto-phrase）。
	   pretty では 1024px で「水まわりを／実現」が残ったので balance（Safari 17.5 からも効く。2026-10-05） */
	text-wrap: balance;
}

.p-works-single__lead {
	max-width: 960px;
	color: var(--color-text-secondary);
	font: var(--text-lead);
	letter-spacing: var(--ls-lead);
}

/* 施工前・施工後の見比べ（施工前の写真がないときは、札もつまみもない1枚の写真＝p-works-single__viewer--single） */
.p-works-single__compare-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.p-works-single__viewer {
	--pos: 50%;
	position: relative;
	height: 640px;
	overflow: hidden;
	border-radius: 20px;
	background: var(--color-bg-subtle);
	touch-action: pan-y; /* 横のドラッグは見比べ、縦はスクロール */
	user-select: none;
}

.p-works-single__viewer.is-ready {
	cursor: ew-resize;
}

.p-works-single__viewer img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.p-works-single__before {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.p-works-single__before img,
.p-works-single__viewer--single.is-before img {
	filter: grayscale(1); /* 施工前は白黒（Figma c-works-card の説明） */
}

/*
 * 札なしの1枚（施工後の写真だけの事例。Instagram のほぼ正方形の写真や、Wix の施工前・施工後を1枚にまとめた画像）は、
 * 切り抜かずに全体を見せる（上下が切れると、画像の中の文字や施工前の側が欠けるため。2026-10-02）
 */
.p-works-single__viewer--single:not(.is-before) {
	width: min(100%, 720px);
	height: auto;
	margin-inline: auto;
}

.p-works-single__viewer--single:not(.is-before) img {
	position: static;
	height: auto;
	object-fit: contain;
}

.p-works-single__shape {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 4px;
	background: var(--color-bg-canvas);
	transform: translateX(-50%);
	pointer-events: none;
}

.p-works-single__handle {
	position: absolute;
	top: 50%;
	left: var(--pos);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	color: var(--color-text-brand);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.16); /* 写真の上でつまみを見分けやすく */
	transform: translate(-50%, -50%);
}

.p-works-single .p-works-single__handle .c-icon {
	width: 20px;
	height: 20px;
}

.p-works-single__viewer.is-dragging .p-works-single__handle,
.p-works-single__handle:focus-visible {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-works-single__tag {
	position: absolute;
	top: 20px;
	padding: var(--space-2xs) var(--space-sm);
	border-radius: 6px;
	color: var(--color-text-on-brand);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	pointer-events: none;
}

.p-works-single__tag--before {
	left: 20px;
	background: var(--color-bg-inverse);
}

.p-works-single__tag--after {
	right: 20px;
	background: var(--color-bg-brand);
}

/* 拡大のボタン（右下。右上の After の札と重ならないように。押すと施工前と施工後を並べて拡大＝inc/lightbox.php。2026-10-05） */
.p-works-single__zoom {
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: inline-flex;
	gap: var(--space-2xs);
	align-items: center;
	min-height: 44px;
	padding: var(--space-xs) var(--space-md);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	color: var(--color-text-brand);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.16); /* 写真の上で見分けやすく（つまみと同じ） */
	cursor: zoom-in;
}

.p-works-single__zoom:focus-visible {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-works-single__note {
	color: var(--color-text-tertiary);
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
}

/* 本文と工事の概要 */
.p-works-single__body-inner {
	display: flex;
	gap: var(--space-4xl);
	align-items: flex-start;
	padding-block: var(--space-4xl) 96px; /* 下の余白は Figma の 96px */
}

.p-works-single__article {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2xl);
	align-items: flex-start;
	min-width: 0;
}

/* 本文と、その下の「Instagram で見る」 */
.p-works-single__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: flex-start;
	width: 100%;
}

/* その事例の Instagram の投稿へ（小さな文字のリンク。新しいタブ。押せる高さ 44px） */
.p-works-single__instagram {
	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;
}

.p-works-single__instagram:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.p-works-single .p-works-single__instagram-external {
	width: 16px;
	height: 16px;
}

.p-works-single__content {
	width: 100%;
	color: var(--color-text-secondary);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
}

.p-works-single__content > * + * {
	margin-top: 14px;
}

.p-works-single__content h2,
.p-works-single__content h3 {
	color: var(--color-text-primary);
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
}

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

.p-works-single__content > * + h2,
.p-works-single__content > * + h3,
.p-works-single__content > * + .gallery {
	margin-top: var(--space-2xl);
}

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

.p-works-single__content img {
	height: auto;
	border-radius: 12px;
}

/* 本文の写真（[gallery] の3枚まで。SP は2列・3枚のときは3列） */
.p-works-single__content .gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
}

.p-works-single__content .gallery-item {
	margin: 0;
}

.p-works-single__content .gallery-item img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.p-works-single__content .gallery-caption {
	margin-top: var(--space-xs);
	color: var(--color-text-tertiary);
	font: var(--text-caption);
}

.p-works-single__side {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: var(--space-lg);
	width: 400px;
}

/* 工事の概要 */
.p-works-single__info {
	padding: 28px 28px var(--space-sm);
	border-radius: 20px;
	background: var(--color-bg-subtle);
}

.p-works-single__info-title {
	color: var(--color-text-primary);
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.p-works-single__info .p-works-single__row {
	display: flex;
	gap: var(--space-md);
	padding-block: 14px;
	border-bottom: 1px solid var(--color-border-default);
}

.p-works-single__info dt {
	flex-shrink: 0;
	width: 100px;
	color: var(--color-text-secondary);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.p-works-single__info dd {
	flex: 1;
	min-width: 0;
	color: var(--color-text-primary);
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

/* この施工なら月々いくら？（payment-simulator/works-block.php・template-parts/corporate/works-pay.php） */
.p-works-single__pay {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: var(--space-lg) 28px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-muted);
}

.p-works-single__pay-title {
	color: var(--color-text-primary);
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
}

.p-works-single__pay-price {
	display: flex;
	gap: var(--space-sm);
	align-items: baseline;
}

.p-works-single__pay-price-label {
	color: var(--color-text-secondary);
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.p-works-single__pay-price-value {
	color: var(--color-text-primary);
	font: 600 24px/1.2 var(--font-en); /* Figma: Barlow Condensed SemiBold 24px（テキストスタイルなし） */
}

.p-works-single__pay-condition {
	color: var(--color-text-secondary);
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
}

.p-works-single__pay-amount {
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.p-works-single__pay-unit {
	color: var(--color-text-primary);
	font: var(--text-body-bold);
	letter-spacing: var(--ls-body-bold);
}

.p-works-single__pay-number {
	color: var(--color-text-brand);
	font: 600 48px/1.2 var(--font-en); /* Figma: Barlow Condensed SemiBold 48px */
}

.p-works-single__pay .c-button {
	width: 100%;
}

/* 同じ工事の施工事例 */
.p-works-single__related {
	background: var(--color-bg-subtle);
}

.p-works-single__related-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	padding-block: 96px var(--space-6xl);
}

.p-works-single__related-title {
	color: var(--color-text-primary);
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
}

.p-works-single__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

@media (max-width: 1023px) {
	.p-works-single__body-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.p-works-single__side {
		width: auto;
	}

	.p-works-single__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.p-works-single__head-inner {
		gap: 14px;
		padding-block: var(--space-xl) var(--space-2xl);
	}

	/* 375px より細い画面では題を幅に合わせて小さく（375px で 28px・320px で 24px）。
	   文節が1行に入らず「施工記／録」と1字だけ落ちるのを防ぐ（お知らせの題も同じ。project-news.css。2026-10-05） */
	.p-works-single__title {
		font-size: min(var(--fs-h1), 7.5vw);
	}

	/* パンくずは1行に収め、入りきらない題名は末尾を「…」で省く（Figma 242:4947 の注記。施工事例・お知らせの詳細） */
	.p-works-single__head .c-breadcrumb,
	.p-news-single .c-breadcrumb {
		max-width: 100%;
	}

	.p-works-single__head .c-breadcrumb__list,
	.p-news-single .c-breadcrumb__list {
		flex-wrap: nowrap;
	}

	.p-works-single__head .c-breadcrumb__item,
	.p-news-single .c-breadcrumb__item {
		flex-shrink: 0;
	}

	.p-works-single__head .c-breadcrumb__item:last-child,
	.p-news-single .c-breadcrumb__item:last-child {
		flex-shrink: 1;
		min-width: 0;
	}

	.p-works-single__head .c-breadcrumb__current,
	.p-news-single .c-breadcrumb__current {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.p-works-single__viewer {
		height: 240px;
		border-radius: var(--radius-lg);
	}

	.p-works-single__tag {
		top: var(--space-sm);
	}

	.p-works-single__tag--before {
		left: var(--space-sm);
	}

	.p-works-single__tag--after {
		right: var(--space-sm);
	}

	.p-works-single__handle {
		width: 48px;
		height: 48px;
	}

	.p-works-single__body-inner {
		gap: var(--space-3xl);
		padding-block: var(--space-3xl) var(--space-5xl);
	}

	.p-works-single__content .gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-sm);
	}

	.p-works-single__content .gallery-item img {
		height: 124px;
	}

	/* 3枚のときは SP も3列（2列だと2段目が1枚になり右が空く。2026-10-02 ユーザー決定）。正方形に切る */
	.p-works-single__content .gallery:has(> .gallery-item:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.p-works-single__content .gallery:has(> .gallery-item:nth-child(3):last-child) .gallery-item img {
		height: auto;
		aspect-ratio: 1;
	}

	.p-works-single__info {
		padding: var(--space-lg) 20px var(--space-xs);
	}

	.p-works-single__info dt {
		width: 80px;
	}

	.p-works-single__pay {
		padding: var(--space-lg) 20px;
	}

	.p-works-single__related-inner {
		gap: var(--space-xl);
		padding-block: var(--space-6xl);
	}

	.p-works-single__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2xl);
	}
}