/* ============================================================
 * pages/contact.css ─ お問い合わせ / Contact ページ専用スタイル
 *
 * 構成（CSS順 / v2.3 改訂：Section 01「ご相談の入り口」を廃止）：
 *  Page-level   :  scroll-padding / footer 余白
 *  Section 00   :  contact-hero（Column / Info と同じ軽量KV）
 *  Section 01   :  contact-form-section（CF7 ショートコード placeholder ＋仮フォーム）
 *                  ─ 「ご相談内容」は v2.3 でラジオボタン化（5項目）
 *                  ─ CF7 実DOM クラス（.wpcf7-form 系）にも同一スタイルを適用
 *  Section 02   :  contact-tel（お電話・直接相談）
 *  Section 03   :  contact-faq（FAQ 5問・details/summary アコーディオン）
 *  Section 04   :  contact-privacy（個人情報の取り扱い／reCAPTCHA 表記含む）
 *  Section 05   :  contact-access（アクセス簡素・about へのリンク）
 *
 * 設計：ライト基盤・モバイルファースト（min-width で書く）。
 *      contact ページは Final CTA を持たない（自身がCTAページのため）。
 *      callout box（角丸＋塗り＋全周枠線＋border-left太枠線＋padding大）は使わない（CLAUDE.md 4.4.5-B）。
 *      Contact はフォームへ進む前の入口として、短いKVで本体へ接続する。
 * ============================================================ */


/* ============================================================
 * Page-level
 * ============================================================ */
:root {
	scroll-padding-top: 80px;
}

main {
	display: flex;
	flex-direction: column;
}

main > section {
	width: 100%;
}


/* ============================================================
 * Section 00 ─ contact-hero（Column / Info と同じ軽量KV）
 * ============================================================ */
.contact-hero {
	position: relative;
	padding-top: var(--space-5);
	padding-bottom: var(--space-4);
	margin-bottom: 0;
	overflow: hidden;
	/* 他の固定ページ（about/services/works）KVと同じクールホワイトに統一。
	   水色（brand-100）グラデは廃止し、パンくず帯〜KV〜本文を同じ地色でつなぐ（でぐ指示・2026-06-02） */
	background: var(--color-bg-primary);
	border-bottom: 1px solid var(--color-border-subtle);
}

@media (min-width: 1024px) {
	.contact-hero {
		padding-top: var(--space-6);
		padding-bottom: var(--space-5);
		margin-bottom: 0;
	}
}

.contact-hero__inner {
	position: relative;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-4);
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: center;
}

@media (min-width: 768px) {
	.contact-hero__inner {
		padding-inline: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.contact-hero__inner {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: var(--space-7);
	}
}

.contact-hero__text {
	min-width: 0;
}

.contact-hero__visual {
	display: none;
}

@media (min-width: 1024px) {
	.contact-hero__visual {
		display: block;
		width: 100%;
		max-width: 280px;
		aspect-ratio: 1 / 1;
	}
}

.contact-hero__visual svg {
	width: 100%;
	height: 100%;
	display: block;
}

.contact-hero__bg-typo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	opacity: 0.04;
	font-family: var(--font-sans-latin);
	font-weight: 900;
	font-size: clamp(4rem, 14vw, 11rem);
	line-height: 0.86;
	color: var(--color-brand);
	letter-spacing: 0;
	overflow: hidden;
	white-space: nowrap;
}

.contact-hero__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-700);
	margin-bottom: var(--space-3);
	padding: var(--space-1) var(--space-3);
	background: var(--color-brand-100);
	border-radius: var(--radius-full);
	max-width: max-content;
}

.contact-hero__overline::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-brand);
	box-shadow: 0 0 8px var(--color-brand);
}

.contact-hero__title {
	font-family: var(--font-sans-jp);
	font-size: clamp(1.625rem, 4.5vw, 2.25rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	color: var(--color-text-primary);
	margin: 0 0 var(--space-2);
	font-feature-settings: "palt";
}

.contact-hero__lead {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
	max-width: 56ch;
	margin: 0;
	text-wrap: pretty;
}

.contact-hero__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}


/* ============================================================
 * Section 01 ─ contact-form-section（v2.3：番号繰り上げ）
 * CF7 ショートコードに置換予定。フォームスタイルは theme 側で統一。
 * 旧 Section 01「contact-topics（4 topic カード）」関連定義は v2.3 で全削除。
 * ご相談の振り分けは、フォーム内ラジオボタン直下の補足説明で担保する。
 * ============================================================ */
.contact-form-section {
	position: relative;
	padding-top: var(--space-6);
	padding-bottom: var(--space-7);
	background: var(--color-bg-surface);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 768px) {
	.contact-form-section {
		padding-top: var(--space-8);
		padding-bottom: var(--space-9);
	}
}

@media (min-width: 1024px) {
	.contact-form-section {
		padding-top: var(--space-8);
		padding-bottom: var(--space-10);
	}
}

.contact-form-section__header {
	margin-bottom: var(--space-7);
	max-width: 720px;
	position: relative;
}

.contact-form-section__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
}

/* PC（≥1024px）：親 max-width に縛られず1行表示を確保
   ── 他の h2 と font-size は揃えたまま、widthのみ親を超える */
@media (min-width: 1024px) {
	.contact-form-section__title {
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
	.contact-form-section__title {
		font-size: clamp(1.75rem, 7.5vw, 2.125rem);
		line-height: 1.25;
	}
}

.contact-form-section__tldr {
	margin-top: var(--space-4);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 64ch;
	text-wrap: pretty;
}

.contact-form-section__tldr strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

/* ─── フォーム本体（CF7 出力 .wpcf7-form にも同一スタイルを適用） ───
   CF7 が body 直下に書き出すクラス（.wpcf7-form, .wpcf7-form-control）にも
   contact-form__* と同等のスタイルが当たるよう、両系統をセレクタ列挙する。 */
.contact-form,
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	background: var(--color-bg-surface);
	padding: var(--space-6);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 48px rgba(6, 79, 79, 0.06);
}

