@charset "UTF-8";
/* ===================================================================
 * Snow Monkey Forms 用スタイル
 *   旧 MW WP Form 584「お問い合せ・エントリーフォーム」の再現
 *   /recruit/contact/form.html
 *
 * 本番 assets/css/contact.css の **汎用ブロック**（.form / .msr_flow /
 * .form dl > dt|dd / .btn-form）を移植したもの。
 * 605（/contact/form.html）は .contact-form-base 系の別デザインなので、
 * 値を混ぜないこと。両者は色もサイズも違う。
 *
 * 数値・色は 2026-08-20 に旧フォームを実際に描画して computed から採取。
 *
 * 対応表（本番 → Snow Monkey Forms）
 *   .form                             → .snow-monkey-form
 *   .inner-s                          → 内容幅 800px
 *   .msr_flow                         → .smf-progress-tracker
 *   .msr_flow li.active               → [aria-current="true"] ＋ 通過済みの補完
 *   .form dl                          → .smf-item
 *   .form dl > dt                     → .smf-item__col--label
 *   .form dl > dt > span:last-child   → .smf-require（必須マーク）
 *   .form dl > dd select / input      → .smf-select-control__control ほか
 *   .btn-form input[type=submit]      → .smf-action ボタン
 *
 * ★ 584 は「必須」マークだけで「任意」マークは出さない（本番の実装どおり）。
 * =================================================================== */

/* --- フォーム全体（本番 .form: padding 80px 0 / 背景 #f3f5f7） -------- */
.snow-monkey-form {
	box-sizing: border-box;
	padding: 80px 0;
	background-color: #f3f5f7;
}

/* 本番の .inner-s（margin: 0 125px → 内容幅 800px）に相当 */
.snow-monkey-form .smf-form,
.snow-monkey-form > .smf-progress-tracker,
.snow-monkey-form > .smf-confirm-lead,
.snow-monkey-form > .smf-action,
.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;
}

/* --- ステップバー -----------------------------------------------------
 * 本番 .msr_flow（汎用ブロック。605 の .contact-form-start とは別配色）
 *   li        背景 #e3e7ec / 文字 #333 / 60px / 16px
 *   li.active 背景 #a2b0c6 / 文字 #fff
 *   矢印      30x30 / border-right 3px #fff / skew(±30deg)
 * 文言は「お問い合わせ内容の入力 / 入力内容の確認 / 送信完了」
 * （584_progress_labels は使わず、605 用の文言と混ざらないよう
 *   このフォーム用に 584_progress_labels.php で差し替える）
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-progress-tracker {
	display: table;
	margin-bottom: 60px;
	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;
	/* 本番 .msr_flow li は padding 0 10px 0 40px。先頭だけ 20px */
	padding: 0 10px 0 40px;
	background-color: #e3e7ec;
	color: #333;
	font-size: 16px;
	line-height: 60px;
	text-align: center;
	vertical-align: middle;
}

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

.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 に白ボーダー 3px が食い込み、矢印が本番より 3px 短くなる。 */
	box-sizing: content-box;
	width: 30px;
	height: 30px;
	margin-left: auto;
	margin-right: -30px;
	background-color: #e3e7ec;
	border-right: 3px 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);
}

.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;
}

/* 現在地 */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item[aria-current="true"] {
	background-color: #a2b0c6;
	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: #a2b0c6;
}

/* 584 は確認画面で「入力」を active にしない。
 *
 * 本番 /recruit/contact/conf.html の markup を実測すると、
 * active が付いているのは「入力内容の確認」の1つだけで、
 * 通過済みの「お問い合わせ内容の入力」は通常表示に戻る。
 *
 *   form.html    入力=active   確認=－        完了=－
 *   conf.html    入力=－        確認=active   完了=－
 *   finish.html  入力=－        確認=－        完了=active
 *
 * 605（smf-contact.css）は本番 /contact/conf.html で
 * 「1入力」と「2確認・送信」の両方に active が入っており仕様が異なる。
 * 以前ここに 605 と同じ「通過済みも active」の指定を置いていたが、
 * 584 の本番と食い違っていたため削除した（2026-08-28）。
 *
 * SMF は現在のステップにだけ aria-current="true" を付けるので、
 * 指定を外せば本番と同じ「現在地のみ active」になる。 */

/* 584 のステップバーは番号を出さない（本番の markup に span.number が無い） */
.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item__number {
	display: none;
}

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

.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;
}

