/* ==========================================================================
   /contact/ ページ用スタイル (HIN-100: B 案 独立スタイル)

   - .page-contact: page-contact.php の <main>
   - Contact Form 7 標準クラス (.wpcf7-* / .wpcf7-form-control 等) を
     テーマカラーに揃えてオーバーライド
   - サイドバーなし・1 カラム中央寄せ・読みやすいフォーム入力体験
   ========================================================================== */

/* ---------- Hero ---------- */
.contact-hero {
	padding: clamp(80px, 12vw, 140px) 0 clamp(40px, 6vw, 70px);
}

.contact-hero .eyebrow {
	display: inline-block;
	margin-bottom: 14px;
}

.contact-hero h1 {
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.4;
	margin: 0 0 18px;
}

.contact-hero .lead {
	/* HIN-170: 本文サイズ +18% (clamp(15,1.6vw,17) → clamp(18,1.9vw,20)) */
	font-size: clamp(18px, 1.9vw, 20px);
	color: var(--color-muted, #555);
	margin: 0;
	max-width: 640px;
	line-height: 1.8;
}

/* ---------- C-1.5 Intro (HIN-174: 振り分け案内) ---------- */
.page-contact .contact-intro-section {
	padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 3vw, 40px);
}

.page-contact .contact-intro {
	display: grid;
	gap: clamp(32px, 4vw, 48px);
}

