@charset "UTF-8";
/* ==========================================================================
   清水ピアノ 依頼フォーム

   色は清水ピアノのテーマ（v0.4 以降）の変数を使い、テーマがなくても同じ色になるよう既定値を持つ。
     ブルー     … 見出し・番号・選択中の枠
     オレンジ   … 送信ボタンだけ
     チャコール … 文字
   テーマのデザインルールどおり、赤（--sp-red）はフォームでは使わない。
   エラーの色（--spf-err）は操作上の警告だけに使う機能色（ブランドの赤とは別）。

   テーマの .sp-formarea（プラグインのフォームを想定した汎用スタイル）より
   優先されるよう、主要なセレクターは .spf .spf-form から始める。
   入力しやすさ優先：入力欄の文字は 16px（iPhone で拡大されない）、タップ領域は 48px 以上。
   ========================================================================== */

.spf {
	--spf-blue: var(--sp-blue, #1b6fb8);
	--spf-deep: var(--sp-blue-deep, #0d4a86);
	--spf-sky: var(--sp-sky, #1faeee);
	--spf-tint: var(--sp-sky-tint, #eaf6fd);
	--spf-cta: var(--sp-orange-ink, #b5501b);
	--spf-cta-hover: #99400f;
	--spf-ink: var(--sp-ink, #23282d);
	--spf-ink2: var(--sp-ink-2, #4e565d);
	--spf-ink3: var(--sp-ink-3, #6b737a);
	--spf-line: #b9c4ce;
	--spf-soft: var(--sp-line, #dde3e8);
	--spf-paper: #fff;
	--spf-paper2: var(--sp-paper-2, #f3f7fb);
	--spf-err: #b3261e;
	--spf-err-bg: #fdf2f1;
	--spf-num: var(--sp-font-num, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif);

	counter-reset: spf-sec;
	color: var(--spf-ink);
	font-size: 15.5px;
	line-height: 1.75;
	text-align: left;
}

.spf *,
.spf *::before,
.spf *::after {
	box-sizing: border-box;
}

.spf [hidden] {
	display: none !important;
}

.spf-sr,
.spf .spf-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- まとまり（白いパネル） --- */

.spf .spf-form {
	margin: 0;
}

.spf .spf-form .spf-sec {
	min-width: 0;
	margin: 0 0 18px;
	padding: 26px 30px 30px;
	background: var(--spf-paper);
	border: 1px solid var(--spf-soft);
	border-top: 3px solid var(--spf-blue);
	border-radius: 0;
}

.spf .spf-form .spf-sec--submit {
	padding-top: 26px;
	border-top-color: var(--spf-soft);
	border-top-width: 1px;
}

/* legend を普通の見出しとして扱う（fieldset の枠に食い込ませない） */
.spf .spf-form .spf-sec__h {
	float: left;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--spf-deep);
	border: 0;
}

.spf .spf-form .spf-sec__h + * {
	clear: both;
}

.spf .spf-form .spf-sec:not([hidden]) {
	counter-increment: spf-sec;
}

.spf .spf-form .spf-sec__no::before {
	content: counter(spf-sec, decimal-leading-zero);
	display: inline-block;
	margin-right: 12px;
	font-family: var(--spf-num);
	font-size: 22px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--spf-blue);
	vertical-align: -1px;
}

.spf--contact .spf-form .spf-sec__no {
	display: none;
}

/* --- ご依頼フォームの STEP（1 ページの中で順番を示す見出し） --- */

.spf .spf-form .spf-step {
	margin: 0 0 28px;
}

.spf .spf-form .spf-step:last-child {
	margin-bottom: 0;
}

.spf .spf-form .spf-step__h {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 10px;
	padding: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--spf-deep);
	background: none;
	border: 0;
}

.spf .spf-form .spf-step__h::before,
.spf .spf-form .spf-step__h::after {
	content: none;
}

.spf .spf-form .spf-step__no {
	flex: none;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 2px 10px 3px;
	font-family: var(--spf-num);
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	color: #fff;
	background: var(--spf-blue);
	border-radius: 2px;
}

.spf .spf-form .spf-step__no b {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
}

.spf .spf-form .spf-step__t {
	min-width: 0;
}

.spf .spf-form .spf-step__t .spf-badge {
	vertical-align: 3px;
}

.spf .spf-form .spf-step .spf-sec {
	margin-bottom: 12px;
}

.spf .spf-form .spf-step .spf-sec:last-child {
	margin-bottom: 0;
}

/* STEP の中の小見出し（搬出元・搬入先、写真・備考 など） */
.spf .spf-form .spf-sec__sub {
	float: left;
	width: 100%;
	margin: 0 0 14px;
	padding: 0 0 0 10px;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--spf-ink);
	border: 0;
	border-left: 3px solid var(--spf-blue);
}

.spf .spf-form .spf-sec__sub + * {
	clear: both;
}

.spf .spf-form .spf-sec__lead {
	clear: both;
	margin: -6px 0 18px;
	font-size: 14.5px;
	color: var(--spf-ink2);
}

/* --- 相談種別 --- */

.spf .spf-form .spf-types {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* 1.2.0：サイトのサービス構成と同じまとまり（ピアノ〔配送・調律〕 → 楽器・演奏会（1.5.0） → 中古ピアノ販売・買取 → その他サービス → その他） */
.spf .spf-form .spf-types__l {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.spf .spf-form .spf-types__h {
	margin: 0 0 8px;
	padding-left: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--spf-deep);
	border-left: 3px solid var(--spf-blue);
}

/* その他サービス：補足なしの小さな選択肢を 3 列（スマートフォンは 2 列） */
.spf .spf-form .spf-types__g--compact .spf-types__l {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.spf .spf-form .spf-types__g--compact .spf-type {
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 14px;
}

.spf .spf-form .spf-types__g--compact .spf-type input {
	margin-top: 0;
}

.spf .spf-form .spf-types__g--compact .spf-type__t {
	font-size: 15px;
	line-height: 1.45;
}

.spf .spf-form .spf-type {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 16px 18px;
	min-height: 64px;
	font-weight: 400;
	background: var(--spf-paper);
	border: 1px solid var(--spf-line);
	border-radius: 4px;
	cursor: pointer;
}

.spf .spf-form .spf-type input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 3px 0 0;
	accent-color: var(--spf-blue);
}

.spf .spf-form .spf-type__b {
	display: block;
}

.spf .spf-form .spf-type__t {
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--spf-ink);
}

.spf .spf-form .spf-type__d {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--spf-ink3);
}

.spf .spf-form .spf-type:hover {
	border-color: var(--spf-blue);
}

.spf .spf-form .spf-type.is-checked,
.spf .spf-form .spf-type:has(input:checked) {
	background: var(--spf-tint);
	border-color: var(--spf-blue);
	box-shadow: inset 0 0 0 1px var(--spf-blue);
}

.spf .spf-form .spf-type.is-checked .spf-type__t,
.spf .spf-form .spf-type:has(input:checked) .spf-type__t {
	color: var(--spf-deep);
}

/* JavaScript が動かない環境用のボタン（動く環境では隠す） */
.spf .spf-form .spf-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 18px;
}

.spf.is-js .spf-form .spf-next {
	display: none;
}

.spf .spf-form .spf-next__btn {
	min-height: 48px;
	min-width: 0;
	padding: 10px 26px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--spf-deep);
	background: var(--spf-paper);
	border: 2px solid var(--spf-deep);
	border-radius: 999px;
	cursor: pointer;
}

.spf .spf-form .spf-next__t {
	font-size: 13px;
	color: var(--spf-ink3);
}

/* --- 入力欄の並び --- */

.spf .spf-form .spf-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 20px;
}

.spf .spf-form .spf-field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	grid-column: 1 / -1;
}

.spf .spf-form .spf-field--half {
	grid-column: auto;
}

/* 1.5.0：選択肢の値で出し入れする項目の外枠（片道・往復で復路の希望日時を切り替える） */
.spf .spf-form .spf-cond {
	min-width: 0;
	grid-column: 1 / -1;
}

.spf .spf-form .spf-field--short {
	grid-column: 1 / -1;
}

.spf .spf-form .spf-field--short .spf-input {
	max-width: 12em;
}

/* --- 希望日時（第1〜第3希望・1.4.0） --- */

.spf .spf-form .spf-when__notice {
	margin: 0 0 12px;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--spf-ink2);
	background: var(--spf-paper2);
	border: 1px solid var(--spf-soft);
	border-radius: 4px;
}

