/* ==========================================================================
   かなさホームのお問い合わせ /kanasa-home/contact/（page-kanasa-contact.php・template-parts/kanasa/contact-*.php）
   Figma 05 PC 179:13154（入力）・179:13599（ケアマネジャーの方）・83:388（確認）・83:474（完了）／05 SP 244:24029・244:24454・244:25642・244:25891
   - 中身の幅は 960px（PC）。SP は左右 20px
   - 入力の項目は inc/forms の truss_form_field() のマークアップ（c-form-field・c-form-field__*・c-checkbox）に、
     Figma のクラス（p-kanasa-form__field--*・p-kanasa-form__choice）を足して形を作る
   - 選択肢：PC はご相談の種類だけ縦1列、ご相談者・連絡方法・時間帯・建物は横に等分、介護の認定・場所や工事は Figma の行のまとまりで折り返す
             SP はご相談の種類・ご相談者・連絡方法・時間帯が1列、介護の認定・場所や工事・建物が2列（介護の認定の「まだ受けていない」「わからない」は幅いっぱい）
   - ページ見出し（c-page-header-kanasa）・パンくず（c-breadcrumb）・ボタン（p-kanasa-button）・アイコン（c-kanasa-icon）は K-A のパーツと CSS。
     ここでは置き方（幅・間隔）と、このページだけの形（「入力画面に戻る」の矢印を左に）だけを書く
   ========================================================================== */

.p-kanasa-contact,
.p-kanasa-contact-confirm,
.p-kanasa-contact-done {
	--focus-color: var(--kanasa-border-strong);

	background: var(--kanasa-bg-canvas);
	color: var(--kanasa-text-primary);
	font-family: var(--font-kanasa);
	letter-spacing: var(--ls-kanasa);
}

/* 中身の幅 960px（Figma の左右 240px） */
.p-kanasa-contact__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	max-width: calc(960px + var(--container-gutter, 40px) * 2);
	padding-top: var(--space-md); /* ページ見出しのすぐ下（完了の画面は下で 48px） */
	padding-bottom: var(--space-6xl);
}

/* ---------- K-A のページ見出し（パンくず・h1・リード）を 960px の幅に ---------- */
.p-kanasa-contact__header .c-page-header-kanasa__inner {
	max-width: calc(960px + var(--container-gutter, 40px) * 2);
}

/* 完了の画面のパンくず（ページ見出しがないので、中身の先頭に置く） */
.p-kanasa-contact-done__breadcrumb {
	align-self: stretch;
	text-align: left;
}

/* ---------- 手順の表示（Figma c-kanasa-steps） ---------- */
.c-kanasa-steps {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-kanasa-steps__item {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: var(--space-xs);
	align-items: center;
	width: 72px;
}

.c-kanasa-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
	background: var(--kanasa-bg-surface);
	border: 2px solid var(--kanasa-border-default);
	border-radius: 50%;
}

.c-kanasa-steps__label {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
	white-space: nowrap;
}

.c-kanasa-steps__item.is-current .c-kanasa-steps__num {
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
	border-color: var(--kanasa-bg-green-strong);
}

.c-kanasa-steps__item.is-done .c-kanasa-steps__num {
	color: var(--kanasa-text-green);
	background: var(--kanasa-bg-green-soft);
	border-color: var(--kanasa-bg-green-soft);
}

.c-kanasa-steps__item:is(.is-current, .is-done) .c-kanasa-steps__label {
	color: var(--kanasa-text-green);
}

.c-kanasa-steps__line {
	flex-shrink: 0;
	width: 96px;
	padding-top: 21px; /* 丸（44px）の真ん中 */
}

.c-kanasa-steps__bar {
	display: block;
	height: 2px;
	background: var(--kanasa-border-default);
}

.c-kanasa-steps__line.is-done .c-kanasa-steps__bar {
	background: var(--kanasa-border-strong);
}

/* ==========================================================================
   入力（p-kanasa-contact）
   ========================================================================== */
/* 手順（ページ見出しのすぐ下・中央。Figma ではリードとの間 16px） */
.p-kanasa-contact__head {
	display: flex;
	justify-content: center;
}

