@charset "UTF-8";
/* ===================================================================
 * Snow Monkey Forms 用スタイル
 *   旧 MW WP Form 27251「新卒採用応募フォーム」の再現
 *   /recruit/fresh/entryform.html
 *
 * 移植元: recruit/common/css/entryform.css（.form-dl 系）
 * 数値・色は 2026-08-20 に旧フォームを実際に描画して computed から採取。
 *
 * 605（smf-contact.css）・584（smf-entry.css）とは**全く別のデザイン**。
 *   ・ラベルと入力欄の2カラム（左260px / 右760px）
 *   ・行ごとに下罫線 1px #e2e2e2
 *   ・必須/任意は塗りつぶしのタグを左端に置く
 *   ・ステップバーは無い
 *
 * 対応表（本番 → Snow Monkey Forms）
 *   .form-dl                 → .smf-item
 *   .form-dl > dt            → .smf-item__col--label
 *   .form-dl > dd            → .smf-item__col--controls
 *   .tag-required            → .smf-require
 *   .tag-not-required        → .smf-optional
 *   .form-help-text          → .smf-item__description
 *   .mwform-radio-field      → .smf-label
 *   .choice-02 .form-box.overlay → [data-locked="true"]
 *   .choice-02 .disabled     → .smf-label[data-disabled="true"]
 * =================================================================== */

/* このフォームは page-fresh-entryform2026.php の
 * .contents_inner > .contact > .contact_inner（幅1050px / padding 0 0 100px）の
 * 中に置かれる。外枠はテンプレート側が持っているので、
 * .snow-monkey-form 自身には幅も余白も持たせない。 */
.snow-monkey-form {
	box-sizing: border-box;
}

/* --- 1行（本番 .form-dl: flex / padding 20px 15px 15px / 下罫線） ----- */
.snow-monkey-form .smf-item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 20px 15px 15px;
	border-bottom: 1px solid #e2e2e2;
}

/* --- メールアドレスの2行は1つのまとまりとして扱う -------------------
 * 本番はこの2行を .form-email-block で包み、
 *   .form-email-block      border-bottom: 1px solid #e2e2e2
 *   .form-dl.form-email       border-bottom: 0 / padding 30px 15px 0
 *   .form-dl.form-check-email border-bottom: 0 / padding 10px 15px 15px
 * としている。つまり**2行の間に罫線は入らず**、2行のあとに1本だけ引かれる。
 *
 * Snow Monkey Forms 側に包む要素が無いので、
 * 1行目の罫線を消して余白を合わせ、2行目の罫線をまとまりの区切りとして使う。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-item:has( [name="メールアドレス"] ) {
	padding: 30px 15px 0;
	border-bottom: 0;
}

.snow-monkey-form .smf-item:has( [name="確認用メールアドレス"] ) {
	padding: 10px 15px 15px;
}

/* --- 左カラム（本番 dt: 260px / padding 11px 16px 11px 4px / 16px） --- */
.snow-monkey-form .smf-item__col--label {
	display: flex;
	align-items: flex-start;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 260px;
	margin: 0;
	padding: 11px 16px 11px 4px;
}

/* 本番の dt は span を2つ並べる作りで、幅の取り方が独特。
 *   .form-dl > dt span           width: calc(2.5em + 10px)  ← em はその要素の font-size
 *   .form-dl > dt span + span    width: calc(100% - (2.5em + 10px))
 *                                line-height: 1.4 / padding-left: 8px
 * バッジ側は font-size 12px なので 2.5em+10px = 40px、
 * テキスト側は font-size 16px なので 50px を引く。差の10pxが間隔になる。
 * どちらも box-sizing: border-box。 */
.snow-monkey-form .smf-item__label {
	display: flex;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	margin: 0;
}

/* 幅は「ラベル欄の直接の子」に当てる。
 * labelFor を設定した項目では <label> が1枚挟まるので、
 * span に直接指定すると 100% の基準が <label>（内容幅）になってしまい
 * 折り返し位置がずれる。`> * + *` で必須タグの次の要素を掴む。 */
.snow-monkey-form .smf-item__label > * + *,
.snow-monkey-form .smf-item__label > label > .smf-item__label__text {
	display: flex;
	box-sizing: border-box;
	width: calc(100% - 50px);
}

