@charset "utf-8";

:root{

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

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

  --fs-sp-main: var(--fs-s);
  --fs-sp-hero: var(--fs-m);
  --fs-sp-h1: var(--fs-s);
  --fs-sp-tree: var(--fs-s);
  --fs-sp-ol: var(--fs-m);
  --fs-sp-h3: var(--fs-m);
  --fs-sp-about-title: var(--fs-m);
  --fs-sp-pro-title: var(--fs-l);
  --fs-sp-tree-tab: var(--fs-m);

  --fs-main: var(--fs-m);
  --fs-sns-list: var(--fs-l);

  --fs-ol: var(--fs-l);

  --fs-wb-h3: var(--fs-l);

  --fs-back-btn: var(--fs-l);
  --fs-ft-title: var(--fs-xl);
  --fs-ft-nav-head: var(--fs-m);
  --fs-ft-nav-item: var(--fs-s);

  --fs-about-title: var(--fs-l);

  --fs-pro-title: var(--fs-xl);
  --fs-tree-tab: var(--fs-l);
  --fs-series-detail-title: var(--fs-l);

  --fs-hero: var(--fs-l);
  --fs-h1: var(--fs-l);
  --fs-top-link: var(--fs-l);


  --font-en: "Cute Font", sans-serif;
  --font-ja: "Shippori Mincho B1", serif;
  
  --color-deep: #444444;
  --color-light: #ffffff;
  --color-accent: #919E78;

  --color-main-font: var(--color-deep);

  --color-header: #999999;
  --color-nav-border: var(--color-light);
  --color-nav-inner: var(--color-light);

  --color-burger-line: var(--color-light);

  --color-ol: var(--color-light);

  --color-white-box: var(--color-light);

  --color-acc-title: var(--color-accent);
  --color-acc-title: var(--color-accent);
  --color-input-bg: var(--color-accent);
  --color-place: var(--color-light);
  --color-btn-bg: var(--color-accent);
  --color-btn-span-before: var(--color-accent);
  --color-btn-span-after: var(--color-light);

  --color-about-title: var(--color-accent);
  --color-about-data: var(--color-light);
  --color-about-data-bg: var(--color-accent);

  --color-pro: var(--color-light);
  --color-dots-nomal: var(--color-light);
  --color-dots-active: var(--color-accent);
  --color-tree-tab: var(--color-light);
  --color-tree-detail: var(--color-light);
  --color-tree-border: var(--color-light);
  --color-series-thum: var(--color-accent);

  --color-hero-1: var(--color-light);
  --color-hero-2: var(--color-light);
  --color-hero-3: var(--color-deep);
  --color-hero-4: var(--color-light);

  --color-h1: var(--color-light);
  --color-top-link-bg: var(--color-light);
  --color-top-link: var(--color-accent);







  --color-footer-bg: var(--color-accent);
  --color-footer-font: var(--color-light);



  --font-weight-n: 500;
  --font-weight-b: 800;

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

  --radius: 10px;

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

}