.p-kanasa-contact-done__title {
	font: var(--text-kanasa-h1);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

/* お電話でのご相談 */
.p-kanasa-contact__tel {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-md);
	align-items: center;
	justify-content: center;
	padding: 20px var(--space-xl);
	background: var(--kanasa-bg-surface);
	border-radius: 20px; /* Figma の角丸（トークンにない値） */
}

.p-kanasa-contact__tel-label {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-contact__tel-row {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 44px;
	color: var(--kanasa-text-green);
	text-decoration: none;
}

.p-kanasa-contact__tel-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.p-kanasa-contact__tel-row:hover .p-kanasa-contact__tel-number {
	text-decoration: underline;
}

.p-kanasa-contact__tel-number {
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	white-space: nowrap;
}

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

/* ---------- フォーム（白い板） ---------- */
.p-kanasa-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	padding: 56px; /* Figma の内側の余白（トークンにない値） */
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-panel, 40px); /* Figma の角丸 40（layout.css のかなさの値） */
}

/* 1項目：見出し（必須・任意の札＋項目名）→ 補足 → 入力 → エラー */
.p-kanasa-form .c-form-field {
	display: flex;
	flex-direction: column;
	gap: 14px; /* Figma の間隔 */
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

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

/* legend を fieldset の中の普通の箱として並べる。浮かせているので箱の gap が効かず、同じ間隔を下に足す
   （札と項目名のすぐ下に選択肢が付いて詰まって見えていた。2026-10-05 ユーザー指摘） */
.p-kanasa-form legend.c-form-field__label-row {
	float: left;
	width: 100%;
	margin-bottom: 14px;
}

.p-kanasa-form .c-form-field__label {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
}

/* 札は項目名の左（Figma） */
.p-kanasa-form .c-form-field__badge {
	order: -1;
	flex-shrink: 0;
	padding: 2px 10px;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	border-radius: 6px; /* Figma の角丸（トークンにない値） */
}

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

.p-kanasa-form .c-form-field__badge--optional,
.p-kanasa-form .c-form-field__badge--only {
	color: var(--kanasa-text-primary);
	background: var(--kanasa-border-default);
}

/* 補足は見出しのすぐ下（入力欄より上。間は 4px） */
.p-kanasa-form .c-form-field__note {
	order: 1;
	margin-top: -10px;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

.p-kanasa-form .c-form-field__field,
.p-kanasa-form .c-form-field__choices {
	order: 2;
}

.p-kanasa-form .c-form-field__error {
	order: 3;
}

/* 1行・複数行の入力 */
.p-kanasa-form .c-form-field__field {
	display: block;
	width: 100%;
	min-height: 69px;
	padding: var(--space-md) 20px;
	font: var(--text-kanasa-body);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-canvas);
	border: 1.5px solid var(--kanasa-border-strong);
	border-radius: 14px; /* Figma の角丸（トークンにない値） */
	appearance: none;
}

.p-kanasa-form textarea.c-form-field__field {
	height: 180px;
	resize: vertical;
}

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

.p-kanasa-form .c-form-field__field:focus-visible {
	outline: 3px solid var(--focus-color);
	outline-offset: 2px;
}

/* 選択肢（ラジオ・チェックボックス。文字を押しても選べる） */
.p-kanasa-form .c-form-field__choices {
	display: flex;
	gap: var(--space-sm);
}

.p-kanasa-form__choice {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	min-width: 0;
	padding: var(--space-md) 20px;
	font: var(--text-kanasa-body);
	letter-spacing: var(--ls-kanasa);
	background: var(--kanasa-bg-surface);
	border: 1.5px solid var(--kanasa-border-default);
	border-radius: 14px; /* Figma の角丸（トークンにない値） */
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.p-kanasa-form__choice:hover {
	border-color: var(--kanasa-border-strong);
}

/* 選んだもの：薄い緑・緑の枠 2px（枠が太くなるぶん内側の余白を減らす） */
.p-kanasa-form__choice.is-checked,
.p-kanasa-form__choice:has(:checked) {
	padding: 15.5px 19.5px;
	background: var(--kanasa-bg-green-soft);
	border: 2px solid var(--kanasa-bg-green-strong);
}

.p-kanasa-form__choice:has(:focus-visible) {
	outline: 3px solid var(--focus-color);
	outline-offset: 2px;
}

.p-kanasa-form__choice__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* ラジオ・チェックの形（Figma p-kanasa-form__radio・p-kanasa-form__checkbox） */
.p-kanasa-form__choice__input,
.p-kanasa-form .c-checkbox__input {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	background: var(--kanasa-bg-surface) no-repeat center / 18px 18px;
	border: 2px solid var(--kanasa-border-strong);
	cursor: inherit;
	appearance: none;
}

.p-kanasa-form__choice__input:focus-visible,
.p-kanasa-form .c-checkbox__input:focus-visible {
	outline: 0; /* 外側（選択肢の箱）に枠を出す */
}

.p-kanasa-form__choice__input[type="radio"] {
	border-radius: 50%;
}

.p-kanasa-form__choice__input[type="radio"]:checked {
	border-width: 7px; /* 緑の輪の中に白い点（Figma） */
}

.p-kanasa-form__choice__input[type="checkbox"],
.p-kanasa-form .c-checkbox__input {
	border-radius: 6px; /* Figma の角丸（トークンにない値） */
}

/* チェックの印は白（緑の地の上。Figma c-icon/check を書き出した形） */
.p-kanasa-form__choice__input[type="checkbox"]:checked,
.p-kanasa-form .c-checkbox__input:checked {
	background-color: var(--kanasa-bg-green-strong);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23fff' d='M14.47 3.97a.75.75 0 0 1 1.06 1.06l-8.25 8.25a.75.75 0 0 1-1.06 0l-3.75-3.75a.75.75 0 0 1 1.06-1.06l3.22 3.22 7.72-7.72Z'/%3E%3C/svg%3E");
	border-color: var(--kanasa-bg-green-strong);
}

/* ご相談の種類：縦に1列 */
.p-kanasa-form__field--type .c-form-field__choices {
	flex-direction: column;
}

/* ご相談者・建物・連絡方法・時間帯：横に等分 */
:is(.p-kanasa-form__field--person, .p-kanasa-form__field--building, .p-kanasa-form__field--method, .p-kanasa-form__field--time) .p-kanasa-form__choice {
	flex: 1 1 0;
}

/* 介護の認定（要支援／要介護／その他）・場所や工事（4つ／3つ）は、Figma の行のまとまりで折り返す
   （::before・::after を幅いっぱいの見えない区切りにして、order で行を分ける。読む順・押す順は変わらない） */
:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place) .c-form-field__choices {
	flex-wrap: wrap;
	row-gap: 0;
	margin-block: -6px;
}

:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place) .c-form-field__choices::before,
:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place) .c-form-field__choices::after {
	content: "";
	flex-basis: 100%;
	height: 0;
}

:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place) .p-kanasa-form__choice {
	min-width: 150px;
	margin-block: 6px;
}

.p-kanasa-form__field--care-level .c-form-field__choices::before,
.p-kanasa-form__field--place .c-form-field__choices::before {
	order: 1;
}

.p-kanasa-form__field--care-level .c-form-field__choices::after {
	order: 3;
}

.p-kanasa-form__field--care-level .p-kanasa-form__choice:nth-child(n+3),
.p-kanasa-form__field--place .p-kanasa-form__choice:nth-child(n+5) {
	order: 2;
}

.p-kanasa-form__field--care-level .p-kanasa-form__choice:nth-child(n+8) {
	order: 4;
}

.p-kanasa-form__field--place .c-form-field__choices::after {
	display: none;
}

/* タブレット（768〜1099px）: フォームの幅が PC より狭いので、
   横に等分の選択肢は文字が折れない幅を下限にして、入らなければ次の行へ（「ケアマネジ／ャー・／事業所」のように折れないように）。
   場所や工事は4つが1行に入るよう、下限の幅を小さく（「扉」だけが次の行に落ちないように） */
@media (min-width: 768px) and (max-width: 1099px) {
	:is(.p-kanasa-form__field--person, .p-kanasa-form__field--building, .p-kanasa-form__field--method, .p-kanasa-form__field--time) .c-form-field__choices {
		flex-wrap: wrap;
	}

	:is(.p-kanasa-form__field--person, .p-kanasa-form__field--building, .p-kanasa-form__field--method, .p-kanasa-form__field--time) .p-kanasa-form__choice {
		min-width: max-content;
	}

	:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place) .p-kanasa-form__choice {
		min-width: 120px;
	}
}

