/**
 * css/pages/contact.css
 * ============================================================
 * A LEGEND 2：Contact Page
 * ============================================================
 *
 * 役割：
 * - page-contact.php とContactフォーム表示を装飾します。
 *
 * 今回の改修：
 * - Contactページ背景の固定水色・紫グローを
 *   --aleg2-glow-primary / --aleg2-glow-secondary へ置換します。
 * - フォーム/確認/完了/フォールバックの固定白半透明グラデーションを
 *   --aleg2-glass-bg / --aleg2-glass-bg-strong へ置換します。
 * - 入力欄の固定黒背景 rgba(0,0,0,0.22) を
 *   --aleg2-color-surface / --aleg2-glass-bg へ置換します。
 * - focus時の固定シアンbox-shadowを --aleg2-focus-ring へ置換します。
 * - error / notice の固定rgba背景・borderを
 *   --aleg2-color-danger / --aleg2-color-success ベースの color-mix へ置換します。
 * - タイトル・eyebrow・説明文・labelをDesign Tokenへ接続します。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 *
 * 追加の今回改修：
 * - 新しいContact表示基盤 template-parts/contact/* のclassへ対応します。
 * - .aleg2-contact ラッパー、intro、errors、pre-links、captcha、confirm、
 *   complete、faq、disabled まで一式装飾します。
 * - 旧HTML構造の .aleg2-contact-form__error / __notice も維持します。
 * - 新HTML構造の .aleg2-contact-errors / .aleg2-contact-info も追加します。
 * - 固定ヘッダー直下でContactヘッダーが詰まらないよう、
 *   上余白を --aleg2-header-height へ接続します。
 *
 * フォーム角丸トークン改修：
 * - input / select は --aleg2-radius-input を参照します。
 * - textarea は --aleg2-radius-textarea を参照します。
 * - button 用の --aleg2-radius-button を入力欄へ流用しないことで、
 *   ボタンをピル型にしても複数行入力欄が過剰に丸くならないようにします。
 */

/* ------------------------------------------------------------
 * Contact page root
 * ------------------------------------------------------------
 *
 * Contactページ全体の土台です。
 *
 * 注意：
 * - min-height:70vh はフォームが短い場合でも画面下部が詰まらないよう維持します。
 * - padding-bottom はsection tokenへ接続し、全体余白設定へ追従させます。
 * - overflow:hidden は背景グローが横にはみ出してページ幅を壊さないよう維持します。
 */
.aleg2-contact-page {
	position: relative;
	min-height: 70vh;
	padding-bottom: var(--aleg2-section-padding-y-sm);
	overflow: hidden;
}

/**
 * Contactページ背景グロー。
 *
 * 旧コードでは rgba(142,230,255,0.1) / rgba(182,140,255,0.1) の
 * 固定水色・紫でした。
 *
 * 改修後：
 * - --aleg2-glow-primary
 * - --aleg2-glow-secondary
 *
 * これにより、管理画面のデザイン色を変更した場合に、
 * Contactページ背景の色味も連動します。
 */
.aleg2-contact-page::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 12% 18%, var(--aleg2-glow-primary), transparent 34vw),
		radial-gradient(circle at 86% 42%, var(--aleg2-glow-secondary), transparent 32vw);
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かない設計です。
 * その場合はContactページ共通の発光背景も停止します。
 */
body:not(.aleg2-bg-glow) .aleg2-contact-page::before {
	display: none;
}

/* ------------------------------------------------------------
 * Top / Header
 * ------------------------------------------------------------
 *
 * Contactページ上部のパンくず・タイトルエリアです。
 *
 * Contactは専用テンプレートですが、固定ページと同じく
 * content.breadcrumb.show_on_page に従います。
 * 固定ヘッダー・管理バーからの退避余白は .aleg2-contact-page__top に集約し、
 * パンくずON/OFFのどちらでも見出しがヘッダー下へ潜らないようにします。
 */
.aleg2-contact-page__top {
	width: 100%;
	padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--aleg2-header-height, 80px) + clamp(24px, 4vw, 56px));
}

.aleg2-contact-page__top > .aleg2-breadcrumb {
	margin-bottom: clamp(20px, 3vw, 36px);
}

.aleg2-contact-page__header {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	padding-bottom: clamp(36px, 6vw, 72px);
	margin-inline: auto;
	text-align: center;
}

