/**
 * FLAVOR：Snow Monkey Forms を MW WP Form のときと同じ見た目にする（日本語・中国語・英語の3つ）
 * ・フォームはページの <div class="box"><div id="form_area"> の中。項目名 h3.label_text と、テーマの #form_area input[type="text"] などはそのまま効く
 * ・MW WP Form のときは欄が <p> の中（項目名のすぐ後は上 10px・下 0）。最後の欄の下に「戻る」「送信」（.submit_area：上下 30px）
 */

:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) {
	--smf-form-control-padding: 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form {
	display: block;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form > * + * {
	margin-top: 0;
}
/* 項目名：テーマの h3.label_text（上 30px・下 15px）。欄との間は 15px（MW WP Form のときは <p> の上 10px と重なっていた） */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form > h3.label_text {
	margin: 30px 0 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form > h3.label_text:first-child {
	margin-top: 0;
}
/* 欄（MW WP Form のときの <p>） */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-field {
	display: block;
	margin: 15px 0 0;
	padding: 0;
	border: 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-item__col {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-item__controls {
	display: block;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-placeholder {
	display: block;
	margin: 0;
}

/* 文字の欄：テーマの #form_area input[type="text"] と同じ */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-text-control,
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-textarea-control {
	display: block;
	width: 100%;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-text-control__control,
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-textarea-control__control {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 5px;
	padding: .4em .5em .2em;
	border: 1px solid #e7e7e7;
	border-radius: 0;
	background: #fefefe;
	box-shadow: none;
	font-size: 14px;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-text-control__control.short {
	width: 200px;
	margin-bottom: 0;
}
/* 郵便番号の欄は下の余白がないので、MW WP Form のときの <p> の行の高さ（27px）に合わせる */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .is-zip .smf-placeholder {
	min-height: 27px;
}

/* 電話番号（3つの欄を「-」でつなぐ。MW WP Form の [mwform_tel]） */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .is-tel .smf-placeholder,
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .is-tel .smf-text-control {
	display: inline;
	width: auto;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .is-tel .smf-text-control__control {
	width: auto;
}

/* ラジオ：テーマの #form_area input[type="radio"]（24px の丸・中に黒い点） */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-buttons-control__control {
	display: block;
	margin: 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-buttons-control__control > .smf-label {
	display: block;
	margin: 0 0 15px;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-button-control {
	display: inline;
	gap: 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-button-control__control {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid #999;
	border-radius: 24px;
	background: #fff;
	box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .2);
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: button;
	appearance: button;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-button-control__control::before {
	display: none;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-button-control__control:checked::after {
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background: #222;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-button-control__label {
	margin: 0 0 0 10px;
}
@media (min-width: 768px) {
	:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-buttons-control__control > .smf-label {
		display: inline;
		margin: 0 15px 15px 0;
	}
	:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-radio-button-control__label {
		margin: 0 15px 0 10px;
	}
}
/* 問い合わせ内容：ラジオ（.contact_select：下 30px）の下に本文の欄 */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-inq-gap {
	height: 30px;
}

/* エラー */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-error-messages {
	margin: 0 0 5px;
	color: red;
	font-size: 12px;
}

/* ボタン：「戻る」（白・黒枠）は上、「送信」（黒）は下。どちらも幅 200px で中央（.submit_area：上下 30px） */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	margin: 45px auto 30px; /* .submit_area の上 30px＋本文の欄（<p>）の下の行の分 */
	padding: 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-action .smf-button-control {
	display: block;
	width: 200px;
	margin: 0 auto;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-action .smf-button-control + .smf-button-control {
	margin-top: 15px;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-action .smf-button-control__control {
	display: block;
	width: 200px;
	min-height: 0;
	margin: 0 auto;
	padding: .8em 0;
	border: 1px solid #222;
	border-radius: 0;
	background: #222;
	box-shadow: none;
	color: #fff;
	font-family: sans-serif;
	font-size: 14px;
	line-height: 16.1px; /* 今のフォームの input の高さ（40px）に合わせる */
	text-align: center;
	cursor: pointer;
	transition: .3s;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-action .smf-button-control__control:hover {
	background: #fff;
	color: #222;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-action .smf-button-control__control[data-action="back"] {
	background: #fff;
	color: #222;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-action .smf-button-control__control[data-action="back"]:hover {
	background: #222;
	color: #fff;
}

:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-moving {
	margin: 0;
	text-align: center;
}

/* スマホ（767px まで） */
@media (max-width: 767px) {
	/* 問い合わせ内容：最後のラジオの下 15px と重なって、本文の欄までは 30px（今のフォームと同じ） */
	:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .smf-inq-gap {
		height: 15px;
	}
	/* 電話番号：今のフォームは段落が両端そろえで、2つ目の欄が右に寄る（3つ目は次の行） */
	:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057) .smf-form .is-tel .smf-item__controls {
		text-align: justify;
	}
}

/* 確認画面：MW WP Form のときは値の段落が 31px（項目の間が入力画面と同じ 102px）。電話番号は「098-975-6666」と詰めて表示 */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057)[data-screen="confirm"] .smf-form .smf-field {
	padding-bottom: 10px;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057)[data-screen="confirm"] .smf-form .is-zip .smf-placeholder {
	min-height: 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057)[data-screen="confirm"] .smf-form .is-tel .smf-item__controls {
	font-size: 0;
}
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057)[data-screen="confirm"] .smf-form .is-tel .smf-item__controls > * {
	font-size: 14px;
}
/* 確認画面はラジオの下の余白がないので、スマホでも本文までは 30px */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057)[data-screen="confirm"] .smf-form .smf-inq-gap {
	height: 30px;
}
/* 確認画面：電話番号が空なら「-」も出さない（MW WP Form のときは何も出なかった） */
:is(#snow-monkey-form-1055, #snow-monkey-form-1056, #snow-monkey-form-1057)[data-screen="confirm"] .smf-form .is-tel:not(:has(input[type="hidden"]:not([value=""]))) .smf-tel-sep {
	display: none;
}