@media (min-width: 768px) {
	.contact-form,
	.wpcf7-form {
		padding: var(--space-7);
		gap: var(--space-5);
	}
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	border: 0;
	padding: 0;
	margin: 0;
}

/* ─── CF7 自動 <p> / <br> の余白を打ち消す ───────────────────
   Contact Form 7 は各フィールドの label + 入力を自動で <p> でラップし、
   さらに label 前後と control 前に <br> を差し込む。
   これらが SP で余白を膨らませるため、CSS で正規化する。
   （CF7 フォーム定義・page-contact.php のショートコードは触らない） */
.wpcf7-form .contact-form__field > p:not(.contact-form__hint) {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* CF7 が自動挿入する <br> は flow を崩すだけなので無効化。
   label は flex、control-wrap は block で縦に積むため <br> は不要。 */
.wpcf7-form .contact-form__field br,
.wpcf7-form .contact-form__label br {
	display: none;
}

.contact-form__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tight);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	padding: 0;
}

/* 必須バッジ（v2.3：ブランド規定外色 → 中立色に変更）
   背景塗りなし・文字色 muted のみで控えめに表現。 */
.contact-form__required {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-sans-latin), var(--font-sans-jp);
	font-size: var(--fs-xs); /* 11px→12px：必須バッジ。フォーム必須情報のため最低12px */
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	background: transparent;
	padding: 2px 6px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	line-height: 1.4;
}

.contact-form__optional {
	display: inline-flex;
	align-items: center;
	font-size: var(--fs-xs); /* 11px→12px：任意バッジ。最低12px */
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	background: var(--color-glass-default);
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	line-height: 1.4;
}

/* 入力要素：プレビュー側 .contact-form__* と CF7 出力 .wpcf7-form 系の両方に適用 */
.contact-form__input,
.contact-form__select,
.contact-form__textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-family: inherit;
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
	color: var(--color-text-primary);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	min-height: 48px;  /* タップ領域 48px+ 保証 */
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		box-shadow   var(--duration-fast) var(--ease-out-expo),
		background   var(--duration-fast) var(--ease-out-expo);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: var(--color-text-muted);
}

.contact-form__input:hover,
.contact-form__select:hover,
.contact-form__textarea:hover,
.wpcf7-form input[type="text"]:hover,
.wpcf7-form input[type="email"]:hover,
.wpcf7-form input[type="tel"]:hover,
.wpcf7-form textarea:hover,
.wpcf7-form select:hover {
	border-color: var(--color-border-strong);
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(6, 123, 123, 0.15);
	background: var(--color-bg-surface);
}

.contact-form__textarea,
.wpcf7-form textarea {
	resize: vertical;
	min-height: 140px;
	line-height: var(--lh-relaxed);
}

.contact-form__select,
.wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%23067B7B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	padding-right: var(--space-7);
	cursor: pointer;
}

/* SP：input の文字を 16px 維持（ズーム抑制）／タップ感アップ */
@media (max-width: 767px) {
	.contact-form__input,
	.contact-form__select,
	.contact-form__textarea,
	.wpcf7-form input[type="text"],
	.wpcf7-form input[type="email"],
	.wpcf7-form input[type="tel"],
	.wpcf7-form textarea,
	.wpcf7-form select {
		font-size: 16px;  /* iOS Safari のズーム抑制 */
		min-height: 52px;
	}
}

/* ============================================================
 * ラジオボタン（v2.3 新規：ご相談内容を select → ラジオに変更）
 *
 * 設計：
 *  - input[type="radio"] 本体は視覚的に隠す（visually-hidden）
 *  - <label> 全体を 1 タップ領域とする（48px+ 保証）
 *  - :checked 時、border をブランド色に強調 + 薄いブランドティント背景
 *    （callout box にしない：border 1px のみ＋薄背景。border-left 太枠線 NG）
 *  - :focus-visible で 2px のフォーカスリング可視化
 *  - PC（≥768px）：2カラム / SP：1カラム
 * ============================================================ */
.contact-form__topic-group {
	gap: var(--space-3);
}

.contact-form__topic-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.contact-form__topic-options {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
	}
}

/* 各オプションのカード型ラベル（タップ領域＝<label> 全体） */
.contact-form__topic-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	min-height: 64px;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		background   var(--duration-fast) var(--ease-out-expo),
		box-shadow   var(--duration-fast) var(--ease-out-expo);
}

.contact-form__topic-option:hover {
	border-color: var(--color-border-strong);
}

@media (hover: none) {
	.contact-form__topic-option:hover {
		border-color: var(--color-border-default);
	}
}

/* ラジオ本体は accessible に隠す（フォーカス可能性は維持） */
.contact-form__topic-option input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 視覚的なラジオ表示（カスタムドット）。<label> の :before として描画 */
.contact-form__topic-option::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 2px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background: var(--color-bg-surface);
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		box-shadow   var(--duration-fast) var(--ease-out-expo);
}

/* :checked 時：border をブランド色＋薄ティント背景＋ドット内側を塗る
   （AIっぽい callout box にしない：border 1px のみ＋薄い背景） */
.contact-form__topic-option:has(input[type="radio"]:checked) {
	border-color: var(--color-brand);
	background: var(--color-glass-brand);
}

.contact-form__topic-option:has(input[type="radio"]:checked)::before {
	border-color: var(--color-brand);
	box-shadow: inset 0 0 0 5px var(--color-brand);
	background: var(--color-bg-surface);
}

/* :has 非対応ブラウザ向けフォールバック（input[type="radio"]:checked の兄弟・親 selector が使えない場合）
   現状 Safari 15+ / Chrome 105+ で :has 対応済み。古いブラウザでは visualだけ素のラジオに戻る。 */

