@charset "utf-8";

/* ==========================================================
   キャリア採用 応募フォーム (Snow Monkey Forms) デザイン
   - キャリア採用ページ (#career-entry 内) と 応募フォーム単体ページ (career/apply) 共通
   - SMF の BEM クラス (.smf-*) に対してスタイルを当てる
   - 姓/名・セイ/メイ・生年月日 は SMF側でカラムブロック (.wp-block-columns) 使用
   ========================================================== */

/* ----------------------------------------------------------
   フォーム全体
   ---------------------------------------------------------- */
.snow-monkey-form {
	max-width: 1100px;              /* Figma フォーム幅 */
	margin-inline: auto;
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.6;
}

/* SMF 標準の項目間余白をリセットして自前で管理 */
.snow-monkey-form .smf-item {
	margin: 0;
}

/* 各項目 (ラベル + 入力) は縦積み。項目間 44px */
.snow-monkey-form .smf-item + .smf-item,
.snow-monkey-form .smf-item + .wp-block-paragraph,
.snow-monkey-form .wp-block-columns + .wp-block-paragraph,
.snow-monkey-form .smf-item + .wp-block-columns,
.snow-monkey-form .wp-block-columns + .smf-item {
	margin-top: 44px;               /* Figma実測 (項目間) */
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-item + .smf-item,
	.snow-monkey-form .smf-item + .wp-block-paragraph,
	.snow-monkey-form .wp-block-columns + .wp-block-paragraph,
	.snow-monkey-form .smf-item + .wp-block-columns,
	.snow-monkey-form .wp-block-columns + .smf-item {
		margin-top: 28px;
	}
}

/* SMF 標準の 2カラム (label|controls) を縦積みに */
.snow-monkey-form .smf-item__col--label,
.snow-monkey-form .smf-item__col--controls {
	flex: none;
	width: 100%;
	max-width: none;
	padding: 0;
}
.snow-monkey-form .smf-item {
	display: block;
}

/* ----------------------------------------------------------
   ラベル
   ---------------------------------------------------------- */
