/**
 * フォーム（Snow Monkey Forms）用スタイル
 *
 * 対象：問い合わせ(/inq/)・書籍購入(/kankou/contact-buy/) など SMF 設置ページ。
 * enqueue.php で「SMFブロックを含む固定ページ」だけに読み込む（jifma-legacy-style の後＝後勝ち）。
 * ネイティブCSSネスティングで記述。スマホ用 @media は各セレクタ内にネストで置く。
 *
 * ■ 主なクラス（SMFの出力）
 *   .smf-form / .smf-item / .smf-item__col--label / .smf-item__col--controls
 *   .smf-text-control / -select- / -textarea- / -radio-buttons- / -checkboxes-
 *
 * ■ 個別に当てたいとき
 *   - フォーム単位：ブロックに「HTMLアンカー(id)」→ #myform .smf-... で限定
 *   - 行単位：項目ブロックの「追加CSSクラス」→ .my-row { ... } で限定
 *
 * @package Jifma_v3
 */

.smf-form {
	margin-inline: auto;
	text-align: center;
	margin-top: 60px;
	padding: 60px 100px;
    box-shadow: 0 0 2px #ddd;
    background-color: #fff;
    @media (max-width: 767px) {
		margin-top: 30px;
	    padding: 30px 20px;
	    box-shadow: none;
	    padding: 0;
    }
	/* ===== 行（ラベル｜入力） ===== */
	.section-title {
        text-align: left;
        margin-top: 100px;
        @media (max-width: 767px) {
			margin-top: 60px;
		}
    }
	.smf-item {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px 24px;
		padding: 16px 0;
		border-top: 1px solid var(--jifma-line, #e5e7eb);
		@media (max-width: 767px) {
			flex-wrap: wrap;
			gap: 6px 0;
			padding: 14px 0;
		}
		&__col--label {
			flex: 0 0 26%;
			max-width: 26%;
			font-weight: 700;
			padding-top: 8px;
			color: #144a6c;
			@media (max-width: 767px) {
				flex: 1 1 100%;
				max-width: 100%;
				padding-top: 0;
			}
		}
		&__col--controls {
			flex: 1 1 0%;
			min-width: 0;
			@media (max-width: 767px) {
				flex: 1 1 100%;
				max-width: 100%;
			}
		}
		/* 必須マーク：必須項目（data-validations="required"）のラベルに「※必須」。
		   個別調整用に、項目ブロックの追加CSSクラス .required でも出せる。 */
		&:has( [data-validations~="required"] ) .smf-item__label__text::after,
		&.required .smf-item__label__text::after {
			content: "※必須";
			display: inline-block;
			margin-left: 8px;
			padding: 1px 7px;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.6;
			color: #df240f;
			vertical-align: middle;
		}
		.smf-item__col--label {
			color: #144a6c;
			font-weight: bold;
			flex: none;
			max-width: none;
			padding-right: 0;
			width: 210px;
			text-align: left;
			padding-top: 7px;
			@media (max-width: 767px) {
				min-width: 100%;
				padding: 0;
			}
		}
		.smf-item__col--controls {
	        max-width: 100%;
	        text-align: left;
	        @media (max-width: 767px) {
				width: 100%;
			}
        }
        .smf-item__description {
	        font-size: 13px;
	        font-weight: normal;
        }
		&.agree-row {
			text-align: center;
			flex-wrap: nowrap;
            align-items: center;
            display: inline-flex;
            margin-inline: auto;
            width: auto;
            border-top: none;
            margin-bottom: 20px;
            @media (max-width: 767px) {
			    flex-wrap: wrap;
			    flex-direction: column;
			    gap:0;
		    }
			.smf-item__col--label {
				flex: 0 0 auto; /* 26%固定を解除しないと「※必須」が右にはみ出す */
				min-width: max-content; /* ※必須バッジ込みの幅にして重なり防止 */
				max-width: none;
				padding-top: 0;
				color: #333;
				font-weight: normal;
			    white-space: nowrap;
			}
			.smf-item__col--controls {
				@media (max-width: 767px) {
					width: 100%;
					text-align: center; /* スマホ時「□同意する」を横中央に */
					.smf-checkbox-control,
					.smf-checkboxes-control__control {
						margin: 4px 0; /* 右margin(18px)を消して左右対称に */
					}
				}
			}
		}
		&.zipcode {
			.smf-item__controls {
				width: 200px;
			}
		}
		.smf-select-control__control {
			padding-right: 40px;
			background-color: #f1f1f1; /* テキスト欄と同じグレーに（SMF既定の白を上書き） */
			border: none;
			border-radius: 4px;
			color: #333;
		}
		.smf-select-control__toggle:before {
			display: none;
		}
		.smf-textarea-control__control {
			background-color: #f1f1f1; /* テキスト欄と同じグレーに（SMF既定の白を上書き） */
			border: none;
			border-radius: 4px;
			color: #333;
		}
	}

	/* ===== 入力コントロール ===== */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	select,
	textarea {
		width: 100%;
		box-sizing: border-box;
		padding: 12px 15px;
		font-size: 16px; /* iOSの自動ズーム防止のため16px以上 */
		line-height: 1.6;
		color: #333;
		background-color: #f1f1f1;
		border: none;
		border-radius: 4px;
		-webkit-appearance: none;
		vertical-align: middle;
		display: inline-block;

		&:focus {
			outline: none;
			border-color: var(--jifma-furnace, #144a6c);
			box-shadow: 0 0 0 2px rgba(20, 74, 108, 0.15);
		}
	}

	select {
		background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%);
		background-position: calc(100% - 18px) center, calc(100% - 13px) center;
		background-size: 5px 5px, 5px 5px;
		background-repeat: no-repeat;
		padding-right: 36px;
	}

	textarea {
		min-height: 140px;
		resize: vertical;
	}

	/* ===== ラジオ・チェックボックス ===== */
	.smf-radio-buttons-control__control,
	.smf-checkboxes-control__control,
	.smf-checkbox-control,
	.smf-radio-button-control {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		margin: 4px 18px 4px 0;
		cursor: pointer;
        flex-wrap: wrap;
	}

	/* 旧 style.css の打ち消し対策：
	   旧テーマは input[type=checkbox]{display:none} ＋ input{appearance:none} で
	   チェックボックス/ラジオを消し、隣接 span に擬似ボックスを描いていた（擬似ボックスは
	   2026-06-24 に無効化済み）。SMF は native の input を使うので表示と外観を元に戻す。 */
	input[type="checkbox"],
	input[type="radio"] {
		display: inline-block;
		width: auto;
		height: auto;
		margin: 0 6px 0 0;
		-webkit-appearance: auto;
		-moz-appearance: auto;
		appearance: auto;
		opacity: 1;
		position: static;
		vertical-align: middle;
	}
	input[type="checkbox"] {
		-webkit-appearance: checkbox;
		appearance: checkbox;
	}
	input[type="radio"] {
		-webkit-appearance: radio;
		appearance: radio;
	}

	/* ===== エラー表示 ===== */
	.smf-item__controls__messages,
	[role="alert"] {
		color: #b32d2e;
		font-size: 13px;
		margin-top: 6px;
	}

	.smf-invalid {
		input,
		select,
		textarea {
			border-color: #b32d2e;
			background: #fdf3f3;
		}
	}

}

/* 送信ボタン群は .smf-form の外（FORM.snow-monkey-form 直下の .smf-action）にあるため、
   フォーム要素 .snow-monkey-form を基点に指定する。 */
.snow-monkey-form {
	.smf-action {
		text-align: center;
		margin-top: 60px;
		@media (max-width: 767px) {
			margin-top: 40px;
		}
	}

	.smf-button-control__control,
	button[type="submit"] {
		display: inline-block;
		width: 40%;
		margin: 1% 3%;
		padding: 18px 0;
		font-size: 1.1em;
		font-weight: bold;
		color: #fff;
		background: var(--jifma-furnace, #144a6c);
		border: none;
		border-radius: 0;
		cursor: pointer;
		transition: opacity 0.3s ease-in-out;

		&:hover {
			opacity: 0.9;
		}
		@media (max-width: 767px) {
			width: 100%;
			margin: 0 0 20px;
		}
	}

	/* 「戻る」ボタン（data-action="back"）は本サイト同様グレー */
	.smf-button-control__control[data-action="back"] {
		color: #333;
		background-color: #cecece;
	}
}