/**
 * style_recruit.css
 *
 * Recruitment page specific styles
 * Loaded conditionally via siro_is_recruit_page() check in header-lower.php
 *
 * Implementation phases:
 *   PATCH_RECRUIT_004: Design tokens + base typography (this file's current state)
 *   PATCH_RECRUIT_005: Hero + Manifesto styles
 *   PATCH_RECRUIT_006: What/Why + Who styles
 *   PATCH_RECRUIT_007: Process & CTA styles
 *   PATCH_RECRUIT_008+: Notes archive/single styles
 *
 * Design dependencies:
 *   - Google Fonts loaded globally in header-lower.php:42
 *     (Outfit / Shippori Mincho / DM Sans / DM Mono / Noto Sans JP)
 *   - Color variables defined in style_v2.css :root
 *     (--white / --ivory / --warm-gray / --orange / --peach / --charcoal /
 *      --text-secondary)
 *
 * Class naming convention:
 *   - Component classes: snake_case with section prefix (.recruit_hero)
 *   - State/utility classes: kebab-case (.is-mincho, .is-recruit)
 *
 * Font strategy (案B+):
 *   - Main body: DM Sans + Noto Sans JP (sans-serif主軸)
 *   - Display: Outfit (英字見出し用、Light 200/300)
 *   - Selective accent: Shippori Mincho via .is-mincho utility
 *   - Numbers/labels: DM Mono
 */


/* ============================================================
 * SECTION 01: Design Tokens
 * 採用ページ用のデザイン定数。body.is-recruit にスコープして
 * 他ページへの影響をゼロに保つ。
 * ============================================================ */

body.is-recruit {

	/* --- Font stacks -------------------------------------------------- */
	--font-display:  'Outfit', system-ui, -apple-system, sans-serif;
	--font-body:     'DM Sans', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
	--font-jp:       'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
	--font-mincho:   'Shippori Mincho', 'YuMincho', '游明朝', 'Yu Mincho', serif;
	--font-mono:     'DM Mono', 'Courier New', Courier, monospace;

	/* --- Type scale (mobile baseline) --------------------------------- */
	/* Base 16px. Editorial scale with Cereal/COS-inspired generous steps. */
	--fs-xs:    0.75rem;    /* 12px - micro labels (DM Mono用想定) */
	--fs-sm:    0.875rem;   /* 14px - captions */
	--fs-base:  1rem;       /* 16px - body */
	--fs-md:    1.125rem;   /* 18px - lead paragraph */
	--fs-lg:    1.25rem;    /* 20px */
	--fs-xl:    1.5rem;     /* 24px - small heading */
	--fs-2xl:   2rem;       /* 32px - section heading */
	--fs-3xl:   2.5rem;     /* 40px - large heading */
	--fs-4xl:   3rem;       /* 48px - hero subtitle */
	--fs-5xl:   4rem;       /* 64px - hero (mobile) */
	--fs-6xl:   5rem;       /* 80px - extra large (mobile cap) */

	/* --- Line-heights ------------------------------------------------- */
	--lh-tight:    1.2;    /* 大見出し */
	--lh-snug:     1.4;    /* 中見出し */
	--lh-normal:   1.6;    /* リード文 */
	--lh-relaxed:  1.8;    /* 本文(日本語の標準) */
	--lh-loose:    2.0;    /* 余白を取った長文 */

	/* --- Letter-spacing ---------------------------------------------- */
	--ls-tight:    -0.01em;  /* 大見出し(圧縮感) */
	--ls-normal:   0.02em;   /* 中見出し */
	--ls-wide:     0.04em;   /* 本文(日本語の可読性) */
	--ls-wider:    0.08em;   /* キャプション・ラベル */
	--ls-widest:   0.16em;   /* ロゴ的な扱い(Outfit用) */

	/* --- Spacing scale ----------------------------------------------- */
	/* 8pxベース、Cereal/COS的な余白感 */
	--space-xs:    0.5rem;    /* 8px */
	--space-sm:    1rem;      /* 16px */
	--space-md:    2rem;      /* 32px */
	--space-lg:    4rem;      /* 64px */
	--space-xl:    6rem;      /* 96px */
	--space-2xl:   8rem;      /* 128px - セクション縦余白(mobile) */
	--space-3xl:   12rem;     /* 192px - セクション縦余白(desktop) */

	/* --- Layout ------------------------------------------------------ */
	--container-max:     1200px;   /* 標準コンテナ */
	--container-narrow:  720px;    /* テキスト主体セクション */
	--container-text:    560px;    /* 長文読み物(Notes記事本文等) */


	/* ============================================================
	 * SECTION 02: Base Typography
	 * body 全体の基本スタイル。各セクション側で必要に応じて上書き。
	 * ============================================================ */

	background-color: var(--ivory);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}


/* --- Reset (採用ページ内のみ) --------------------------------------- */

body.is-recruit *,
body.is-recruit *::before,
body.is-recruit *::after {
	box-sizing: border-box;
}

body.is-recruit img,
body.is-recruit svg,
body.is-recruit video {
	max-width: 100%;
	height: auto;
	display: block;
}


/* --- Paragraph: editorial rhythm ------------------------------------ */

body.is-recruit p {
	margin: 0 0 var(--space-sm);
}

body.is-recruit p:last-child {
	margin-bottom: 0;
}


/* --- Headings: light display weight --------------------------------- */

body.is-recruit h1,
body.is-recruit h2,
body.is-recruit h3,
body.is-recruit h4,
body.is-recruit h5,
body.is-recruit h6 {
	font-family: var(--font-body);
	font-weight: 300;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-normal);
	margin: 0 0 var(--space-md);
	color: var(--charcoal);
}


/* --- Links: subtle, underline on hover ------------------------------ */

