@charset "UTF-8";

/**
 * Matching Theme - 共通スタイル
 */

/* ========== 変数 ========== */
/* フォント・ベースサイズ・行間は destyle.css の html / 要素ルールに任せる */
:root {
	/* Mac / Win 共通（matching-fonts.css で @font-face 読み込み） */
	--matching-font-sans: "Noto Sans JP", sans-serif;
	/* Stone 系ページ背景 */
	--matching-gradient-page: linear-gradient(165deg, #f8f7f6 0%, #ffffff 42%, #f2f1f0 100%);
	--matching-gradient-login-base:
		radial-gradient(1200px 600px at 0% 0%, rgba(0, 119, 199, 0.18) 0%, rgba(0, 119, 199, 0) 55%),
		linear-gradient(135deg, #1b1f2a 0%, #111827 52%, #0f172a 100%);
	--matching-gradient-login-mesh:
		radial-gradient(ellipse 120% 80% at 50% -30%, rgba(0, 119, 199, 0.18), transparent 55%),
		radial-gradient(ellipse 70% 50% at 100% 0%, rgba(129, 140, 248, 0.12), transparent 45%),
		radial-gradient(ellipse 60% 45% at 0% 100%, rgba(14, 165, 233, 0.08), transparent 50%),
		linear-gradient(168deg, #06080d 0%, #0c1018 42%, #0a0e14 100%);
	--matching-footer-bg: linear-gradient(165deg, #0f172a 0%, #1e293b 52%, #0f172a 100%);
	--matching-footer-text: rgba(226, 232, 240, 0.88);
	--matching-header-scrim: rgba(255, 255, 255, 0.82);
	/* DESIGN.md パレット（--matching-*） */
	--matching-color-text: #23221e;
	--matching-color-link: #0071c1;
	--matching-color-link-hover: #005a9a;
	--matching-color-primary: #0077c7;
	--matching-color-primary-hover: #0066ad;
	--matching-color-accent: #0f766e;
	--matching-color-secondary: #4e4c49;
	--matching-color-muted: #706d65;
	--matching-color-border: #d6d3d0;
	--matching-color-bg: #ffffff;
	--matching-color-surface: #f8f7f6;
	/* シート・フォーム共通（表のヘッダ背景・ラベル色など） */
	--matching-color-surface-alt: #edebe8;
	--matching-color-bg-soft: #f7f7f5;
	--matching-color-label: #706d65;
	--matching-color-heading: #23221e;
	--matching-color-danger: #e01e5a;
	--matching-color-warning: #ffcc17;
	/* 必須バッジ専用赤（destyle 由来の濃赤、--matching-color-danger とは別系統） */
	--matching-color-required: #c5221f;
	/* セマンティック 3 値セット（CF7 結果メッセージ等で .matching-form-message が参照） */
	--matching-color-warning-bg: #fffbeb;
	--matching-color-warning-border: #b45309;
	--matching-color-warning-text: #92400e;
	--matching-color-danger-bg: #fef2f2;
	--matching-color-danger-border: #b91c1c;
	--matching-color-danger-text: #991b1b;
	--matching-color-success-bg: #f0fdf4;
	--matching-color-success-border: #15803d;
	--matching-color-success-text: #166534;
	--matching-color-info-bg: color-mix(in srgb, var(--matching-color-primary) 8%, #ffffff 92%);
	--matching-color-info-border: var(--matching-color-primary);
	--matching-color-info-text: var(--matching-color-primary-hover);
	/* レイアウト・スペーシング */
	--matching-container-max: 1320px;
	--matching-footer-nav-inset: 0.45rem;
	--matching-spacing: 1.6rem;
	/* 公開面共通スペーシング（4px グリッド、1rem≈10px 前提） */
	--matching-space-1: 0.4rem;
	--matching-space-2: 0.8rem;
	--matching-space-3: 1.6rem;
	--matching-space-4: 2.4rem;
	--matching-space-5: 4rem;
	/* 公開面ブレークポイント（メディアクエリ式中では数値リテラルで使用） */
	--matching-bp-sm: 640px;
	--matching-bp-md: 768px;
	--matching-bp-lg: 1024px;
	--matching-line-height-body: 1.5;
	--matching-scrollbar-size: 8px;
	--matching-scrollbar-thumb: rgba(35, 34, 30, 0.28);
	--matching-scrollbar-thumb-hover: rgba(35, 34, 30, 0.42);
	--matching-radius: 8px;
	--matching-radius-sm: 6px;
	/* カード装飾（公開面のグルーピングコンテナ共通） */
	--matching-card-radius: calc(var(--matching-radius) + 6px);
	--matching-card-shadow: var(--matching-shadow-md);
	--matching-card-border: 1px solid var(--matching-color-border);
	--matching-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	--matching-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.09);
	--matching-shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.12);
	--matching-transition: 0.2s ease;
	/* 入力欄共通（.matching-search-form 検索 + CF7 系すべてが参照） */
	--matching-input-border-width: 1px;
	--matching-input-radius: var(--matching-radius-sm);
	--matching-input-min-height: 4rem;
	--matching-input-font-size: clamp(1.5rem, 0.2vw + 1.45rem, 1.6rem);
	--matching-input-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--matching-color-primary) 16%, transparent);
	/* ボタン（.btn / .contact-btn 共通）— destyle 62.5% 基準で「読める」16px 相当に底上げ */
	--matching-btn-font-size: clamp(1.58rem, 0.32vw + 1.44rem, 1.76rem);
	--matching-btn-padding-y: 1rem;
	--matching-btn-padding-x: 1.8rem;
	--matching-btn-min-height: 4.4rem;
	--matching-btn-border-width: 2px;
	/* 公開面タイポ階層（読みやすさ優先: 本文 1.6 / ラベル・補助 1.5 / 注釈下限 1.2） */
	--matching-text-min: 1.2rem;
	--matching-public-body-fs: 1.6rem;
	--matching-public-label-fs: 1.5rem;
	--matching-public-meta-fs: 1.5rem;
	--matching-public-lead-fs: 1.5rem;
	--matching-public-caption-fs: 1.5rem;
	--matching-public-nav-fs: 1.5rem;
	--matching-public-link-fs: 1.5rem;
	/* モバイルヘッダー: バー上 CTA は狭い幅でもロゴ・メニューと重ならないよう可変 */
	--matching-header-mobile-cta-fs: clamp(1.25rem, 3.4vw, 1.45rem);
	--matching-header-mobile-logo-max-w: min(10.5rem, 40vw);
	--matching-bookmark-btn-font-size: var(--matching-public-label-fs);
	--matching-bookmark-btn-font-size-compact: var(--matching-public-label-fs);
	/* 求人カード（一覧・トップ・マイページ・詳細ラベル共通） */
	--matching-req-card-label-fs: var(--matching-public-label-fs);
	--matching-req-card-value-fs: var(--matching-public-body-fs);
	--matching-req-card-catch-fs: var(--matching-public-body-fs);
	--matching-req-card-meta-fs: var(--matching-public-meta-fs);
	/* 求人カード余白（字サイズ 1.5/1.6rem に合わせたリズム） */
	--matching-req-card-gap: 1.25rem;
	--matching-req-card-header-mb: 1.35rem;
	--matching-req-card-header-pad-b: 1.15rem;
	--matching-req-card-dl-row-pad-y: 1rem;
	--matching-req-card-dl-gap: 0.55rem 1.4rem;
	--matching-req-card-meta-pad-y: 0.5rem;
	--matching-req-card-meta-pad-x: 1rem;
	--matching-req-card-meta-gap: 0.65rem;
	--matching-req-card-meta-line-height: 1.5;
	--matching-req-card-control-height: calc(
		(var(--matching-req-card-meta-pad-y) * 2) +
		(var(--matching-req-card-meta-fs) * var(--matching-req-card-meta-line-height)) +
		2px
	);
	--matching-req-card-catch-pad-y: 1.1rem;
	--matching-req-card-catch-pad-x: 1.25rem;
	--matching-req-card-more-mt: 1.35rem;
	--matching-req-card-more-pt: 1.15rem;
	--matching-bookmark-btn-min-height: 4rem;
	--matching-bookmark-btn-pad-y: 0.7rem;
	--matching-bookmark-btn-pad-x: 1.15rem;
	/* ========== CF7 公開面フォーム共通基底トークン（.matching-cf7-form スコープ） ==========
	 * matching-cf7-form.css の `.matching-cf7-form` ベースが参照する。
	 * 各 page-*.css は `:where(.page-profile-registration) .matching-cf7-form { --matching-cf7-th-fs: ... }`
	 * のようにスコープ内で上書きしてページ固有のサイズ差を表現する。
	 */
	--matching-cf7-table-radius: var(--matching-radius);
	--matching-cf7-table-border-color: color-mix(in srgb, var(--matching-color-border) 92%, var(--matching-color-muted) 8%);
	--matching-cf7-table-border-row: var(--matching-color-border);
	--matching-cf7-table-bg: var(--matching-color-bg);
	--matching-cf7-th-bg: linear-gradient(180deg, var(--matching-color-surface-alt) 0%, color-mix(in srgb, var(--matching-color-bg) 55%, var(--matching-color-surface-alt) 45%) 100%);
	--matching-cf7-th-color: var(--matching-color-heading);
	--matching-cf7-th-width: 28%;
	--matching-cf7-th-min-width: 11rem;
	--matching-cf7-th-fs: clamp(var(--matching-public-label-fs, 1.5rem), 0.38vw + 1.2rem, 1.55rem);
	--matching-cf7-th-fw: 600;
	--matching-cf7-th-lh: 1.5;
	--matching-cf7-cell-pad-y: clamp(0.88rem, 1.25vw + 0.56rem, 1.15rem);
	--matching-cf7-cell-pad-x: clamp(1rem, 1.6vw + 0.72rem, 1.55rem);
	--matching-cf7-cell-zebra: color-mix(in srgb, var(--matching-color-surface-alt) 18%, var(--matching-color-bg));
	--matching-cf7-td-color: var(--matching-color-heading);
	--matching-cf7-td-fs: clamp(1.55rem, 0.4vw + 1.32rem, 1.72rem);
	--matching-cf7-td-lh: 1.6;
	--matching-cf7-td-track: 0.024em;
	--matching-cf7-input-max: min(46rem, 100%);
	--matching-cf7-input-h: var(--matching-input-min-height);
	--matching-cf7-input-padding-y: 0.62rem;
	--matching-cf7-input-padding-x: 1.02rem;
	--matching-cf7-input-fs: var(--matching-cf7-td-fs);
	--matching-cf7-input-radius: var(--matching-input-radius);
	--matching-cf7-input-border: color-mix(in srgb, var(--matching-color-border) 78%, var(--matching-color-muted) 22%);
	--matching-cf7-input-border-hover: color-mix(in srgb, var(--matching-color-muted) 70%, var(--matching-color-text) 30%);
	--matching-cf7-input-focus-shadow: var(--matching-input-focus-shadow);
	--matching-cf7-textarea-min: 7.25em;
	--matching-cf7-caption-fs: max(var(--matching-public-label-fs, 1.5rem), calc(var(--matching-cf7-td-fs) - 0.32rem));
	--matching-cf7-caption-color: var(--matching-color-secondary);
	--matching-cf7-must-fs: max(var(--matching-text-min, 1.2rem), calc(var(--matching-cf7-th-fs) - 0.08rem));
	--matching-cf7-must-pad-y: 0.12em;
	--matching-cf7-must-pad-x: 0.45em;
	--matching-cf7-handling-max-h: 21rem;
	--matching-cf7-handling-pad-y: 1.1rem;
	--matching-cf7-handling-pad-x: 1.5rem;
	--matching-cf7-handling-prose-fs: clamp(1.38rem, 0.38vw + 1.14rem, 1.54rem);
	--matching-cf7-handling-prose-lh: 1.68;
	--matching-cf7-handling-prose-title-fs: clamp(1.58rem, 0.42vw + 1.38rem, 1.82rem);
	--matching-cf7-handling-prose-title-lh: 1.42;
	--matching-cf7-handling-ol-indent: 2.4rem;
	--matching-cf7-handling-ul-indent: 1.6rem;
	--matching-cf7-handling-text: var(--matching-color-heading);
	--matching-cf7-handling-text-sub: var(--matching-color-secondary);
	--matching-cf7-handling-text-meta: var(--matching-color-muted);
	--matching-cf7-handling-bg: var(--matching-color-surface-alt);
	--matching-cf7-handling-border: var(--matching-color-border);
	--matching-cf7-not-valid-color: var(--matching-color-danger-text);
	--matching-cf7-not-valid-fs: var(--matching-cf7-caption-fs);
	--matching-cf7-not-valid-prefix: '※ ';
	/* 個人情報同意（.form-check / CF7 [acceptance]） */
	--matching-cf7-consent-label-fs: clamp(var(--matching-public-label-fs, 1.5rem), 0.18vw + 1.35rem, 1.55rem);
	--matching-cf7-consent-label-lh: 1.55;
	--matching-cf7-consent-pad-y: 1.1rem;
	--matching-cf7-consent-pad-x: 1.35rem;
	--matching-cf7-consent-check-size: var(--matching-cf7-consent-label-fs);
	--matching-cf7-consent-check-radius: 4px;
	--matching-cf7-consent-check-border: 1px solid color-mix(in srgb, var(--matching-color-heading) 24%, var(--matching-color-border));
	--matching-cf7-consent-min-height: 3.35rem;
	/* Job Pochi ブランドアクセント（デザインカラーに合わせる） */
	--jp-coral: var(--matching-color-primary);
	--jp-coral-deep: var(--matching-color-primary-hover);
	--jp-navy: var(--matching-color-primary);
	--jp-peach: var(--matching-color-surface);
	--jp-cream: #ffffff;
	/* ヒーローグラデ（front-page など、Stone + Product Main） */
	--matching-gradient-hero:
		radial-gradient(1100px 520px at 12% 100%, color-mix(in srgb, var(--matching-color-primary) 22%, transparent) 0%, transparent 60%),
		radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--matching-color-accent) 18%, transparent) 0%, transparent 55%),
		linear-gradient(165deg, var(--matching-color-surface-alt) 0%, #ffffff 48%, var(--matching-color-surface) 100%);
}

