@charset "UTF-8";
/* ===================================================================
 * Snow Monkey Forms 用スタイル（旧 MW WP Form のお問い合わせフォーム再現）
 *
 * 本番 assets/css/contact.css の実ルールを、Snow Monkey Forms の
 * クラス体系へ移植したもの。数値・色はすべて本番のルールをそのまま使う。
 * 移植元は .contact-form-start.form 系（PC用 @media 内）の記述。
 *
 * 対応表（本番 → Snow Monkey Forms）
 *   .form dl                          → .smf-item
 *   .form dl > dt                     → .smf-item__col--label
 *   .form dl > dt > span.mform-*-text → .smf-require / .smf-optional
 *   .mform-form-name                  → .smf-item__label__text
 *   .mform-supply-text                → .smf-item__description
 *   .msr_flow                         → .smf-progress-tracker
 *   .msr_flow li.active               → .smf-progress-tracker__item[aria-current="true"]
 *   .mwform-radio-field.horizontal-item label → .smf-radio-button-control
 *   .mwform-checkbox-field.horizontal-item label → .smf-checkbox-control
 *   .btn-form input[type=submit]      → .smf-action ボタン
 * =================================================================== */

/* --- フォーム全体の外枠 ---------------------------------------------
 * 本番の構造と実測値
 *   div.form.contact-form-base.contact-form-start
 *       背景 #f3f5f7 / padding 60px 0 200px / margin-top 94px / 幅1050px
 *     └ div.inner-s   margin 0 125px  → 内容幅 800px
 *
 * Snow Monkey Forms は form.snow-monkey-form が直接置かれるので、
 * form 自身に背景を持たせ、内容を 800px に収める。
 * ------------------------------------------------------------------- */
.snow-monkey-form {
	box-sizing: border-box;
	margin-top: 94px;
	padding: 60px 0 200px;
	background-color: #f3f5f7;
}

/* 本番の .inner-s（margin: 0 125px → 内容幅800px）に相当 */
.snow-monkey-form .smf-form,
.snow-monkey-form > .smf-progress-tracker,
.snow-monkey-form > .smf-action,
.snow-monkey-form > .smf-item,
.snow-monkey-form > .smf-system-error-content-ready {
	box-sizing: border-box;
	width: 800px;
	max-width: calc(100% - 40px);
	margin-left: auto;
	margin-right: auto;
}

/* 項目は上マージンを保ったまま左右中央に置く */
.snow-monkey-form > .smf-item {
	margin: 59px auto 0;
}

.snow-monkey-form > .smf-item:first-of-type {
	margin-top: 0;
}

/* 本番は 768px 以上ならすべて margin-top:94px / padding:60px 0 200px で、
 * 1100px 以下だけ値が変わるルールは持っていない。
 * ここを 1100px で切ると 768〜1100px でフォーム全体が本番より 44px 上がるため、
 * 本番と同じ 767px（＝SP）でだけ効くようにする。
 * ※ SP 側は下の @media(max-width:767px) が margin-top:0 / padding-top:0 で
 *   上書きし、padding-bottom:120px だけをこのルールから受け取る。 */
@media screen and (max-width: 767px) {
	.snow-monkey-form {
		padding: 60px 0 120px;
		margin-top: 40px;
	}
}

/* --- 項目のまとまり（本番 .form dl: margin-top 25px / flex column） --- */
.snow-monkey-form .smf-item {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-flow: column;
	margin: 59px auto 0;
	padding: 0;
}

.snow-monkey-form .smf-item:first-of-type {
	margin-top: 0;
}

.snow-monkey-form .smf-item:last-of-type {
	margin-bottom: 60px;
}

/* 2カラムを解除して縦積みにする（本番は dl > dt / dd の縦積み） */
.snow-monkey-form .smf-item__col--label,
.snow-monkey-form .smf-item__col--controls {
	display: block;
	width: 100%;
	padding: 0;
}

/* --- 項目名（本番 .form dl > dt: margin-bottom 15px / font-size 18px） --
 * Snow Monkey Forms は補足テキスト（.smf-item__description）も
 * ラベル側カラムに入れる。本番の縦の並び（項目名 → 15px → 補足 → 3px → 入力欄）
 * になるよう、15px はカラムではなくラベル行に持たせる。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-item__col--label {
	margin-bottom: 0;
	font-size: 18px;
}

.snow-monkey-form .smf-item__label {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0 0 15px;
}

/* 本番 .mform-form-name: padding-top 2px / 18px / weight 700 / line-height 1
 * item ブロックの save は必ず span.smf-item__label__text を出す。
 * labelFor を設定した項目ではそれが label で包まれるので、
 * 指定は span 側に当てる（両方の形に効く）。 */
.snow-monkey-form .smf-item__label label {
	display: block;
	margin: 0;
}

.snow-monkey-form .smf-item__label__text {
	display: block;
	margin: 0;
	padding-top: 2px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: #333;
}