/**
 * Eyebrow。
 *
 * Contactページの小見出しラベルです。
 * 英字ラベルとして表示される想定のため、latin fontへ接続します。
 */
.aleg2-contact-page__eyebrow {
	display: inline-flex;
	gap: var(--aleg2-space-2);
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--aleg2-space-4);
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wider);
	line-height: 1.4;
	text-transform: uppercase;
}

/**
 * eyebrow左右の装飾線。
 *
 * currentColorを使うことで、eyebrow色に追従します。
 */
.aleg2-contact-page__eyebrow::before,
.aleg2-contact-page__eyebrow::after {
	width: 34px;
	height: 1px;
	background: currentColor;
	content: "";
}

/**
 * Contactページタイトル。
 *
 * 見出しfont / heading色へ接続し、デザイン設定に追従させます。
 */
.aleg2-contact-page__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(2.2rem, 1.35rem + 4.8vw, 6.4rem);
	line-height: var(--aleg2-line-height-tight);
	letter-spacing: var(--aleg2-letter-spacing-tight);
	text-wrap: balance;
}

/**
 * Contactページ説明文。
 *
 * 既存の最大幅・中央寄せ・行高は維持します。
 */
.aleg2-contact-page__description {
	max-width: 680px;
	margin: var(--aleg2-space-6) auto 0;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-md);
	line-height: 2;
}

/* ------------------------------------------------------------
 * Body wrapper
 * ------------------------------------------------------------
 *
 * Contactフォーム本体の幅を制御します。
 */
.aleg2-contact-page__body {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	margin-inline: auto;
}

/* ------------------------------------------------------------
 * Contact module wrapper
 * ------------------------------------------------------------
 *
 * inc/contact/render.php が出力するContact本体ラッパーです。
 *
 * page-contact.php 側の見出しと、Contact本体の余白を分離します。
 */
.aleg2-contact {
	display: grid;
	gap: var(--aleg2-space-6);
	color: var(--aleg2-color-text);
}

/**
 * shortcode表示時もページ内に自然に収まるようにします。
 */
.aleg2-contact--source-shortcode {
	width: 100%;
}

/* ------------------------------------------------------------
 * Form panels
 * ------------------------------------------------------------
 *
 * Contactフォーム、確認画面、完了画面、fallback表示の共通パネルです。
 *
 * 旧コード：
 * - background: rgba(255,255,255,0.09) / rgba(255,255,255,0.032)
 * - border-radius: var(--aleg2-radius-xl)
 *
 * 改修後：
 * - background: var(--aleg2-glass-bg-strong) / var(--aleg2-glass-bg)
 * - border-radius: var(--aleg2-radius-panel)
 *
 * 固定色を使わず、テーマ全体のsurface / glass表現に揃えます。
 */
.aleg2-contact-page__fallback,
.aleg2-contact-form,
.aleg2-contact-confirm,
.aleg2-contact-complete,
.aleg2-contact-disabled,
.aleg2-contact-intro,
.aleg2-contact-prelinks,
.aleg2-contact-faq {
	padding: clamp(28px, 5vw, 56px);
	color: var(--aleg2-color-text);
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong),
			var(--aleg2-glass-bg)
		);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-panel);
	box-shadow: var(--aleg2-shadow-card);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

/**
 * フォーム本体は section の内側に form が入る新構造にも対応します。
 *
 * template-parts/contact/form.php では
 * .aleg2-contact-form-section の中に .aleg2-contact-form が入るため、
 * section側は余白を担当せず、form側をパネルとして扱います。
 */
.aleg2-contact-form-section {
	display: grid;
	gap: var(--aleg2-space-5);
}

.aleg2-contact-form-section__header {
	text-align: center;
}

.aleg2-contact-form-section__title,
.aleg2-contact-confirm__title,
.aleg2-contact-complete__title,
.aleg2-contact-disabled__title,
.aleg2-contact-prelinks__title,
.aleg2-contact-faq__title,
.aleg2-contact-intro__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	line-height: var(--aleg2-line-height-tight);
	letter-spacing: var(--aleg2-letter-spacing-tight);
	text-wrap: balance;
}