body.is-recruit a {
	color: var(--charcoal);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

body.is-recruit a:hover {
	opacity: 0.6;
}


/* ============================================================
 * SECTION 03: Utility Classes
 * ============================================================ */

/* --- 明朝アクセント(Shippori Mincho 選択的適用) ------------------- */
body.is-recruit .is-mincho {
	font-family: var(--font-mincho);
	font-weight: 400;
	letter-spacing: var(--ls-normal);
}

/* --- 英字ディスプレイ(Outfit、ロゴ的扱い) ------------------------ */
body.is-recruit .is-display {
	font-family: var(--font-display);
	font-weight: 200;
	letter-spacing: var(--ls-widest);
	text-transform: lowercase;
}

/* --- モノスペース(ラベル・数字) --------------------------------- */
body.is-recruit .is-mono {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

/* --- セカンダリテキストカラー -------------------------------------- */
body.is-recruit .is-secondary {
	color: var(--text-secondary);
}


/* ============================================================
 * SECTION 04: Layout Primitives
 * ============================================================ */

/* --- セクション共通の縦余白 ---------------------------------------- */
body.is-recruit .recruit_section {
	padding-block: var(--space-2xl);
	position: relative;
}

/* --- インナーコンテナ ---------------------------------------------- */
body.is-recruit .recruit_inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-sm);
}

body.is-recruit .recruit_inner--narrow {
	max-width: var(--container-narrow);
}

body.is-recruit .recruit_inner--text {
	max-width: var(--container-text);
}


/* ============================================================
 * SECTION 05: Responsive Adjustments
 * 既存テーマ規約に準拠(768 / 900)
 * ============================================================ */

/* --- Tablet以上(768px+) ------------------------------------------ */
@media (min-width: 768px) {

	body.is-recruit {
		/* デスクトップで大見出しを更に大きく */
		--fs-5xl: 5rem;        /* 64 → 80px */
		--fs-6xl: 6.5rem;      /* 80 → 104px */
	}

	body.is-recruit .recruit_inner {
		padding-inline: var(--space-md);
	}

	body.is-recruit .recruit_section {
		padding-block: var(--space-3xl);
	}
}


/* --- Desktop以上(900px+) ----------------------------------------- */
@media (min-width: 900px) {

	body.is-recruit {
		/* 大画面で更に余白とサイズを引き上げる */
		--fs-6xl: 7.5rem;      /* 120px - Hero用 */
	}
}


/* ============================================================
 * SECTION: Hero (PATCH_RECRUIT_005)
 * 採用ページ最上部の宣言セクション
 * ============================================================ */

body.is-recruit .recruit_hero {
	min-height: 70vh;
	display: flex;
	align-items: center;
	background-color: var(--ivory);
}

body.is-recruit .recruit_hero_content {
	width: 100%;
}

body.is-recruit .recruit_hero_title {
	font-size: 2.25rem;          /* 36px - mobile */
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
}

body.is-recruit .recruit_hero_sub {
	font-family: var(--font-body);
	font-size: var(--fs-base);   /* 16px - mobile */
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0;
}


/* --- Tablet以上(768px+) ------------------------------------------ */
@media (min-width: 768px) {

	body.is-recruit .recruit_hero {
		min-height: 80vh;
	}

	body.is-recruit .recruit_hero_title {
		font-size: 3rem;         /* 48px */
		margin-bottom: var(--space-lg);
	}

	body.is-recruit .recruit_hero_sub {
		font-size: var(--fs-md); /* 18px */
	}
}


/* --- Desktop以上(900px+) ----------------------------------------- */
@media (min-width: 900px) {

	body.is-recruit .recruit_hero {
		min-height: 85vh;
	}

	body.is-recruit .recruit_hero_title {
		font-size: 4rem;         /* 64px */
	}

	body.is-recruit .recruit_hero_sub {
		font-size: var(--fs-lg); /* 20px */
	}
}


/* ============================================================
 * SECTION: Manifesto (PATCH_RECRUIT_006)
 * 採用ページの思想を語る本文セクション
 * ============================================================ */

body.is-recruit .recruit_manifesto {
	background-color: var(--ivory);
}

body.is-recruit .recruit_manifesto_content {
	width: 100%;
}

/* --- Lead: 冒頭の問いかけ ----------------------------------------- */
body.is-recruit .recruit_manifesto_lead {
	font-size: var(--fs-md);              /* 18px mobile */
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-lg);
}

/* --- Core quote: 中核引用(Shippori Mincho) --------------------- */
body.is-recruit .recruit_manifesto_quote {
	font-size: var(--fs-xl);              /* 24px mobile */
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-lg);
	padding: var(--space-md) 0;
	border-top: 1px solid var(--warm-gray);
	border-bottom: 1px solid var(--warm-gray);
	text-align: left;
}

/* --- Body paragraphs --------------------------------------------- */
body.is-recruit .recruit_manifesto p {
	font-size: var(--fs-base);            /* 16px mobile */
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
}

/* --- Closing: 結びの一文 ------------------------------------------ */
body.is-recruit .recruit_manifesto_closing {
	margin-top: var(--space-lg);
}


/* --- Tablet以上(768px+) ------------------------------------------ */
@media (min-width: 768px) {

	body.is-recruit .recruit_manifesto_lead {
		font-size: var(--fs-lg);          /* 20px */
	}

	body.is-recruit .recruit_manifesto_quote {
		font-size: var(--fs-2xl);         /* 32px */
		padding: var(--space-lg) 0;
		margin-bottom: var(--space-xl);
	}

	body.is-recruit .recruit_manifesto p {
		font-size: var(--fs-md);          /* 18px */
		margin-bottom: var(--space-lg);
	}
}


/* --- Desktop以上(900px+) ----------------------------------------- */
@media (min-width: 900px) {

	body.is-recruit .recruit_manifesto_quote {
		font-size: var(--fs-3xl);         /* 40px */
	}
}


/* ============================================================
 * Manifesto セクション縦余白の調整(PATCH_006 補正)
 * - Hero との視覚的繋がりを密に。 セクション base padding を縮める
 * - mobile: 128 → 96 / desktop: 192 → 96
 * ============================================================ */
body.is-recruit .recruit_manifesto {
	padding-block: var(--space-xl);   /* 96px */
}
@media (min-width: 768px) {
	body.is-recruit .recruit_manifesto {
		padding-block: var(--space-xl); /* 96px (desktop も維持で詰める) */
	}
}


