/* ==========================================================================
   塗装・防水のお問い合わせ /paint/contact/・/paint/contact/thanks/（page-paint-contact.php）
   Figma 04 PC 175:10456（入力 179:12309・確認 175:10614・完了 175:10668・支払シミュレーターから 175:10457）／ SP 244:24894
   - フォームのマークアップは inc/forms/render.php（c-form-field・c-checkbox・c-form-errors）。ここではお問い合わせの中だけで整える
     （.p-contact の中に限る。塗装・防水のほかのフォームでも使うなら component に移す）
   - 選択肢の見た目（c-chip-paint）・ページ見出し・手順の表示・ボタン（完了のページ）は共通の部品（担当 P-A）
   - Figma のレイヤー名が重なっているもの（p-contact__body が3か所）は、役割で名前を分けた：
     入力の2列 = p-contact__body、横の案内 = p-contact__side-item、確認の表 = p-contact__table
   ========================================================================== */

.p-contact {
	--contact-gutter: max(40px, calc((100% - 1200px) / 2)); /* 中身 1200・左右 120（1440 のとき） */
	--contact-radius-card: var(--radius-paint-card); /* SP は --radius-xl */
	--contact-radius-box: var(--radius-xl); /* SP は --radius-paint-box */
	/* アイコン（Lucide。CSS の mask で文字の色に塗る） */
	--contact-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--contact-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
	--contact-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' x2='12' y1='3' y2='15'/%3E%3C/svg%3E");
	--contact-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

	padding-inline: var(--contact-gutter);
	background: var(--color-bg-muted);
	color: var(--color-text-primary);
}

/* ---------- 手順（入力・確認・完了） ---------- */
.p-contact__steps {
	display: flex;
	justify-content: center;
	padding-bottom: var(--space-3xl); /* 48 */
}

.p-contact__steps > * {
	max-width: 100%;
}

/* ---------- 入力：左にフォーム、右に案内 ---------- */
.p-contact__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--space-lg);
	align-items: start;
	max-width: 1200px;
	margin-inline: auto;
	padding-bottom: var(--space-paint-section);
}

.p-contact__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	min-width: 0;
	padding: var(--space-3xl);
	border-radius: var(--contact-radius-card);
	background: var(--color-bg-canvas);
}

/* ---------- 入力エラーのまとめ ---------- */
.p-contact .c-form-errors {
	padding: 20px var(--space-lg);
	border: 2px solid var(--color-action-cta);
	border-radius: var(--contact-radius-box);
	background: var(--color-bg-canvas);
	color: var(--color-text-cta);
}

.p-contact .c-form-errors__title {
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
}

.p-contact .c-form-errors__list {
	margin-top: var(--space-xs);
	padding-left: 1.2em;
	font: var(--text-paint-body-s);
	list-style: disc;
}

.p-contact .c-form-errors__item a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- 支払シミュレーター・かんたん見積もりの条件の箱（truss_form_context_boxes()） ---------- */
.p-contact__sim {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg) var(--space-paint-card);
	border-radius: var(--contact-radius-box);
	background: var(--color-bg-muted);
}

.p-contact__sim-head {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
}

.p-contact__sim-title {
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-contact__sim-rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px var(--space-xl);
	margin: 0;
}

/* 支払シミュレーターの条件は 4行×2列（左：金額・頭金・借入・回数／右：金利・月々・総額・頭金を含めた合計） */
.p-contact__sim--payment .p-contact__sim-rows {
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
}

.p-contact__sim-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	min-width: 0;
}

