:root {
  
  --color-ink: #17233a;          
  --color-main: #013b80;         
  --color-main-2: #4d6f9e;       
  --color-accent: #013b80;       
  --color-accent-2: #012a5c;     
  --color-base: #fcfcfc;         
  --color-pale: #e4eaf2;         
  --color-line: #c3cfdf;         
  --color-on-dark: #fcfcfc;      
  --color-on-dark-line: rgb(252 252 252 / 0.72);
  --color-error: #b3261e;        
  --color-shadow: rgb(1 31 68 / 0.16);
  --color-shade: rgb(1 22 50 / 0.85);       
  --color-veil: rgb(1 59 128 / 0.88);
  --color-base-veil: rgb(252 252 252 / 0.8);         
  --color-glow: rgb(1 59 128 / 0.28);      

  
  --bg-dark: linear-gradient(170deg, var(--color-main) 0%, var(--color-accent-2) 100%);
  --bg-accent: var(--color-main);   
  
  --color-main-light: #5fa2ea;   
  --bg-fv: linear-gradient(180deg, var(--color-main-light) 0%, #2d6fc4 30%, var(--color-main) 72%, var(--color-main) 100%);   
  
  --color-p2: #1f6a60;
  --color-p2-veil: rgb(252 252 252 / 0.86);
  --color-p2-glow: rgb(252 252 252 / 0.95);
  --bg-p2: linear-gradient(180deg, #f0fff8 0%, #c4f5df 45%, #9de9c8 100%);   
  
  --bg-p3: #7fc6d2;
  --color-msg-veil: rgb(1 40 80 / 0.6);
  --color-msg-shade: rgb(1 22 50 / 0.35);   
  --color-p2-end: #9de9c8;      
  --color-p2-plate: rgb(232 245 240 / 0.92);   
  --color-p3-plate: rgb(236 245 252 / 0.92);
  
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-head: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en: "Abel", "Noto Sans JP", 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;
  --fs-en-xl: 2.4em;             
  --fs-head: 1.32em;             
  --fw-body: 500;                
  --ls-body: 0.1em;              
  --ls-head: 0.12em;
  --ls-en: 0.12em;
  --lh-body: 1.85;
  --lh-head: 1.5;

  
  --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: 0;              
  --radius-s: 4px;
  --line-w: 3px;                 
  --shadow-soft: none;
  --shadow-column: 0 0 24px 0 var(--color-shadow);
  --shadow-box: 6px 7px 0 0 var(--color-shadow);

  
  --p1-mq-h: 92dvh;
  
  --p3-people-h: clamp(170px, 38dvh, 340px);

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.7, 0.64, 1);
  --rise: 44px;
  --dur-in: 650ms;
  --dur-hover: 250ms;
  --mq-wait: 650ms;
  --fv-t-orbit: 1500ms;         
  --fv-t-name: 900ms;          
  --fv-t-co: 3700ms;            
  --fv-t-ic: 1600ms;            
  --fv-t-step: 500ms;           
  --fv-t-panel: 4100ms;         
}
@media (max-height: 600px) { :root { --pad-y: 0.7em; } }

@media (min-width: 960px) {
  :root { --fs-base: clamp(var(--fs-min), 2.26dvh, 18px); }
}

@media (max-width: 959px) and (min-height: 760px) {
  :root { --fs-base: clamp(var(--fs-min), min(2.26dvh, 4.3vw), 17px); }
}