.spf .spf-form .spf-when__notice p {
	margin: 0;
}

/* 指定料金の対象外の種別（1.5.1）：「時間帯は、ご希望として伺います」を 1 行あけて */
.spf .spf-form .spf-when__notice p + p {
	margin-top: 8px;
}

.spf .spf-form .spf-when__fees {
	margin: 8px 0 0;
	padding: 0 0 0 1.2em;
	list-style: disc;
}

.spf .spf-form .spf-when__fees li {
	margin: 2px 0 0;
}

.spf .spf-form .spf-when__fees b {
	color: var(--spf-ink);
}

.spf .spf-form .spf-wish {
	min-width: 0;
	margin: 12px 0 0;
	padding: 6px 14px 14px;
	background: var(--spf-paper);
	border: 1px solid var(--spf-line);
	border-radius: 6px;
}

.spf .spf-form .spf-wish__h {
	margin: 0;
	padding: 2px 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
	background: var(--spf-deep);
	border-radius: 3px;
}

.spf .spf-form .spf-field--sub {
	margin-top: 10px;
}

.spf .spf-form .spf-wish__l {
	margin: 0 0 4px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--spf-ink2);
}

.spf .spf-form .spf-wish__date .spf-input {
	max-width: 17em;
}

.spf .spf-form .spf-slots {
	min-width: 0;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
}