/* --- 必須／任意マーク -------------------------------------------------
 * 本番 .mform-required-text / .mform-sub-text
 *   inline-flex / 中央寄せ / 42x26px / margin-right 15px
 *   font-size 14px / line-height calc(26/14) / color #fff / 角丸
 *   必須は背景 #de0000・枠 #ff0000 / 任意は背景 #666・枠 #666
 * マークは Snow Monkey Forms が出力しないため
 * 605_required_badge.php が JS で差し込む。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-require,
.snow-monkey-form .smf-optional {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 26px;
	margin-left: 0;
	margin-right: 15px;
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: calc(26 / 14);
}

.snow-monkey-form .smf-require {
	background-color: #de0000;
	border: 1px solid #ff0000;
}

.snow-monkey-form .smf-optional {
	background-color: #666;
	border: 1px solid #666;
}

/* --- 補足テキスト（本番 .mform-supply-text） ------------------------- */
.snow-monkey-form .smf-item__description {
	margin: 0 0 3px;
	font-size: 16px;
	font-weight: 500;
	line-height: calc(26 / 16);
	color: #333;
}

/* 個人情報の項目だけ下マージンが違う
 * 本番 .contact-form-start.form .mform-privacy-policy-define .mform-supply-text
 *   PC(>=768px) 13px / SP(<=767px) 19px */
.snow-monkey-form .smf-item:has( input[name^="agree"] ) .smf-item__description {
	margin-bottom: 13px;
}

/* --- テキスト入力・メール・電話 --------------------------------------
 * 本番 .contact-form-start.form dl > dd input[type=text|email|url], select
 *   width 100% / height 60px / padding 0 25px（右は 50px）
 *   font-size 16px / 枠 1px #AAAAAA / 角丸6px / 背景 #fff
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-text-control__control {
	box-sizing: border-box;
	width: 100%;
	height: 60px;
	padding: 0 50px 0 25px;
	border: 1px solid #aaa;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: none;
	color: #000;
	font-size: 16px;
	cursor: pointer;
}

.snow-monkey-form .smf-text-control__control::placeholder {
	color: #aaa;
}

/* hover / focus（本番: 枠 2px #0096E5 / 背景 #FFFEF2） */
.snow-monkey-form .smf-text-control__control:hover,
.snow-monkey-form .smf-text-control__control:focus,
.snow-monkey-form .smf-text-control__control:focus-visible {
	border: 2px solid #0096e5;
	background-color: #fffef2;
	outline: none;
	box-shadow: none;
}

/* autofill は常に白で上書き（本番と同じ対策） */
.snow-monkey-form .smf-text-control__control:-webkit-autofill,
.snow-monkey-form .smf-text-control__control:-webkit-autofill:hover,
.snow-monkey-form .smf-text-control__control:-webkit-autofill:focus {
	box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: #000;
	caret-color: #000;
	transition: background-color 9999s ease-in-out 0s;
}

/* --- テキストエリア（本番: min-height 300px / padding 15px 25px） ----- */
/* 本番のテキストエリアは inline-block のまま（block にすると行の高さがずれる） */
.snow-monkey-form .smf-textarea-control__control {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	min-height: 188px;
	padding: 15px 20px;
	border: 1px solid #aaa;
	border-radius: 6px;
	background-color: #fff;
	color: #000;
	font-size: 16px;
	line-height: calc(26 / 16);
	cursor: pointer;
	resize: vertical;
}

.snow-monkey-form .smf-textarea-control__control:hover,
.snow-monkey-form .smf-textarea-control__control:focus {
	font-size: 18px;
	border: 2px solid #0096e5;
	background-color: #fffef2;
	outline: none;
}

/* --- ラジオボタン ----------------------------------------------------
 * 本番 .mform-radio-group span.mwform-radio-field.horizontal-item
 *   width: calc((100% - 20px) / 3)   ← 3列（隙間10px×2）
 * 本番 …horizontal-item label
 *   flex / gap 16px / padding 20px 25px 19px / 枠 1px #AAAAAA
 *   角丸6px / 背景 #fff
 * 本番 input[type=radio]: 18x18px / accent-color #005BAC
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-radio-buttons-control__control {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.snow-monkey-form .smf-radio-buttons-control .smf-label {
	display: block;
	width: calc((100% - 20px) / 3);
	margin: 0;
	padding: 0;
}

.snow-monkey-form .smf-radio-buttons-control label {
	display: block;
	margin: 0;
	cursor: pointer;
}

.snow-monkey-form .smf-radio-button-control {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	padding: 20px 25px 19px;
	border: 1px solid #aaa;
	border-radius: 6px;
	background-color: #fff;
	cursor: pointer;
}

/* ★ 本番はブラウザ標準のラジオに accent-color を当てているだけ。
 * プラグインは appearance:none にして独自の丸を描くので元に戻す。 */
.snow-monkey-form .smf-radio-button-control__control {
	appearance: auto;
	-webkit-appearance: auto;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	accent-color: #005bac;
}

.snow-monkey-form .smf-radio-button-control__control::before,
.snow-monkey-form .smf-radio-button-control__control::after {
	content: none;
}

/* ★ :checked のときはプラグイン側の詳細度が上で打ち消しが効かない。
 *   .smf-form .smf-radio-button-control__control:checked { background-color:#3a87fd; border-color:#3a87fd }
 *   .smf-form .smf-radio-button-control__control:checked:before { content:""; ... }
 * これが残ると、選択したラジオが青のベタ塗り＋白い丸になり、
 * ブラウザ標準（本番の見た目）に戻らない（2026-08-26 実測・修正）。
 * :checked を含めて同じ強さにしたうえで打ち消す。 */
.snow-monkey-form .smf-radio-button-control__control:checked {
	background: none;
	background-color: transparent;
	border: none;
	box-shadow: none;
}

