/**
 * 問い合わせフォーム最適化（CRO）用スタイル
 *
 * 前提：既存 style.css の以下を活かす
 *   - .form-wrap / .form-tel / .form__text / .form-content / .form-flex のベース
 *
 * ここで追加するのは：
 *   1) .form-notice   … 「2営業日以内にご連絡」の目立つバッジ
 *   2) [mwform_radio] … ラジオボタンの整った横並びレイアウト
 */

/* ------------------------------------------------------------------
   2営業日以内にご連絡バッジ
   ------------------------------------------------------------------ */
.form-notice {
	background: #f4f8fc;
	border-left: 4px solid #0f6bad;
	border-radius: 4px;
	padding: 14px 18px;
	margin: 20px 0 28px;
	line-height: 1.7;
}

.form-notice p {
	margin: 0;
	color: #333;
	font-size: 14px;
}

.form-notice strong {
	color: #0f6bad;
	font-weight: 700;
}

@media (min-width: 768px) {
	.form-notice p {
		font-size: 15px;
	}
}

/* ------------------------------------------------------------------
   ラジオボタン（相談カテゴリ・現在のご検討状況）

   前提：style.css の `.form-flex .input-wrap` は flex-direction:column
   なので <span> がすべて縦積みになる。ここでは以下を上書きする：

   1) input-wrap 内のラジオ群を横並び（row + wrap）に
   2) 各ラジオ選択肢の間隔・vertical align を整える
   3) 左ラベル列との天地バランスを取る
   ------------------------------------------------------------------ */

/* input-wrap を横並びコンテナに（ラジオを含む form-flex--radio 行のみ） */
.form-flex--radio .input-wrap {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* ラベル側もラジオ選択肢群と天地を揃える（縦位置調整、デスクトップのみ） */
@media (min-width: 768px) {
	.form-flex--radio .label-wrap {
		align-items: flex-start;
		padding-top: 22px;
	}
}

/* 個々のラジオ選択肢 */
.form-flex .mwform-radio-field.horizontal-item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
	line-height: 1.4;
	white-space: nowrap;
}

/* MW WP Form 標準の `+ .horizontal-item { margin-left: 10px }` を上書き
   （gap で管理するのでマージン不要） */
.form-flex .mwform-radio-field.horizontal-item + .mwform-radio-field.horizontal-item {
	margin-left: 0;
}

.form-flex .mwform-radio-field label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
}

.form-flex .mwform-radio-field input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 6px 0 0;
	cursor: pointer;
	flex-shrink: 0;
}

.form-flex .mwform-radio-field-text {
	font-size: 14px;
	color: #333;
}

@media (min-width: 768px) {
	.form-flex .mwform-radio-field-text {
		font-size: 15px;
	}
}