/* ============================================================
 * SECTION: What & Why we do (PATCH_RECRUIT_007)
 * 私たちが、向き合う場面
 * ============================================================ */

body.is-recruit .recruit_whatwhy {
	background-color: var(--ivory);
}

body.is-recruit .recruit_whatwhy_content {
	width: 100%;
}

/* --- Section header (この章タイトル) ----------------------------- */
/* 注: 他セクション(Who/Process等)でも再利用するため汎用化 */
body.is-recruit .recruit_section_header {
	margin-bottom: var(--space-lg);
}

body.is-recruit .recruit_section_eyebrow {
	color: var(--text-secondary);
	margin: 0 0 var(--space-xs);
}

body.is-recruit .recruit_section_title {
	font-size: var(--fs-2xl);          /* 32px mobile */
	font-weight: 300;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0;
}

/* --- リード文 ---------------------------------------------------- */
body.is-recruit .recruit_whatwhy_lead {
	font-size: var(--fs-md);           /* 18px mobile */
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-xl);
}

/* --- 3ペルソナのコンテナ ----------------------------------------- */
body.is-recruit .recruit_whatwhy_personas {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	margin-bottom: var(--space-xl);
}

/* --- 各ペルソナのブロック ---------------------------------------- */
body.is-recruit .recruit_persona {
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--warm-gray);
}

body.is-recruit .recruit_persona:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

body.is-recruit .recruit_persona_title {
	font-size: var(--fs-xl);           /* 24px mobile */
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

body.is-recruit .recruit_persona_num {
	color: var(--text-secondary);
	flex-shrink: 0;
}

body.is-recruit .recruit_persona_name {
	flex: 1;
	min-width: 0;
}

body.is-recruit .recruit_persona p {
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
}

body.is-recruit .recruit_persona p:last-child {
	margin-bottom: 0;
}

/* --- 結びのブロック ---------------------------------------------- */
body.is-recruit .recruit_whatwhy_closing {
	padding-top: var(--space-xl);
	border-top: 1px solid var(--warm-gray);
}

body.is-recruit .recruit_whatwhy_closing p {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
}

body.is-recruit .recruit_whatwhy_closing p:last-child {
	margin-bottom: 0;
}

body.is-recruit .recruit_whatwhy_reason {
	margin-top: var(--space-md) !important;
}


/* --- Tablet以上(768px+) ------------------------------------------ */
@media (min-width: 768px) {

	body.is-recruit .recruit_section_title {
		font-size: var(--fs-3xl);      /* 40px */
	}

	body.is-recruit .recruit_whatwhy_lead {
		font-size: var(--fs-lg);       /* 20px */
	}

	body.is-recruit .recruit_persona_title {
		font-size: var(--fs-2xl);      /* 32px */
	}

	body.is-recruit .recruit_persona p {
		font-size: var(--fs-md);       /* 18px */
	}

	body.is-recruit .recruit_whatwhy_personas {
		gap: var(--space-2xl);
	}

	body.is-recruit .recruit_whatwhy_closing p {
		font-size: var(--fs-md);
	}
}


/* ============================================================
 * SECTION: Who we look for (PATCH_RECRUIT_008)
 * こんな方と、出会いたい
 * ============================================================ */

body.is-recruit .recruit_who {
	background-color: var(--ivory);
}

body.is-recruit .recruit_who_content {
	width: 100%;
}

/* --- Lead -------------------------------------------------------- */
body.is-recruit .recruit_who_lead {
	font-size: var(--fs-md);             /* 18px mobile */
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-lg);
}

/* --- 出会いたい方リスト ---------------------------------------- */
body.is-recruit .recruit_who_list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl);
}

body.is-recruit .recruit_who_list li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: var(--space-sm);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
}

/* オレンジの罫線マーカー */
body.is-recruit .recruit_who_list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 1rem;
	height: 1px;
	background: var(--orange);
}

body.is-recruit .recruit_who_list li:last-child {
	margin-bottom: 0;
}

/* --- 中核宣言ブロック -------------------------------------------- */
body.is-recruit .recruit_who_statement {
	padding: var(--space-lg) 0;
	border-top: 1px solid var(--warm-gray);
	border-bottom: 1px solid var(--warm-gray);
	margin-bottom: var(--space-xl);
}

body.is-recruit .recruit_who_declaration {
	font-size: var(--fs-lg);             /* 20px mobile */
	font-weight: 500;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
}

body.is-recruit .recruit_who_statement p:not(.recruit_who_declaration) {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0;
}

/* --- 合わない方サブセクション ------------------------------------ */
body.is-recruit .recruit_who_not_fit {
	margin-bottom: var(--space-xl);
}

body.is-recruit .recruit_who_not_fit_title {
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--text-secondary);
	letter-spacing: var(--ls-normal);
	margin: 0 0 var(--space-md);
}

body.is-recruit .recruit_who_not_list {
	list-style: none;
	padding: 0;
	margin: 0;
}

body.is-recruit .recruit_who_not_list li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: var(--space-xs);
	font-size: var(--fs-sm);             /* 14px mobile, 抑え気味 */
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--text-secondary);
}

/* グレーの罫線マーカー(出会いたい方より控えめ) */
body.is-recruit .recruit_who_not_list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 1rem;
	height: 1px;
	background: var(--text-secondary);
}

body.is-recruit .recruit_who_not_list li:last-child {
	margin-bottom: 0;
}

/* --- 結びの一文(カジュアル面談への導線) ----------------------- */
body.is-recruit .recruit_who_closing {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--warm-gray);
}


/* --- Tablet以上(768px+) ------------------------------------------ */
@media (min-width: 768px) {

	body.is-recruit .recruit_who_lead {
		font-size: var(--fs-lg);          /* 20px */
	}

	body.is-recruit .recruit_who_list li {
		font-size: var(--fs-md);           /* 18px */
		padding-left: 2.5rem;
		margin-bottom: var(--space-md);
	}

	body.is-recruit .recruit_who_list li::before {
		width: 1.5rem;
	}

	body.is-recruit .recruit_who_statement {
		padding: var(--space-xl) 0;
	}

	body.is-recruit .recruit_who_declaration {
		font-size: var(--fs-xl);          /* 24px */
	}

	body.is-recruit .recruit_who_statement p:not(.recruit_who_declaration) {
		font-size: var(--fs-md);
	}

	body.is-recruit .recruit_who_not_list li {
		font-size: var(--fs-base);         /* 16px */
		padding-left: 2.5rem;
	}

	body.is-recruit .recruit_who_not_list li::before {
		width: 1.5rem;
	}

	body.is-recruit .recruit_who_closing {
		font-size: var(--fs-lg);
	}
}


