/* ==========================================================================
   採用情報（assets/css/recruit/）— Layout（l-: ヘッダー・全画面メニュー・フッター）
   - このフォルダの CSS は 採用情報のページ（/recruit/・/recruit/thanks/）だけで読み込む（inc/setup.php）
   - SP は同じファイルの中で @media (max-width: 767px) に書く
   - Figma: l-header-recruit 178:8743 / l-header-recruit-sp 230:15058 / l-menu-recruit-sp 230:15071 /
            l-footer-recruit 178:8764 / l-footer-recruit-sp 230:15112
   - アイコン（c-icon-recruit）は component.css が後から読み込まれるので、大きさは「親 > 子」の詳しいセレクタで上書きする
   - Figma で neutral-* を直接使っている所（フッターの濃いグレーなど）は、セマンティックの変数がないので Primitives を使う
   ========================================================================== */

:root {
	--header-height: 80px; /* ページ内リンクの止まる位置（foundation.css の scroll-padding-top） */
	--focus-color: var(--color-action-cta);
}

body {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
}

/* 赤の色面の上のフォーカスは白 */
.p-recruit-hero__plane,
.p-recruit-numbers,
.p-recruit-growth,
.p-recruit-entry > .l-container > .p-recruit-head,
.l-menu-recruit-sp {
	--focus-color: var(--color-text-on-brand);
}

/* ==========================================================================
   ヘッダー（l-header-recruit。上に固定）
   ========================================================================== */
.l-header-recruit {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	height: var(--header-height);
	padding: 0 var(--space-xl) 0 var(--space-2xl);
	background: var(--color-bg-canvas);
	border-bottom: 1px solid var(--color-border-default);
}

.l-header-recruit__brand,
.l-menu-recruit-sp__brand,
.l-footer-recruit__brand {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-md);
	align-items: center;
	color: var(--color-action-cta);
	text-decoration: none;
}

.l-header-recruit__logo,
.l-footer-recruit__logo {
	width: 140px;
	height: 40px;
	object-fit: contain;
}

.l-header-recruit__divider,
.l-menu-recruit-sp__divider,
.l-footer-recruit__divider {
	width: 1px;
	height: 28px;
	background: var(--neutral-300);
}

.l-header-recruit__sub,
.l-menu-recruit-sp__sub,
.l-footer-recruit__sub {
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
	white-space: nowrap;
}

.l-header-recruit__right {
	display: flex;
	gap: var(--space-xl);
	align-items: center;
}

.l-header-recruit__nav-list {
	display: flex;
	gap: 28px; /* Figma の値 */
}

.l-header-recruit__nav-item {
	display: flex;
	align-items: center;
	min-height: 44px;
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-primary);
	text-decoration: none;
	white-space: nowrap;
}

.l-header-recruit__nav-item:hover {
	color: var(--color-action-cta);
}

.l-header-recruit__corporate {
	display: flex;
	align-items: center;
	min-height: 44px;
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.l-header-recruit__corporate:hover {
	color: var(--color-text-primary);
	text-decoration: underline;
}

.l-header-recruit__entry {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding: 14px 20px 14px var(--space-lg); /* Figma の値 */
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-on-brand);
	white-space: nowrap;
	text-decoration: none;
	background: var(--color-action-cta);
	transition: background-color 0.2s;
}

.l-header-recruit__entry:hover {
	background: var(--color-action-cta-hover);
}

.l-header-recruit__entry > .l-header-recruit__entry-icon {
	--icon-size: 16px;
}

/* ログイン中（管理バーあり）は管理バーの下に止める */
.admin-bar .l-header-recruit {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .l-header-recruit {
		top: 0; /* 600px 以下は管理バーが一緒にスクロールする */
	}
}

/* メニューのボタン（SP と、ナビが入らない幅） */
.l-header-recruit__menu {
	display: none;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 52px;
	padding: 0;
	color: var(--color-text-primary);
	background: none;
	border: 0;
}

.l-header-recruit__menu > .l-header-recruit__menu-icon {
	--icon-size: 26px;
}

.l-header-recruit__menu-text {
	font: var(--text-body-s);
	font-size: 13px; /* Figma SP/Body-S（PC 幅でも 13px） */
	letter-spacing: var(--ls-body-s);
	white-space: nowrap;
}

/* ナビが入らない幅（タブレット・小さい PC）: ナビと「TRUSS株式会社のサイトへ」はメニューの中へ */
@media (max-width: 1199px) {
	.l-header-recruit__nav,
	.l-header-recruit__corporate {
		display: none;
	}

	.l-header-recruit__right {
		gap: var(--space-xs);
	}

	.l-header-recruit__menu {
		display: flex;
	}
}

@media (max-width: 767px) {
	:root {
		--header-height: 64px;
	}

	.l-header-recruit {
		gap: var(--space-xs);
		padding: 0 var(--space-xs) 0 var(--space-md);
	}

	.l-header-recruit__brand,
	.l-menu-recruit-sp__brand {
		gap: var(--space-xs);
	}

	.l-header-recruit__logo {
		width: 84px;
		height: 24px;
	}

	.l-header-recruit__divider,
	.l-menu-recruit-sp__divider {
		height: 20px;
	}

	.l-header-recruit__right {
		gap: var(--space-2xs);
	}

	.l-header-recruit__entry {
		height: 44px;
		padding: 0 14px; /* Figma の値 */
	}

	.l-header-recruit__entry > .l-header-recruit__entry-icon {
		display: none;
	}
}

/* 幅がとても狭いとき（320〜360px など）はロゴの横の RECRUIT を小さく（360px でメニューのボタンがはみ出したので 374px まで広げた）。
   メニューのボタンは 56px のまま（48px では「メニュー」の字がはみ出した。2026-10-05）。その分、左の余白と RECRUIT を詰める */
