@charset "UTF-8";
/*
 * INTEC お問い合わせフォーム（Snow Monkey Forms）スタイル
 * 旧サイト contact_form.css の見た目を、SMF の実出力クラスに合わせて再現。
 *
 * SMF構造:
 *   .smf-item
 *     .smf-item__col--label  > .smf-item__label > .smf-item__label__text
 *     .smf-item__col--controls > .smf-item__controls > .smf-text-control(__control) 等
 *   必須/任意バッジは contact.js が data-validations を見て自動付与
 *     （.smf-req-badge / .smf-opt-badge）
 */

/* ===== ページ背景（サイトのコンテンツ背景色に合わせる：PC/SP共通） ===== */
html,
body {
	background-color: #FEFEF0;
}

/* ===== コンテナ ===== */
#contactForm {
	max-width: 600px;
	margin: 0 auto;
	padding: 10px 15px;
	font-size: 14px;
	color: #333;
	line-height: 1.5;
	box-sizing: border-box;
	background-color: #FEFEF0;
}
#contactForm *,
#contactForm *::before,
#contactForm *::after {
	box-sizing: border-box;
}

/* SMF のフォーム全体の余白をリセット */
#contactForm .smf-form,
#contactForm .snow-monkey-form {
	margin: 0;
}

/* ===== 1項目（ラベル左・入力右） =====
   SMF本体のレスポンシブ（狭幅で縦積み）が !important で効くため、
   こちらも !important で横並びを固定し、配置崩れを防ぐ。 */
#contactForm .smf-item {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: flex-start;
	padding: 10px 0;
	margin: 0;
}

/* ラベル列：幅150px・右寄せ・12px（旧 dt 相当） */
#contactForm .smf-item__col--label {
	order: 0;
	flex: 0 0 150px !important;
	width: 150px !important;
	max-width: 150px;
}
#contactForm .smf-item__label {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 5px;
	text-align: right;
	font-size: 12px;
	line-height: 1.4;
	padding-top: 6px;
	margin: 0;
}
#contactForm .smf-item__label__text {
	display: inline-block;
}

/* 入力列（旧 dd 相当：左にインデント） */
#contactForm .smf-item__col--controls {
	order: 1;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0;
	padding-left: 10px;
	font-size: 12px;
}
#contactForm .smf-item__controls {
	margin: 0;
}

/* ===== 必須 / 任意 バッジ（contact.js が付与） ===== */
#contactForm .smf-req-badge,
#contactForm .smf-opt-badge {
	display: inline-block;
	flex: 0 0 auto;
	margin-right: auto; /* ラベル列の左端へ寄せる（旧 float:left 相当） */
	font-size: 10px;
	line-height: 1;
	padding: 4px 5px;
	color: #fff;
	border-radius: 4px;
	box-shadow: 0 0 5px #ccc;
	white-space: nowrap;
}
#contactForm .smf-req-badge { background-color: #cc0000; } /* 必須＝赤 */
#contactForm .smf-opt-badge { background-color: #333333; } /* 任意＝濃灰 */

/* ===== 入力欄（旧サイトの素朴な見た目に寄せる：角丸・大きい余白を解除） ===== */
#contactForm .smf-text-control__control,
#contactForm .smf-textarea-control__control {
	font-size: 14px;
	padding: 3px;
	border: 1px solid #999;
	border-radius: 0;
	box-shadow: none;
	background-color: #fff;
	vertical-align: middle;
}
#contactForm .smf-textarea-control__control {
	width: 100%;
	max-width: 360px;
	height: 80px;
}

/* チェックボックス（送信確認） */
#contactForm .smf-checkbox-control__label {
	font-size: 12px;
	line-height: 1.5;
}

/* ===== ご住所グループ =====
   SMFで「ご住所」項目を1つ作り、その中に
   都道府県(prefecture)/市区町村(city)/丁目番地(street) の3テキストを入れた場合に、
   各入力の前へサブラベルを表示して旧デザインの3行レイアウトを再現する。 */
