/* ==========================================================
   みどり商会：Snow Monkey Forms を MW WP Form のときと同じ見た目にする
   （テーマ base の style.css の #formArea・ul.formFlow・#privacypolicyWrap・.btn を前提にする）
   PC：左に項目名 250px（必須・任意は右端）、30px あけて右に入力欄 / スマホ：縦に並べる
   色：緑 #459F58 / 必須 #FF3C3C / 任意 #ACACAC / 入力欄 #EEE
   ========================================================== */

/* ---------- 入力時だけ・確認時だけの出し分け（.inputPageText / .confirmPageText と同じ） ---------- */
#formArea .snow-monkey-form .confirmPageText {
	display: none !important;
}
#formArea .snow-monkey-form[data-screen="confirm"] .confirmPageText {
	display: block !important;
}
#formArea .snow-monkey-form[data-screen="confirm"] .inputPageText,
#formArea .snow-monkey-form[data-screen="confirm"] .smf-input-text,
#formArea .snow-monkey-form[data-screen="confirm"] #privacypolicyWrap {
	display: none !important;
}

/* ---------- 項目（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;
}
#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; /* dd の下の余白 */
}
/* 項目名（dt：入力画面は上に 8px） */
#formArea .smf-form .smf-item__label {
	display: flex;
	margin: 0;
	padding-top: 8px;
	line-height: inherit;
	font-weight: inherit;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-item__label {
	padding-top: 0;
}
#formArea .smf-form .smf-item__label label {
	font-weight: inherit;
	margin: 0;
}
/* 必須・任意（.att / .ninni と同じ。右端） */
#formArea .smf-form .smf-item.is-required .smf-item__label::after,
#formArea .smf-form .smf-item.is-optional .smf-item__label::after {
	content: "必須";
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 52px;
	height: 20px;
	margin-left: auto;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background-color: #FF3C3C;
}
#formArea .smf-form .smf-item.is-optional .smf-item__label::after {
	content: "任意";
	background-color: #ACACAC;
}

/* ---------- 入力欄（テーマの #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 input[type="text"]:focus,
#formArea .smf-form input[type="email"]:focus,
#formArea .smf-form textarea:focus,
#formArea .smf-form input[type="text"]:hover,
#formArea .smf-form input[type="email"]:hover,
#formArea .smf-form textarea:hover {
	background: #fff;
}
#formArea .smf-form textarea {
	vertical-align: baseline;
}

/* ---------- セレクト（生年月日。ブラウザ標準の見た目） ---------- */
#formArea .smf-form .smf-select-control {
	display: inline-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: inline-block;
	width: auto;
	padding: .4em 0 .3em .5em;
	margin: 0 0 5px;
	border: 1px solid #e7e7e7;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-size: inherit;
	line-height: normal;
	color: #000;
}
#formArea .smf-form .smf-item.is-birth .smf-item__controls {
	display: block;
	padding-bottom: 20px; /* MW WP Form は p.select_p の下の余白 */
}
#formArea .smf-form .smf-placeholder[data-name^="birth_"] {
	display: inline-block;
}
#formArea .smf-form .birth-unit {
	display: inline;
}
/* 生年月日は3つで1つの項目なので、エラーは並びの下に1つだけ（MW WP Form のときと同じ文） */
#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::after {
	content: "生年月日を入力してください";
	display: block;
}

/* ---------- ラジオ（性別。テーマの .radio-btns と同じ緑の丸） ---------- */
#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: 5px 18px 0 0; /* MW WP Form は 15px＋項目の間の空白 */
}
#formArea .smf-form .smf-radio-button-control {
	display: inline;
	margin: 0;
}
#formArea .smf-form .smf-radio-button-control__control {
	display: none;
}
#formArea .smf-form .smf-radio-button-control__label {
	position: relative;
	display: inline-block;
	padding-left: 2em;
}
#formArea .smf-form .smf-radio-button-control__label::before,
#formArea .smf-form .smf-radio-button-control__label::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	border: 1px solid #ccc;
	border-radius: 50%;
}
#formArea .smf-form .smf-radio-button-control__label::after {
	top: 4px;
	left: 4px;
	width: 12px;
	height: 12px;
	border: none;
	background: #459F58;
	opacity: 0;
}
#formArea .smf-form .smf-radio-button-control__control:checked + .smf-radio-button-control__label::after {
	opacity: 1;
}

