/* ==========================================================================
   塗装・防水 トップ /paint/（page-paint.php・template-parts/paint/top-*.php）
   Figma 04 PC 178:8310・04 SP 242:6133（案B「やさしい住まいの相談窓口」）
   - 色・文字はトークン（--color-* / --text-paint-*）。余白・角丸で Spacing・Radius のトークンにない値は Figma の値を px で書く
   - 地の色は muted と白の交互（ヒーロー muted → ツール 白 → 劣化 muted → サービス 白 → 料金 muted → 施工事例 白 → 流れ muted → 声 白 → 資格 muted → FAQ 白 → エリア muted）
   - 部品（c-heading-paint・c-button-paint・c-icon-circle・c-faq-item-paint・c-works-card-paint）の見た目は P-A の component-*.css。
     ここでは置き場所（幅いっぱいにする・SP で大きさを変える）だけを決める
   - 中間の幅（768〜1023px）は 3列のものを 2列にする
   ========================================================================== */

/* ---------- 共通（トップとサービスのページ） ---------- */
/* セクションの余白は tokens.css の --space-paint-section（上下 112／SP 56）・--space-paint-heading（見出しから中身 56／SP 28）。
   浮かせたい箱の影は --shadow-paint-float（Figma の Shadow/Paint-Float） */

/* セクションの中身：見出し → 中身（縦に積む） */
.p-paint-b-section__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-heading);
	padding-block: var(--space-paint-section);
}

/* アイコンの丸の入れ物（大きさは部品の size・size_sp で決める） */
.p-paint-b-hero__point-icon,
.p-paint-b-hero__badge-icon,
.p-paint-b-worry__icon,
.p-paint-b-tools__icon,
.p-paint-b-service__icon,
.p-paint-b-flow__icon,
.p-paint-b-voice__icon,
.p-paint-b-trust__icon,
.p-paint-b-area__icon {
	display: inline-flex;
	flex: none;
}

/* ---------- ヒーロー（p-paint-b-hero） ---------- */
.p-paint-b-hero {
	background: var(--color-bg-muted);
}

.p-paint-b-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl); /* 64 */
	padding-block: var(--space-paint-wide) var(--space-paint-intro); /* Figma の値 */
}

.p-paint-b-hero__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-2xl); /* 40 */
	align-items: center;
}

.p-paint-b-hero__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl); /* 32 */
	min-width: 0;
}

.p-paint-b-hero__title {
	font: var(--text-paint-h1);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-paint-b-hero__lead {
	font: var(--text-paint-lead); /* Figma は 18px の直接の値。近い Paint/PC/Lead（17）にした */
	color: var(--color-text-secondary);
}

.p-paint-b-hero__body-row--buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.p-paint-b-hero__body-row--points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-lg);
}

.p-paint-b-hero__point {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
}

.p-paint-b-hero__visual {
	position: relative;
	width: 100%;
	aspect-ratio: 580 / 520;
}

.p-paint-b-hero__photo {
	position: absolute;
	top: 0;
	left: calc(40 / 580 * 100%);
	width: calc(540 / 580 * 100%);
	height: calc(480 / 520 * 100%);
	border-radius: var(--radius-paint-surface); /* 大きい面・写真の角（paint-b.md） */
	overflow: hidden;
}

.p-paint-b-hero__photo img,
.p-paint-b-hero__photo picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-paint-b-hero__badge {
	position: absolute;
	top: calc(404 / 520 * 100%);
	left: 0;
	display: flex;
	align-items: center;
	gap: var(--space-paint-inner);
	padding: 18px 28px 18px 18px;
	border-radius: var(--radius-xl);
	background: var(--color-bg-canvas);
	box-shadow: var(--shadow-paint-float);
}

.p-paint-b-hero__badge-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.p-paint-b-hero__badge-sub {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-paint-b-hero__badge-main {
	font: var(--text-paint-h4);
	color: var(--color-text-brand);
}

/* ---------- お悩みから選ぶ（p-paint-b-worry） ---------- */
.p-paint-b-worry {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-2xl) var(--space-3xl) var(--space-3xl); /* SP は下の @media で上書き */
	border-radius: var(--radius-paint-panel); /* パネル・帯の角（paint-b.md） */
	background: var(--color-bg-canvas);
	box-shadow: var(--shadow-paint-float);
}

.p-paint-b-worry__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-xs) 20px;
}

.p-paint-b-worry__title {
	font: var(--text-paint-h3); /* Figma は 28px の直接の値。近い Paint/PC/H3（24）にした */
	color: var(--color-text-primary);
}

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

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

