/* テーマの表示調整
   ------------------------------------------------------------------
   対象：お問い合わせフォーム（#inquiry .tbl-enquiry）と
         採用応募フォーム（.table-form）

   どちらも行と行の間の余白が 0px で、入力欄が持つ margin-bottom:20px
   だけを頼りに並んでいる。そのため「前の入力欄」と「次の項目名」が
   密着し、どこまでが1つの項目か読み取りづらい。

   余白の管理をセル側の padding に一本化して、項目のまとまりが
   見えるようにする。テーマファイルには手を入れていない。 */

/* ページ上部のバナー画像。
   11のテンプレートが ACF の値をそのまま src に書き出しており、
   値が未設定のページでは src="" となって、画像が壊れた印だけが残る。
   テンプレートを11本触るより、出さないほうが確実で影響も小さい。 */
.img-banner[src=""],
.img-banner:not([src]) {
	display: none;
}

/* 採用ページの電話リンクのアイコン。
   もとは制作会社の開発サーバーを参照していて表示されなかったため、
   自社のメディアにある電話アイコンへ差し替えた。
   そのアイコンは 33×33px あり、そのままでは文字より大きいので揃える。 */
.content-in-slider-number img {
	width: auto;
	height: 26px;
	margin-right: 10px;
	vertical-align: -5px;
}

/* 余白の出どころを1か所にするため、入力欄自身の下マージンは打ち消す */
#inquiry table.tbl-enquiry .form-control,
#inquiry table.tbl-enquiry .form-control02,
table.table-form .form-control,
table.table-form .form-control02,
table.table-form .form-control-custom {
	margin-bottom: 0;
}

/* 項目のまとまりごとに余白を取る */
#inquiry table.tbl-enquiry > tbody > tr > td,
table.table-form > tbody > tr > td {
	padding-bottom: 34px;
	vertical-align: top;
}

/* 項目名のセル。テーマの top:-8px は入力欄との高さをずらすためのものだが、
   余白を取り直したので不要になる */
#inquiry table.tbl-enquiry > tbody > tr > td:first-child,
table.table-form > tbody > tr > td:first-child {
	top: 0;
	padding-top: 8px;
}

/* 最後の行のあとは、送信ボタン側の余白に任せる */
#inquiry table.tbl-enquiry > tbody > tr:last-child > td,
table.table-form > tbody > tr:last-child > td {
	padding-bottom: 0;
}

/* 必須／任意バッジと項目名の間隔 */
#inquiry table.tbl-enquiry td span.required-blue,
#inquiry table.tbl-enquiry td span.norequired,
table.table-form td span.required-blue,
table.table-form td span.norequired {
	display: inline-block;
	margin-right: 12px;
	vertical-align: middle;
}

/* エラー文言が入力欄に重ならないようにする */
#inquiry table.tbl-enquiry .wpcf7-not-valid-tip,
table.table-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.6;
}

/* ── スマホ ─────────────────────────────────────────────
   テーマが td を display:block にして縦積みにするため、
   「項目名」と「入力欄」でそれぞれ適切な余白に振り分ける。 */

@media screen and (max-width: 767px) {

	#inquiry table.tbl-enquiry > tbody > tr > td:first-child,
	table.table-form > tbody > tr > td:first-child {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-top: 0;
		padding-bottom: 10px;
		font-size: 15px;
		line-height: 1.5;
	}

	#inquiry table.tbl-enquiry > tbody > tr > td:last-child,
	table.table-form > tbody > tr > td:last-child {
		padding-bottom: 36px;
	}

	/* テーマの height:175px では、スマホ幅だと自前のプレースホルダが
	   最終行で切れてしまうため、収まる高さを確保する */
	#inquiry table.tbl-enquiry .form-control02,
	table.table-form .form-control02 {
		height: auto;
		min-height: 240px;
	}

	/* バッジは padding:5px 30px で横幅を食いすぎるため、
	   幅を揃えたうえで項目名に場所を譲る */
	#inquiry table.tbl-enquiry td span.required-blue,
	#inquiry table.tbl-enquiry td span.norequired,
	table.table-form td span.required-blue,
	table.table-form td span.norequired {
		flex: 0 0 auto;
		min-width: 4.6em;
		margin-right: 0;
		padding: 4px 0;
		text-align: center;
		font-size: 13px;
	}

	/* 画面下部に固定表示される .fxsp-menu に隠れないよう逃げを取る */
	#inquiry {
		padding-bottom: 120px;
	}
}