/* --- 項目のまとまり（本番 .form dl: margin-top 25px） ----------------- */
.snow-monkey-form .smf-item {
	display: block;
	margin: 25px 0 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;
}

.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 / 18px / weight 400 / #333 */
/* 本番 .form dl > dt { margin-bottom: 15px; font-size: 18px }
 * カラム自体に 18px を指定しないと、ページ既定の 15px を継承して行の高さがずれる。 */
.snow-monkey-form .smf-item__col--label {
	margin-bottom: 15px;
	font-size: 18px;
}

.snow-monkey-form .smf-item__label {
	display: block;
	margin: 0;
}

.snow-monkey-form .smf-item__label__text {
	font-size: 18px;
	font-weight: 400;
	color: #333;
}

/* --- 必須マーク ------------------------------------------------------
 * 本番 .form dl > dt > span:last-child
 *   inline-block / 40x20 / margin-left 15px（ラベルの右側）
 *   枠 1px #FF0000 / 文字 #FF0000 / 13px / 中央 / line-height 20px / 背景なし
 * 584 は「任意」マークを出さないので .smf-optional は非表示にする。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-require {
	display: inline-block;
	width: 40px;
	height: 20px;
	margin-left: 15px;
	border: 1px solid #ff0000;
	color: #ff0000;
	font-size: 13px;
	text-align: center;
	line-height: 20px;
	background-color: transparent;
}

.snow-monkey-form .smf-optional {
	display: none;
}

/* --- セレクト（本番: 800x50 / padding 0 25px / 枠 1px #fff）
 * Snow Monkey Forms の .smf-select-control は inline-block なので、
 * 内容幅いっぱいにするには入れ物側も広げる必要がある。
 *
 * ★ 本番は appearance を触っていない＝**ブラウザ標準の見た目のセレクト**。
 *   背景色の指定も無く、UA既定（Chrome では #efefef）がそのまま出ている。
 *   プラグインは appearance:none にして独自の矢印（.smf-select-control__toggle）を
 *   足すため、そのままだと本番と違う平坦な見た目になる。両方を元に戻す。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-select-control__control {
	appearance: auto;
	-webkit-appearance: auto;
}

/* プラグインが足す矢印は消す（標準のセレクトが自前で矢印を出すため） */
.snow-monkey-form .smf-select-control__toggle {
	display: none;
}

.snow-monkey-form .smf-select-control,
.snow-monkey-form .smf-text-control {
	display: block;
	width: 100%;
}

/* テキストエリアは本番も inline-block のまま（行ボックスの下に約3pxの余白ができる）。
 * block にすると行の高さが本番より3px低くなる。 */
.snow-monkey-form .smf-textarea-control {
	display: inline-block;
	width: 100%;
}

/* 本番（contact.css:490-501）が select に指定しているのは
 *   width 100% / height 50px / padding 0 25px / font-size 16px
 *   / border 1px #fff / box-sizing border-box / cursor pointer
 * の7つ。**background-color は指定していない**。
 * 計測で見えていた #efefef はブラウザ標準（UA既定）で、CSSの値ではないため
 * 数値で固定しない。プラグインが白を当ててくるので revert で巻き戻す。 */
.snow-monkey-form .smf-select-control__control {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 25px;
	border: 1px solid #fff;
	font-size: 16px;
	cursor: pointer;

	/* 本番は指定していない＝ブラウザ標準へ戻す */
	background-color: revert;
	border-radius: revert;
	color: revert;
	box-shadow: revert;
}

/* --- テキスト・メール・電話（本番: 800x50 / padding 0 25px / 背景 #fff） */
.snow-monkey-form .smf-text-control__control {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 25px;
	border: 1px solid #fff;
	border-radius: 0;
	background-color: #fff;
	color: #000;
	font-size: 16px;
}

/* 本番 .form dl > dd input:placeholder-shown { color: #aaa } */
.snow-monkey-form .smf-text-control__control:placeholder-shown {
	color: #aaa;
}

/* --- テキストエリア（本番: min-height 300px / padding 15px 25px） ----- */
.snow-monkey-form .smf-textarea-control__control {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	min-height: 300px;
	padding: 15px 25px;
	border: 1px solid #fff;
	border-radius: 0;
	background-color: #fff;
	color: #000;
	resize: vertical;
}