/* labelFor を設定した項目では <label> が1枚挟まる。
 * そのままだと calc(100% - 50px) → 100% と2段階で解決され、
 * 端数の丸めで本番と折返し位置が1文字ずれることがある。
 * display: contents でレイアウト上の階層を消し、
 * span を直接フレックスアイテムにして本番と同じ解決にする。 */
.snow-monkey-form .smf-item__label > label {
	display: contents;
}

.snow-monkey-form .smf-item__label__text {
	display: flex;
	box-sizing: border-box;
	padding-left: 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #333;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ★ 27251「希望職種について（第一希望）」だけ折返し位置が違う件
 *
 * 本番のフォーム定義の該当箇所が綴じ忘れになっている。
 *   <dt><span class="tag-required">必須</span><span>希望職種について（第一希望）<span></dt>
 * ブラウザ補完で末尾に空の span がもう1つ生まれるが、
 * `.form-dl > dt span { width: calc(2.5em + 10px); display:flex; box-sizing:border-box }`
 * が**この入れ子の span にも当たる**ため、空なのに幅を持つフレックスアイテムになる。
 * 実測すると 36px を占めていて、その分テキスト側が狭くなり早く折り返している。
 *
 * 同じ状況を作るため、空のフレックスアイテムを ::after で足す。
 * 綴じ忘れがあるのは 27251 のこのラベルだけなので対象を絞る
 * （27556 の同名ラベルは正しく閉じられている＝年度の項目の有無で判別）。
 */
.snow-monkey-form:has( [name="年度"] ) .smf-item:has( [name="第一希望"] ) .smf-item__label__text::after {
	content: "";
	flex: 0 1 auto;
	box-sizing: border-box;
	width: 50px;
}

/* 必須／任意タグが無い項目（ラベルだけ）は全幅 */
.snow-monkey-form .smf-item__label > :first-child {
	width: 100%;
}

.snow-monkey-form .smf-item__label > .smf-require,
.snow-monkey-form .smf-item__label > .smf-optional {
	width: 40px;
}

/* --- 右カラム（本番 dd: 760px / padding 0 5px / font-size 16px） -----
 * 本番は `.form-dl dt, .form-dl dd { font-size: 16px }` で
 * 左右どちらのカラムにも 16px を指定している。
 * 指定しないとページ既定の 15px を継承し、
 * ラジオのラベルの行の高さなどが 1px ずれる。 */
.snow-monkey-form .smf-item__col--controls,
.snow-monkey-form .smf-item__col--label {
	font-size: 16px;
}

.snow-monkey-form .smf-item__col--controls {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 760px;
	margin: 0;
	padding: 0 5px;
}

/* --- 必須／任意タグ --------------------------------------------------
 * 本番 .tag-required / .tag-not-required
 *   block / 40x16 / padding 2px 5px / 12px / 中央 / 白文字
 *   必須 背景 #ce052c / 任意 背景 rgba(119,119,119,.8)
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-require,
.snow-monkey-form .smf-optional {
	display: block;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 40px;
	height: auto;
	margin: 0;
	padding: 2px 5px;
	border: none;
	border-radius: 0;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
	line-height: normal;
	text-align: center;
	vertical-align: middle;
}

.snow-monkey-form .smf-require {
	background-color: #ce052c;
}

.snow-monkey-form .smf-optional {
	background-color: rgba(119, 119, 119, .8);
}

/* --- セレクト ---------------------------------------------------------
 * ★ 本番（entryform.css:45-52）が select に指定しているのは**この3つだけ**。
 *
 *     .form-dl .form-year select,
 *     .form-dl .form-location select {
 *         font-size: 16px;
 *         padding: 8px 40px 8px 12px;
 *         appearance: none;
 *     }
 *
 *   幅・高さ・枠線・背景色は**一切指定していない**。
 *   計測して見えていた 185x35 / #efefef / 枠 1px #767676 は
 *   すべて**ブラウザ標準（UA既定）**の値で、CSSの指定ではない。
 *   これを数値で書き写すと Chrome では一致しても
 *   Firefox / Safari では本番と違う見た目になるので固定しないこと。
 *
 *   ただし Snow Monkey Forms のプラグイン側が
 *   （dist/blocks/select/style-index.css）
 *     background-color: var(--_color-white) / border / border-radius / padding
 *   を当ててくるので、宣言を書かないだけでは標準に戻らない。
 *   `revert` で作者スタイルごと巻き戻して UA 既定に戻す。
 *
 * 矢印は本番が入れ物の ::after に「▼」を置く実装
 * （.form-dl .form-year::after、left:160px / 12px / #333）。
 * 入れ物は本番の .form-year と同じく**幅いっぱいのブロック**にして、
 * select 自身は内容なりの幅（＝指定なし）にする。
 * プラグインが描く矢印（.smf-select-control__toggle）は消す。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-select-control {
	display: block;
	position: relative;
	width: 100%;
}

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

.snow-monkey-form .smf-select-control::after {
	content: "▼";
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 160px;
	transform: translateY(-50%);
	font-size: 12px;
	color: #333;
}

.snow-monkey-form .smf-select-control__control {
	/* 本番が明示している3つ */
	padding: 8px 40px 8px 12px;
	font-size: 16px;
	appearance: none;
	-webkit-appearance: none;

	/* 本番は指定していない＝プラグインの指定を打ち消してブラウザ標準へ戻す */
	width: revert;
	max-width: revert;
	height: revert;
	border: revert;
	border-radius: revert;
	background-color: revert;
	color: revert;
	box-shadow: revert;
	box-sizing: revert;
	cursor: pointer;

	/* ★ position / z-index も戻すこと（▼が消える原因）。
	 * プラグインは .smf-form .smf-select-control__control に
	 *   position: relative; z-index: 1
	 * を当てる（dist/blocks/select/style-index.css）。
	 * すると select が「z-index:1 の重なり文脈」に上がり、
	 * 入れ物の ::after（▼／z-index:auto）より手前に描画される。
	 * select の背景は appearance:none ＋ 不透明な #efefef なので
	 * ▼が背面に隠れて完全に見えなくなっていた。
	 * 本番の select は position:static（無指定）なので revert で戻す。 */
	position: revert;
	z-index: revert;
}