.aleg2-contact-form-section__title,
.aleg2-contact-confirm__title,
.aleg2-contact-complete__title,
.aleg2-contact-disabled__title {
	font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.2rem);
}

.aleg2-contact-form-section__note,
.aleg2-contact-confirm__note,
.aleg2-contact-complete__message,
.aleg2-contact-disabled__message {
	max-width: 680px;
	margin: var(--aleg2-space-4) auto 0;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.9;
}

/* ------------------------------------------------------------
 * Contact intro
 * ------------------------------------------------------------
 *
 * shortcodeなどでContact本体側のintroを表示する場合の装飾です。
 * page-contact.php では show_intro=false のため通常は重複しません。
 */
.aleg2-contact-intro__inner {
	display: grid;
	gap: var(--aleg2-space-6);
}

.aleg2-contact-intro__header {
	text-align: center;
}

.aleg2-contact-intro__eyebrow {
	display: inline-flex;
	gap: var(--aleg2-space-2);
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--aleg2-space-3);
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wider);
	line-height: 1.4;
	text-transform: uppercase;
}

.aleg2-contact-intro__title {
	font-size: clamp(1.8rem, 1.25rem + 2.4vw, 3.2rem);
}

.aleg2-contact-intro__description,
.aleg2-contact-intro__notes-text {
	max-width: 720px;
	margin: var(--aleg2-space-4) auto 0;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.9;
}

.aleg2-contact-intro__notes {
	padding: var(--aleg2-space-5);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
}

.aleg2-contact-intro__notes-title,
.aleg2-contact-intro__list-title {
	margin: 0 0 var(--aleg2-space-3);
	color: var(--aleg2-color-heading);
	font-size: var(--aleg2-font-size-md);
	line-height: 1.5;
}

.aleg2-contact-intro__sla {
	margin: var(--aleg2-space-4) 0 0;
	color: var(--aleg2-color-primary);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 800;
	line-height: 1.7;
}

.aleg2-contact-intro__info {
	display: grid;
	gap: var(--aleg2-space-3);
	margin: 0;
	padding: var(--aleg2-space-5);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
}

.aleg2-contact-intro__info-row {
	display: grid;
	grid-template-columns: minmax(7em, 0.34fr) 1fr;
	gap: var(--aleg2-space-3);
	align-items: start;
}

.aleg2-contact-intro__info-label {
	color: var(--aleg2-color-heading);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	line-height: 1.7;
}

.aleg2-contact-intro__info-value {
	margin: 0;
	color: var(--aleg2-color-text);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.7;
}

.aleg2-contact-intro__info-value a {
	color: var(--aleg2-color-primary);
	text-decoration: none;
}

.aleg2-contact-intro__info-value a:hover {
	text-decoration: underline;
}

.aleg2-contact-intro__lists {
	display: grid;
	gap: var(--aleg2-space-4);
}

.aleg2-contact-intro__list-section {
	padding: var(--aleg2-space-5);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
}

.aleg2-contact-intro__list {
	display: grid;
	gap: var(--aleg2-space-2);
	margin: 0;
	padding-left: 1.25em;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.8;
}

/* ------------------------------------------------------------
 * Pre links
 * ------------------------------------------------------------
 *
 * フォーム送信前に見てほしい関連ページリンクです。
 */
.aleg2-contact-prelinks__inner {
	display: grid;
	gap: var(--aleg2-space-5);
}

.aleg2-contact-prelinks__header {
	text-align: center;
}

.aleg2-contact-prelinks__title {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.8rem);
}

