/*
 * Snow Monkey Forms 用スタイル
 * 旧 MW WP Form の見た目（list04 / window01 / btn02 / checkbox-item / txt05）を引き継ぐ。
 * contact・recruit_contact ページのみで読み込む（config/init.php）。
 * ステージングで見た目が固まったら SCSS 側へ取り込み、このファイルは削除する。
 */

.snow-monkey-form {
	margin-bottom: 40px;
}

/* 項目 */
body .smf-form .smf-item {
	margin-top: 0; /* 左右は触らない（エディタが .wp-block に付ける中央寄せの auto を残す） */
	margin-bottom: 0;
	padding: 0;
	border: 0;
}
body .smf-form .smf-item + .smf-item {
	margin-top: 40px;
}
body .smf-form .smf-item__label {
	color: #003894;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.4;
}
body .smf-form .smf-item__label label,
body .smf-form .smf-item__label__text {
	font-weight: bold;
}
body .smf-form .smf-item__label label {
	cursor: default;
}
body .smf-form .smf-item__description {
	margin-top: 5px;
	color: #666;
	font-size: 1.4rem;
	line-height: 1.7;
}
body .smf-form .smf-item__col--controls {
	margin-top: 5px;
}

/* 氏名・カナ氏名などの小見出し（Item 内に置いた段落ブロック。追加CSSクラス text01） */
body .smf-form .smf-item__controls > .text01 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 5px;
}
body .smf-form .smf-item__controls > .text01:not(:first-child) {
	margin-top: 15px;
}
body .smf-form .smf-item__controls > .text01 > strong {
	display: inline-block;
	margin-right: 15px;
}
body .smf-form .smf-item__controls > .text01 > .notes02 {
	display: inline-block;
	padding-left: 2px;
}

/* 必須バッジ（Item ブロックの追加CSSクラス is-required） */
body .smf-form .smf-item.is-required:not(.smf-item--divider) .smf-item__label__text::after,
body .smf-form .smf-item--divider.is-required .smf-checkbox-control::after {
	content: "必須";
	display: inline-block;
	position: relative;
	padding: 4px 5px;
	border: solid 2px #dc2715;
	color: #dc2715;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1;
}
body .smf-form .smf-item.is-required:not(.smf-item--divider) .smf-item__label__text::after {
	top: -3px;
	margin-left: 18px;
}
body .smf-form .smf-item--divider.is-required .smf-checkbox-control::after {
	margin-left: 9px;
}

/* テキスト入力・テキストエリア */
body .smf-form .smf-text-control__control,
body .smf-form .smf-textarea-control__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 50px;
	padding: 5px 10px;
	border: solid 2px #999;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: none;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 1.6rem;
}
body .smf-form .smf-textarea-control__control {
	height: 250px;
}
body .smf-form .smf-placeholder + .smf-placeholder {
	margin-top: 15px;
}

