:root {
  
  --c-navy: #18273A;
  --c-navy-deep: #0f1928;        
  --c-navy-2: #23405e;           
  --c-cyan: #12F2DA;
  --c-yellow: #F4F157;
  --c-red: #EE5659;
  --c-cream: #F3F3E1;
  --c-ink: var(--c-navy-deep);   
  --c-grid-red: rgb(243 243 225 / 0.14);   
  --c-red-soft: #ee5659;         
  --c-red-deep: #d94448;         
  --c-white: #fff;              
  --c-blue: #2d5a88;             
  --c-grid-dark: rgb(18 242 218 / 0.10);   
  --c-grid-light: rgb(24 39 58 / 0.10);    
  --c-glow: rgb(18 242 218 / 0.55);        
  
  --ink-line: 1px 0 0 var(--c-ink), -1px 0 0 var(--c-ink), 0 1px 0 var(--c-ink), 0 -1px 0 var(--c-ink), 1px 1px 0 var(--c-ink), -1px -1px 0 var(--c-ink), 1px -1px 0 var(--c-ink), -1px 1px 0 var(--c-ink), 2px 2px 0 var(--c-ink);
  --ink-line-l: 2.5px 0 0 var(--c-navy), -2.5px 0 0 var(--c-navy), 0 2.5px 0 var(--c-navy), 0 -2.5px 0 var(--c-navy), 1.8px 1.8px 0 var(--c-navy), -1.8px -1.8px 0 var(--c-navy), 1.8px -1.8px 0 var(--c-navy), -1.8px 1.8px 0 var(--c-navy), 4px 4px 0 var(--c-navy);

  
  --color-ink: var(--c-navy);    
  --color-main: var(--c-navy);   
  --color-main-2: var(--c-navy-2);
  --color-accent: var(--c-red);  
  --color-accent-2: var(--c-navy-2);
  --color-base: var(--c-white);  
  --color-pale: var(--c-navy);   
  --color-line: rgb(24 39 58 / 0.35);
  --color-on-dark: var(--c-cream);
  --color-on-dark-line: rgb(243 243 225 / 0.7);
  --color-error: #b02a25;
  --color-shadow: rgb(0 0 0 / 0.45);

  
  --bg-dark: linear-gradient(170deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
  --bg-accent: linear-gradient(90deg, var(--c-navy) 0%, var(--c-navy-2) 100%);   

  
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  --font-head: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-en: "Montserrat", "Zen Kaku Gothic New", 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: 900;                
  --ls-body: 0.04em;
  --lh-body: 2;                  
  --lh-head: 1.3;
  --fs-catch: clamp(30px, min(11.6vw, 7.4dvh), 56px);      
  --fs-pill: max(1.2em, 19px);   

  
  --col: 480px;
  --header-h: 56px;
  --gutter: 22px;
  --sp-1: 0.45em;
  --sp-p: 0.75em;
  --sp-g: 1.35em;                
  --pad-y: 2em;                  
  --next-h: 0px;
  --radius-pill: 999px;
  --radius-s: 6px;
  --shadow-soft: 0 0 10px 0 var(--color-shadow);
  --shadow-column: 0 0 40px 0 var(--c-glow);
  --line: 2.5px;                 
  --drop: 5px;                   
  --tilt: -3deg;                 
  --band-h: 22px;                

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 24px;
  --dur-in: 520ms;
  --dur-hover: 300ms;
  --band-speed: 11s;             
}

@media (max-height: 720px) { :root { --pad-y: 1.4em; --sp-g: 1.05em; --lh-body: 1.8; --fs-catch: clamp(30px, min(11.6vw, 7dvh), 56px); } }

@media (min-height: 800px) { :root { --sp-g: 2.6dvh; } }   

@media (max-width: 959px) { :root { --lh-body: 1.4; } }