/* destyle.css の a { width:100%; height:100%; } を打ち消すため、ボタン以外のリンクはここでリセットしない（.btn 側で打ち消す） */
a {
	color: var(--matching-color-link);
	text-decoration: none;
}
a:hover {
	color: var(--matching-color-link-hover);
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

html {
	scroll-behavior: smooth;
	font-family: var(--matching-font-sans);
}

body {
	font-family: var(--matching-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body:not(.matching-staff-dashboard-body):not(.matching-login-body) {
	font-size: 1.6rem;
	background: var(--matching-gradient-page);
	color: var(--matching-color-text);
	letter-spacing: 0;
	line-height: var(--matching-line-height-body);
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	min-height: 100vh;
	min-height: 100dvh;
}

/*
 * Win/Mac 表示差 — 公開面・ログイン・スタッフカード共通（ダッシュボードは dashboard-common.css）
 * destyle.css: letter-spacing:.12em / a{width,height:100%} / 768px+ で p,li,span 等 1.8rem を打ち消す。
 * class 付き要素は各 CSS の font-size を尊重する（span 等を一律 inherit にすると typography が死ぬ）。
 */
body:not(.matching-staff-dashboard-body) :where(
	p:not([class]),
	li:not([class]),
	span:not([class]),
	th:not([class]),
	td:not([class]),
	dt:not([class]),
	dd:not([class]),
	label:not([class]),
	pre:not([class]),
	figcaption:not([class]),
	a:not([class]),
	input[type="text"]:not([class]),
	input[type="email"]:not([class]),
	input[type="tel"]:not([class]),
	input[type="number"]:not([class]),
	input[type="date"]:not([class]),
	input[type="url"]:not([class]),
	input[type="password"]:not([class]),
	input[type="button"]:not([class]),
	textarea:not([class]),
	select:not([class])
) {
	font-size: inherit;
	letter-spacing: inherit;
}

body:not(.matching-staff-dashboard-body) :where(a) {
	width: auto;
	height: auto;
}

body:not(.matching-staff-dashboard-body) :where(h1, h2, h3, h4, h5, h6) {
	letter-spacing: inherit;
}

@media (min-width: 768px) {
	body:not(.matching-staff-dashboard-body) :where(
		p:not([class]),
		li:not([class]),
		span:not([class]),
		th:not([class]),
		td:not([class]),
		dt:not([class]),
		dd:not([class]),
		pre:not([class]),
		figcaption:not([class]),
		a:not([class]),
		input[type="text"]:not([class]),
		input[type="email"]:not([class]),
		input[type="tel"]:not([class]),
		input[type="number"]:not([class]),
		input[type="date"]:not([class]),
		input[type="url"]:not([class]),
		input[type="password"]:not([class]),
		input[type="button"]:not([class]),
		textarea:not([class]),
		select:not([class])
	) {
		font-size: inherit;
		letter-spacing: inherit;
	}
}

body:not(.matching-staff-dashboard-body) .site-main {
	font-size: 1.6rem;
	letter-spacing: 0;
}

body:not(.matching-staff-dashboard-body).matching-login-body {
	font-size: 1.6rem;
	letter-spacing: 0;
}

body:not(.matching-staff-dashboard-body) .single-staff-registration.staff-card {
	font-size: 1.6rem;
	letter-spacing: 0;
}

body:not(.matching-staff-dashboard-body) :where(.site-info p, .site-footer-copyright, .matching-scroll-thin) {
	scrollbar-width: thin;
	scrollbar-color: var(--matching-scrollbar-thumb) transparent;
}

body:not(.matching-staff-dashboard-body) :where(.site-info p, .site-footer-copyright, .matching-scroll-thin)::-webkit-scrollbar {
	width: var(--matching-scrollbar-size);
	height: var(--matching-scrollbar-size);
}

body:not(.matching-staff-dashboard-body) :where(.site-info p, .site-footer-copyright, .matching-scroll-thin)::-webkit-scrollbar-track {
	background: transparent;
}

body:not(.matching-staff-dashboard-body) :where(.site-info p, .site-footer-copyright, .matching-scroll-thin)::-webkit-scrollbar-thumb {
	background-color: var(--matching-scrollbar-thumb);
	border-radius: 999px;
}

body:not(.matching-staff-dashboard-body) :where(.site-info p, .site-footer-copyright, .matching-scroll-thin)::-webkit-scrollbar-thumb:hover {
	background-color: var(--matching-scrollbar-thumb-hover);
}

/* ダークシェル向け：ログイントーンの再利用グラデーション基盤 */
.matching-gradient-base-login {
	background-color: #111827;
	background-image: var(--matching-gradient-login-base);
}

.matching-gradient-base-login-mesh {
	background-color: #06080d;
	background-image: var(--matching-gradient-login-mesh);
}

::selection {
	background: color-mix(in srgb, var(--matching-color-primary) 22%, transparent);
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--matching-color-primary);
	outline-offset: 2px;
}

/* ========== レイアウト ========== */
.site-container {
	max-width: var(--matching-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--matching-spacing);
	padding-right: var(--matching-spacing);
}

.site-main {
	padding-top: 2.4rem;
	padding-bottom: 4rem;
}

/* ========== ヘッダー ========== */
.site-header {
	position: relative;
	z-index: 20;
	padding: 1.15rem 0;
	background: var(--matching-header-scrim);
	border-bottom: 1px solid rgba(15, 23, 42, 0.07);
	box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
}

.site-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}

.site-branding {
	flex-shrink: 0;
	min-width: 0;
}

.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.site-title {
	font-size: 2rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.02em;
}
.site-title a {
	text-decoration: none;
	color: var(--matching-color-text);
}
.site-title a:hover {
	text-decoration: none;
	background: linear-gradient(90deg, var(--matching-color-primary), var(--matching-color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Job Pochi ヘッダーブランド */
.site-title--brand {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: 0;
}
.site-brand-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	max-width: min(100%, 22rem);
	text-decoration: none;
	color: var(--matching-color-heading);
}
.site-brand-link--logo {
	gap: 0;
	max-width: min(100%, 22rem);
}
.site-brand-link:hover {
	text-decoration: none;
	color: var(--matching-color-heading);
	opacity: 0.92;
}
.site-brand-logo {
	display: block;
	width: auto;
	height: clamp(3.6rem, 4.6vw, 4.4rem);
	max-width: 100%;
}
.site-brand-mark {
	flex-shrink: 0;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 0.85rem;
	background: #fff;
	box-shadow: 0 0 0 1px var(--matching-color-border), 0 1px 3px color-mix(in srgb, var(--matching-color-primary) 12%, transparent);
}
.site-brand-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	line-height: 1.2;
}
.site-brand-name-ja {
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--matching-color-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-brand-name-en {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--matching-color-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-header .custom-logo-link {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}
.site-header .custom-logo {
	max-height: 4.4rem;
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.main-navigation {
	flex: 1;
	min-width: 0;
}

.site-header .header-account-nav {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.45rem;
}

.site-header .header-account-link--register {
	background: linear-gradient(180deg, var(--matching-color-primary) 0%, var(--matching-color-primary-hover, #124a96) 100%);
	border-color: transparent;
	color: #fff;
}

.site-header .header-account-link--register:hover {
	background: linear-gradient(180deg, var(--matching-color-primary-hover, #124a96) 0%, var(--matching-color-primary) 100%);
	color: #fff;
	border-color: transparent;
}

.site-header .header-account-link--login,
.site-header .header-account-link--logout,
.site-header .header-account-link--dashboard {
	background: linear-gradient(180deg, #ffffff 0%, var(--matching-color-surface) 100%);
}

.site-header .header-account-link--dashboard {
	color: var(--matching-color-primary);
}

.site-header .header-account-link--logout {
	color: var(--matching-color-muted);
	border-color: color-mix(in srgb, var(--matching-color-border) 85%, var(--matching-color-primary) 15%);
}

.site-header .header-account-link--logout:hover {
	color: var(--matching-color-text);
	border-color: color-mix(in srgb, var(--matching-color-border) 65%, var(--matching-color-primary) 35%);
}

/* destyle.css の a { width:100%; height:100%; } を打ち消す（ヘッダー内リンク） */
.site-header .primary-menu a,
.site-header .header-language-switch a.lang-btn,
.site-header .header-language-switch button.lang-btn {
	width: auto;
	height: auto;
}

.site-header .header-account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-height: 3.2rem;
	padding: 0.65rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--matching-color-border) 70%, var(--matching-color-primary) 30%);
	border-radius: 999px;
	background: linear-gradient(180deg, #ffffff 0%, var(--matching-color-surface) 100%);
	color: var(--matching-color-primary);
	font-size: var(--matching-public-nav-fs, 1.5rem);
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: background-color var(--matching-transition), color var(--matching-transition),
		border-color var(--matching-transition);
}

.site-header .header-account-link:hover {
	text-decoration: none;
	background: color-mix(in srgb, var(--matching-color-primary) 10%, #ffffff 90%);
	color: var(--matching-color-primary-hover);
	border-color: color-mix(in srgb, var(--matching-color-primary) 35%, var(--matching-color-border) 65%);
}

.site-header .header-language-switch,
.header-language-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	padding: 0.35rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--matching-color-border) 70%, var(--matching-color-primary) 30%);
	background: linear-gradient(180deg, #ffffff 0%, var(--matching-color-surface) 100%);
	box-shadow: 0 4px 12px rgba(35, 34, 30, 0.08);
}

.header-language-switch .lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	flex: 0 0 auto;
	min-height: 2.75rem;
	min-width: 7.2rem;
	padding: 0.55rem 1.15rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: color-mix(in srgb, var(--matching-color-primary) 55%, var(--matching-color-text) 45%);
	font-size: var(--matching-public-nav-fs, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--matching-transition), color var(--matching-transition),
		border-color var(--matching-transition), box-shadow var(--matching-transition);
}

.header-language-switch button.lang-btn {
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font-family: inherit;
}

.header-language-switch .lang-btn .matching-lang-other-label {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

.header-language-switch .lang-btn:hover {
	text-decoration: none;
	background: color-mix(in srgb, var(--matching-color-primary) 10%, #ffffff 90%);
	color: var(--matching-color-primary-hover);
	border-color: color-mix(in srgb, var(--matching-color-primary) 35%, var(--matching-color-border) 65%);
}

.header-language-switch .lang-btn.is-active {
	background: linear-gradient(180deg, var(--matching-color-primary) 0%, var(--matching-color-primary-hover) 100%);
	border-color: var(--matching-color-primary-hover);
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--matching-color-primary) 34%, transparent);
}

.header-language-switch .matching-lang-other-trigger {
	min-width: 0;
	padding-left: 0.85rem;
	padding-right: 0.85rem;
}


/* その他言語（C案） */
.matching-lang-other {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}

.matching-lang-other-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	cursor: pointer;
}

.matching-lang-other-chevron {
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform var(--matching-transition);
}

.matching-lang-other-trigger[aria-expanded="true"] .matching-lang-other-chevron {
	transform: rotate(-135deg) translateY(1px);
}

.matching-lang-other-menu {
	position: absolute;
	top: calc(100% + 0.45rem);
	right: 0;
	z-index: 120;
	min-width: 14rem;
	margin: 0;
	padding: 0.45rem;
	list-style: none;
	border: 1px solid color-mix(in srgb, var(--matching-color-border) 80%, var(--matching-color-primary) 20%);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(35, 34, 30, 0.14);
}

.matching-lang-other-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	color: var(--matching-color-text);
	font-size: var(--matching-text-min);
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--matching-transition), color var(--matching-transition);
}

.matching-lang-other-option:hover {
	text-decoration: none;
	background: var(--matching-color-surface, #f8f7f6);
	color: var(--matching-color-primary-hover);
}

.matching-lang-other-option.is-active {
	background: color-mix(in srgb, var(--matching-color-primary) 10%, #ffffff 90%);
	color: var(--matching-color-primary);
	font-weight: 700;
}

.matching-lang-other-option.is-active::before {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.75rem;
	border-right: 2px solid var(--matching-color-primary);
	border-bottom: 2px solid var(--matching-color-primary);
	transform: rotate(45deg);
	flex-shrink: 0;
}

.matching-login-topbar.site-header {
	flex: 0 0 auto;
	background: transparent;
	border-bottom: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding-top: max(0.5rem, env(safe-area-inset-top));
	padding-bottom: 0.35rem;
}

.matching-login-topbar .site-container {
	width: 100%;
	max-width: min(36rem, 100%);
	margin-inline: auto;
	padding-left: max(1rem, env(safe-area-inset-left));
	padding-right: max(1rem, env(safe-area-inset-right));
	box-sizing: border-box;
}

.matching-login-topbar .site-header-inner {
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
}

/* destyle.css の a { width: 100% } 対策（ログイン topbar 内のみ） */
.matching-login-topbar .header-language-switch a.lang-btn,
.matching-login-topbar .header-language-switch button.lang-btn {
	width: auto;
	height: auto;
}

.matching-login-topbar .header-language-switch--login-topbar {
	width: 100%;
	max-width: 100%;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
}

.matching-login-topbar .header-language-switch--login-topbar .lang-btn {
	min-width: 0;
}

.matching-login-topbar .header-language-switch--login-topbar > a.lang-btn,
.matching-login-topbar .header-language-switch--login-topbar .matching-lang-other-trigger {
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
	padding-left: 0.65rem;
	padding-right: 0.65rem;
}

.matching-login-topbar .header-language-switch--login-topbar .matching-lang-other {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.matching-login-topbar .header-language-switch--login-topbar .matching-lang-other-trigger {
	width: 100%;
}

.matching-login-topbar .matching-lang-other-menu {
	z-index: 200;
}

/* ========== ヘッダードロワー（769px+: flex 横並び / 768px以下: 折り畳み） ========== */
.matching-header-drawer {
	display: block;
}

.site-header .header-account-nav--mobile-bar {
	display: none;
}

.site-header-bar-actions {
	display: contents;
}

/* ========== ハンバーガーボタン（PC では非表示） ========== */
.matching-header-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--matching-radius-sm);
	color: var(--matching-color-text);
	cursor: pointer;
	transition: background-color var(--matching-transition), color var(--matching-transition);
	-webkit-appearance: none;
	appearance: none;
}
.matching-header-toggle:hover {
	background: color-mix(in srgb, var(--matching-color-primary) 8%, #ffffff 92%);
	color: var(--matching-color-primary-hover);
}
.matching-header-toggle:focus-visible {
	outline: 2px solid var(--matching-color-primary);
	outline-offset: 2px;
}
.matching-header-toggle-bars {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 2rem;
	height: 1.5rem;
}
.matching-header-toggle-bars span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
	transform-origin: center;
}
.matching-header-toggle-label {
	display: inline-block;
}
/* オープン時に bars を × にトランスフォーム */
body.is-nav-open .matching-header-toggle-bars span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
body.is-nav-open .matching-header-toggle-bars span:nth-child(2) {
	opacity: 0;
}
body.is-nav-open .matching-header-toggle-bars span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* ========== モバイル・タブレット縦（768px 以下）: ドロワーヘッダー ========== */
@media (max-width: 768px) {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		padding: max(0.65rem, env(safe-area-inset-top, 0px)) 0 0.65rem;
	}

	.matching-login-topbar.site-header {
		position: relative;
		top: auto;
	}

	.matching-login-topbar .site-header-inner {
		display: flex;
		justify-content: center;
		width: 100%;
		min-width: 0;
	}

	.site-header-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, auto);
		grid-template-areas:
			'brand actions'
			'drawer drawer';
		column-gap: 0.65rem;
		row-gap: 0;
		align-items: center;
	}

	.site-branding {
		grid-area: brand;
		min-width: 0;
		overflow: hidden;
	}

	.site-branding .custom-logo-link {
		display: inline-flex;
		align-items: center;
		max-width: 100%;
	}

	.site-brand-link {
		gap: 0.55rem;
		max-width: 100%;
	}

	.site-brand-link--logo {
		max-width: min(100%, 16.5rem);
	}

	.site-brand-logo {
		height: 3.4rem;
	}

	.site-brand-mark {
		width: 3.2rem;
		height: 3.2rem;
		border-radius: 0.75rem;
	}

	.site-brand-name-ja {
		font-size: 1.35rem;
	}

	.site-brand-name-en {
		font-size: 1.05rem;
	}

	.site-header-bar-actions {
		grid-area: actions;
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.4rem;
		flex: 0 1 auto;
		flex-shrink: 1;
		min-width: 0;
		max-width: 100%;
	}

	.site-header .header-account-nav--mobile-bar {
		display: inline-flex;
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
		gap: 0;
		overflow: hidden;
	}

	/* モバイルバーは主アクション1つのみ（ゲスト: 新規登録 / ログイン中: マイページ or ダッシュボード） */
	.site-header .header-account-nav--mobile-bar .header-account-link--login,
	.site-header .header-account-nav--mobile-bar .header-account-link--logout {
		display: none;
	}

	.site-header .header-account-nav--mobile-bar .header-account-link--mypage,
	.site-header .header-account-nav--mobile-bar .header-account-link--dashboard,
	.site-header .header-account-nav--mobile-bar .header-account-link--register {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.site-header .header-account-nav--mobile-bar .header-account-link {
		width: auto;
		height: auto;
		min-height: 3.5rem;
		padding: 0.45rem 0.7rem;
		font-size: var(--matching-header-mobile-cta-fs, clamp(1.25rem, 3.4vw, 1.45rem));
		line-height: 1.2;
		border-radius: var(--matching-radius-sm);
		box-shadow: 0 2px 8px rgba(0, 119, 199, 0.18);
	}

	.matching-header-toggle {
		display: inline-flex;
		flex-shrink: 0;
		width: 4rem;
		height: 4rem;
		border: 1px solid color-mix(in srgb, var(--matching-color-border) 80%, var(--matching-color-primary) 20%);
		background: linear-gradient(180deg, #ffffff 0%, var(--matching-color-surface) 100%);
	}

	.matching-header-toggle-label {
		display: none;
	}

	.matching-header-drawer {
		grid-area: drawer;
		display: block;
		flex: none;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		margin: 0 calc(var(--matching-spacing) * -1);
		padding: 0 var(--matching-spacing);
		background: var(--matching-header-scrim, rgba(255, 255, 255, 0.98));
		border-top: 1px solid rgba(15, 23, 42, 0.06);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
		transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s,
			margin-top 0.25s ease, padding 0.25s ease;
	}

	body.is-nav-open .matching-header-drawer {
		max-height: min(80vh, 32rem);
		opacity: 1;
		visibility: visible;
		margin-top: 0.65rem;
		padding-top: 0.5rem;
		padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
		transition: max-height 0.3s ease, opacity 0.25s ease 0.05s, visibility 0s linear 0s,
			margin-top 0.25s ease, padding 0.25s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	body:not(.is-nav-open) .matching-header-drawer {
		border-top-width: 0;
		box-shadow: none;
		pointer-events: none;
	}

	.site-header .custom-logo {
		display: block;
		max-height: 3.2rem;
		max-width: var(--matching-header-mobile-logo-max-w, min(10.5rem, 40vw));
		width: auto;
		height: auto;
		object-fit: contain;
		object-position: left center;
	}

	.site-title {
		font-size: 1.65rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* ドロワー内: サイトナビ */
	.site-header .main-navigation {
		flex: none;
		width: 100%;
	}

	.site-header .primary-menu {
		flex-direction: column;
		justify-content: flex-start;
		gap: 0.35rem;
	}

	.site-header .primary-menu li {
		width: 100%;
	}

	.site-header .primary-menu a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 4.4rem;
		padding: 0.85rem 1rem;
		font-size: var(--matching-public-label-fs, 1.5rem);
		font-weight: 600;
		border: 1px solid rgba(15, 23, 42, 0.06);
		border-radius: var(--matching-radius-sm);
		background: #fff;
		box-sizing: border-box;
	}

	.site-header .primary-menu a:hover,
	.site-header .primary-menu a:focus-visible {
		border-color: color-mix(in srgb, var(--matching-color-primary) 35%, var(--matching-color-border) 65%);
		background: color-mix(in srgb, var(--matching-color-primary) 6%, #ffffff 94%);
		color: var(--matching-color-primary-hover);
	}

	.site-header .primary-menu li:last-child a {
		border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	}

	/* ドロワー内: アカウント（縦スタック） */
	.site-header .header-account-nav--drawer {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		width: 100%;
		margin-top: 0.75rem;
		padding-top: 0.75rem;
		border-top: 1px solid rgba(15, 23, 42, 0.08);
	}

	.site-header .header-account-nav--drawer .header-account-link--register {
		display: none;
	}

	.site-header .header-account-nav--drawer .header-account-link {
		width: 100%;
		min-height: 4.4rem;
		padding: 0.75rem 1.2rem;
		font-size: var(--matching-public-caption-fs, 1.5rem);
		border-radius: var(--matching-radius-sm);
	}

	/* ドロワー内: 言語切替 */
	.site-header .matching-header-drawer .header-language-switch {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		width: 100%;
		margin-top: 0.8rem;
		padding: 0.8rem 0.4rem 0.2rem;
		border-top: 1px solid rgba(15, 23, 42, 0.08);
		gap: 0.5rem;
		box-shadow: none;
		border-radius: var(--matching-radius-sm);
	}

	.site-header .matching-header-drawer .header-language-switch > a.lang-btn {
		min-width: 0;
		min-height: 4.4rem;
		width: 100%;
		max-width: none;
		padding: 0.65rem 0.75rem;
		font-size: var(--matching-public-label-fs, 1.5rem);
		white-space: nowrap;
		text-wrap: nowrap;
		justify-content: center;
	}

	.site-header .matching-header-drawer .header-language-switch .lang-btn {
		min-width: 0;
	}

	.site-header .matching-header-drawer .matching-lang-other {
		grid-column: 1 / -1;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	/* その他トリガー: ラベル＋ chevron を中央揃え（色は lang-btn 共通） */
	.site-header .matching-header-drawer .header-language-switch .matching-lang-other-trigger {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		min-height: 4.4rem;
		max-width: none;
		padding: 0.65rem 0.75rem;
		text-align: center;
	}

	.site-header .matching-header-drawer .header-language-switch .matching-lang-other-label {
		flex: 0 1 auto;
		min-width: 0;
		text-align: center;
		line-height: 1.35;
	}

	.site-header .matching-header-drawer .header-language-switch .matching-lang-other-chevron {
		flex: 0 0 auto;
		margin-left: 0;
	}

	.site-header .matching-header-drawer .matching-lang-other-menu {
		position: static;
		top: auto;
		right: auto;
		z-index: auto;
		width: 100%;
		min-width: 0;
		margin: 0.35rem 0 0;
		padding: 0;
		border: none;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.site-header .matching-header-drawer .matching-lang-other-menu[hidden] {
		display: none !important;
	}

	.site-header .matching-header-drawer .matching-lang-other-menu:not([hidden]) {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}

	.site-header .matching-header-drawer .matching-lang-other-item {
		width: 100%;
	}

	.site-header .matching-header-drawer .matching-lang-other-option {
		justify-content: flex-start;
		min-height: 4.4rem;
		width: 100%;
		padding: 0.75rem 1rem;
		font-size: var(--matching-public-label-fs, 1.5rem);
		white-space: normal;
		line-height: 1.35;
		text-align: left;
		border: 1px solid color-mix(in srgb, var(--matching-color-border) 75%, var(--matching-color-primary) 25%);
		border-radius: var(--matching-radius-sm);
		background: #fff;
		box-sizing: border-box;
	}

	.site-header .matching-header-drawer .matching-lang-other-option.is-active {
		border-color: color-mix(in srgb, var(--matching-color-primary) 45%, var(--matching-color-border) 55%);
	}

	@media (max-width: 390px) {
		.site-header-inner {
			column-gap: 0.45rem;
		}

		.site-header .custom-logo {
			max-height: 2.9rem;
			max-width: min(9rem, 38vw);
		}

		.matching-header-toggle {
			width: 3.8rem;
			height: 3.8rem;
		}
	}
}

/* ========== デスクトップ（769px 以上）: 横並びヘッダー ========== */
@media (min-width: 769px) {
	.site-header-inner {
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem 1.2rem;
	}

	.site-header-bar-actions {
		display: contents;
	}

	.matching-header-toggle {
		display: none;
	}

	.matching-header-drawer {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: flex-end;
		gap: 0.5rem 1rem;
		flex-wrap: wrap;
		min-width: 0;
		width: auto;
		max-height: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		margin: 0;
		padding: 0;
		border: none;
		background: transparent;
		box-shadow: none;
	}

	.site-header .main-navigation {
		flex: 1 1 auto;
		min-width: 0;
	}

	.site-header .primary-menu {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.35rem 1.2rem;
	}

	.site-header .header-account-nav--drawer {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		width: auto;
		margin: 0;
		padding: 0;
		border: none;
		gap: 0.45rem;
	}

	.site-header .header-account-nav--drawer .header-account-link--register {
		display: inline-flex;
	}

	.site-header .header-account-nav--drawer .header-account-link {
		width: auto;
		min-height: 2.75rem;
		padding: 0.55rem 1.15rem;
		font-size: var(--matching-public-nav-fs, 1.5rem);
	}

	.site-header .header-language-switch {
		flex-shrink: 0;
	}
}

/* タブレット横・小型 PC（769–1023px）: ヘッダー要素を少しコンパクトに */
@media (min-width: 769px) and (max-width: 1023px) {
	.site-header {
		padding: 0.85rem 0;
	}

	.site-header-inner {
		gap: 0.6rem 0.85rem;
	}

	.site-header .custom-logo {
		max-height: 3.8rem;
	}

	.site-header .primary-menu {
		gap: 0.3rem 0.85rem;
	}

	.site-header .primary-menu a {
		font-size: var(--matching-public-caption-fs, 1.5rem);
	}

	.site-header .header-account-nav--drawer .header-account-link,
	.header-language-switch .lang-btn {
		min-width: 0;
		padding: 0.5rem 0.8rem;
		font-size: var(--matching-public-caption-fs, 1.5rem);
	}

	.header-language-switch .matching-lang-other-trigger {
		padding-left: 0.65rem;
		padding-right: 0.65rem;
	}
}

/* iOS Safari の VV による不要スクロール抑止（オープン時のみ） */
@media (max-width: 768px) {
	body.is-nav-open {
		overflow: hidden;
	}
}

/* Google翻訳UIの既定バナーを非表示（ヘッダーの言語切替のみ使用） */
.goog-te-banner-frame.skiptranslate {
	display: none !important;
}
body {
	top: 0 !important;
}
#matching-google-translate-element .goog-te-gadget,
#matching-google-translate-element .goog-te-gadget-simple,
#matching-google-translate-element .goog-te-combo,
#matching-google-translate-element .goog-te-menu-value,
#matching-google-translate-element .goog-logo-link,
#matching-google-translate-element .goog-te-gadget span,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.goog-te-spinner-pos,
iframe.goog-te-banner-frame,
iframe.goog-te-menu-frame {
	display: none !important;
	visibility: hidden !important;
}
.goog-text-highlight {
	background: transparent !important;
	box-shadow: none !important;
}
.VIpgJd-yAWNEb-L7lbkb,
.VIpgJd-yAWNEb-L7lbkb:hover,
.VIpgJd-yAWNEb-L7lbkb *:hover,
.VIpgJd-yAWNEb-L7lbkb span,
.VIpgJd-yAWNEb-L7lbkb font,
.VIpgJd-yAWNEb-L7lbkb .goog-text-highlight {
	background: transparent !important;
	box-shadow: none !important;
	text-decoration: inherit !important;
	cursor: inherit !important;
}
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-balloon-frame,
iframe.goog-te-balloon-frame {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
#matching-google-translate-element {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.primary-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	justify-content: flex-end;
}
.primary-menu a {
	text-decoration: none;
	font-size: var(--matching-public-label-fs, 1.5rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--matching-color-text);
	transition: color var(--matching-transition);
}
.primary-menu a:hover {
	text-decoration: none;
	color: var(--matching-color-primary);
}

/* ========== フッター（著作権中央・プライバシー右端） ========== */
.site-footer {
	margin-top: 3.5rem;
	padding: 2.75rem var(--matching-spacing);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: var(--matching-footer-bg);
}

.site-footer-inner {
	position: relative;
	width: 100%;
	min-height: 4.4rem;
}

.site-info {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;
	color: var(--matching-footer-text);
	font-size: var(--matching-public-label-fs, 1.5rem);
}

/* destyle の a { width:100%; height:100%; } を打ち消して横一列にする */
.site-info a {
	display: inline;
	width: auto;
	height: auto;
	color: #93c5fd;
	font-weight: 600;
	pointer-events: auto;
}

.site-info a:hover {
	text-decoration: underline;
	color: #fff;
}

.site-info p,
.site-footer-copyright {
	margin: 0;
}

.site-footer-copyright {
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.site-footer-privacy-link {
	position: absolute;
	right: var(--matching-footer-nav-inset);
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 4.4rem;
	padding: 0;
	color: var(--matching-footer-text);
	font-size: var(--matching-public-label-fs, 1.5rem);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--matching-transition), opacity var(--matching-transition);
}

.site-footer-privacy-link:hover {
	color: #fff;
	opacity: 1;
	text-decoration: underline;
}

@media (max-width: 640px) {
	.site-footer {
		padding-block: 2rem 2.4rem;
	}

	.site-footer-inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		min-height: 0;
	}

	.site-info {
		position: static;
		inset: auto;
		display: block;
		pointer-events: auto;
	}

	.site-footer-copyright {
		white-space: normal;
	}

	.site-footer-privacy-link {
		position: static;
		transform: none;
		align-self: flex-end;
		margin-right: var(--matching-footer-nav-inset);
		min-height: 4rem;
	}
}

/* ========== ボタン ========== */
/* destyle の a { width:100%; height:100%; } を打ち消す（フロントの .btn が横に伸びないように） */
a.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	flex-shrink: 0;
	height: auto;
	min-height: var(--matching-btn-min-height);
	padding: var(--matching-btn-padding-y) var(--matching-btn-padding-x);
	font-size: var(--matching-btn-font-size);
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.04em;
	border-radius: var(--matching-radius);
	border: var(--matching-btn-border-width) solid transparent;
	cursor: pointer;
	transition: background-color var(--matching-transition), color var(--matching-transition),
		border-color var(--matching-transition), box-shadow var(--matching-transition),
		transform var(--matching-transition);
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	box-sizing: border-box;
	box-shadow: var(--matching-shadow);
}
a.btn:hover,
button.btn:hover,
input[type="submit"].btn:hover,
input[type="button"].btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--matching-shadow-md);
}
a.btn:active,
button.btn:active,
input[type="submit"].btn:active,
input[type="button"].btn:active {
	transform: translateY(0);
	box-shadow: var(--matching-shadow);
}

a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
	background-color: var(--matching-color-primary);
	color: #fff;
	border-color: var(--matching-color-primary);
}
a.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
	background-color: var(--matching-color-primary-hover);
	color: #fff;
	border-color: var(--matching-color-primary-hover);
	box-shadow: 0 6px 22px color-mix(in srgb, var(--matching-color-primary) 38%, transparent);
}

a.btn-secondary,
button.btn-secondary,
input[type="button"].btn-secondary {
	background-color: transparent;
	color: var(--matching-color-primary);
	border-color: var(--matching-color-primary);
}
a.btn-secondary:hover,
button.btn-secondary:hover,
input[type="button"].btn-secondary:hover {
	background-color: color-mix(in srgb, var(--matching-color-primary) 8%, #ffffff 92%);
	color: var(--matching-color-primary-hover);
	border-color: var(--matching-color-primary-hover);
}

button.btn:disabled,
input[type="submit"].btn:disabled,
input[type="button"].btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
	transform: none;
	box-shadow: none;
}
button.btn:disabled:hover,
input[type="submit"].btn:disabled:hover,
input[type="button"].btn:disabled:hover {
	transform: none;
	box-shadow: var(--matching-shadow);
}

@media (max-width: 640px) {
	a.btn,
	button.btn,
	input[type="submit"].btn,
	input[type="button"].btn {
		--matching-btn-font-size: clamp(1.52rem, 0.3vw + 1.4rem, 1.65rem);
		--matching-btn-padding-y: 0.9rem;
		--matching-btn-padding-x: 1.5rem;
		--matching-btn-min-height: 4rem;
	}
}

/* ========== CF7 系のフォーム送信ボタン共通基底（.contact-btn） ==========
   各ページの `.page-* .contact-btn` 個別定義より specificity が低いので、
   個別が無い場面のフォールバックとして機能する。書き味は .btn と揃える。
   44px タッチ保証は `max(var(--matching-btn-min-height), 4.4rem)` で担保し、
   登録フォームの確認ボタン / 修正ボタンは .contact-btn.is-confirmation / .is-edit
   のバリアントで色を差し替える（旧 .confirmation-btn / .edit-btn 互換）。 */
.contact-btn,
button.contact-btn,
input[type="submit"].contact-btn,
input[type="button"].contact-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: max(var(--matching-btn-min-height), 4.4rem);
	padding: var(--matching-btn-padding-y) var(--matching-btn-padding-x);
	font-size: var(--matching-btn-font-size);
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.024em;
	border-radius: var(--matching-radius);
	border: var(--matching-btn-border-width) solid transparent;
	cursor: pointer;
	background-color: var(--matching-color-primary);
	color: #fff;
	transition: background-color var(--matching-transition), border-color var(--matching-transition),
		box-shadow var(--matching-transition), transform var(--matching-transition);
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex-shrink: 0;
}