/* --- エラー時の赤枠 ---------------------------------------------------
 * 本番は 584 のフォーム定義に直書きされた <style> で赤枠を出している。
 *
 *   .mw_wp_form dd select:has(+ .error),
 *   .mw_wp_form dd input[type="text"|"url"|"email"]:has(+ .error),
 *   .mw_wp_form dd textarea:has(+ .error) { border: 2px solid #B70000; }
 *
 * 2026-08-26 に本番でエラーを発生させて実測した値:
 *   border 2px solid rgb(183,0,0) / border-radius 0 / outline なし /
 *   背景・パディングは通常時のまま（box-sizing:border-box なので幅は変わらない）
 * ★ 同意チェックボックスには赤枠が付かない（本番のセレクタが拾っていない）。
 *   SMF は checkbox にも data-invalid を付けるので、対象を明示して除外する。
 *
 * Snow Monkey Forms がエラー時に付ける属性は data-invalid="1" であって
 * "true" ではない（プラグインの app.css も [data-invalid="1"] で書かれている）。
 * 旧 `[data-invalid="true"]` は**どの要素にもマッチせず死んでいた**。
 *
 * プラグイン既定の `.smf-form [data-invalid="1"]`（薄赤 rgb(217,133,133)）も、
 * 通常時の枠を定義している下記と同詳細度 [0,2,0] で読込順に負けるため効かない。
 *   .snow-monkey-form .smf-text-control__control   ほか
 * そこで属性セレクタを足して詳細度 [0,3,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 #b70000;
}

.snow-monkey-form .smf-error-messages {
	margin-top: 8px;
	color: #b70000;
	font-size: 14px;
}

/* --- 同意チェック ----------------------------------------------------
 * ★ 本番は素のチェックボックス。実測値は
 *   input 13x13 / margin 3px 5px 3px 4px / ベースライン揃え / テキスト15px。
 *
 * プラグインは独自のチェックボックスを描く
 *   .smf-checkbox-control          … inline-flex + align-items:flex-start
 *   .smf-checkbox-control__control … appearance:none / 16x16 / 角丸 / ::before でチェック
 * このままだと**チェックとテキストの上下位置がずれる**ので標準へ戻す。
 * ------------------------------------------------------------------- */
/* 本番は同意チェックを <ul><li> で包み、li に margin-top: 7px が付く
 * （.form dl > dd > ul > li）。同じ高さになるよう再現する。 */
.snow-monkey-form .smf-checkboxes-control__control {
	display: block;
	margin: 7px 0 0;
	padding: 0;
}

.snow-monkey-form .smf-checkbox-control {
	display: inline;
	align-items: normal;
	gap: normal;
	height: auto;
	padding: 0;
	border: none;
	background: none;
}

.snow-monkey-form .smf-checkbox-control__control {
	appearance: auto;
	-webkit-appearance: auto;
	flex: none;
	width: auto;
	height: auto;
	margin: 3px 5px 3px 4px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	vertical-align: baseline;
}

/* プラグインが ::before で描くチェックマークは出さない */
.snow-monkey-form .smf-checkbox-control__control::before {
	content: none;
}

/* ★ :checked のときはプラグイン側の詳細度が上で打ち消しが効かない。
 *   .smf-form .smf-checkbox-control__control:checked { background-color:#3a87fd; border-color:#3a87fd }
 *   .smf-form .smf-checkbox-control__control:checked:before { content:""; ... }
 * これが残ると青のベタ塗り＋白いチェックになり、
 * ブラウザ標準（本番の見た目）に戻らない（2026-08-26 実測・修正）。 */
.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;
}

.snow-monkey-form .smf-checkbox-control__label {
	display: inline;
	vertical-align: baseline;
	font-size: 15px;
	color: #333;
}

/* --- 操作ボタン ------------------------------------------------------
 * 本番 .form .btn-form input[type=submit]
 *   330x60 / 背景 #005bac / 枠 1px #005bac / 白 / 18px / 角丸なし
 *   li は inline-block（先頭の margin-left は 0）
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-action {
	display: flex;
	justify-content: center;

	/* 本番の間隔は li の margin-left:30px ＋ inline-block 間の空白 3.75px = 33.75px。
	 * 実測: 本番 確認画面 PC1280 のボタン間 33.75px / ボタン中心 ±181.88px。 */
	gap: 33.75px;
	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: 330px;
	height: 60px;
	margin: 0;
	/* 本番は padding を指定しておらず、ブラウザ標準の 1px 6px が出ている */
	padding: revert;
	background: #005bac;
	border: 1px solid #005bac;
	border-radius: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	line-height: 60px;
	/* 本番 input[type=submit] は UA 既定の white-space:pre で折り返さない */
	white-space: nowrap;
	cursor: pointer;
}

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