.aleg2-contact-prelinks__list {
	display: grid;
	gap: var(--aleg2-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aleg2-contact-prelinks__item {
	display: grid;
	gap: var(--aleg2-space-2);
}

.aleg2-contact-prelinks__link {
	display: flex;
	gap: var(--aleg2-space-3);
	align-items: center;
	justify-content: space-between;
	padding: var(--aleg2-space-4);
	color: var(--aleg2-color-heading);
	text-decoration: none;
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-contact-prelinks__link:hover {
	color: var(--aleg2-color-primary);
	background: var(--aleg2-glass-bg-strong);
	border-color: var(--aleg2-color-primary);
	transform: translateY(-1px);
}

.aleg2-contact-prelinks__link:focus-visible {
	outline: none;
	box-shadow: var(--aleg2-focus-ring);
}

.aleg2-contact-prelinks__link-text {
	font-weight: 800;
	line-height: 1.5;
}

.aleg2-contact-prelinks__link-arrow {
	flex: 0 0 auto;
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-weight: 900;
}

.aleg2-contact-prelinks__description {
	margin: 0;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-xs);
	line-height: 1.7;
}

/* ------------------------------------------------------------
 * Form rows
 * ------------------------------------------------------------
 *
 * 入力行同士の間隔です。
 *
 * 既存の隣接セレクタを維持し、HTML側に余計なclassを増やしません。
 */
.aleg2-contact-form__row + .aleg2-contact-form__row {
	margin-top: var(--aleg2-space-5);
}

.aleg2-contact-form__fields {
	display: grid;
	gap: var(--aleg2-space-5);
}

.aleg2-contact-form__row + .aleg2-contact-form__row {
	margin-top: 0;
}

.aleg2-contact-form__control {
	display: grid;
	gap: var(--aleg2-space-2);
}

/* ------------------------------------------------------------
 * Labels
 * ------------------------------------------------------------
 *
 * Contactフォームのlabel表示です。
 */
.aleg2-contact-form label,
.aleg2-contact-form__label {
	display: block;
	margin-bottom: var(--aleg2-space-2);
	color: var(--aleg2-color-heading);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 800;
	line-height: 1.5;
}

.aleg2-contact-form__label {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	align-items: center;
	justify-content: space-between;
}

.aleg2-contact-form__label-text {
	min-width: 0;
}

.aleg2-contact-form__required,
.aleg2-contact-form__optional {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.6em;
	padding: 0.1em 0.65em;
	border-radius: 999px;
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	line-height: 1.2;
}

.aleg2-contact-form__required {
	color: var(--aleg2-color-danger);
	background: color-mix(in srgb, var(--aleg2-color-danger) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--aleg2-color-danger) 36%, transparent);
}

.aleg2-contact-form__optional {
	color: var(--aleg2-color-text-muted);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
}

/* ------------------------------------------------------------
 * Form controls
 * ------------------------------------------------------------
 *
 * input / textarea / select の共通スタイルです。
 *
 * 旧コード：
 * - background: rgba(0,0,0,0.22)
 * - border-radius: var(--aleg2-radius-button)
 *
 * 改修後：
 * - background: var(--aleg2-color-surface)
 * - box-shadow: inset border補助
 * - input / select は var(--aleg2-radius-input) を使います。
 * - textarea は下の専用ルールで var(--aleg2-radius-textarea) に上書きします。
 *
 * 固定黒背景をやめ、ライト系プリセットでも読める入力欄にします。
 * また、button用角丸をフォーム入力欄へ流用しないことで、
 * ボタンをピル型にしてもtextareaが丸くなりすぎない設計にします。
 */
.aleg2-contact-form input[type="text"],
.aleg2-contact-form input[type="email"],
.aleg2-contact-form input[type="tel"],
.aleg2-contact-form input[type="url"],
.aleg2-contact-form textarea,
.aleg2-contact-form select {
	width: 100%;
	min-height: 48px;
	padding: 0.8em 1em;
	color: var(--aleg2-color-text);
	background:
		linear-gradient(
			180deg,
			var(--aleg2-glass-bg),
			var(--aleg2-color-surface)
		);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-input);
	outline: none;
	box-shadow: inset 0 0 0 1px transparent;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

/**
 * placeholder色。
 *
 * 入力補助文がある場合もmuted tokenへ追従させます。
 */
.aleg2-contact-form input::placeholder,
.aleg2-contact-form textarea::placeholder {
	color: var(--aleg2-color-text-faint);
}

/**
 * textarea固有設定。
 *
 * 既存の高さ・縦リサイズを維持します。
 *
 * 今回の改修：
 * - 複数行入力欄は var(--aleg2-radius-textarea) を参照します。
 * - input / select 用の var(--aleg2-radius-input) と分離し、
 *   ボタンや1行入力欄をピル型にしても、textareaは自然な角丸に保てるようにします。
 */
.aleg2-contact-form textarea {
	min-height: 180px;
	border-radius: var(--aleg2-radius-textarea);
	resize: vertical;
}

/**
 * selectの見た目補助。
 *
 * ブラウザ標準UIを残しつつ、背景色だけテーマ側に合わせます。
 */
.aleg2-contact-form select {
	cursor: pointer;
}

/**
 * 入力欄focus。
 *
 * 旧コードでは 0 0 0 3px rgba(142,230,255,0.16) の固定シアンでした。
 * 今回は --aleg2-focus-ring を使い、focus色もDesign Tokenへ追従させます。
 */
.aleg2-contact-form input:focus,
.aleg2-contact-form textarea:focus,
.aleg2-contact-form select:focus {
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-focus-ring);
}

