@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');

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

  /* Fonts */
  --font-main:
  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Helvetica Neue", arial, "BIZ UDPGothic", meiryo, sans-serif;
  --font-title: "Zen Kaku Gothic Antique", var(--font-main);
  --font-en: sans-serif;

  /* Font Size (Main Text) */
  /* --- 375pxのとき10px相当 → 1280pxのとき12px相当 --- */
  --fz-12: clamp(0.625rem, 0.22vw + 0.57rem, 0.75rem);
  /* --- 375pxのとき12px相当 → 1280pxのとき14px相当 --- */
  --fz-14: clamp(0.75rem, 0.22vw + 0.7rem, 0.875rem);
  /* --- 375pxのとき14px相当 → 1280pxのとき16px相当 --- */
  --fz-16: clamp(0.875rem, 0.22vw + 0.82rem, 1rem);
  /* --- 375pxのとき16px相当 → 1280pxのとき18px相当 --- */
  --fz-18: clamp(1rem, 0.22vw + 0.95rem, 1.125rem);
  /* --- 375pxのとき18px相当 → 1280pxのとき20px相当 --- */
  --fz-20: clamp(1.125rem, 0.22vw + 1.07rem, 1.25rem);

  /* Font Size (Title) */
  /* --- 375pxのとき32px相当 → 1280pxのとき48px相当 --- */
  --fz-48: clamp(2rem, 1.77vw + 1.59rem, 3rem);

  /* Colors */
  --primary: #ffcc00;
  --secondary: #000000;
  --black: #111;
  --green: #A0B792;
  --pail-green: #D3E1CC;
  --dark-green: #546B47;
  --gray: #F2F2F2;
  --dark-gray: #777;
}