@charset "UTF-8";
/*
 * 相談フォームの見た目の調整（子テーマ側の上書き）
 *
 * ★親テーマ（emanon-pro/style.css）を直接直さないこと。
 *   あちらは ?ver=5.4.19 の固定クエリで読まれており、中身を変えても
 *   ブラウザが古い CSS を使い続ける（子テーマの style.css も同じ ver）。
 *   このファイルは functions.php 側で filemtime を ver にして読み込むので、
 *   直せば必ず配信が切り替わる。
 */

/*----------------------------------------------------------------------------------*/
/* ★★td の display:flex をやめる（2026-09-10・鈴木さん指摘）
 *
 * 親テーマは「入力欄と単位を横並びに固定」する目的で
 * `td:has(.age-input), td:has(.income-input) { display:flex }` を掛けている。
 * だが **td を flex にするとテーブルのセルとして扱われなくなり、列幅の計算から外れる**。
 * その結果ご年齢・ご自身の年収の行だけ td の左端が 1px ずれ、
 * **ラベル列との枠線が食い違って見えていた**（実測：他の行 493px / flex の行 494px）。
 *
 * 単位（歳・万円）は input の後ろのインライン要素なので、
 * table-cell に戻しても横並びのままになる。
 * ★入力欄の幅（.age-input=100px / .income-input=150px）は親のまま。変えない。
 */
.mw_wp_form td:has(.age-input),
.mw_wp_form td:has(.income-input) {
	display: table-cell !important;
}

/* flex 前提だった子要素の指定も戻す（エラー文は入力欄の下の行に出す） */
.mw_wp_form td:has(.age-input) .error,
.mw_wp_form td:has(.income-input) .error {
	display: block;
}

/*----------------------------------------------------------------------------------*/
/* スマホで相手方の年齢だけ横に伸びて単位「歳」が改行される件（2026-09-10・鈴木さん指摘）
 *
 * 親テーマはスマホ幅で `input[type="text"] { width:100% }` を掛けている。
 * ご年齢・ご自身の年収は type="number" なので該当しないが、
 * **相手方の年齢は「不明」と書けるように text へ変えたため該当してしまい**、
 * 欄が画面幅いっぱいに伸びて単位が次の行へ落ちていた。
 * ご年齢と同じ幅に揃える。
 */
@media screen and (max-width: 768px) {
	/* ★詳細度に注意。親は `.mw_wp_form input[type="text"]`（クラス2＋要素1）で
	   `.mw_wp_form .age-input`（クラス2）より強い。どちらも !important なので
	   詳細度で負ける。**属性セレクタを重ねて上回らせる**。 */
	.mw_wp_form input[type="text"].age-input {
		width: 100px !important;
		max-width: 100px !important;
	}
}