.p-paint-b-worry__cell {
	display: flex;
}

.p-paint-b-worry__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
	padding: 20px;
	border-radius: var(--radius-xl);
	background: var(--color-bg-muted);
	color: var(--color-text-primary);
	text-decoration: none;
	transition: box-shadow 0.2s;
}

.p-paint-b-worry__item:hover {
	box-shadow: inset 0 0 0 2px var(--color-border-brand);
}

.p-paint-b-worry__item-group {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
}

.p-paint-b-worry__item-title {
	font: var(--text-paint-label-l);
	color: var(--color-text-primary);
}

.p-paint-b-worry__item-link {
	font: var(--text-paint-caption);
	color: var(--color-text-brand);
}

/* 折り返すのは <wbr>（文節の切れ目。top-hero.php）と <br> の位置だけ（「支払シミュレータ／ーへ」のような単語の途中の改行を防ぐ） */
.p-paint-b-worry__item-title,
.p-paint-b-worry__item-link {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.p-paint-b-worry__chevron {
	display: inline-flex;
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--color-text-brand);
}

.p-paint-b-worry__chevron svg {
	width: 100%;
	height: 100%;
}

/* ---------- 検討中の方へ（p-paint-b-tools） ---------- */
.p-paint-b-tools {
	background: var(--color-bg-canvas);
}

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

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

.p-paint-b-tools__item-group {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-md);
}

.p-paint-b-tools__item-group-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.p-paint-b-tools__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px var(--space-paint-inner) 6px var(--space-sm);
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-paint-b-tools__time-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.p-paint-b-tools__time-icon svg {
	width: 100%;
	height: 100%;
}

.p-paint-b-tools__name {
	font: var(--text-paint-h4); /* Figma は 22px の直接の値。カードの題と同じ Paint/PC/H4（20）にした */
	color: var(--color-text-primary);
}

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

/* ---------- 劣化のサイン（p-paint-b-check） ---------- */
.p-paint-b-check {
	background: var(--color-bg-muted);
}

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

/* 症状と説明は、<br> と <wbr>（{wbr}）の所だけで折り返す（top-check.php。320px で「かもしれませ／ん。」と1字だけ落ちないように。2026-10-05） */
.p-paint-b-check .c-card-paint__title,
.p-paint-b-check .c-card-paint__text {
	word-break: keep-all;
}

.p-paint-b-check__banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding: var(--space-paint-panel) var(--space-3xl); /* SP は下の @media で上書き */
	border-radius: var(--radius-paint-panel);
	background: var(--color-bg-brand);
}

.p-paint-b-check__banner-text {
	font: var(--text-paint-h4); /* Figma は 22px の直接の値。SP（Paint/SP/H4）と同じ Paint/PC/H4（20）にした */
	color: var(--color-text-on-brand);
}

.p-paint-b-check__banner-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* ---------- サービス（p-paint-b-service） ---------- */
.p-paint-b-service {
	background: var(--color-bg-canvas);
}

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

.p-paint-b-service__item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-muted);
}

.p-paint-b-service__photo {
	height: 240px;
}

.p-paint-b-service__photo picture,
.p-paint-b-service__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-paint-b-service__item-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-paint-card) var(--space-xl) var(--space-xs);
}

.p-paint-b-service__item-head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.p-paint-b-service__name {
	font: var(--text-paint-h3);
	color: var(--color-text-primary);
}

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

.p-paint-b-service__item-row {
	padding: 20px var(--space-xl) var(--space-xl);
}

.p-paint-b-service__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.p-paint-b-service__group-title {
	font: var(--text-paint-h4); /* Figma は 22px の直接の値。近い Paint/PC/H4（20）にした */
	color: var(--color-text-primary);
}

.p-paint-b-service__group-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
	width: 100%;
}

.p-paint-b-other__item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	height: 100%;
	padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
}

.p-paint-b-other__photo {
	flex: none;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 50%;
}

.p-paint-b-other__photo picture,
.p-paint-b-other__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-paint-b-other__item-group {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.p-paint-b-other__name {
	font: var(--text-paint-label-l);
	color: var(--color-text-primary);
}

.p-paint-b-other__text {
	font: var(--text-paint-body-s); /* Figma は 15px の直接の値。近い Paint/PC/Body-S（16）にした */
	color: var(--color-text-secondary);
}

/* ---------- 料金の目安（p-paint-b-price） ---------- */
.p-paint-b-price {
	background: var(--color-bg-muted);
}

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

.p-paint-b-price__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-paint-panel) var(--space-paint-panel) var(--space-paint-card);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-canvas);
}