.snow-monkey-form .smf-item__label {
	margin: 0 0 12px;               /* ラベル→入力欄 (Figma実測) */
	color: var(--color-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-item__label {
		margin-bottom: 8px;
		font-size: 14px;
	}
}
/* SMF は必須マーク等を label に付ける場合があるが、今回はテキストのみ */
.snow-monkey-form .smf-item__label__text {
	color: inherit;
	font-weight: 700;
}

/* グループ見出しとして使っている段落 (お名前 / お名前（フリガナ） / 個人情報の取り扱いについて) */
.snow-monkey-form .wp-block-paragraph {
	margin: 0 0 16px;
	color: var(--color-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}
@media (max-width: 767px) {
	.snow-monkey-form .wp-block-paragraph {
		margin-bottom: 8px;
		font-size: 14px;
	}
}

/* 補足説明 (SMF の description: ※ハイフンなしで入力ください 等) */
.snow-monkey-form .smf-control-description {
	margin-top: 8px;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-control-description {
		font-size: 12px;
	}
}

/* ----------------------------------------------------------
   横並びグループ (SMF側のカラムブロック)
   姓/名・セイ/メイ: 「姓」「名」ラベルは入力欄の左に添える横並び
   ---------------------------------------------------------- */
.snow-monkey-form .wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
	gap: 40px;                      /* Figma実測: 姓と名の列間 */
	margin: 0;
}
/* カラムは内容幅 (ラベル30 + gap14 + 入力欄286) で左詰め。
   WPコアが .wp-block-column { flex-grow: 1 } と flex-basis: 0 をインラインで後読みするため
   !important で上書き (flex:1 だとカラムがコンテナ幅の半分に広がり姓と名が離れる) */
.snow-monkey-form .wp-block-column {
	flex: 0 0 auto !important;
	flex-basis: auto !important;
	min-width: 0;
}

/* カラム内の smf-item: ラベル(姓/名/セイ/メイ) と 入力欄を横並びに
   ラベル 30px 固定 + 入力欄 286px 固定 → 「姓」と「セイ」の入力欄左端が縦に揃う */
.snow-monkey-form .wp-block-column .smf-item {
	display: flex;
	align-items: center;
	gap: 14px;
}
.snow-monkey-form .wp-block-column .smf-item__col--label {
	flex: 0 0 30px;
	width: 30px;
}
.snow-monkey-form .wp-block-column .smf-item__col--controls {
	flex: 0 0 286px;
	width: 286px;
}
.snow-monkey-form .wp-block-column .smf-item__label {
	margin: 0;
	color: #535353;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.snow-monkey-form .wp-block-column .smf-text-control__control {
	width: 286px;
}
/* 768〜781px: WPコアの
     .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important }
   が効いてカラムが全幅 (＝縦積み) になる帯。SP 用の指定 (767px 以下) も届かないため、
   ここだけ横並びに戻す (生年月日の「年/月/日」が入力欄から外れて右端に飛ぶ問題への対応) */
@media (min-width: 768px) and (max-width: 781px) {
	.snow-monkey-form .wp-block-columns {
		flex-wrap: nowrap !important;
		gap: 20px;
	}
	/* 姓/名・セイ/メイ: PC の 286px 固定では収まらないため残り幅を分け合う */
	.snow-monkey-form .wp-block-columns > .wp-block-column {
		flex: 1 1 0 !important;
		flex-basis: 0 !important;
		min-width: 0;
	}
	.snow-monkey-form .wp-block-column .smf-item__col--controls {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
	.snow-monkey-form .wp-block-column .smf-text-control__control {
		width: 100%;
	}
	/* 生年月日は PC と同じ 140/120/120 の固定幅のまま1行に収める */
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-columns > .wp-block-column:nth-child(1) { flex: 0 0 140px !important; }
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-columns > .wp-block-column:nth-child(2) { flex: 0 0 120px !important; }
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-columns > .wp-block-column:nth-child(3) { flex: 0 0 120px !important; }
}

@media (max-width: 767px) {
	/* WPコアは 781px 以下で .wp-block-columns を flex-wrap: wrap にする (カラムが縦積みになる)
	   姓/名・セイ/メイ は SP でも横並び維持のため wrap を解除し、カラム幅を 1/2 に固定 */
	.snow-monkey-form .wp-block-columns {
		flex-wrap: nowrap !important;
		gap: 12px;
	}
	.snow-monkey-form .wp-block-column {
		flex: 1 1 0 !important;
		flex-basis: 0 !important;
	}
	.snow-monkey-form .wp-block-column .smf-item {
		gap: 8px;
	}
	/* SP: 286px 固定は収まらないため、ラベル 30px 固定 + 入力欄は残り幅 */
	.snow-monkey-form .wp-block-column .smf-item__col--controls {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
	.snow-monkey-form .wp-block-column .smf-text-control__control {
		width: 100%;
	}
}

/* ----------------------------------------------------------
   入力欄 (text / email / tel / select)
   Figma: 角丸 4px / 枠線 1px #C9C9C9 / 高さ 48px / 内側余白 12px 16px
   ---------------------------------------------------------- */
.snow-monkey-form .smf-text-control__control,
.snow-monkey-form .smf-textarea-control__control,
.snow-monkey-form .smf-select-control__control {
	display: block;
	width: 100%;
	height: 48px;
	padding: 12px 16px;
	border: 1px solid #CACACA;
	border-radius: 10px;
	background: var(--color-white);
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color 0.2s;
}
.snow-monkey-form .smf-textarea-control__control {
	height: auto;
	min-height: 160px;
}
.snow-monkey-form .smf-text-control__control::placeholder,
.snow-monkey-form .smf-textarea-control__control::placeholder {
	color: #9E9E9E;
}
.snow-monkey-form .smf-text-control__control:focus,
.snow-monkey-form .smf-textarea-control__control:focus,
.snow-monkey-form .smf-select-control__control:focus {
	outline: none;
	border-color: var(--color-primary);
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-text-control__control,
	.snow-monkey-form .smf-textarea-control__control,
	.snow-monkey-form .smf-select-control__control {
		height: 46px;                 /* タップ領域 44px 以上を確保 */
		padding: 10px 14px;
		font-size: 16px;              /* iOS の自動ズーム回避のため 16px 維持 */
	}
}

/* --- select ---
   SMF 標準: .smf-select-control が inline-block (内容幅) + .smf-select-control__toggle が
   左寄せ配置で ::before に独自矢印を描く。→ ラッパーを block/100% にし、
   ::before は非表示、toggle 自体を右端 16px 内側に固定して紺の ∨ を描く */
.snow-monkey-form .smf-select-control {
	position: relative;
	display: block;                 /* inline-block → block (幅いっぱい) */
	width: 100%;
}
.snow-monkey-form .smf-select-control__control {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding-right: 44px;
	cursor: pointer;
}
/* SMF 標準の矢印 (::before) を非表示 */
.snow-monkey-form .smf-select-control__toggle::before,
.smf-form .smf-select-control__toggle::before {
	display: none;
	content: none;
}
/* toggle 自体を右端・上下中央の枠内に配置し、∨ を描く */
.snow-monkey-form .smf-select-control__toggle {
	position: absolute;
	inset: auto 16px auto auto;    /* right: 16px。SMF 標準の left/top 指定を打ち消す */
	top: 50%;
	left: auto;
	width: 10px;
	height: 10px;
	padding: 0;
	margin: 0;
	border: 0;
	border-right: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	background: none;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
	box-sizing: border-box;
}

/* --- 希望エリア: グレー背景の入力欄 (Figma) --- */
.snow-monkey-form .smf-placeholder[data-name="work_location"] .smf-select-control__control,
.snow-monkey-form .smf-placeholder[data-name="work_location"] .smf-text-control__control {
	background: #EFEFEF;
	border-color: #999;
}
/* ラッパー側で幅を絞る (toggle の位置基準もこの幅になる) */
.snow-monkey-form .smf-placeholder[data-name="work_location"] .smf-select-control,
.snow-monkey-form .smf-placeholder[data-name="work_location"] .smf-text-control {
	max-width: 715px;               /* Figma: 幅は他より短い */
}

/* ----------------------------------------------------------
   生年月日: (西暦) ラベル + 年/月/日 3つの入力欄 + 単位
   単位「年」「月」「日」は各入力欄の右に ::after で添える
   ---------------------------------------------------------- */
.snow-monkey-form .smf-placeholder[data-name="birth_year"],
.snow-monkey-form .smf-placeholder[data-name="birth_month"],
.snow-monkey-form .smf-placeholder[data-name="birth_day"] {
	position: relative;
}
.snow-monkey-form .smf-placeholder[data-name="birth_year"] .smf-text-control,
.snow-monkey-form .smf-placeholder[data-name="birth_month"] .smf-text-control,
.snow-monkey-form .smf-placeholder[data-name="birth_day"] .smf-text-control {
	position: relative;
}
.snow-monkey-form .smf-placeholder[data-name="birth_year"] .smf-text-control::after,
.snow-monkey-form .smf-placeholder[data-name="birth_month"] .smf-text-control::after,
.snow-monkey-form .smf-placeholder[data-name="birth_day"] .smf-text-control::after {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text);
	font-size: 14px;
	pointer-events: none;
}
.snow-monkey-form .smf-placeholder[data-name="birth_year"] .smf-text-control::after  { content: "年"; }
.snow-monkey-form .smf-placeholder[data-name="birth_month"] .smf-text-control::after { content: "月"; }
.snow-monkey-form .smf-placeholder[data-name="birth_day"] .smf-text-control::after   { content: "日"; }

/* 生年月日の入力欄は幅を狭く、単位ぶん右パディング */
.snow-monkey-form .smf-placeholder[data-name="birth_year"] .smf-text-control__control,
.snow-monkey-form .smf-placeholder[data-name="birth_month"] .smf-text-control__control,
.snow-monkey-form .smf-placeholder[data-name="birth_day"] .smf-text-control__control {
	padding-right: 36px;
}

/* 生年月日カラム: 3つを幅固定・左詰め (flex 1 にしない)
   align-items は WPコア (.wp-block-columns { align-items: normal !important }) に負けるため !important */
.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-columns {
	gap: 20px;
	align-items: center !important;
}
.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-column {
	flex: 0 0 auto;
}
.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-column:nth-child(1) { width: 140px; }  /* 年 */
.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-column:nth-child(2) { width: 120px; }  /* 月 */
.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-column:nth-child(3) { width: 120px; }  /* 日 */

/* (西暦) ラベルを年入力欄の左に付ける */
.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-columns::before {
	content: "（西暦）";
	flex: none;
	color: var(--color-text);
	font-size: 14px;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-columns {
		flex-wrap: wrap !important;   /* (西暦) を上段、年月日 3つを下段に */
		gap: 10px;
	}
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-columns::before {
		flex: 0 0 100%;               /* SP: (西暦) は上段に */
		font-size: 12px;
	}
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-column {
		flex: 0 0 auto !important;    /* 姓名用の 1fr 指定を打ち消し、固定幅に */
	}
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-column:nth-child(1) { width: 110px; flex-basis: 110px !important; }
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-column:nth-child(2) { width: 90px;  flex-basis: 90px !important; }
	.snow-monkey-form .smf-item:has([name="birth_year"]) .wp-block-column:nth-child(3) { width: 90px;  flex-basis: 90px !important; }
}

/* ----------------------------------------------------------
   住所 (都道府県市町村 / 番地建物名) 縦2段
   ---------------------------------------------------------- */
.snow-monkey-form .smf-placeholder[data-name="address_1"] + .smf-placeholder[data-name="address_2"],
.snow-monkey-form .smf-placeholder[data-name="address_2"] {
	margin-top: 12px;
}

/* ----------------------------------------------------------
   ファイル添付 (履歴書・職歴書)
   Figma: ブラウザ標準風の「Choose File」ボタン + ファイル名テキスト
   ---------------------------------------------------------- */
.snow-monkey-form .smf-file-control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 12px;
}
.snow-monkey-form .smf-file-control label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.snow-monkey-form .smf-file-control__control {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
/* 「ファイルを選択」を Figma の Choose File 風ボタンに */
.snow-monkey-form .smf-file-control__label {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid #767676;
	border-radius: 3px;
	background: #EFEFEF;
	color: var(--color-text);
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.2s;
}
@media (hover: hover) {
	.snow-monkey-form .smf-file-control label:hover .smf-file-control__label {
		background: #E3E3E3;
	}
}
.snow-monkey-form .smf-file-control__filename {
	color: var(--color-text);
	font-size: 14px;
}
.snow-monkey-form .smf-file-control__filename--no-file {
	color: #6E6E6E;
}
/* SP: 長いファイル名で横スクロールが出ないよう、ボタンの下へ折り返して省略表示
   (SMF 側が .smf-file-control__filename に flex: 0 0 auto を当てるため、
    flex ではなく wrap + max-width で幅を抑える) */
@media (max-width: 767px) {
	.snow-monkey-form .smf-file-control {
		max-width: 100%;
	}
	.snow-monkey-form .smf-file-control label {
		flex-wrap: wrap;
		max-width: 100%;
		min-width: 0;
	}
	.snow-monkey-form .smf-file-control__filename {
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}
/* 解除ボタン */
.snow-monkey-form .smf-file-control__clear {
	padding: 4px 10px;
	border: 1px solid #C9C9C9;
	border-radius: 3px;
	color: var(--color-text);
	font-size: 12px;
	line-height: 1.2;
}

/* ----------------------------------------------------------
   個人情報の同意
   SMF側の構造: smf-item(ラベル: 個人情報の取り扱いへの同意)
     └ smf-item__controls
         ├ p.wp-block-paragraph「個人情報の取り扱いについて」(→PHPで /policy/ リンク化)
         └ smf-placeholder[data-name="agreement"] (チェックボックス)
   controls を flex にしてリンクとチェックボックスを横並びに
   ---------------------------------------------------------- */
.snow-monkey-form .smf-item:has([name="agreement[]"]) .smf-item__controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 32px;
}
/* controls 内の段落は見出しスタイルを解除 */
.snow-monkey-form .smf-item:has([name="agreement[]"]) .wp-block-paragraph {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-item:has([name="agreement[]"]) .smf-item__controls {
		gap: 10px 20px;
	}
}
/* PHP フィルタで挿入するポリシーリンク */
.snow-monkey-form .kry-policy-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.3s;
}
@media (hover: hover) {
	.snow-monkey-form .kry-policy-link:hover {
		opacity: 0.7;
	}
}
.snow-monkey-form .kry-policy-link img {
	width: 12px;
	height: auto;
}

.snow-monkey-form .smf-checkbox-control {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.snow-monkey-form .smf-checkbox-control__control {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--color-primary);
	cursor: pointer;
}
.snow-monkey-form .smf-checkbox-control__label {
	color: var(--color-text);
	font-weight: 700;
	line-height: 1.8;
}

/* ----------------------------------------------------------
   送信ボタン (入力内容を確認する / 送信する / 戻る)
   Figma: 紺背景・白文字・左下と右上の切り欠き (平行四辺形風) + >>
   ---------------------------------------------------------- */
.snow-monkey-form .smf-action {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-top: 64px;               /* 仮 */
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-action {
		margin-top: 40px;
		gap: 12px 16px;
	}
}

.snow-monkey-form .smf-button-control {
	display: inline-block;
}
.snow-monkey-form .smf-button-control__control {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	min-width: 360px;               /* Figma実測 */
	height: 62px;
	padding: 0 40px 0 60px;
	border: none;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	/* 左上と右下を 12px 斜めカット (アンカータブと同じ言語) */
	clip-path: polygon(
		12px 0, 100% 0,
		100% calc(100% - 12px), calc(100% - 12px) 100%,
		0 100%, 0 12px
	);
	cursor: pointer;
	transition: opacity 0.3s;
}
@media (hover: hover) {
	.snow-monkey-form .smf-button-control__control:hover {
		opacity: 0.85;
	}
}
/* >> 矢印 (career_entry-arrow.svg を流用) */
.snow-monkey-form .smf-button-control__control::after {
	content: "";
	width: 24px;
	height: 14px;
	background: url(../../images/career/career_entry-arrow.svg) no-repeat center / contain;
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-button-control__control {
		min-width: 0;
		width: 100%;
		max-width: 320px;
		height: 54px;
		padding: 0 24px 0 32px;
		gap: 16px;
		font-size: 16px;
	}
	.snow-monkey-form .smf-button-control__control::after {
		width: 18px;
		height: 11px;
	}
}
/* 送信中スピナー (SMF標準) はそのまま */

/* 戻るボタン: 白地・紺枠 (確認画面) */
/* 戻るボタン (確認画面・Figmaに無いため独自): 通常の四角形・白地・紺枠・紺文字・<< 左向き
   「送信する」(紺・切り欠き) が主、こちらは従に見えるよう控えめに */
.snow-monkey-form .smf-button-control__control[data-action="back"] {
	gap: 20px;
	min-width: 220px;
	padding: 0 40px 0 32px;
	background: var(--color-white);
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	font-size: 18px;
	clip-path: none;                /* 切り欠きなし (四角形) */
	box-sizing: border-box;
}
/* 共通の ::after (>> 白SVG) は戻るボタンでは使わない */
.snow-monkey-form .smf-button-control__control[data-action="back"]::after {
	content: none;
}
/* << : ::before に紺の「＜」1本 (border 2辺を45度回転) を描き、
   drop-shadow で同形を右隣に複製して2本にする (SVG不使用・色は確実に紺) */
.snow-monkey-form .smf-button-control__control[data-action="back"]::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 8px;              /* 2本目 (影) のぶんテキストとの間隔を確保 */
	border-left: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	transform: rotate(45deg);
	filter: drop-shadow(6px -6px 0 var(--color-primary)); /* 回転後座標で右隣 (画面上 x+8px) に複製 */
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-button-control__control[data-action="back"] {
		min-width: 0;
		width: 100%;
		max-width: 320px;
		font-size: 15px;
		padding: 0 32px 0 28px;
	}
}

