:root {
  
  --color-ink: #452219;          
  --color-main: #016500;         
  --color-main-2: rgb(69 34 25 / 0.82);   
  --color-accent: #9b4912;       
  --color-accent-2: #9b4912;     
  --color-base: #edf1dd;         
  --color-pale: #e3e8cc;         
  --color-paper: #f8f9f0;        
  --color-line: rgb(69 34 25 / 0.28);
  --color-on-dark: #ffffff;      
  --color-on-dark-line: rgb(255 255 255 / 0.7);
  --color-error: #c8312b;        
  --color-shadow: rgb(69 34 25 / 0.16);

  
  --bg-dark: var(--color-main);
  --bg-accent: var(--color-accent);

  
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C40 8 70 10 110 24 C130 31 140 30 160 20 C190 6 230 6 260 18 C280 26 300 26 320 16 C350 4 380 8 400 14 L400 40 L0 40 Z' fill='black'/%3E%3C/svg%3E");

  
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "Mochiy Pop One", "Zen Kaku Gothic New", sans-serif;
  --font-en: "Londrina Solid", "Zen Kaku Gothic New", sans-serif;
  
  --font-head-p1: "Mochiy Pop One", var(--font-body);
  --font-head-p2: "Yusei Magic", var(--font-body);
  --font-head-p3: "Kiwi Maru", var(--font-body);
  --font-head-p4: "Zen Maru Gothic", var(--font-body);
  --font-head-p5: "RocknRoll One", var(--font-body);
  --font-head-p6: "Hachi Maru Pop", var(--font-body);
  --font-head-p7: "Dela Gothic One", var(--font-body);
  --font-head-p8: "Klee One", var(--font-body);
  --font-en-p1: "Londrina Outline", var(--font-en);
  --font-en-p2: "Chewy", var(--font-en);
  --font-en-p3: "Londrina Solid", var(--font-en);
  --font-en-p4: "Gochi Hand", var(--font-en);
  --font-en-p5: "Sniglet", var(--font-en);
  --font-en-p6: "Rubik Doodle Shadow", var(--font-en);
  --font-en-p7: "Caveat Brush", var(--font-en);
  --font-en-p8: "Shrikhand", var(--font-en);
  --fs-min: 13px;
  --fs-base: clamp(var(--fs-min), min(2.26dvh, 3.85vw), 15px);
  --fs-ui: max(var(--fs-min), 13px);
  --fs-input: 16px;
  --fs-head: 1.8em;              
  --fs-en: 3.5em;                
  --fw-body: 500;                
  --ls-body: 0.02em;
  --lh-body: 1.8;                
  --lh-head: 1.45;
  --ls-head: 0.02em;

  
  --col: 480px;
  --header-h: 56px;
  --gutter: 24px;                
  --sp-1: 0.4em;
  --sp-p: 0.8em;
  --sp-g: 1.2em;
  --pad-y: 1.2em;
  --next-h: 0px;
  --radius-pill: 999px;
  --radius-s: 6px;
  --radius-m: 12px;              
  --shadow-soft: 0 0 10px 0 var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 24px;
  --dur-in: 700ms;
  --dur-hover: 300ms;
  --float-y: 6px;
  --float-r: 1.5deg;
  --float-dur: 5s;
}
@media (max-height: 600px) { :root { --pad-y: 0.7em; --sp-g: 0.9em; } }