@charset "utf-8";
/* =========================================================
   form.css — フォーム（/contact/ ・/contact/estimate/ ・/download/）
   フォーム本体は c-form 系（components.css）。ここは置き方と周辺だけ
   ========================================================= */

/* ---- フォームと補足情報の2カラム ------------------------------------------ */
.p-formLayout {
	display: grid;
	gap: var(--sp-m);
}

.p-formSide {
	display: grid;
	gap: var(--sp-s);
	align-content: start;
}

.p-formSide-box {
	display: grid;
	gap: 0.6em;
	padding: var(--card-pad-sm);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);

	& .p-formSide-pic { aspect-ratio: 16 / 10; background-color: var(--cl-bg); overflow: clip; }
	& .p-formSide-pic img { width: 100%; height: 100%; object-fit: cover; }
	& .p-formSide-title { font-size: var(--fs-m); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
	& .c-txt { font-size: var(--fs-ui); line-height: var(--lh-body); }
	& .c-list { font-size: var(--fs-ui); line-height: var(--lh-body); }
}

@media print, screen and (min-width: 640px) {
	/* 本文は読みやすい幅を保ち、補足は右に細く置く */
	.p-formLayout { grid-template-columns: minmax(0, 1fr) 30rem; gap: var(--sp-l); align-items: start; }
}

/* ---- サンクスページの次の一手 --------------------------------------------- */
/* 完了画面の下に置く「次の一手」。グレー帯で視認性を上げるが、
   見出しは主役（ありがとうございました）より一段小さくして主従を保つ */
.p-thanksNext {
	& .p-thanksNext-title {
		margin-block-end: var(--sp-s);
		font-size: var(--fs-l);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		text-align: center;
	}
}

/* ---- 資料ダウンロード ------------------------------------------------------
   ハイブリッド運用（D58）：軽い資料は直DL、濃い資料はフォーム必須 */
/* 資料の一覧は共通パーツ c-mediaList / c-media _thumb（components.css）に置き換えた */