/* ==========================================================
   響芸：Snow Monkey Forms を、MW WP Form のときと同じ見た目にする
   元のフォームは、項目名が太字の div（14px）、入力欄が p の中、という自由なレイアウト（dl/dt/dd ではない）。
   測った値（PC・スマホ幅で、縦の並びは同じ）：項目名の高さ 22px → 入力欄 38px → 次の項目まで 24px
   入力欄：背景 #f7f7f7・枠 1px solid rgba(51,51,51,.1)・角なし・padding 6px・明朝体 16px
   送信ボタン：200×36・白地に金（#b99847）の枠と文字・余白 上 40px／下 30px
   ========================================================== */

.snow-monkey-form {
	max-width: none;
}

/* ---------- 項目：項目名（太字 14px）の下に、入力欄。横並びにしない ---------- */
.snow-monkey-form .smf-form .smf-item {
	display: block;
	margin: 0 0 24px;
	padding: 0;
	border: none;
}
.snow-monkey-form .smf-form .smf-item + .smf-item {
	margin-top: 0;
}
.snow-monkey-form .smf-form .smf-item__col {
	display: block;
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
}
.snow-monkey-form .smf-form .smf-item__label {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6; /* 22.4px。元の項目名の行の高さ（22px にすると、項目ごとに 0.4px ずつずれていく） */
	color: #333;
}
.snow-monkey-form .smf-form .smf-item__label label {
	margin: 0;
	font-weight: 700;
}
.snow-monkey-form .smf-form .smf-item__controls {
	width: 100%;
}

/* ---------- 入力欄 ---------- */
.snow-monkey-form .smf-form input[type="text"],
.snow-monkey-form .smf-form input[type="email"],
.snow-monkey-form .smf-form input[type="tel"],
.snow-monkey-form .smf-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 6px;
	background: #f7f7f7;
	border: 1px solid rgba(51, 51, 51, 0.1);
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	color: rgba(51, 51, 51, 0.7);
}
.snow-monkey-form .smf-form .smf-text-control,
.snow-monkey-form .smf-form .smf-textarea-control {
	display: block;
	width: 100%;
}
/* 郵便番号・予算は、元の size／class="short" の短い欄（幅は、実際の見た目と測り合わせて決める） */

/* ---------- ボタン（送信・確認画面へ：白地に金の枠） ---------- */
/* 余白（上 40px／下 30px）は、テーマの button の指定（margin: 40px auto 30px !important）がそのまま効く。
   元と同じく、前後の余白と重なるように、ボタンを包む要素は普通のブロックにして、余白を付けない */
.snow-monkey-form .smf-action {
	display: block;
	margin: 0;
}
.snow-monkey-form .smf-action .smf-button-control {
	display: block;
	margin: 0;
}
.snow-monkey-form .smf-action .smf-button-control__control {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 200px;
	height: 36px;
	padding: 5px;
	background: #fff;
	color: #b99847;
	border: 1px solid #b99847;
	border-radius: 0;
	box-shadow: none;
	font-size: 16px;
	font-weight: 100;
	cursor: pointer;
}

/* ---------- テキストエリア：元の余白は 5px（高さが 60px になる） ---------- */
.snow-monkey-form .smf-form textarea {
	padding: 5px;
}

/* ---------- 短い欄：郵便番号・予算（元は class="short"。幅 120px） ---------- */
.snow-monkey-form .smf-form input[name="zipcode"],
.snow-monkey-form .smf-form input[name="budget"] {
	width: 120px !important;
}
.snow-monkey-form .smf-form .smf-text-control:has(input[name="zipcode"]),
.snow-monkey-form .smf-form .smf-text-control:has(input[name="budget"]) {
	display: inline-block;
	width: auto;
	vertical-align: top;
}
/* 予算は、入力欄の右に「円前後」を、同じ行に */
.snow-monkey-form .smf-form .smf-placeholder[data-name="budget"] {
	display: inline-block;
	vertical-align: top;
}
.snow-monkey-form .smf-form .smf-unit {
	display: inline-block;
	margin-left: 4px;
	line-height: 38px;
}

/* ---------- 説明文の段落：元は、段落の下に 24px の余白（Snow Monkey Forms の CSS は、段落の余白を 0 にする） ---------- */
.snow-monkey-form .smf-form p {
	margin: 0 0 1.5em; /* テーマと同じ。16px の段落で 24px、18px の赤い帯（p.tokki）で 27px */
}
/* 入力欄と同じ段落に入っている説明は、下の余白をなくす */
.snow-monkey-form .smf-form .smf-note-tight {
	margin-bottom: 0;
}