#contactForm .smf-placeholder[data-name="prefecture"],
#contactForm .smf-placeholder[data-name="city"],
#contactForm .smf-placeholder[data-name="street"] {
	display: flex;
	align-items: center;
	gap: 8px;
}
#contactForm .smf-placeholder[data-name="prefecture"],
#contactForm .smf-placeholder[data-name="city"] {
	margin-bottom: 10px;
}
#contactForm .smf-placeholder[data-name="prefecture"]::before { content: "都道府県"; }
#contactForm .smf-placeholder[data-name="city"]::before { content: "市区町村"; }
#contactForm .smf-placeholder[data-name="street"]::before { content: "丁目番地"; }
#contactForm .smf-placeholder[data-name="prefecture"]::before,
#contactForm .smf-placeholder[data-name="city"]::before,
#contactForm .smf-placeholder[data-name="street"]::before {
	flex: 0 0 auto;
	font-size: 12px;
	white-space: nowrap;
	color: #333;
}

/* ===== ボタン（確認／送信） =====
   SMF のボタンブロックは .smf-action > .smf-button-control > .smf-button-control__control */
#contactForm .smf-action {
	clear: both;
	padding: 16px 0 4px;
	text-align: center;
}
#contactForm .smf-action .smf-button-control__control,
#contactForm .smf-action button,
#contactForm .smf-action .intec-reset-btn {
	font-size: 14px;
	min-width: 120px;
	padding: 6px 16px;
}
/* リセットボタン（送信ボタンの左に表示） */
#contactForm .smf-action .intec-reset-btn {
	margin-right: 12px;
	cursor: pointer;
}

/* ===== バリデーション・エラー表示（旧デザイン：ピンク背景＋赤メッセージ） ===== */
/* エラーの入力欄をピンクに */
#contactForm .smf-text-control__control[data-invalid="1"],
#contactForm .smf-textarea-control__control[data-invalid="1"] {
	background-color: #ffcccc;
}
/* エラーメッセージ（赤・項目別文言は contact.js が差し替え） */
#contactForm .smf-error-messages {
	font-size: 12px;
	line-height: normal;
	color: #ff0000;
	margin-top: 5px;
}

/* ===== スマホ（≤480px）：ラベルと入力を2行（ラベル上・入力下）にして、はみ出しを防ぐ =====
   PCのiframeは600px幅なので、横並び（ラベル左・入力右）のまま。狭い画面のみ縦積み。 */
@media screen and (max-width: 480px) {
	/* 1項目を縦積みに */
	#contactForm .smf-item {
		display: block !important;
	}
	/* ラベル行：全幅・左寄せ（バッジ＋ラベルが左に並ぶ） */
	#contactForm .smf-item__col--label {
		width: auto !important;
		max-width: none !important;
		flex: none !important;
	}
	#contactForm .smf-item__col--label .smf-item__label {
		justify-content: flex-start !important;
		text-align: left !important;
		padding-top: 0;
		margin-bottom: 4px;
	}
	/* バッジとラベルを隣接させる（左端へ離す margin-right:auto を解除） */
	#contactForm .smf-req-badge,
	#contactForm .smf-opt-badge {
		margin-right: 5px !important;
	}
	/* 入力行：全幅・インデント解除 */
	#contactForm .smf-item__col--controls {
		padding-left: 0;
	}
	/* 入力欄を全幅にして画面からはみ出さないように */
	#contactForm .smf-text-control__control,
	#contactForm .smf-textarea-control__control {
		width: 100%;
		max-width: 100%;
	}
	/* ご住所のサブラベル（都道府県/市区町村/丁目番地）＋入力も整列 */
	#contactForm .smf-placeholder[data-name="prefecture"] .smf-text-control,
	#contactForm .smf-placeholder[data-name="city"] .smf-text-control,
	#contactForm .smf-placeholder[data-name="street"] .smf-text-control {
		flex: 1 1 auto;
	}
}