/* ==========================================================================
   Contact Form 7 全体レイアウトの最適化
   ========================================================================== */

/* テーブル全体の囲み枠と余白 */
table.CF7_table {
	width: 80%;
	margin: 0 auto 30px auto;
	border: 3px solid #e5e5e5;
	border-collapse: collapse; /* 枠線の重なりをスッキリさせる */
}

/* 行ごとの区切り線 */
table.CF7_table tr {
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

/* 見出し列と入力列の共通パディング（ここで空間を均等に広げます） */
table.CF7_table th,
table.CF7_table td {
	padding: 20px 15px; /* 上下に20pxのゆとりを持たせて潰れを解消 */
	vertical-align: middle; /* 上下中央揃えに固定 */
	box-sizing: border-box;
}

/* 左側：タイトル列のスタイル */
table.CF7_table th {
	width: 30%;
	background-color: #ebedf5; /* ブルーグレーの背景 */
	text-align: left;
	font-weight: bold;
	color: #333;
}

/* 右側：入力欄のスタイル（横幅をいっぱいに広げる） */
.CF7_table input[type="text"],
.CF7_table input[type="email"],
.CF7_table textarea {
	border: 1px solid #d8d8d8;
	width: 100% !important; /* 横幅いっぱいに広げる */
	box-sizing: border-box;
	padding: 10px; /* 入力文字の周りに適度な余白 */
	font-size: 1em;
	border-radius: 4px;
}

/* プレースホルダー（薄い文字）の色 */
.CF7_table ::placeholder {
	color: #797979;
}

/* チェックボックスの選択肢（横幅100%化を無効にして横並びをキープ） */
.CF7_table input[type="checkbox"] {
	width: auto !important;
	display: inline-block;
	margin-right: 5px;
}
.CF7_table .wpcf7-list-item {
	display: inline-block;
	margin-right: 20px; /* 選択肢ごとの右側の間隔 */
	white-space: nowrap; /* 選択肢の途中で変に改行されるのを防ぐ */
}

/* ==========================================================================
   （必須）（任意）ラベルの装飾
   ========================================================================== */

/* （必須）のテキスト */
.CF7_label_req {
	font-size: 0.8em;
	color: #e2701e; /* 落ち着いたオレンジ */
	font-weight: normal;
	margin-left: 6px;
	display: inline-block;
}

/* （任意）のテキスト */
.CF7_label_unreq {
	font-size: 0.8em;
	color: #999999; /* 薄いグレー */
	font-weight: normal;
	margin-left: 6px;
	display: inline-block;
}

/* ==========================================================================
   「送信する」ボタン
   ========================================================================== */
.CF7_btn {
	text-align: center;
	margin-top: 25px;
}

.wpcf7 input.wpcf7-submit {
	background-color: #f79034; /* オレンジ */
	border: 0;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	padding: 12px 50px; /* ボタンを押しやすいサイズに */
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.wpcf7 input.wpcf7-submit:hover {
	background-color: #e2701e; /* ホバー時に少し濃く */
}

.wpcf7-spinner {
	display: none !important; /* グルグル回るスピナーの余計な隙間を排除 */
}

/* ==========================================================================
   スマホ用のレスポンシブ対応
   ========================================================================== */
@media screen and (max-width: 768px) {
	table.CF7_table {
		width: 95%;
	}
	table.CF7_table tr, 
	table.CF7_table td, 
	table.CF7_table th {
		display: block; /* スマホでは縦並びに切り替え */
		width: 100% !important;
	}
	table.CF7_table th {
		border-bottom: none;
		padding-bottom: 10px; /* スマホでは見出し下の余白を少し詰める */
	}
	table.CF7_table td {
		padding-top: 5px; /* スマホでは入力欄の上の余白を詰める */
	}
}

/* ==========================================================================
   確認画面（Multiform）専用の追加スタイル
   ========================================================================== */

/* 確認画面の入力値が入る部分の調整 */
.CF7_confirm_table .confirm-value {
	font-size: 1em;
	color: #333;
	line-height: 1.6;
	padding: 5px 0;
}

/* メッセージ本文の改行をそのまま反映させる設定 */
.CF7_confirm_table .confirm-value.pre-wrap {
	white-space: pre-wrap; /* 改行コードをブラウザ上で正しく改行させる */
	word-break: break-all; /* 長い英数字があっても枠外にはみ出さないようにする */
}

/* 「戻る」と「送信する」ボタンの横並び配置 */
.CF7_btn_confirm {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px; /* ボタン同士の間隔 */
	margin-top: 30px;
	margin-bottom: 30px;
}

/* 戻るボタンのデサイン（オレンジの送信ボタンと対になるグレー） */
.CF7_back_btn {
	background-color: #999999; /* 落ち着いたグレー */
	border: 0;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	padding: 12px 40px; /* 送信ボタンと高さを合わせる */
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.CF7_back_btn:hover {
	background-color: #777777; /* ホバー時に少し濃く */
}

/* スマホ等（768px以下）でボタンを縦並びにする場合のレスポンシブ */
@media screen and (max-width: 768px) {
	.CF7_btn_confirm {
		flex-direction: column-reverse; /* スマホでは「送信」を上、「戻る」を下にする */
		gap: 15px;
	}
	.CF7_back_btn,
	.CF7_btn_confirm .wpcf7-submit {
		width: 100% !important; /* スマホではボタンを横幅いっぱいに */
		box-sizing: border-box;
	}
}