/* ケアマネジャー・事業所の方の欄（薄い緑の枠。入力欄は白） */
.p-kanasa-form__caremanager {
	display: flex;
	flex-direction: column;
	gap: 28px; /* Figma の間隔 */
	padding: 28px var(--space-xl) var(--space-xl);
	background: var(--kanasa-bg-green-soft);
	border-radius: 20px; /* Figma の角丸（トークンにない値） */
}

.p-kanasa-form__caremanager-title {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.p-kanasa-form__caremanager .c-form-field__field {
	background: var(--kanasa-bg-surface);
}

/* 同意（クリーム色の箱） */
.p-kanasa-form .p-kanasa-form__privacy {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px var(--space-sm);
	align-items: center;
	padding: 28px var(--space-xl);
	background: var(--kanasa-bg-canvas);
	border-radius: 20px; /* Figma の角丸（トークンにない値） */
}

.p-kanasa-form .p-kanasa-form__privacy .c-form-field__note {
	flex-basis: 100%;
	order: 0;
	margin-top: 0;
	color: var(--kanasa-text-primary);
}

.p-kanasa-form .c-checkbox {
	display: inline-flex;
	gap: var(--space-sm);
	align-items: center;
	order: 1;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	cursor: pointer;
}

/* PC の同意のチェック: 押せる高さを 44px に（上下の負の余白で、箱の中の並びは変えない） */
@media (min-width: 768px) {
	.p-kanasa-form .p-kanasa-form__privacy .c-checkbox {
		min-height: 44px;
		margin-block: -8px;
	}
}

.p-kanasa-form .c-checkbox:has(:focus-visible) {
	outline: 3px solid var(--focus-color);
	outline-offset: 4px;
	border-radius: 4px;
}

.p-kanasa-form .c-checkbox__input {
	width: 28px;
	height: 28px;
	background-size: 20px 20px;
}

.p-kanasa-form .c-checkbox__box {
	display: none; /* 形は input そのものに付けている */
}

.p-kanasa-form .c-checkbox__label a {
	color: var(--kanasa-text-green);
}

.p-kanasa-form .p-kanasa-form__privacy .c-form-field__badge {
	order: 2;
}

.p-kanasa-form .p-kanasa-form__privacy .c-form-field__error {
	flex-basis: 100%;
}

/* エラー（項目の下） */
.p-kanasa-form .c-form-field__error {
	display: flex;
	gap: 6px;
	align-items: center;
	font: var(--text-kanasa-body-s);
	font-weight: 700;
	letter-spacing: var(--ls-kanasa);
	color: var(--color-text-cta);
}

.p-kanasa-form .c-form-field__error-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 13px;
	line-height: 1;
	color: var(--kanasa-text-on-green);
	background: var(--color-action-cta);
	border-radius: 50%;
}

.p-kanasa-form .c-form-field.is-error .c-form-field__field,
.p-kanasa-form .c-form-field.is-error .p-kanasa-form__choice:not(.is-checked) {
	border-color: var(--color-action-cta);
}

/* エラーのまとめ（フォームの先頭） */
:is(.p-kanasa-form, .p-kanasa-contact-confirm__form) .c-form-errors {
	padding: 20px var(--space-lg);
	color: var(--color-text-cta);
	background: var(--kanasa-bg-surface);
	border: 2px solid var(--color-action-cta);
	border-radius: 14px; /* Figma の角丸（トークンにない値） */
}

:is(.p-kanasa-form, .p-kanasa-contact-confirm__form) .c-form-errors:focus-visible {
	outline: 0; /* 読み込み時に JS が移す。赤い枠があるので、フォーカスの枠は重ねない */
}

:is(.p-kanasa-form, .p-kanasa-contact-confirm__form) .c-form-errors__title {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
}

