/* ==========================================================
   東神ハウス：Snow Monkey Forms を MW WP Form のときと同じ見た目にする
   （テーマ style.css の #formArea まわりの指定を写している）
   入力欄・進み具合（ul.formFlow）は #formArea の中にあるので、テーマの指定がそのまま効く。
   ここでは、項目の並び・必須の ※・プルダウン・ボタンを写す。
   色：項目名 #3a6a4b / ボタン #2c322f / 戻る 白＋緑の枠 / 必須 crimson
   ========================================================== */

/* ---------- 項目：スマホは項目名が上・入力欄が下、768px 以上は左に項目名（250px・右寄せ）、右に入力欄 ---------- */
#formArea .snow-monkey-form {
	max-width: none;
}
#formArea .smf-form .smf-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	border: none;
}
#formArea .smf-form .smf-item + .smf-item {
	margin-top: 0;
}
#formArea .smf-form .smf-item__col {
	padding: 0;
}
/* dt と同じ */
#formArea .smf-form .smf-item__col--label {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 5px 0 0 0;
	margin: 0 0 15px;
	text-align: left;
}
/* dd と同じ */
#formArea .smf-form .smf-item__col--controls {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0 0 15px;
	align-self: center;
}
#formArea .smf-form .smf-item__label {
	margin: 0;
	font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", serif; /* 今の dt と同じ明朝体 */
	font-size: 18px;
	font-weight: 400;
	color: #3a6a4b;
}
#formArea .smf-form .smf-item__label label {
	font-family: inherit;
	font-weight: 400;
	margin: 0;
}
/* 必須の ※（.att と同じ） */
#formArea .smf-form .smf-item.is-required .smf-item__label__text::after {
	content: "※";
	color: crimson;
	font-size: 12px;
}
#formArea .smf-form .smf-item__controls {
	width: 100%;
}
#formArea .smf-form .smf-text-control,
#formArea .smf-form .smf-textarea-control {
	display: block;
	width: 100%;
}
@media print, screen and (min-width: 768px) {
	#formArea .smf-form .smf-item__col--label {
		flex: 0 0 250px;
		max-width: 250px;
		text-align: right;
	}
	#formArea .smf-form .smf-item__col--controls {
		flex: 0 0 calc(100% - 280px);
		max-width: calc(100% - 280px);
	}
}

/* お問い合わせの「個人情報の取り扱い」は、確認画面でだけ隠れる（今のページの .mw_wp_form_confirm .dispNone と同じ） */
#formArea .snow-monkey-form[data-screen="confirm"] .dispNone {
	display: none;
}

/* ---------- 入力欄（テーマの input[type=text] などと同じ。tel は同じ指定がないので写す） ---------- */
#formArea .smf-form input[type="tel"] {
	padding: 8px 0.5em 8px 10px;
	margin: 0;
	background: #EEEEEE;
	width: 100%;
	max-width: 280px;
	overflow: hidden;
	border: 1px solid #EEEEEE;
	border-radius: 0;
	box-shadow: none;
	font-size: inherit;
	line-height: 1.15;
}
#formArea .smf-form input[type="tel"]:hover,
#formArea .smf-form input[type="tel"]:focus {
	background: #fff;
}
#formArea .smf-form input[type="text"],
#formArea .smf-form input[type="email"],
#formArea .smf-form textarea {
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
	line-height: 1.15; /* テーマの normalize.css と同じ（Snow Monkey Forms の CSS が上書きするため戻す） */
	color: #000;
}
#formArea .smf-form textarea {
	display: inline-block;
	vertical-align: baseline;
}

/* ---------- お名前（姓・名・セイ・メイ：縦に並べる。今は ul.formname の li が 15px 字下げ） ---------- */
#formArea .smf-form .mb5 {
	margin: 0 0 5px;
	font-size: 14px;
}
#formArea .smf-form .smf-item.is-name .smf-placeholder {
	padding-left: 15px;
	margin: 0 0 5px;
}
#formArea .smf-form .smf-item.is-name .smf-placeholder[data-name="first_name"],
#formArea .smf-form .smf-item.is-name .smf-placeholder[data-name="first_kana"] {
	margin-bottom: 20px; /* 今の ul.formname の下の余白 */
}

