@font-face { font-family: "Inter"; src: url("../../fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("../../fonts/roboto-mono-variable.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
/* Careers home: shared base. The page follows actbe.co.jp/career (tight tiles, small mono labels, huge
   headline, pinned scenes) in our design system. Their variables are mapped onto our tokens here, so
   section stylesheets can use the same names. */
:root {
  /* ACTBE's own typefaces (Inter and Roboto Mono, both open source) replace Geist on this page, so the
     tokens in type.css (which read --font-sans / --font-mono) resolve to them here. */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* ACTBE's own greys, so the page matches theirs */
  --c-white: #ffffff;                      /* tiles and cards */
  --c-black: #000000;
  --c-ink: #272727;
  --c-gray: #6d6d6d;                       /* small labels */
  --c-base-background: #f6f6f6;            /* page */
  --c-philosophy-background: #e7e7e7;     /* the page steps to this grey while Our Philosophy is on screen */
  --f-inter: "Inter", sans-serif;
  --f-roboto-mono: "Roboto Mono", monospace;
  --f-noto-sans-jp: "Inter", sans-serif;
  --f-hina-mincho: "Inter", sans-serif;
  --init-opacity: 0;                       /* elements start hidden and are revealed by scripts */
  --r-max-scale: 1.4;
  --padding-wrapper: 16px;
  --header-height-constant: 44px;
  --ease-out-expo: var(--ease-expo);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
}
@media (min-width: 768px) { :root { --padding-wrapper: 40px; } }
body.is-recruit { background: var(--c-base-background); color: var(--c-ink); }
body.is-recruit main.cr-main { padding: 0; max-width: none; background: var(--c-base-background); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { :root { --init-opacity: 1; } }

body.is-recruit { font-family: var(--f-inter); }

/* The shared stylesheet (app.css) gives every h1-h3 a dark colour and margins for the admin screens;
   neutralise that here so headings on this page take their colour from the section they sit in. The
   :where() wrapper keeps this at the lowest specificity, so any section rule still wins. */
:where(.cr-main) :is(h1, h2, h3, h4, h5, h6) { color: inherit; margin: 0; }