@charset "utf-8";

:root{

  --margin-xs: 16px;
  --margin-s: 24px;
  --margin-m: 32px;
  --margin-l: 64px;

  --fs-xs: 12px;
  --fs-s: 16px;
  --fs-m: 24px;
  --fs-l: 32px;
  --fs-xl: 48px;
  --fs-xxl: 64px;

  --fs-main: var(--fs-s);
  --fs-nav-icon: var(--fs-m);
  --fs-nav-en: var(--fs-l);
  --fs-nav-ja: var(--fs-s);
  --fs-hero-p: var(--fs-xxl);
  --fs-hero-name: var(--fs-l);
  --fs-pro-name: var(--fs-xl);
  --fs-jump-top: var(--fs-xs);
  --fs-h2-en: var(--fs-xl);
  --fs-h2-ja: var(--fs-s);
  --fs-acc-title: var(--fs-s);
  --fs-acc-date: var(--fs-xs);
  --fs-acc-loca: var(--fs-s);
  --fs-close-btn: var(--fs-xs);

  --fs-hero-p-sp: var(--fs-l);



  --font-en: "Splash", cursive;
  --font-ja:  "Zen Kaku Gothic New", sans-serif;
  --font-num:  "Source Code Pro", monospace;
  
  --color-deep: #000000;
  --color-light: #ffffff;
  --color-accent: #FFF100;
  --color-c: #00A0E9;
  --color-m: #E4007F;
  --color-y: #FFF100;

  --color-bg: var(--color-deep);
  --color-font-main: var(--color-light);
  --color-nav-bg: var(--color-deep);
  --color-nav-icon: var(--color-accent);
  --color-allows: var(--color-light);

  --color-hero-name: var(--color-deep);
  --color-hero-name-sp: var(--color-light);

  --color-acc-bg: var(--color-deep);
  --color-acc-title: var(--color-accent);
  --color-acc-a: var(--color-accent);

  --color-disc-detail-bg: var(--color-deep);

  --font-weight-n: 400;
  --font-weight-b: 700;

  --opacity-max: 1;
  --opacity-deep: 0.8;
  --opacity-light: 0.3;
  --opacity-none: 0;

  --radius: 10px;

  --trans-quick: 0.3s all ease-in-out;
  --trans-slow: 1s all ease-in-out;

  --btn-size: 44px;      /* タップしやすい最小サイズ */
  --bar-w:   2px;
  --bar-gap: 1px;
  --bar-color: var(--color-deep);     /* 好みで変更（ダークUI想定） */
  --bg: #111;

}