@font-face {
  font-family: 'Mont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Mont-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Mont';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Mont-Bold.woff2) format('woff2');
}

:root {

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-mont: 'Mont', 'Noto Sans JP', sans-serif;

  --color-brand-gradient: linear-gradient(180deg, #faf1ef 0%, #eff2fa 100%);

  --color-primary-50: rgba(248, 249, 253, 1);
  --color-primary-100: rgba(233, 237, 250, 1);
  --color-primary-200: rgba(239, 242, 250, 1);
  --color-primary-300: rgba(198, 206, 240, 1);
  --color-primary-400: rgba(149, 166, 228, 1);
  --color-primary-500: rgba(120, 144, 221, 1);
  --color-primary-600: rgba(100, 129, 216, 1);
  --color-primary-700: rgba(76, 111, 210, 1);
  --color-primary-800: rgba(46, 82, 183, 1);
  --color-primary-900: rgba(35, 64, 144, 1);

  --color-secondary-500: rgba(247, 131, 108, 1);

  --color-text: rgba(26, 32, 44, 1);

  --color-gray-87: rgba(15, 20, 36, 0.87);
  --color-gray-60: rgba(15, 20, 36, 0.6);
  --color-gray-38: rgba(15, 20, 36, 0.38);
  --color-gray-12: rgba(15, 20, 36, 0.12);
  --color-gray-04: rgba(15, 20, 36, 0.04);

  --color-white-100: rgba(255, 255, 255, 1);
  --color-white-87: rgba(255, 255, 255, 0.87);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-12: rgba(255, 255, 255, 0.12);

  --color-facebook: #217cef;
  --color-twitter: #1b9ff4;

  --shadow-default: 0px 4px 16px 0px rgba(15, 20, 36, 0.12);
  --shadow-hover: 0px 4px 16px rgba(120, 144, 221, 0.48);
  --shadow-focus: 0 0 0 2px rgba(76, 111, 210, 1) inset;
  --shadow-share: 0px 4px 12px rgba(15, 20, 36, 0.12);

  --container-lg: 64rem;
  --container-md: 48rem;

  --z-header: 2;
  --z-drawer: 1000;
  --z-toast: 2000;

  --recruit-font: 'Plus Jakarta Sans', 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
    'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', sans-serif;
  --recruit-bg: #ffffff;
  --recruit-fg: #2f3437;
  --recruit-muted: #787774;
  --recruit-line: #ebebea;
  --recruit-link: #4c6fd2;
  --recruit-ink: #0f1424;
  --recruit-header-bg: #ffffffd9;
  --recruit-hover-bg: #fafafa;
  --recruit-embed-bg: #000000;
  --recruit-max: 720px;
  --recruit-pad: 24px;
}