.spf .spf-form .spf-slots__l {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.spf .spf-form .spf-slot {
	display: flex;
	width: 100%;
	min-height: 48px;
	padding: 9px 12px;
}

.spf .spf-form .spf-slot__b {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 10px;
	min-width: 0;
}

.spf .spf-form .spf-slot__fee {
	font-size: 13px;
	font-weight: 700;
	color: var(--spf-deep);
	white-space: nowrap;
}

.spf .spf-form .spf-slot__fee--ask {
	font-weight: 400;
	color: var(--spf-ink2);
}

/* 「時間指定」の希望時間。選んだ時間帯とひと続きに見せる */
.spf .spf-form .spf-wish__time {
	margin-top: 10px;
	padding: 12px 14px 14px;
	background: var(--spf-paper2);
	border-left: 3px solid var(--spf-blue);
	border-radius: 0 4px 4px 0;
}

.spf .spf-form .spf-wish__time .spf-help {
	margin-bottom: 6px;
	font-size: 12.5px;
}

.spf .spf-form .spf-wish__hint {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--spf-ink2);
}

.spf .spf-form .spf-wish__hint::before {
	content: "※ ";
}

.spf .spf-form .spf-wish__add {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 12px 0 0;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--spf-deep);
	background: var(--spf-paper);
	border: 1px dashed var(--spf-blue);
	border-radius: 6px;
	cursor: pointer;
}

.spf .spf-form .spf-wish__add:hover,
.spf .spf-form .spf-wish__add:focus-visible {
	background: var(--spf-tint);
}

.spf .spf-form .spf-wish__del {
	display: block;
	min-height: 44px;
	margin: 6px 0 -6px auto;
	padding: 8px 4px;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--spf-ink2);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

/* JavaScript が動かない環境では 3 つとも表示するので、追加・取り消しのボタンは出さない */
.spf:not(.is-js) .spf-form .spf-wish__add,
.spf:not(.is-js) .spf-form .spf-wish__del {
	display: none;
}

@media (min-width: 600px) {
	.spf .spf-form .spf-slots__l {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.spf .spf-form .spf-help__nojs {
	display: block;
	color: var(--spf-ink2);
}

.spf.is-js .spf-form .spf-help__nojs {
	display: none;
}

.spf .spf-form .spf-label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 6px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--spf-ink);
	border: 0;
}