/* キーボードフォーカス時のリング（ラジオ本体が hidden のため、ラベル側で表現） */
.contact-form__topic-option:focus-within {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(6, 123, 123, 0.15);
	outline: none;
}

.contact-form__topic-option-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1;
	min-width: 0;
}

.contact-form__topic-option-title {
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-snug);
}

.contact-form__topic-option-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

/* SP：タップ領域・余白を最適化 */
@media (max-width: 767px) {
	.contact-form__topic-option {
		min-height: 56px;
		padding: var(--space-3) var(--space-4);
	}

	.contact-form__topic-option-title {
		font-size: 15px;
	}

	.contact-form__topic-option-desc {
		font-size: 13.5px;
	}
}

/* ============================================================
 * CF7 メッセージ系（実DOM クラス）
 *
 * - .wpcf7-not-valid-tip       : フィールド単位のエラー文
 * - .wpcf7-response-output     : フォーム下部の総合レスポンス
 * - .wpcf7-spinner             : 送信中のスピナー
 * - form.invalid               : フォーム全体が invalid 時
 * - form.sent                  : 送信成功時
 * ============================================================ */
.wpcf7-not-valid-tip {
	color: var(--color-empathy);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	margin-top: var(--space-1);
	letter-spacing: var(--ls-tight);
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
	border-color: var(--color-empathy);
	box-shadow: 0 0 0 3px rgba(201, 136, 95, 0.15);
}

.wpcf7-response-output {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-primary);
	background: transparent;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--color-empathy);
	color: var(--color-empathy);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.wpcf7-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: var(--space-3);
	border: 2px solid var(--color-border-default);
	border-top-color: var(--color-brand);
	border-radius: var(--radius-full);
	animation: wpcf7-spinner-rotate 0.8s linear infinite;
	vertical-align: middle;
}

@keyframes wpcf7-spinner-rotate {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner {
		animation: none;
	}
}

/* 同意チェック */
.contact-form__field--consent {
	margin-top: var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
}

.contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	cursor: pointer;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

.contact-form__checkbox {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var(--color-brand);
	cursor: pointer;
}

.contact-form__consent a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.contact-form__consent a:hover {
	color: var(--color-brand-700);
}

/* 送信ボタンエリア */
.contact-form__submit {
	margin-top: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.contact-form__submit-btn {
	width: 100%;
}

@media (min-width: 768px) {
	.contact-form__submit-btn {
		width: auto;
		min-width: 280px;
		align-self: flex-start;
	}
}

.contact-form__submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.contact-form__submit-note {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
}

/* フォーム下部の補助テキスト群 */
.contact-form-section__notes {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

.contact-form-section__notes li {
	position: relative;
	padding-left: var(--space-4);
}

.contact-form-section__notes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--color-brand);
	opacity: 0.6;
}


/* ============================================================
 * Section 03 ─ contact-tel
 * ============================================================ */
.contact-tel {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-primary);
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.contact-tel {
		padding-block: var(--space-9);
	}
}

@media (min-width: 1024px) {
	.contact-tel {
		padding-block: var(--space-10);
	}
}

.contact-tel__header {
	margin-bottom: var(--space-6);
	max-width: 720px;
	position: relative;
}

.contact-tel__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
}

@media (max-width: 767px) {
	.contact-tel__title {
		font-size: clamp(1.75rem, 7.5vw, 2.125rem);
		line-height: 1.25;
	}
}

.contact-tel__tldr {
	margin-top: var(--space-4);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 64ch;
	text-wrap: pretty;
}

.contact-tel__tldr strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

/* TEL カード（callout box ではなく、構造化された情報カード）
   コンタクトメソッドの主役なので、ある程度のプレゼンスは与える。
   ただし「border-left 太枠線＋角丸padding大＋全周枠線」の AI ボックスパターンは避け、
   border-radius と border-subtle のみ・装飾SVG＋大きな数字でリッチに見せる。 */
.contact-tel__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	position: relative;
}

@media (min-width: 768px) {
	.contact-tel__card {
		padding: var(--space-7);
	}
}

/* 受話器SVG ＋ 電話番号の横並びコンテナ */
.contact-tel__primary {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

@media (max-width: 639px) {
	.contact-tel__primary {
		gap: var(--space-3);
	}
}

.contact-tel__icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
}

@media (max-width: 639px) {
	.contact-tel__icon {
		width: 48px;
		height: 48px;
	}
}

.contact-tel__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.contact-tel__number {
	font-family: var(--font-sans-latin);
	font-size: clamp(2rem, 7vw, 3rem);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-tight);
	color: var(--color-brand);
	text-decoration: none;
	line-height: 1.1;
	font-feature-settings: "tnum";
	display: inline-block;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.contact-tel__number:hover {
	color: var(--color-brand-700);
}

.contact-tel__meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
}

.contact-tel__meta-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

@media (min-width: 640px) {
	.contact-tel__meta-row {
		flex-direction: row;
		align-items: baseline;
		gap: var(--space-4);
	}
}

.contact-tel__meta-row dt {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
	flex-shrink: 0;
	min-width: 80px;
	font-family: var(--font-sans-jp);
}

.contact-tel__meta-row dd {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

.contact-tel__notes {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--color-border-subtle);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
}

.contact-tel__notes li {
	position: relative;
	padding-left: var(--space-4);
}

.contact-tel__notes li::before {
	content: "※";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-text-muted);
}


/* ============================================================
 * Section 04 ─ contact-faq（FAQ 5問・details/summary アコーディオン）
 * JSなしで動く。border-left 太枠線の callout box ではなく、薄い枠線でカード化。
 * ============================================================ */
.contact-faq {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-surface);
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.contact-faq {
		padding-block: var(--space-9);
	}
}

@media (min-width: 1024px) {
	.contact-faq {
		padding-block: var(--space-10);
	}
}

.contact-faq__header {
	margin-bottom: var(--space-6);
	max-width: 720px;
	position: relative;
}

