/* ==========================================================
   タクセル：Snow Monkey Forms を MW WP Form のときと同じ見た目にする
   （テーマ expert の style.css の #formArea dl・.datepicker・.formPrivacy-policy を前提にする）
   PC：左に項目名 250px（右寄せ・太字、必須は赤い「※」）、30px あけて右に入力欄 / スマホ：縦に並べる
   色：必須 crimson / 入力欄 #EEE / ボタン 白に #333 の枠、乗せると深緑 #114225
   ========================================================== */

/* 「※は必須項目です。」 */
#formArea .smf-form .smf-note {
	margin: 0 0 20px;
}
#formArea .smf-form .smf-note .att {
	color: crimson;
	font-size: 12px;
}

/* ---------- 項目（dl / dt / dd と同じ） ---------- */
#formArea .snow-monkey-form {
	max-width: none;
}
#formArea .smf-form .smf-item {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border: none;
}
/* dl の下の 30px（最後の項目の下） */
#formArea .smf-form .smf-item:not(:has(~ .smf-item)) {
	margin-bottom: 30px;
}
#formArea .smf-form .smf-item__col {
	padding: 0;
	margin: 0;
	max-width: none;
}
#formArea .smf-form .smf-item__col--label {
	flex: 0 0 250px;
	width: 250px;
}
#formArea .smf-form .smf-item__col--controls {
	flex: 0 0 calc(100% - 280px);
	width: calc(100% - 280px);
	margin-bottom: 15px;
}
/* 項目名（dt：右寄せ・太字） */
#formArea .smf-form .smf-item__label {
	display: block;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	text-align: right;
	color: #333;
}
#formArea .smf-form .smf-item__label label {
	font-weight: 700;
	margin: 0;
}
/* 必須（.att：赤い「※」を項目名のすぐ後ろに） */
#formArea .smf-form .smf-item.is-required .smf-item__label::after {
	content: "※";
	font-size: 12px;
	font-weight: 700;
	color: crimson;
}

/* ---------- 入力欄（テーマの #formArea input と同じ） ---------- */
#formArea .smf-form .smf-text-control,
#formArea .smf-form .smf-textarea-control {
	display: block;
	width: 100%;
}
#formArea .smf-form input[type="text"],
#formArea .smf-form input[type="email"],
#formArea .smf-form textarea {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	padding: 8px .5em 8px 10px;
	margin: 0;
	border: 1px solid #eeeeee;
	border-radius: 0;
	background: #eeeeee;
	box-shadow: none;
	font-size: inherit;
	line-height: 1.15; /* normalize.css と同じ（Snow Monkey Forms の CSS が上書きするため戻す） */
	color: #000;
}
#formArea .smf-form textarea {
	vertical-align: baseline;
}

/* ---------- ラジオ（性別・希望職種。ブラウザ標準の丸） ---------- */
#formArea .smf-form .smf-radio-buttons-control__control {
	display: flow-root;
}
#formArea .smf-form .smf-radio-buttons-control__control > .smf-label {
	display: inline-block;
	margin: 0 15px 5px 0;
}
#formArea .smf-form .smf-radio-button-control {
	display: inline;
	margin: 0;
}
#formArea .smf-form .smf-radio-button-control__control {
	-webkit-appearance: auto;
	appearance: auto;
	width: 13px;
	height: 13px;
	margin: 0;
	border: none;
	background: none;
	box-shadow: none;
	vertical-align: baseline;
}
#formArea .smf-form .smf-radio-button-control__control::before {
	display: none;
}
#formArea .smf-form .smf-radio-button-control__label {
	margin-left: 10px;
}