.spf .spf-form .spf-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	vertical-align: 2px;
	border-radius: 2px;
}

.spf .spf-form .spf-badge--req {
	color: #fff;
	background: var(--spf-deep);
}

.spf .spf-form .spf-badge--opt {
	color: var(--spf-ink3);
	background: transparent;
	border: 1px solid var(--spf-soft);
	font-weight: 400;
}

.spf .spf-form .spf-help {
	margin: -2px 0 8px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--spf-ink3);
}

.spf .spf-form .spf-input,
.spf .spf-form select.spf-input,
.spf .spf-form textarea.spf-input {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	color: var(--spf-ink);
	background: var(--spf-paper);
	border: 1px solid var(--spf-line);
	border-radius: 4px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.spf .spf-form select.spf-input {
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--spf-ink2) 50%), linear-gradient(135deg, var(--spf-ink2) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.spf .spf-form textarea.spf-input {
	min-height: 150px;
	resize: vertical;
}

.spf .spf-form input[type="date"].spf-input {
	min-width: 0;
}

/* iOS の日付欄は中身が空だと高さが潰れるため */
.spf .spf-form input[type="date"].spf-input::-webkit-date-and-time-value {
	min-height: 1.6em;
	text-align: left;
}

.spf .spf-form .spf-input::placeholder {
	color: #9aa3ab;
	opacity: 1;
}

.spf .spf-form .spf-input:focus {
	border-color: var(--spf-blue);
	outline: 3px solid rgba(31, 174, 238, 0.35);
	outline-offset: 0;
}

.spf .spf-form .spf-input:disabled {
	background: var(--spf-paper2);
}

/* --- 選択肢（ラジオ・チェックボックス） --- */

.spf .spf-form .spf-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.spf .spf-form .spf-choice {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 16px 10px 12px;
	min-height: 48px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--spf-ink);
	background: var(--spf-paper);
	border: 1px solid var(--spf-line);
	border-radius: 4px;
	cursor: pointer;
}

.spf .spf-form .spf-choice input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--spf-blue);
}

.spf .spf-form .spf-choice.is-checked,
.spf .spf-form .spf-choice:has(input:checked) {
	background: var(--spf-tint);
	border-color: var(--spf-blue);
}

/* 「ご依頼者と同じ」などの切り替え */
.spf .spf-form .spf-choice--toggle {
	display: flex;
	width: 100%;
	background: var(--spf-paper2);
	border-color: var(--spf-soft);
}

.spf .spf-form .spf-choice--consent {
	display: flex;
	width: 100%;
	padding: 14px 16px;
	font-size: 15.5px;
	font-weight: 700;
}

.spf .spf-form .spf-choice--consent a {
	color: var(--spf-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 写真 --- */

.spf .spf-form .spf-file {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 10px;
	font-family: inherit;
	font-size: 15px;
	color: var(--spf-ink2);
	background: var(--spf-paper2);
	border: 1px dashed var(--spf-line);
	border-radius: 4px;
}

.spf .spf-form .spf-file::file-selector-button {
	min-height: 44px;
	margin-right: 14px;
	padding: 8px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--spf-deep);
	background: var(--spf-paper);
	border: 2px solid var(--spf-deep);
	border-radius: 999px;
	cursor: pointer;
}

.spf .spf-form .spf-previews {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.spf .spf-form .spf-previews:empty {
	display: none;
}

.spf .spf-form .spf-preview {
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--spf-ink3);
}

.spf .spf-form .spf-preview img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--spf-paper2);
	border: 1px solid var(--spf-soft);
}