/* ============================================================
 * SECTION: Process & CTA (PATCH_RECRUIT_009)
 * 選考は、お互いを知る、対話のプロセス
 * ============================================================ */

body.is-recruit .recruit_process {
	background-color: var(--ivory);
}

body.is-recruit .recruit_process_content {
	width: 100%;
}

/* --- リード ------------------------------------------------------ */
body.is-recruit .recruit_process_lead {
	font-size: var(--fs-md);             /* 18px mobile */
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-xl);
}

/* --- プロセス3ステップ ------------------------------------------ */
body.is-recruit .recruit_process_steps {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

body.is-recruit .recruit_process_step {
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--warm-gray);
}

body.is-recruit .recruit_process_step:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

body.is-recruit .recruit_process_step_num {
	display: block;
	color: var(--orange);
	margin: 0 0 var(--space-xs);
}

body.is-recruit .recruit_process_step_title {
	font-size: var(--fs-xl);             /* 24px mobile */
	font-weight: 400;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-sm);
}

body.is-recruit .recruit_process_step_title small {
	font-size: 0.7em;
	font-weight: 400;
	color: var(--text-secondary);
	margin-left: var(--space-xs);
}

body.is-recruit .recruit_process_step p {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0;
}

/* --- CTAブロック ------------------------------------------------- */
body.is-recruit .recruit_cta_block {
	padding-top: var(--space-xl);
	border-top: 1px solid var(--warm-gray);
}

body.is-recruit .recruit_cta_heading {
	font-size: var(--fs-xl);             /* 24px mobile */
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
}

body.is-recruit .recruit_cta_lead {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-lg);
}

body.is-recruit .recruit_cta_actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
}

/* --- CTAメインボタン --------------------------------------------- */
body.is-recruit .recruit_cta_button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 400;
	color: var(--charcoal);
	background-color: transparent;
	border: 1px solid var(--charcoal);
	text-decoration: none;
	letter-spacing: var(--ls-wide);
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.is-recruit .recruit_cta_button:hover {
	background-color: var(--charcoal);
	color: var(--white);
	opacity: 1;                          /* 既存の汎用 a:hover opacity を打ち消す */
}

body.is-recruit .recruit_cta_arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

body.is-recruit .recruit_cta_button:hover .recruit_cta_arrow {
	transform: translateX(0.25rem);
}

/* --- CTA補助リンク ----------------------------------------------- */
body.is-recruit .recruit_cta_link {
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}


/* --- Tablet以上(768px+) ------------------------------------------ */
@media (min-width: 768px) {

	body.is-recruit .recruit_process_lead {
		font-size: var(--fs-lg);          /* 20px */
	}

	body.is-recruit .recruit_process_step_title {
		font-size: var(--fs-2xl);         /* 32px */
	}

	body.is-recruit .recruit_process_step p {
		font-size: var(--fs-md);          /* 18px */
	}

	body.is-recruit .recruit_process_steps {
		gap: var(--space-2xl);
	}

	body.is-recruit .recruit_cta_heading {
		font-size: var(--fs-2xl);         /* 32px */
	}

	body.is-recruit .recruit_cta_lead {
		font-size: var(--fs-md);
	}

	body.is-recruit .recruit_cta_button {
		font-size: var(--fs-md);
		padding: var(--space-md) var(--space-xl);
	}

	body.is-recruit .recruit_cta_actions {
		flex-direction: row;
		align-items: center;
		gap: var(--space-lg);
	}
}


/* ============================================================
 * PATCH_RECRUIT_009 補正(2026-05-16): 全体の余白とCTAボタン調整
 *
 * 1. 全セクションの縦余白を一律で詰める(冗長感対策)
 *    - mobile: var(--space-2xl) 128 → var(--space-xl) 96
 *    - desktop: var(--space-3xl) 192 → var(--space-2xl) 128
 *    - PATCH_006 で個別に xl にした Manifesto は、 全体統一で 2xl(128) と
 *      なるが、 desktop で他セクションと揃うため OK
 *
 * 2. CTA ボタンのテキスト折り返しを禁止
 *    - 「カジュアル面談へエントリー」が「エントリ / ー」と折り返す現象を解消
 * ============================================================ */

body.is-recruit .recruit_section {
	padding-block: var(--space-xl);   /* mobile 96px */
}
@media (min-width: 768px) {
	body.is-recruit .recruit_section {
		padding-block: var(--space-2xl); /* desktop 128px */
	}
}

/* CTA ボタンのテキスト折り返し禁止 */
body.is-recruit .recruit_cta_button {
	white-space: nowrap;
}


/* ============================================================
 * PATCH_RECRUIT_009 補正 #2(2026-05-16): CTA 補助リンク + Process 横並び
 *
 * 1. .recruit_cta_link(その他のお問い合わせ) の折り返し禁止
 * 2. Process の 3 ステップを desktop(768px+)で横並びに
 *    - 縦長感を更に解消
 *    - 各ステップの border-bottom(縦並び時の区切り) は撤去し、 gap で配置
 *    - モバイルは縦並び維持(罫線区切りも維持)
 * ============================================================ */

/* CTA 補助リンク折り返し禁止 */
body.is-recruit .recruit_cta_link {
	white-space: nowrap;
}

/* Process 3 ステップを desktop で横並び化 */
@media (min-width: 768px) {
	body.is-recruit .recruit_process_steps {
		flex-direction: row;
		gap: var(--space-lg);          /* カラム間 64px */
		align-items: flex-start;
	}
	body.is-recruit .recruit_process_step {
		flex: 1 1 0;                   /* 3カラム均等割り */
		min-width: 0;                  /* テキスト折り返し確保 */
		padding-bottom: 0;
		border-bottom: none;           /* 縦並び時の区切り罫線を撤去 */
	}
}