.p-paint-b-price__item.is-popular {
	box-shadow: inset 0 0 0 3px var(--color-border-brand); /* 人気のカードの青い枠（Figma 3px） */
}

.p-paint-b-price__item-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.p-paint-b-price__name {
	font: var(--text-paint-h3);
	color: var(--color-text-primary);
}

.p-paint-b-price__badge {
	padding: var(--space-2xs) var(--space-paint-inner);
	border-radius: var(--radius-full);
	background: var(--color-bg-brand);
	font: var(--text-paint-caption-bold); /* Paint/PC/Caption-Bold（Bold 14/170%）。Figma も 2026-10-03 にそろえた */
	color: var(--color-text-on-brand);
}

.p-paint-b-price__unit {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.p-paint-b-price__unit-label,
.p-paint-b-price__per,
.p-paint-b-price__list-label {
	font: var(--text-paint-body-s); /* Figma は 15px の直接の値。近い Paint/PC/Body-S（16）にした */
	color: var(--color-text-secondary);
}

.p-paint-b-price__list-label {
	text-wrap: balance; /* 折り返す幅で「総額の／目安」と2字だけ落ちないように（「外壁塗装の／総額の目安」。2026-10-05） */
}

.p-paint-b-price__unit-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.p-paint-b-price__number {
	font: var(--text-paint-number-l);
	color: var(--color-text-brand);
}

.p-paint-b-price__list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-paint-inner);
	border-top: 1px solid var(--color-border-default);
}

.p-paint-b-price__list-value {
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
	white-space: nowrap;
}

.p-paint-b-price__note {
	display: flex;
	flex-direction: column;
	max-width: 720px; /* 本文の行は 720px 以内 */
	font: var(--text-paint-body-s); /* Figma は 15px の直接の値。近い Paint/PC/Body-S（16）にした */
	color: var(--color-text-secondary);
}

.p-paint-b-price__buttons,
.p-paint-b-faq__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

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

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

.p-paint-b-works__item {
	display: flex;
}

.p-paint-b-works__item > * {
	flex: 1;
	min-width: 0;
}

.p-paint-b-works__button,
.p-paint-b-flow__button {
	display: flex;
	justify-content: center;
}

/* ---------- 工事の流れ（p-paint-b-flow） ---------- */
.p-paint-b-flow {
	background: var(--color-bg-muted);
}

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

.p-paint-b-flow__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-inner);
	padding: var(--space-paint-card) var(--space-paint-card) var(--space-xl);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-canvas);
}

.p-paint-b-flow__item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.p-paint-b-flow__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-b-flow__title {
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

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

/* ---------- お客様の声（p-paint-b-voice） ---------- */
.p-paint-b-voice {
	background: var(--color-bg-canvas);
}

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

.p-paint-b-voice__cell {
	display: flex;
}

.p-paint-b-voice__item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.p-paint-b-voice__bubble {
	display: flex;
	flex: 1; /* 横に並ぶ吹き出しの高さをそろえる */
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-xl);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-muted);
}

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

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

.p-paint-b-voice__tail {
	display: block;
	width: 24px;
	height: 12px;
	margin-left: 50px; /* Figma：吹き出しの左から 48＋尾の余白 */
}

.p-paint-b-voice__person {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) 0 0 var(--space-md);
}

.p-paint-b-voice__person-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

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

.p-paint-b-voice__work {
	font: var(--text-paint-caption);
	color: var(--color-text-brand);
}

/* ---------- 資格・許可と取り扱いメーカー（p-paint-b-trust） ---------- */
.p-paint-b-trust {
	background: var(--color-bg-muted);
}

.p-paint-b-trust__row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-md);
}

.p-paint-b-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-paint-card) var(--space-md);
	border-radius: var(--radius-xl);
	background: var(--color-bg-canvas);
	text-align: center;
}

.p-paint-b-trust__item-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.p-paint-b-trust__name {
	font: var(--text-paint-label-l);
	color: var(--color-text-primary);
}

.p-paint-b-trust__number {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-paint-b-trust__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

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

.p-paint-b-trust__makers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md) var(--space-paint-wide);
	padding: 20px var(--space-paint-wide);
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
}

.p-paint-b-trust__logo {
	flex: none;
}

.p-paint-b-trust__logo img {
	display: block;
	max-width: none; /* 幅の決まっていない flex の中で、% の max-width だと幅が 0 になるため */
	object-fit: contain;
}

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

.p-paint-b-faq__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

