/*
 * EC見積フォーム（/ec-estimate/、page ID 2920、
 * page-templates/page-ec-estimate.php）専用スタイル。
 *
 * 新しい色・spacing system等は増やさず、既存tokens.cssの値のみを使う。
 * 今回はフォーム機能の実装が主目的のため、大規模なデザイン作業はしない。
 * エラー色（#cf2e2e）は旧Snow Monkey Forms 2919のマークアップで
 * 使われていた値をそのまま踏襲している。
 */

.page-ec-estimate-main {
	padding-block: var(--space-section);
}

.ecform__inner {
	max-width: var(--width-narrow);
	margin-inline: auto;
	padding-inline: var(--space-m);
}

.ecform__title {
	font-family: var(--font-serif);
	/* 2026-09-18追記: このクラスにはfont-size指定が元々なく、UAデフォルトの
	   h1=2em（32px固定）がPC・スマホ問わず使われていた。通常固定ページの
	   .entry-title（style.css）と同じclamp()をそのまま再利用し、390px付近
	   でも縮小されるようにする。PC側（1180px以上）はclamp()の上限が現在の
	   UAデフォルトと同じ2rem(32px)のため見た目は変わらない。このファイルは
	   独自実装した8フォーム共通のCSSのため、この1箇所の変更で全フォーム
	   （入力・確認・完了の全ステップ）に反映される。 */
	font-size: clamp(1.625rem, 1.44rem + 0.76vw, 2rem);
	margin-bottom: var(--space-l);
}

.ecform__lead {
	margin-bottom: var(--space-l);
	color: var(--text-muted);
}

.ecform__form h2 {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-s);
	font-family: var(--font-serif);
	border-bottom: 1px solid var(--border-color);
	padding-bottom: var(--space-xs);
}

.ecform__field {
	margin-bottom: var(--space-m);
}

.ecform__field label {
	display: block;
	margin-bottom: var(--space-xs);
	font-weight: 600;
}

/*
 * checkbox-group（複数選択）の見出し。単一inputの<label>と同じ役割のため
 * 同じ太さ・余白に揃える（<span>のため`.ecform__field label`のセレクタは
 * 効かず、個別ルールが必要）。
 */
.ecform__field-legend {
	display: block;
	margin-bottom: var(--space-xs);
	font-weight: 600;
}

/*
 * フィールド直下の補足文（記入例・条件付き必須の案内等）。本文より
 * 控えめなトーンにするため、ecform__leadと同じmuted色を踏襲する。
 */
.ecform__field-note {
	display: block;
	margin-bottom: var(--space-xs);
	color: var(--text-muted);
	font-size: 0.9em;
}

.ecform__required {
	color: #cf2e2e;
	font-weight: 400;
	font-size: 0.85em;
}

.ecform__field input[type="text"],
.ecform__field input[type="email"],
.ecform__field input[type="tel"],
.ecform__field textarea {
	width: 100%;
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	font: inherit;
	background: var(--bg);
	color: var(--text);
}

.ecform__field input::placeholder,
.ecform__field textarea::placeholder {
	color: #8a8f96;
}

.ecform__field textarea {
	resize: vertical;
}

.ecform__error {
	display: block;
	margin-top: var(--space-xs);
	color: #cf2e2e;
	font-size: 0.9em;
}

.ecform__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ecform__field--checkbox label {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-weight: 400;
}

.ecform__field--checkbox input[type="checkbox"] {
	flex-shrink: 0;
	margin: 0;
}

/*
 * 「・」で始まる注意書き共通スタイル。文章・折り返し位置が変わっても
 * 2行目以降が「・」の位置ではなく本文の開始位置に揃うよう、
 * 「・」を疑似要素で左側に固定配置するハンギングインデント構成にする。
 */
.ecform__notes {
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: 0;
}

.ecform__notes li {
	position: relative;
	padding-left: 1.2em;
	margin-bottom: var(--space-xs);
	color: var(--text-muted);
}

.ecform__notes li:last-child {
	margin-bottom: 0;
}

.ecform__notes li::before {
	content: "・";
	position: absolute;
	left: 0;
}

.ecform__confirm {
	margin-bottom: var(--space-l);
	border-top: 1px solid var(--border-color);
}

.ecform__confirm-row {
	display: grid;
	grid-template-columns: 10rem 1fr;
	gap: var(--space-s);
	padding-block: var(--space-s);
	border-bottom: 1px solid var(--border-color);
}

.ecform__confirm-row dt {
	font-weight: 600;
	color: var(--text-muted);
}

.ecform__confirm-row dd {
	margin: 0;
}

.ecform__actions {
	display: flex;
	gap: var(--space-s);
	flex-wrap: wrap;
}

.ecform__button {
	display: inline-block;
	padding: var(--space-s) var(--space-l);
	border: 1px solid var(--text);
	border-radius: 4px;
	background: var(--text);
	color: var(--bg);
	font: inherit;
	cursor: pointer;
	transition: opacity var(--transition-duration) var(--ease-in);
}

.ecform__button:hover {
	opacity: 0.8;
}

.ecform__button--back {
	background: transparent;
	color: var(--text);
}

.ecform__notice {
	padding: var(--space-m);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	margin-bottom: var(--space-l);
}

.ecform__notice--error {
	border-color: #cf2e2e;
	color: #cf2e2e;
}

.ecform__complete {
	line-height: 1.8;
}

@media (max-width: 600px) {
	.ecform__confirm-row {
		grid-template-columns: 1fr;
	}
}

/*
 * ホームステイ同行サポートお問い合わせフォーム（/homestay-contact/）下部の
 * 関連ページ導線（戻る/詳細1/詳細2/料金）専用。コアのButtonsブロックは
 * 通常display:flexで横並びになるが、このテーマのblocks.cssには
 * .wp-block-buttonsのflexレイアウト指定がなく、このページだけボタンが
 * 縦に不揃いに並んでいた。ボタン自体の色・形状（blocks.css側の既存指定）
 * は変更せず、レイアウトのみをID640のmain要素配下に限定して修正する
 * （他ページ・他フォームには影響しない）。
 */
.page-homestay-contact-main .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin-top: var(--space-xl);
}