/* ---------- チェックボックス・ラジオ：標準の見た目（13px）で、横に並べる ---------- */
.snow-monkey-form .smf-form .smf-checkboxes-control__control,
.snow-monkey-form .smf-form .smf-radio-buttons-control__control {
	display: block;
	font-size: 16px;
	line-height: 1.6; /* 元の段落と同じ 25.6px */
}
.snow-monkey-form .smf-form .smf-checkboxes-control__control .smf-label,
.snow-monkey-form .smf-form .smf-radio-buttons-control__control .smf-label {
	display: inline-block;
	margin: 0 15.4px 0 0;
}
/* テーマが label の下に 5px の余白を付けているため、行が 5px 高くなる。0 に戻す */
.snow-monkey-form .smf-form .smf-checkboxes-control__control .smf-label label,
.snow-monkey-form .smf-form .smf-radio-buttons-control__control .smf-label label {
	margin-bottom: 0;
}
/* スマホ幅（767px 以下）：元は、選択肢どうしの間隔が、空白の分（5.4px）だけになる */
@media screen and (max-width: 767px) {
	.snow-monkey-form .smf-form .smf-checkboxes-control__control .smf-label,
	.snow-monkey-form .smf-form .smf-radio-buttons-control__control .smf-label {
		margin-right: 5.4px;
	}
	/* ピアノの有無：元は、説明の最後にスマホだけの改行（br.sp）があり、選択肢の前に1行あく */
	.snow-monkey-form .smf-form .smf-placeholder[data-name="piano"] {
		margin-top: 25.6px;
	}
}
.snow-monkey-form .smf-form .smf-checkbox-control,
.snow-monkey-form .smf-form .smf-radio-button-control {
	display: inline;
	font-size: 16px;
	font-weight: 500;
	color: #333;
}
.snow-monkey-form .smf-form input[type="checkbox"],
.snow-monkey-form .smf-form input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	position: static;
	display: inline-block;
	box-sizing: border-box;
	width: 13px;
	height: 13px;
	margin: 4px 5px 0 0;
	padding: 0;
	opacity: 1;
	border: none;
	background: none;
	box-shadow: none;
	vertical-align: baseline;
}
.snow-monkey-form .smf-form .smf-checkbox-control__label,
.snow-monkey-form .smf-form .smf-radio-button-control__label {
	padding: 0;
}
.snow-monkey-form .smf-form .smf-checkbox-control__label::before,
.snow-monkey-form .smf-form .smf-checkbox-control__label::after,
.snow-monkey-form .smf-form .smf-radio-button-control__label::before,
.snow-monkey-form .smf-form .smf-radio-button-control__label::after {
	display: none;
}

/* ---------- 入力欄の下に説明文が続く項目：元は、入力欄が段落（p）の中にあり、下に 24px の余白がある ---------- */
/* （会場名は、元でも入力欄が div の中で、説明と詰まっているので、対象外） */
.snow-monkey-form .smf-form .smf-placeholder[data-name="room"],
.snow-monkey-form .smf-form .smf-placeholder[data-name="request"] {
	margin-bottom: 24px;
}

/* ---------- 出演依頼：お日にち（元は、テーマの #request-form_page .hasDatepicker で幅 180px。段落の中なので、行の高さは 43px） ---------- */
#request-form_page .snow-monkey-form .smf-form input[name="event_date"] {
	width: 180px;
}
#request-form_page .snow-monkey-form .smf-form .smf-placeholder[data-name="event_date"] {
	height: 43px;
}

/* ---------- 出演依頼：規約・キャンセルポリシーの同意欄（灰色の箱 .accept はテーマの指定がそのまま効く） ---------- */
/* 項目名は無いので、空の項目名の行（1行分）を消す */
.snow-monkey-form .smf-form .smf-item:has(.accept) .smf-item__col--label {
	display: none;
}
/* 下の余白は、箱（.accept）自身の 20px にする（項目の 24px を付けない） */
.snow-monkey-form .smf-form .smf-item:has(.accept) {
	margin-bottom: 0;
}
/* 箱の中の文字は、元は 14px・太字なし */
.snow-monkey-form .smf-form .accept .smf-checkboxes-control__control {
	font-size: 14px;
	line-height: 1.6;
}
.snow-monkey-form .smf-form .accept .smf-checkbox-control {
	font-size: 14px;
	font-weight: 400;
}