.contact-faq__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
}

@media (max-width: 767px) {
	.contact-faq__title {
		font-size: clamp(1.75rem, 7.5vw, 2.125rem);
		line-height: 1.25;
	}
}

.contact-faq__tldr {
	margin-top: var(--space-4);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 64ch;
	text-wrap: pretty;
}

.contact-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.contact-faq__item {
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		box-shadow   var(--duration-fast) var(--ease-out-expo);
}

.contact-faq__item[open] {
	border-color: var(--color-border-brand);
}

.contact-faq__q {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	cursor: pointer;
	list-style: none;
	min-height: 56px;
	transition: background var(--duration-fast) var(--ease-out-expo);
}

.contact-faq__q::-webkit-details-marker {
	display: none;
}

.contact-faq__q:hover {
	background: var(--color-glass-brand);
}

/* Q-mark：POPなTeal円SVG（?マーク）＋小さなQn番号
   塗り背景バッジ（callout box ミニ版）を廃止し、SVG円＋小さなテキスト番号のみに。
   open / hover で円の色がCoralへ変化する */
.contact-faq__q-mark {
	flex-shrink: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1;
	background: none;
	padding: 0;
	border-radius: 0;
}

.contact-faq__q-mark-svg {
	width: 32px;
	height: 32px;
	display: block;
	transition: transform var(--duration-base) var(--ease-out-expo);
}

.contact-faq__q-mark-svg circle:first-child {
	transition: fill var(--duration-base) var(--ease-out-expo);
}

.contact-faq__q-mark-num {
	font-family: var(--font-sans-latin);
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	line-height: 1;
}

/* hover / open で円の色がコッパーへ */
.contact-faq__q:hover .contact-faq__q-mark-svg circle:first-child,
.contact-faq__item[open] .contact-faq__q-mark-svg circle:first-child {
	fill: var(--color-accent);
}

.contact-faq__item[open] .contact-faq__q-mark-svg {
	transform: rotate(-6deg);
}

@media (hover: none) {
	.contact-faq__q:hover .contact-faq__q-mark-svg circle:first-child {
		fill: #067B7B;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-faq__q-mark-svg,
	.contact-faq__q-mark-svg circle:first-child {
		transition: none;
	}
	.contact-faq__item[open] .contact-faq__q-mark-svg {
		transform: none;
	}
}

.contact-faq__q-text {
	flex: 1;
	text-wrap: pretty;
}

/* +/- アイコン（pure CSS） */
.contact-faq__q-icon {
	flex-shrink: 0;
	position: relative;
	width: 18px;
	height: 18px;
	margin-left: var(--space-2);
}

.contact-faq__q-icon::before,
.contact-faq__q-icon::after {
	content: "";
	position: absolute;
	background: var(--color-brand);
	border-radius: 1px;
	transition: transform var(--duration-base) var(--ease-out-expo);
}

.contact-faq__q-icon::before {
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}

.contact-faq__q-icon::after {
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}

.contact-faq__item[open] .contact-faq__q-icon::after {
	transform: translateX(-50%) rotate(90deg);
}

.contact-faq__a {
	padding: 0 var(--space-5) var(--space-5);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
}

.contact-faq__a p {
	margin: 0;
	text-wrap: pretty;
	max-width: 64ch;
}

.contact-faq__a a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.contact-faq__a a:hover {
	color: var(--color-brand-700);
}

/* SP（〜767px）：summary の余白を最適化 */
@media (max-width: 767px) {
	.contact-faq__q {
		padding: var(--space-4);
		min-height: 60px;
	}

	.contact-faq__a {
		padding: 0 var(--space-4) var(--space-4);
	}
}


/* ============================================================
 * Section 05 ─ contact-privacy
 * callout box 化禁止：プレーンテキスト＋細い縦線で構造化。
 * ============================================================ */
.contact-privacy {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-primary);
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.contact-privacy {
		padding-block: var(--space-9);
	}
}

@media (min-width: 1024px) {
	.contact-privacy {
		padding-block: var(--space-10);
	}
}

.contact-privacy__header {
	margin-bottom: var(--space-6);
	max-width: 720px;
	position: relative;
}

.contact-privacy__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
}

@media (max-width: 767px) {
	.contact-privacy__title {
		font-size: clamp(1.75rem, 7.5vw, 2.125rem);
		line-height: 1.25;
	}
}

.contact-privacy__tldr {
	margin-top: var(--space-4);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 64ch;
	text-wrap: pretty;
}

.contact-privacy__tldr strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

.contact-privacy__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.contact-privacy__group {
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-border-brand);
	max-width: 64ch;
}

.contact-privacy__group-title {
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tight);
	margin: 0 0 var(--space-3);
}

.contact-privacy__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.contact-privacy__list li {
	position: relative;
	padding-left: var(--space-4);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	text-wrap: pretty;
}

.contact-privacy__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--color-brand);
	opacity: 0.5;
}

.contact-privacy__list a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.contact-privacy__link {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

.contact-privacy__link a {
	color: var(--color-brand);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.contact-privacy__link a:hover {
	color: var(--color-brand-700);
}


/* ============================================================
 * Section 06 ─ contact-access（簡素・about へのリンク）
 * ============================================================ */
.contact-access {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-surface);
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.contact-access {
		padding-block: var(--space-9);
	}
}

@media (min-width: 1024px) {
	.contact-access {
		padding-block: var(--space-10);
	}
}

.contact-access__header {
	margin-bottom: var(--space-6);
	max-width: 720px;
	position: relative;
}

.contact-access__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
}

@media (max-width: 767px) {
	.contact-access__title {
		font-size: clamp(1.75rem, 7.5vw, 2.125rem);
		line-height: 1.25;
	}
}

.contact-access__tldr {
	margin-top: var(--space-4);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 64ch;
	text-wrap: pretty;
}

.contact-access__tldr strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

.contact-access__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	font-style: normal;
}

