:root {
  
  --sd-blue:          #0033A1;  
  --sd-yellow:        #FFF200;  /* Pantone Process Yellow C · C0 M0 Y100 K0 */
  --sd-orange:        #FFB03A;  /* Pantone 804 C · C0 M55 Y100 K0 */
  --sd-orange-7549:   #FFB03A;  
  --sd-yellow-light:  #FFF9B7;  

  
  --sd-pink:   #FA548E;
  --sd-green:  #52CD96;
  --sd-sky:    #649BE1;

  
  --sd-white:  #FFFFFF;
  --ink:       #171B36;  
  --ink-2:     #474C68;  
  --blue-deep: #00227A;  
  --tint-blue: #EEF2FB;  
  --line:      #D5D9EA;  

  /* ---------- 4. Status ---------- */
  --st-error:    #C4162F;  
  --st-success:  #11714A;  
  --st-info:     var(--sd-blue);
  --st-notice-bg: var(--sd-orange);  
  --st-draft-bg:  var(--sd-pink);    

  
  --bg:             var(--sd-white);
  --bg-soft:        var(--sd-yellow-light);  
  --fg:             var(--ink);
  --fg-muted:       var(--ink-2);
  --on-blue:        var(--sd-white);   /* 10.6:1 */
  --on-blue-accent: var(--sd-yellow);  /* 9.0:1 */
  --on-yellow:      var(--sd-blue);    
  --on-orange:      var(--ink);        
  --on-pink:        var(--ink);        
  --on-green:       var(--ink);        
  --on-sky:         var(--ink);        
  --link:           var(--sd-blue);
  --focus:          var(--sd-orange);
  --focus-ring:     0 0 0 3px var(--sd-white), 0 0 0 6px var(--sd-blue);

  /* ---------- 6. Type: family ---------- */
  
  --ff-display: "Mochiy Pop One", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  
  --ff-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --fw-body: 400;
  --fw-strong: 700;
  --fw-heavy: 800;

  
  --fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem);    
  --fs-h1:      clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);   /* 28 → 44  Mochiy */
  --fs-h2:      clamp(1.375rem, 1.2rem + 0.9vw, 2rem);     /* 22 → 32  Mochiy */
  --fs-h3:      clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);/* 18 → 20  M PLUS 800 */
  --fs-lead:    clamp(1.0625rem, 1.03rem + 0.2vw, 1.1875rem); /* 17 → 19 */
  --fs-body:    1rem;       
  --fs-small:   0.875rem;   
  --fs-cap:     0.8125rem;  

  
  --lh-display: 1.3;   
  --lh-heading: 1.45;
  --lh-lead:    1.75;
  --lh-body:    1.85;
  --lh-cap:     1.6;
  --ls-display: 0.02em;  
  --ls-heading: 0.03em;
  --ls-body:    0.04em;  
  --ls-label:   0.06em;
  --measure:    36em;    

  
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --section-y: clamp(56px, 8vw, 112px);

  
  --grid-cols: 4;
  --grid-margin: 16px;
  --grid-gap: 16px;
  --wrap: 1120px;

  /* ---------- 11. Radius ---------- */
  --r-sm: 12px;   
  --r-md: 20px;   
  --r-lg: 28px;   
  --r-pill: 999px;

  /* ---------- 12. Border · Elevation ---------- */
  --bw-sticker: 3px;  
  --shadow-sticker:        0 4px 0 0 var(--sd-blue);      
  --shadow-sticker-on-blue: 0 4px 0 0 var(--blue-deep);   
  --shadow-sticker-press:  0 1px 0 0 var(--sd-blue);
  --shadow-bar:            0 -6px 24px rgb(23 27 54 / 0.14); 

  /* ---------- 13. Touch · Bar ---------- */
  --tap-min: 48px;      
  --btn-h: 52px;
  --bar-h: 72px;        

  /* ---------- 14. Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  
  --dur-1: 160ms;  
  --dur-2: 320ms;  
  --dur-3: 640ms;  

  
  --oie-sky:         #649BFF;  
  --oie-roof:        #66301F;  
  --oie-brick:       #FF6400;  
  --oie-brick-light: #FF9605;  
  --oie-shoji:       #FFFEEE;  
  --oie-wood:        #B55C1F;  
  --oie-plate:       #FFFAC0;  
  --oie-plate-wood:  #AC703A;  

  /* ---------- 15. z-index ---------- */
  --z-sticky: 100;  
  --z-bar: 110;     
  --z-draft: 200;   
}

.sd-base {
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg);
  background: var(--bg);
  font-synthesis: none;              
  line-break: strict;                
  overflow-wrap: break-word;
  text-autospace: normal;            
  text-spacing-trim: normal;
  -webkit-text-size-adjust: 100%;
}
.sd-display, .sd-h1, .sd-h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-feature-settings: "palt";
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
  word-break: auto-phrase;           
}
.sd-h1, .sd-h2 { line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.sd-display { font-size: var(--fs-display); }
.sd-h1 { font-size: var(--fs-h1); }
.sd-h2 { font-size: var(--fs-h2); }
.sd-h3 { font-family: var(--ff-body); font-weight: var(--fw-heavy); font-size: var(--fs-h3); line-height: var(--lh-heading); text-wrap: balance; word-break: auto-phrase; }
.sd-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: pretty; }
.sd-cap { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--fg-muted); }
.sd-nowrap { white-space: nowrap; }  
.sd-url { overflow-wrap: anywhere; } 

@media (min-width: 600px)  { :root { --grid-cols: 8;  --grid-margin: 24px; } }
@media (min-width: 1024px) { :root { --grid-cols: 12; --grid-margin: 40px; --grid-gap: 24px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}