/* ---------- 対応エリア（p-paint-b-area） ---------- */
.p-paint-b-area {
	background: var(--color-bg-muted);
}

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

.p-paint-b-area__item {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: var(--space-paint-card) var(--space-xl) var(--space-xl);
	border-radius: var(--radius-paint-card);
	background: var(--color-bg-canvas);
}

.p-paint-b-area__item-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.p-paint-b-area__region {
	font: var(--text-paint-h4); /* Figma は 22px の直接の値。近い Paint/PC/H4（20）にした */
	color: var(--color-text-primary);
}

.p-paint-b-area__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.p-paint-b-area__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* 押せる大きさ（SP の Figma 44px。PC の Figma は 40px） */
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-full);
	background: var(--color-bg-muted);
	font: var(--text-paint-body-s); /* Figma は 16px／行の高さ 1.5 の直接の値。Paint/PC/Body-S にした */
	color: var(--color-text-brand);
	text-decoration: none;
	transition: box-shadow 0.2s;
}

.p-paint-b-area__chip:hover {
	box-shadow: inset 0 0 0 1px var(--color-border-brand);
}

/* お悩みから選ぶ：768〜1199px は3列のまま、SP と同じ縦のタイル（右上に矢印）。横に並べると文字の幅が足りず、単語の途中で折り返す */
@media (min-width: 768px) and (max-width: 1199px) {
	.p-paint-b-worry__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: var(--space-md) var(--space-paint-inner);
	}

	.p-paint-b-worry__item-group {
		flex: none;
		width: 100%;
	}

	.p-paint-b-worry__chevron {
		position: absolute;
		top: 30px;
		right: 14px;
	}

	/* 劣化のサイン：カードの文の幅が足りず「す。」「ん。」だけが次の行に落ちるので、アイコンの丸を SP と同じ 48 にして余白を少し詰める（2026-10-02 監視役） */
	.p-paint-b-check .c-card-paint--horizontal {
		gap: var(--space-md);
		padding: var(--space-lg);
	}

	.p-paint-b-check .c-card-paint--horizontal .c-icon-circle {
		--icon-circle-size: 48px;
	}
}

/* 1024〜1199px：劣化のサインは2列（3列では文が4行になり1文字の折り返しが出る）。
   検討中の方へのカードの文は決めた改行を外して流す（「…（屋上）／の」と1文字だけ落ちる）。2026-10-02 監視役 */
@media (min-width: 1024px) and (max-width: 1199px) {
	.p-paint-b-check__group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-paint-b-tools__text br {
		display: none;
	}
}

/* ==========================================================================
   中間の幅（768〜1023px）：3列 → 2列、資格は 3列
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	/* ヒーロー：見出しが細かく折り返さないよう、文字と写真を縦に積む */
	.p-paint-b-hero__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xl);
	}

	.p-paint-b-hero__visual {
		width: min(100%, 580px);
		margin-inline: auto;
	}

	.p-paint-b-tools__group,
	.p-paint-b-check__group,
	.p-paint-b-service__row,
	.p-paint-b-service__group-row,
	.p-paint-b-price__row,
	.p-paint-b-works__group,
	.p-paint-b-flow__group,
	.p-paint-b-voice__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-paint-b-trust__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   SP（767px 以下。Figma 04 SP 242:6133）
   ========================================================================== */
