@charset "utf-8";
/* ============================================================
   cf7-adjust.css
   Contact Form 7 が出力する独自マークアップ（.wpcf7-*）だけを補正する。
   index.css は一切変更しない方針のため、差分はこのファイルに集約する。
   すべて #free_consultation 配下にスコープし、他セクションへ影響させない。
   ============================================================ */

/* ------------------------------------------------------------
   1. CF7 のラッパーを透明化
   CF7 は input を <span class="wpcf7-form-control-wrap"> で包む。
   これが inline-block だと幅計算が崩れるため、素通しにする。
   ------------------------------------------------------------ */
#free_consultation .inner .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* ------------------------------------------------------------
   2. チェックボックスを縦並びに戻す
   元HTML: <div class="contact_type"> ごとに改行され縦に並んでいた。
   CF7 既定: .wpcf7-list-item { display:inline-block; margin:0 0 0 1em } で横並びになる。
   ------------------------------------------------------------ */
#free_consultation .inner .wpcf7-list-item {
	display: block;
	margin: 0 0 8px 0;
}
#free_consultation .inner .wpcf7-list-item:last-child {
	margin-bottom: 0;
}

/* use_label_element により input とテキストが <label> で包まれる。
   元は input + label の兄弟だったので、同じ行に並ぶよう調整する。 */
#free_consultation .inner .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
#free_consultation .inner .wpcf7-list-item-label {
	line-height: 1;
}

/* ------------------------------------------------------------
   3. プライバシーポリシー同意（.unit_pp）
   .unit_pp は text-align:center。list-item を block にすると
   中身が中央に寄るよう inline-block に戻す。
   ------------------------------------------------------------ */
#free_consultation .inner .unit_pp .wpcf7-form-control-wrap {
	display: inline-block;
	width: auto;
}
#free_consultation .inner .unit_pp .wpcf7-list-item {
	display: inline-block;
	margin: 0;
}

/* ------------------------------------------------------------
   4. 送信ボタン
   input[type=submit] は元CSSが当たるが、CF7 は直後に
   ローディング用の .wpcf7-spinner を挿入するため位置を整える。
   ------------------------------------------------------------ */
#free_consultation .inner .wpcf7-spinner {
	display: block;
	margin: 12px auto 0 auto;
}

/* ------------------------------------------------------------
   5. バリデーションメッセージ

   元 mail.php は入力欄の下にエラーを出さず、確認画面にエラー一覧を
   まとめて表示する方式だった。それに合わせ、CF7 が入力欄ごとに出す
   メッセージと赤枠は隠す。エラーは #confirmation 側に表示する。
   ------------------------------------------------------------ */
#free_consultation .inner .wpcf7-not-valid-tip {
	display: none;
}
#free_consultation .inner input.wpcf7-not-valid,
#free_consultation .inner textarea.wpcf7-not-valid {
	border: 1px solid #00b1b5;
	background: white;
}

#free_consultation .inner .wpcf7-response-output {
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0 0 0;
	padding: 14px 2%;
	border-radius: 5px;
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: 0;
	text-align: center;
}


/* ------------------------------------------------------------
   6. 確認画面 / 送信完了画面

   確認画面（#confirmation）と送信完了画面（#sent）のデザインは
   index.css の 635〜678行に元から入っているため、ここでは追加しない。
   元 mail.php の画面がロゴのみのヘッダーだったことに合わせて、
   ナビゲーションと固定CTAバーを隠す指定だけを持つ。
   ------------------------------------------------------------ */
body.is_confirming header .button,
body.is_confirming header #nav_group,
body.is_confirming #cta_fixed,
body.thanks_page header .button,
body.thanks_page header #nav_group,
body.thanks_page #cta_fixed {
	display: none;
}

/* 確認画面ではロゴをクリックしても遷移させない（元は静的なロゴ表示だった） */
body.is_confirming header h1 a {
	pointer-events: none;
}

/* ------------------------------------------------------------
   7. 「確認画面へ」ボタン

   input[type=button] のため index.css の input[type=submit] 指定が
   当たらない。入力画面のボタンは元HTMLと同じ見た目に揃える。
   （確認画面の2つのボタンは index.css の #confirmation 側が当たる）
   ------------------------------------------------------------ */
#free_consultation .inner input[type=button] {
	-webkit-appearance: none;
	outline: 0;
	border: 0;
	display: block;
	width: 100%;
	padding: 3% 0;
	margin: 0 auto;
	font-size: clamp(16px, 1.5vw, 30px);
	letter-spacing: 1px;
	font-weight: 600;
	color: white;
	background: #00a09e;
	border-radius: 5px;
	cursor: pointer;
}
#free_consultation .inner input[type=button]:hover {
	background: #00426c;
}
#free_consultation .inner input[type=submit] {
	cursor: pointer;
}
#confirmation input[type=button] {
	cursor: pointer;
}
#confirmation input[type=button]:disabled {
	opacity: 0.5;
	cursor: default;
}

/* ------------------------------------------------------------
   8. SP（index.css と同じ 700px ブレークポイント）
   ------------------------------------------------------------ */
@media (max-width: 700px) {
	#free_consultation .inner .wpcf7-list-item label {
		gap: 8px;
	}
	#free_consultation .inner .wpcf7-not-valid-tip {
		font-size: 13px;
	}
	#free_consultation .inner .wpcf7-response-output {
		font-size: 14px;
	}
	#free_consultation .inner input[type=button] {
		padding: 5% 0;
	}
}

/* ------------------------------------------------------------
   9. 確認画面 / 送信完了画面の縦の高さ

   これらの画面は中身が少ないため、画面の高さに満たないと
   フッターの下に余白が残ってしまう。
   セクション自体（灰色の背景部分）に最低の高さを持たせることで
   フッターを画面下まで押し下げる。

   ※ フッターと body には一切手を触れない。
      引いている数値はヘッダー(80px)＋フッターのおおよその高さ。
   ------------------------------------------------------------ */
body.thanks_page #sent,
body.is_confirming #confirmation {
	box-sizing: border-box;
	min-height: calc(100vh - 240px);
}

@media (max-width: 1050px) {
	body.thanks_page #sent,
	body.is_confirming #confirmation {
		min-height: calc(100vh - 300px);
	}
}

@media (max-width: 700px) {
	body.thanks_page #sent,
	body.is_confirming #confirmation {
		min-height: calc(100vh - 340px);
	}
}