@font-face { font-family: "Noto Sans JP"; src: url("assets/fonts/NotoSansJP-Variable.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Noto Sans JP Digits"; src: url("assets/fonts/NotoSansJP-Variable.woff") format("woff"); font-weight: 100 900; font-display: swap; unicode-range: U+0030-0039, U+FF10-FF19; }
@font-face { font-family: Hardbop; src: url("assets/fonts/Hardbop-Bold.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: HeadingNow; src: url("assets/fonts/HeadingNow-73Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  
  --color-ink: #171717;
  --color-main: #171717;
  --color-main-2: #171717;
  --color-accent: #f15a24;
  --color-accent-2: #f15a24;
  --color-base: #f2f1ec;
  --color-pale: #e4e2da;
  --color-white: #ffffff;
  --color-steel: #8897aa;        
  --color-line: rgb(23 23 23 / 0.2);
  --color-on-dark: #f2f1ec;
  --color-on-dark-line: rgb(242 241 236 / 0.25);
  --color-on-white-line: rgb(255 255 255 / 0.4);
  --color-field: rgb(242 241 236 / 0.05);
  --color-field-line: rgb(255 255 255 / 0.5);
  --color-salary: rgb(241 90 36 / 0.063);
  --color-shade: #000000;        
  --color-error: #f15a24;
  --color-shadow: rgb(23 23 23 / 0.18);

  --bg-dark: var(--color-main);
  --bg-accent: var(--color-accent);

  
  --font-body: "Noto Sans JP Digits", HeadingNow, "Noto Sans JP", sans-serif;
  --font-head: "Noto Sans JP", sans-serif;
  --font-en: "Noto Sans JP Digits", HeadingNow, "Noto Sans JP", sans-serif;
  --font-disp: Hardbop, Impact, sans-serif;
  --fs-min: 13px;
  --fs-base: clamp(14px, 3.7cqw, 16px);   
  --fs-ui: 13px;
  --fs-input: 16px;
  --fs-head: clamp(24px, 6.5cqw, 31px);   
  --fs-head-big: clamp(25px, 7cqw, 34px); 
  --fw-body: 400;
  --ls-body: 0.02em;
  --lh-body: 1.6;
  --lh-head: 1.3;
  --ls-head: 0.02em;

  
  --col: 480px;
  --header-h: 64px;
  --gutter: 20px;
  --sp-1: 4px;                   
  --sp-p: 14px;                  
  --sp-g: 18px;                  
  --pad-y: 24px;
  --next-h: 0px;
  --radius-pill: 0;
  --radius-s: 0;
  --shadow-soft: none;
  --shadow-column: 0 0 24px 0 var(--color-shadow);
  --btn-h: 60px;
  --disp-h: 40dvh;               

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 24px;
  --dur-in: 600ms;
  --dur-hover: 300ms;
  --orbit-dur: 18s;
  --reel-pxs: 30;
}
@media (max-height: 780px) { :root { --fs-base: 14px; --lh-body: 1.5; --pad-y: 20px; } }
@media (max-height: 780px) and (min-width: 960px) { :root { --disp-h: 30dvh; } }
@media (max-height: 600px) { :root { --pad-y: 14px; --sp-g: 12px; --btn-h: 52px; --disp-h: 24dvh; } }