.snow-monkey-form .smf-radio-button-control__control:checked::before,
.snow-monkey-form .smf-radio-button-control__control:checked::after {
	content: none;
}

.snow-monkey-form .smf-radio-button-control__label {
	padding-top: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 15px;
	color: #333;
}

/* 選択時は枠を 2px #005BAC にし、padding を1px詰めて位置を保つ（本番同様） */
.snow-monkey-form .smf-radio-buttons-control label:has( input:checked ) .smf-radio-button-control {
	padding: 19px 25px 18px;
	border: 2px solid #005bac;
}

/* --- チェックボックス（お問い合わせ内容） ----------------------------
 * 本番 .mform-contact-text-define …horizontal-item
 *   width: calc((100% - 10px) / 2)  ← 2列（隙間10px）
 *   label: gap 16px / height 60px / padding 20px 24px
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-checkboxes-control__control {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.snow-monkey-form .smf-checkboxes-control .smf-label {
	display: block;
	width: calc((100% - 10px) / 2);
	margin: 0;
	padding: 0;
}

.snow-monkey-form .smf-checkboxes-control label {
	display: block;
	margin: 0;
	cursor: pointer;
}

.snow-monkey-form .smf-checkbox-control {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	height: 60px;
	padding: 20px 24px;
	border: 1px solid #aaa;
	border-radius: 6px;
	background-color: #fff;
	cursor: pointer;
}

/* チェックボックスも同様にブラウザ標準へ戻す */
.snow-monkey-form .smf-checkbox-control__control {
	appearance: auto;
	-webkit-appearance: auto;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	accent-color: #005bac;
}

.snow-monkey-form .smf-checkbox-control__control::before,
.snow-monkey-form .smf-checkbox-control__control::after {
	content: none;
}

/* ラジオと同じく :checked 側も打ち消す（プラグインの
 * .smf-form .smf-checkbox-control__control:checked が青ベタ塗りにするため） */
.snow-monkey-form .smf-checkbox-control__control:checked {
	background: none;
	background-color: transparent;
	border: none;
	box-shadow: none;
}

.snow-monkey-form .smf-checkbox-control__control:checked::before,
.snow-monkey-form .smf-checkbox-control__control:checked::after {
	content: none;
}

/* 本番 .mform-contact-text-define .mwform-checkbox-field-text
 *   padding-top 2px / 16px / weight 500
 *   line-height は宣言なし＝ base.css の span { line-height: 1 } が効く。
 * ラジオ（15px / weight 400）とは値が違うので流用しないこと。 */
.snow-monkey-form .smf-checkbox-control__label {
	padding-top: 2px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: #333;
}

.snow-monkey-form .smf-checkboxes-control label:has( input:checked ) .smf-checkbox-control {
	padding: 19px 24px 18px;
	border: 2px solid #005bac;
}

/* --- 個人情報の同意欄 ------------------------------------------------
 * 本番 .mform-privacy-policy-define …horizontal-item label
 *   中央寄せ / gap 16px / height 60px / margin-top 20px
 *   padding 20px 24px / 角丸6px / 背景 #CCDAEB / 枠なし
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-item:has( input[name^="agree"] ) .smf-label {
	width: 100%;
}

.snow-monkey-form .smf-item:has( input[name^="agree"] ) .smf-checkbox-control {
	justify-content: center;
	height: 60px;

	/* 本番は span が BFC でないため label の margin-top:20px が外へ抜け ul{margin-top:-30px} に食われる。
	 * SMF は .smf-label が flex アイテム（＝BFC）でマージンが抜けないため、
	 * 説明文の margin-bottom(13px) との合計が本番の実効 28.5px になる値を直接指定する。 */
	margin-top: 15.5px;
	padding: 20px 24px;
	border: none;
	border-radius: 6px;
	background-color: #ccdaeb;
}

/* 本番 .mform-privacy-policy-define .mwform-checkbox-field-text
 *   padding-top 2px / 16px / weight 500 */
.snow-monkey-form .smf-item:has( input[name^="agree"] ) .smf-checkbox-control__label {
	padding-top: 2px;
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
}

/* 同意欄はチェックしても枠を付けない（本番と同じ） */
.snow-monkey-form .smf-item:has( input[name^="agree"] ) label:has( input:checked ) .smf-checkbox-control {
	padding: 20px 24px;
	border: none;
}

/* --- エラー表示（本番: 背景 #FDEAEA / 枠 2px #DE0000） --------------- */
.snow-monkey-form .smf-error-messages {
	margin-top: 8px;
	color: #de0000;
	font-size: 16px;
	line-height: calc(26 / 16);
}