@media (max-width: 374px) {
	.l-header-recruit {
		padding-left: var(--space-xs);
	}

	.l-header-recruit__brand {
		gap: 6px;
	}

	.l-header-recruit__logo {
		width: 72px;
		height: 21px;
	}

	.l-header-recruit__sub {
		font-size: 20px;
	}

	.l-header-recruit__entry {
		padding: 0 var(--space-xs);
	}

	.l-header-recruit__entry,
	.l-header-recruit__menu {
		flex-shrink: 0;
	}
}

/* ==========================================================================
   全画面メニュー（l-menu-recruit-sp。赤の色面）
   ========================================================================== */
.l-menu-recruit-sp {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	padding-bottom: 40px; /* Figma の値 */
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--color-text-on-brand);
	background: var(--color-action-cta);
}

.l-menu-recruit-sp[hidden] {
	display: none;
}

.l-menu-recruit-sp__head {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	padding: 0 var(--space-xs) 0 var(--space-md);
}

.l-menu-recruit-sp__brand {
	color: var(--color-text-on-brand);
}

.l-menu-recruit-sp__logo {
	width: 84px;
	height: 24px;
	object-fit: contain;
}

.l-menu-recruit-sp__divider {
	background: var(--color-text-on-brand);
}

.l-menu-recruit-sp__sub {
	font-size: 28px; /* Figma SP/EN/H3（タブレット幅でも SP の大きさ） */
}

.l-menu-recruit-sp__close {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 52px;
	padding: 0;
	color: var(--color-text-on-brand);
	background: none;
	border: 0;
}

.l-menu-recruit-sp__close > .l-menu-recruit-sp__close-icon {
	--icon-size: 26px;
}

.l-menu-recruit-sp__close-text {
	font: var(--text-body-s);
	font-size: 13px; /* Figma SP/Body-S */
	letter-spacing: var(--ls-body-s);
}

.l-menu-recruit-sp__body {
	display: flex;
	flex-direction: column;
	gap: 28px; /* Figma の値 */
	width: 100%;
	max-width: 640px;
	padding: var(--space-xs) 20px 0; /* Figma の値（左右 20） */
}

.l-menu-recruit-sp__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) 0;
	font: var(--text-h4);
	font-size: 17px; /* Figma SP/H4 */
	letter-spacing: var(--ls-h4);
	color: var(--color-text-on-brand);
	text-decoration: none;
	border-bottom: 1px solid var(--color-text-on-brand);
}

.l-menu-recruit-sp__item > .l-menu-recruit-sp__item-icon {
	--icon-size: 20px;
}

.l-menu-recruit-sp__body > .l-menu-recruit-sp__entry {
	width: 100%;
}

.l-menu-recruit-sp__corporate {
	display: flex;
	gap: 6px; /* Figma の値 */
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	font: var(--text-body-s);
	font-size: 13px; /* Figma SP/Body-S */
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-on-brand);
	text-decoration: none;
}

.l-menu-recruit-sp__corporate:hover {
	text-decoration: underline;
}

.l-menu-recruit-sp__corporate > .l-menu-recruit-sp__corporate-icon {
	--icon-size: 18px;
}

/* ==========================================================================
   フッター（l-footer-recruit）
   ========================================================================== */
.l-footer-recruit {
	padding: var(--space-3xl) 0 var(--space-2xl); /* PC 48・40 ／ SP 40・32 */
	color: var(--neutral-300);
	background: var(--neutral-900); /* Figma: neutral/900（コーポレートのフッターの紺とは別） */
}

.l-footer-recruit__inner {
	display: flex;
	flex-direction: column;
	gap: 28px; /* Figma の値 */
}

.l-footer-recruit__top {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
	padding-bottom: 28px; /* 線との間（Figma の値） */
	border-bottom: 1px solid var(--neutral-800);
}

.l-footer-recruit__brand {
	color: var(--color-text-on-brand);
}

.l-footer-recruit__divider {
	background: var(--neutral-600);
}

.l-footer-recruit__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-xl);
}

.l-footer-recruit__link {
	display: flex;
	align-items: center;
	min-height: 44px;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--neutral-300);
	text-decoration: none;
}

.l-footer-recruit__link:hover {
	color: var(--color-text-on-brand);
	text-decoration: underline;
}

/* Instagram（アイコン＋小さな案内。押せる高さは .l-footer-recruit__link の 44px） */
.l-footer-recruit__instagram {
	gap: var(--space-xs);
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
}

.l-footer-recruit__instagram-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-text-on-brand);
}

.l-footer-recruit__copyright {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--neutral-400);
}

.l-footer-recruit__copyright small {
	font-size: inherit;
}

@media (max-width: 767px) {
	.l-footer-recruit__inner {
		gap: 20px; /* Figma の値 */
	}

	.l-footer-recruit__top {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
		padding-bottom: 20px;
	}

	.l-footer-recruit__brand {
		gap: var(--space-xs);
	}

	.l-footer-recruit__logo {
		width: 98px;
		height: 28px;
	}

	.l-footer-recruit__divider {
		height: 20px;
	}

	.l-footer-recruit__links {
		gap: 0 var(--space-lg);
	}

	/* Instagram は1行に（ほかのリンクはその下に並べる） */
	.l-footer-recruit__links-sns {
		flex-basis: 100%;
	}

	.l-footer-recruit__copyright {
		font: var(--text-en-caption); /* Figma SP は Barlow（SP/EN/Caption） */
		letter-spacing: var(--ls-en-caption);
	}
}