/* ----------------------------------------------------------
   エラー表示 (Figma node 59-2589)
   SMF: 無効フィールドの input/select に data-invalid="1"、
        直後に .smf-error-messages を出力
   ---------------------------------------------------------- */
/* 詳細度: 入力欄の基本スタイル (.snow-monkey-form .smf-*-control__control) より高くする */
.snow-monkey-form .smf-text-control__control[data-invalid="1"],
.snow-monkey-form .smf-textarea-control__control[data-invalid="1"],
.snow-monkey-form .smf-select-control__control[data-invalid="1"],
.snow-monkey-form [data-invalid="1"] {
	border-color: #FF0000;          /* SMF 標準の #d98585 を上書き */
	transition: none;               /* エラー枠は即時表示 */
}
/* チェックボックス群・ファイルなど、コンテナに data-invalid が付くタイプは
   内側の見た目に赤枠を出す (SMF は .smf-checkboxes-control__control 等に付与) */
.snow-monkey-form .smf-checkboxes-control__control[data-invalid="1"],
.snow-monkey-form .smf-file-control__control[data-invalid="1"] + .smf-file-control__label {
	outline: 1px solid #FF0000;
	outline-offset: 2px;
	border-radius: 3px;
}

/* --- エラーメッセージ: 絶対配置 (レイアウトに割り込ませない) ---
   SMF は .smf-placeholder 直下 (.smf-*-control の兄弟) に .smf-error-messages を出力する。
   通常フローに置くと横並び項目 (姓名/生年月日/同意) で他要素が押し下げられて崩れるため、
   placeholder を基準に入力欄の直下へ絶対配置し、項目間 margin (44px) の空きに収める */
