@charset "UTF-8";

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

/* ========== 変数 ========== */
/* フォント・ベースサイズ・行間は destyle.css の html / 要素ルールに任せる */
:root {
	--matching-font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
	--matching-gradient-page: linear-gradient(165deg, #eef2ff 0%, #f8fafc 38%, #ffffff 100%);
	--matching-footer-bg: linear-gradient(165deg, #0f172a 0%, #1e293b 52%, #0f172a 100%);
	--matching-header-scrim: rgba(255, 255, 255, 0.82);
	/* カラー（スタッフ登録・面談カード・プロフィールシートで共通） */
	--matching-color-text: #1a202c;
	--matching-color-link: #1d56c8;
	--matching-color-link-hover: #153f96;
	--matching-color-primary: #1e56d8;
	--matching-color-primary-hover: #153f96;
	--matching-color-accent: #6366f1;
	--matching-color-secondary: #475569;
	--matching-color-muted: #64748b;
	--matching-color-border: #e2e8f0;
	--matching-color-bg: #fff;
	--matching-color-surface: #f1f5f9;
	/* シート・フォーム共通（表のヘッダ背景・ラベル色など） */
	--matching-color-surface-alt: #eef1f5;
	--matching-color-label: #5f6368;
	--matching-color-heading: #333333;
	/* レイアウト・スペーシング */
	--matching-container-max: 1200px;
	--matching-spacing: 1.6rem;
	--matching-radius: 8px;
	--matching-radius-sm: 6px;
	--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;
	/* ボタン（.btn / .contact-btn 共通）— 1rem≈10px 想定で押しやすい高さ */
	--matching-btn-font-size: 1.2rem;
	--matching-btn-padding-y: 1rem;
	--matching-btn-padding-x: 1.8rem;
	--matching-btn-min-height: 4rem;
	--matching-btn-border-width: 2px;
}

/* 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;
}

body {
	font-family: var(--matching-font-sans);
	background: var(--matching-gradient-page);
	color: var(--matching-color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

::selection {
	background: rgba(30, 86, 216, 0.2);
	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;
}

.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;
}

.site-header .custom-logo-link {
	display: block;
}
.site-header .custom-logo {
	max-height: 4.4rem;
	width: auto;
}

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

.site-header .header-language-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	padding: 0.35rem;
	border-radius: 999px;
	border: 1px solid #c9d8f3;
	background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
	box-shadow: 0 4px 12px rgba(13, 71, 161, 0.12);
}
.site-header .header-language-switch .lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.55rem 1.15rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: #31528a;
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	line-height: 1;
	transition: background-color var(--matching-transition), color var(--matching-transition),
		border-color var(--matching-transition), box-shadow var(--matching-transition);
}
.site-header .header-language-switch .lang-btn:hover {
	text-decoration: none;
	background: #e3edff;
	color: #183c75;
	border-color: #b9cdf6;
}
.site-header .header-language-switch .lang-btn.is-active {
	background: linear-gradient(180deg, #1a67cc 0%, #1253ad 100%);
	border-color: #0f4a9a;
	color: #fff;
	box-shadow: 0 6px 16px rgba(18, 83, 173, 0.34);
}
@media (max-width: 768px) {
	.site-header-inner {
		gap: 1rem;
	}
	.main-navigation {
		order: 3;
		width: 100%;
	}
	.site-header .header-language-switch {
		order: 2;
		margin-left: auto;
	}
}

/* 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: 1.4rem;
	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-info {
	text-align: center;
	color: rgba(226, 232, 240, 0.88);
	font-size: 1.2rem;
}
/* destyle の a { width:100%; height:100%; } を打ち消して横一列にする */
.site-info a {
	display: inline;
	width: auto;
	height: auto;
	color: #93c5fd;
	font-weight: 600;
}
.site-info a:hover {
	text-decoration: underline;
	color: #fff;
}
.site-info p {
	margin: 0;
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
	.site-info p {
		white-space: normal;
	}
}

/* ========== ボタン ========== */
/* 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.35;
	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 rgba(30, 86, 216, 0.38);
}

a.btn-secondary,
button.btn-secondary,
input[type="button"].btn-secondary {
	background-color: var(--matching-color-bg);
	color: var(--matching-color-secondary);
	border-color: var(--matching-color-border);
}
a.btn-secondary:hover,
button.btn-secondary:hover,
input[type="button"].btn-secondary:hover {
	background-color: var(--matching-color-surface);
	color: var(--matching-color-text);
	border-color: var(--matching-color-muted);
}

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: 1.1rem;
		--matching-btn-padding-y: 0.9rem;
		--matching-btn-padding-x: 1.5rem;
		--matching-btn-min-height: 3.6rem;
	}
}

/* ========== 操作ボタンを並べる共通レイアウト ========== */
.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-btn-min-height);
	padding: 0.5rem 0.85rem;
	font-size: 1rem;
	font-family: inherit;
	border: 2px solid var(--matching-color-border);
	border-radius: var(--matching-radius-sm);
	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: 0 0 0 3px rgba(30, 86, 216, 0.16);
}

/* ========== エントリー共通 ========== */
.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;
}