.contact-btn:not([disabled]):hover {
	background-color: var(--matching-color-primary-hover);
	color: #fff;
	border-color: var(--matching-color-primary-hover);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--matching-shadow-md);
}

.contact-btn:not([disabled]):active {
	transform: translateY(0);
	box-shadow: var(--matching-shadow);
}

.contact-btn[disabled],
.contact-btn[aria-disabled="true"],
.contact-btn.is-submit-locked {
	cursor: not-allowed;
	opacity: 0.6;
	transform: none;
	box-shadow: none;
}

/* 確認画面ボタン（旧 .confirmation-btn 互換）— 基底色はそのままで、is-confirmation で明示 */
.contact-btn.is-confirmation,
.contact-btn.confirmation-btn {
	background-color: var(--matching-color-primary);
	border-color: var(--matching-color-primary);
	color: #fff;
}

/* 修正へ戻るボタン（旧 .edit-btn 互換）— 白地・ボーダー色のセカンダリ表現 */
.contact-btn.is-edit,
.contact-btn.edit-btn {
	background-color: var(--matching-color-bg);
	color: var(--matching-color-text);
	border-color: var(--matching-color-border);
}
.contact-btn.is-edit:not([disabled]):hover,
.contact-btn.edit-btn:not([disabled]):hover {
	background-color: var(--matching-color-surface);
	border-color: color-mix(in srgb, var(--matching-color-muted) 70%, var(--matching-color-text) 30%);
	color: var(--matching-color-text);
}

