:root {
  
  --color-ink: #063F5B;          
  --color-main: #063F5B;
  --color-main-2: #063F5B;       
  --color-accent: #F7AD19;       
  --color-accent-2: #F7AD19;
  --color-aqua: #9FE7F5;         
  --color-aqua-pale: #DDF7FC;    
  --color-base: #ffffff;         
  --color-pale: #DDF7FC;
  --color-line: #9FE7F5;         
  --color-on-dark: #ffffff;      
  --color-on-dark-line: rgb(255 255 255 / 0.7);
  --color-error: #063F5B;        
  --color-shadow: rgb(6 63 91 / 0.16);
  --color-ink-soft: rgb(6 63 91 / 0.78);

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

  
  --font-body: "Zen Kaku Gothic Antique", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "M PLUS Rounded 1c", "Zen Kaku Gothic Antique", sans-serif;   
  --font-en: "Cherry Bomb One", "M PLUS Rounded 1c", sans-serif;            
  --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;
  --fw-body: 500;
  --ls-body: 0.03em;
  --lh-body: 1.85;
  --lh-head: 1.32;
  --fs-head: 1.72em;             
  --ls-head: 0.01em;
  --fs-pc-max: 17.5px;           

  
  --col: 480px;
  --header-h: 56px;
  --gutter: 22px;
  --sp-1: 0.45em;
  --sp-p: 0.75em;
  --sp-g: 1.1em;
  --pad-y: 1.2em;
  --next-h: 0px;
  --radius-pill: 999px;
  --radius-s: 10px;
  --radius-card: 16px;           
  --shadow-soft: 0 0 10px 0 var(--color-shadow);
  --shadow-column: 0 0 24px 0 var(--color-shadow);
  --dot: 2px dotted var(--color-ink);   
  --wave-h: 22px;                

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   
  --rise: 20px;
  --dur-in: 500ms;
  --dur-pop: 700ms;
  --dur-hover: 250ms;
  --float-t: 3.6s;
  --float-y: 6px;
  --spin-t: 30s;                 
  --pan-t: 9s;                   
  --reel-pxs: 30;                
  --flow-t: 2.8s;                
  --bg-float-t: 5.2s;            
  --dur-jelly: 700ms;      
  --dur-bg-in: 900ms;      
  --puyo-t: 3.4s;          
}
@media (max-height: 600px) { :root { --pad-y: 0.7em; } }

@media (max-aspect-ratio: 1/2), (min-width: 960px) and (max-aspect-ratio: 5/4) { :root { --sp-g: 2.2em; --sp-p: 1em; --fs-pc-max: 19px; } }
@media (max-aspect-ratio: 1/2) and (max-width: 959px) { :root { --fs-base: clamp(var(--fs-min), min(2.26dvh, 3.85vw), 16.5px); } }