/* --- テキスト・メール（本番: 750x38 / padding 8px 12px / #f5f5f5） ---- */
.snow-monkey-form .smf-text-control,
.snow-monkey-form .smf-textarea-control {
	display: block;
	width: 100%;
}

/* 本番 .form-dl input[type=email], input[type=text] は display: block */
.snow-monkey-form .smf-text-control__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 38px;
	padding: 8px 12px;
	border: 1px solid #bebebe;
	border-radius: 0;
	background-color: #f5f5f5;
	font-size: 16px;
	line-height: 32px;
	text-indent: 5px;
}

/* 本番 .form-dl textarea は line-height 24px */
.snow-monkey-form .smf-textarea-control__control {
	line-height: 24px;
}

.snow-monkey-form .smf-textarea-control__control {
	box-sizing: border-box;
	width: 100%;
	height: 90px;
	padding: 8px 12px;
	border: 1px solid #bebebe;
	border-radius: 0;
	background-color: #f5f5f5;
	font-size: 16px;
	resize: vertical;
}

/* --- 氏名の行（1つの item に入力欄が2つ） ---------------------------
 * 本番は <span class="name">姓</span> のような小さいラベルを手で書いていた。
 * Snow Monkey Forms の item にはそれを入れる場所が無いので ::before で出す。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-item__controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.snow-monkey-form .smf-item__controls > .smf-placeholder {
	flex: 1 1 auto;
	min-width: 0;
}

/* 姓/名・セイ/メイ の行だけ横並びにして、入力欄を小さくする */
.snow-monkey-form .smf-placeholder:has( .smf-fresh-name ) {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* 本番の氏名欄の構造と実測値
 *   <span class="name">姓</span>              マージンなし（16px）
 *   <span class="form-box">                   inline-block / 131px / padding-right 5px
 *     <input>                                 108px / margin 0 10px 0 8px
 * 131 = 8(左マージン) + 108(input) + 10(右マージン) + 5(padding-right)
 * 「姓」「名」のラベルには余白を付けず、input のマージンだけで間隔を作る。 */
.snow-monkey-form .smf-placeholder:has( .smf-fresh-name ) .smf-text-control {
	box-sizing: border-box;
	width: 131px;
	padding-right: 5px;
}

/* 氏名の欄だけ本番は inline-block（.form-dl.form-name input[type="text"]） */
.snow-monkey-form .smf-placeholder:has( .smf-fresh-name ) .smf-text-control__control {
	display: inline-block;
	width: 108px;
	margin: 0 10px 0 8px;
}

.snow-monkey-form .smf-placeholder:has( [name="姓"] )::before {
	content: "姓";
	font-size: 16px;
	color: #333;
}

.snow-monkey-form .smf-placeholder:has( [name="名"] )::before {
	content: "名";
	font-size: 16px;
	color: #333;
}

.snow-monkey-form .smf-placeholder:has( [name="姓フリガナ"] )::before {
	content: "セイ";
	font-size: 16px;
	color: #333;
}

.snow-monkey-form .smf-placeholder:has( [name="名フリガナ"] )::before {
	content: "メイ";
	font-size: 16px;
	color: #333;
}

/* --- ラジオ・チェックボックス --------------------------------------
 * ★ 本番は **input を display:none にして疑似要素で自作**している
 *   （entryform.css 159-225）。ネイティブのまま出すと見た目が全く違う。
 *
 *   .form-dl label                    padding 4px / hover 背景 rgba(0,0,0,.1)
 *   .mwform-radio-field               inline-block / margin 8px 16px 4px 0
 *   .mwform-*-field-text              position relative / line-height 1.4 / padding-left 20px
 *   input                             display: none
 *   text::before                      14x14 / 枠 1px #ddd / 背景 #fff / top 2px / left 0
 *                                     ラジオは border-radius 50%
 *   :checked + text::after  ラジオ    8x8 の丸 #329bd2 / top 6px / left 4px
 *                           チェック  5x9 の L字 #329bd2 / top 3px / left 5px / rotate(40deg)
 *   :checked + text                   文字色 #329bd2
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-radio-buttons-control__control,
.snow-monkey-form .smf-checkboxes-control__control {
	display: block;
	margin: 0;
	padding: 0;
}

/* ラジオ（.mwform-radio-field）は縦マージンあり */
/* JS（27251_job_filter.php）が年度×拠点で付ける hidden 属性を確実に効かせる。
 * [hidden] の UA スタイル（display:none）は詳細度 0,1,0 しかなく、
 * 直下の .smf-label { display:inline-block } や SP の
 * .smf-item:has([name="第一希望"]) … .smf-label { display:block }（0,5,0）に負けて
 * 絞り込みが無効化されていた（2026-08-28 修正）。
 * 表示可否のガードなので !important で確定させる。 */
.snow-monkey-form .smf-label[hidden] {
	display: none !important;
}

.snow-monkey-form .smf-radio-buttons-control .smf-label {
	display: inline-block;
	margin: 8px 16px 4px 0;
	padding: 0;
}

/* ★ 選択肢どうしの「半角スペース1個分」を復元する。
 *
 * 本番の生 HTML は選択肢の間に改行＋タブが入っている:
 *     </span>\n\t<span class="mwform-radio-field horizontal-item">
 * inline-block 同士の間の空白テキストノードは半角スペース1個として描かれるので、
 * 本番の選択肢間ギャップは「margin-right 16px ＋ スペース 1 個分」になる。
 * 一方 Snow Monkey Forms の出力は要素間に空白がない:
 *     </div><div class="smf-label">
 * ＝ スペース 1 個分だけ詰まり、2つ目以降が 1 要素ごとに累積してズレる
 *   （PC 1280 実測: 2つ目 −4.32px / 3つ目 −8.65px / 4つ目 −12.99px）。
 *
 * ただし .smf-label の「中身」には空白がある:
 *     <div class="smf-label">\n\t<label>…</label>\n\t</div>
 * これは通常「行頭・行末の折りたたみ可能な空白」として除去されるだけで、
 * 空の inline-block を ::after に置くと行末ではなくなり、
 * label 前後の空白列がまとめて半角スペース 1 個として復活する。
 * ＝ 実際のフォント・フォントサイズで描かれる本物のスペースなので、
 *    4.32px のような computed 値の焼き込みが不要（フォントが変われば自動追従）。
 *
 * content: "" のみ（display: inline）では空白は復活しない（実測で確認済み）。
 * 逆に content: " " + white-space: pre だと、復活した空白と合わせて
 * スペース 2 個分（+8.65px）になり本番より広がるので使わない。
 * また .smf-radio-button-control__label::after は :checked の青丸が
 * すでに使っているため、そちらには置けない。 */
.snow-monkey-form .smf-radio-buttons-control .smf-label::after {
	content: "";
	display: inline-block;
}

/* チェックボックス（.mwform-checkbox-field.horizontal-item）は縦マージン 0。
 * ラジオと同じ 8px/4px を付けると SP（dt/dd 縦積み）で同意行が 12px 高くなる。 */
.snow-monkey-form .smf-checkboxes-control .smf-label {
	display: inline-block;
	margin: 0 16px 0 0;
	padding: 0;
}

.snow-monkey-form .smf-radio-buttons-control label,
.snow-monkey-form .smf-checkboxes-control label {
	display: inline;
	padding: 4px;
	cursor: pointer;
}

.snow-monkey-form .smf-radio-buttons-control label:hover,
.snow-monkey-form .smf-checkboxes-control label:hover {
	background-color: rgba(0, 0, 0, .1);
}

.snow-monkey-form .smf-radio-button-control,
.snow-monkey-form .smf-checkbox-control {
	display: inline;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
}

/* SMF は選択肢を <span class="smf-radio-button-control"> で 1 枚多く包む:
 *     <label><span class="smf-radio-button-control">
 *       <input>\n\t<span class="…__label">テキスト</span>
 *     </span></label>
 * display:none の input と __label の間の改行が半角スペース 1 個として
 * ラッパー右端に描かれ、選択肢 1 個あたり一律 4.33px 太くなる
 * （本番 .mwform-radio-field はラッパーが無く、同じ空白は行頭・行末として除去される）。
 *
 * 320px で「エントリーの決め手」の TOP MESSAGE が 5 段目に落ちる原因。
 * ラッパーを font-size:0 にして空白を潰す（テキストは __label の 16px で復帰）。
 *
 * @media の外に置くのは、PC 1280 にも同じ 4.33px の差が出ているため
 * （現状は段数・行高が本番と同じで見た目には出ていないが、
 *   選択肢の文言が増えたときに折り返しがズレる芽になる）。
 * 選択肢の「間」の空白を復活させる .smf-label::after は .smf-label から
 * font-size を継承するので、この指定の影響を受けない。 */
.snow-monkey-form .smf-radio-button-control {
	font-size: 0;
}

/* 本体の input は隠して、テキスト側の疑似要素で描く。
 * 隠れていて見えないが、プラグインが当てる独自装飾も戻しておく
 * （本番の input はブラウザ標準のまま display:none になっているだけ）。 */
.snow-monkey-form .smf-radio-button-control__control,
.snow-monkey-form .smf-checkbox-control__control {
	display: none;
	appearance: revert;
	-webkit-appearance: revert;
	width: revert;
	height: revert;
	margin: revert;
	border: revert;
	border-radius: revert;
	background-color: revert;
	box-shadow: revert;
}

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

.snow-monkey-form .smf-radio-button-control__label,
.snow-monkey-form .smf-checkbox-control__label {
	display: inline;
	position: relative;
	padding: 0 0 0 20px;
	font-size: 16px;
	line-height: 1.4;
	color: #333;
}

/* ★ box-sizing: content-box は必須。
 * 本番（base.css）のリセットは要素名を列挙しているだけで
 * `*` も `::before/::after` も対象外 → 疑似要素は UA 既定の content-box。
 * つまり本番の枠は「14px + 枠1px×2 = 16px」で描かれている。
 * 一方 Snow Monkey Forms は fallback.css で
 *   `*{ box-sizing: border-box }` / `:after,:before{ box-sizing: inherit }`
 * を当てるため、宣言しないと疑似要素まで border-box になり
 * 枠が 14px（内側 12px）に縮む＝本番より 2px 小さい丸になる。
 * さらに :checked の青丸は 8px 固定なので、枠だけ縮むと
 * 丸が中心からズレて（top/left は 16px 枠前提の 6px/4px）差が目立つ。 */
.snow-monkey-form .smf-radio-button-control__label::before,
.snow-monkey-form .smf-checkbox-control__label::before {
	content: "";
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	box-sizing: content-box;
	width: 14px;
	height: 14px;
	border: 1px solid #ddd;
	background-color: #fff;
}

.snow-monkey-form .smf-radio-button-control__label::before {
	border-radius: 50%;
}

.snow-monkey-form .smf-radio-button-control__control:checked + .smf-radio-button-control__label::after,
.snow-monkey-form .smf-checkbox-control__control:checked + .smf-checkbox-control__label::after {
	content: "";
	display: block;
	position: absolute;
	/* ::before と同じ理由。ラジオの青丸（枠なし）は影響しないが、
	 * チェックのレ点は border 2px を持つので border-box だと 5x9 に潰れる。
	 * 本番は content-box ＝ 外形 7x11。 */
	box-sizing: content-box;
}

.snow-monkey-form .smf-radio-button-control__control:checked + .smf-radio-button-control__label::after {
	top: 6px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #329bd2;
}

.snow-monkey-form .smf-checkbox-control__control:checked + .smf-checkbox-control__label::after {
	top: 3px;
	left: 5px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #329bd2;
	border-bottom: 2px solid #329bd2;
	transform: rotate(40deg);
}

.snow-monkey-form .smf-radio-button-control__control:checked + .smf-radio-button-control__label,
.snow-monkey-form .smf-checkbox-control__control:checked + .smf-checkbox-control__label {
	color: #329bd2;
}

/* --- 第二希望の制御 --------------------------------------------------
 * 本番 .form-dl.choice-02 .form-box.overlay … 第一希望を選ぶまで触れない
 *      .form-dl.choice-02 .disabled        … 第一希望と同じ値は選べない
 * どちらも pointer-events: none ＋ 文字色 #ccc。
 * 27251_job_filter.php が data-locked / data-disabled を付ける。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-item[data-locked="true"] .smf-radio-buttons-control {
	pointer-events: none;
}

.snow-monkey-form .smf-item[data-locked="true"] .smf-radio-button-control__label,
.snow-monkey-form .smf-label[data-disabled="true"] .smf-radio-button-control__label {
	color: #ccc;
}

.snow-monkey-form .smf-label[data-disabled="true"] {
	pointer-events: none;
}

/* --- 補足テキスト（本番 .form-help-text: 90% / #666 / margin-top 5px） */
.snow-monkey-form .smf-item__description,
.snow-monkey-form .smf-control-description {
	margin: 5px 0 0;
	padding: 0;
	font-size: 90%;
	/* 本番の .form-help-text は <p> で、行の高さはページ既定（body）を継承する。
	 * 実測: PC1280 24.48px（14.4 × 1.7）/ SP390・320 21.6px（14.4 × 1.5）。
	 * SMF 本体は .smf-control-description に line-height: var(--_line-height)（1.6）を
	 * 当てるので、明示しないとどちらの幅でもズレる。SP 値は 767px 以下で上書きする。 */
	line-height: 1.7;
	text-align: left;
	color: #666;
}

.snow-monkey-form .smf-item__description a,
.snow-monkey-form .smf-control-description a {
	padding: 0 2px;
	padding: 0 2px;
	color: #329bd2;
	text-decoration: underline;
}

/* --- エラー --------------------------------------------------------- */
.snow-monkey-form .smf-item:has( .smf-error-messages ) {
	position: relative;
}

.snow-monkey-form .smf-error-messages {
	margin-top: 5px;
	color: #ce052c;
	font-size: 90%;
}

/* --- 操作ボタン（本番 .btn-form: padding 40px 0 0 / 中央） ------------
 * input[type=submit]: 240x58 / #329bd2 / 18px / 700 / 角丸4px
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-action {
	display: flex;
	justify-content: center;

	/* 本番の間隔は li（inline-block・margin-left なし）の間の空白 4.06px のみ。
	 * ボタン自身が margin-right:5px を持つので実測のボタン間は 4.06+5 = 9.06px。
	 * 実測: 本番 確認画面 PC1280 のボタン間 9.06px / ボタン左端 392.97px。 */
	gap: 4.06px;
	padding: 40px 0 0;
	text-align: center;
}

