.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
	word-break: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: 3em 0.5em 1em;
	padding: 0.2em 1em;
	text-align: center;
	font-size: 1.2em;
	color: var(--accent-terracotta);
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-not-valid-tip {
	color: #dc3232;
	/* Red */
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative;
	top: -2ex;
	left: 1em;
	z-index: 100;
	border: 1px solid #dc3232;
	background: #fff;
	padding: .2em .8em;
	width: 24em;
}

.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	background-color: #23282d;
	/* Dark Gray 800 */
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
}

form.submitting .wpcf7-spinner {
	visibility: visible;
}

.wpcf7-spinner::before {
	content: '';
	position: absolute;
	background-color: #fbfbfc;
	/* Light Gray 100 */
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border: none;
	border-radius: 100%;
	transform-origin: 8px 8px;
	animation-name: spin;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: blink;
		animation-duration: 2000ms;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes blink {
	from {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wpcf7 [inert] {
	opacity: 0.5;
}

.wpcf7 input[type="file"] {
	cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr;
}

.wpcf7-reflection>output {
	display: list-item;
	list-style: none;
}

.wpcf7-reflection>output[hidden] {
	display: none;
}

/* === 入力欄：Chromeオートフィルの青/黄背景を消す === */
.wpcf7-form input:-webkit-autofill,
.wpcf7-form input:-webkit-autofill:hover,
.wpcf7-form input:-webkit-autofill:focus,
.wpcf7-form textarea:-webkit-autofill,
.wpcf7-form select:-webkit-autofill {
	/* 背景を白に見せる（オートフィル背景を内側シャドウで覆う裏ワザ） */
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: #1c1c1b !important;
	/* 文字色も戻す */
	caret-color: #1c1c1b;
	transition: background-color 9999s ease-in-out 0s;
	/* 一瞬青くなるのも防ぐ */
}

/* === 入力欄のプレースホルダー文字色 === */
.form-board-wrapper input::placeholder,
.form-board-wrapper textarea::placeholder {
	color: #CCC3BA;
	opacity: 1;
	/* Firefoxで薄くならないように固定 */
}

.wpcf7-form-control-wrap select {
	color: #CCC3BA;

}

@media (max-width: 600px) {
	.wpcf7 form .wpcf7-response-output {
		font-size: 1em;
	}
}

/* ==========================================================================
   プルダウン選択後の文字色切り替え（未選択時はグレー、選択後は濃い色）
   ========================================================================== */

/* 1. まず、プルダウン全体の基本色を「選択後の濃い色」にする */
.form-board-wrapper select {
    color: #000000 !important; /* Figmaカンプに合わせた濃い文字色 */
}

/* 2. 最初の「選択してください」が選ばれている時（初期状態）だけ、薄いグレーにする */
.form-board-wrapper select:has(option:first-child:checked) {
    color: #CCC3BA !important;
}

/* 3. スマホや一部ブラウザで、ドロップダウンの中身が白文字化するのを防ぐ */
.form-board-wrapper select option {
    color: #000000;
    background-color: #ffffff;
}

/* ==========================================================================
   送信ボタンを押す前は、フライングのエラー（赤字・赤枠）を絶対に表示しない
   ========================================================================== */

/* 1. 送信エラー状態（.invalid）になるまでは、赤字のメッセージを強制非表示 */
.wpcf7-form:not(.invalid) .wpcf7-not-valid-tip {
    display: none !important;
}

/* 2. 送信エラー状態になるまでは、入力欄が赤枠になるのを防ぐ（通常のグレーに戻す） */
.wpcf7-form:not(.invalid) input.wpcf7-not-valid,
.wpcf7-form:not(.invalid) textarea.wpcf7-not-valid,
.wpcf7-form:not(.invalid) select.wpcf7-not-valid {
    border-color: rgba(28, 28, 27, 0.12) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   すべての入力欄のホバー時・フォーカス時のデザインを完全に統一
   ========================================================================== */

/* マウスを乗せた時（:hover）と、クリックして入力中の時（:focus） */
.form-board-wrapper input.wpcf7-form-control:hover,
.form-board-wrapper input.wpcf7-form-control:focus,
.form-board-wrapper textarea.wpcf7-form-control:hover,
.form-board-wrapper textarea.wpcf7-form-control:focus,
.form-board-wrapper select.wpcf7-form-control:hover,
.form-board-wrapper select.wpcf7-form-control:focus {
    border-color: var(--accent-terracotta) !important; /* テラコッタ色の枠線 */
    box-shadow: 0 0 0 4px rgba(222, 106, 65, 0.06) !important; /* 周りのふわっとした上品な影 */
    outline: none !important;
}

/* ==========================================================================
   CF7の自動挿入タグ（p, br）を完全に無力化して中央揃えにする決定版
   ========================================================================== */

/* 1. 同意エリア全体をFlexboxで中央寄せ */
.form-agreement-zone {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 36px 0 !important;
}

/* 2. 送信ボタンエリア全体をFlexboxで中央寄せ */
.form-submit-axis {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 36px !important;
}

/* 3. 🔥【最重要】CF7が勝手に入れる <p> タグをレイアウト上「存在しないもの」として扱う */
.form-agreement-zone p,
.form-submit-axis p {
    display: contents !important; /* これで重なりや枠外へのはみ出しが完全に消えます */
}

/* 4. チェックボックスの箱自体を一行で綺麗に中央に収める */
.checkbox-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    gap: 12px; /* チェックボックスと文字の間の隙間 */
}

/* 5. ラベルの中で悪さをしている不要な改行（br）を完全に消す */
.form-agreement-zone br,
.form-submit-axis br {
    display: none !important;
}

/* 6. 送信ボタン自体の横幅と中央配置の固定 */
.form-submit-btn {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
}