/* ==========================================================================
   塗装・防水のサービス3ページ（外壁塗装・屋根塗装・防水工事。page-paint-detail.php・template-parts/paint/service-*.php）
   Figma 04 PC 79:1770・79:2137・79:2444／04 SP 244:28078・247:6395・247:7157
   - ページ見出し（c-page-header-paint Size=L）・FAQ（c-faq-item-paint）・施工事例のカード・ボタンは P-A の部品
   - セクションの余白は tokens.css の --space-paint-section など。.p-paint-b-section__inner は project-top.css
   - 地の色：ページ見出し muted → 導入 白 → 工程 muted → 施工事例 白 → 案内 muted → FAQ 白
   ========================================================================== */

/* ---------- 導入文と「こんな症状はありませんか？」（p-paint-service__intro） ---------- */
.p-paint-service__intro {
	background: var(--color-bg-canvas);
}

.p-paint-service__intro-inner {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5xl); /* 80 */
	padding-block: var(--space-paint-section);
}

.p-paint-service__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
	max-width: 720px; /* 本文の行は 720px 以内（Figma の枠は 700） */
}

.p-paint-service__text {
	font: var(--text-paint-body);
	color: var(--color-text-primary);
}

.p-paint-service__check {
	display: flex;
	flex: 0 0 420px;
	flex-direction: column;
	gap: 20px;
	margin-left: auto;
	padding: var(--space-xl);
	border-radius: var(--radius-paint-card); /* カードの角（paint-b.md） */
	background: var(--color-bg-muted);
}

.p-paint-service__check-title {
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-paint-service__check-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.p-paint-service__check-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.p-paint-service__check-icon,
.p-paint-service__guide-icon {
	display: inline-flex;
	flex: none;
}

.p-paint-service__check-text {
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
}

/* ---------- 工程（p-paint-service__process） ---------- */
.p-paint-service__process {
	background: var(--color-bg-muted);
}

.p-paint-service__steps,
.p-paint-service__note,
.p-paint-service__faq-list {
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

.p-paint-service__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.p-paint-service__step {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	padding: var(--space-lg) var(--space-xl);
	border-radius: var(--radius-xl);
	background: var(--color-bg-canvas);
}

.p-paint-service__step-head {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--space-lg);
}

/* c-step-number（番号の丸。部品の表にないので、ここで見た目を付ける） */
.p-paint-service__step-number {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-bg-brand);
	font: var(--text-paint-h4); /* Paint/PC/H4（Bold 20）。Figma も 2026-10-03 に H4 にそろえた */
	color: var(--color-text-on-brand);
}

.p-paint-service__step-name {
	width: 220px;
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-paint-service__step-text {
	flex: 1;
	min-width: 0;
	font: var(--text-paint-body);
	color: var(--color-text-secondary);
}

.p-paint-service__note {
	font: var(--text-paint-caption); /* 工程との間はセクションの間（Figma 56） */
	color: var(--color-text-secondary);
}

/* ---------- 施工事例（p-paint-service__works） ---------- */
.p-paint-service__works {
	background: var(--color-bg-canvas);
}

/* カードの幅は3列のときのまま。1〜2件（その工事の施工事例だけを出す）のときは中央に並べる。高さは行の中でそろう */
.p-paint-service__works-row {
	--works-cols: 3;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	justify-content: center;
}

.p-paint-service__works-item {
	display: flex;
	flex: 0 0 calc((100% - var(--space-lg) * (var(--works-cols) - 1)) / var(--works-cols));
	min-width: 0;
}

.p-paint-service__works-item > * {
	flex: 1;
	min-width: 0;
}

.p-paint-service__works-button {
	display: flex;
	justify-content: center;
}

/* ---------- 案内のカード（p-paint-service__guide） ---------- */
.p-paint-service__guide {
	padding-block: var(--space-5xl); /* PC 80・SP 56（Figma と同じ） */
	background: var(--color-bg-muted);
}

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

.p-paint-service__guide-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-lg); /* Figma は 0（文とボタンが接する）。詰まりすぎないようにあけた */
	padding: var(--space-xl);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-canvas);
}

.p-paint-service__guide-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-inner);
}

.p-paint-service__guide-title {
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-paint-service__guide-text {
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

.p-paint-service__guide-button {
	display: flex;
}

/* ---------- よくある質問（p-paint-service__faq） ---------- */
.p-paint-service__faq {
	background: var(--color-bg-canvas);
}

.p-paint-service__faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* ==========================================================================
   中間の幅（768〜1023px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	.p-paint-service__intro-inner {
		flex-direction: column;
		gap: var(--space-2xl);
	}

	.p-paint-service__check {
		flex-basis: auto;
		width: 100%;
		margin-left: 0;
	}

	.p-paint-service__step-name {
		width: 180px;
	}

	.p-paint-service__works-row {
		--works-cols: 2;
	}

	.p-paint-service__guide-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   SP（767px 以下。Figma 244:28078 ほか）
   ========================================================================== */
@media (max-width: 767px) {
	.p-paint-service__intro-inner {
		flex-direction: column;
		gap: var(--space-2xl); /* Figma の 32（SP の --space-2xl） */
		padding-block: var(--space-4xl) var(--space-paint-section);
	}

	.p-paint-service__body {
		gap: var(--space-lg);
		max-width: none;
	}

	.p-paint-service__check {
		flex: none;
		width: 100%;
		gap: var(--space-md);
		margin-left: 0;
		padding: var(--space-xl) var(--space-lg);
	}

	.p-paint-service__check-item {
		align-items: flex-start;
	}

	/* 工程：「番号＋工程名」の行の下に説明 */
	.p-paint-service__step {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: var(--space-md) var(--space-lg) var(--space-lg);
	}

	.p-paint-service__step-head {
		gap: var(--space-sm);
	}

	.p-paint-service__step-name {
		flex: 1;
		width: auto;
	}

	.p-paint-service__works-row {
		--works-cols: 1;
		gap: var(--space-md);
	}

	.p-paint-service__guide-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.p-paint-service__guide-card {
		padding: var(--space-xl);
	}

	.p-paint-service__guide-body {
		gap: var(--space-sm);
	}
}