/**
 * CF7 のエラー可視化スタイル。
 * 記事や既存レイアウトに影響しないよう、セレクタは必ず .wpcf7 配下に閉じる。
 */

/* ── フォーム先頭のエラーサマリー ── */
.wpcf7 .hiro-err-summary {
	border: 2px solid #e02b2b;
	background: #fff5f5;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 18px;
	outline: none;
}

.wpcf7 .hiro-err-summary .hiro-err-head {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.5;
	color: #b91c1c;
}

.wpcf7 .hiro-err-summary .hiro-err-head::before {
	content: "\26A0";		/* ⚠ 画像を足さずに済ませる */
	margin-right: 6px;
}

.wpcf7 .hiro-err-summary ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpcf7 .hiro-err-summary li {
	margin: 4px 0;
	padding: 0;
}

.wpcf7 .hiro-err-summary li::before {
	content: "\2192";		/* → */
	color: #b91c1c;
	margin-right: 6px;
}

/* テーマ側のリンク色（#bmd a 等、IDを含む高い詳細度）に負けるため !important で上書きする */
.wpcf7 .hiro-err-summary .hiro-err-jump {
	color: #b91c1c !important;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none !important;
	border-bottom: 1px dotted #b91c1c;
}

.wpcf7 .hiro-err-summary .hiro-err-jump:hover,
.wpcf7 .hiro-err-summary .hiro-err-jump:focus {
	background: #fee2e2;
}

/**
 * サマリーを出しているときは、CF7標準の「入力内容に問題があります」帯を隠す。
 * 同じことをより具体的に伝えるサマリーが直上にあり、二重表示は迷わせるだけのため。
 * サマリーを消すとき（送信成功時など）にクラスも外すので、他ステータスの表示は残る。
 */
.wpcf7 form.hiro-has-summary > .wpcf7-response-output {
	display: none;
}

/* ── 該当行のハイライト ── */
.wpcf7 tr.hiro-row-error > th {
	background: #fff1f2;
	box-shadow: inset 4px 0 0 #e02b2b;
}

.wpcf7 tr.hiro-row-error > td {
	background: #fff8f8;
}

/* テーブル外のフォーム用フォールバック */
.wpcf7 .hiro-field-error {
	display: block;
	padding: 6px;
	background: #fff8f8;
	box-shadow: inset 4px 0 0 #e02b2b;
	border-radius: 4px;
}

/**
 * ── セレクトと電話番号欄を、他の入力欄と同じ見た目・大きさに揃える ──
 *
 * セレクト: ブラウザ既定は高さ26px（SPでは22px）しかなく、隣のテキスト入力（45px）と
 *   揃わないうえ、スマホではタップ領域として小さすぎる。他フォーム（メール相談・英検）の
 *   セレクトまで変えないよう、フォーム定義で class:hiro-select を付けた要素に限定する。
 *
 * 電話番号: テーマのCSSは input[type="text"] と [type="email"] にしか幅を指定しておらず、
 *   [type="tel"] が漏れていたため、ブラウザ既定（size=40 → 410x25px）のまま残っていた。
 *   資料請求・カウンセリング・英検で同じ症状が出ているので、CF7全体に効かせる。
 */
.wpcf7 select.hiro-select,
.wpcf7 input[type="tel"] {
	width: 100%;
	height: 45px;
	padding: 10px;
	font-size: 19px;
	font-family: inherit;
	line-height: 1.3;
	color: #333;
	background-color: #fff;
	border: 1px solid #f5f4f4;
	border-radius: 0;
	box-sizing: border-box;
}

.wpcf7 select.hiro-select:focus,
.wpcf7 input[type="tel"]:focus {
	outline: 2px solid #020352;
	outline-offset: -2px;
}

@media screen and (max-width: 640px) {
	.wpcf7 select.hiro-select,
	.wpcf7 input[type="tel"] {
		font-size: 16px;		/* iOSで16px未満だとフォーカス時に自動ズームする */
		height: 44px;
	}
}

/**
 * ── 送信ボタンの位置とサイズ ──
 *
 * 位置: CF7 はボタンの直後にスピナー <span class="wpcf7-spinner"> を出力する。
 *   これが visibility:hidden かつ margin:0 24px なので、非表示でも 24+48=72px の場所を
 *   占め、中央寄せしたはずのボタンが 36px 左へずれていた（全フォームで発生）。
 *   送信中（form.submitting）以外は場所ごと消す。
 *
 * サイズ: 主ボタンが 199x36px しかなく、副次的な「選択に戻る」(149x44px) より小さい
 *   という逆転が起きていた。指で押せる大きさにし、主従関係を見た目に反映する。
 */
.wpcf7 form:not(.submitting) .wpcf7-spinner {
	display: none;
}

/**
 * style.css は 640px以下で form.wpcf7-form の padding を左0・右10pxにしており、
 * フォームの中身全体が5pxだけ左に寄って「選択に戻る」と中心が揃っていなかった。
 * 641px以上は 40px/40px で対称なので、SPのときだけ左右を揃える（実測で確認済み）。
 */
@media screen and (max-width: 640px) {
	.wpcf7 form.wpcf7-form {
		padding-left: 10px;
	}
}

.wpcf7 .sendbuttun {
	margin: 28px 0 0;		/* テーマの margin-left:10px による左寄りも打ち消す */
	text-align: center;
}