/* ==========================================================
   ミステリーツアー（LP：/mconcert/contact/）
   元は dl（項目名 dt・入力欄 dd）の形で、見た目はページの本文に書かれた CSS（#formArea …）で決まっている。
   テストページも #formArea の中にあるので、その指定（入力欄の余白・背景・枠など）はそのまま効く。
   ここでは、上の「お問い合せ・出演依頼」用の指定が邪魔をするところだけ、元に合わせて戻す。
   ========================================================== */
/* dl の左右の余白（0 1em） */
#formArea .snow-monkey-form .smf-form {
	margin: 0 1em;
}
/* 項目：dd の下の余白 15px */
#formArea .snow-monkey-form .smf-form .smf-item {
	margin-bottom: 15px;
}
/* 項目名：dt（16px・太字・下に 5px） */
#formArea .snow-monkey-form .smf-form .smf-item__label {
	margin-bottom: 5px;
	font-size: 16px;
	line-height: 1.6;
}
/* 必須の印：元は、項目名の後ろに赤い「※」（.att） */
#formArea .snow-monkey-form .smf-form .smf-item.is-required .smf-item__label__text::after {
	content: "※";
	color: crimson;
	font-size: 12px;
	font-weight: normal;
}
/* 入力欄の文字：元は、テーマが書体を指定しておらず、ブラウザの標準の書体のまま（高さ 36px になる） */
#formArea .snow-monkey-form .smf-form input[type="text"],
#formArea .snow-monkey-form .smf-form input[type="email"],
#formArea .snow-monkey-form .smf-form textarea {
	font-family: revert;
	font-weight: revert;
}
#formArea .snow-monkey-form .smf-form textarea {
	line-height: 1.5;
}
/* お日にち：元は、カレンダーの印（.hasDatepicker）が付いて、上下に 5px の余白。テストでは、カレンダーは最初にクリックしたときに付くので、最初から付けておく（クリックで動かないように） */
#formArea .snow-monkey-form .smf-form input[name="event_date"] {
	margin: 5px 0;
}
/* お問い合せ用の「お部屋名・演奏内容の下に 24px」は、こちらには無い（同じ name なので、打ち消す） */
#formArea .snow-monkey-form .smf-form .smf-placeholder[data-name="room"],
#formArea .snow-monkey-form .smf-form .smf-placeholder[data-name="request"] {
	margin-bottom: 0;
}
/* 元は入力欄が行の中にあり、この余白が前後の余白と重ならない。重ならないように、外側を独立した箱にする */
#formArea .snow-monkey-form .smf-form .smf-placeholder[data-name="event_date"] {
	display: flow-root;
}
/* ボタン：元は .btnArea（上下 50px）→ .submitArea（スマホは下 25px）→ 黒い枠の 290×50 */
#formArea .snow-monkey-form .smf-action {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px 0;
}
#formArea .snow-monkey-form .smf-action .smf-button-control {
	display: block;
	flex-basis: 100%;
	margin: 0 0 25px;
}
#formArea .snow-monkey-form .smf-action .smf-button-control__control {
	width: 100%;
	max-width: 290px;
	height: 50px;
	background: none;
	color: #333;
	border: 1px solid #333;
	font-family: revert;
}
@media print, screen and (min-width: 768px) {
	#formArea .snow-monkey-form .smf-action {
		flex-wrap: nowrap;
	}
	#formArea .snow-monkey-form .smf-action .smf-button-control {
		margin: 0;
	}
}

/* ==========================================================
   確認画面（Snow Monkey Forms は、フォームに data-screen="confirm" が付く）
   元の確認画面は、別のページ（スラッグ confirm）なので、入力ページ用のテーマの指定（項目名の太字など）が効いていない。それに合わせる
   ========================================================== */
/* お問い合せ・出演依頼：項目名は太字なし、入力した値は 16px */
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-item__label {
	font-weight: 400;
}
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-placeholder,
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-unit {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: #1d1a10;
}
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-unit {
	margin-left: 0;
}
/* 戻るボタン：元はテーマの .btn（ヒラギノ明朝・右に「>」の画像） */
.snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] {
	height: auto;
	padding: 5px 10px;
	line-height: 1.42857;
	color: #1d1a10;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝", serif;
	background: #fff url("/cms/wp-content/themes/mu_res_new/images/common/btn_a_b.svg") no-repeat calc(100% - 15px) 50% / 10px auto;
}