@media (max-width: 767px) {
	/* 横に並ぶボタンは縦に積んで幅いっぱい（主のボタンが上） */
	.p-paint-b-hero__body-row--buttons,
	.p-paint-b-check__banner-row,
	.p-paint-b-price__buttons,
	.p-paint-b-faq__row {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	/* ヒーロー：文字 → ボタン → 写真 */
	.p-paint-b-hero__inner {
		gap: var(--space-2xl); /* Figma の 32（SP の --space-2xl） */
		padding-block: var(--space-xl) var(--space-paint-section);
	}

	.p-paint-b-hero__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md); /* Figma は 0（写真が要点の行に接する）。詰まりすぎないよう 16 あけた */
	}

	.p-paint-b-hero__body {
		gap: var(--space-xl); /* Figma の 24（SP の --space-xl） */
	}

	.p-paint-b-hero__body-row--points {
		gap: var(--space-xs) var(--space-md);
	}

	.p-paint-b-hero__visual {
		aspect-ratio: 335 / 318;
	}

	.p-paint-b-hero__photo {
		left: calc(16 / 335 * 100%);
		width: calc(319 / 335 * 100%);
		height: calc(284 / 318 * 100%);
		border-radius: var(--radius-paint-panel);
	}

	.p-paint-b-hero__badge {
		top: calc(230 / 318 * 100%);
	}

	/* お悩みから選ぶ：2列×3段のタイル（右上に矢印） */
	.p-paint-b-worry {
		gap: var(--space-md);
		padding: var(--space-lg) var(--space-sm) var(--space-md);
		border-radius: var(--radius-xl);
	}

	.p-paint-b-worry__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2xs);
		padding-inline: var(--space-2xs);
	}

	.p-paint-b-worry__group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-xs);
	}

	.p-paint-b-worry__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: var(--space-paint-inner) 10px;
	}

	.p-paint-b-worry__item-group {
		flex: none;
		width: 100%;
	}

	.p-paint-b-worry__chevron {
		position: absolute;
		top: 26px;
		right: 10px;
	}

	/* ツール：1列のカード */
	.p-paint-b-tools__group {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.p-paint-b-tools__item {
		padding: var(--space-xl);
	}

	.p-paint-b-tools__item-group {
		gap: var(--space-sm);
	}

	/* 劣化のサイン：1列（カードの見た目は c-card-paint） */
	.p-paint-b-check__group {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-sm);
	}

	.p-paint-b-check__banner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md); /* Figma は 0。詰まりすぎないよう 16 あけた */
		padding: var(--space-xl) var(--space-lg);
		border-radius: var(--radius-xl);
	}

	/* サービス */
	.p-paint-b-service__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.p-paint-b-service__photo {
		height: 200px;
	}

	.p-paint-b-service__item-body {
		gap: 10px;
		padding: var(--space-lg) var(--space-xl) var(--space-2xs);
	}

	.p-paint-b-service__item-row {
		padding: var(--space-md) var(--space-xl) var(--space-xl);
	}

	.p-paint-b-service__group {
		align-items: flex-start;
		gap: var(--space-md);
	}

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

	/* 料金の目安 */
	.p-paint-b-price__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.p-paint-b-price__item {
		padding: var(--space-xl) var(--space-xl) var(--space-lg);
	}

	/* 施工事例・工事の流れ・お客様の声：1列 */
	.p-paint-b-works__group {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.p-paint-b-flow__group {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-sm);
	}

	.p-paint-b-flow__item {
		gap: 10px;
		padding: var(--space-lg) var(--space-xl) var(--space-xl);
	}

	.p-paint-b-voice__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xl);
	}

	.p-paint-b-voice__bubble {
		gap: var(--space-sm);
		padding: var(--space-xl) var(--space-lg);
	}

	/* 資格・許可：アイコンが左・文字が右の1列の行。カードは全幅にそろえる（2026-10-05 ユーザー決定。もとは中身の幅） */
	.p-paint-b-trust__row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-sm);
	}

	.p-paint-b-trust__item {
		flex-direction: row;
		gap: var(--space-md);
		max-width: 100%;
		padding: var(--space-md) var(--space-lg);
		text-align: left;
	}

	.p-paint-b-trust__item-body {
		align-items: flex-start;
		gap: var(--space-2xs);
	}

	.p-paint-b-trust__group {
		width: 100%;
		gap: var(--space-sm);
	}

	.p-paint-b-trust__makers {
		gap: var(--space-lg) var(--space-paint-card);
		width: 100%;
		padding: var(--space-xl) var(--space-md);
		border-radius: var(--radius-paint-panel); /* SP は3段になり、丸い端だとロゴが縁に近づくので角丸 32（Figma 244:2786。2026-10-02 監視役） */
	}

	/* そのほかの工事のカードも、SP で文字が3〜4行になるので角丸 32（Figma 243:20072 ほか） */
	.p-paint-b-other__item {
		border-radius: var(--radius-paint-panel);
	}

	/* 対応エリア：1列。チップは高さ 44px */
	.p-paint-b-area__group {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-sm);
	}

	.p-paint-b-area__item {
		gap: var(--space-paint-inner);
		padding: var(--space-lg) var(--space-lg) var(--space-xl);
	}

	.p-paint-b-area__chips {
		gap: var(--space-xs);
	}
}

/* 幅 360px 未満（320px など）：2列では文字が入らないので、お悩みは1列の横長（アイコンが左・矢印が右） */
@media (max-width: 359px) {
	.p-paint-b-worry__group {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-paint-b-worry__item {
		flex-direction: row;
		align-items: center;
		gap: var(--space-sm);
		padding: var(--space-paint-inner) var(--space-sm);
	}

	.p-paint-b-worry__item-group {
		flex: 1;
		width: auto;
	}

	.p-paint-b-worry__chevron {
		position: static;
	}
}