/* SMF 既定（app.css）の
 *   .smf-action .smf-button-control + .smf-button-control { margin-left: var(--_margin-1) }
 * が 17.07px 足されて本番より広くなる（実測 32.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"] {
	box-sizing: border-box;
	width: 240px;
	height: 58px;
	margin: 0 5px 0 0;
	padding: 16px 48px;
	appearance: none;
	-webkit-appearance: none;
	background: #329bd2;
	border: 1px solid #329bd2;
	border-radius: 4px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	/* 本番 input[type=submit] は UA 既定の white-space:pre で折り返さない */
	white-space: nowrap;
	cursor: pointer;
}

.snow-monkey-form .smf-action button:hover {
	opacity: .7;
}

.snow-monkey-form .smf-action button[data-action="back"] {
	background: #fff;
	color: #329bd2;
}

/* --- 確認画面 --------------------------------------------------------
 * ★ 必須／任意タグは確認画面でも出す。
 * 本番の確認画面（entryform-confirm.html / joint-briefing-form-conf.html）は
 * dt の `.tag-required` / `.tag-not-required` をそのまま表示している。
 * 実測（本番 SP 390px）:
 *   必須タグ  x=19 / 40x16 / 背景 #ce052c
 *   ラベル文字 x=59（タグ 40px + ラベルの padding-left 8px）
 * ここで display:none にしていたためラベルが 40px 左に寄っていた。
 * ------------------------------------------------------------------- */

