/* =====================================================================
 * contact.css — お問い合わせ（2f）と完了ページ（2f thanks）だけの指定
 * ---------------------------------------------------------------------
 * 2f のデザインは Figma に無い（Figma にあるのは交換サービス1枚だけ）。
 * 交換ページで確定した部品と数値だけを使って組んでいる。
 * 語彙は ~/journal/projects/sakabo/notes/2026-09-10_デザイン横展開の進め方.md §2 のカタログどおり。
 *
 * 【面の配分】
 *   FV       青の箱（写真なし。電話のオレンジを最も強く見せる）
 *   フォーム  全幅の青（水玉）に白い箱 ← このページの主役
 *   LINE     白い箱（.err-line。components.css）
 *   FAQ      白いカード＋グレーの水玉（.faq-design）
 *   末尾     電話する／フォームへ
 *
 * 入力欄の見た目は .ct-form の中だけに閉じている。素の .field は
 * ほかのページ（絞り込みフォームなど）でも使っているため、
 * pages.css 側の指定はそのまま残してある。
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FV
 * ------------------------------------------------------------------- */
/* 修理TOP と同じ形（hero-v2.css・写真なし）。ここでは見出しの大きさだけ決める（2026-10-12 A案）。 */
.hero--contact .hero__title { font-size: 20px; line-height: 1.4; }
/* 間隔は .hero__body の gap で取るので、個別の余白は消す。 */
.hero--contact .hero__sub { margin: 0; }

/* 「お急ぎの方はお電話が最速です」。電話ボタンの見出しにあたる1行。 */
.ct-tel-lead {
	/* 下の電話ボタンの見出しなので、.hero__body の gap より詰めて置く。 */
	margin-bottom: -8px;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: #fff;
}

/* ---------------------------------------------------------------------
 * 入力フォーム（青い面の上の白い箱）
 * ワイヤー 2f の制作メモ「1カラム・ラベル上・必須バッジ赤」に合わせる。
 * ------------------------------------------------------------------- */
/* 1カラム。横に広い画面でも入力欄を伸ばしきらない。
 * 1行が長いほど、次の行の頭を探すのに目が戻る距離が伸びる。 */
.ct-form__box { max-width: 800px; margin-inline: auto; }
.ct-form .contact-form { display: grid; gap: 20px; }
.ct-form .field { display: grid; gap: 8px; }

/* ラベルは見出しと同じ濃紺。入力欄の上に置く（制作メモ）。 */
.ct-form .field__label {
	font-size: 16px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 必須バッジは赤（制作メモ）。ほかのボタン・バッジと同じ丸いピル型（2026-10-12 A案）。 */
.ct-form .req {
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 100px;
	background: var(--fig-red);
	color: #fff;
	font-size: 12px;
	font-weight: var(--fw-bold);
	vertical-align: 2px;
}

/* 入力欄。枠は修理TOPのエラーコード検索と同じ（2pxの水色・角丸6）。 */
.ct-form .field__input {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--fig-blue-30);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	/* 16px を下回ると iPhone が入力時に画面を拡大する。50〜70代の
	 * 主要ユーザーにとって、拡大されたまま戻らないのは離脱要因になる。 */
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-ink);
}
.ct-form .field__input:focus {
	outline: 2px solid var(--fig-blue-40);
	outline-offset: 1px;
}
/* 選択欄はブラウザの矢印を消し、1つだけ描く（選択肢に「▾」の文字を入れていたため、矢印が2つ出ていた）。 */
.ct-form select.field__input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230b56a2' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
}
.ct-form select.field__input:disabled { background-color: var(--fig-gray-10); }
/* 写真：素のファイル選択は見えなくし（押せる状態のまま）、点線の枠（label）を押す場所にする。 */
.ct-form .field__file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ct-form .field__photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 22px 16px;
	border: 2px dashed var(--fig-blue-30);
	border-radius: 8px;
	background: var(--fig-blue-20);
	color: var(--fig-blue-60);
	text-align: center;
	cursor: pointer;
}
.ct-form .field__photo b { font-size: 18px; font-weight: var(--fw-bold); }
.ct-form .field__photo small { font-size: 13px; font-weight: var(--fw-medium); color: var(--fig-gray-70); overflow-wrap: anywhere; }
.ct-form .field__file:focus-visible + .field__photo { outline: 2px solid var(--fig-blue-40); outline-offset: 1px; }
.ct-form .field--error .field__photo { border-color: var(--fig-red); background: #fffafa; }
.ct-form .field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-form .field__help {
	font-size: 13px;
	line-height: 1.7;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-50);
}