/* ミステリーツアー（LP）：項目名は太字のまま、必須の「※」は出さない、値は灰色の箱 */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-form .smf-item__label {
	font-weight: 700;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-form .smf-item.is-required .smf-item__label__text::after {
	content: none;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-form .smf-placeholder {
	box-sizing: border-box;
	min-height: 30px;
	padding: 5px 10px;
	background: #efefef;
	font-weight: 400;
	color: #333;
}
/* ボタン：元は「←入力画面へ戻る」（下線の文字）→ 50px あけて「送信する」 */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action {
	display: block;
	margin: 0;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control {
	display: block;
	margin: 0;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has([data-action="complete"]) {
	display: flow-root;
	margin: 50px 0;
}
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] {
	width: 200px;
	max-width: none;
	padding: 0;
	border: none;
	background-color: transparent;
	text-decoration: underline;
}
@media screen and (max-width: 767px) {
	#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has([data-action="complete"]) {
		padding-bottom: 25px;
	}
}
/* お問い合せ・出演依頼：会場名だけは、元の値が段落ではなく div の中なので、14px・太さ標準 */
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-placeholder[data-name="venue"] {
	font-size: 14px;
	font-weight: 400;
	color: #333;
}
/* 出演依頼：お日にちの「行の高さ 43px」は入力画面だけ */
#request-form_page .snow-monkey-form[data-screen="confirm"] .smf-form .smf-placeholder[data-name="event_date"] {
	height: auto;
}
/* ミステリー：戻るは下線の文字なので、入力画面のボタンの高さ 50px を外す */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] {
	height: auto;
}
/* ミステリー：会場名も、ほかの値と同じ 16px（上の「会場名だけ 14px」を打ち消す） */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-form .smf-placeholder[data-name="venue"] {
	font-size: 16px;
}
/* 出演依頼の確認画面：元は別のページなので、規約の箱まわりの「#request-form_page .accept_box …」の指定が効いていない。同じく外す */
#request-form_page .snow-monkey-form[data-screen="confirm"] .accept_box ol {
	margin: 0;
}
#request-form_page .snow-monkey-form[data-screen="confirm"] .accept_box ol li {
	margin-bottom: 0;
}
#request-form_page .snow-monkey-form[data-screen="confirm"] .accept_box .tokki {
	padding: 0;
	border: none;
	background: none;
	color: #1d1a10;
	font-size: 16px;
	line-height: 1.6;
}
#request-form_page .snow-monkey-form[data-screen="confirm"] .accept_box span.att_line {
	color: inherit;
	text-decoration: none;
}
#request-form_page .snow-monkey-form[data-screen="confirm"] .accept_box .accept {
	margin-bottom: 0;
	padding: 0;
	border: none;
	background: none;
	font-weight: 400;
}
#request-form_page .snow-monkey-form[data-screen="confirm"] .accept_box .accept .smf-placeholder {
	font-size: 14px;
	font-weight: 400;
	color: #333;
}
/* ミステリー：戻るの右の「>」（入力画面のボタンの background: none に消されるので、付け直す） */
#formArea .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] {
	background: transparent url("/cms/wp-content/themes/mu_res_new/images/common/btn_a_b.svg") no-repeat calc(100% - 15px) 50% / 10px auto;
}

/* ---------- 郵便番号の前の「〒」（元のフォームには無い。どこに郵便番号を入れるか分かりやすくするため、画面だけに付ける。メールには付けない。2026-11-10 ユーザーの希望） ---------- */
/* 入力画面：入力欄の左に、同じ行で */
.snow-monkey-form:not([data-screen="confirm"]) .smf-form .smf-placeholder[data-name="zipcode"]::before {
	content: "〒";
	display: inline-block;
	margin-right: 4px;
	font-size: 16px;
	line-height: 38px; /* 入力欄の高さに合わせて、上下の真ん中にする */
	vertical-align: top;
}
/* 確認画面：値の前に。郵便番号が空欄のときは出さない */
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-placeholder[data-name="zipcode"]::before {
	content: "〒";
}
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-placeholder[data-name="zipcode"]:has(input[type="hidden"][value=""])::before {
	content: none;
}