/* --- 必須エラー時の赤枠 --------------------------------------------
 * 本番（MW WP Form）はフォーム定義内の <style> で
 *   .mform-contact-text-define dd input:has(+ .error) { border:2px solid #DE0000; background:#FDEAEA }
 * のようにエラーが出た欄だけ赤枠＋薄赤背景にしている。
 * ラジオ選択肢のラベル・同意チェックのラベルにも同じ枠と背景が付く。
 * 実測値: border 2px solid rgb(222,0,0) / background rgb(253,234,234)
 *        角丸は通常時の 6px のまま / 背景以外の padding は変えない
 *        （本番はラベル高が 59px→61px と 2px 伸びるので、詰める補正は入れない）
 *
 * Snow Monkey Forms が付ける属性は data-invalid="1" であって "true" ではない。
 * 旧 `[data-invalid="true"]` はどの要素にもマッチせず死んでいた。
 * また プラグイン既定の `.smf-form [data-invalid="1"]` は、通常時の枠を定義する
 * `.smf-text-control__control` 等と同詳細度 [0,2,0] で読込順に負けるため効かない。
 * 属性セレクタを足して詳細度で勝たせる（!important は使わない）。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-select-control__control[data-invalid="1"],
.snow-monkey-form .smf-text-control__control[data-invalid="1"],
.snow-monkey-form .smf-textarea-control__control[data-invalid="1"] {
	border: 2px solid #de0000;
	background-color: #fdeaea;
}

/* 本番 .mform-radio-group:has(.error) label / ul:has(li .error) label 相当 */
.snow-monkey-form .smf-radio-buttons-control__control[data-invalid="1"] .smf-radio-button-control,
.snow-monkey-form .smf-checkboxes-control__control[data-invalid="1"] .smf-checkbox-control {
	border: 2px solid #de0000;
	background-color: #fdeaea;
}

/* --- 操作ボタン ------------------------------------------------------
 * 本番 .contact-form-base.form .btn-form li input
 *   PC 300x60px / weight 700 / 角丸6px / 18px / 白文字
 *   li は inline-block / margin-left 30px（先頭は0）
 *
 * 色は本番 contact.css の実測値。ボタンの役割ごとに違う。
 *   入力画面「入力内容を確認する」 [name=submitConfirm]
 *       活性   #0096E5 / 枠 1px #fff
 *       非活性 #ADADAD / 枠 1px #fff / cursor not-allowed
 *   確認画面「戻って修正する」     [name=submitBack]     #888888 / 枠 1px #fff
 *   確認画面「送信する」           [name=confirmation]   #005BAC / 枠 1px #fff
 *
 * Snow Monkey Forms は name ではなく data-action で役割を持つ。
 *   confirm = 入力内容を確認する / back = 戻って修正する / complete = 送信する
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-action {
	display: flex;
	justify-content: center;

	/* 本番の間隔は li の margin-left:30px ＋ inline-block 間の空白 3.75px = 33.75px。
	 * 実測: 本番 確認画面 PC1280 のボタン間 33.75px / ボタン中心 ±166.88px。 */
	gap: 33.75px;
	margin-top: 0;
	text-align: center;
}

/* SMF 既定（app.css）の
 *   .smf-action .smf-button-control + .smf-button-control { margin-left: var(--_margin-1) }
 * が 17.07px 足されて本番より広くなる（実測 47.06px）。gap だけで間隔を決める。 */
.snow-monkey-form .smf-action .smf-button-control + .smf-button-control {
	margin-left: 0;
}

.snow-monkey-form .smf-action button,
.snow-monkey-form .smf-action input[type="submit"] {
	display: block;
	box-sizing: border-box;
	width: 300px;
	height: 60px;
	margin: 0 auto;
	padding: 1px 6px;
	background: #005bac;
	border: 1px solid #fff;
	border-radius: 6px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	line-height: 60px;
	cursor: pointer;
}

/* 入力画面の「入力内容を確認する」 */
.snow-monkey-form .smf-action button[data-action="confirm"] {
	background: #0096e5;
}

/* 確認画面の「戻って修正する」 */
.snow-monkey-form .smf-action button[data-action="back"] {
	background: #888;
}

/* 確認画面の「送信する」は #005BAC（既定色のまま） */

.snow-monkey-form .smf-action button:hover,
.snow-monkey-form .smf-action input[type="submit"]:hover {
	opacity: .7;
}

/* --- ステップバー ----------------------------------------------------
 * 本番の .msr_flow（入力 → 確認・送信 → 完了）を
 * Snow Monkey Forms の .smf-progress-tracker へ移植したもの。
 * use_progress_tracker = 1 のときにプラグインが <ol> を出力する。
 *
 * 本番の構造            → Snow Monkey Forms
 *   ul.msr_flow           ol.smf-progress-tracker
 *   li                    li.smf-progress-tracker__item
 *   li.active             li[aria-current="true"]      ← class ではなく属性
 *   span.number           div.smf-progress-tracker__item__number
 *   （テキスト直書き）    div.smf-progress-tracker__item__text
 *
 * プラグイン既定（dist/css/app.css）は縦積み＋細い連結線という別デザインなので、
 * flex / position / 疑似要素をすべて打ち消したうえで本番の値を当て直す。
 * 見出しの文言（入力 / 確認・送信 / 完了）は 605_progress_labels.php で差し替える。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-progress-tracker {
	display: table;
	margin-bottom: 72px;
	padding-left: 0;
	color: #333;
	list-style: none;
	overflow: hidden;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item {
	display: table-cell;
	flex: none;
	position: static;
	width: 33.3%;
	margin: 0;
	padding: 0 10px 0 40px;
	background-color: #ccdaeb;
	color: #005bac;
	font-size: 16px;
	font-weight: 700;
	line-height: 60px;
	text-align: center;
	vertical-align: middle;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item--input {
	width: 29%;
	padding-left: 20px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item--confirm {
	width: 33%;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item--complete {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

/* 項目の右端の矢印（上半分 ::before / 下半分 ::after） */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item::before,
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item::after {
	content: "";
	display: block;
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	/* 本番の疑似要素は box-sizing: content-box。
	 * テーマ側のリセットで border-box になると
	 * 幅 30px に白ボーダー 4px が食い込み、矢印が本番より 4px 短くなる。 */
	box-sizing: content-box;
	width: 30px;
	height: 30px;
	margin-left: auto;
	margin-right: -30px;
	background-color: #ccdaeb;
	border-right: 4px solid #fff;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item::before {
	margin-bottom: -30px;
	transform: skew(30deg);
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item::after {
	margin-top: -30px;
	transform: skew(-30deg);
}

/* 最後の項目には矢印を付けない（本番 li:last-child::before/::after） */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item--complete::before,
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item--complete::after {
	display: none;
}

/* 現在の画面（本番 .msr_flow .active） */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"] {
	background-color: #005bac;
	color: #fff;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"]::before,
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"]::after {
	background-color: #005bac;
}