/* ========== 操作ボタンを並べる共通レイアウト ========== */
.matching-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem 1rem;
}

.matching-actions--center {
	justify-content: center;
}

.matching-actions--end {
	justify-content: flex-end;
	width: 100%;
}

.matching-actions--between {
	justify-content: space-between;
	width: 100%;
}

.matching-search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.85rem;
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}

.matching-search-form .search-field {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: var(--matching-input-min-height);
	padding: 0.5rem 0.85rem;
	font-size: var(--matching-input-font-size);
	font-family: inherit;
	border: var(--matching-input-border-width) solid var(--matching-color-border);
	border-radius: var(--matching-input-radius);
	background: var(--matching-color-bg);
	box-sizing: border-box;
}

.matching-search-form .search-field:focus {
	outline: none;
	border-color: var(--matching-color-primary);
	box-shadow: var(--matching-input-focus-shadow);
}

/* ========== エントリー共通 ========== */
.entry-header {
	margin-bottom: 1.6rem;
}
.entry-title {
	font-weight: 800;
	margin: 0 0 0.4em;
	letter-spacing: 0.03em;
	line-height: 1.28;
	font-size: clamp(1.65rem, 2.5vw + 0.5rem, 2.15rem);
	position: relative;
	padding-bottom: 0.45rem;
}
.entry-title::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	margin-top: 0.35rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--matching-color-primary), var(--matching-color-accent));
}
.entry-meta {
	color: var(--matching-color-muted);
}
.entry-content {
	margin-top: 0;
}
.entry-content > * + * {
	margin-top: 1.2em;
}
.entry-content p {
	margin: 0.6em 0;
}
.entry-content ul {
	list-style: disc;
	padding-left: 1.8em;
}
.entry-content ol {
	list-style: decimal;
	padding-left: 1.8em;
}

