@charset "UTF-8";
/* ============================================================
   お問い合わせフォーム（Snow Monkey Forms）
   トップページと同じ配色に揃える。
   読み手が50〜60代中心なので、文字・入力欄・タップ領域は
   一般的なフォームよりひと回り大きく取っている。
   ============================================================ */

/* 進行表示（.smf-progress-tracker）は .smf-form の外、
   <form class="snow-monkey-form"> の直下にある。
   トークンは外側の form に置かないと進行表示まで届かない。 */
.snow-monkey-form {
	--f-orange: #F28C1B;
	--f-primary: #A94F08;
	--f-brown: #5A3620;
	--f-text: #3B2A22;
	--f-sub: #75685F;
	--f-bg: #FFF9F1;
	--f-border: #E5D5C2;

	max-width: 720px;
	margin-inline: auto;
	color: var(--f-text);
	font-size: 1rem;
	line-height: 1.9;
}

/* ---------- 進行状況（入力 → 確認 → 完了） ---------- */
.smf-progress-tracker {
	display: flex; justify-content: center; align-items: flex-start;
	gap: 0; margin: 0 0 2.6rem; padding: 0; list-style: none;
	counter-reset: none;
}
.smf-progress-tracker__item {
	position: relative;
	flex: 1 1 0; max-width: 11rem;
	text-align: center;
	font-size: .82rem; font-weight: 700; color: var(--f-sub);
}
/* プラグイン側が ::before / ::after の両方で top:12px に線を描くため、
   自前の連結線と二重になる。まず両方を消してから引き直す。 */
.smf-progress-tracker__item::before,
.smf-progress-tracker__item::after { content: none; }

/* 項目間をつなぐ線。丸の中心の高さに合わせる */
.smf-progress-tracker__item + .smf-progress-tracker__item::before {
	content: ""; position: absolute; z-index: 0;
	top: 1.1rem; right: 50%; left: -50%;
	height: 2px; background: var(--f-border);
}
.smf-progress-tracker__item__number {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	width: 2.2rem; height: 2.2rem; margin: 0 auto .5em;
	border-radius: 50%;
	background: var(--f-border); color: #fff;
	font-size: .92rem; line-height: 1;
}
.smf-progress-tracker__item[aria-current="true"] { color: var(--f-brown); }
.smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
	background: var(--f-primary);
}

/* ---------- 項目 ---------- */
.smf-item {
	display: block;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--f-border);
}
.smf-item:first-of-type { padding-top: 0; }
.smf-item__col--label { margin-bottom: .55em; }
.smf-item__label__text {
	font-weight: 700; font-size: 1.02rem; color: var(--f-brown);
}

/* 必須／任意のバッジ。required は DOM に出ないので、
   functions.php が付けた is-required / is-optional を手がかりにする。 */
.smf-item__label__text::after {
	margin-left: .7em;
	padding: .15em .8em;
	border-radius: 999px;
	font-size: .72rem; font-weight: 700; letter-spacing: .04em;
	vertical-align: .1em; white-space: nowrap;
}
.smf-item.is-required .smf-item__label__text::after {
	content: "必須"; background: var(--f-primary); color: #fff;
}
.smf-item.is-optional .smf-item__label__text::after {
	content: "任意"; background: #EFE6DA; color: var(--f-sub);
}

.smf-item__description {
	margin: 0 0 .6em;
	font-size: .88rem; line-height: 1.7; color: var(--f-sub);
}