:is(.p-kanasa-form, .p-kanasa-contact-confirm__form) .c-form-errors__list {
	margin: var(--space-xs) 0 0;
	padding-left: 1.5em;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

:is(.p-kanasa-form, .p-kanasa-contact-confirm__form) .c-form-errors__list a {
	color: inherit;
}

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

.p-kanasa-form__submit {
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   支給額チェックの結果の箱（?from=check。inc/forms の truss_form_context_boxes()。入力はフォームの先頭、確認は表の上）
   Figma にない箱。ケアマネジャーの方の欄（薄い緑の枠）と、支給額チェックの内訳の表（白い板・行の線）の形に合わせた。
   行は金額だけ：工事費用・支給される額の目安・自己負担の目安（あとの2つを大きく、自己負担を緑に）
   ========================================================================== */
.p-kanasa-contact__check {
	display: flex;
	flex-direction: column;
	align-self: stretch; /* 確認の画面（中央寄せの並び）でも幅いっぱい */
	gap: var(--space-md);
	padding: 28px var(--space-xl) var(--space-xl); /* ケアマネジャーの方の欄と同じ */
	background: var(--kanasa-bg-green-soft);
	border-radius: 20px; /* Figma の角丸（トークンにない値。ケアマネジャーの方の欄と同じ） */
}

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

.p-kanasa-contact__check-title {
	font: var(--text-kanasa-h4);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

/* 「条件を変える」（かなさの c-back-link。押せる高さ 44px のまま、行の高さは見出しに合わせる） */
.p-kanasa-contact__check .c-back-link {
	margin-block: -6px;
}

@media (hover: hover) {
	.p-kanasa-contact__check .c-back-link:hover {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

/* 内訳の表（白い板。最後の行は線なし） */
.p-kanasa-contact__check-rows {
	margin: 0;
	padding: var(--space-xs) var(--space-lg);
	background: var(--kanasa-bg-surface);
	border-radius: 14px; /* 入力欄と同じ角丸（トークンにない値） */
}

.p-kanasa-contact__check-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-md);
	align-items: baseline;
	justify-content: space-between;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--kanasa-border-default);
}

.p-kanasa-contact__check-row:last-child {
	border-bottom: 0;
}

.p-kanasa-contact__check-row dt {
	min-width: 0;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

.p-kanasa-contact__check-row dd {
	margin: 0 0 0 auto;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 支給される額の目安・自己負担の目安（2・3行目）は大きく、自己負担は緑（チェックの結果の表と同じ考え方） */
.p-kanasa-contact__check-row:nth-child(n+2) dd {
	font: var(--text-kanasa-h4);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-contact__check-row:last-child dd {
	color: var(--kanasa-text-green);
}

/* 上限の補足の1行・「あわせて送信されます」 */
.p-kanasa-contact__check-sub {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-contact__check-note {
	margin-top: calc(var(--space-xs) * -1); /* 補足の文とのあいだは 8px */
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

/* ==========================================================================
   確認（p-kanasa-contact-confirm）
   ========================================================================== */
.p-kanasa-contact-confirm .p-kanasa-contact__inner {
	gap: var(--space-xl);
}

.p-kanasa-contact-confirm__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	align-items: center;
}

.p-kanasa-contact-confirm__body {
	align-self: stretch;
	margin: 0;
	padding: var(--space-xs) var(--space-2xl);
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-box, 32px); /* Figma の角丸 32（layout.css のかなさの値） */
}

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

.p-kanasa-contact-confirm__row:last-child {
	border-bottom: 0;
}

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

.p-kanasa-contact-confirm__value {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font: var(--text-kanasa-body);
	letter-spacing: var(--ls-kanasa);
}

/* 「入力画面に戻る」：矢印を文字の左に（K-A のボタンは矢印が右なので並びを逆に。枠線 2px ぶん余白を減らす） */
.p-kanasa-contact-confirm .p-kanasa-button--back {
	flex-direction: row-reverse;
	padding: 10px 30px 10px 10px;
}

/* PC は「入力画面に戻る」を左に（書く順は送信するが先） */
.p-kanasa-confirm__buttons,
.p-kanasa-done__buttons {
	display: flex;
	flex-direction: row-reverse;
	gap: var(--space-md);
	justify-content: center;
}

/* ==========================================================================
   完了（p-kanasa-contact-done）
   ========================================================================== */
.p-kanasa-contact-done .p-kanasa-contact__inner {
	gap: var(--space-lg);
	padding-top: var(--space-3xl);
	align-items: center;
	padding-bottom: 140px; /* Figma の下の余白（トークンにない値） */
	text-align: center;
}

.p-kanasa-done__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-top: var(--space-lg);
	color: var(--kanasa-text-green);
	background: var(--kanasa-border-default);
	border-radius: 50%;
}

.p-kanasa-done__check {
	width: 44px;
	height: 44px;
}

.p-kanasa-contact-done__lead {
	max-width: 840px;
	font: var(--text-kanasa-lead);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-contact-done__lead a {
	color: inherit;
}

.p-kanasa-done__buttons {
	padding-top: var(--space-md);
}

/* ==========================================================================
   SP（Figma 05 SP 244:24029・244:24454・244:25642・244:25891）
   ========================================================================== */
@media (max-width: 767px) {
	/* ページ見出し（c-page-header-kanasa-sp。下に 32px）のすぐ下に手順（Figma では 8px） */
	.p-kanasa-contact__inner {
		gap: 20px;
		padding-top: var(--space-xs);
		padding-bottom: var(--space-5xl);
	}

	/* 手順は1行で幅いっぱい（線がのびる） */
	.c-kanasa-steps {
		width: 100%;
	}

	.c-kanasa-steps__item {
		width: 64px;
	}

	.c-kanasa-steps__num {
		width: 40px;
		height: 40px;
	}

	.c-kanasa-steps__line {
		flex: 1 1 0;
		width: auto;
		padding-top: 19px;
	}

	/* お電話でのご相談：縦に積む（番号は中央） */
	.p-kanasa-contact__tel {
		flex-direction: column;
		gap: var(--space-2xs);
		align-items: stretch;
		padding: var(--space-md) 20px;
	}

	.p-kanasa-contact__tel-row {
		align-self: center;
	}

	/* フォーム */
	.p-kanasa-form {
		gap: var(--space-2xl); /* SP: 32px */
		padding: 28px 20px;
		border-radius: var(--radius-xl);
	}

	/* SP も札・項目名と入力欄のあいだを 16px に（12px では詰まって見えた。2026-10-05 ユーザー指摘） */
	.p-kanasa-form .c-form-field {
		gap: var(--space-md);
	}

	.p-kanasa-form legend.c-form-field__label-row {
		margin-bottom: var(--space-md);
	}


	.p-kanasa-form .c-form-field__note {
		margin-top: -8px;
	}

	.p-kanasa-form .c-form-field__field {
		min-height: 61px;
		padding: 14px var(--space-md);
	}

	.p-kanasa-form textarea.c-form-field__field {
		height: 160px;
	}

	.p-kanasa-form .c-form-field__choices {
		gap: 10px;
	}

	.p-kanasa-form__choice {
		padding: 14px var(--space-md);
		font-size: 16px; /* 選択肢は SP も 16px（Figma SP の注記・高齢の方向け） */
	}

	.p-kanasa-form__choice.is-checked,
	.p-kanasa-form__choice:has(:checked) {
		padding: 13.5px 15.5px;
	}

	/* 文の長い選択肢は1列 */
	:is(.p-kanasa-form__field--type, .p-kanasa-form__field--person, .p-kanasa-form__field--method, .p-kanasa-form__field--time) .c-form-field__choices {
		flex-direction: column;
	}

	:is(.p-kanasa-form__field--person, .p-kanasa-form__field--method, .p-kanasa-form__field--time) .p-kanasa-form__choice {
		flex: none;
	}

	/* 短い選択肢は2列（介護の認定の「まだ受けていない」「わからない」は幅いっぱい） */
	:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place, .p-kanasa-form__field--building) .c-form-field__choices {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-block: 0;
	}

	:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place) .c-form-field__choices::before,
	:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place) .c-form-field__choices::after {
		display: none;
	}

	:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place, .p-kanasa-form__field--building) .p-kanasa-form__choice {
		gap: var(--space-xs);
		min-width: 0;
		margin-block: 0;
		padding: 14px 10px 14px 14px;
		order: 0;
	}

	:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place, .p-kanasa-form__field--building) .p-kanasa-form__choice:is(.is-checked, :has(:checked)) {
		padding: 13.5px 9.5px 13.5px 13.5px;
	}

	.p-kanasa-form__field--care-level .p-kanasa-form__choice:nth-child(n+9) {
		grid-column: 1 / -1;
	}

	.p-kanasa-form__caremanager {
		gap: 20px;
		padding: 20px var(--space-md);
	}

	/* 支給額チェックの結果の箱：「条件を変える」は箱の下。項目名と値が並ばないときは、値を次の行（右寄せ）へ */
	.p-kanasa-contact__check {
		gap: var(--space-sm);
		padding: 20px var(--space-md);
	}

	.p-kanasa-contact__check-head {
		display: contents;
	}

	.p-kanasa-contact__check .c-back-link {
		order: 1;
		align-self: flex-start;
		margin-block: -6px;
	}

	.p-kanasa-contact__check-rows {
		padding: var(--space-2xs) var(--space-md);
	}

	.p-kanasa-contact__check-note {
		margin-top: calc(var(--space-2xs) * -1);
	}

	.p-kanasa-form__caremanager .c-form-field__field {
		padding-inline: var(--space-sm);
	}

	/* 同意：説明 →「必須」の札（ほかの項目と同じく左）→ チェックと文（幅いっぱい）。
	   前は札を真ん中に置いていて浮いて見え、チェックの文も細く折れていた（2026-10-05 ユーザー指摘「デザインが崩れてる」） */
	.p-kanasa-form .p-kanasa-form__privacy {
		gap: var(--space-sm);
		padding: var(--space-lg) 20px;
	}

	.p-kanasa-form .p-kanasa-form__privacy .c-form-field__note {
		margin-bottom: var(--space-xs);
	}

	.p-kanasa-form .p-kanasa-form__privacy .c-form-field__badge {
		order: 1;
	}

	.p-kanasa-form .c-checkbox {
		flex-basis: 100%;
		align-items: flex-start;
		order: 2;
	}

	.p-kanasa-form .p-kanasa-form__privacy .c-checkbox__input {
		flex-shrink: 0;
	}

	.p-kanasa-form .p-kanasa-form__privacy .c-form-field__error {
		order: 3;
	}

	/* 確認 */
	.p-kanasa-contact-confirm .p-kanasa-contact__inner {
		gap: var(--space-xl);
	}

	.p-kanasa-contact-confirm__form {
		gap: var(--space-xl);
		align-items: stretch;
	}

	.p-kanasa-contact-confirm__body {
		padding: var(--space-2xs) 20px;
		border-radius: var(--radius-xl);
	}

	/* 確認表は項目名が上・値が下 */
	.p-kanasa-contact-confirm__row {
		flex-direction: column;
		gap: var(--space-2xs);
		padding: var(--space-md) 0;
	}

	.p-kanasa-contact-confirm__label {
		width: auto;
	}

	/* 「入力画面に戻る」は矢印・文字の順で左に寄せる（row-reverse なので、左は flex-end） */
	.p-kanasa-contact-confirm .p-kanasa-button--back {
		justify-content: flex-end;
		padding-left: var(--space-xs);
	}

	/* ボタンは縦に積んで、主のボタン（送信する・かなさホームのトップへ）が上 */
	.p-kanasa-confirm__buttons,
	.p-kanasa-done__buttons {
		flex-direction: column;
		gap: var(--space-sm);
		align-self: stretch;
	}

	/* 完了 */
	.p-kanasa-contact-done .p-kanasa-contact__inner {
		gap: var(--space-xl);
		padding-top: var(--space-md);
		padding-bottom: var(--space-6xl); /* SP: 64px */
	}

	.p-kanasa-done__icon {
		margin-top: 0;
	}

	.p-kanasa-contact-done__lead {
		font: var(--text-kanasa-body);
		letter-spacing: var(--ls-kanasa);
	}

	.p-kanasa-done__buttons {
		padding-top: var(--space-xs);
	}
}

/* 374px 以下（360px・320px の端末）: 2列の選択肢の文字が折れないように、左右の余白を詰める
   （360px で「マンショ／ン」、320px で「要支援／2」のように1文字だけ次の行に落ちるため） */
@media (max-width: 374px) {
	:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place, .p-kanasa-form__field--building) .p-kanasa-form__choice {
		padding-inline: 10px 6px;
	}

	:is(.p-kanasa-form__field--care-level, .p-kanasa-form__field--place, .p-kanasa-form__field--building) .p-kanasa-form__choice:is(.is-checked, :has(:checked)) {
		padding-inline: 9.5px 5.5px; /* 選んだときは枠が 0.5px 太いぶん */
	}
}

/* 359px 以下: 建物は「マンション」が2列に入らないので1列 */
@media (max-width: 359px) {
	.p-kanasa-form__field--building .c-form-field__choices {
		grid-template-columns: minmax(0, 1fr);
	}
}