.page-links {
	margin-top: 2rem;
}

/* ========== 必須バッジ共通（.matching-must / 既存 .must も同等扱い） ========== */
.matching-must,
.must {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.15rem 0.6rem;
	min-width: 3.2rem;
	font-size: var(--matching-text-min);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #fff;
	background-color: var(--matching-color-required);
	border-radius: var(--matching-radius-sm);
	vertical-align: middle;
	text-align: center;
}

/* ========== フォーム結果メッセージ共通（CF7 wpcf7-response-output 周辺で再利用） ========== */
.matching-form-message {
	margin: 1.35rem 0;
	padding: 1.35rem 1.75rem;
	border: 1px solid var(--matching-color-info-border);
	border-radius: var(--matching-radius);
	background: var(--matching-color-info-bg);
	color: var(--matching-color-info-text);
	font-size: var(--matching-public-label-fs, 1.5rem);
	line-height: var(--matching-line-height-body);
}

.matching-form-message[data-variant="warning"] {
	border-color: var(--matching-color-warning-border);
	background: var(--matching-color-warning-bg);
	color: var(--matching-color-warning-text);
}

.matching-form-message[data-variant="danger"] {
	border-color: var(--matching-color-danger-border);
	background: var(--matching-color-danger-bg);
	color: var(--matching-color-danger-text);
}