/* ---------- 入力欄 ---------- */
.snow-monkey-form :is(
	.smf-text-control__control,
	.smf-email-control__control,
	.smf-tel-control__control,
	.smf-url-control__control,
	.smf-select-control__control,
	.smf-textarea-control__control
) {
	box-sizing: border-box;
	width: 100%; max-width: 100%;
	padding: .85em 1em;
	background: #fff;
	border: 1px solid var(--f-border); border-radius: 8px;
	/* 16px 未満だと iOS が入力時に勝手に拡大するため下限を決めている */
	font-size: 1rem; line-height: 1.6; color: var(--f-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.snow-monkey-form .smf-textarea-control__control { min-height: 10rem; resize: vertical; }
.snow-monkey-form :is(input, select, textarea)::placeholder { color: #A99C91; }
.snow-monkey-form :is(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--f-primary);
	box-shadow: 0 0 0 3px rgba(169, 79, 8, .18);
}

/* selectの矢印。SWELL側の指定に流されないよう自前で描く */
.snow-monkey-form .smf-select-control { position: relative; display: block; }
.snow-monkey-form .smf-select-control__control {
	appearance: none; padding-right: 2.6em; cursor: pointer;
}
.snow-monkey-form .smf-select-control::after {
	content: ""; position: absolute; right: 1.1em; top: 50%;
	width: .5em; height: .5em;
	border-right: 2px solid var(--f-primary);
	border-bottom: 2px solid var(--f-primary);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* ---------- ラジオ・チェックボックス ---------- */
.snow-monkey-form :is(.smf-radio-buttons-control, .smf-checkboxes-control) {
	display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
}
.snow-monkey-form :is(.smf-label, .smf-radio-button-control, .smf-checkbox-control) {
	display: inline-flex; align-items: center; gap: .5em;
	cursor: pointer;
}
.snow-monkey-form :is(input[type="radio"], input[type="checkbox"]) {
	width: 1.3em; height: 1.3em; margin: 0;
	accent-color: var(--f-primary);
	cursor: pointer;
}

/* ---------- エラー ---------- */
.snow-monkey-form .smf-error-messages {
	margin-top: .5em;
	color: #A33F2F; font-size: .9rem; font-weight: 700;
}
.snow-monkey-form .smf-item:has(.smf-error-messages:not(:empty)) :is(input, select, textarea) {
	border-color: #A33F2F;
}

/* ---------- スパム対策（Cloudflare Turnstile） ----------
   ウィジェットの入れ物はプラグインが .snow-monkey-forms-turnstile で出力する
   （Cloudflare標準の .cf-turnstile ではない）。
   送信ボタンの下に左寄せで出るので、中央に揃えて余白を整える。 */
.snow-monkey-forms-turnstile {
	display: flex; justify-content: center;
	margin-top: 1.4rem;
}
.snow-monkey-forms-turnstile > div { max-width: 100%; }
.snow-monkey-forms-turnstile iframe { max-width: 100%; }

/* ---------- ボタン ---------- */
.smf-action {
	display: flex; justify-content: center; flex-wrap: wrap;
	gap: 1rem; margin-top: 2.4rem;
}
.snow-monkey-form .smf-button-control__control {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 16rem; padding: 1em 2.2em;
	background: var(--f-primary); color: #fff;
	border: 2px solid var(--f-primary); border-radius: 999px;
	font-size: 1.05rem; font-weight: 700; line-height: 1.4;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.snow-monkey-form .smf-button-control__control:hover {
	background: #8E4207; border-color: #8E4207;
	transform: translateY(-2px); box-shadow: 0 6px 18px rgba(90, 54, 32, .18);
}
.snow-monkey-form .smf-button-control__control:focus-visible {
	outline: 3px solid var(--f-brown); outline-offset: 3px;
}
/* 「戻る」は主役ではないので白抜きにして、送信ボタンと役割を分ける */
.snow-monkey-form [data-action="back"] .smf-button-control__control,
.snow-monkey-form .smf-button-control__control[data-action="back"] {
	background: #fff; color: var(--f-primary);
}
.snow-monkey-form .smf-button-control__control[data-action="back"]:hover {
	background: var(--f-bg); color: #8E4207;
}

/* ---------- 確認画面 ----------
   data-screen は内側の .smf-form ではなく、外側の <form> に付く。 */
.snow-monkey-form[data-screen="confirm"] .smf-item {
	background: var(--f-bg);
	border: 1px solid var(--f-border);
	border-radius: 8px;
	padding: 1.1rem 1.3rem;
	margin-bottom: .7rem;
}
.snow-monkey-form[data-screen="confirm"] .smf-item:first-of-type { padding-top: 1.1rem; }
/* 確認画面では入力し直せないので、必須/任意バッジは意味を持たない */
.snow-monkey-form[data-screen="confirm"] .smf-item__label__text::after { content: none; }
.snow-monkey-form[data-screen="confirm"] .smf-item__description { display: none; }
.snow-monkey-form[data-screen="confirm"] .smf-item__controls {
	font-size: 1.05rem; font-weight: 700; color: var(--f-text);
	overflow-wrap: anywhere;
}

/* ---------- 完了画面 ---------- */
.snow-monkey-form[data-screen="complete"] .smf-form {
	text-align: center;
	padding: 2.5rem 1.5rem;
	background: var(--f-bg);
	border: 1px solid var(--f-border); border-radius: 12px;
}

/* ---------- 狭い画面 ---------- */
@media (max-width: 620px) {
	.smf-progress-tracker { margin-bottom: 2rem; }
	.smf-progress-tracker__item { font-size: .74rem; }
	.smf-item { padding: 1.2rem 0; }
	.snow-monkey-form .smf-button-control__control { min-width: 100%; }
	.smf-action { gap: .7rem; }
}