.aleg2-contact-form__help {
	margin: 0;
	color: var(--aleg2-color-text-faint);
	font-size: var(--aleg2-font-size-xs);
	line-height: 1.6;
}

/**
 * checkbox。
 *
 * 同意チェックなどを読みやすく表示します。
 */
.aleg2-contact-form__checkbox {
	display: flex;
	gap: var(--aleg2-space-3);
	align-items: flex-start;
	margin: 0;
	padding: var(--aleg2-space-4);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
	cursor: pointer;
}

.aleg2-contact-form__checkbox-input {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.2em;
	accent-color: var(--aleg2-color-primary);
}

.aleg2-contact-form__checkbox-text {
	color: var(--aleg2-color-text);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 700;
	line-height: 1.7;
}

.aleg2-contact-form__privacy-link {
	margin: var(--aleg2-space-2) 0 0;
	font-size: var(--aleg2-font-size-xs);
	line-height: 1.7;
}

.aleg2-contact-form__privacy-link a {
	color: var(--aleg2-color-primary);
	text-decoration: none;
}

.aleg2-contact-form__privacy-link a:hover {
	text-decoration: underline;
}

/**
 * Honeypot。
 *
 * bot対策用の隠し項目です。
 * display:none ではなく、視覚的に隠すことで一部botが入力する余地を残します。
 */
.aleg2-contact-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------
 * CAPTCHA
 * ------------------------------------------------------------
 *
 * reCAPTCHA / Turnstile の表示枠です。
 */
.aleg2-contact-captcha-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--aleg2-space-6);
}

.aleg2-contact-captcha {
	max-width: 100%;
}

.aleg2-contact-captcha--not-ready {
	width: 100%;
	padding: var(--aleg2-space-4);
	color: var(--aleg2-color-warning, var(--aleg2-color-primary));
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
}

.aleg2-contact-captcha__notice {
	margin: 0;
	font-size: var(--aleg2-font-size-xs);
	line-height: 1.7;
	text-align: center;
}

/* ------------------------------------------------------------
 * Actions
 * ------------------------------------------------------------
 *
 * 送信・戻る・完了後リンクなどのボタン配置です。
 *
 * 設計：
 * - 色、背景、枠線、影、hover挙動は css/components/button.css の
 *   .aleg2-button / .aleg2-button--primary / .aleg2-button--ghost に委譲します。
 * - Contact側は、フォーム画面内での配置、折り返し、最小幅だけを担当します。
 * - これにより、design.buttons.style / hover_lift / hover_amount や
 *   --aleg2-color-on-primary などの共通ボタン設定へContactも追従します。
 */
.aleg2-contact-form__actions,
.aleg2-contact-confirm__actions,
.aleg2-contact-complete__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-3);
	justify-content: center;
	margin-top: var(--aleg2-space-8);
}

/**
 * 確認画面の送信ボタンはform要素内にあるため、
 * form自体もボタンと同じ並びのflex itemとして扱います。
 */
.aleg2-contact-confirm__form {
	display: inline-flex;
	margin: 0;
}

.aleg2-contact-form__submit,
.aleg2-contact-confirm__submit,
.aleg2-contact-confirm__back,
.aleg2-contact-complete__home {
	min-width: min(100%, 240px);
}

/**
 * button要素のContact CTA。
 *
 * 共通 .aleg2-button は a / button の両方へ使う想定ですが、
 * type="submit" のブラウザ既定外観が残らないよう、Contact側でも安全に補助します。
 * 色や背景は共通ボタンへ任せ、ここでは操作感に関わる最低限だけを持ちます。
 */
.aleg2-contact-form__submit,
.aleg2-contact-confirm__submit {
	appearance: none;
	cursor: pointer;
}