.snow-monkey-form[data-screen="confirm"] .smf-placeholder {
	font-size: 16px;
	color: #333;
}

/* 「姓」「名」「セイ」「メイ」の小ラベルは確認画面では出さない。
 * 本番も `<span class="name">姓</span>` を display:none にしている。 */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder::before {
	content: none;
}

/* 氏名／フリガナの値は隣に詰めて並べる。
 * 本番 .form-dl.form-name dd の `.form-box` は
 *   inline-block / 幅は内容なり / padding-right 5px
 * 実測（本番 SP 390px）: 沖縄 x=20 w=37 → 太郎 x=57 w=37。
 * SMF は確認画面で入力欄を .smf-placeholder に置き換えるため
 * `:has( .smf-fresh-name )` が外れ、`.smf-item__controls > .smf-placeholder`
 * の `flex: 1 1 auto`（＝半分ずつの幅）だけが残って値の間が大きく空いていた。 */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="姓"],
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="名"],
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="姓フリガナ"],
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="名フリガナ"] {
	flex: 0 0 auto;
	width: auto;
	padding-right: 5px;
}

/* --- 確認画面の上に出す注記 ------------------------------------------
 * 27251_confirm_descriptions.php が `.smf-form` の直前に差し込む <p>。
 * 本番は確認ページ本文に直書きされていた段落で、フォントはページ既定
 * （body: PC 15px/1.7・SP 14px/1.5）をそのまま継承している。
 * 実測（本番）: 27251 PC1280 h=51 / SP390 h=63（先頭の <br> 1行を含む）
 *               27556 PC1280 h=55.5 / SP390 h=62
 * 入力画面では出さない（本番も確認ページだけに置かれている）。
 * ------------------------------------------------------------------- */