.p-contact__sim-row dt {
	flex: 0 0 168px;
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

.p-contact__sim-row dd {
	min-width: 0;
	margin: 0;
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
}

/* 金額・回数は途中で折り返さない */
.p-contact__sim--payment .p-contact__sim-row dd {
	white-space: nowrap;
}

/* 箱の下に小さく出す文（かんたん見積もりのフィルターが sub を返したとき） */
.p-contact__sim-sub {
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

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

/* 確認の画面は淡い地の上なので、箱を白くする */
.p-contact__confirm .p-contact__sim {
	background: var(--color-bg-canvas);
}

/* 「条件を変える」 */
.p-contact .c-back-link {
	display: inline-flex;
	flex-shrink: 0;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px;
	font: var(--text-paint-label-m);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	text-decoration: none;
}

.p-contact .c-back-link::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	mask: var(--contact-icon-arrow-left) center / contain no-repeat;
}

.p-contact .c-back-link:hover {
	text-decoration: underline;
}

/* ---------- 項目（c-form-field） ---------- */
.p-contact .c-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.p-contact .c-form-field__label-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 0;
}

.p-contact .c-form-field__label {
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-contact .c-form-field__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--radius-full);
	font: var(--text-paint-label-m);
	white-space: nowrap;
}

.p-contact .c-form-field__badge--required {
	background: var(--color-action-cta);
	color: var(--color-text-on-brand);
}

.p-contact .c-form-field__badge--optional {
	background: var(--neutral-100);
	color: var(--color-text-secondary);
}

.p-contact .c-form-field__badge--only {
	background: var(--blue-100);
	color: var(--color-text-brand);
}

/* 選択肢の項目（fieldset）。legend を float にして、補足（「複数選べます」）を見出しの右に並べる */
.p-contact .c-form-field--choices {
	display: block;
}

.p-contact .c-form-field--choices > .c-form-field__label-row {
	float: left;
	margin-right: 10px;
}

.p-contact .c-form-field--choices > .c-form-field__note {
	display: flex;
	align-items: center;
	min-height: 25px;
}

.p-contact .c-form-field__choices {
	display: flex;
	clear: both;
	flex-wrap: wrap;
	gap: var(--space-xs);
	padding-top: var(--space-sm);
}

.p-contact .c-form-field--choices > .c-form-field__error {
	margin-top: var(--space-xs);
}

/* 入力欄 */
.p-contact .c-form-field__field {
	display: block;
	width: 100%;
	margin: 0;
	padding: var(--space-paint-control) 20px;
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	background: var(--color-bg-canvas);
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
	transition: border-color 0.2s;
}

.p-contact .c-form-field__field::placeholder {
	color: var(--color-text-tertiary);
	opacity: 1;
}

.p-contact .c-form-field__field:hover,
.p-contact .c-form-field__field:focus {
	border-color: var(--color-border-brand);
}

.p-contact textarea.c-form-field__field {
	height: 150px;
	min-height: 120px;
	resize: vertical;
}

.p-contact .c-form-field.is-error .c-form-field__field {
	border-color: var(--color-action-cta);
}

.p-contact .c-form-field__note,
.p-contact .c-form-field__meta-note {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-contact .c-form-field__error {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	font: var(--text-paint-caption-bold);
	color: var(--color-text-cta);
}

.p-contact .c-form-field__error-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border-radius: var(--radius-full);
	background: var(--color-action-cta);
	font-size: var(--fs-paint-mark-s);
	line-height: 1;
	color: var(--color-text-on-brand);
}

