/* ==========================================================================
   お問い合わせ（page-contact.php：入力・入力エラー・確認・完了）＋ 手順の表示（c-stepper）
   Figma: 77:2508 / 77:2726 / 77:2964 / 77:3105、SP 236:1811 / 236:2021 / 236:2248 / 236:2380
   - フォームの部品（c-form-field・c-chip・c-checkbox・c-form-errors）のマークアップは inc/forms/render.php。
     ここでは .p-contact の中だけに見た目を付ける（ほかのフォームと取り違えないように）
   ========================================================================== */

.p-contact__body,
.p-contact__confirm,
.p-contact__done,
.c-stepper {
	/* 小さいアイコン（マスクで文字の色にする） */
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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");
	--icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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");
	--icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E");
	--icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* ---------- 手順の表示（入力・確認・完了） ---------- */
.c-stepper {
	padding: 56px var(--space-md) var(--space-xs);
}

.c-stepper__list {
	display: flex;
	justify-content: center;
}

.c-stepper__row {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--color-text-tertiary);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

/* 段と段の間の線（前の段まで済んだら青） */
.c-stepper__row + .c-stepper__row::before {
	content: "";
	width: 120px;
	height: 2px;
	margin: 0 10px 0 20px; /* 前の文字から 20px・次の丸まで 20px（li の gap 10px を足して） */
	background: var(--color-border-default);
}

.c-stepper__row.is-current::before,
.c-stepper__row.is-done::before {
	background: var(--color-border-brand);
}

.c-stepper__num {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: var(--color-bg-subtle);
	color: var(--color-text-tertiary);
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
}

.c-stepper__label {
	white-space: nowrap;
}

.c-stepper__num .c-icon {
	width: 18px;
	height: 18px;
}

.c-stepper__row.is-current,
.c-stepper__row.is-done {
	color: var(--color-text-brand);
}

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

.c-stepper__row.is-done .c-stepper__num {
	background: var(--color-bg-muted);
	color: var(--color-text-brand);
}

@media (max-width: 767px) {
	.c-stepper {
		padding: 28px 20px 0;
	}

	/* SP: 1行に収める（線は 36px） */
	.c-stepper__row + .c-stepper__row::before {
		width: 36px;
		margin: 0 0 0 var(--space-xs);
	}
}

/* 320px 前後：線を短くして1行に収める */
@media (max-width: 359px) {
	.c-stepper__row {
		gap: 6px;
	}

	.c-stepper__row + .c-stepper__row::before {
		width: 16px;
		margin-left: 4px;
	}
}

/* ==========================================================================
   入力（フォーム ＋ 右の案内）
   ========================================================================== */
.p-contact__inner {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
	padding-block: var(--space-2xl) var(--space-6xl);
}

.p-contact__main {
	flex: 1;
	min-width: 0;
}

.p-contact__form:not(.p-contact__form--confirm) {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: var(--space-2xl) var(--space-3xl);
	border-radius: var(--radius-xl);
	background: var(--color-bg-subtle);
}

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

/* ---------- 1項目（c-form-field） ---------- */
.p-contact .c-form-field,
.p-contact__body .c-form-field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.p-contact__body .c-form-field > * + * {
	margin-top: 10px;
}

.p-contact__body .c-form-field__label-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
	margin: 0 0 10px;
	padding: 0;
	color: var(--color-text-primary);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.p-contact__body .c-form-field__label-row + * {
	margin-top: 0;
}

.p-contact__body .c-form-field__badge {
	display: inline-block;
	padding: 1px 6px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-canvas);
	color: var(--color-text-tertiary);
	font: var(--text-label-s); /* 13px（採用のフォームの札と同じ） */
	letter-spacing: var(--ls-label-s);
}

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

/* 入力欄 */
.p-contact__body .c-form-field__field {
	display: block;
	width: 100%;
	min-height: 62px;
	padding: 14px var(--space-md);
	border: 1px solid var(--color-border-strong);
	border-radius: 10px;
	background: var(--color-bg-canvas);
	color: var(--color-text-primary);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
}

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

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

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