.wpcf7 .sendbuttun input[type="submit"] {
	min-width: 300px;
	max-width: 100%;
	min-height: 56px;
	padding: 0 32px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .04em;
	border-radius: 999px;		/* 資料請求ページの .doc-btn と同じ意匠 */
	box-shadow: 0 4px 14px rgba(2, 3, 82, .22);
	transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* 背景色はページごとにテーマ側で異なる（資料請求・カウンセリングは #a00028）。
   色を決め打ちせず filter で暗くするので、どのフォームでも破綻しない。 */
.wpcf7 .sendbuttun input[type="submit"]:hover {
	filter: brightness(.9);
	box-shadow: 0 6px 18px rgba(2, 3, 82, .3);
	transform: translateY(-1px);
}

.wpcf7 .sendbuttun input[type="submit"]:focus-visible {
	outline: 3px solid #020352;
	outline-offset: 3px;
}

@media screen and (max-width: 640px) {
	.wpcf7 .sendbuttun input[type="submit"] {
		width: 100%;
		min-width: 0;
		min-height: 54px;
		font-size: 16px;
	}
}

/**
 * ── 見出し行の整理 ──
 *
 * 「必須／任意」バッジが項目名と別の行に置かれ、1項目あたり2行ぶんの高さを
 * 使っていた。バッジを項目名と同じ行に並べ、余白も詰める。
 *
 * 見出し列は、最長の項目名（当塾を知ったきっかけ＝176px）＋バッジ（41px）＋余白が
 * 1行に収まる幅を確保する。既定の216pxでは3項目が2行に折り返していた。
 */
.wpcf7 table.inquiry th {
	width: 282px !important;
	vertical-align: top;
	padding: 14px !important;
	line-height: 1.5;
}

/* タブレット域は入力欄の幅も確保したいので、項目名を1段小さくして列幅を詰める */
@media screen and (min-width: 641px) and (max-width: 900px) {
	.wpcf7 table.inquiry th {
		width: 248px !important;
	}

	.wpcf7 table.inquiry th,
	.wpcf7 table.inquiry th > div,
	.wpcf7 table.inquiry th > div > p {
		font-size: 13px;
	}
}

/**
 * wpautop がフォームの中身を <p> で包み、その margin-bottom:25.6px が
 * バッジ・項目名・入力欄のまわりに大きな空きを作っていた。
 * 見出し側は <p>/<div> をインライン化して1行にまとめ、余白を消す。
 */
.wpcf7 table.inquiry th > p,
.wpcf7 table.inquiry th > div,
.wpcf7 table.inquiry th > div > p {
	display: inline;
	margin: 0;
	padding: 0;
}

.wpcf7 table.inquiry th .haveto,
.wpcf7 table.inquiry th .any {
	display: inline-block;
	vertical-align: 1px;
	margin: 0 8px 0 0;
}

.wpcf7 table.inquiry th br {
	display: none;
}

.wpcf7 table.inquiry td {
	vertical-align: top;
	padding: 12px 14px;
}

/* テーマの #bmd p に margin-bottom:25.6px があり、入力欄の下に空きが残るため打ち消す */
.wpcf7 table.inquiry td > p {
	margin: 0 !important;
}

.wpcf7 table.inquiry td > p + p {
	margin-top: 10px !important;
}

/* 補足文（入力欄の下）は詰めて、入力欄との関係が分かるようにする */
.wpcf7 table.inquiry td .nomust {
	margin: 6px 0 0;
	line-height: 1.6;
}

/**
 * ── スマホでは見出しと入力欄を縦に積む ──
 *
 * 2列のままだと見出し列に101px取られ、入力欄が205pxしか残らない。
 * 「1-2 ハイライフホーム早稲田」のような住所が入りきらず、
 * 入力した内容を目視で確認できなかった。縦積みにして全幅を使う。
 */
/* テーマ側が #bmd 付きのID詳細度で幅と余白を決めているため !important で上書きする */
@media screen and (max-width: 640px) {
	.wpcf7 table.inquiry,
	.wpcf7 table.inquiry tbody,
	.wpcf7 table.inquiry tr,
	.wpcf7 table.inquiry th,
	.wpcf7 table.inquiry td {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		box-sizing: border-box !important;
		height: auto !important;
	}

	.wpcf7 table.inquiry th {
		padding: 10px 12px 6px !important;
		background: #f2f3f7 !important;
		border: none !important;
	}

	.wpcf7 table.inquiry td {
		padding: 10px 12px 16px !important;
		background: transparent !important;
		border: none !important;
	}

	.wpcf7 table.inquiry tr {
		border-bottom: 1px solid #e4e4ec !important;
	}

	/* 見出しの「必須／任意」バッジと項目名を1行に収める */
	.wpcf7 table.inquiry th > div {
		display: inline !important;
		margin: 0 0 0 6px !important;
	}

	.wpcf7 table.inquiry th br {
		display: none !important;
	}

	/* 補足文は入力欄との間隔を詰める */
	.wpcf7 table.inquiry td .nomust {
		margin: 6px 0 0 !important;
	}
}

/**
 * ── 郵便番号から自動入力された住所 ──
 * 手入力する欄と見分けがつくよう、背景を落として「自動入力」であることを示す。
 */
.wpcf7 .h-adr input[data-hiro-locked="1"] {
	background-color: #f2f3f7;
	color: #444;
}

.wpcf7 .h-adr input[readonly][data-hiro-locked="1"] {
	cursor: default;
}

/* ── CF7 標準のエラー文字が小さすぎて読み飛ばされるので底上げする ── */
.wpcf7 .wpcf7-not-valid-tip {
	font-size: 14px;
	font-weight: 700;
	color: #b91c1c;
	margin-top: 4px;
}

@media screen and (max-width: 640px) {
	.wpcf7 .hiro-err-summary {
		padding: 12px;
	}

	.wpcf7 .hiro-err-summary .hiro-err-head {
		font-size: 14px;
	}
}