.snow-monkey-form .smf-placeholder {
	position: relative;
}
.snow-monkey-form .smf-error-messages {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 6px;
	color: #FF0000;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
}
.snow-monkey-form .smf-error-messages::before {
	content: "※";
}
/* 姓名/フリガナ (カラム内・入力欄 286px) と 生年月日 (幅狭) は
   nowrap だと隣の欄に被る可能性があるので折返し許可 + 幅を欄に合わせる */
.snow-monkey-form .wp-block-column .smf-error-messages,
.snow-monkey-form .smf-placeholder[data-name^="birth_"] .smf-error-messages {
	white-space: normal;
	width: max-content;
	max-width: 286px;
}
.snow-monkey-form .smf-placeholder[data-name^="birth_"] .smf-error-messages {
	max-width: 200px;
}
/* 生年月日: 3欄のうち複数がエラーでも重ならないよう、年欄以外はメッセージを非表示にして
   代表として年欄のメッセージだけ出す (3欄とも同じ「必須」エラーになるため)。
   年欄が OK で月/日だけエラーの場合は JS で年欄側へメッセージを複製する */
.snow-monkey-form .smf-placeholder[data-name="birth_month"] .smf-error-messages,
.snow-monkey-form .smf-placeholder[data-name="birth_day"] .smf-error-messages {
	display: none;
}
/* 住所 (縦2段): 1段目のメッセージは2段目の入力欄に被るため非表示にし、
   2段目の下にまとめて出す。1段目だけエラーの場合は JS で2段目側へメッセージを複製する */