/* ------------------------------------------------------------
 * Error / Notice
 * ------------------------------------------------------------
 *
 * フォームエラー・通知メッセージの共通土台です。
 */
.aleg2-contact-form__error,
.aleg2-contact-form__notice {
	padding: var(--aleg2-space-4);
	margin-bottom: var(--aleg2-space-5);
	border-radius: var(--aleg2-radius-card);
}

/**
 * Error message。
 *
 * 旧コードでは固定danger rgbaでした。
 * 今回は --aleg2-color-danger を color-mix で薄く使います。
 */
.aleg2-contact-form__error {
	color: var(--aleg2-color-danger);
	background: color-mix(in srgb, var(--aleg2-color-danger) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--aleg2-color-danger) 36%, transparent);
}

/**
 * Notice message。
 *
 * 旧コードでは固定success rgbaでした。
 * 今回は --aleg2-color-success を color-mix で薄く使います。
 */
.aleg2-contact-form__notice {
	color: var(--aleg2-color-success);
	background: color-mix(in srgb, var(--aleg2-color-success) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--aleg2-color-success) 36%, transparent);
}

/**
 * 新しい errors.php 用の通知表示。
 *
 * role="alert" / role="status" はテンプレート側で付与済みです。
 */
.aleg2-contact-notices {
	display: grid;
	gap: var(--aleg2-space-3);
}

.aleg2-contact-errors,
.aleg2-contact-info {
	padding: var(--aleg2-space-4);
	border-radius: var(--aleg2-radius-card);
}

.aleg2-contact-errors {
	color: var(--aleg2-color-danger);
	background: color-mix(in srgb, var(--aleg2-color-danger) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--aleg2-color-danger) 36%, transparent);
}

.aleg2-contact-info {
	color: var(--aleg2-color-success);
	background: color-mix(in srgb, var(--aleg2-color-success) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--aleg2-color-success) 36%, transparent);
}

.aleg2-contact-errors__title {
	margin: 0 0 var(--aleg2-space-2);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 900;
	line-height: 1.5;
}

.aleg2-contact-errors__list,
.aleg2-contact-info__list {
	display: grid;
	gap: var(--aleg2-space-1);
	margin: 0;
	padding-left: 1.25em;
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.7;
}

/**
 * color-mix非対応環境向けの保険です。
 *
 * 固定rgbaへ戻さず、glass背景とtoken色で最低限成立させます。
 */
@supports not (color: color-mix(in srgb, #fff 50%, #000)) {
	.aleg2-contact-form__error,
	.aleg2-contact-form__notice,
	.aleg2-contact-errors,
	.aleg2-contact-info,
	.aleg2-contact-form__required {
		background: var(--aleg2-glass-bg);
		border-color: var(--aleg2-color-border);
	}
}

/* ------------------------------------------------------------
 * Confirm
 * ------------------------------------------------------------
 *
 * 確認画面のdlレイアウトです。
 */
.aleg2-contact-confirm__inner,
.aleg2-contact-complete__inner,
.aleg2-contact-disabled__inner {
	display: grid;
	gap: var(--aleg2-space-5);
}

.aleg2-contact-confirm__header,
.aleg2-contact-complete__header,
.aleg2-contact-disabled__inner {
	text-align: center;
}

.aleg2-contact-confirm__body {
	padding: var(--aleg2-space-5);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
}

.aleg2-contact-confirm__list {
	display: grid;
	gap: var(--aleg2-space-4);
	margin: 0;
}

.aleg2-contact-confirm__row {
	display: grid;
	grid-template-columns: minmax(9em, 0.34fr) 1fr;
	gap: var(--aleg2-space-4);
	align-items: start;
	padding-bottom: var(--aleg2-space-4);
	border-bottom: 1px solid var(--aleg2-color-border);
}

.aleg2-contact-confirm__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.aleg2-contact-confirm__label {
	color: var(--aleg2-color-heading);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 900;
	line-height: 1.7;
}

.aleg2-contact-confirm__value {
	margin: 0;
	color: var(--aleg2-color-text);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.8;
	white-space: normal;
	overflow-wrap: anywhere;
}

.aleg2-contact-confirm__empty {
	color: var(--aleg2-color-text-faint);
	font-style: italic;
}

/* ------------------------------------------------------------
 * Complete
 * ------------------------------------------------------------
 *
 * 送信完了画面です。
 */
.aleg2-contact-complete {
	text-align: center;
}

.aleg2-contact-complete__icon {
	display: inline-grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin-inline: auto;
	color: var(--aleg2-color-success);
	font-family: var(--aleg2-font-latin);
	font-size: 2rem;
	font-weight: 900;
	background: color-mix(in srgb, var(--aleg2-color-success) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--aleg2-color-success) 36%, transparent);
	border-radius: 999px;
}

