:root {
  
  --color-ink: #0b1a26;          
  --color-main: #0d64ab;         
  --color-main-2: #1180d2;       
  --color-blue: #1692eb;         
  --color-yellow: #ffe251;
  --color-pink: #ff6b8b;               
  --color-accent: #0f6fbd;       
  --color-accent-2: #0f6fbd;
  --color-base: #ffffff;         
  --color-pale: #e3eef6;         
  --color-pale-2: #c6dbea;       
  --color-line: #0b1a26;         
  --color-on-dark: #ffffff;
  --color-on-dark-line: rgb(255 255 255 / 0.75);
  --color-error: #c8312b;
  --color-shadow: rgb(11 26 38 / 0.16);

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

  
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  --font-head: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;   
  --font-en: "Darumadrop One", "M PLUS Rounded 1c", sans-serif;
  --fs-min: 13px;
  
  --fs-base: clamp(var(--fs-min), min(2.15dvh, 3.6vw), 15px);
  --fs-ui: max(var(--fs-min), 13px);
  --fs-input: 16px;
  --fs-head: 2.15em;             
  --fw-body: 500;
  --ls-body: 0.05em;
  --ls-head: 0.04em;
  --lh-body: 1.75;
  --lh-head: 1.3;

  
  --line: 3px solid var(--color-line);
  --line-thin: 2px solid var(--color-line);
  --radius-card: 18px;
  --shadow-card: 6px 6px 0 var(--color-pale-2);

  
  --col: 480px;
  --header-h: 56px;
  --gutter: 18px;
  --sp-1: 0.4em;                 
  --sp-p: 0.7em;                 
  --sp-g: 1.15em;                
  --pad-y: 1.2em;
  --next-h: 0px;
  --radius-pill: 999px;
  --radius-s: 8px;
  --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: 32px;
  --dur-in: 600ms;
  --dur-hover: 300ms;
}
@media (max-height: 600px) { :root { --pad-y: 0.7em; } }