/* 「入力画面に戻る」は白地（本番 .mw_wp_form_preview .btn-form li:first-child input） */
.snow-monkey-form .smf-action button[data-action="back"] {
	background: #fff;
	color: #005bac;
}

.snow-monkey-form .smf-action button[disabled] {
	background: #adadad;
	border-color: #adadad;
	color: #fff;
	opacity: 1;
	cursor: not-allowed;
}

.snow-monkey-form .smf-action button[disabled]:hover {
	opacity: 1;
}

/* --- 補足文・注記 ---------------------------------------------------- */
/* 584 の補足文は個人情報の同意欄にしか無い。
 *
 * ★ 本番は dt（ラベル）と dd（説明文＋チェック）に分かれていて、
 *   ラベルの下に dt の margin-bottom:15px が入ってから説明文が来る。
 *     ラベル → 15px → 説明文 → 7px → チェックボックス
 *   Snow Monkey Forms は説明文もラベル側のカラムに入るため、
 *   そのままだと説明文がラベルの直下に付き、15px がチェックの手前に来てしまう。
 *   同意欄だけ、余白の位置を本番と同じ並びに付け替える。
 *
 *   文字は .form の既定（15px / line-height 15px）を引き継いでいる。 */
.snow-monkey-form .smf-item__description {
	margin: 0;
	font-size: 15px;
	line-height: 15px;
	color: #333;
}

/* 本番は「個人情報の取扱いについて」から下が .confirm_hidden で括られていて、
 * その手前の「備考欄」が .bgWhite 内の :last-of-type になるため
 * `.form dl:last-of-type { margin-bottom: 60px }` が効く。
 * 結果、備考欄と個人情報欄の間だけ 60px（他の項目間は 25px）。
 * Snow Monkey Forms は全項目が同じ階層に並ぶのでこの差が出ない。
 * 同意欄の上マージンで同じ間隔にする。 */
.snow-monkey-form .smf-item:has( [name="agree[]"] ) {
	margin-top: 60px;
}

.snow-monkey-form .smf-item:has( [name="agree[]"] ) .smf-item__col--label {
	margin-bottom: 0;
}

.snow-monkey-form .smf-item:has( [name="agree[]"] ) .smf-item__description {
	margin-top: 15px;
}

.snow-monkey-form .smf-item__description a {
	color: #005bac;
	text-decoration: underline;
}

/* .smf-form（すでに800px）の中に置かれるので幅の指定は不要。
 * 幅を持たせると左右に余白が付いて本番とずれる。
 * 本番の注記の <p> は margin: 0 0 40px。 */
/* 本番の注記は .confirm_hidden 直下の <p>。
 * font-size は指定されておらず .form の既定 15px を継承し、
 * line-height は 1.7（＝25.5px）。margin-bottom だけ 40px が指定されている
 * （.form > .inner-s form .bgWhite > .confirm_hidden > p）。 */
.snow-monkey-form .smf-note {
	margin: 0 0 40px;
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}

/* --- 確認画面 --------------------------------------------------------
 * 本番の確認画面（.mw_wp_form_preview）は必須マークを出さない。
 *   実測: dt > span:last-child（必須）の computed display が none。
 *
 * ★ 2026-08-28 訂正: 「値を白カードに入れる指定は無い」は誤りだった。
 *   本番は .bgWhite が入力画面では透明（padding 0）、確認画面だけ
 *   background #fff ＋ padding が付く。実測（/recruit/contact/conf.html）:
 *     PC1280   background #fff / padding 30px / margin-bottom 60px
 *     SP390/320 background #fff / padding 15px / margin-bottom 30px
 *   入力画面は PC/SP とも background 透明 / padding 0 / margin-bottom 0。
 * ------------------------------------------------------------------- */
.snow-monkey-form[data-screen="confirm"] .smf-require,
.snow-monkey-form[data-screen="confirm"] .smf-optional {
	display: none;
}

/* 値の一覧を入れる白カード（本番 .mw_wp_form_preview .bgWhite）。
 * .smf-form は本番の .bgWhite と中身が同じ（全項目＋注記。ボタンは外）。
 * margin-bottom は下の .smf-action の margin-top と相殺するので持たせず、
 * 「備考欄の下端 → ボタンの上端」はボタン側だけで作る（下のコメント参照）。 */
.snow-monkey-form[data-screen="confirm"] .smf-form {
	padding: 30px;
	background-color: #fff;
}