/* エラー */
body .smf-form [data-invalid="1"] {
	border-color: #dc2715;
	color: #000;
}
body .smf-form .smf-error-messages {
	position: relative;
	margin-top: 10px;
	padding-left: 32px;
	color: #dc2715;
}
body .smf-form .smf-error-messages::before {
	position: absolute;
	top: .1em;
	left: 0;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml;charset=utf8,%3C!--%20Generator%3A%20Adobe%20Illustrator%2018.1.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20--%3E%3Csvg%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20256px%3B%20height%3A%20256px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23dc2715%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M256.007%2C357.113c-16.784%2C0-30.411%2C13.613-30.411%2C30.397c0%2C16.791%2C13.627%2C30.405%2C30.411%2C30.405%20s30.397-13.614%2C30.397-30.405C286.405%2C370.726%2C272.792%2C357.113%2C256.007%2C357.113z%22%20style%3D%22fill%3A%20rgb(220%2C%2039%2C%2021)%3B%22%3E%3C%2Fpath%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M505.097%2C407.119L300.769%2C53.209c-9.203-15.944-26.356-25.847-44.777-25.847%20c-18.407%2C0-35.544%2C9.904-44.747%2C25.847L6.902%2C407.104c-9.203%2C15.943-9.203%2C35.751%2C0%2C51.694c9.204%2C15.943%2C26.356%2C25.84%2C44.763%2C25.84%20h408.67c18.406%2C0%2C35.559-9.897%2C44.762-25.84C514.301%2C442.855%2C514.301%2C423.047%2C505.097%2C407.119z%20M464.465%2C432.405%20c-2.95%2C5.103-8.444%2C8.266-14.35%2C8.266H61.878c-5.892%2C0-11.394-3.163-14.329-8.281c-2.964-5.11-2.979-11.445-0.014-16.548%20l194.122-336.24c2.943-5.103%2C8.436-8.274%2C14.35-8.274c5.9%2C0%2C11.386%2C3.171%2C14.336%2C8.282l194.122%2C336.226%20C467.415%2C420.945%2C467.415%2C427.295%2C464.465%2C432.405z%22%20style%3D%22fill%3A%20rgb(220%2C%2039%2C%2021)%3B%22%3E%3C%2Fpath%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M256.007%2C152.719c-16.784%2C0-30.411%2C13.613-30.411%2C30.405l11.68%2C137.487c0%2C10.346%2C8.378%2C18.724%2C18.731%2C18.724%20c10.338%2C0%2C18.731-8.378%2C18.731-18.724l11.666-137.487C286.405%2C166.331%2C272.792%2C152.719%2C256.007%2C152.719z%22%20style%3D%22fill%3A%20rgb(220%2C%2039%2C%2021)%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat 0 0/100%;
	content: "";
}

/* 個人情報の同意 */
body .smf-form > .notes02 {
	margin-top: 40px;
}
body .smf-form .smf-item.smf-item--divider:not(:first-child) {
	margin-top: 13px;
}
body .smf-form .smf-item--divider .smf-item__col--controls {
	margin-top: 0;
}
body .smf-form .smf-item--divider .smf-checkboxes-control__control > .smf-label {
	display: block;
}
body .smf-form .smf-item--divider .smf-label label {
	display: flex;
	justify-content: center;
}
body .smf-form .smf-checkbox-control {
	align-items: center;
	gap: 10px;
}
body .smf-form .smf-checkbox-control__control {
	opacity: 1; /* common.css の input[type=checkbox]{opacity:0} を打ち消す */
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	border: solid 2px #999;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: none;
}
body .smf-form .smf-checkbox-control__control:checked {
	background-color: #fff;
	border-color: #999;
}
body .smf-form .smf-checkbox-control__control:focus,
body .smf-form .smf-checkbox-control__control:checked:focus {
	border-color: #000;
}
body .smf-form .smf-checkbox-control__control::before {
	top: 50%;
	left: 10px;
	width: 16px;
	height: 24px;
	margin: -16px 0 0 0 !important;
	border-color: #000;
	border-width: 0 4px 4px 0;
	box-sizing: border-box;
}
body .smf-form .smf-checkbox-control__label {
	font-weight: bold;
}

/* 同意チェックのエラーは中央寄せ */
body .smf-form .smf-item--divider .smf-error-messages {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-left: 0;
}
body .smf-form .smf-item--divider .smf-error-messages::before {
	position: static;
	flex: none;
	margin: .1em 10px 0 0;
}

/* ボタン */
.snow-monkey-form .smf-action {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 34px 0 0;
	text-align: center;
}
.snow-monkey-form .smf-action .smf-button-control {
	display: block;
	margin: 0;
}
.snow-monkey-form .smf-action .smf-button-control + .smf-button-control {
	margin-left: 0;
}
.snow-monkey-form .smf-action .smf-button-control__control {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 300px;
	height: 70px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: #003894;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-decoration: none;
	transition: background .3s;
	cursor: pointer;
}
.snow-monkey-form .smf-action .smf-button-control__control:hover {
	background: #1086d1;
}
.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	min-width: 160px;
	background: #666;
}
.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"]:hover {
	background: #999;
}

