/**
 * tn-form.css : フォーム部品の共通基盤（とーんと♡日本橋）
 *
 *   狙い＝「どのプラグインで・誰が新しいフォームを作っても、SPで横に溢れない・
 *   サイトのトーンで表示される」状態を、クラス名に依存せず素の要素セレクタで担保する。
 *   mw-wp-form / Contact Form 7 / 手書きの <form> のどれでも同じ土台が当たる。
 *
 *   詳細度は原則すべて :where() で 0 に落としてある。
 *     ・ブラウザ既定（input の size 属性由来の幅など）には勝つ → 横溢れが起きない
 *     ・クラス指定の個別デザイン（.tn-gl-search__input 等）には必ず負ける → 既存を壊さない
 *   新しいフォームを足す時にCSSを書かなくても崩れず、書けば自由に上書きできる。
 *
 *   読み込み：inc/site-shell.php（記事・固定ページの文脈で常時）
 */

/* =====================================================================
   1. 入力欄の土台（横溢れの根絶）
      size 属性やブラウザ既定幅で親を突き破らないよう、幅を親に従わせる。
      ===================================================================== */
:where(
	.site-main input[type="text"],
	.site-main input[type="email"],
	.site-main input[type="tel"],
	.site-main input[type="url"],
	.site-main input[type="number"],
	.site-main input[type="password"],
	.site-main input[type="date"],
	.site-main input[type="time"],
	.site-main input[type="search"],
	.site-main select,
	.site-main textarea
) {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid #d9d3c9;
	border-radius: 3px;
	background-color: #fff;
	color: #1a1a1a;
	font-family: inherit;
	font-size: 16px; /* 16px 未満だと iOS が入力時に自動ズームする */
	line-height: 1.6;
	appearance: none;
	-webkit-appearance: none;
}

/* select だけは開閉のネイティブ表示を残す（矢印はブラウザに描かせる＝機能インジケータ） */
:where(.site-main select) {
	appearance: auto;
	-webkit-appearance: auto;
	padding-right: 8px;
}

:where(.site-main textarea) {
	min-height: 180px;
	resize: vertical;
	line-height: 1.8;
}

:where(.site-main input::placeholder, .site-main textarea::placeholder) {
	color: #a9a09a;
}

/* フォーカスは輪郭で示す（機能インジケータ。§8の許容範囲） */
:where(
	.site-main input:focus,
	.site-main select:focus,
	.site-main textarea:focus
) {
	outline: 2px solid #b8242b;
	outline-offset: 1px;
	border-color: #b8242b;
}

:where(
	.site-main input:disabled,
	.site-main select:disabled,
	.site-main textarea:disabled
) {
	background-color: #f7f4ee;
	color: #6b625c;
}

/* =====================================================================
   2. ラベル・チェックボックス・ラジオ
      ===================================================================== */
:where(.site-main form label) {
	display: block;
	margin-bottom: 6px;
	color: #1a1a1a;
	font-weight: 700;
	line-height: 1.6;
}

/*
 * wpautop はショートコードを次行に書いた本文で、ラベル直後に <br> を差し込む。
 * label を block にしている以上そのままだと改行が二重になり、ラベルと入力欄が離れて見える。
 */
:where(.site-main form label + br) {
	display: none;
}

:where(
	.site-main input[type="checkbox"],
	.site-main input[type="radio"]
) {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	flex: 0 0 auto;
	accent-color: #b8242b;
	vertical-align: -3px;
	cursor: pointer;
}

/* 選択肢は「四角＋文言」を1行の塊として折り返す */
:where(.site-main .mwform-checkbox-field, .site-main .mwform-radio-field) {
	display: inline-flex;
	align-items: flex-start;
	margin: 0 16px 8px 0;
	font-weight: 400;
	line-height: 1.7;
}