/* カードの内側の余白。本番は
 *   先頭の dl の margin-top 25px（padding 30px の内側なので相殺しない）
 *   末尾の dl（＝備考欄）の margin-bottom 60px
 * が白地の中に入る。実測: カード上端→1行目 55px / 最終行→カード下端 90px。
 * SMF は先頭項目の margin-top を 0 に、末尾（.smf-item:last-of-type）を
 * 確認画面では非表示の同意欄にしているので、確認画面だけ付け替える。
 * 本番の `.form dl:last-of-type` が確認画面では備考欄に当たるのと同じ状態にする。 */
.snow-monkey-form[data-screen="confirm"] .smf-item:first-of-type {
	margin-top: 25px;
}

.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="remarks"] ) {
	margin-bottom: 60px;
}

/* 値の一覧の上の見出し（本番 <p class="alC">以下の内容で送信してよろしいですか？</p>）。
 * ステップバーと .bgWhite の間に置かれる。DOM は smf_confirm_title.php が差し込む。
 * 実測（本番）: PC1280 18px / line-height 30.6px / margin 0 0 40px / 中央 / #333
 *               SP390/320 14px / line-height 21px / margin 0 0 20px / 中央 / #333 */
.snow-monkey-form .smf-confirm-lead {
	/* 本番はこの <p> ではなく親 .inner-s（margin: 0 125px）で中央に載っている。
	 * computed の margin をそのまま写したため、上の
	 * .snow-monkey-form > .smf-confirm-lead の margin-left/right:auto を
	 * 同詳細度の読込順で打ち消してしまい、PC で125px・SP で10px 左にずれていた。
	 * auto を残して中央寄せにする（2026-08-28）。 */
	margin: 0 auto 40px;
	padding: 0;
	color: #333;
	font-size: 18px;
	line-height: 30.6px;
	text-align: center;
}

/* 本番は確認ページ側の本文にしか無い段落なので、入力画面では出さない。 */
.snow-monkey-form:not( [data-screen="confirm"] ) .smf-confirm-lead {
	display: none;
}

.snow-monkey-form[data-screen="confirm"] .smf-placeholder {
	font-size: 16px;
	line-height: calc(26 / 16);
	color: #333;
}

/* 本番の確認画面（.mw_wp_form_preview）は
 *   .mw_wp_form_preview .confirm_hidden { display: none }   （contact.css）
 * で「個人情報の取扱いについて」欄と注記2本をまとめて隠している。
 * .confirm_hidden の直下は dl（個人情報欄）＋ p（注記1）＋ p（注記2）の3要素だけで、
 * 備考欄より上の項目は対象外。SMF 側の対応要素も
 *   .smf-item:has([name="agree[]"]) が1件 ／ p.smf-note が2件
 * のちょうど3要素なので、同じ範囲を隠す。 */
.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="agree[]"] ),
.snow-monkey-form[data-screen="confirm"] .smf-note {
	display: none;
}

/* 上の3要素が消えると本番同様に備考欄の直後がボタンになる。
 * 本番の「備考欄の下端 → ボタンの上端」は PC 150px（SP は 75px）。
 * 本番の内訳は 備考欄 dl の margin-bottom 60px ＋ .bgWhite の padding-bottom 30px
 * ＋ .bgWhite の margin-bottom 60px = 150px。
 * SMF も同じ内訳で作る（備考欄の margin-bottom は上の
 * `.smf-item:has([name="remarks"])` で 60px を付け直している）。
 *   備考欄の margin-bottom 60px ＋ カードの padding-bottom 30px
 *   ＋ ここの 60px = 150px。 */
.snow-monkey-form[data-screen="confirm"] .smf-action {
	margin-top: 60px;
}