/* 確認・完了画面：電話案内の列を隠して中央の1カラムにする（form-smf.js が .is-single を付与） */
.colBlock02.is-single .col03 {
	display: none;
}
.colBlock02.is-single .col02 {
	width: 100%;
}
.colBlock02.is-single .col02 > .contactFormArea01 {
	margin-left: auto;
	margin-right: auto;
}
/* 完了画面：フォーム下の注意書き（迷惑メール対策・reCAPTCHA）は出さない（確認画面では出す） */
.contactFormArea01.is-complete .snow-monkey-form ~ div {
	display: none;
}

/* 確認画面（旧 .mw_wp_form_confirm 相当） */
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-item__description,
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-item.is-required:not(.smf-item--divider) .smf-item__label__text::after,
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-item__controls > .text01,
.snow-monkey-form[data-screen="confirm"] .smf-form > .notes02,
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-item--divider {
	display: none;
}
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-placeholder + .smf-placeholder {
	margin-top: 0;
}

/* 確認画面だけに出す案内（フォーム先頭に置いた段落ブロック .confirm-notice__title / .confirm-notice__text） */
body .smf-form .confirm-notice__title,
body .smf-form .confirm-notice__text {
	display: none;
}
.snow-monkey-form[data-screen="confirm"] .smf-form .confirm-notice__title,
.snow-monkey-form[data-screen="confirm"] .smf-form .confirm-notice__text {
	display: block;
}
body .smf-form .confirm-notice__title {
	color: #dc2715;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.4;
}
body .smf-form .confirm-notice__text {
	margin-top: 15px;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: solid 4px #eee;
	line-height: 1.9;
}
.snow-monkey-form[data-screen="confirm"] .smf-action {
	margin-top: 80px;
}

@media screen and (max-width: 767px) {
	body .smf-form .smf-item__label {
		font-size: 1.6rem;
	}
	body .smf-form .smf-item.is-required:not(.smf-item--divider) .smf-item__label__text::after,
	body .smf-form .smf-item--divider.is-required .smf-checkbox-control::after {
		padding: 5px 6px;
		font-size: 1.2rem;
	}
	body .smf-form .smf-item__description,
	body .smf-form > .notes02 {
		font-size: 1.2rem;
	}
	body .smf-form .confirm-notice__title {
		font-size: 1.6rem;
	}
	.snow-monkey-form .smf-action .smf-button-control {
		width: 100%;
		max-width: 345px;
	}
	.snow-monkey-form .smf-action .smf-button-control__control {
		min-width: 0;
		font-size: 1.6rem;
	}
	.snow-monkey-form .smf-action .smf-button-control__control:hover {
		background: #003894;
	}
	.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"] {
		position: static;
		width: 200px;
		margin-bottom: 20px;
	}
	.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"]:hover {
		background: #666;
	}
}

/* ── 応募フォーム ── */

/* 幅の狭い入力欄（年齢・郵便番号）と、低いテキストエリア（住所）。ブロックの controlClass に is-narrow / is-short を指定する */
body .smf-form .smf-text-control__control.is-narrow {
	width: 150px;
}
body .smf-form .smf-textarea-control__control.is-short {
	height: 100px;
}

/* 任意バッジ（Item ブロックの追加CSSクラス is-optional） */
body .smf-form .smf-item.is-optional .smf-item__label__text::after {
	content: "任意";
	display: inline-block;
	position: relative;
	top: -3px;
	margin-left: 18px;
	padding: 4px 5px;
	border: solid 2px #399;
	color: #399;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1;
}

