/* =========================================================
   お問い合わせページ専用スタイル（page-contact.php）
   クラス名はすべて.p-contact-*で、他ページのCSSとは完全に分離している。
   フォーム本体はContact Form 7が出力するマークアップ（.wpcf7-*）を
   このファイル内でスタイリングしている（独自フォームは作らない）。
========================================================= */
.p-contact__wrap {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: 40px;
}

/* ---------- ヘッダー（CONTACT・お問い合わせ・リード文） ---------- */
.p-contact-header {
	background: var(--wp--preset--color--base-alt);
	padding-top: 64px;
	padding-bottom: 24px;
}
.p-contact-header__label {
	display: block;
	color: var(--wp--preset--color--river);
	margin-bottom: 12px;
}
.p-contact-header__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.4;
	margin-bottom: 20px;
}
.p-contact-header__lead {
	font-size: 15px;
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
}
.p-contact-header__lead + .p-contact-header__lead {
	margin-top: 12px;
}

/* ---------- フォームセクション全体 ---------- */
.p-contact-form-section {
	background: var(--wp--preset--color--base-alt);
	padding-top: 24px;
	padding-bottom: 80px;
}
.p-contact-form__placeholder {
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 4px;
	padding: 24px;
}

/* ---------- フォーム本体（Contact Form 7の出力をスタイリング） ---------- */
.p-contact-form .wpcf7-form {
	margin: 0;
}
.p-contact-form__field {
	margin-bottom: 28px;
}
.p-contact-form__field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin-bottom: 8px;
}
.p-contact-form__required,
.p-contact-form__optional {
	display: inline-block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.05em;
	border-radius: 3px;
	padding: 2px 6px;
	margin-left: 6px;
	vertical-align: middle;
}
.p-contact-form__required {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--forest);
}
.p-contact-form__optional {
	color: var(--wp--preset--color--ink-soft);
	border: 1px solid var(--wp--preset--color--sand);
}

/* input / select / textarea 共通 */
.p-contact-form .wpcf7-form-control:not([type="submit"]) {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 4px;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--noto-sans-jp);
	font-size: 15px;
	color: var(--wp--preset--color--ink);
	transition: border-color 0.2s ease;
}
.p-contact-form select.wpcf7-form-control {
	appearance: auto;
	background-color: var(--wp--preset--color--base);
}
.p-contact-form textarea.wpcf7-form-control {
	min-height: 180px;
	resize: vertical;
	line-height: 1.8;
}
.p-contact-form .wpcf7-form-control:not([type="submit"]):focus {
	outline: none;
	border-color: var(--wp--preset--color--forest);
}

/* プライバシーポリシー同意（acceptance） */
.p-contact-form__field--acceptance {
	display: flex;
	align-items: flex-start;
}
.p-contact-form__field--acceptance .wpcf7-acceptance {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}
.p-contact-form__field--acceptance input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--wp--preset--color--forest);
	flex-shrink: 0;
}
.p-contact-form__acceptance-text {
	font-size: 13px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink);
}
.p-contact-form__acceptance-text a {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
}

/* 送信ボタン
   フォーム側では[submit class:c-btn "送信する"]として共通ボタン.c-btnの見た目（アウトライン）を
   適用しているが、Contact Form 7のタグは`class:`オプションを2つ以上書くと両方無視されてしまうため
   （動作確認済み）、.is-solid相当の塗りつぶしはここで直接指定し、既存の.c-btn.is-solidと同じ配色・
   ホバー挙動に揃えている（base.cssの.c-btn.is-solid自体は変更していない）。 */
.p-contact-form__submit {
	margin-top: 40px;
}
.p-contact-form .wpcf7-submit {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	min-width: 200px;
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--forest);
}
.p-contact-form .wpcf7-submit:hover:not(:disabled) {
	background: var(--wp--preset--color--river);
	border-color: var(--wp--preset--color--river);
}
.p-contact-form .wpcf7-submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.p-contact-form .wpcf7-spinner {
	margin-left: 12px;
}

/* ---------- バリデーションエラー ---------- */
.p-contact-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wp--preset--color--clay);
}
.p-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--wp--preset--color--clay);
}

/* ---------- 送信結果メッセージ（Messagesタブの文言を表示する領域） ---------- */
.p-contact-form .wpcf7-response-output {
	margin: 32px 0 0;
	padding: 16px 20px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.8;
	border: 1px solid var(--wp--preset--color--sand);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}
.p-contact-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--forest);
	background: color-mix(in srgb, var(--wp--preset--color--forest) 6%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--forest);
}
.p-contact-form .wpcf7-form.invalid .wpcf7-response-output,
.p-contact-form .wpcf7-form.failed .wpcf7-response-output,
.p-contact-form .wpcf7-form.aborted .wpcf7-response-output,
.p-contact-form .wpcf7-form.spam .wpcf7-response-output {
	border-color: var(--wp--preset--color--clay);
	background: color-mix(in srgb, var(--wp--preset--color--clay) 6%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--clay);
}

@media (max-width: 768px) {
	.p-contact__wrap {
		padding-inline: 20px;
	}
	.p-contact-header {
		padding-top: 48px;
		padding-bottom: 20px;
	}
	.p-contact-header__heading {
		font-size: 22px;
		margin-bottom: 16px;
	}
	.p-contact-form-section {
		padding-bottom: 56px;
	}
	.p-contact-form__field {
		margin-bottom: 24px;
	}
	.p-contact-form .wpcf7-submit {
		width: 100%;
	}
}