/* ---------- プルダウン（テーマの #formArea select と同じ、標準の見た目） ---------- */
#formArea .smf-form .smf-select-control {
	display: inline-block;
	width: auto;
}
#formArea .smf-form .smf-select-control__toggle {
	display: none;
}
#formArea .smf-form select {
	-webkit-appearance: auto;
	appearance: auto;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 0 5px; /* スマホは下に 5px（768px 以上は 0。下で戻す） */
	padding: 0.4em 0 0.3em 0.5em;
	font-size: 14px;
	color: #000;
	background: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- 個人情報の取り扱い（来店予約：項目名のとなりに文章） ---------- */
#formArea .smf-form .smf-privacy {
	margin: 0;
	font-size: 14px;
}

/* ---------- 入力エラー ---------- */
#formArea .smf-error-messages {
	margin: 5px 0 0;
	color: crimson;
	font-size: 14px;
}

/* ---------- ファイル（添付画像：今の標準のファイル欄と同じ大きさ。下の余白 10px） ---------- */
#formArea .smf-form .smf-file-control {
	display: block;
	margin: 0 0 10px;
}
#formArea .smf-form .smf-file-control__control {
	margin: 0;
}
#formArea .smf-form .smf-file-control > label {
	display: flex;
	align-items: center;
	height: 22px;
	font-size: 14px;
	font-weight: 400;
}
#formArea .smf-form .smf-file-control__label {
	height: 22px;
	padding: 0 6px;
	line-height: 20px;
	font-size: 14px;
	box-sizing: border-box;
}

/* ---------- ボタン（#formArea .btnArea .submit / .return と同じ。濃い灰色の角丸） ---------- */
#formArea .smf-action {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 30px 0 0; /* 今のボタンは、最後の項目の下 30px にある */
}
@media print, screen and (min-width: 768px) {
	#formArea .smf-form select {
		margin-bottom: 0;
	}
}
#formArea .smf-action .smf-button-control {
	flex: 0 0 100%;
	display: flex;
	margin: 0 0 25px;
}
#formArea .smf-action .smf-button-control__control {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 290px;
	height: 60px;
	margin: 0 auto;
	padding: 2px 0 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	color: #fff;
	background: #2c322f;
	border: 1px solid #2c322f;
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
	transition: 0.3s ease-in;
}
/* 今のボタンの矢印は、中身が空で表示されていない（実際の表示で確認済み）ので、矢印は付けない */
#formArea .smf-action .smf-button-control__control:hover,
#formArea .smf-action .smf-button-control__control:focus {
	color: #3a6a4b;
	background: #fff;
	border-color: #3a6a4b;
}
@media print, screen and (min-width: 768px) {
	#formArea .smf-action .smf-button-control {
		margin-bottom: 0;
	}
}

/* ---------- 確認画面：「戻る」（白＋緑の枠）と「送信する」を左右に並べる ---------- */
#formArea .smf-action:has([data-action="back"]) {
	flex-wrap: wrap;
	justify-content: space-between;
}
#formArea .smf-action .smf-button-control:has([data-action="back"]),
#formArea .smf-action .smf-button-control:has([data-action="complete"]) {
	flex: 0 0 48%;
}
#formArea .smf-action .smf-button-control__control[data-action="back"] {
	width: 100%;
	max-width: 320px;
	margin: 0 0 0 auto;
	color: #3a6a4b;
	background: #fff;
	border: 1px solid #3a6a4b;
}
#formArea .smf-action .smf-button-control__control[data-action="back"]:hover,
#formArea .smf-action .smf-button-control__control[data-action="back"]:focus {
	color: #fff;
	background: #3a6a4b;
	border-color: #3a6a4b;
}
#formArea .smf-action .smf-button-control__control[data-action="complete"] {
	margin: 0 auto 0 0;
}