/* 番号の丸（本番 .number） */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item__number {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: static;
	z-index: auto;
	overflow: visible;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	margin-right: 10px;
	padding-top: 3px;
	padding-right: 1px;
	background-color: transparent;
	border: 1px solid #005bac;
	border-radius: 100%;
	color: #005bac;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
}

/* 本番 .contact-form-base li:nth-child(3) .number */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item--complete .smf-progress-tracker__item__number {
	margin-left: -12px;
	padding-right: 0;
}

/* 本番 .active-number */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

/* Snow Monkey Forms の markup は番号とテキストが別の div で、
 * 改行のぶんの空白（約4px）が入って本番より横に広がる。
 * （本番の markup は <span class="number">1</span>入力 で空白が無い）
 *
 * li の font-size を 0 にすると空白は消えるが、
 * **行ボックスのベースラインも上に動いて中身が5px上にずれる**。
 * そこで font-size は 0 にしたまま、中身を vertical-align: middle にして
 * ベースラインではなく行の中央に合わせ、本番と同じ縦位置に戻す。 */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item {
	font-size: 0;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item__number,
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item__text {
	vertical-align: middle;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item__text {
	display: inline;
	margin-top: 0;
	color: inherit;
	font-size: 16px;
	font-weight: inherit;
}

.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
	color: #fff;
}

/* スクリーンリーダー用の補助文は見せない */
.snow-monkey-form .smf-progress-tracker .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- 確認画面 --------------------------------------------------------
 * 本番 `/contact/conf.html`（`.contact-form-collect`）の実ルールを移植。
 * 本番は入力/確認/完了が別ページだが、Snow Monkey Forms は1ページ内で
 * 切り替わるので `form[data-screen="confirm"]` で出し分ける。
 *
 * 本番の確認画面は入力画面とかなり違う。実測（ローカルで /contact/conf.html を描画）:
 *   .contact-form-collect.form .mform-supply-text   → display: none  （補足テキストを出さない）
 *   .contact-form-collect.form .mform-required-text
 *   .contact-form-collect.form .mform-sub-text      → display: none  （必須／任意マークも出さない）
 *   .contact-form-collect.form dl                   → margin-top: 35px
 *   .contact-form-collect.form .mform-form-name     → 16px / weight 500 / padding-top 0
 *   .contact-form-collect.form dl dd                → 背景 #fff / 角丸6px / min-height 60px
 *                                                     / padding 16px 20px / 16px / 中央寄せ
 * ------------------------------------------------------------------- */

/* 補足テキストと必須／任意マークは確認画面では出さない */
.snow-monkey-form[data-screen="confirm"] .smf-item__description,
.snow-monkey-form[data-screen="confirm"] .smf-require,
.snow-monkey-form[data-screen="confirm"] .smf-optional {
	display: none;
}

/* 本番 .contact-form-collect.form dl { margin-top: 35px } */
.snow-monkey-form[data-screen="confirm"] .smf-item {
	margin-top: 35px;
}

.snow-monkey-form[data-screen="confirm"] .smf-item:first-of-type {
	margin-top: 0;
}

/* 本番 .contact-form-collect.form .mform-form-name */
.snow-monkey-form[data-screen="confirm"] .smf-item__label__text {
	padding-top: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
}

/* 値は白いカードに入る（本番 .contact-form-collect.form dl dd） */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	min-height: 60px;
	padding: 16px 20px;
	border-radius: 6px;
	background-color: #fff;
	font-size: 16px;
	line-height: calc(26 / 16);
	color: #333;
}

/* 自由記述は複数行になるので上寄せ（本番 .mform-question-define dd） */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="message"] {
	align-items: flex-start;
	height: auto;
	white-space: pre-line;
	word-break: break-all;
}

/* --- 確認画面のステップバー ------------------------------------------
 * 本番は通過済みの段階も active のまま（確認ページは li.active が 1 と 2 の2つ）。
 * Snow Monkey Forms は現在地の1つだけに aria-current="true" を付けるので、
 * 通過済みの分を CSS で補う。
 * ------------------------------------------------------------------- */
.snow-monkey-form[data-screen="confirm"] .smf-progress-tracker .smf-progress-tracker__item--input {
	background-color: #005bac;
	color: #fff;
}

.snow-monkey-form[data-screen="confirm"] .smf-progress-tracker .smf-progress-tracker__item--input::before,
.snow-monkey-form[data-screen="confirm"] .smf-progress-tracker .smf-progress-tracker__item--input::after {
	background-color: #005bac;
}

