@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap');

:root {
  /* Layout */
  --w-site: 1072px;
  --w-sp: 768px;
  --ease: cubic-bezier(.215, .61, .355, 1);

  /* Fonts */
  --font-main: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
  --font-en: 'Syncopate', sans-serif;

  /* Font Size (Main Text) */
  /* --- 767pxのとき10px相当 → 1280pxのとき12px相当 --- */
  --fz-12: clamp(0.625rem, 0.39vw + 0.438rem, 0.75rem);
  /* --- 767pxのとき12px相当 → 1280pxのとき14px相当 --- */
  --fz-14: clamp(0.75rem, 0.39vw + 0.563rem, 0.875rem);
  /* --- 767pxのとき14px相当 → 1280pxのとき16px相当 --- */
  --fz-16: clamp(0.875rem, 0.39vw + 0.688rem, 1rem);
  /* --- 767pxのとき16px相当 → 1280pxのとき18px相当 --- */
  --fz-18: clamp(1rem, 0.39vw + 0.813rem, 1.125rem);
  /* --- 767pxのとき20px相当 → 1280pxのとき24px相当 --- */
  --fz-24: clamp(1.25rem, 0.78vw + 0.876rem, 1.5rem);

  /* Font Size (Title) */
  /* 40px ~ 48px */
  --fz-48: clamp(2.5rem, 3.12vw + 0.75rem, 3rem);
  /* 60px ~ 72px */
  --fz-72: clamp(3.75rem, 2.34vw + 2.63rem, 4.5rem);


  /* Colors */
  --navy: #000020;
  --white: #fff;
  --gold: #B0A974;
  --red: #C00306;
  --blue-gray: #172636;
}