/* 写真の添付：「写真を選ぶ」の箱にファイルの入力欄を透明にして重ねる（選んだ写真の名前は paint-contact.js が下に出す） */
.p-contact .c-form-field--file {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.p-contact .c-form-field--file > .c-form-field__label-row {
	grid-row: 1;
	margin-bottom: var(--space-sm);
}

.p-contact .c-form-field__files {
	display: flex;
	grid-row: 2;
	flex-direction: column;
	gap: var(--space-2xs);
	margin: 0 0 var(--space-xs);
	padding: 0;
	list-style: none;
	font: var(--text-paint-body-s);
}

.p-contact .c-form-field__file {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}

.p-contact .c-form-field__file-remove {
	display: inline-flex;
	gap: var(--space-2xs);
	align-items: center;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-contact .c-form-field__file-input {
	z-index: 1;
	grid-row: 3;
	grid-column: 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.p-contact .c-form-field__meta {
	display: flex;
	grid-row: 3;
	grid-column: 1;
	gap: var(--space-sm);
	align-items: center;
	padding: var(--space-paint-control) 20px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-muted);
	font: var(--text-paint-label-m);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	transition: background-color 0.2s;
}

.p-contact .c-form-field__meta::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background: currentColor;
	mask: var(--contact-icon-upload) center / contain no-repeat;
}

.p-contact .c-form-field--file:hover .c-form-field__meta {
	background: var(--blue-100);
}

.p-contact .c-form-field__file-input:focus-visible + .c-form-field__meta {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-contact .c-form-field__chosen {
	grid-row: 4;
	margin-top: var(--space-xs);
	font: var(--text-paint-caption);
	color: var(--color-text-primary);
}

.p-contact .c-form-field--file > .c-form-field__note {
	grid-row: 5;
	margin-top: var(--space-sm);
}

.p-contact .c-form-field--file > .c-form-field__error {
	grid-row: 6;
	margin-top: var(--space-xs);
}

/* ---------- プライバシーポリシーの同意 ---------- */
/* 同意の文と「必須」の札は同じ行に（幅が足りないときは文の方を折り返す。Figma 244:24895）。注記・エラーはその下 */
.p-contact .c-form-field--agree {
	display: grid;
	grid-template-columns: minmax(0, max-content) max-content;
	gap: 10px;
	align-items: center;
	justify-content: start;
}

.p-contact .c-form-field--agree > .c-form-field__note,
.p-contact .c-form-field--agree > .c-form-field__error {
	grid-column: 1 / -1;
	contain: inline-size; /* エラーの文の幅で列が広がり、「必須」の札が横に長い赤い帯になるのを防ぐ（2026-10-02 監視役） */
}

.p-contact .c-checkbox {
	position: relative;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

.p-contact .c-checkbox__input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	opacity: 0;
	transform: translateY(-50%);
	cursor: pointer;
}

.p-contact .c-checkbox__box {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--color-text-tertiary); /* 線のコントラスト 3:1 以上 */
	border-radius: var(--radius-paint-check);
	background: var(--color-bg-canvas);
}

.p-contact .c-checkbox__input:checked + .c-checkbox__box {
	border-color: var(--color-bg-brand);
	background: var(--color-bg-brand);
}

.p-contact .c-checkbox__input:checked + .c-checkbox__box::after {
	content: "";
	width: 14px;
	height: 14px;
	background: var(--color-text-on-brand);
	mask: var(--contact-icon-check) center / contain no-repeat;
}

.p-contact .c-checkbox__input:focus-visible + .c-checkbox__box {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-contact .c-form-field.is-error .c-checkbox__box {
	border-color: var(--color-action-cta);
}

.p-contact .c-checkbox__label {
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

/* 「プライバシーポリシー」は途中で折り返さない */
.p-contact .c-checkbox__label a {
	white-space: nowrap;
}

/* 幅 360px 未満：札と同じ行に入るように、同意の文を Body-S に */
@media (max-width: 359px) {
	.p-contact .c-checkbox__label {
		font: var(--text-paint-body-s);
	}
}

.p-contact .c-checkbox__label a {
	color: var(--color-text-brand);
	text-decoration: underline;
}

/* ---------- ボタン（truss_form_buttons() の c-button-paint。CTA は赤・右の矢印、戻るは白地に青い線・左の矢印） ---------- */
.p-contact__submit,
.p-contact__actions {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
}

/* 確認：HTML は「送信する」が先（Tab の順・SP で上）。PC は逆に並べて「入力画面に戻る」を左に */
.p-contact__actions {
	flex-direction: row-reverse;
}

.p-contact__submit .c-button-paint,
.p-contact__actions .c-button-paint {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: var(--space-paint-control) var(--space-lg) var(--space-paint-control) var(--space-paint-button);
	border: 2px solid var(--color-action-cta);
	border-radius: var(--radius-full);
	background: var(--color-action-cta);
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-on-brand);
	transition: background-color 0.2s, border-color 0.2s;
}

.p-contact__submit .c-button-paint {
	width: 100%;
}

.p-contact__actions .c-button-paint {
	width: 320px;
	max-width: 100%;
}

.p-contact__submit .c-button-paint::after,
.p-contact__actions .c-button-paint::after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: currentColor;
	mask: var(--contact-icon-arrow-right) center / contain no-repeat;
}

.p-contact__submit .c-button-paint:hover,
.p-contact__actions .c-button-paint:hover {
	border-color: var(--color-action-cta-hover);
	background: var(--color-action-cta-hover);
}

.p-contact__actions .c-button-paint--back {
	padding: var(--space-paint-control) var(--space-paint-button) var(--space-paint-control) var(--space-lg);
	border-color: var(--color-border-brand);
	background: var(--color-bg-canvas);
	color: var(--color-text-brand);
}

.p-contact__actions .c-button-paint--back:hover {
	border-color: var(--color-border-brand);
	background: var(--color-bg-muted);
}

.p-contact__actions .c-button-paint--back::after {
	content: none;
}

.p-contact__actions .c-button-paint--back::before {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: currentColor;
	mask: var(--contact-icon-arrow-left) center / contain no-repeat;
}

.p-contact__submit .c-button-paint:disabled,
.p-contact__actions .c-button-paint:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* ---------- 入力の横の案内（電話・公式LINE・写真で無料診断） ---------- */
.p-contact__side {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.p-contact__side-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-lg);
	border-radius: var(--contact-radius-box);
	background: var(--color-bg-canvas);
}

