@font-face {
  font-family: 'Gothic BBB Pro';
  src: url('../fonts/GothicBBBPro-Medium.woff2') format('woff2'),
       url('../fonts/GothicBBBPro-Medium.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AG Next';
  src: url('../fonts/AGNext-Regular.woff2') format('woff2'),
       url('../fonts/AGNext-Regular.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-ink: #181000;
  --c-accent: #EE761F;
  --c-accent-mid: #D96F27;
  --c-accent-deep: #CF6919;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F5F5F5;
  --c-slate: #2B3335;
  --c-line: #D2D2D2;

  --font-serif: 'Shippori Mincho', 'Noto Serif JP', serif;
  --font-sans: 'Gothic BBB Pro', 'Noto Sans JP', sans-serif;
  --font-grotesk: 'AG Next', 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --fs-36: 36px;
  --fs-30: 30px;
  --fs-26: 26px;
  --fs-21: 21px;
  --fs-20: 20px;
  --fs-16: 16px;
  --fs-14: 14px;
  --fs-12: 12px;
  --fs-10: 10px;

  --w-content: 1439px;
  --w-tablet: 800px;
  --w-mobile: 375px;
  --h-header: 150px;

  --sp-section-y: 120px;
  --sp-section-x: 180px;
  --sp-section-x-tablet: 72px;
  --sp-section-x-mobile: 24px;
}