.snow-monkey-form .smf-placeholder[data-name="address_1"] .smf-error-messages {
	display: none;
}
/* 同意チェック: controls が flex のため、メッセージはチェックボックス群の下に */
.snow-monkey-form .smf-item:has([name="agreement[]"]) .smf-placeholder {
	position: static;               /* placeholder ではなく controls を基準にする */
}
.snow-monkey-form .smf-item:has([name="agreement[]"]) .smf-item__controls {
	position: relative;
}
@media (max-width: 767px) {
	.snow-monkey-form .smf-error-messages {
		font-size: 12px;
		white-space: normal;
		width: max-content;
		max-width: 100%;
	}
	.snow-monkey-form .wp-block-column .smf-error-messages {
		max-width: 100%;
	}
}
/* システムエラー (通信失敗等) */
.snow-monkey-form .smf-system-error-content-ready {
	margin-top: 24px;
	padding: 16px;
	border: 1px solid #FF0000;
	border-radius: 4px;
	color: #FF0000;
	font-size: 14px;
	text-align: center;
}

/* ----------------------------------------------------------
   確認画面 (data-screen="confirm")
   入力欄の代わりに値テキストが .smf-item__controls に直接出力される。
   Figma に確認画面デザインは無いため、入力画面に準じた体裁:
   ラベル (紺・太字) の下に値を 1行、項目ごとに罫線で区切る
   ---------------------------------------------------------- */