/* ============================================================
 * PATCH_RECRUIT_009 補正 #2 撤回(2026-05-16): Process 縦並びに戻す
 * - 横並びは見た目が違和感あったため取り消し
 * - CTA 補助リンクの nowrap は維持
 * ============================================================ */
@media (min-width: 768px) {
	body.is-recruit .recruit_process_steps {
		flex-direction: column;
		gap: var(--space-2xl);          /* desktop 縦並び時の gap を再指定 */
		align-items: stretch;
	}
	body.is-recruit .recruit_process_step {
		flex: initial;
		min-width: initial;
		padding-bottom: var(--space-lg);
		border-bottom: 1px solid var(--warm-gray);
	}
	body.is-recruit .recruit_process_step:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
}


/* ============================================================
 * PATCH_RECRUIT_009_FIX
 * - 縦余白の引き締め(約33%削減)
 * - Hero の min-height 縮小
 * - 背景の交互配置(Manifesto と Who を白に)
 *
 * 全てオーバーライド形式で記述。 元の各セクション定義には手を入れない。
 * ============================================================ */


/* --- 1. セクション縦余白の引き締め -------------------------------- */

body.is-recruit .recruit_section {
	padding-block: var(--space-xl);      /* mobile: 128px → 96px */
}

@media (min-width: 768px) {

	body.is-recruit .recruit_section {
		padding-block: var(--space-2xl); /* tablet+: 192px → 128px */
	}
}


/* --- 2. Hero の min-height 引き締め ------------------------------- */

body.is-recruit .recruit_hero {
	min-height: 60vh;                    /* mobile: 70vh → 60vh */
}

@media (min-width: 768px) {

	body.is-recruit .recruit_hero {
		min-height: 70vh;                /* tablet: 80vh → 70vh */
	}
}

@media (min-width: 900px) {

	body.is-recruit .recruit_hero {
		min-height: 75vh;                /* desktop: 85vh → 75vh */
	}
}


/* --- 3. 背景の交互配置 -------------------------------------------- */

/*
 * リズム:
 *   Hero      → ivory (継続)
 *   Manifesto → 白    (変更)
 *   What/Why  → ivory (継続)
 *   Who       → 白    (変更)
 *   Process   → ivory (継続)
 */

body.is-recruit .recruit_manifesto {
	background-color: var(--white);
}

body.is-recruit .recruit_who {
	background-color: var(--white);
}


/* ============================================================
 * PATCH_RECRUIT_009_FIX2
 * セクションごとに異なるレイアウトを導入し、 視覚的なリズムを生む
 *
 * 1. Manifesto → 中央寄せ・引用組スタイル
 * 2. Who       → 2カラム(左タイトル / 右コンテンツ)のサイドバー型
 * 3. Process   → 3カラム横並びステップカード
 *
 * モバイルでは全て1カラムに戻る(既存スタイルを維持)。
 * 注: --space-2xs は未定義のため --space-xs(8px) に置換して使用
 * ============================================================ */


/* ============================================================
 * 1. Manifesto: 中央寄せ・引用組スタイル
 * ============================================================ */

body.is-recruit .recruit_manifesto .recruit_inner {
	max-width: 640px;                    /* narrow から 720→640 に狭める */
}

body.is-recruit .recruit_manifesto_content {
	text-align: center;
}

body.is-recruit .recruit_manifesto_lead,
body.is-recruit .recruit_manifesto_quote,
body.is-recruit .recruit_manifesto p,
body.is-recruit .recruit_manifesto_closing {
	text-align: center;
}


/* ============================================================
 * 2. Who: 2カラムサイドバー型(デスクトップのみ)
 * ============================================================ */

@media (min-width: 900px) {

	body.is-recruit .recruit_who .recruit_inner {
		max-width: 960px;                /* 720→960 に広げる */
	}

	body.is-recruit .recruit_who_content {
		display: grid;
		grid-template-columns: minmax(180px, 1fr) 2fr;
		column-gap: var(--space-2xl);
		align-items: start;
	}

	/* 左カラム: セクションヘッダー(タイトルのみ) */
	body.is-recruit .recruit_who .recruit_section_header {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
		position: sticky;
		top: var(--space-lg);
	}

	/* 右カラム: 全コンテンツが上から順に積まれる */
	body.is-recruit .recruit_who_lead {
		grid-column: 2;
		grid-row: 1;
	}

	body.is-recruit .recruit_who_list,
	body.is-recruit .recruit_who_statement,
	body.is-recruit .recruit_who_not_fit,
	body.is-recruit .recruit_who_closing {
		grid-column: 2;
	}
}


/* ============================================================
 * 3. Process: 3カラム横並びカード(デスクトップのみ)
 * ============================================================ */

@media (min-width: 768px) {

	body.is-recruit .recruit_process .recruit_inner {
		max-width: 920px;                /* 720→920 に広げる */
	}

	/* 3カラムのグリッドに変換 */
	body.is-recruit .recruit_process_steps {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-lg);             /* 縦の var(--space-2xl) から短縮 */
	}

	/* 各ステップ: 下罫線を消し、 左に縦罫線を加える */
	body.is-recruit .recruit_process_step {
		padding-bottom: 0;
		border-bottom: none;
		padding-left: var(--space-md);
		border-left: 1px solid var(--warm-gray);
	}

	body.is-recruit .recruit_process_step:first-child {
		padding-left: 0;
		border-left: none;
	}

	/* 横並びカードに合わせてフォントサイズを調整(狭いカラムで読みやすくする) */
	body.is-recruit .recruit_process_step_title {
		font-size: var(--fs-lg);          /* 32px → 20px */
		line-height: var(--lh-snug);
	}

	body.is-recruit .recruit_process_step_title small {
		display: block;                  /* 補足は改行して別行に */
		margin-left: 0;
		margin-top: var(--space-xs);     /* 元案: --space-2xs(未定義) → --space-xs(8px) */
		font-size: 0.75em;
	}

	body.is-recruit .recruit_process_step p {
		font-size: var(--fs-base);        /* 18px → 16px */
	}

	body.is-recruit .recruit_process_step_num {
		font-size: var(--fs-xs);
	}
}