/* --- スマートフォン --------------------------------------------------
 * 本番 contact.css の @media screen and (max-width: 767px) の値。
 * ------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	/* 本番SPのフォーム幅は .inner-s（padding: 20px 10px）の内側＝親幅 − 20px。
	 * PC用の max-width: calc(100% - 40px) が残ると 20px 狭くなる。 */
	.snow-monkey-form .smf-form,
	.snow-monkey-form > .smf-progress-tracker,
	.snow-monkey-form > .smf-confirm-lead,
	.snow-monkey-form > .smf-action,
	.snow-monkey-form > .smf-system-error-content-ready {
		width: calc(100% - 20px);
		max-width: calc(100% - 20px);
	}

	/* 本番 contact.css SP: .form dl > dd の select / input
	 *   height: 35px / padding: 0 15px / font-size: 14px
	 * PC値（height 50px / padding 0 25px）のままだと全行が 15px 高くなる。 */
	.snow-monkey-form .smf-text-control__control,
	.snow-monkey-form .smf-select-control__control {
		height: 35px;
		padding: 0 15px;
		font-size: 14px;
	}

	/* 本番 .form dl > dd > textarea */
	.snow-monkey-form .smf-textarea-control__control {
		min-height: 120px;
		padding: 10px 15px;
	}

	/* 同意行の「個人情報の取扱いについて」の説明文。
	 * 本番SP（contact.css @media screen and (max-width: 767px)）の実測値は
	 *   見出し(dt) → margin-bottom 5px → 説明文（14px / line-height 14px）
	 *   → 5px → 同意チェック   で、ブロック全体の高さは 78px。
	 * PC の 15px / line-height 15px のままだと1行あたり1px高くなり、
	 * 見出し直下の 5px も無くなるため本番と行送りがずれる。 */
	.snow-monkey-form .smf-item:has( [name="agree[]"] ) .smf-item__description {
		margin-top: 5px;
		font-size: 14px;
		line-height: 14px;
	}

	/* 本番SPは .form dl の上下マージンが 15px / 30px。
	 * 備考欄の margin-bottom 30px と個人情報欄の margin-top 15px が相殺して
	 * 両者の間隔は 30px、個人情報欄と注記の間も 30px になる。
	 * PC 用の 60px（.form dl:last-of-type 由来）が SP に残ると倍に空く。 */
	.snow-monkey-form .smf-item:has( [name="agree[]"] ) {
		margin-top: 30px;
	}

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

	/* 本番SPの同意チェック（dd > ul > li）は margin-top 5px（PC は 7px）。 */
	.snow-monkey-form .smf-item:has( [name="agree[]"] ) .smf-checkboxes-control__control {
		margin-top: 5px;
	}

	/* 説明文中の「個人情報の取扱いについて」リンク。
	 * 本番の青＋下線（.confirm_hidden > dl > dd > a）は
	 * @media screen and (min-width: 768px) の中にしか無く、SP は本文と同じ
	 * #333・下線なしで出る。PC 用の指定が SP に残ると本番と色が変わる。 */
	.snow-monkey-form .smf-item__description a {
		color: #333;
		text-decoration: none;
	}

	/* 本番SPの注記（.confirm_hidden > p）は
	 *   font-size 14px / line-height 21px / margin-bottom 20px
	 * （.form > .inner-s form .bgWhite > .confirm_hidden > p の SP 指定）。
	 * PC 値（15px / 1.7 = 25.5px / 40px）のままだと行間も間隔も広くなる。 */
	.snow-monkey-form .smf-note {
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 21px;
	}

	/* 確認画面で3要素を隠したあとの「備考欄の下端 → ボタンの上端」。
	 * 本番SP（390px / 320px とも実測 75px）に合わせる。
	 * 内訳は 備考欄の margin-bottom 30px ＋ 白カードの padding-bottom 15px
	 * ＋ ここの 30px = 75px。 */
	.snow-monkey-form[data-screen="confirm"] .smf-action {
		margin-top: 30px;
	}

	/* --- 確認画面（SP） ----------------------------------------------
	 * 本番SPの確認画面は入力画面と別のスタイルが当たっている。
	 * 2026-08-28 に /recruit/contact/conf.html を 390px / 320px で実測:
	 *   .bgWhite   background #fff / padding 15px / margin-bottom 30px
	 *   p.alC      14px / line-height 21px / margin 0 0 20px / 中央
	 *   dl         margin-top 15px、dd の margin-bottom 30px が dl の下に
	 *              抜けて隣の dl の margin-top 15px と相殺 → 行間 30px
	 *              （白カードの内側の先頭だけは相殺せず 15px）
	 *   dt         width 100px / 14px / margin-bottom 7px
	 *   dd         12px / line-height 18px（高さは全行 18px）
	 * 入力画面（dt 16px/16px・dd 14px・行間 15px）とは別物なので、
	 * すべて [data-screen="confirm"] でスコープすること。
	 * ---------------------------------------------------------------- */
	.snow-monkey-form[data-screen="confirm"] .smf-form {
		padding: 15px;
	}

	.snow-monkey-form .smf-confirm-lead {
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 21px;
	}

	.snow-monkey-form[data-screen="confirm"] .smf-item {
		margin-top: 30px;
	}

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

	/* 本番SPの `.form dl:last-of-type { margin-bottom: 30px }`（PC は 60px）。
	 * 確認画面ではこれが備考欄に当たる。 */
	.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="remarks"] ) {
		margin-bottom: 30px;
	}

	.snow-monkey-form[data-screen="confirm"] .smf-item__col--label {
		width: 100px;
		margin-bottom: 7px;
		font-size: 14px;
	}

	/* 行の高さを決めるのはラベルを直に囲む .smf-item__label（div）。
	 * 本番サイト共通の base.css に `div { line-height: 1 }` があり（実測: WINNER）、
	 * 継承より要素に直接当たるこのルールが勝つため、
	 * 親（.smf-item__col--label）に line-height を置いても届かない。 */
	.snow-monkey-form[data-screen="confirm"] .smf-item__label {
		line-height: 21px;
	}

	.snow-monkey-form[data-screen="confirm"] .smf-item__label__text {
		font-size: 14px;
	}

	/* ★ 本番のラベルは行の高さが2種類ある。マークアップの違いがそのまま出たもの。
	 *     dt が <span>ラベル</span><span>必須</span> の行 … span が table-cell で
	 *       line-height 14px → 1行 14px（希望職種カテゴリ / お名前 / フリガナ /
	 *       メールアドレス / メールアドレス確認用 / 電話番号）
	 *     dt にラベルを直書きしている行 … dt の line-height 21px → 1行 21px
	 *       （希望職種 / 希望勤務地 / 経験の有無について / 備考欄）
	 *   SMF は全項目が同じマークアップなので、前者の6項目だけ 14px に落とす。
	 *   line-height はラベルのブロック側に効かせないと strut が 21px のまま残る。 */
	.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="cate_select"] ) .smf-item__label,
	.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="name"] ) .smf-item__label,
	.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="phonetic"] ) .smf-item__label,
	.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="email"] ) .smf-item__label,
	.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="check-email"] ) .smf-item__label,
	.snow-monkey-form[data-screen="confirm"] .smf-item:has( [name="phone"] ) .smf-item__label {
		line-height: 14px;
	}

	.snow-monkey-form[data-screen="confirm"] .smf-placeholder,
	.snow-monkey-form[data-screen="confirm"] .smf-placeholder > * {
		font-size: 12px;
		line-height: 18px;
	}

	/* 必須マークの位置。
	 * 本番は SP だけ dt > span:last-child が float: right / font-size 12px で
	 * 行の右端に張り付き（PC はラベル文字の直後・13px で SMF 側と一致している）。
	 * SMF はラベル文字の直後に inline-block で置かれるため、SP では項目ごとに
	 * 水平位置がばらつく。SP のみ本番と同じ右端固定にする。 */
	.snow-monkey-form .smf-require {
		float: right;
		margin-left: 10px;
		font-size: 12px;
	}

	/* float はラベル行の高さ計算から外れるため、そのままだと必須マークのある行だけ
	 * 20px → 16px に縮んで下の項目が 4px ずつせり上がる。
	 * 本番は dt が display: table でマーク（20px）が行の高さを決めているので、
	 * 必須マークのある行だけ 20px を確保して本番と同じ高さに戻す。
	 * 必須マークの無い「希望職種」は本番も 16px なので対象外。
	 * 確認画面はマーク自体が非表示（本番も表示 0 個）で高さを確保する必要が無く、
	 * 付けると各行が 4px ずつ本番より高くなるため入力画面だけに限定する。 */
	.snow-monkey-form:not( [data-screen="confirm"] ) .smf-item__label:has( .smf-require ) {
		min-height: 20px;
	}

	.snow-monkey-form {
		padding: 40px 0;
	}

	.snow-monkey-form .smf-progress-tracker {
		margin-bottom: 30px;
	}

	.snow-monkey-form .smf-progress-tracker .smf-progress-tracker__item {
		height: 40px;
		padding: 0 10px 0 20px;
		font-size: 11px;
		line-height: 1.5;
		position: relative;
	}

	.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 + 白ボーダー 2px = 16px）。
		 * テーマ側のリセットで border-box になっていると矢印の色部分が痩せ、
		 * 矢印の中に白い「>」の切り欠きが出る。 */
		box-sizing: content-box;
		position: absolute;
		right: -10px;
		z-index: 1;
		width: 14px;
		height: 20px;
		margin: 0;
		border-right: 2px solid #fff;
	}

	.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-item {
		margin-top: 15px;
	}

	.snow-monkey-form .smf-item__col--label {
		margin-bottom: 5px;
		/* 本番 contact.css SP: .form dl > dt { font-size: 16px }
		 * 列自体が 18px のままだと行ボックスの strut が 18px になり 3px 高くなる。 */
		font-size: 16px;
	}

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

	.snow-monkey-form .smf-action {
		flex-flow: column;
		align-items: center;
		gap: 15px;
	}

	/* SMF 既定（app.css）の
	 *   .smf-action .smf-button-control + .smf-button-control { margin-left: var(--_margin-1) }
	 * は横並び前提。SP は flex-flow: column なので 2つ目の「送信する」だけ
	 * 左マージン 17.07px 分（align-items: center では半分の 8.53px）右にずれる。
	 * 本番はボタンが縦に中央で揃うので打ち消す。 */
	.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"] {
		/* 本番 SP 実測 190x34 / 16px / line-height 34px。
		 * SMF はボタンの親が span.smf-button-control（shrink-to-fit）なので
		 * % 指定は縮んだ箱に対して解決されて潰れる。px で固定する。 */
		width: 190px;
		height: 34px;
		font-size: 16px;
		line-height: 34px;
	}
}