@media (min-width: 768px) {
	.contact-access__card {
		padding: var(--space-7);
	}
}

.contact-access__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
}

.contact-access__row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

@media (min-width: 640px) {
	.contact-access__row {
		flex-direction: row;
		align-items: baseline;
		gap: var(--space-4);
	}
}

.contact-access__row dt {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
	flex-shrink: 0;
	min-width: 80px;
	font-family: var(--font-sans-jp);
}

.contact-access__row dd {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

.contact-access__row dd a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.contact-access__link {
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}

.contact-access__link a {
	color: var(--color-brand);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.contact-access__link a:hover {
	color: var(--color-brand-700);
}


/* ============================================================
 * Site Footer：直前セクションが contact-access（surface 色）なので
 * フッターとの間に大きな空白を作らない。
 * ============================================================ */
.site-footer {
	margin-top: 0;
}


/* ============================================================
 * ============================================================
 *
 *  /contact/thanks/ 専用スタイル
 *
 *  CF7 フォーム送信完了後の遷移先（CV計測URL）。
 *  構成：
 *    Section 1 :  contact-thanks-hero（h1: お問い合わせを承りました。）
 *    Section 2 :  contact-thanks-next（3カード：ラボの棚 / LINE / Column）
 *    Section 3 :  contact-thanks-info（連絡先：電話・営業時間・所在地）
 *    Section 4 :  contact-thanks-back（ホームに戻る ghost ボタン）
 *
 *  方針：
 *    - thanks ページは Final CTA を持たない（再相談促進は過剰）
 *    - ヒーローはチェックマーク中心の落ち着いたコンポジション
 *    - モバイルファースト（min-width で書く）
 *    - callout box 化禁止（CLAUDE.md 4.4.5-B）
 *    - prefers-reduced-motion で全アニメ停止
 *
 * ============================================================
 * ============================================================ */


/* ============================================================
 * Section 1 ─ contact-thanks-hero
 * ============================================================ */
/* privacy-hero と同じ padding ベースの軽量KV（でぐ指示 2026-06-06：
   全画面高さ・大型装飾SVG・背景透かしを廃し、簡潔な完了見出しに統一）。 */
.contact-thanks-hero {
	position: relative;
	padding-top: var(--space-5);
	padding-bottom: var(--space-4);
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg-primary);
}

@media (min-width: 768px) {
	.contact-thanks-hero {
		padding-top: var(--space-6);
		padding-bottom: var(--space-5);
	}
}

@keyframes contact-thanks-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes contact-thanks-visual-in {
	from { opacity: 0; transform: translateY(-50%) scale(0.94); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes contact-thanks-visual-in-sp {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes contact-thanks-check-pop {
	0%   { transform: scale(0.6); opacity: 0; }
	60%  { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes contact-thanks-spark-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(1.15); }
}

@keyframes contact-thanks-bubble-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

/* ─── 背景の極薄メガタイポ ─── */
.contact-thanks-hero__bg-typo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--font-sans-latin);
	font-size: clamp(5rem, 16vw, 16rem);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-primary);
	opacity: 0.04;
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
	user-select: none;
	overflow: hidden;
	pointer-events: none;
}

.contact-thanks-hero__bg-typo span {
	display: block;
}

.contact-thanks-hero__bg-typo span:first-child {
	transform: translateX(-8%);
}

.contact-thanks-hero__bg-typo span:last-child {
	transform: translateX(8%);
	text-align: right;
}

/* ─── ヒーロー右側の装飾SVG（PC：絶対配置） ─── */
.contact-thanks-hero__visual {
	position: absolute;
	top: 50%;
	right: max(var(--space-5), calc((100vw - var(--container-wide)) / 2 + var(--space-5)));
	transform: translateY(-50%);
	width: 38%;
	max-width: 480px;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	animation: contact-thanks-visual-in var(--duration-slowest) var(--ease-out-expo) 1.0s forwards;
}

.contact-thanks-hero__visual svg {
	width: 100%;
	height: auto;
	display: block;
}

/* 装飾SVG内：チェックの登場アニメ・スパーク・吹き出しの微アニメ */
@media (prefers-reduced-motion: no-preference) {
	.contact-thanks-hero__visual-check {
		transform-origin: 240px 180px;
		animation: contact-thanks-check-pop 0.8s var(--ease-out-expo) 1.4s backwards;
	}

	.contact-thanks-hero__visual-spark1 {
		animation: contact-thanks-spark-pulse 3.5s ease-in-out infinite;
		transform-origin: 110px 132px;
	}

	.contact-thanks-hero__visual-spark2 {
		animation: contact-thanks-spark-pulse 4s ease-in-out 0.5s infinite;
		transform-origin: 380px 104px;
	}

	.contact-thanks-hero__visual-spark3 {
		animation: contact-thanks-spark-pulse 4.5s ease-in-out 1s infinite;
		transform-origin: 400px 266px;
	}

	.contact-thanks-hero__visual-bubble {
		animation: contact-thanks-bubble-float 5s ease-in-out infinite;
		transform-origin: center;
	}
}

/* SP・タブレット（〜1023px）：SVG はテキストの下にフルサイズで段組み配置 */
@media (max-width: 1023px) {
	.contact-thanks-hero {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: auto;
		padding-bottom: var(--space-7);
	}

	.contact-thanks-hero__visual {
		position: static;
		top: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: 360px;
		margin-inline: auto;
		margin-top: var(--space-6);
		padding-inline: var(--space-4);
		opacity: 0;
		animation-name: contact-thanks-visual-in-sp;
		order: 2;
	}

	.contact-thanks-hero__inner {
		order: 1;
	}
}

.contact-thanks-hero__inner {
	position: relative;
	z-index: 1;
}

.contact-thanks-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	width: 100%;
	max-width: 640px;
}

@media (min-width: 1024px) {
	.contact-thanks-hero__content {
		max-width: 600px;
		margin-right: auto;
	}
}