/* デスクトップでステップカードの間隔を維持 */
@media (min-width: 900px) {

	body.is-recruit .recruit_process_steps {
		gap: var(--space-xl);
	}
}


/* ============================================================
 * PATCH_RECRUIT_009_FIX2 補正(2026-05-16): Who sticky 範囲拡大
 *
 * 問題: 左カラム (section_header) が grid-row: 1 のみ占有していたため、
 *       sticky の有効範囲が極小で、 スクロール中に章タイトルが消える。
 * 対応: grid-row を 1 / -1 に変更して全行占有にし、 align-self: start で
 *       sticky を機能させる。 右カラム要素は変更不要(grid-column: 2 で自動配置)。
 * ============================================================ */
@media (min-width: 900px) {
	body.is-recruit .recruit_who .recruit_section_header {
		grid-row: 1 / -1;
		align-self: start;
	}
}


/* ============================================================
 * PATCH_RECRUIT_009_FIX2 補正 #2(2026-05-16): What/Why + Who 余白引き締め
 *
 * 1. What/Why セクションの全要素余白を半分に
 * 2. Who 右カラムの余白も同様に圧縮
 * 3. Who の sticky を再確認(grid-row 全範囲占有 + align-self: start を強制)
 * ============================================================ */


/* --- 1. What/Why 余白圧縮(全体的に半分) ------------------------- */

body.is-recruit .recruit_whatwhy .recruit_section_header {
	margin-bottom: var(--space-md);            /* lg(64) → md(32) */
}

body.is-recruit .recruit_whatwhy_lead {
	margin: 0 0 var(--space-md);               /* xl(96) → md(32) */
}

body.is-recruit .recruit_whatwhy_personas {
	gap: var(--space-md);                       /* xl(96) → md(32) */
	margin-bottom: var(--space-md);            /* xl(96) → md(32) */
}

body.is-recruit .recruit_persona {
	padding-bottom: var(--space-md);            /* lg(64) → md(32) */
}

body.is-recruit .recruit_persona_title {
	margin: 0 0 var(--space-sm);                /* md(32) → sm(16) */
}

body.is-recruit .recruit_persona p {
	margin: 0 0 var(--space-sm);                /* md(32) → sm(16) */
}

body.is-recruit .recruit_whatwhy_closing {
	padding-top: var(--space-md);               /* xl(96) → md(32) */
}

body.is-recruit .recruit_whatwhy_closing p {
	margin: 0 0 var(--space-sm);                /* md(32) → sm(16) */
}

body.is-recruit .recruit_whatwhy_reason {
	margin-top: var(--space-sm) !important;    /* md(32) → sm(16) */
}

@media (min-width: 768px) {
	body.is-recruit .recruit_whatwhy_personas {
		gap: var(--space-lg);                   /* 2xl(128) → lg(64) */
	}
}


/* --- 2. Who 右カラム余白圧縮 ------------------------------------- */

body.is-recruit .recruit_who_lead {
	margin: 0 0 var(--space-md);                /* lg(64) → md(32) */
}

body.is-recruit .recruit_who_list {
	margin: 0 0 var(--space-md);                /* xl(96) → md(32) */
}

body.is-recruit .recruit_who_list li {
	margin-bottom: var(--space-xs);             /* sm(16) → xs(8) */
}

body.is-recruit .recruit_who_statement {
	padding: var(--space-md) 0;                 /* lg(64) → md(32) */
	margin-bottom: var(--space-md);             /* xl(96) → md(32) */
}

body.is-recruit .recruit_who_declaration {
	margin: 0 0 var(--space-sm);                /* md(32) → sm(16) */
}

body.is-recruit .recruit_who_not_fit {
	margin-bottom: var(--space-md);             /* xl(96) → md(32) */
}

body.is-recruit .recruit_who_not_list li {
	margin-bottom: var(--space-xs);             /* xs(8) 維持 */
}

body.is-recruit .recruit_who_closing {
	padding-top: var(--space-md);               /* lg(64) → md(32) */
}

@media (min-width: 768px) {
	body.is-recruit .recruit_who_list li {
		margin-bottom: var(--space-sm);         /* md(32) → sm(16) */
	}
	body.is-recruit .recruit_who_statement {
		padding: var(--space-lg) 0;             /* xl(96) → lg(64) */
	}
}


/* --- 3. Who sticky 強制再修正 ------------------------------------ */
/* 既存の section_header 設定を全部上書きして確実に sticky 化 */

@media (min-width: 900px) {
	body.is-recruit .recruit_who_content > .recruit_section_header {
		grid-column: 1 !important;
		grid-row: 1 / -1 !important;
		align-self: start !important;
		position: sticky !important;
		top: var(--space-md) !important;
		margin-bottom: 0 !important;
	}
}


/* ============================================================
 * PATCH_RECRUIT_009_FIX2 補正 #3(2026-05-16):
 * 1. Who sticky の top 値をヘッダー高さに合わせる
 *    - 32px → 96px(ヘッダー約 80px + 余裕 16px)
 * 2. What/Why の lead 下余白を倍に
 *    - 32px → 64px
 * ============================================================ */

/* What/Why lead 下余白 倍に */
body.is-recruit .recruit_whatwhy_lead {
	margin: 0 0 var(--space-lg);            /* md(32) → lg(64) */
}

/* Who sticky top 値の調整(ヘッダー高さに合わせる) */
@media (min-width: 900px) {
	body.is-recruit .recruit_who_content > .recruit_section_header {
		top: var(--space-xl) !important;    /* md(32) → xl(96)、 ヘッダーに被らない高さ */
	}
}


/* ============================================================
 * PATCH_RECRUIT_009_FIX2 補正 #4(2026-05-16): Who 左カラム改行位置改善
 * - 「こんな方と、出 / 会いたい」 のような単語途中での改行を回避
 * - 左カラム幅を 180→220px に拡張
 * - word-break: keep-all で句読点でのみ改行
 * ============================================================ */