.matching-form-message[data-variant="success"] {
	border-color: var(--matching-color-success-border);
	background: var(--matching-color-success-bg);
	color: var(--matching-color-success-text);
}

/* ログアウト nonce 失効バナー（wp_body_open 出力・公開面） */
.matching-logout-notice.matching-form-message {
	margin: 0;
	padding: 1rem var(--matching-spacing);
	border-width: 0 0 1px;
	border-radius: 0;
	font-size: clamp(1.38rem, 0.42vw + 1.14rem, 1.52rem);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	box-sizing: border-box;
}

/* ========== CF7 既定結果メッセージ（.wpcf7-response-output）のセマンティックマッピング ==========
 * CF7 が出力する .wpcf7-response-output と form の状態クラス（invalid / unaccepted /
 * sent / failed / spam / aborted）を、テーマ既定のセマンティックトークンに自動でマッピングする。
 * これにより、各 page-*.css で個別に上書きしなくても 4 フォーム共通の見た目になる。
 * .matching-form-message と同じ枠（border + bg + color のトリコ）に揃える。 */
.wpcf7 .wpcf7-response-output,
.wpcf7-form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 1rem 1.4rem;
	border: 1px solid var(--matching-color-info-border);
	border-radius: var(--matching-radius);
	background: var(--matching-color-info-bg);
	color: var(--matching-color-info-text);
	font-size: clamp(1.38rem, 0.42vw + 1.14rem, 1.52rem);
	font-weight: 500;
	line-height: var(--matching-line-height-body);
	box-sizing: border-box;
	text-align: center;
}

/* バリデーションエラー / 同意未チェック（warning） */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-acceptance-missing {
	border-color: var(--matching-color-warning-border);
	background: var(--matching-color-warning-bg);
	color: var(--matching-color-warning-text);
}

/* 送信成功（success） */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 .wpcf7-mail-sent-ok {
	border-color: var(--matching-color-success-border);
	background: var(--matching-color-success-bg);
	color: var(--matching-color-success-text);
}

/* 送信失敗 / スパム判定 / 中断（danger） */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-spam-blocked,
.wpcf7 .wpcf7-aborted {
	border-color: var(--matching-color-danger-border);
	background: var(--matching-color-danger-bg);
	color: var(--matching-color-danger-text);
}

/* ========== ヒーローグラデのユーティリティ（front-page など） ========== */
.matching-gradient-hero {
	background: var(--matching-gradient-hero);
}