/* タブレット〜SP：コンテンツの max-width を解除し、container--wide 幅いっぱいへ。
   背景の極薄メガタイポは画面幅を超えないようサイズ・寄せを抑制。 */
@media (max-width: 1023px) {
	.contact-thanks-hero__content {
		max-width: none;
	}

	.contact-thanks-hero__bg-typo {
		font-size: clamp(3rem, 14vw, 6rem);
	}

	.contact-thanks-hero__bg-typo span:first-child,
	.contact-thanks-hero__bg-typo span:last-child {
		transform: none;
	}
}

.contact-thanks-hero__overline {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0;
	opacity: 0;
	animation: contact-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.4s forwards;
}

.contact-thanks-hero__title {
	font-size: var(--fs-display-md);
	line-height: 1.2;
	letter-spacing: var(--ls-tighter);
	color: var(--color-text-primary);
	font-weight: var(--fw-extrabold);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
	text-wrap: balance;
	opacity: 0;
	animation: contact-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.6s forwards;
}

/* SP（〜767px）：h1 を 32〜44px に */
@media (max-width: 767px) {
	.contact-thanks-hero__title {
		font-size: clamp(2rem, 8.5vw, 2.75rem);
		line-height: 1.25;
		letter-spacing: -0.02em;
	}
}

.contact-thanks-hero__lead {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 60ch;
	text-wrap: pretty;
	opacity: 0;
	animation: contact-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.9s forwards;
}

.contact-thanks-hero__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}


/* ============================================================
 * Section 2 ─ contact-thanks-next（3カード：ラボの棚 / LINE / Column）
 * ============================================================ */
.contact-thanks-next {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-primary);
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.contact-thanks-next {
		padding-block: var(--space-9);
	}
}

@media (min-width: 1024px) {
	.contact-thanks-next {
		padding-block: var(--space-10);
	}
}

.contact-thanks-next__header {
	margin-bottom: var(--space-7);
	max-width: 760px;
	position: relative;
}

.contact-thanks-next__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	margin: var(--space-4) 0 var(--space-4);
	font-feature-settings: "palt";
	text-wrap: balance;
}

@media (max-width: 767px) {
	.contact-thanks-next__title {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
		line-height: 1.3;
	}
}

.contact-thanks-next__tldr {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 60ch;
	text-wrap: pretty;
	margin: 0;
}

.contact-thanks-next__tldr strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

/* ─── 3カードグリッド（モバイル：縦／PC：3列） ─── */
.contact-thanks-next__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.contact-thanks-next__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}
}

@media (min-width: 1024px) {
	.contact-thanks-next__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}
}

/* カードが 1 枚だけ残った場合（ローンチ前の非表示時など）は中央寄せで間延びを防ぐ。 */
.contact-thanks-next__grid:has(> li:only-child) {
	grid-template-columns: minmax(0, 400px);
	justify-content: center;
}

/* ─── カード本体（callout box 化禁止：薄い枠線のみ／塗りなし） ─── */
.contact-thanks-next__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	position: relative;
	min-height: 100%;
	transition:
		transform var(--duration-base) var(--ease-out-expo),
		border-color var(--duration-base) var(--ease-out-expo),
		box-shadow var(--duration-base) var(--ease-out-expo);
}

@media (min-width: 768px) {
	.contact-thanks-next__card {
		padding: var(--space-6);
	}
}

@media (hover: hover) {
	.contact-thanks-next__card:hover {
		transform: translateY(-4px);
		border-color: var(--color-brand);
		box-shadow: 0 12px 32px -16px rgba(6, 123, 123, 0.25);
	}

	.contact-thanks-next__card:hover .contact-thanks-next__card-arrow {
		transform: translateX(6px);
		color: var(--color-brand);
	}
}

.contact-thanks-next__card:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 4px;
	border-color: var(--color-brand);
}

/* カードのアイコン */
.contact-thanks-next__card-icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
}

.contact-thanks-next__card-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* カードのカテゴリラベル */
.contact-thanks-next__card-num {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0;
}

/* カードのタイトル */
.contact-thanks-next__card-title {
	font-size: var(--fs-xl, 1.25rem);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-snug);
	margin: 0;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.contact-thanks-next__card-title {
		font-size: 1.375rem;
	}
}

/* カードの説明 */
.contact-thanks-next__card-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
	margin: 0;
	flex-grow: 1;
}

.contact-thanks-next__card-desc strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

/* カードのメタ情報（補足） */
.contact-thanks-next__card-meta {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background: var(--color-glass-brand);
	border: 1px solid var(--color-border-subtle);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	color: var(--color-brand);
	align-self: flex-start;
	letter-spacing: var(--ls-tight);
}

/* カードの矢印 */
.contact-thanks-next__card-arrow {
	font-family: var(--font-sans-latin);
	font-size: 1.25rem;
	color: var(--color-text-muted);
	margin-top: var(--space-2);
	transition: transform var(--duration-base) var(--ease-out-expo), color var(--duration-base) var(--ease-out-expo);
	align-self: flex-end;
}


/* ============================================================
 * Section 3 ─ contact-thanks-info（連絡先）
 * ============================================================ */
.contact-thanks-info {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-surface);
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.contact-thanks-info {
		padding-block: var(--space-9);
	}
}

@media (min-width: 1024px) {
	.contact-thanks-info {
		padding-block: var(--space-10);
	}
}

.contact-thanks-info__header {
	margin-bottom: var(--space-7);
	max-width: 720px;
	position: relative;
}

.contact-thanks-info__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	margin: var(--space-4) 0 var(--space-4);
	font-feature-settings: "palt";
}

@media (max-width: 767px) {
	.contact-thanks-info__title {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
		line-height: 1.3;
	}
}

.contact-thanks-info__tldr {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 60ch;
	text-wrap: pretty;
	margin: 0;
}