.p-contact__body .c-form-field__field:focus-visible {
	border-color: var(--color-border-brand);
	border-radius: 10px;
	outline-offset: 2px;
}

.p-contact__body .c-form-field.is-error .c-form-field__field {
	border: 2px solid var(--color-action-cta);
	padding: 13px 15px; /* 枠が太くなるぶん、中の位置を変えない */
}

.p-contact__body .c-form-field__note,
.p-contact__body .c-form-field__meta {
	color: var(--color-text-secondary);
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

/* エラーの文 */
.p-contact__body .c-form-field__error {
	display: flex;
	gap: 6px;
	align-items: center;
	color: var(--color-text-cta);
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.p-contact__body .c-form-field__error-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	overflow: hidden;
	background: currentColor;
	font-size: 0;
	mask: var(--icon-alert) center / contain no-repeat;
}

/* 選択肢（ラジオ・チェックボックス。Figma c-form-field__chip） */
.p-contact__body .c-form-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.p-contact__body .c-chip {
	position: relative;
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px;
	padding: 0 18px 0 var(--space-md);
	border: 1px solid var(--color-border-strong);
	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);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.p-contact__body .c-chip:hover {
	border-color: var(--color-border-brand);
}

.p-contact__body .c-chip__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.p-contact__body .c-chip.is-checked,
.p-contact__body .c-chip:has(.c-chip__input:checked) {
	border-color: var(--color-border-brand);
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

.p-contact__body .c-chip.is-checked::before,
.p-contact__body .c-chip:has(.c-chip__input:checked)::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	mask: var(--icon-check) center / contain no-repeat;
}

.p-contact__body .c-chip:has(.c-chip__input:focus-visible) {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

/* 写真の添付（点線の箱。見えない input を箱に重ねる） */
.p-contact__body .c-form-field--file {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.p-contact__body .c-form-field--file > .c-form-field__label-row {
	grid-row: 1;
}

.p-contact__body .c-form-field__files {
	grid-row: 2;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font: var(--text-body-s);
}

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

.p-contact__body .c-form-field__file-remove {
	display: inline-flex;
	gap: var(--space-2xs);
	align-items: center;
	min-height: 44px;
	color: var(--color-text-secondary);
}

.p-contact__body .c-form-field__file-input,
.p-contact__body .c-form-field--file .c-form-field__meta {
	grid-row: 3;
	grid-column: 1;
	margin-top: 10px;
}

.p-contact__body .c-form-field__file-input {
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.p-contact__body .c-form-field--file .c-form-field__meta {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	min-height: 61px;
	padding: 18px 20px;
	border: 1.5px dashed var(--color-border-brand);
	border-radius: 12px;
	background: var(--color-bg-canvas);
	color: var(--color-text-brand);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

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

.p-contact__body .c-form-field__file-input:hover + .c-form-field__meta {
	background: var(--color-bg-muted);
}

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

.p-contact__body .c-form-field--file > .c-form-field__note,
.p-contact__body .c-form-field--file > .c-form-field__error {
	grid-row: 4;
}

.p-contact__body .c-form-field--file > .c-form-field__error {
	grid-row: 5;
}

/* 同意（Figma p-contact__row。チェックの箱 22px） */
.p-contact__body .c-form-field--agree {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.p-contact__body .c-form-field--agree > .c-form-field__badge {
	display: none; /* Figma は札なし（入力欄に aria-required を付けている） */
}

.p-contact__body .c-form-field--agree > .c-form-field__error {
	flex-basis: 100%;
}

.p-contact__body .c-checkbox {
	position: relative;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 44px;
	color: var(--color-text-primary);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	cursor: pointer;
}

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

.p-contact__body .c-checkbox__box {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--color-border-strong);
	border-radius: 6px;
	background: var(--color-bg-canvas);
	color: var(--color-text-on-brand);
}

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

.p-contact__body .c-checkbox__input:checked + .c-checkbox__box::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	mask: var(--icon-check) center / contain no-repeat;
}

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

.p-contact__body .is-error .c-checkbox__box {
	border: 2px solid var(--color-action-cta);
}

.p-contact__body .c-checkbox__label a {
	color: var(--color-text-brand);
	text-underline-offset: 3px;
}

/* 入力エラーのまとめ（Figma p-contact__error-summary） */
.p-contact__body .c-form-errors,
.p-contact__confirm .c-form-errors {
	position: relative;
	padding: 20px var(--space-lg) 20px 60px;
	border: 1.5px solid var(--color-action-cta);
	border-radius: 14px;
	background: color-mix(in srgb, var(--color-action-cta) 8%, var(--color-bg-canvas)); /* Figma #FFF0ED（トークンにない色） */
}

.p-contact__body .c-form-errors::before,
.p-contact__confirm .c-form-errors::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 25px;
	width: 22px;
	height: 22px;
	background: var(--color-action-cta);
	mask: var(--icon-alert) center / contain no-repeat;
}

/* 読み上げのために JS がフォーカスを移す箱（押せる所ではないので枠は出さない） */
.p-contact__body .c-form-errors:focus,
.p-contact__confirm .c-form-errors:focus {
	outline: none;
}

.c-form-errors__title {
	color: var(--color-text-cta);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.c-form-errors__list {
	margin-top: 6px;
	padding: 0;
	list-style: none;
}

.c-form-errors__item {
	color: var(--color-text-primary);
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.c-form-errors__item::before {
	content: "・";
}

.c-form-errors__item a {
	color: inherit;
	text-underline-offset: 3px;
}

/* 送信前の確認（Turnstile。キーがあるときだけ出る） */
.p-contact .c-form-guard,
.p-contact__body .c-form-guard,
.p-contact__confirm .c-form-guard {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	color: var(--color-text-secondary);
	font: var(--text-body-s);
}

/* ---------- ボタン（入力内容を確認する・送信する・入力画面に戻る） ---------- */
.p-contact__buttons {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
}

/* 確認・完了：HTML は主のボタン（送信する・トップへ戻る）が先（Tab の順・SP で上）。PC は逆に並べて主のボタンを右に */
.p-contact__confirm .p-contact__buttons,
.p-contact__buttons--done {
	flex-direction: row-reverse;
}

.p-contact__button {
	display: inline-flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	width: 320px;
	min-height: 68px;
	padding: 0 var(--space-sm) 0 var(--space-xl);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-action-cta);
	color: var(--color-text-on-brand);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	text-align: left;
	transition: background-color 0.2s;
}

/* 右の丸と矢印（Figma c-button__icon）。丸から矢印の形をくりぬいて、ボタンの地の色を矢印に見せる */
.p-contact__button::after {
	content: "";
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	-webkit-mask-image: var(--icon-arrow-right), linear-gradient(#000 0 0);
	mask-image: var(--icon-arrow-right), linear-gradient(#000 0 0);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px, 100%;
	mask-size: 18px, 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.p-contact__button:hover {
	background: var(--color-action-cta-hover);
}

.p-contact__button:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* 入力画面に戻る（白地・青い枠、矢印は左。矢印・文字の順で左に寄せる＝row-reverse なので左は flex-end。
   ほかの事業とそろえる 2026-10-02 ユーザー決定） */
.p-contact__button--back {
	flex-direction: row-reverse;
	justify-content: flex-end;
	padding: 0 var(--space-xl) 0 var(--space-sm);
	border: 1.5px solid var(--color-border-brand);
	background: var(--color-bg-canvas);
	color: var(--color-text-brand);
}

.p-contact__button--back::after {
	background: var(--color-action-primary);
	-webkit-mask-image: var(--icon-arrow-left), linear-gradient(#000 0 0);
	mask-image: var(--icon-arrow-left), linear-gradient(#000 0 0);
}

.p-contact__button--back:hover {
	background: var(--color-bg-muted);
}

/* 入力画面のボタンは幅いっぱい */
.p-contact__form:not(.p-contact__form--confirm) .p-contact__buttons {
	display: block;
}

.p-contact__form:not(.p-contact__form--confirm) .p-contact__button {
	width: 100%;
}

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

.p-contact__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-lg);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-lg);
}

.p-contact__card-title {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	color: var(--color-text-primary);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.p-contact__card-title .c-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-text-brand);
}

.p-contact__card-link {
	padding-block: 11px; /* 公式LINE・写真で無料診断：押せる高さを 44px 以上に（見た目と行の高さは変えない。上下の margin で打ち消す） */
	margin-block: -11px;
	color: inherit;
	text-underline-offset: 4px;
}

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

.p-contact__tel {
	display: inline-block;
	padding-block: 12px; /* 押せる高さを 44px 以上に（見た目と行の高さは変えない。上下の margin で打ち消す） */
	margin-block: -12px;
	color: inherit;
	text-decoration: none;
}

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

	.p-contact__side {
		width: auto;
	}
}

@media (max-width: 767px) {
	/* SP: フォームは画面幅いっぱいの灰色の面（Figma 236:1861） */
	.p-contact__inner {
		gap: var(--space-2xl);
		padding-block: var(--space-lg) var(--space-6xl);
	}

	.p-contact__main {
		margin-inline: calc(var(--container-gutter, 20px) * -1);
	}

	.p-contact__form:not(.p-contact__form--confirm) {
		gap: var(--space-lg);
		padding: 28px 20px;
		border-radius: 0;
	}

	.p-contact__body .c-form-field__choices {
		gap: var(--space-xs);
	}

	.p-contact__body .c-form-field__field {
		min-height: 60px;
	}

	.p-contact__side {
		gap: var(--space-sm);
	}

	.p-contact__card {
		padding: 20px;
	}

	.p-contact__body .c-form-errors {
		padding: var(--space-md) var(--space-md) var(--space-md) 50px;
	}

	.p-contact__body .c-form-errors::before {
		top: 18px;
		left: var(--space-md);
	}
}

/* ==========================================================================
   確認
   ========================================================================== */
.p-contact__confirm-inner {
	max-width: calc(1000px + var(--container-gutter, 40px) * 2);
	padding-block: var(--space-2xl) var(--space-6xl);
}

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

.p-contact__table {
	padding: var(--space-xs) var(--space-2xl);
	border-radius: 20px;
	background: var(--color-bg-subtle);
}

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

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

.p-contact__row-label {
	flex-shrink: 0;
	width: 200px;
	color: var(--color-text-secondary);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

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

@media (max-width: 767px) {
	.p-contact__confirm-inner {
		padding-block: var(--space-lg) var(--space-6xl);
	}

	/* SP: 項目名を上・値を下に積む。ボタンは縦に積み、送信するを上に */
	.p-contact__table {
		padding: var(--space-xs) 20px;
	}

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

	.p-contact__row-label {
		width: auto;
	}

	/* 縦に積む。主のボタン（送信する・トップへ戻る）が上（HTML の順のまま） */
	.p-contact__confirm .p-contact__buttons,
	.p-contact__buttons--done {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.p-contact__confirm .p-contact__button {
		width: 100%;
	}
}

/* ==========================================================================
   完了
   ========================================================================== */
.p-contact__done-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: center;
	padding-block: var(--space-4xl) 140px; /* 下の余白は Figma の 140px */
	text-align: center;
}

.p-contact__icon {
	display: 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);
}

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

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

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

.p-contact__buttons--done {
	padding-top: var(--space-md);
}

.p-contact__buttons--done .c-button {
	width: 320px;
}

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

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

	.p-contact__icon .c-icon {
		width: 32px;
		height: 32px;
	}

	.p-contact__text {
		text-align: left;
	}

	.p-contact__buttons--done {
		align-self: stretch;
	}

	.p-contact__buttons--done .c-button {
		width: 100%;
	}
}