.snow-monkey-form .smf-confirm-note {
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 15px;
	line-height: 1.7;
	text-align: left;
}

.snow-monkey-form:not( [data-screen="confirm"] ) .smf-confirm-note {
	display: none;
}

/* 27556 の注記だけ本番は太字・中央・padding 付き（27251 は標準・左寄せ・padding 0 で
 * 先頭に <br>）。実測: font-weight 700 / text-align center /
 * padding PC1280 30px 30px 0・SP390/320 20px 15px 0 */
.snow-monkey-form:has( [name="snow-monkey-forms-meta[formid]"][value="37709"] ) .smf-confirm-note {
	padding: 30px 30px 0;
	font-weight: 700;
	text-align: center;
}

/* --- 27556 合同説明会だけ：確認画面で出さない行 ----------------------
 * 本番の確認画面（joint-briefing-form-conf.html）が display:none にしている
 * 「見える要素」は次の3つだけ（2026-08-28 に全要素を列挙して確認）。
 *   1. dl.form-dl.form-check-email    … メールアドレス（確認）の行
 *   2. dl.form-dl.form-agree          … 個人情報の取扱いの行
 *   3. p.form-help-text「例）LINE,メール,SMS」… 連絡ツール行の補足
 * 3 は 27251_confirm_descriptions.php 側で 27556 を対象外にしてあるので
 * そもそも出ない。ここでは 1 と 2 を隠す。
 * ★ 27251 は本番も何も隠していないので、フォームIDでスコープすること。
 * ------------------------------------------------------------------- */
