/* ============================================================
   お問い合わせページ
   関連: doc/roadmap-contact.md（C-09）
   ============================================================ */

.contact-page {
	padding: var(--space-8) var(--space-4) var(--space-16);
	max-width: 720px;
}

.contact-page__header {
	margin-bottom: var(--space-8);
}

.contact-page__title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--space-4);
	color: var(--color-text-primary);
}

.contact-page__lead {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
	margin: 0;
}

.contact-page__notice {
	padding: var(--space-6);
	background-color: var(--color-base-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	text-align: center;
}

/* ============================================================
   フォーム本体
   ============================================================ */

.contact-form__field {
	margin-bottom: var(--space-6);
}

.contact-form__field label {
	display: block;
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-2);
	color: var(--color-text-primary);
}

.contact-form__field .required {
	display: inline-block;
	margin-left: var(--space-2);
	padding: 2px var(--space-2);
	background-color: var(--color-error);
	color: var(--color-text-inverse);
	font-size: var(--font-size-xs);
	border-radius: var(--radius-sm);
	vertical-align: middle;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-base);
	font-family: inherit;
	background-color: var(--color-base-1);
	color: var(--color-text-primary);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	box-sizing: border-box;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--color-main);
	/* color-mix で --color-main の薄色グロー（ハードコード回避） */
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-main) 18%, transparent);
}

.contact-form textarea {
	resize: vertical;
	line-height: var(--line-height-base);
	min-height: 9rem;
}

/* select の optgroup 見た目調整 */
.contact-form select optgroup {
	font-weight: var(--font-weight-bold);
	color: var(--color-text-secondary);
}

/* ハニーポット完全非表示（スクリーンリーダー含む。!important は本用途のみ許容） */
.contact-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 同意チェック */
.contact-form__consent {
	display: flex;
	align-items: center;
	margin: var(--space-6) 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.contact-form__consent input[type="checkbox"] {
	margin-right: var(--space-2);
	accent-color: var(--color-main);
}

.contact-form__consent a {
	color: var(--color-main);
	text-decoration: underline;
}

/* 送信ボタン */
.contact-form__submit {
	text-align: center;
	margin-top: var(--space-8);
}

.contact-form__submit .wpcf7-spinner {
	margin-left: var(--space-3);
	vertical-align: middle;
}

/* ============================================================
   CF7 バリデーションメッセージ
   ============================================================ */

.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--space-1);
	color: var(--color-error);
	font-size: var(--font-size-sm);
}

.wpcf7-response-output {
	margin-top: var(--space-6);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	border: 1px solid var(--color-border);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	background-color: color-mix(in srgb, var(--color-error) 8%, transparent);
	border-color: var(--color-error);
	color: var(--color-error);
}

.wpcf7 form.sent .wpcf7-response-output {
	background-color: color-mix(in srgb, var(--color-success) 8%, transparent);
	border-color: var(--color-success);
	color: var(--color-success);
}

/* ============================================================
   注意事項セクション
   ============================================================ */

.contact-page__notes {
	margin-top: var(--space-12);
	padding: var(--space-6);
	background-color: var(--color-base-2);
	border-radius: var(--radius-lg);
}

.contact-page__notes-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--space-3);
	color: var(--color-text-primary);
}

.contact-page__notes-list {
	list-style: disc;
	padding-left: var(--space-6);
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
}

.contact-page__notes-list li {
	margin-bottom: var(--space-2);
}

.contact-page__notes-list li:last-child {
	margin-bottom: 0;
}

/* ============================================================
   レスポンシブ（mobile-first ベース、PC で調整）
   ============================================================ */

@media (max-width: 768px) {
	.contact-page {
		padding: var(--space-6) var(--space-4) var(--space-12);
	}

	.contact-page__title {
		font-size: var(--font-size-xl);
	}

	.contact-form__field .required {
		font-size: var(--font-size-2xs);
	}
}