/* 連絡先カード */
.contact-thanks-info__card {
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border-subtle);
	border-radius: 16px;
	padding: var(--space-6) var(--space-5);
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.contact-thanks-info__card {
		padding: var(--space-7) var(--space-7);
		gap: var(--space-6);
	}
}

/* 受話器SVG ＋ 電話番号の横並びコンテナ */
.contact-thanks-info__primary {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

@media (max-width: 639px) {
	.contact-thanks-info__primary {
		gap: var(--space-3);
	}
}

.contact-thanks-info__icon {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}

@media (max-width: 639px) {
	.contact-thanks-info__icon {
		width: 44px;
		height: 44px;
	}
}

.contact-thanks-info__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.contact-thanks-info__number {
	font-family: var(--font-sans-latin);
	font-size: clamp(2rem, 7vw, 2.75rem);
	font-weight: var(--fw-extrabold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tight);
	text-decoration: none;
	line-height: 1;
	transition: color var(--duration-fast) var(--ease-out-expo);
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

.contact-thanks-info__number:hover {
	color: var(--color-brand-700);
}

.contact-thanks-info__number:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 4px;
	border-radius: 4px;
}

/* 連絡先リスト */
.contact-thanks-info__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
	border-top: 1px solid var(--color-border-subtle);
	padding-top: var(--space-5);
}

.contact-thanks-info__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

@media (min-width: 640px) {
	.contact-thanks-info__row {
		flex-direction: row;
		gap: var(--space-4);
		align-items: flex-start;
	}
}

.contact-thanks-info__row dt {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
	flex-shrink: 0;
	min-width: 80px;
	font-family: var(--font-sans-jp);
}

.contact-thanks-info__row dd {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

.contact-thanks-info__row dd a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.contact-thanks-info__row dd a:hover {
	color: var(--color-brand-700);
}


/* ============================================================
 * Section 4 ─ contact-thanks-back（ホームに戻る）
 * ============================================================ */
.contact-thanks-back {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-surface);
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.contact-thanks-back {
		padding-block: var(--space-8);
	}
}

.contact-thanks-back__inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* SP では btn--lg をフル幅に（モバイル品質基準） */
@media (max-width: 639px) {
	.contact-thanks-back__inner .btn {
		width: 100%;
	}
}


/* ============================================================
 * 最終調整：thanks ページ専用の prefers-reduced-motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.contact-thanks-hero__overline,
	.contact-thanks-hero__title,
	.contact-thanks-hero__lead,
	.contact-thanks-hero__visual {
		animation: none;
		opacity: 1;
	}

	.contact-thanks-hero__visual {
		transform: translateY(-50%);
	}

	@media (max-width: 1023px) {
		.contact-thanks-hero__visual {
			transform: none;
		}
	}

	.contact-thanks-hero__visual-check,
	.contact-thanks-hero__visual-spark1,
	.contact-thanks-hero__visual-spark2,
	.contact-thanks-hero__visual-spark3,
	.contact-thanks-hero__visual-bubble {
		animation: none;
	}

	.contact-thanks-next__card:hover {
		transform: none;
	}

	.contact-thanks-next__card:hover .contact-thanks-next__card-arrow {
		transform: none;
	}
}


/* ============================================================
 *  SP / タブレット最終リファイン（responsive-fixer 2026-05-04）
 *
 *  方針：
 *   - PC（≥1024px）の見た目は壊さない（min-width 系で書く修正のみ）
 *   - SP（〜767px）と タブレット（768〜1023px）の見え方を整える
 *   - トークン使用、callout box 化禁止を踏襲
 * ============================================================ */

/* ─── 入力ヒント文（会社名フィールド下の説明など） ───
   placeholder 短縮に伴い、補足文を別要素として明示する。
   placeholder と異なり読み上げ対象＋常時表示。 */