.snow-monkey-form[data-screen="confirm"]:has( [name="snow-monkey-forms-meta[formid]"][value="37709"] ) .smf-item:has( [name="確認用メールアドレス"] ),
.snow-monkey-form[data-screen="confirm"]:has( [name="snow-monkey-forms-meta[formid]"][value="37709"] ) .smf-item:has( [name="agree[]"] ) {
	display: none;
}

/* メールの行は本番だと .form-email-block（下罫線持ち）に包まれた2行のうちの
 * 1行目で、下の余白と罫線は「確認」の行が持っている。27556 はその「確認」を
 * 隠すので、余白と罫線を1行目へ戻す。
 * 実測: 本番 27556 確認画面 .form-email-block の高さ SP390 128.78 / PC1280 112.78
 *       （.form-dl.form-email padding 30px 15px 15px + 罫線 1px） */
.snow-monkey-form[data-screen="confirm"]:has( [name="snow-monkey-forms-meta[formid]"][value="37709"] ) .smf-item:has( [name="メールアドレス"] ) {
	padding-bottom: 15px;
	border-bottom: 1px solid #e2e2e2;
}

/* --- スマートフォン（本番 entryform.css の 767px / 520px） ------------ */
@media screen and (max-width: 767px) {
	.snow-monkey-form .smf-form,
	.snow-monkey-form > .smf-action {
		width: 100%;
	}

	.snow-monkey-form .smf-item {
		display: block;
		/* 本番 entryform.css SP の .form-dl と同値。
		 * 15px 10px だと内容幅が 355px になり、本番の 345px より 10px 広くなる。 */
		padding: 20px 15px 15px;
	}

	/* 本番 entryform.css SP: .form-dl dt, .form-dl > dd { width: 100% }
	 * controls 側の padding: 0 5px は PC のまま残す（内容幅 345 − 10 = 335px）。
	 * dt に margin-bottom は付かない（付けると全行が 8px 高くなる）。 */
	.snow-monkey-form .smf-item__col--label,
	.snow-monkey-form .smf-item__col--controls {
		width: 100%;
	}

	/* 確認画面の注記。本番はページ既定（body 14px / line-height 21px）を継承する。 */
	.snow-monkey-form .smf-confirm-note {
		font-size: 14px;
		line-height: 1.5;
		padding-inline: 15px;
	}

	/* 補足テキストの行の高さも本番はページ既定を継承する（実測 21.6px = 14.4 × 1.5）。 */
	.snow-monkey-form .smf-item__description,
	.snow-monkey-form .smf-control-description {
		line-height: 1.5;
	}

	/* 27556 の注記だけ本番 SP は padding 20px 15px 0 */
	.snow-monkey-form:has( [name="snow-monkey-forms-meta[formid]"][value="37709"] ) .smf-confirm-note {
		padding: 20px 15px 0;
	}

	/* 本番 entryform.css SP:
	 *   .form-dl.form-job-type > dd .mwform-radio-field { display: block }
	 * 希望職種（第一/第二）だけ選択肢を1行ずつ縦積みにする。
	 * 27251 の「エントリーの決め手」は .form-content なので横並びのまま。 */
	.snow-monkey-form .smf-item:has( [name="第一希望"] ) .smf-radio-buttons-control .smf-label,
	.snow-monkey-form .smf-item:has( [name="第二希望"] ) .smf-radio-buttons-control .smf-label {
		display: block;
	}

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

		/* 本番SP確認画面のボタン間は実測 20px（1つ目の li の margin-bottom:20px）。
		 * PC 用の gap（4.06px）が SP に降りてこないよう明示する。 */
		gap: 20px;
	}

	/* 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 {
		/* 本番 SP 実測 240px（min-width:240px）。SMF はボタンの親が
		 * span.smf-button-control（shrink-to-fit）なので % 指定では潰れる。 */
		width: 240px;
		max-width: 100%;
		margin: 0;
	}
}