.snow-monkey-form[data-screen="confirm"] .smf-progress-tracker .smf-progress-tracker__item--input .smf-progress-tracker__item__number {
	border-color: #fff;
	color: #fff;
}

.snow-monkey-form[data-screen="confirm"] .smf-progress-tracker .smf-progress-tracker__item--input .smf-progress-tracker__item__text {
	color: #fff;
}

/* --- 確認画面の注記（本番 .contact-form-collect-note） ----------------
 * 本番は確認ページの本文に直接置かれている PC 限定の文言。
 * 605_confirm_note.php がステップバーとフォームの間へ差し込む。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-confirm-note {
	display: none;
	width: 800px;
	max-width: calc(100% - 40px);
	margin: 0 auto 30px;
	font-size: 16px;
	line-height: 1;
	color: #005bac;
	text-align: center;
}

.snow-monkey-form[data-screen="confirm"] .smf-confirm-note {
	display: block;
}

.snow-monkey-form .smf-confirm-note strong {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

/* 本番は pc-only。SPでは出さない */
@media screen and (max-width: 767px) {
	.snow-monkey-form[data-screen="confirm"] .smf-confirm-note {
		display: none;
	}
}

/* --- 条件付き項目（グーホーム沖縄） --------------------------------------
 * 本番はフォーム定義に style="display: none;" を直接書き、
 * contact.js の handleGooHomeVisibility() が
 * 「グーホーム沖縄」選択時だけ表示していた。
 *
 * ここでは既定を非表示にし、605_goohome_fields.php が付ける
 * form[data-goohome="true"] のときだけ出す。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-item:has( [name="company_address"] ),
.snow-monkey-form .smf-item:has( [name="phone"] ) {
	display: none;
}

.snow-monkey-form[data-goohome="true"] .smf-item:has( [name="company_address"] ),
.snow-monkey-form[data-goohome="true"] .smf-item:has( [name="phone"] ) {
	display: flex;
}

/* --- 確認画面で未入力の任意項目を出さない ----------------------------
 * 本番は確認ページ本文末尾の script が
 * 「値が入っている .mail-form dl だけ display:block」にしていた。
 * Snow Monkey Forms は空の項目も並べるので、同じ見た目になるよう隠す。
 * 判定は 605_confirm_empty.php が付ける data-empty="true"。
 * ------------------------------------------------------------------- */
.snow-monkey-form[data-screen="confirm"] .smf-item[data-empty="true"] {
	display: none;
}

/* --- 入力エラーのまとめ表示 ------------------------------------------
 * 本番は contact.js が .js-cf-start-alert-box を作ってフォーム先頭に置いていた。
 * 605_error_summary.php が同じものを組み立てる。
 *
 * 値は本番 contact.css の `.js-cf-start-alert-box` 一式を
 * 2026-08-26 に実測して移したもの（PC1280 / SP375 とも同じ値）。
 *   枠   2px solid #DE0000 / radius 6px / 背景 #fff（赤系の塗りではない）
 *   padding 20px（左右も 20px）
 *   見出し 16px / 700 / line-height 26px / #DE0000 / padding-left 25px
 *          ::before に 18×18 の ❗アイコン（SVG）
 *   箇条書き 16px / 400 / line-height 26px / #DE0000
 *          list-style は none で、行頭の「・」は li::before の content
 *
 * 余白は本番のエラー表示時の実測に合わせる。
 *   PC: ステップバー下端 → ボックス上端 20px（本番 margin-top -52px。
 *       ステップバーの margin-bottom 72px と相殺して 20px になる）
 *       ボックス下端 → 最初の項目 59px
 *   SP: ステップバー下端 → ボックス上端 20px（margin-top 0）
 *       ボックス下端 → 最初の項目 92px
 *       （本番はボックスがフォームカードの外側にあり、
 *         ボックスの margin-bottom 35px + カード上部の余白 57px = 92px。
 *         こちらはカードの中なので margin-bottom で同じ間隔を作る）
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-error-summary {
	box-sizing: border-box;
	width: 800px;
	max-width: calc(100% - 40px);
	margin: -52px auto 59px;
	padding: 20px;
	border: 2px solid #de0000;
	border-radius: 6px;
	background-color: #fff;
}

.snow-monkey-form .smf-error-summary__title {
	position: relative;
	z-index: 0;
	margin: 0 0 5px;
	padding-left: 25px;
	font-size: 16px;
	font-weight: 700;
	line-height: calc(26 / 16);
	color: #de0000;
}

.snow-monkey-form .smf-error-summary__title::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0.2em;
	left: 0;
	width: 18px;
	height: 18px;
	background: url("/assets/img/contact/icon_start-form-error.svg") no-repeat left top;
	background-size: 100% auto;
}

.snow-monkey-form .smf-error-summary ul {
	margin: 0;
	padding-left: 25px;
	list-style: none;
}

.snow-monkey-form .smf-error-summary li {
	font-size: 16px;
	font-weight: 400;
	line-height: calc(26 / 16);
	color: #de0000;
}

.snow-monkey-form .smf-error-summary li::before {
	content: "・";
}

.snow-monkey-form .smf-error-summary li + li {
	margin-top: 0;
}

/* --- 補足文の中のリンク（本番 .form dl > dd > p > a） ---------------- */
.snow-monkey-form .smf-item__description a {
	color: #005bac;
	text-decoration: underline;
}

