/* ===================================================================== MTK — Tier 2: RECRUITING THEME (採用サイト) --------------------------------------------------------------------- Same semantic token NAMES as the scholarship theme, different values, so every component built against --bg / --text / --brand-accent / … works unchanged here. Scope: anything inside .theme-recruit (class goes on for the recruiting pages). Identity: neutral grey + ink, BLUE accent, squared Zen Kaku Gothic New. Axis: desktop-first (1400 device, 960 content). ===================================================================== */ .theme-recruit { /* ---- Theme-only color literals ---------------------------------- */ --color-blue: #5eb5d2; /* Brand/Blue (3rd accent) */ --color-ink: #333333; /* Text/Primary */ --color-grey-bg: #f7f7f7; /* Background/Primary */ --color-yellow-pale: #fefcf6; /* Brand/Yellow_Pale */ --color-text-3: #eae0d5; /* Text/Tertiary */ --color-text-4: #bbb3aa; /* Text/4th */ --color-border-cool: #878f9a; /* Border/Fourth */ --color-error: #e52e2e; /* Status/Error */ --font-zen-kaku: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-roboto-flex: "Roboto Flex", sans-serif; /* ---- Semantic: surfaces ----------------------------------------- */ --bg: var(--color-grey-bg); /* #f7f7f7 page background */ --surface: var(--color-white); --surface-warm: var( --color-cream-1 ); /* #f7f3e9 (Background/Secondary here) */ --surface-sunk: var(--color-cream-3); /* #f5f0e3 */ --surface-soft: var(--color-cream-2); /* #f9f4ee */ --surface-pale: var(--color-yellow-pale); --surface-dark: var(--color-brown); /* #483737 dark sections */ --surface-cool: var(--color-cool); /* #f0f6ff */ /* ---- Semantic: text --------------------------------------------- */ --text: var(--color-ink); /* #333333 primary */ --text-muted: var(--color-grey); /* #958f8f */ --text-faint: var(--color-text-3); /* #eae0d5 */ --text-faint-2: var(--color-text-4); /* #bbb3aa */ --text-on-dark: var(--color-white); /* ---- Semantic: brand / accents ---------------------------------- */ --brand: var(--color-yellow); --brand-accent: var(--color-blue); /* BLUE — the differentiator */ --brand-alt: var(--color-red); /* ---- Semantic: lines -------------------------------------------- */ --border: var(--color-border); --border-strong: var(--color-brown); --border-cool: var(--color-border-cool); /* ---- Semantic: status ------------------------------------------- */ --status-error: var(--color-error); /* ---- Semantic: type roles --------------------------------------- */ --font-heading: var(--font-zen-kaku); /* squared, professional */ --font-body: var(--font-zen-kaku); /* same family as heading */ --font-num: var(--font-roboto-flex); /* ---- Fontsize / Mobile mode ------------------------------------- */ --size-h1: 1.75rem; /* 28 */ --size-subh1: 1.75rem; /* 28 */ --size-suph1: var(--size-subh1); /* Backward-compatible alias. */ --size-h2: 1.625rem; /* 26 */ --size-h2-eng: 1.875rem; /* 30 */ --size-subh2: 1rem; /* 16 */ --size-h3: 1.25rem; /* 20 */ --size-h4: 1.125rem; /* 18 */ --size-large: 1.0625rem; /* 17 */ --size-medium: 0.9375rem; /* 15 */ --size-body: var(--size-medium); --recruit-lp-leading: 1.5; /* H5/H6 are fixed text-style roles, not responsive Figma variables. */ --size-h5: 1.125rem; /* 18 */ --size-h6: 1rem; /* 16 */ /* ---- Spacing / Mobile mode -------------------------------------- */ --space-m: 1.25rem; /* 20 */ --space-l: 1.5rem; /* 24 */ --space-xl: 2rem; /* 32 */ --space-xxl: 2.75rem; /* 44 */ --space-xxxl: 4rem; /* 64 */ /* ---- Size / Mobile mode ----------------------------------------- */ --device-width: 23.4375rem; /* 375 */ --device: var(--device-width); --content: 23.4375rem; /* 375 */ --content-small: 23.4375rem; /* 375 */ /* Fluid implementation caps; Figma's Content values describe frames. */ --content-max: 60rem; /* 960 */ --content-small-max: 40rem; /* 640 */ --content-s: var(--content-small-max); --recruit-page-gutter: var(--space-s); } @media (min-width: 56.25rem) { .theme-recruit { /* Fontsize / Desktop mode */ --size-h1: 2.75rem; /* 44 */ --size-subh1: 1.875rem; /* 30 */ --size-h2: 1.75rem; /* 28 */ --size-h2-eng: 2.5rem; /* 40 */ --size-subh2: 1.25rem; /* 20 */ --size-h3: 1.5rem; /* 24 */ --size-h4: 1.25rem; /* 20 */ --size-large: 1.125rem; /* 18 */ --size-medium: 1rem; /* 16 */ --size-body: var(--size-medium); /* Recruit LP component roles from the live desktop frames. */ --recruit-policy-title-size: 1.75rem; /* 28 */ /* Spacing / Desktop mode */ --space-l: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-xxl: 4rem; /* 64 */ --space-xxxl: 5rem; /* 80 */ /* Size / Desktop_Small mode */ --device-width: 62.5rem; /* 1000 */ --content: 60rem; /* 960 */ --content-small: 40rem; /* 640 */ --recruit-page-gutter: var(--space-l); } } @media (min-width: 75rem) { .theme-recruit { /* Size / Desktop mode */ --device-width: 87.5rem; /* 1400 */ } } @media (min-width: 106.25rem) { .theme-recruit { /* Size / Desktop_Wide mode */ --device-width: 125rem; /* 2000 */ } }