/* --- 確認画面（PC） --------------------------------------------------
 * 本番 contact.css の @media screen and (min-width: 768px) にある
 *   .mw_wp_form_preview dl dt,
 *   .mw_wp_form_preview dl dd { display: inline-block; font-size: 18px;
 *                               line-height: 1.7; text-align: left;
 *                               vertical-align: top; }
 *   .mw_wp_form_preview dl dt { width: 200px; }
 * を移植したもの（確認画面だけ「ラベル左・値右」の2カラムになる）。
 * 入力画面は PC でも縦積みのままなので [data-screen="confirm"] でスコープし、
 * SP（max-width: 767px）を一切動かさないよう min-width: 768px に閉じ込める。
 *
 * 実測（本番 /recruit/contact/conf.html PC1280）:
 *   dt  x270 / w200 / h30.6 / 18px / line-height 30.6px
 *   dd  x473.8 / h30.6 / 18px / line-height 30.6px
 *   1行の高さ 45.6px（dt 30.6 ＋ dt の margin-bottom 15）／行ピッチ 70.6px
 *
 * dt と dd の間の 3.75px は本番 markup の </dt> と <dd> の間の空白文字
 * （dl の font-size 15px の半角スペース幅）。Snow Monkey Forms は
 * カラム間に空白ノードが無い（childNodes は要素2つだけ）ので margin-left で作る。
 * ------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.snow-monkey-form[data-screen="confirm"] .smf-item__col--label,
	.snow-monkey-form[data-screen="confirm"] .smf-item__col--controls {
		display: inline-block;
		width: auto;
		font-size: 18px;
		line-height: 1.7;
		text-align: left;
		vertical-align: top;
	}

	.snow-monkey-form[data-screen="confirm"] .smf-item__col--label {
		width: 200px;
	}

	.snow-monkey-form[data-screen="confirm"] .smf-item__col--controls {
		margin-left: 3.75px;
	}

	/* 行の高さを決めるのはラベル・値を直に囲む div。
	 * サイト共通の base.css に `div { line-height: 1 }` があり（実測: WINNER）、
	 * 継承より要素に直接当たるこのルールが勝つため、
	 * カラム側に line-height を置いても届かない（SP 側と同じ理由）。 */
	.snow-monkey-form[data-screen="confirm"] .smf-item__label,
	.snow-monkey-form[data-screen="confirm"] .smf-item__controls,
	.snow-monkey-form[data-screen="confirm"] .smf-placeholder,
	.snow-monkey-form[data-screen="confirm"] .smf-placeholder > * {
		font-size: 18px;
		line-height: 30.6px;
	}

	/* 見出しは本番では .inner-s（margin: 0 125px）の中にあり、
	 * 白カードと同じ 800px 幅で中央に載る（本番 PC1280 実測 x240）。
	 * 上の `.snow-monkey-form .smf-confirm-lead { margin: 0 0 40px }` が
	 * 同詳細度 [0,2,0] で後ろにあるため、幅指定側の margin-left/right: auto を
	 * 打ち消して左に 125px ずれていた。PC だけ中央寄せに戻す。 */
	.snow-monkey-form[data-screen="confirm"] .smf-confirm-lead {
		margin-left: auto;
		margin-right: auto;
	}
}