.p-contact__meta {
	display: flex;
	gap: 10px;
	align-items: center;
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-contact__meta svg {
	flex-shrink: 0;
	color: var(--color-text-brand);
}

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

.p-contact__tel,
.p-contact__side-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.p-contact__tel:hover,
.p-contact__side-link:hover {
	color: var(--color-text-brand);
}

/* 公式LINE・写真で無料診断：押せる高さを 44px に（見た目と行の高さは変えない） */
.p-contact__side-link {
	padding-block: 11px;
	margin-block: -11px;
}

/* ---------- 確認 ---------- */
.p-contact__confirm {
	max-width: 1000px;
	margin-inline: auto;
	padding-bottom: var(--space-paint-section);
}

.p-contact__confirm-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.p-contact__lead {
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-contact__table,
.p-contact__receipt {
	margin: 0;
	padding: var(--space-xs) var(--space-2xl);
	border-radius: var(--contact-radius-card);
	background: var(--color-bg-canvas);
	text-align: left;
}

.p-contact__row {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border-default);
}

.p-contact__row:last-child {
	border-bottom: 0;
}

.p-contact__row-label {
	flex: 0 0 200px;
	font: var(--text-paint-body-bold);
	color: var(--color-text-secondary);
}

.p-contact__row-value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

/* ---------- 完了 ---------- */
.p-contact__done {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: center;
	padding: var(--space-lg) 0 var(--space-paint-section);
	text-align: center;
}

.p-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: var(--radius-full);
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

/* アイコンの関数（truss_icon()）がないときのチェック */
.p-contact__icon:empty::before {
	content: "";
	width: 40px;
	height: 40px;
	background: currentColor;
	mask: var(--contact-icon-check) center / contain no-repeat;
}

.p-contact__icon svg {
	width: 40px;
	height: 40px;
}

.p-contact__done-title {
	font: var(--text-paint-h2);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-contact__done-text {
	max-width: 800px;
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

.p-contact__receipt {
	width: 100%;
	max-width: 800px;
}

/* 完了：HTML は「施工事例を見る」が先（Tab の順・SP で上）。PC は逆に並べて「塗装・防水のトップへ」を左に */
.p-contact__buttons {
	display: flex;
	flex-direction: row-reverse;
	gap: var(--space-md);
	justify-content: center;
	padding-top: var(--space-md);
}

.p-contact__buttons > * {
	width: 320px;
	max-width: 100%;
}

/* 条件の箱：2列に入らない幅（箱の中が約550px 未満）は1列 */
@media (max-width: 1199px) {
	.p-contact__sim-rows,
	.p-contact__sim--payment .p-contact__sim-rows {
		grid-template-rows: none;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
	}
}

/* ==========================================================================
   タブレット（案内をフォームの下へ）
   ========================================================================== */
@media (max-width: 1023px) {
	.p-contact__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   SP（Figma 04 SP 244:24895 ほか。幅 375・左右 20）
   ========================================================================== */
@media (max-width: 767px) {
	.p-contact {
		--contact-gutter: 20px;
		--contact-radius-card: var(--radius-xl);
		--contact-radius-box: var(--radius-paint-box);
	}

	.p-contact__steps {
		display: block;
		padding-bottom: var(--space-2xl); /* SP は 32 */
	}

	.p-contact__body {
		gap: var(--space-lg);
	}

	.p-contact__form {
		gap: var(--space-paint-card);
		padding: var(--space-xl) 18px; /* 24・18 */
	}

	/* 条件の箱：1列。「条件を変える」は箱の下 */
	.p-contact__sim {
		gap: var(--space-sm);
		padding: var(--space-lg) var(--space-md);
	}

	.p-contact__sim-head {
		display: contents;
	}

	.p-contact__sim .c-back-link {
		order: 1;
		align-self: flex-start;
	}

	/* 項目名と値は横に並べ、値が入らないときは値を次の行（右寄せ）へ */
	.p-contact__sim-row {
		flex-wrap: wrap;
		gap: 0 var(--space-sm);
		justify-content: space-between;
	}

	.p-contact__sim-row dt {
		flex: 0 1 auto;
	}

	.p-contact__sim-row dd {
		margin-left: auto;
		text-align: right;
	}

	.p-contact .c-form-field__field {
		padding: var(--space-paint-inner) var(--space-md);
	}

	.p-contact textarea.c-form-field__field {
		height: 168px;
	}

	.p-contact .c-form-field__meta {
		padding: var(--space-paint-inner) var(--space-md);
	}

	/* 「写真を選ぶ」の下の行に（JPG・PNG／1枚10MBまで）（Figma 244:24895。paint-contact.js が文を分ける） */
	.p-contact .c-form-field__meta-sub {
		display: block;
	}

	.p-contact__side-item {
		padding: var(--space-lg);
	}

	/* 確認：項目名を上・値を下に。ボタンは縦に積んで幅いっぱい（「送信する」が上） */
	.p-contact__table,
	.p-contact__receipt {
		padding: var(--space-2xs) var(--space-lg);
	}

	.p-contact__row {
		flex-direction: column;
		gap: var(--space-2xs);
		padding: var(--space-md) 0;
	}

	.p-contact__row-label {
		flex-basis: auto;
	}

	.p-contact__actions {
		flex-direction: column; /* HTML の順のまま「送信する」が上 */
		gap: var(--space-sm);
	}

	.p-contact__actions .c-button-paint {
		width: 100%;
	}

	/* 完了：ボタンは縦に積む（「施工事例を見る」が上） */
	.p-contact__done {
		gap: var(--space-lg);
		padding-top: var(--space-xs);
	}

	.p-contact__icon {
		width: 64px;
		height: 64px;
	}

	.p-contact__icon svg,
	.p-contact__icon:empty::before {
		width: 32px;
		height: 32px;
	}

	.p-contact__buttons {
		flex-direction: column; /* HTML の順のまま「施工事例を見る」が上 */
		gap: var(--space-sm);
		width: 100%;
		padding-top: var(--space-xs);
	}

	.p-contact__buttons > * {
		width: 100%;
	}
}