@media (min-width: 900px) {
	body.is-recruit .recruit_who_content {
		grid-template-columns: minmax(220px, 1fr) 2fr;
	}
	body.is-recruit .recruit_who .recruit_section_title,
	body.is-recruit .recruit_who .recruit_section_eyebrow {
		word-break: keep-all;
		overflow-wrap: break-word;
		line-break: strict;
	}
}


/* ============================================================
 * SECTION: Notes (PATCH_RECRUIT_010)
 * siroが、考えていること
 * ============================================================ */

body.is-recruit .recruit_notes {
	background-color: var(--white);
}

body.is-recruit .recruit_notes_content {
	width: 100%;
}

/* --- リード ------------------------------------------------------ */
body.is-recruit .recruit_notes_lead {
	font-size: var(--fs-md);             /* 18px mobile */
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-xl);
}

/* --- 記事カードリスト -------------------------------------------- */
body.is-recruit .recruit_notes_list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl);
	border-top: 1px solid var(--warm-gray);
}

body.is-recruit .recruit_notes_item {
	border-bottom: 1px solid var(--warm-gray);
}

/* --- 各カードのリンク(カード全体がクリック可能) ----------------- */
body.is-recruit .recruit_notes_link {
	display: block;
	padding: var(--space-lg) 0;
	text-decoration: none;
	color: var(--charcoal);
	transition: opacity 0.2s ease;
}

body.is-recruit .recruit_notes_link:hover {
	opacity: 0.65;
}

/* --- 記事番号(A-1 / A-2 / A-3) ---------------------------------- */
body.is-recruit .recruit_notes_num {
	display: block;
	color: var(--orange);
	margin: 0 0 var(--space-xs);
	font-size: var(--fs-xs);
}

/* --- 記事タイトル ------------------------------------------------ */
body.is-recruit .recruit_notes_item_title {
	font-size: var(--fs-xl);              /* 24px mobile */
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-xs);
}

/* --- 記事サブタイトル -------------------------------------------- */
body.is-recruit .recruit_notes_subtitle {
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	margin: 0 0 var(--space-sm);
}

/* --- 続きを読む矢印 ---------------------------------------------- */
body.is-recruit .recruit_notes_arrow {
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	letter-spacing: var(--ls-wide);
	display: inline-block;
	transition: transform 0.2s ease;
}

body.is-recruit .recruit_notes_link:hover .recruit_notes_arrow {
	transform: translateX(0.25rem);
}

/* --- Notes 一覧へのリンク ---------------------------------------- */
body.is-recruit .recruit_notes_more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--fs-sm);
	color: var(--charcoal);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	letter-spacing: var(--ls-wide);
}


/* --- Tablet以上(768px+) ------------------------------------------ */
@media (min-width: 768px) {

	body.is-recruit .recruit_notes_lead {
		font-size: var(--fs-lg);          /* 20px */
	}

	body.is-recruit .recruit_notes_link {
		padding: var(--space-xl) 0;
	}

	body.is-recruit .recruit_notes_item_title {
		font-size: var(--fs-2xl);         /* 32px */
	}

	body.is-recruit .recruit_notes_subtitle {
		font-size: var(--fs-base);
	}
}


/* ============================================================
 * SECTION: Notes (PATCH_RECRUIT_011 - カード形式に再設計)
 * 3カラムカード + 色付きサムネイル
 * ============================================================ */

body.is-recruit .recruit_notes {
	background-color: var(--white);
}

body.is-recruit .recruit_notes .recruit_inner {
	max-width: 960px;                  /* 3カードに十分な幅 */
}

body.is-recruit .recruit_notes_content {
	width: 100%;
}

/* --- リード(PATCH_010 のスタイルを上書き) ----------------------- */
body.is-recruit .recruit_notes_lead {
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-xl);
}

/* --- 3カラムグリッド --------------------------------------------- */
body.is-recruit .recruit_notes_grid {
	display: grid;
	grid-template-columns: 1fr;       /* モバイル: 1列 */
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {

	body.is-recruit .recruit_notes_grid {
		grid-template-columns: repeat(3, 1fr);  /* タブレット+: 3列 */
		gap: var(--space-md);
	}
}

/* --- カード ------------------------------------------------------ */
body.is-recruit .recruit_notes_card {
	display: block;
	text-decoration: none;
	color: var(--charcoal);
	background-color: var(--white);
	border: 1px solid var(--warm-gray);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.is-recruit .recruit_notes_card:hover {
	opacity: 1;                        /* generic a:hover の opacity を打ち消す */
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* --- サムネイル(色付きブロック) -------------------------------- */
body.is-recruit .recruit_notes_thumb {
	aspect-ratio: 4 / 3;
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--white);
	overflow: hidden;
}

/* 各記事のテーマカラー */
body.is-recruit .recruit_notes_thumb--navy {
	background-color: #1A3A5C;        /* A-1: Deep Navy */
}

body.is-recruit .recruit_notes_thumb--sienna {
	background-color: #B8553A;        /* A-2: Burnt Sienna */
}

body.is-recruit .recruit_notes_thumb--sage {
	background-color: #6B7F5E;        /* A-3: Sage Green */
}

/* サムネ内: 上段(Mono番号 + ブランドマーク) */
body.is-recruit .recruit_notes_thumb_header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
}

body.is-recruit .recruit_notes_thumb_id {
	color: var(--white);
	font-size: var(--fs-xs);
	opacity: 0.75;
}

body.is-recruit .recruit_notes_thumb_brand {
	font-family: var(--font-display);  /* Outfit */
	font-weight: 200;
	color: var(--white);
	font-size: var(--fs-md);
	letter-spacing: 0.16em;
}

/* サムネ内: 下段(Mincho タイトル) */
body.is-recruit .recruit_notes_thumb_title {
	font-family: var(--font-mincho);   /* Shippori Mincho */
	color: var(--white);
	font-size: var(--fs-lg);           /* 20px mobile */
	line-height: var(--lh-snug);
	font-weight: 400;
	margin: 0;
}

/* --- カード本体(白部分) ---------------------------------------- */
body.is-recruit .recruit_notes_card_body {
	padding: var(--space-md);
}

body.is-recruit .recruit_notes_card_title {
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-xs);
}