/* エラーはインラインで欄のすぐ下に出す（制作メモ）。 */
.ct-form .field--error .field__input { border-color: var(--fig-red); background: #fffafa; }
.ct-form .field__error { color: var(--fig-red); font-size: 14px; font-weight: var(--fw-bold); }
.ct-form .form-notice { border-radius: 6px; }

/* 型番詳細（2o）から引き継いだ機種名の1行。 */
.ct-form .contact-form__model {
	padding: 12px 16px;
	border-radius: 6px;
	background: var(--fig-blue-20);
	font-size: 15px;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.ct-form .contact-form__model strong { color: var(--fig-blue-60); }

/* 送信ボタン。ほかのボタン（.fbtn--fill-dark）と同じ青・丸いピル型・影なし（2026-10-12 A案）。
 * オレンジにはしない。オレンジは数字と電話番号のための色で、
 * 同じ画面の電話ボタンと役割が混ざる。 */
.ct-submit {
	width: 100%;
	margin-top: 4px;
	padding: 18px 12px;
	border: none;
	border-radius: 100px;
	background: var(--fig-blue-60);
	color: #fff;
	font: inherit;
	/* 幅375で「（無料）」が次の行に落ちたので、狭い画面では少し小さくする。 */
	font-size: min(19px, 4.6vw);
	line-height: 1.3;
	font-weight: var(--fw-bold);
	white-space: nowrap;
	transition: transform .15s ease;
}
.ct-submit:hover { transform: translateY(-2px); }
.ct-submit[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------------------------------------------------------------------
 * 完了ページ（2f thanks）
 * ------------------------------------------------------------------- */
.thanks-box { max-width: 800px; margin-inline: auto; text-align: center; align-items: center; }
.thanks__lead {
	font-size: 17px;
	line-height: 1.8;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.thanks__note {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 電話番号だけオレンジ（サイト共通の決めごと）。 */
.thanks__tel {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.thanks__tel a {
	font-family: var(--font-num);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--c-warm);
	white-space: nowrap;
}

/* =====================================================================
 * PC（600 以上。交換ページと同じ）
 * ===================================================================== */
@media (min-width: 600px) {
	/* --- FV --- */
	.hero--contact .hero__title { font-size: max(calc(22 * var(--ff)), calc(36 * var(--u))); }
	.ct-tel-lead { font-size: max(calc(15 * var(--ff)), calc(20 * var(--u))); margin-bottom: calc(-16 * var(--u)); }

	/* --- フォーム --- */
	.ct-form .contact-form { gap: calc(28 * var(--u)); }
	.ct-form .field__label { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	.ct-form .req { font-size: max(calc(12 * var(--ff)), calc(13 * var(--u))); padding: calc(2 * var(--u)) calc(10 * var(--u)); }
	.ct-form select.field__input { padding-right: calc(52 * var(--u)); background-position: right calc(20 * var(--u)) center; }
	.ct-form .field__photo { padding: calc(28 * var(--u)) 16px; }
	.ct-form .field__photo b { font-size: max(calc(17 * var(--ff)), calc(22 * var(--u))); }
	.ct-form .field__photo small { font-size: max(calc(13 * var(--ff)), calc(15 * var(--u))); }
	.ct-form .field__input { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding: calc(16 * var(--u)) calc(20 * var(--u)); }
	.ct-form .field__row { gap: calc(16 * var(--u)); }
	.ct-form .field__help { font-size: max(calc(14 * var(--ff)), calc(15 * var(--u))); }
	.ct-form .contact-form__model { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding: calc(14 * var(--u)) calc(20 * var(--u)); }
	.ct-submit { max-width: calc(600 * var(--u)); margin-inline: auto; padding: calc(20 * var(--u)) calc(32 * var(--u)); font-size: max(calc(18 * var(--ff)), calc(26 * var(--u))); margin-top: calc(8 * var(--u)); }

	/* --- 完了ページ --- */
	.thanks__lead { font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); }
	.thanks__note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.thanks__tel { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.thanks__tel a { font-size: max(calc(24 * var(--ff)), calc(36 * var(--u))); }
}

/* ---------------------------------------------------------------------
 * LINE の案内（このページだけの形。2026-10-12、2案から B案に決定）
 * 共通の白い箱（components.css の .err-line）を薄い緑にし、手順3つと緑のピルのボタンを置く。
 * エラーコード個別（2e）の LINE＋電話の箱は変えていない。
 * ------------------------------------------------------------------- */
.err-line--steps .err-line__box { background: #ebf9f0; border-color: var(--c-line); }
.err-line--steps .ct-seg { display: inline-block; }
.ct-line-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.ct-line-steps li { display: flex; align-items: center; }
.ct-line-step { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px; background: #fff; color: #1d7a45; font-size: 14px; font-weight: var(--fw-bold); }
.ct-line-step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-line); color: #fff; font-family: var(--font-num); font-size: 13px; }
/* 手順のあいだの矢印はピルの外に置く。
 * スマホは横に折り返すと矢印の向きが合わなくなるので、ピルを縦に積んで下向きの矢印を挟む
 * （2026-10-12 は矢印を出さなかったが、2026-10-15 jojiさんの指示でスマホにも付けた）。 */
.ct-line-steps { flex-direction: column; align-items: center; gap: 2px; }
.ct-line-steps li { flex-direction: column; }
.ct-line-steps li + li::before { content: "›"; display: block; transform: rotate(90deg); margin-bottom: 2px; color: var(--c-line); font-size: 26px; font-weight: 800; line-height: 1; }
/* ボタンはほかと同じ丸いピル型・影なし。色は LINE の指定色。 */
.ct-line-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; min-height: 56px; padding: 0 36px; border-radius: 100px;
	background: var(--c-line); color: #fff; font-size: 17px; font-weight: var(--fw-bold); text-decoration: none;
	transition: transform .15s ease;
}
.ct-line-btn::after { content: "→"; }
.ct-line-btn:hover { transform: translateY(-2px); color: #fff; }
@media (min-width: 600px) {
	.ct-line-steps { flex-direction: row; gap: calc(12 * var(--u)); }
	.ct-line-steps li { flex-direction: row; }
	.ct-line-steps li + li::before { transform: none; margin: 0 calc(12 * var(--u)) 0 0; font-size: max(calc(18 * var(--ff)), calc(24 * var(--u))); }
	.ct-line-step { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); padding: calc(8 * var(--u)) calc(18 * var(--u)); }
	.ct-line-btn { width: auto; min-height: calc(72 * var(--u)); padding: 0 calc(44 * var(--u)); font-size: max(calc(16 * var(--ff)), calc(22 * var(--u))); }
}