/* ------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------
 *
 * details / summary を使ったJS不要のFAQです。
 */
.aleg2-contact-faq__inner {
	display: grid;
	gap: var(--aleg2-space-5);
}

.aleg2-contact-faq__header {
	text-align: center;
}

.aleg2-contact-faq__title {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.8rem);
}

.aleg2-contact-faq__items {
	display: grid;
	gap: var(--aleg2-space-3);
}

.aleg2-contact-faq__item {
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
	overflow: hidden;
}

.aleg2-contact-faq__question {
	display: flex;
	gap: var(--aleg2-space-3);
	align-items: flex-start;
	padding: var(--aleg2-space-4);
	color: var(--aleg2-color-heading);
	font-weight: 900;
	line-height: 1.6;
	cursor: pointer;
}

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

.aleg2-contact-faq__question::after {
	margin-left: auto;
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-weight: 900;
	content: "+";
}

.aleg2-contact-faq__item[open] .aleg2-contact-faq__question::after {
	content: "−";
}

.aleg2-contact-faq__question:focus-visible {
	outline: none;
	box-shadow: var(--aleg2-focus-ring);
}

.aleg2-contact-faq__question-mark,
.aleg2-contact-faq__answer-mark {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 1.8em;
	height: 1.8em;
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	background: var(--aleg2-glass-bg-strong);
	border: 1px solid var(--aleg2-color-border);
	border-radius: 999px;
}

.aleg2-contact-faq__answer {
	display: flex;
	gap: var(--aleg2-space-3);
	padding: 0 var(--aleg2-space-4) var(--aleg2-space-4);
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.8;
}

.aleg2-contact-faq__answer-text > :first-child {
	margin-top: 0;
}

.aleg2-contact-faq__answer-text > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
 * Disabled / fallback
 * ------------------------------------------------------------
 *
 * フォーム無効時と機能未読み込み時の表示です。
 */
.aleg2-contact-page__fallback,
.aleg2-contact-disabled {
	text-align: center;
}

.aleg2-contact-page__fallback p {
	margin: 0;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.8;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存の640px以下の余白・ボタン配置調整を維持します。
 */
@media (max-width: 640px) {
	.aleg2-contact-page__header {
		padding-top: calc(var(--aleg2-header-height, 72px) + var(--aleg2-space-5));
	}

	.aleg2-contact-page__eyebrow::before,
	.aleg2-contact-page__eyebrow::after {
		width: 24px;
	}

	.aleg2-contact-page__fallback,
	.aleg2-contact-form,
	.aleg2-contact-confirm,
	.aleg2-contact-complete,
	.aleg2-contact-disabled,
	.aleg2-contact-intro,
	.aleg2-contact-prelinks,
	.aleg2-contact-faq {
		padding: var(--aleg2-space-5);
		border-radius: var(--aleg2-radius-panel);
	}

	.aleg2-contact-form__actions,
	.aleg2-contact-confirm__actions,
	.aleg2-contact-complete__actions {
		display: grid;
	}

	.aleg2-contact-confirm__form,
	.aleg2-contact-form__submit,
	.aleg2-contact-confirm__submit,
	.aleg2-contact-confirm__back,
	.aleg2-contact-complete__home {
		width: 100%;
	}

	.aleg2-contact-confirm__row,
	.aleg2-contact-intro__info-row {
		grid-template-columns: 1fr;
		gap: var(--aleg2-space-2);
	}

	.aleg2-contact-confirm__body,
	.aleg2-contact-intro__notes,
	.aleg2-contact-intro__info,
	.aleg2-contact-intro__list-section {
		padding: var(--aleg2-space-4);
	}

	.aleg2-contact-faq__question,
	.aleg2-contact-faq__answer {
		padding-inline: var(--aleg2-space-4);
	}
}