.snow-monkey-form[data-screen="confirm"] .smf-item__controls {
	padding: 12px 0 16px;
	border-bottom: 1px solid #E0E0E0;
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.7;
	word-break: break-word;
}
.snow-monkey-form[data-screen="confirm"] .smf-item__label {
	margin-bottom: 4px;
}
/* 確認画面ではカラム内 (姓/名等) も縦積みに戻して読みやすく */
.snow-monkey-form[data-screen="confirm"] .wp-block-column .smf-item {
	display: block;
}
.snow-monkey-form[data-screen="confirm"] .wp-block-column .smf-item__label {
	margin-bottom: 4px;
}
/* 生年月日の単位は確認画面でも出す (テキストの後ろに) */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="birth_year"]::after  { content: " 年"; }
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="birth_month"]::after { content: " 月"; }
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="birth_day"]::after   { content: " 日"; }
.snow-monkey-form[data-screen="confirm"] .smf-item:has([name="birth_year"]) .wp-block-columns::before {
	content: none;                  /* (西暦) は確認画面では非表示 */
}
/* 確認画面の生年月日は 3値を横並びテキストで */
.snow-monkey-form[data-screen="confirm"] .smf-item:has([name="birth_year"]) .wp-block-column {
	width: auto;
}
/* 確認画面ではポリシーリンクを非表示 (同意済み表示のみ) */
.snow-monkey-form[data-screen="confirm"] .kry-policy-link {
	display: none;
}
@media (max-width: 767px) {
	.snow-monkey-form[data-screen="confirm"] .smf-item__controls {
		font-size: 14px;
	}
}

/* ----------------------------------------------------------
   進行インジケータ (SMF progress tracker) — 使用する場合のみ
   ---------------------------------------------------------- */
.snow-monkey-form .smf-progress-tracker {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin: 0 0 48px;
	list-style: none;
}
.snow-monkey-form .smf-progress-tracker__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #9E9E9E;
	font-size: 14px;
}
.snow-monkey-form .smf-progress-tracker__item__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid #C9C9C9;
	font-size: 13px;
}
.snow-monkey-form .smf-progress-tracker__item[aria-current="true"] {
	color: var(--color-primary);
	font-weight: 700;
}
.snow-monkey-form .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}