/**
 * お問い合わせページ（/contact/）専用スタイル（.contact-page）
 * page-contact.php でのみマークアップが出力されるため、他ページへの影響はない。
 */

.contact-page {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--section-spacing-sp) var(--container-padding);
}

.contact-page__header {
	max-width: 640px;
	margin: 0 auto 32px;
	text-align: center;
}

.contact-page__title {
	margin: 0 0 16px;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-navy);
}

.contact-page__desc {
	margin: 0;
	line-height: 1.9;
}

.contact-page__tel {
	display: flex;
	justify-content: center;
	margin: 0 0 40px;
}

.contact-page__tel-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	background-color: var(--color-navy);
	color: #ffffff;
	border-radius: 4px;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.contact-page__tel-link:hover {
	filter: brightness(0.92);
	transform: translateY(-2px);
}

.contact-page__tel-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.contact-page__tel-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	text-align: left;
}

.contact-page__tel-number {
	font-size: 1.3rem;
	font-weight: 700;
}

.contact-page__tel-hours {
	font-size: 0.75rem;
	opacity: 0.85;
}

.contact-page__form {
	max-width: 720px;
	margin: 0 auto;
}

/*
 * ここから Contact Form 7 の出力（.wpcf7-*）に対するスタイル調整。
 * CF7が自動生成するマークアップ・クラス名に対して当てるため、
 * BEM命名ではなく CF7 側のクラス名をそのまま使用する。
 */
.contact-page__form .wpcf7-form p {
	margin: 0 0 20px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-text);
}

.contact-page__form .required {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 0.7rem;
	font-weight: 700;
	color: #ffffff;
	background-color: var(--color-navy);
	border-radius: 999px;
	vertical-align: middle;
}

.contact-page__form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

/* 送信ボタン直前の同意チェックボックス関連 */
.contact-page__form .contact-form__privacy-notice {
	margin-top: 32px;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--color-text);
	opacity: 0.85;
}

.contact-page__form .wpcf7-acceptance .wpcf7-list-item-label a {
	color: var(--color-navy);
	text-decoration: underline;
}

.contact-page__form .wpcf7-acceptance .wpcf7-list-item-label a:hover {
	text-decoration: none;
}

.contact-page__form .wpcf7-form-control.wpcf7-text,
.contact-page__form .wpcf7-form-control.wpcf7-tel,
.contact-page__form .wpcf7-form-control.wpcf7-email,
.contact-page__form .wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-text);
	background-color: #ffffff;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	transition: border-color 0.2s ease;
}

.contact-page__form .wpcf7-form-control.wpcf7-textarea {
	resize: vertical;
}

.contact-page__form .wpcf7-form-control.wpcf7-text:focus,
.contact-page__form .wpcf7-form-control.wpcf7-tel:focus,
.contact-page__form .wpcf7-form-control.wpcf7-email:focus,
.contact-page__form .wpcf7-form-control.wpcf7-textarea:focus {
	outline: none;
	border-color: var(--color-navy);
}

.contact-page__form .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	margin: 0 20px 8px 0;
	font-weight: 400;
}

.contact-page__form .wpcf7-list-item-label {
	margin-left: 6px;
}

.contact-page__form input[type="checkbox"],
.contact-page__form input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-navy);
}

.contact-page__form .wpcf7-form-control.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 40px;
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	background-color: var(--color-navy);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.contact-page__form .wpcf7-form-control.wpcf7-submit:hover {
	filter: brightness(0.92);
	transform: translateY(-2px);
}

.contact-page__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 0.8rem;
	font-weight: 400;
	color: #c0392b;
}

.contact-page__form .wpcf7-response-output {
	margin-top: 24px;
	padding: 14px 18px;
	font-size: 0.9rem;
	font-weight: 400;
	border-radius: 4px;
	border: 1px solid #d0d5dd;
}

.contact-page__form form.sent .wpcf7-response-output {
	color: #1e7b34;
	background-color: #eafaf0;
	border-color: #b7e4c7;
}

.contact-page__form form.failed .wpcf7-response-output,
.contact-page__form form.aborted .wpcf7-response-output,
.contact-page__form form.spam .wpcf7-response-output {
	color: #c0392b;
	background-color: #fdecea;
	border-color: #f5c2c0;
}

.contact-page__form form.invalid .wpcf7-response-output {
	color: #b8860b;
	background-color: #fff8e5;
	border-color: #f0dca0;
}

@media (min-width: 769px) {
	.contact-page {
		padding-block: var(--section-spacing-pc);
	}

	.contact-page__title {
		font-size: 2rem;
	}

	.contact-page__form .wpcf7-form-control.wpcf7-submit {
		padding: 16px 56px;
	}
}