@charset "utf-8";
/*
 * 予約・お問い合わせフォーム（入力・確認・完了）
 * 色はサイトに合わせる: 緑 #599602 ／ 赤 #E83828
 * ★指で押せる大きさにする（入力欄とボタンは高さ48px以上）
 */
.af-formpage { max-width: 820px; margin: 0 auto; padding: 24px 16px 80px; }
.af-formpage__head h1 { font-size: clamp(20px, 2.4vw, 30px); margin: 0 0 10px; padding: 0 0 8px 12px; border-left: 6px solid #599602; border-bottom: 1px solid #ddd; }
.af-formpage__lead { font-size: 15px; line-height: 1.9; color: #444; margin: 0 0 20px; }
.af-formpage__lead a { color: #1a6fb5; text-decoration: underline; width: auto; }

/* 手順（1入力→2確認→3完了） */
.af-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; font-size: 13px; }
.af-steps li { flex: 1; text-align: center; padding: 10px 4px; background: #f2f2f2; color: #888; border-radius: 4px; }
.af-steps .is-current { background: #599602; color: #fff; font-weight: 700; }

/* 入力欄 */
.af-field { margin: 0 0 26px; }
.af-field__label { display: block; font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.af-req { display: inline-block; margin-left: 8px; padding: 2px 8px; background: #E83828; color: #fff; border-radius: 3px; font-size: 11px; font-weight: 400; vertical-align: 2px; }
.af-note2 { display: inline-block; margin-left: 6px; font-size: 12px; color: #777; font-weight: 400; }
.af-field__err { margin: 0 0 8px; color: #c0170a; font-size: 14px; font-weight: 700; }
.af-field.is-error input, .af-field.is-error textarea { border-color: #c0170a; background: #fff8f7; }

.af-form input[type="text"], .af-form input[type="email"], .af-form input[type="tel"], .af-form textarea {
	width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; line-height: 1.6;
	border: 1px solid #bfbfbf; border-radius: 4px; background: #fff; min-height: 48px;
}
.af-form textarea { min-height: 140px; resize: vertical; }
.af-form input:focus, .af-form textarea:focus { outline: 2px solid #599602; outline-offset: 1px; border-color: #599602; }

/* ラジオは1行1つ（指で押しやすく・読み間違えないように） */
.af-radios { display: flex; flex-direction: column; gap: 8px; }
.af-radio { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #dcdcdc; border-radius: 4px; background: #fff; cursor: pointer; font-size: 15px; min-height: 48px; box-sizing: border-box; }
.af-radio:hover { border-color: #599602; background: #f8fbf3; }
.af-radio input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.af-radio input:checked + span { font-weight: 700; color: #3f6b02; }

/* ボタン */
.af-btn { display: inline-block; padding: 16px 40px; min-height: 52px; border: 0; border-radius: 999px; background: #599602; color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; width: auto; height: auto; text-decoration: none; }
.af-btn:hover { background: #4b8001; }
.af-btn--sub { background: #8a8a8a; }
.af-btn--sub:hover { background: #757575; }
.af-form__submit { margin: 36px 0 12px; text-align: center; }
.af-form__privacy { margin: 0; text-align: center; font-size: 13px; color: #777; }

/* お知らせ・エラーの帯 */
.af-form-alert { margin: 0 0 24px; padding: 14px 18px; border: 1px solid #f0b8b2; background: #fff5f4; border-radius: 4px; font-size: 15px; line-height: 1.8; }
.af-form-alert a { color: #1a6fb5; text-decoration: underline; width: auto; }

/* 確認画面 */
.af-confirm { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 32px; }
.af-confirm th, .af-confirm td { border: 1px solid #ddd; padding: 14px 16px; text-align: left; vertical-align: top; line-height: 1.8; }
.af-confirm th { width: 34%; background: #f4f7ee; font-weight: 700; }
.af-none { color: #999; }
.af-confirm__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

@media screen and (max-width: 600px) {
	.af-steps { font-size: 12px; }
	.af-confirm, .af-confirm tbody, .af-confirm tr, .af-confirm th, .af-confirm td { display: block; width: auto; }
	.af-confirm th { border-bottom: 0; }
	.af-confirm td { border-top: 0; margin-bottom: 12px; }
	.af-confirm__btns { flex-direction: column-reverse; align-items: stretch; }
	.af-btn { width: 100%; box-sizing: border-box; }
}


/* ───── 予約希望日時（2026-09-12 追加） ─────
 * 第1〜第3希望を fieldset でひとまとめにし、**「その他ご質問」以外を選んだときだけ出す**。
 * 何も選んでいない最初の状態では出さない（2026-09-12 門田さん指摘で直した）。
 *
 * ★出し入れは CSS の :has() だけで行う（JSは使わない）。
 *   :has() が使えない環境では @supports のブロックごと読み飛ばされ、**常に見えている**側に
 *   倒れる。隠れたまま必須になって送れなくなる、という詰まり方を避けるため（共通の教訓69）。
 *   「その他ご質問」のとき値を捨てるのはサーバー側の仕事（共通の教訓64）。
 *
 * ★日付と時刻の枠には小さな見出しを付けている。
 *   iPhone の Safari は <input type="date"> が空のとき中に何も表示せず、
 *   placeholder 属性も効かない（type=date では無視される）ので、枠の上に出す。
 */
.af-group { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.af-group__legend { display: block; width: 100%; padding: 0; margin: 0 0 12px; font-weight: 700; font-size: 15px; }
.af-group .af-field { margin: 0 0 18px; }
.af-group .af-field:last-child { margin-bottom: 0; }
.af-group .af-field__label { font-weight: 400; font-size: 14px; color: #444; }

.af-visit { display: flex; flex-wrap: wrap; gap: 10px; }
.af-visit__col { flex: 1 1 220px; min-width: 0; }
.af-visit__col--time { flex: 0 1 170px; }
.af-visit__cap { display: block; margin: 0 0 4px; font-size: 12px; color: #777; }

.af-form input[type="date"], .af-form select {
	width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; line-height: 1.6;
	border: 1px solid #bfbfbf; border-radius: 4px; background: #fff; color: #222; min-height: 48px;
}
/*
 * ★iPhone の Safari は <input type="date"> に「中身の幅」ぶんの最小幅を持たせるので、
 *   width:100% を指定しても枠が画面の外へはみ出す（2026-09-26 門田さんがiPhoneで発見・v0.12.3）。
 *   標準の見た目（appearance）を外すと最小幅が無くなり、親の幅に収まる。
 *   文字は既定で中央寄せになるので左に寄せ、空のときに高さが潰れないよう min-height を持たせる。
 */
.af-form input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; }
.af-form input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.6em; }
.af-form input[type="date"]:focus, .af-form select:focus { outline: 2px solid #599602; outline-offset: 1px; border-color: #599602; }
.af-field.is-error select { border-color: #c0170a; background: #fff8f7; }

@supports selector(:has(*)) {
	.af-group--visit { display: none; }
	.af-form:has(input[data-af-show-visit]:checked) .af-group--visit { display: block; }
}

@media screen and (max-width: 600px) {
	.af-visit__col, .af-visit__col--time { flex: 1 1 100%; }
}