/* --- フォーム末尾の注記（本番 .mform-note）
 *   16px / #333 / line-height 26px / margin-bottom 54px
 * ------------------------------------------------------------------- */
/* .smf-form の中に置かれるので幅の指定は要らない。
 * 幅を持たせると左右に余白が付いて本番とずれる（本番は 800px いっぱい）。 */
.snow-monkey-form .smf-note {
	margin: 0 0 54px;
	font-size: 16px;
	line-height: 26px;
	color: #333;
}

/* --- 送信ボタンの無効状態 --------------------------------------------
 * 本番は必須項目が揃うまで submit が disabled になっている。
 * 605_submit_lock.php が JS で同じ挙動を再現する。
 * 本番 .contact-form-start.form [name="submitConfirm"][disabled]
 *   background #ADADAD / border 1px solid #fff / cursor not-allowed
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-action button[disabled],
.snow-monkey-form .smf-action input[type="submit"][disabled] {
	background: #adadad;
	border: 1px solid #fff;
	/* 本番は disabled でも文字色が白のまま。ブラウザ標準の
	   グレーが当たらないよう明示する */
	color: #fff;
	opacity: 1;
	cursor: not-allowed;
}

.snow-monkey-form .smf-action button[disabled]:hover,
.snow-monkey-form .smf-action input[type="submit"][disabled]:hover {
	opacity: 1;
}