body.is-recruit .recruit_notes_card_subtitle {
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	margin: 0;
}

/* --- 「Notes 一覧へ →」リンク(PATCH_010 と同じだが念のため上書き) - */
body.is-recruit .recruit_notes_more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--fs-sm);
	color: var(--charcoal);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	letter-spacing: var(--ls-wide);
}


/* --- Tablet以上(768px+) ------------------------------------------ */
@media (min-width: 768px) {

	body.is-recruit .recruit_notes_lead {
		font-size: var(--fs-lg);       /* 20px */
	}

	body.is-recruit .recruit_notes_thumb {
		padding: var(--space-lg);
	}

	body.is-recruit .recruit_notes_thumb_title {
		font-size: var(--fs-md);       /* 狭い3カラムだと18pxが適切 */
	}
}


/* --- Desktop以上(900px+) ----------------------------------------- */
@media (min-width: 900px) {

	body.is-recruit .recruit_notes_thumb_title {
		font-size: var(--fs-lg);       /* 広い時は20px */
	}
}


/* ============================================================
 * PATCH_RECRUIT_012: アイキャッチ画像対応の追加スタイル
 * Notesカードでアイキャッチ画像が設定されている場合の表示
 * ============================================================ */

/* --- アイキャッチ画像版サムネ ------------------------------------ */
body.is-recruit .recruit_notes_thumb--image {
	padding: 0;                          /* 色付き版のpaddingを打ち消す */
	display: block;                      /* 色付き版のflexを打ち消す */
	background-color: var(--warm-gray); /* 画像読み込み中の背景 */
}

body.is-recruit .recruit_notes_thumb--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;                   /* 画像の比率を保ったまま全面に */
	display: block;
}


/* ============================================================
 * PATCH_RECRUIT_012 補正(2026-05-16): Notes カードをBlog一覧調に
 * - カードの枠線/背景を撤去
 * - hover の浮き上がり/影を撤去(シンプルな opacity フェードのみ)
 * - カード本体 padding を左右 0 にしてサムネと同じ幅で揃える
 * ============================================================ */

body.is-recruit .recruit_notes_card {
	border: none;
	background-color: transparent;
}

body.is-recruit .recruit_notes_card:hover {
	transform: none;
	box-shadow: none;
	opacity: 0.7;
}

body.is-recruit .recruit_notes_card_body {
	padding: var(--space-sm) 0 0;        /* 上にだけ余白、 左右0 でサムネと幅揃え */
}


/* ============================================================
 * PATCH_RECRUIT_012 補正 #2(2026-05-16):
 * - Notes カードのテキスト部分を Blog 一覧調に整形
 * - hover の浮き上がり/影を復活
 * ============================================================ */

/* カード本体の上余白を拡張 */
body.is-recruit .recruit_notes_card_body {
	padding: var(--space-md) 0 0;       /* 上に 32px 確保 */
}

/* タイトル: Blog 一覧と同サイズ感 */
body.is-recruit .recruit_notes_card_title {
	font-size: var(--fs-xl);             /* 24px(以前 18px → 24px に拡張) */
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);         /* タイトル下に 32px の余白 */
}

/* 抜粋(サブタイトル): secondary カラーで控えめに */
body.is-recruit .recruit_notes_card_subtitle {
	font-size: var(--fs-sm);             /* 14px */
	color: var(--text-secondary);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	margin: 0;
}

/* hover の浮き上がり/影を復活 */
body.is-recruit .recruit_notes_card:hover {
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}


/* ============================================================
 * PATCH_RECRUIT_012 補正 #3(2026-05-16):
 * Notes セクションを TOP の Blog 一覧と同じ見せ方に統一
 * - HTML を .second_article_list 構造に変更(既存 CSS が自動適用される)
 * - 投稿未作成時のフォールバック(色付きサムネ)スタイルだけ追加
 * - PATCH_011/012 で書いた .recruit_notes_grid / .recruit_notes_card 系は
 *   新HTMLで使われないので dead だが残置(無害)
 * ============================================================ */

/* --- 投稿未作成時 色付きフォールバック(top_info_ph 領域内で表示) ----- */
body.is-recruit .recruit_notes_fallback {
	position: relative;
	overflow: hidden;
	display: block;
	color: var(--white);
}

body.is-recruit .recruit_notes_fallback_inner {
	position: absolute;
	inset: 0;
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--white);
}

body.is-recruit .recruit_notes_fallback--navy   { background-color: #1A3A5C; }
body.is-recruit .recruit_notes_fallback--sienna { background-color: #B8553A; }
body.is-recruit .recruit_notes_fallback--sage   { background-color: #6B7F5E; }

body.is-recruit .recruit_notes_fallback_header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

body.is-recruit .recruit_notes_fallback_id {
	color: var(--white);
	font-size: var(--fs-xs);
	opacity: 0.75;
}

body.is-recruit .recruit_notes_fallback_brand {
	font-family: var(--font-display);
	font-weight: 200;
	color: var(--white);
	font-size: var(--fs-md);
	letter-spacing: 0.16em;
}

body.is-recruit .recruit_notes_fallback_title {
	font-family: var(--font-mincho);
	color: var(--white);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	font-weight: 400;
	margin: 0;
}

/* --- recruit_notes_list 用の小調整(必要なら) ------------------- */
/* 既存 .second_article_list のスタイルがあるので基本そのまま */


/* ============================================================
 * PATCH_RECRUIT_012 補正 #4(2026-05-16):
 * Notes セクションの章タイトル余白を What/Why と統一
 * ============================================================ */

/* 章ヘッダー下 64 → 32 */
body.is-recruit .recruit_notes .recruit_section_header {
	margin-bottom: var(--space-md);     /* lg(64) → md(32)、 What/Why と同じ */
}

/* リード文下: What/Why の lead と同じ */
body.is-recruit .recruit_notes_lead {
	margin: 0 0 var(--space-lg);        /* xl(96) → lg(64)、 What/Why と同じ */
}