/* 推奨ブロック: 明るいカード調で視線を集める */
.page-contact .contact-intro__primary {
	background: var(--color-white, #fff);
	border: 1px solid rgba(31, 77, 67, 0.08);
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 8px 28px rgba(31, 77, 67, 0.04);
	padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
	text-align: center;
}

.page-contact .contact-intro__lead {
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.8;
	margin: 0 0 16px;
	color: var(--color-text, #222);
}

.page-contact .contact-intro__lead strong {
	color: var(--color-main, #1f4d43);
	font-weight: 600;
}

.page-contact .contact-intro__note {
	font-size: 16px;
	line-height: 1.85;
	margin: 0 0 clamp(24px, 3vw, 32px);
	color: var(--color-muted, #555);
}

.page-contact .contact-intro__actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.page-contact .contact-intro__actions .btn {
	min-width: 220px;
}

/* フォーム対象案内ブロック */
.page-contact .contact-intro__secondary {
	text-align: center;
}

.page-contact .contact-intro__heading {
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 600;
	margin: 0 0 16px;
	color: var(--color-main-dark, #1f4d43);
}

.page-contact .contact-intro__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	text-align: left;
}

.page-contact .contact-intro__list li {
	position: relative;
	padding-left: 1.4em;
	font-size: 16px;
	line-height: 1.95;
	color: var(--color-text, #222);
}

.page-contact .contact-intro__list li::before {
	content: '・';
	position: absolute;
	left: 0;
	color: var(--color-accent, #b8a86d);
}

/* ---------- 共通 container ---------- */
.page-contact .container {
	max-width: 760px;
}

/* ---------- C-2 Form ---------- */
.page-contact .contact-form-section {
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

.page-contact .contact-form-body {
	/* HIN-170: 本文サイズ +20% (15 → 18) */
	font-size: 18px;
	line-height: 1.8;
	color: var(--color-text, #222);
}

.page-contact .contact-form-body p {
	margin: 0 0 1.2em;
}

/* ---------- Contact Form 7 オーバーライド ---------- */

/* ラベル行 (CF7 では <p><label>...</label> の構造) */
.page-contact .wpcf7 form p {
	margin-bottom: 1.4em;
}

.page-contact .wpcf7 label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text, #222);
	margin-bottom: 6px;
}

/* 必須マーカー想定 (CF7 自体には .required クラスがないため任意の運用) */
.page-contact .wpcf7 .required-mark {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	font-size: 11px;
	color: #fff;
	background: var(--color-primary, #2c8c7a);
	border-radius: 3px;
	vertical-align: middle;
}

/* テキスト系入力 */
.page-contact .wpcf7-form-control,
.page-contact .wpcf7-text,
.page-contact .wpcf7-email,
.page-contact .wpcf7-tel,
.page-contact .wpcf7-textarea,
.page-contact .wpcf7 input[type="text"],
.page-contact .wpcf7 input[type="email"],
.page-contact .wpcf7 input[type="tel"],
.page-contact .wpcf7 textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.6;
	color: var(--color-text, #222);
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #d6d6d6);
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.page-contact .wpcf7 textarea {
	min-height: 180px;
	resize: vertical;
}

/* フォーカス時 */
.page-contact .wpcf7-text:focus,
.page-contact .wpcf7-email:focus,
.page-contact .wpcf7-tel:focus,
.page-contact .wpcf7-textarea:focus,
.page-contact .wpcf7 input[type="text"]:focus,
.page-contact .wpcf7 input[type="email"]:focus,
.page-contact .wpcf7 input[type="tel"]:focus,
.page-contact .wpcf7 textarea:focus {
	outline: none;
	border-color: var(--color-primary, #2c8c7a);
	box-shadow: 0 0 0 3px rgba(44, 140, 122, 0.15);
}

/* プレースホルダ */
.page-contact .wpcf7 input::placeholder,
.page-contact .wpcf7 textarea::placeholder {
	color: var(--color-muted, #999);
}

/* 送信ボタン */
.page-contact .wpcf7-submit,
.page-contact .wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	color: #fff;
	background: var(--color-primary, #2c8c7a);
	border: 1px solid var(--color-primary, #2c8c7a);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.page-contact .wpcf7-submit:hover,
.page-contact .wpcf7 input[type="submit"]:hover {
	background: var(--color-primary-dark, #237263);
	border-color: var(--color-primary-dark, #237263);
	box-shadow: 0 6px 16px rgba(44, 140, 122, 0.25);
	transform: translateY(-1px);
}

.page-contact .wpcf7-submit:disabled,
.page-contact .wpcf7 input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* 送信ボタンを中央寄せ */
.page-contact .wpcf7 form p:last-child {
	text-align: center;
	margin-top: clamp(24px, 3vw, 36px);
	margin-bottom: 0;
}

/* バリデーションメッセージ */
.page-contact .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #c62828;
}

.page-contact .wpcf7-not-valid {
	border-color: #c62828 !important;
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1) !important;
}

/* レスポンスメッセージ (送信完了・送信失敗等) */
.page-contact .wpcf7-response-output {
	margin: clamp(20px, 3vw, 32px) 0 0;
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.7;
	border-radius: 8px;
	border-width: 1px;
	border-style: solid;
}

.page-contact .wpcf7 form.sent .wpcf7-response-output {
	background: rgba(44, 140, 122, 0.08);
	border-color: var(--color-primary, #2c8c7a);
	color: var(--color-primary-dark, #237263);
}

.page-contact .wpcf7 form.invalid .wpcf7-response-output,
.page-contact .wpcf7 form.unaccepted .wpcf7-response-output,
.page-contact .wpcf7 form.failed .wpcf7-response-output,
.page-contact .wpcf7 form.aborted .wpcf7-response-output,
.page-contact .wpcf7 form.spam .wpcf7-response-output {
	background: rgba(198, 40, 40, 0.06);
	border-color: #c62828;
	color: #b71c1c;
}

/* CF7 のローディングスピナー位置調整 */
.page-contact .wpcf7-spinner {
	margin-left: 12px;
	vertical-align: middle;
}

/* reCAPTCHA v3 のバッジ位置はプラグインデフォルトに任せる */

/* ---------- C-3 Note ---------- */
.page-contact .contact-note-section {
	padding: clamp(40px, 5vw, 60px) 0;
}

.page-contact .contact-note h2 {
	font-size: clamp(18px, 2.4vw, 22px);
	margin: 0 0 clamp(16px, 2vw, 20px);
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-primary, #2c8c7a);
}

.page-contact .contact-note-list {
	margin: 0;
	padding-left: 1.4em;
	/* HIN-170: 本文サイズ +21% (14 → 17) */
	font-size: 17px;
	line-height: 1.85;
	color: var(--color-text, #222);
}

.page-contact .contact-note-list li {
	margin-bottom: 0.6em;
}

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

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* タブレット (960px 以下) */
@media (max-width: 960px) {
	.page-contact .wpcf7-submit,
	.page-contact .wpcf7 input[type="submit"] {
		min-width: 180px;
		font-size: 15px;
	}
}

/* モバイル (640px 以下) */
@media (max-width: 640px) {
	.contact-hero h1 {
		font-size: clamp(22px, 6vw, 28px);
	}

	.contact-hero .lead {
		/* HIN-170: 本文サイズ +21% (14 → 17) */
		font-size: 17px;
	}

	/* HIN-174: C-1.5 Intro モバイル調整 */
	.page-contact .contact-intro__lead {
		font-size: 17px;
	}

	.page-contact .contact-intro__note,
	.page-contact .contact-intro__list li {
		font-size: 15px;
	}

	.page-contact .contact-intro__actions {
		flex-direction: column;
		gap: 12px;
	}

	.page-contact .contact-intro__actions .btn {
		width: 100%;
		min-width: 0;
	}

	.page-contact .wpcf7-form-control,
	.page-contact .wpcf7-text,
	.page-contact .wpcf7-email,
	.page-contact .wpcf7-tel,
	.page-contact .wpcf7-textarea,
	.page-contact .wpcf7 input[type="text"],
	.page-contact .wpcf7 input[type="email"],
	.page-contact .wpcf7 input[type="tel"],
	.page-contact .wpcf7 textarea {
		font-size: 16px; /* iOS Safari のオートズーム回避 */
		padding: 11px 13px;
	}

	.page-contact .wpcf7-submit,
	.page-contact .wpcf7 input[type="submit"] {
		width: 100%;
		min-width: 0;
	}

	.page-contact .contact-note-list {
		/* HIN-170: 本文サイズ +23% (13 → 16) */
		font-size: 16px;
	}
}