.contact-form__hint {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

/* ─── ヒーロー（thanks）：SP の余白＋リードを整える ─── */
@media (max-width: 767px) {
	.contact-thanks-hero {
		padding-top: var(--space-6);
		padding-bottom: var(--space-7);
	}

	.contact-thanks-hero__content {
		gap: var(--space-4);
	}

	.contact-thanks-hero__lead {
		font-size: var(--fs-base);
		line-height: 1.75;
	}

	.contact-thanks-hero__visual {
		margin-top: var(--space-5);
		max-width: 320px;
	}
}

/* ─── Section ヘッダー間の余白：SP では大きすぎる margin-bottom を引き締める ─── */
@media (max-width: 767px) {
	.contact-form-section__header,
	.contact-tel__header,
	.contact-faq__header,
	.contact-privacy__header,
	.contact-access__header,
	.contact-thanks-next__header,
	.contact-thanks-info__header {
		margin-bottom: var(--space-5);
	}
}

/* ─── Section の縦余白：SP で 48px（space-7）固定／タブレットでは 64〜80px 程度に ─── */
@media (min-width: 640px) and (max-width: 767px) {
	.contact-form-section,
	.contact-tel,
	.contact-faq,
	.contact-privacy,
	.contact-access,
	.contact-thanks-next,
	.contact-thanks-info {
		padding-block: var(--space-8);  /* 64px */
	}
}

/* ─── フォームコンテナ：SP の内側余白を引き締める ─── */
@media (max-width: 639px) {
	.contact-form,
	.wpcf7-form {
		padding: var(--space-5);  /* 32→24px */
		gap: var(--space-4);
		border-radius: 14px;
	}
}

/* ─── 同意チェック：SP でタップ領域 48px+ を確保 ─── */
@media (max-width: 767px) {
	.contact-form__consent {
		min-height: 44px;
		align-items: center;
		gap: var(--space-3);
	}

	.contact-form__checkbox {
		width: 24px;
		height: 24px;
	}
}

/* ─── 送信ボタン：SP では note を上に近づけて視線誘導を最適化 ─── */
@media (max-width: 767px) {
	.contact-form__submit-note {
		margin-top: -4px;
	}
}

/* ─── トピックラジオ：SP で min-height 56px（タップ最低 48px+ ＋余裕） ─── */
@media (max-width: 639px) {
	.contact-form__topic-options {
		gap: var(--space-2);
	}

	.contact-form__topic-option {
		gap: var(--space-3);
		padding: 14px var(--space-4);
	}

	.contact-form__topic-option::before {
		width: 18px;
		height: 18px;
		margin-top: 3px;
	}
}

/* ─── 電話セクション：SP で受話器とテキストの縦配置を整える ─── */
@media (max-width: 639px) {
	.contact-tel__card {
		padding: var(--space-5);
		gap: var(--space-4);
	}

	.contact-tel__primary {
		align-items: center;
	}

	/* SP の電話番号は「タップ可能」を強調するため min-height で 48px 確保 */
	.contact-tel__number {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		font-size: clamp(1.875rem, 8vw, 2.25rem);
	}
}

/* ─── FAQ：SP で Q1 マーク・タイトル・アイコンの三段組がはみ出さないように ─── */
@media (max-width: 639px) {
	.contact-faq__q {
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		font-size: 0.9375rem;  /* 15px */
		min-height: 56px;
	}

	.contact-faq__q-mark-svg {
		width: 28px;
		height: 28px;
	}

	.contact-faq__q-mark-num {
		font-size: 9px;
	}

	.contact-faq__a {
		padding: 0 var(--space-4) var(--space-4);
		font-size: 0.875rem;
	}
}

/* ─── プライバシーセクション：SP では h3 と本文のリズムを整える ─── */
@media (max-width: 767px) {
	.contact-privacy__body {
		gap: var(--space-5);
	}

	.contact-privacy__group {
		padding-left: var(--space-3);
		border-left-width: 2px;
	}

	.contact-privacy__group-title {
		font-size: 0.9375rem;
		margin-bottom: var(--space-2);
	}

	.contact-privacy__list li {
		font-size: 0.875rem;
	}
}

/* ─── Access：SP で dt/dd の縦並び時に余白を最適化 ─── */
@media (max-width: 639px) {
	.contact-access__card {
		padding: var(--space-5);
		gap: var(--space-3);
	}

	.contact-access__row {
		gap: 4px;
	}

	.contact-access__row dt {
		font-size: var(--fs-xs);  /* 11px→12px：SPでもアクセス情報のラベル可読性を確保 */
		min-width: auto;
	}

	.contact-access__link {
		padding-top: var(--space-3);
	}
}

/* ─── Thanks 3カードグリッド（タブレット 2カラム時の3枚目独占行を回避） ───
   3カードは 768〜1023px では「2＋1」になり、3枚目だけ広く間延びする。
   ≥768px でカードを `max-width: 480px` 級にして自然中央寄せにし、
   3枚目の単独行でも視覚的バランスを保つ。 */
@media (min-width: 768px) and (max-width: 1023px) {
	.contact-thanks-next__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
	}

	/* 3枚目（最後の li）は2カラムにまたがらず、左寄せでカード幅を保つ */
	.contact-thanks-next__grid > li:nth-child(3) {
		grid-column: 1 / -1;
	}

	.contact-thanks-next__grid > li:nth-child(3) .contact-thanks-next__card {
		max-width: 560px;
		margin-inline: auto;
	}
}

/* ─── Thanks カード：SP では padding と gap を引き締めて密度高く ─── */
@media (max-width: 639px) {
	.contact-thanks-next__card {
		padding: var(--space-4) var(--space-5);
		gap: var(--space-2);
		border-radius: 14px;
	}

	.contact-thanks-next__card-icon {
		width: 52px;
		height: 52px;
	}

	.contact-thanks-next__card-title {
		font-size: 1.0625rem;  /* 17px */
	}

	.contact-thanks-next__card-desc {
		font-size: 0.875rem;
	}
}

/* ─── Thanks Info（連絡先）：SP の縦配置を最適化 ─── */
@media (max-width: 639px) {
	.contact-thanks-info__card {
		padding: var(--space-5);
		gap: var(--space-4);
	}

	.contact-thanks-info__primary {
		align-items: center;
	}

	.contact-thanks-info__list {
		padding-top: var(--space-4);
		gap: var(--space-3);
	}

	.contact-thanks-info__row {
		gap: 4px;
	}

	.contact-thanks-info__row dt {
		font-size: var(--fs-xs);  /* 11px→12px：SPでもthanks情報のラベル可読性を確保 */
		min-width: auto;
	}

	.contact-thanks-info__row dd {
		font-size: 0.875rem;
	}
}

/* ─── Thanks Back（ホームに戻る）：SP では中央配置、ボタンは画面幅 ─── */
@media (max-width: 639px) {
	.contact-thanks-back {
		padding-block: var(--space-7);
	}
}

/* ─── タッチ端末対応：hover の transform を全面抑制 ─── */
@media (hover: none) {
	.contact-form__topic-option:hover,
	.contact-faq__q:hover,
	.contact-thanks-next__card:hover {
		transform: none;
	}

	.contact-thanks-next__card:hover {
		border-color: var(--color-border-subtle);
		box-shadow: none;
	}

	.contact-thanks-next__card:hover .contact-thanks-next__card-arrow {
		transform: none;
		color: var(--color-text-muted);
	}

	.contact-tel__number:hover,
	.contact-thanks-info__number:hover {
		color: var(--color-brand);
	}
}

/* ─── 横スクロール禁止の最終保険：contact 系のページ全体に念押し ─── */
.contact-hero,
.contact-thanks-hero,
.contact-form-section,
.contact-tel,
.contact-faq,
.contact-privacy,
.contact-access,
.contact-thanks-next,
.contact-thanks-info,
.contact-thanks-back {
	max-width: 100%;
}


/* CF7 出力スタイルは components.css に移管（全ページ共通で動作させるため）。 */