/* ---------- 生年月日（.datepicker：西暦［年］年［月］月［日］日） ---------- */
#formArea .smf-form .smf-item.is-birth .smf-item__controls {
	display: flex;
	align-items: center;
}
#formArea .smf-form .smf-placeholder[data-name^="birth_"] {
	margin-left: 20px;
}
#formArea .smf-form .smf-select-control {
	display: block;
	width: auto;
}
#formArea .smf-form .smf-select-control__toggle {
	display: none;
}
#formArea .smf-form .smf-select-control__control {
	-webkit-appearance: auto;
	appearance: auto;
	display: block;
	width: 80px;
	padding: .4em 0 .3em .5em;
	margin: 0 10px 5px 0;
	border: none;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-size: 16px;
	line-height: normal;
	color: #000;
}
#formArea .smf-form .birth-unit {
	white-space: nowrap;
}
/* 生年月日は3つで1つの項目なので、エラーは並びの下に1つだけ */
#formArea .smf-form .smf-placeholder[data-name^="birth_"] .smf-error-messages {
	display: none;
}
#formArea .smf-form .smf-item.is-birth:has(.smf-error-messages) .smf-item__controls {
	flex-wrap: wrap;
}
#formArea .smf-form .smf-item.is-birth:has(.smf-error-messages) .smf-item__controls::after {
	content: "生年月日を選択してください。";
	flex-basis: 100%;
	margin: 5px 0 0;
	color: crimson;
	font-size: 14px;
}

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

/* ---------- ボタン（白い丸に #333 の枠。確認画面は左に「戻る」、右に「送信する」） ---------- */
#formArea .smf-action {
	display: flex;
	justify-content: space-between;
	margin: 0;
}
#formArea .smf-action .smf-button-control {
	flex-basis: 100%;
	margin: 0;
}
#formArea .smf-action .smf-button-control__control {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	max-width: 290px;
	height: 60px;
	margin: 0 auto;
	padding: 1px 6px;
	border: 1px solid #333;
	border-radius: 30px;
	background: #fff;
	box-shadow: none;
	color: #333;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	cursor: pointer;
}
#formArea .smf-action .smf-button-control__control:hover,
#formArea .smf-action .smf-button-control__control:focus {
	color: #fff;
	background: #114225;
	border-color: #114225;
	transition: .3s;
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px) {
	#formArea .smf-form .smf-item__col--label,
	#formArea .smf-form .smf-item__col--controls {
		flex-basis: 100%;
		width: 100%;
	}
	#formArea .smf-form .smf-item__label {
		padding: 5px 0 0;
		margin: 0 0 15px;
		text-align: left;
	}
	#formArea .smf-form .smf-radio-buttons-control__control > .smf-label {
		display: block;
		margin: 5px 0 10px;
	}
	#formArea .smf-action {
		flex-wrap: wrap;
	}
	#formArea .smf-action .smf-button-control {
		margin: 0 0 25px;
	}
}
/* ラジオの間：MW WP Form は 15px＋項目の間の空白（PC） */
@media screen and (min-width: 768px) {
	#formArea .smf-form .smf-radio-buttons-control__control > .smf-label {
		margin-right: 19px;
	}
}

/* ---------- 確認画面（個人情報保護方針は MW WP Form と同じく出したまま） ---------- */
/* ボタン：PC は「戻る」と「送信する」を中央に並べる（.return は右寄せ＋10px、.submit は左寄せ） */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has([data-action="back"]) .smf-button-control__control {
	margin: 0 10px 0 auto;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has([data-action="complete"]) .smf-button-control__control {
	margin: 0 auto 0 0;
}
@media screen and (max-width: 767px) {
	/* スマホ：「戻る」の下に「送信する」、どちらも左寄せ */
	#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has([data-action="back"]) {
		margin: 0;
	}
	#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control .smf-button-control__control {
		margin: 0 !important;
	}
}

/* スマホの確認画面：ボタンは中央、「戻る」と「送信する」の間は 20px（11/6 ユーザー指示。MW WP Form のときは左寄せで間なし） */
@media screen and (max-width: 767px) {
	#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control .smf-button-control__control {
		margin: 0 auto !important;
	}
	#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has([data-action="back"]) {
		margin: 0 0 20px;
	}
}

/* 確認画面では、個人情報保護方針の箱とその下の案内文（.formPrivacy-policy）を出さない（11/6 ユーザー指示。MW WP Form のときは出ていた） */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-input-text {
	display: none !important;
}