/* Contact Form 7 の出力を design/contact.html のフォーム(.ct 系)と同じ見た目に合わせる橋渡しCSS。
   design 正本のCSS(page-contact.css)は変更せず、CF7固有クラスへの補完だけをここに書く(実装仕様.md 4節)。
   ※ input/textarea/select の基本装飾は共通CSSの要素セレクタがそのまま効く。 */

/* フォーム全体を design の form.ct と同じ縦積みレイアウトに。 */
.wpcf7 form.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* CF7 が入力要素を包む span を、design の入力欄と同じく幅100%のブロックにする。 */
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* 送信ボタン(input[type=submit].btn)の微調整。共通CSSの .btn がベース。 */
.wpcf7 .btn {
	align-self: flex-start;
}

/* 送信完了・エラーメッセージを design の .done と同じ見た目に。 */
.wpcf7-response-output {
	margin: 8px 0 0 !important;
	background: var(--rose-soft);
	border: 1px solid var(--rose) !important;
	border-radius: 16px;
	padding: 24px 26px !important;
	font-size: 15px;
	line-height: 1.8;
	color: var(--ink);
}

/* バリデーションエラー時の枠色。 */
.wpcf7-not-valid {
	border-color: var(--crimson) !important;
}

.wpcf7-not-valid-tip {
	color: var(--crimson);
	font-size: 12.5px;
	font-weight: 600;
	margin-top: 6px;
	display: block;
}