.spf .spf-form .spf-preview__n {
	display: block;
	margin-top: 4px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.spf .spf-form .spf-preview__x {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 0;
	min-height: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	font-family: inherit;
	font-size: 18px;
	line-height: 30px;
	color: #fff;
	background: rgba(35, 40, 45, 0.78);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.spf .spf-form .spf-photo-status {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--spf-ink2);
}

/* --- エラー --- */

.spf .spf-form .spf-error {
	margin: 8px 0 0;
	padding-left: 24px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--spf-err);
	background: no-repeat 0 3px / 17px 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23b3261e'/%3E%3Crect x='9' y='4.5' width='2' height='7.5' fill='%23fff'/%3E%3Crect x='9' y='13.5' width='2' height='2' fill='%23fff'/%3E%3C/svg%3E");
}

.spf .spf-form .is-error .spf-input,
.spf .spf-form .spf-input[aria-invalid="true"] {
	border-color: var(--spf-err);
	box-shadow: inset 0 0 0 1px var(--spf-err);
	background-color: var(--spf-err-bg);
}

.spf .spf-form .is-error .spf-choice {
	border-color: var(--spf-err);
}

.spf .spf-alert {
	margin: 0 0 18px;
	padding: 18px 22px;
	background: var(--spf-paper);
	border: 1px solid var(--spf-soft);
	border-left: 5px solid var(--spf-blue);
}

.spf .spf-alert:focus {
	outline: 3px solid rgba(31, 174, 238, 0.35);
}

.spf .spf-alert--error {
	background: var(--spf-err-bg);
	border-color: #f0c9c6;
	border-left-color: var(--spf-err);
}

.spf .spf-alert__t {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--spf-err);
}

.spf .spf-alert--info .spf-alert__p {
	margin: 0;
}

.spf .spf-alert__p {
	margin: 8px 0 0;
	font-size: 15px;
}

.spf .spf-alert__p a {
	white-space: nowrap;
	font-weight: 700;
	color: var(--spf-deep);
}

.spf .spf-alert__l {
	margin: 10px 0 0;
	padding-left: 1.3em;
}

.spf .spf-alert__l li {
	margin: 4px 0;
	font-size: 14.5px;
}

.spf .spf-alert__l a {
	color: var(--spf-err);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 送信 --- */

.spf .spf-form .spf-submit {
	margin: 22px 0 0;
	text-align: center;
}

.spf .spf-form .spf-submit__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	min-height: 64px;
	margin: 0;
	padding: 14px 40px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--spf-cta);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.spf .spf-form .spf-submit__btn:hover,
.spf .spf-form .spf-submit__btn:focus {
	color: #fff;
	background: var(--spf-cta-hover);
}

.spf .spf-form .spf-submit__btn:focus-visible {
	outline: 3px solid rgba(31, 174, 238, 0.55);
	outline-offset: 3px;
}

.spf .spf-form .spf-submit__btn[disabled] {
	cursor: wait;
	opacity: 0.7;
}

.spf .spf-form .spf-submit__note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--spf-ink3);
	text-align: center;
}

/* --- 送信完了 --- */

.spf .spf-done {
	padding: 34px 34px 32px;
	background: var(--spf-paper);
	border: 1px solid var(--spf-soft);
	border-top: 4px solid var(--spf-blue);
}

.spf .spf-done:focus {
	outline: none;
}

.spf .spf-done__eyebrow {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--spf-blue);
}

.spf .spf-done__t {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--spf-deep);
}

.spf .spf-done__no {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin: 0 0 20px;
	padding: 16px 20px;
	background: var(--spf-tint);
}

.spf .spf-done__nol {
	font-size: 14px;
	font-weight: 700;
	color: var(--spf-deep);
}

.spf .spf-done__nov {
	font-family: var(--spf-num);
	font-size: 24px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--spf-deep);
	word-break: break-all;
}

.spf .spf-done__p {
	margin: 0 0 10px;
	font-size: 15.5px;
}

.spf .spf-done__p--em {
	padding: 12px 16px;
	font-weight: 700;
	background: var(--spf-paper2);
	border-left: 3px solid var(--spf-blue);
}

.spf .spf-done__tel {
	margin: 16px 0 0;
	font-size: 15.5px;
}

.spf .spf-done__tel a {
	white-space: nowrap;
	font-size: 19px;
	font-weight: 700;
	color: var(--spf-deep);
}

/* --- スマートフォン --- */

