/**
 * Contact Form 7 の見た目を、既存デザイン（元サイトのフォームCSS）に合わせる。
 *
 * CF7 はチェックボックス・同意欄を独自の入れ子構造で出力するため
 * （<span class="wpcf7-form-control-wrap"><span class="wpcf7-form-control">
 *   <span class="wpcf7-list-item"><label><input>...<span class="wpcf7-list-item-label">
 *   という3階層）、既存の c-consultation-list / c-consultation-list-item
 *   （元サイト由来、直接の flex 子であることを前提にしたCSS）がそのままでは効かない。
 * ここでは CF7 が実際に出力する構造に対して、同じ見た目になるよう
 * 上書きする。値は c-consultation-list-item / p-consultation__sec2-text-6 等
 * 既存の対応クラスから転記している。
 */

/* ---------- チェックボックス群（ご希望の働き方 等） ---------- */
.c-consultation-list .wpcf7-form-control-wrap {
	display: contents;
}
.c-consultation-list .algo-cf7-checkbox-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
}
.c-consultation-list .wpcf7-list-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	padding: 0;
}
.c-consultation-list .wpcf7-list-item label {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	transition: background 0.2s;
}
.c-consultation-list .wpcf7-list-item label:hover {
	background: #fafafa;
}
.c-consultation-list .wpcf7-list-item input[type='checkbox'] {
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0 10px 0 0;
}
.c-consultation-list .wpcf7-list-item-label {
	color: var(--an-color-text);
	font-family: var(--an-font-base);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

/* ---------- 同意チェックボックス（プライバシーポリシー・利用規約） ---------- */
[data-name='agreement'] {
	display: block;
	width: 100%;
}
[data-name='agreement'] .wpcf7-list-item {
	display: block;
	margin: 0;
}
[data-name='agreement'] label {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	cursor: pointer;
}
[data-name='agreement'] input[type='checkbox'] {
	flex: none;
	width: auto;
	height: auto;
	margin: 0 10px 0 0;
}
[data-name='agreement'] .wpcf7-list-item-label {
	color: var(--an-color-text);
	font-family: var(--an-font-base);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
}

/* ---------- バリデーションエラー・送信結果メッセージ ---------- */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #c0392b;
	font-family: var(--an-font-base);
	font-size: 13px;
}
.wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 14px 18px !important;
	border-radius: 8px !important;
	font-family: var(--an-font-base);
	font-size: 14px;
}
form.invalid .wpcf7-response-output,
form.failed .wpcf7-response-output,
form.aborted .wpcf7-response-output {
	border: 1px solid #c0392b !important;
	color: #c0392b;
	background: #fdf1f0;
}
form.sent .wpcf7-response-output {
	border: 1px solid var(--an-color-brand) !important;
	color: var(--an-color-brand);
	background: var(--an-color-surface-green);
}

/* 入力欄がエラーの場合、既存の枠線色（アクセント色）を流用して視認性を上げる */
.wpcf7-form-control.wpcf7-not-valid {
	border-color: #c0392b !important;
}

/* CF7標準の送信中スピナーは既存デザインに無い要素のため、位置だけ調整して馴染ませる */
.wpcf7-spinner {
	margin: 0 0 0 12px;
}