/* ラジオボタン（性別） */
body .smf-form .smf-item:not(.smf-item--divider) .smf-radio-buttons-control .smf-label,
body .smf-form .smf-item:not(.smf-item--divider) .smf-checkboxes-control .smf-label {
	display: inline-block;
	margin: 12px 24px 0 0;
}
body .smf-form .smf-radio-button-control {
	align-items: center;
	gap: 10px;
}
body .smf-form .smf-radio-button-control__control {
	opacity: 1; /* common.css の input[type=radio]{opacity:0} を打ち消す */
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	border: solid 2px #a0a0a0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: none;
}
body .smf-form .smf-radio-button-control__control:checked {
	background-color: #fff;
	border-color: #a0a0a0;
}
body .smf-form .smf-radio-button-control__control:focus,
body .smf-form .smf-radio-button-control__control:checked:focus {
	border-color: #000;
}
body .smf-form .smf-radio-button-control__control::before {
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px !important;
	background-color: #000;
}
body .smf-form .smf-radio-button-control__label {
	font-weight: bold;
}

/* 都道府県の選択 */
body .smf-form .smf-select-control__control {
	box-sizing: border-box;
	min-width: 150px;
	height: 50px;
	padding: 5px 30px 5px 10px;
	border: solid 2px #999;
	border-radius: 5px;
	background-color: #fff;
	font-family: inherit;
	font-size: 1.6rem;
}

/* 住所（郵便番号と都道府県を横に並べる。Item ブロックの追加CSSクラス is-address） */
body .smf-form .smf-item.is-address .smf-item__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 20px;
}
body .smf-form .smf-item.is-address .smf-item__controls > .text01,
body .smf-form .smf-item.is-address .smf-item__controls > .notes02,
body .smf-form .smf-item.is-address .smf-item__controls > .smf-placeholder[data-name="address"] {
	flex: 0 0 100%;
}
body .smf-form .smf-item.is-address .smf-item__controls > .smf-placeholder + .smf-placeholder {
	margin-top: 0;
}
body .smf-form .smf-item.is-address .smf-item__controls > .notes02 {
	margin-top: 12px;
}
body .smf-form .smf-item.is-address .smf-item__controls > .smf-placeholder[data-name="address"] {
	margin-top: 5px;
}

/* 履歴書の注釈（ファイル選択の見た目はプラグイン標準のまま） */
body .smf-form .notes03 {
	margin-top: 15px;
	font-size: 1.4rem;
}

/* 確認画面（応募フォーム分） */
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-item.is-optional .smf-item__label__text::after,
.snow-monkey-form[data-screen="confirm"] .smf-form .smf-item__controls > .notes02,
.snow-monkey-form[data-screen="confirm"] .smf-form .notes03 {
	display: none;
}

@media screen and (max-width: 767px) {
	body .smf-form .smf-item.is-optional .smf-item__label__text::after {
		padding: 5px 6px;
		font-size: 1.2rem;
	}
	body .smf-form .notes03 {
		font-size: 1.2rem;
	}
	body .smf-form .smf-item:not(.smf-item--divider) .smf-radio-buttons-control .smf-label,
	body .smf-form .smf-item:not(.smf-item--divider) .smf-checkboxes-control .smf-label {
		display: block;
		margin: 12px 0 0;
	}
}

/*
 * 管理画面（ブロックエディタ）用
 * add_editor_style() で読み込まれると、上のルールの body が .editor-styles-wrapper に置き換わって当たる。
 * 以下はエディタ専用の補正（フロントでは .editor-styles-wrapper が無いので当たらない）。
 */
.editor-styles-wrapper .smf-form .confirm-notice__title,
.editor-styles-wrapper .smf-form .confirm-notice__text {
	display: block;
}
.editor-styles-wrapper .smf-form .confirm-notice__title::before {
	content: "（確認画面にのみ表示されます）";
	display: block;
	margin-bottom: 4px;
	color: #999;
	font-size: 1.2rem;
	font-weight: normal;
}
.editor-styles-wrapper .smf-form .smf-item__controls > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.editor-styles-wrapper .smf-form .smf-item__controls > .wp-block-snow-monkey-forms-control-text + .wp-block-snow-monkey-forms-control-text {
	margin-top: 15px;
}