@media (max-width: 640px) {
	.spf .spf-form .spf-sec {
		padding: 20px 16px 22px;
		margin-bottom: 14px;
	}

	.spf .spf-form .spf-sec__h {
		font-size: 17.5px;
	}

	.spf .spf-form .spf-step {
		margin-bottom: 24px;
	}

	.spf .spf-form .spf-step__h {
		gap: 4px 10px;
		margin-bottom: 8px;
		font-size: 17px;
	}

	.spf .spf-form .spf-sec__sub {
		font-size: 16px;
	}

	.spf .spf-form .spf-sec__no::before {
		font-size: 19px;
		margin-right: 9px;
	}

	.spf .spf-form .spf-types__l,
	.spf .spf-form .spf-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.spf .spf-form .spf-types {
		gap: 14px;
	}

	.spf .spf-form .spf-types__l {
		gap: 8px;
	}

	/* その他サービス：スマートフォンでは 2 列にすると「ピアノクリーニング」などが途中で折り返すため、
	   高さを抑えた 1 列のリストにする */
	.spf .spf-form .spf-types__g--compact .spf-types__l {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.spf .spf-form .spf-types__g--compact .spf-type {
		min-height: 46px;
		padding: 8px 14px;
	}

	.spf .spf-form .spf-type {
		min-height: 0;
	}

	.spf .spf-form .spf-grid {
		gap: 20px;
	}

	.spf .spf-form .spf-field--half {
		grid-column: 1 / -1;
	}

	.spf .spf-form .spf-type {
		padding: 12px 14px;
	}

	.spf .spf-form .spf-choices {
		flex-direction: column;
		gap: 8px;
	}

	.spf .spf-form .spf-choice {
		display: flex;
		width: 100%;
	}

	.spf .spf-form .spf-submit__btn {
		max-width: none;
	}

	.spf .spf-done {
		padding: 24px 18px;
	}

	.spf .spf-done__nov {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.spf .spf-form .spf-type,
	.spf .spf-form .spf-choice,
	.spf .spf-form .spf-input {
		transition: border-color 0.15s, background-color 0.15s;
	}
}

/* ==========================================================================
   採用応募フォーム（1.6.0）
   ご依頼・お問い合わせと同じ部品（白いパネル・番号つきの見出し・送信ボタン）を使い、
   履歴書の欄と、短い選択肢（普通自動車免許 あり／なし）の並びだけを足す。
   ========================================================================== */

.spf .spf-form .spf-resume__picked {
	margin: 10px 0 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--spf-deep);
	overflow-wrap: anywhere;
}

.spf .spf-form .spf-resume__clear {
	min-height: 44px;
	margin-top: 8px;
	padding: 6px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--spf-ink2);
	background: var(--spf-paper);
	border: 1px solid var(--spf-line);
	border-radius: 999px;
	cursor: pointer;
}

.spf .spf-form .spf-resume__clear:hover,
.spf .spf-form .spf-resume__clear:focus-visible {
	color: var(--spf-deep);
	border-color: var(--spf-deep);
}

/* 「あり／なし」の 2 択はスマートフォンでも横に 2 つ並べる（縦に長くしない） */
@media (max-width: 767px) {
	.spf--recruit .spf-form .spf-field[data-spf-field="car_license"] .spf-choices {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		flex-direction: row;
	}
}

/* Phase 4: 既存request内の条件確認 */
.spf-estimate-handoff { margin: 1.5rem 0; padding: 1.2rem; border-left: 4px solid #17699a; background: #f3f8fb; }
.spf-estimate-handoff p { margin: .75rem 0; }
.spf-estimate-handoff summary { cursor: pointer; padding: .8rem 0; font-weight: bold; }
.spf-estimate-handoff fieldset { margin: 1rem 0; padding: .75rem; border: 1px solid #ccdbe4; }
.spf-estimate-field { display: block; margin: .75rem 0; }
.spf-estimate-field select { display: block; width: 100%; min-height: 48px; font-size: 16px; margin-top: .3rem; }
.spf-estimate-handoff[hidden] { display: none; }