:where(.site-main .mwform-checkbox-field label, .site-main .mwform-radio-field label) {
	display: inline;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

/* 縦積み指定のときは1件ずつ改行 */
:where(.site-main .vertical-item) {
	display: flex;
	align-items: flex-start;
	margin: 0 0 8px;
}

/* =====================================================================
   3. 送信ボタン
      純黒は使わない。ブランドの朱色を要所（送信）にだけ乗せる。

      ここだけ :where() を外して実詳細度を持たせている。理由＝reset.css の
      `button { background: none; border: none; }`（詳細度 0,0,1）が 0 に勝ってしまい、
      :where() のままだと地色も枠も付かず素のテキストになるため。
      代わりに「プラグインが出力するフォーム枠の内側」へ限定し、
      ヘッダー検索・ドロワー開閉・カルーセル送りなど他のボタンには波及させない。
      ===================================================================== */
.site-main .mw_wp_form button[type="submit"],
.site-main .mw_wp_form input[type="submit"],
.site-main .wpcf7-form button[type="submit"],
.site-main .wpcf7-form input[type="submit"],
:where(.site-main form:not([role="search"])) button[type="submit"],
:where(.site-main form:not([role="search"])) input[type="submit"] {
	display: inline-block;
	min-width: 220px;
	max-width: 100%;
	padding: 14px 32px;
	border: 0;
	border-radius: 3px;
	background-color: #b8242b;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.site-main .mw_wp_form button[type="submit"]:hover,
.site-main .mw_wp_form input[type="submit"]:hover,
.site-main .wpcf7-form button[type="submit"]:hover,
.site-main .wpcf7-form input[type="submit"]:hover,
:where(.site-main form:not([role="search"])) button[type="submit"]:hover,
:where(.site-main form:not([role="search"])) input[type="submit"]:hover {
	background-color: #9e1a20;
}

/* 「戻る・修正する」は副次操作なので地色を落とす */
.site-main .mw_wp_form button[name="submitBack"],
.site-main .mw_wp_form input[name="submitBack"],
.site-main .mw_wp_form .Back {
	background-color: #f7f4ee;
	color: #1a1a1a;
	border: 1px solid #d9d3c9;
}

.site-main .mw_wp_form button[name="submitBack"]:hover,
.site-main .mw_wp_form input[name="submitBack"]:hover,
.site-main .mw_wp_form .Back:hover {
	background-color: #efe9e0;
}

/* =====================================================================
   4. エラー・注意の表示（mw-wp-form / Contact Form 7 共通）
      ===================================================================== */
:where(
	.site-main .error,
	.site-main .mw-wp-form_error,
	.site-main .wpcf7-not-valid-tip
) {
	display: block;
	margin-top: 6px;
	color: #b8242b;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.6;
}

:where(.site-main .wpcf7-response-output) {
	margin: 16px 0 0;
	padding: 12px 16px;
	border: 1px solid #d9d3c9;
	border-radius: 3px;
	background-color: #f7f4ee;
	font-size: 0.95rem;
	line-height: 1.7;
}

/* 確認画面：入力値は文字として読ませる */
:where(.mw_wp_form_confirm .site-main .mwform-tel-field, .mw_wp_form_confirm .site-main .mwform-zip-field) {
	display: inline;
}

/* =====================================================================
   5. お問い合わせフォームの並び（mw-wp-form ID 7 の骨格に対応）
      本文側のクラス（Inquiry-*）は旧テーマ由来。受け皿をここで用意する。
      ===================================================================== */
.site-main .Inquiry-formContent,
.site-main .Inquiry-lastContent {
	margin: 0 0 22px;
}

.site-main .Inquiry-formContent > label,
.site-main .Inquiry-lastContent label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.site-main .Inquiry-select select {
	width: auto;
	min-width: 260px;
	max-width: 100%;
}

.site-main .Inquiry-lastContent .agree,
.site-main .Inquiry-lastContent .mwform-checkbox-field {
	margin-top: 4px;
}

/* ボタン列：SPでは縦、PCでは横に並べる */
.site-main .ButtonConfirm,
.site-main .Inquiry-buttonRow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.site-main .Button {
	min-width: 220px;
}

@media screen and (max-width: 600px) {
	.site-main .Button {
		width: 100%;
		min-width: 0;
	}

	/* rows 指定そのままだと SP で入力欄が画面の4割を占めるので、密度を優先して抑える */
	:where(.site-main textarea) {
		height: 200px;
	}
}