/* ---------- 参考写真（項目名の下に、案内と添付欄を横幅いっぱい） ---------- */
#formArea .smf-form .smf-item.is-files {
	display: block;
}
#formArea .smf-form .smf-item.is-files .smf-item__col--label,
#formArea .smf-form .smf-item.is-files .smf-item__col--controls {
	width: 100%;
}
#formArea .smf-form .smf-item.is-files .smf-item__label {
	width: 250px;
}
#formArea .smf-form .smf-item__description {
	margin: 30px 0 20px;
	font-size: 14px;
	color: inherit;
}
#formArea .smf-form .smf-item.is-files .smf-item__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 11px 90px; /* MW WP Form の添付欄の並び（302px＋削除の×と空白） */
	padding-bottom: 9px;
}
#formArea .smf-form .smf-placeholder[data-name^="file"] {
	display: inline-block;
	margin: 0;
}
#formArea .smf-form .smf-file-control > label {
	width: 302px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 1.5em;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: 1;
	cursor: pointer;
}
#formArea .smf-form .smf-file-control__label {
	display: inline-block;
	padding: 1px 6px;
	margin: 0;
	border: 1px solid #767676;
	border-radius: 3px;
	background: #EFEFEF;
	box-shadow: none;
	color: #000;
	font-size: .8333em;
	line-height: normal;
}
#formArea .smf-form .smf-file-control__filename {
	color: #000;
	font-size: inherit;
}

/* 確認画面の参考写真：案内と添付欄の余白を出さない（MW WP Form の確認と同じ） */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-item.is-files .smf-item__description {
	display: none;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-item.is-files .smf-item__controls {
	padding-bottom: 0;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-item.is-files .smf-item__col--controls {
	margin-bottom: 0;
}
/* 確認画面で値が空の項目も、dd と同じく下に 15px あける（空だと余白が重なって消えるため） */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-item__col--controls {
	padding-bottom: .1px;
}

/* ---------- 入力エラー ---------- */
#formArea .smf-error-messages,
#formArea .smf-form .smf-item.is-birth:has(.smf-error-messages) .smf-item__controls::after {
	margin: 5px 0 0;
	color: #B70000;
	font-size: 14px;
}

/* ---------- ボタン（.btnArea / .btn と同じ。緑の丸に矢印） ---------- */
#formArea .smf-action {
	display: flex;
	justify-content: space-between;
	margin: 60px 0 0;
}
#formArea .smf-action .smf-button-control {
	position: relative;
	display: table;
	width: 100%;
	max-width: 250px;
	min-width: 176px;
	height: 50px;
	margin: 0 auto 35px;
	padding: 0;
	background: url("/wp-content/themes/base/images/common/arrow_greeeen_right.svg") no-repeat center right 20px / 8px;
	color: #459F58;
	font-size: 16px;
	font-weight: 500;
	transition: all ease .3s;
}
#formArea .smf-action .smf-button-control::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 50px;
	height: 50px;
	background: url("/wp-content/themes/base/images/common/green_circle.svg") no-repeat center / 50px;
	transition: all ease .3s;
}
#formArea .smf-action .smf-button-control:hover::after,
#formArea .smf-action .smf-button-control:focus-within::after {
	transform: rotate(65deg);
}
#formArea .smf-action .smf-button-control__control {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 10px 60px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #459F58 !important;
	min-width: max-content; /* 文言が長いときはボタンが広がる（.btn の display: table と同じ） */
	white-space: nowrap;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
}
/* 確認画面：左に「戻る」、右に「送信する」 */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has([data-action="back"]) .smf-button-control__control {
	margin: 0 0 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 .smf-form .smf-item {
		display: flow-root; /* dd の下の 15px が、次の要素の余白と重ならないように（dl と同じ） */
	}
	#formArea .smf-form .smf-item__col--label,
	#formArea .smf-form .smf-item__col--controls {
		width: 100%;
	}
	#formArea .smf-form .smf-item__col--controls {
		margin-bottom: 15px;
	}
	#formArea .smf-form .smf-item__label {
		display: block;
		padding: 8px 0 0; /* 入力画面は .mw_wp_form_input dl dt の 8px が勝つ */
		margin: 0 0 15px;
	}
	#formArea .smf-form .smf-item.is-required .smf-item__label::after,
	#formArea .smf-form .smf-item.is-optional .smf-item__label::after {
		margin-left: 20px;
	}
	#formArea .snow-monkey-form[data-screen="confirm"] .smf-item__label {
		padding-top: 5px;
	}
	#formArea .smf-form .smf-item__description {
		margin-top: 45px; /* dt の下 15px＋案内の上 30px */
	}
	#formArea .smf-form .smf-item.is-files .smf-item__controls {
		row-gap: 10px;
	}
	#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 {
		flex-basis: 100%;
		margin: 0 auto 25px;
	}
	#formArea .smf-action .smf-button-control:has([data-action="back"]) {
		margin-bottom: 35px; /* 確認画面の「戻る」は .btn の 35px のまま */
	}
}