/* --- スマートフォン ---------------------------------------------------
 * 本番 contact.css の @media screen and (max-width: 767px) の値をそのまま使う。
 * （以前は 900px で切っていたが、本番の分岐点は 767/768px なので合わせた）
 * ------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	/* 本番SPのフォーム幅は .inner（padding: 30px 15px）の内側＝親幅 − 30px。
	 * PC用の max-width: calc(100% - 40px) が残ると 10px 狭くなる。 */
	.snow-monkey-form .smf-form,
	.snow-monkey-form > .smf-action,
	.snow-monkey-form > .smf-item,
	.snow-monkey-form > .smf-system-error-content-ready {
		max-width: calc(100% - 30px);
	}

	/* ステップバーだけは本番SP（ul.msr_flow_sp）が親幅いっぱいで、
	 * 左右の余白はバー自身の padding: 0 10px が持つ。 */
	.snow-monkey-form > .smf-progress-tracker {
		width: 100%;
		max-width: 100%;
	}

	/* エラーのまとめ表示。本番SPは .js-cf-start-alert-outer の
	 * margin: 0 10px で親幅 − 20px（375px 時 x=25 / w=325）。
	 * 入力欄（親幅 − 30px）より左右 5px ずつ広い。 */
	.snow-monkey-form .smf-error-summary {
		max-width: calc(100% - 20px);
		/* 本番SPは margin-top 0（ステップバーの margin-bottom 20px がそのまま
		 * ボックスまでの間隔になる）。PC用の -52px を打ち消す。 */
		margin-top: 0;
		margin-bottom: 92px;
	}

	/* ここは 584 と同じ contact.css でも、605 は .contact-form-start.form
	 * （.mform-* 系）という別スタイル。汎用の `.form dl` SP 値
	 * （margin-top 15px / dt margin-bottom 5px / ラベル 16px）を当てると
	 * 1 行あたり 11px 低くなるので、605 実測の値を使う。
	 *   dl        margin-top 37px
	 *   dt        font-size 16px / margin-bottom 14px
	 *   .mform-form-name  font-size 18px / line-height 26/18 / padding-top 2px
	 */
	.snow-monkey-form .smf-item {
		margin-top: 37px;
	}

	.snow-monkey-form .smf-item:last-of-type {
		margin-bottom: 30px;
	}

	/* 本番 .mform-contact-text-define（お問い合わせ内容）だけ上マージンが 17px */
	.snow-monkey-form .smf-item:has( [name="hope[]"] ) {
		margin-top: 17px;
	}

	/* 本番 .mform-question-define（その他・ご質問等）は下マージン 30px */
	.snow-monkey-form .smf-item:has( .smf-textarea-control ) {
		margin-bottom: 30px;
	}

	.snow-monkey-form .smf-item__col--label {
		font-size: 16px;
	}

	.snow-monkey-form .smf-item__label {
		margin-bottom: 14px;
	}

	/* 本番 .contact-form-base.form .mform-form-name */
	.snow-monkey-form .smf-item__label__text {
		padding-top: 2px;
		font-size: 18px;
		line-height: calc(26 / 18);
	}

	/* 本番 .contact-form-start.form .mform-privacy-policy-define .mform-supply-text */
	.snow-monkey-form .smf-item:has( input[name^="agree"] ) .smf-item__description {
		margin-bottom: 19px;
	}

	/* 19px + 11px = 30px（本番SPの実効値）。PC は 13 + 15.5 = 28.5px */
	.snow-monkey-form .smf-item:has( input[name^="agree"] ) .smf-checkbox-control {
		margin-top: 11px;
	}

	.snow-monkey-form .smf-text-control__control {
		height: 60px;
		padding: 0 15px;
		font-size: 14px;
	}

	/* 605 は .contact-form-start.form 系。汎用 `.form dl > dd > textarea` の
	 * SP 値（min-height 120 / padding 10px 15px）ではなく本番実測値を使う。 */
	.snow-monkey-form .smf-textarea-control__control {
		min-height: 200px;
		padding: 15px 20px;
	}

	/* SP は1列 */
	.snow-monkey-form .smf-radio-buttons-control .smf-label,
	.snow-monkey-form .smf-checkboxes-control .smf-label {
		width: 100%;
	}

	.snow-monkey-form .smf-action {
		flex-flow: column;

		/* 本番SP確認画面 .btn-form li { margin-top: 20px }（実測ボタン間 20px） */
		gap: 20px;
	}

	/* 本番SPの .mform-note は入力画面 margin-bottom:37px / 確認画面 20px と
	 * 画面ごとに違う。PC 用の 54px のままだと入力画面で注記〜ボタンが
	 * 本番 37px に対し 54px になる（実測）。
	 * 確認画面は本番実測「注記下端 → ボタン上端 55px」に合わせる。 */
	.snow-monkey-form .smf-note {
		margin-bottom: 37px;
	}

	.snow-monkey-form[data-screen="confirm"] .smf-note {
		margin-bottom: 55px;
	}

	/* SMF 既定（app.css）の
	 *   .smf-action .smf-button-control + .smf-button-control { margin-left: var(--_margin-1) }
	 * は横並び前提。SP は flex-flow: column なので 2つ目の
	 * 「送信する」だけ左マージン 17.07px 分だけ右にずれ、幅も狭くなる。
	 * 本番（.btn-form li は margin-left なし）に合わせて打ち消す。 */
	.snow-monkey-form .smf-action .smf-button-control + .smf-button-control {
		margin-left: 0;
	}

	/* 本番 .contact-form-base.form .btn-form li input { width: 84%; height: 60px } */
	.snow-monkey-form .smf-action button,
	.snow-monkey-form .smf-action input[type="submit"] {
		width: 84%;
		height: 60px;
		font-size: 16px;
		line-height: 60px;
	}

	/* --- ステップバー（本番 .msr_flow.msr_flow_sp の値） --- */
	/* 本番SPはステップバー（ul.msr_flow_sp）がグレー地の .form の「外側・上」にあり、
	 * バーの周囲は白。実測（390px）: バー y=152〜192、.form（#f3f5f7）は y=212 から。
	 * Snow Monkey Forms はバーが form の内側なので、
	 *   1) form の上マージン/パディングを 0 にしてバーを本番と同じ y=152 に置き
	 *   2) バー自身（＋下の 20px）を白地にして、本番の「白 60px → グレー」を再現する。
	 * ※ 上位の @media (max-width: 1100px) の margin-top:40px / padding-top:60px が
	 *    そのまま SP にも効いていて、バーが本番より 80px 下がっていた。 */
	.snow-monkey-form {
		margin-top: 0;
		padding-top: 0;
	}

	/* form の padding-top を 0 にしたぶん、本番でフォーム本体側が持っていた
	 * 上の余白（.inner-s の padding-top 20px ＋ 先頭 dl の margin-top 37px）を
	 * ここで持たせる。本番SP実測: 先頭行 y=269（グレー開始 212 + 20 + 37）。 */
	.snow-monkey-form .smf-form {
		padding-top: 20px;
	}

	.snow-monkey-form .smf-item:first-of-type {
		margin-top: 37px;
	}

	.snow-monkey-form .smf-progress-tracker {
		margin-bottom: 0;
		padding: 0 10px 20px;
		background-color: #fff;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item {
		position: relative;
		height: 40px;
		padding: 0 10px 0 20px;
		background-color: #e3e7ec;
		/* 本番の markup は <span class="number">1</span>入力 で番号とテキストの間に
		 * 空白が無い。SMF は別 div なので改行由来の空白（12px 時 約3px）が入る。
		 * PC 側と同じく li を font-size: 0 にして空白を消す。
		 * 倍率の line-height は font-size: 0 だと 0 になるので px で持たせる
		 * （本番SP: font-size 12px / line-height 1.5 = 18px）。 */
		font-size: 0;
		line-height: 18px;
		/* 本番SPの li は font-weight: normal（太字は .number だけ）。
		 * PC 用の 700 が残るとラベルが本番より太くなる。 */
		font-weight: 400;
	}

	/* 本番SPのラベルは li の 12px。基底の 16px が残ると
	 * 「確認・送信」が枠に収まらず2行に折り返す。 */
	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item__text {
		font-size: 12px;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item--input {
		padding-left: 10px;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item::before,
	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item::after {
		/* 本番の疑似要素は box-sizing: content-box（幅 14px + 白ボーダー 4px = 18px）。
		 * テーマ側のリセットで border-box になっていると青い部分が 10px に痩せ、
		 * 矢印の中に白い「>」の切り欠きが出る。 */
		box-sizing: content-box;
		position: absolute;
		right: -10px;
		z-index: 1;
		width: 14px;
		height: 20px;
		margin: 0;
		background-color: #e3e7ec;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item::before {
		top: 0;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item::after {
		top: auto;
		bottom: 0;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"]::before,
	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"]::after {
		background-color: #005bac;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item__number {
		width: auto;
		height: auto;
		margin-right: 7px;
		border: none;
	}

	/* 本番SPの3番目の番号は padding-right: 1px（PC の 0 とは違う）。
	 * 0 のままだと番号の幅が 7.5px になり本番の 8.5px より 1px 狭い。 */
	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item--complete .smf-progress-tracker__item__number {
		margin-left: -7px;
		padding-right: 1px;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
		border: none;
	}
}