/* ============================================================
   DESIGN TOKENS — Generated from バリアブル.json
   Mobile First: default = Mobile / @media (min-width) = Laptop
   Structure: Primitive → Semantic → Component / Layout / Global
   ============================================================ */

/* ============================================================
   1. PRIMITIVE TOKENS  （モード共通・変化なし）
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Color / Transparent & Overlay
  ---------------------------------------------------------- */
  --primitive-color-transparent: rgba(255, 255, 255, 0);
  --primitive-color-overlay: rgba(0, 0, 0, 0.5);

  /* ----------------------------------------------------------
     Color / Neutral
  ---------------------------------------------------------- */
  --primitive-color-neutral-0:   #ffffff;
  --primitive-color-neutral-50:  #f8fafC;
  --primitive-color-neutral-100: #f1f5f9;
  --primitive-color-neutral-200: #e2e8f0;
  --primitive-color-neutral-300: #cbd5e1;
  --primitive-color-neutral-400: #94a3b8;
  --primitive-color-neutral-500: #64748b;
  --primitive-color-neutral-600: #475569;
  --primitive-color-neutral-700: #334155;
  --primitive-color-neutral-800: #1e2a3b;
  --primitive-color-neutral-900: #0f172a;
  --primitive-color-neutral-950: #020617;

  /* ----------------------------------------------------------
     Color / Primary (Blue)
  ---------------------------------------------------------- */
  --primitive-color-primary-50:  #eff6fb;
  --primitive-color-primary-100: #ddeaf5;
  --primitive-color-primary-200: #c0dbec;
  --primitive-color-primary-300: #94c3df;
  --primitive-color-primary-400: #61a5ce;
  --primitive-color-primary-500: #3d8abe;
  --primitive-color-primary-600: #2a6fa0;
  --primitive-color-primary-700: #235982;
  --primitive-color-primary-800: #1f4b6c;
  --primitive-color-primary-900: #1f3f5b;
  --primitive-color-primary-950: #012758;

  /* ----------------------------------------------------------
     Color / Secondary (Red)
  ---------------------------------------------------------- */
  --primitive-color-secondary-50:  #fef2f2;
  --primitive-color-secondary-100: #fee3e3;
  --primitive-color-secondary-200: #fecaca;
  --primitive-color-secondary-300: #fca5a5;
  --primitive-color-secondary-400: #f87171;
  --primitive-color-secondary-500: #ef4444;
  --primitive-color-secondary-600: #dc2626;
  --primitive-color-secondary-700: #b91c1c;
  --primitive-color-secondary-800: #991b1b;
  --primitive-color-secondary-900: #841f1f;
  --primitive-color-secondary-950: #6b1a1a;

  /* ----------------------------------------------------------
     Color / Tertiary / Accent (Gold)
  ---------------------------------------------------------- */
  --primitive-color-tertiary-50:  #fefbf3;
  --primitive-color-tertiary-100: #fdf6e3;
  --primitive-color-tertiary-200: #faedc4;
  --primitive-color-tertiary-300: #f5de9c;
  --primitive-color-tertiary-400: #edc768;
  --primitive-color-tertiary-500: #e5b143;
  --primitive-color-tertiary-600: #d49a35;
  --primitive-color-tertiary-700: #b17d2d;
  --primitive-color-tertiary-800: #8f642a;
  --primitive-color-tertiary-900: #765327;

  --primitive-color-accent-50:  var(--primitive-color-tertiary-50);
  --primitive-color-accent-100: var(--primitive-color-tertiary-100);
  --primitive-color-accent-200: var(--primitive-color-tertiary-200);
  --primitive-color-accent-300: var(--primitive-color-tertiary-300);
  --primitive-color-accent-400: var(--primitive-color-tertiary-400);
  --primitive-color-accent-500: var(--primitive-color-tertiary-500);
  --primitive-color-accent-600: var(--primitive-color-tertiary-600);
  --primitive-color-accent-700: var(--primitive-color-tertiary-700);
  --primitive-color-accent-800: var(--primitive-color-tertiary-800);
  --primitive-color-accent-900: var(--primitive-color-tertiary-900);

  /* ----------------------------------------------------------
     Color / Success
  ---------------------------------------------------------- */
  --primitive-color-success-50:  #f0fdf4;
  --primitive-color-success-100: #dcfce7;
  --primitive-color-success-200: #bbf7d0;
  --primitive-color-success-300: #86efac;
  --primitive-color-success-400: #4ade80;
  --primitive-color-success-500: #22c45e;
  --primitive-color-success-600: #16a34a;
  --primitive-color-success-700: #15803d;
  --primitive-color-success-800: #166534;
  --primitive-color-success-900: #14532d;

  /* ----------------------------------------------------------
     Color / Warning
  ---------------------------------------------------------- */
  --primitive-color-warning-50:  #fffbeb;
  --primitive-color-warning-100: #fef3c7;
  --primitive-color-warning-200: #fde68a;
  --primitive-color-warning-300: #fcd34d;
  --primitive-color-warning-400: #fbbf24;
  --primitive-color-warning-500: #f59e0b;
  --primitive-color-warning-600: #d97706;
  --primitive-color-warning-700: #b45309;
  --primitive-color-warning-800: #92400e;
  --primitive-color-warning-900: #78350f;

  /* ----------------------------------------------------------
     Color / Error
  ---------------------------------------------------------- */
  --primitive-color-error-50:  #fef2f2;
  --primitive-color-error-100: #fee3e3;
  --primitive-color-error-200: #fecaca;
  --primitive-color-error-300: #fca5a5;
  --primitive-color-error-400: #f87171;
  --primitive-color-error-500: #ef4444;
  --primitive-color-error-600: #dc2626;
  --primitive-color-error-700: #b91c1c;
  --primitive-color-error-800: #991b1b;
  --primitive-color-error-900: #7f1d1d;

  /* ----------------------------------------------------------
     Spacing (px)
  ---------------------------------------------------------- */
  --primitive-spacing-0:  0px;
  --primitive-spacing-1:  4px;
  --primitive-spacing-2:  8px;
  --primitive-spacing-3:  12px;
  --primitive-spacing-4:  16px;
  --primitive-spacing-5:  20px;
  --primitive-spacing-6:  24px;
  --primitive-spacing-8:  32px;
  --primitive-spacing-10: 40px;
  --primitive-spacing-12: 48px;
  --primitive-spacing-16: 64px;
  --primitive-spacing-20: 80px;
  --primitive-spacing-24: 96px;
  --primitive-spacing-32: 128px;
  --primitive-spacing-48: 192px;

  /* ----------------------------------------------------------
     Font Size
  ---------------------------------------------------------- */
  --primitive-font-size-4xs: 8px;
  --primitive-font-size-3xs: 10px;
  --primitive-font-size-2xs: 11px;
  --primitive-font-size-xs:  12px;
  --primitive-font-size-ss:  13px;
  --primitive-font-size-sm:  14px;
  --primitive-font-size-md:  15px;
  --primitive-font-size-base:16px;
  --primitive-font-size-ml:  17px;
  --primitive-font-size-lg:  18px;
  --primitive-font-size-xl:  20px;
  --primitive-font-size-2xl: 24px;
  --primitive-font-size-3xl: 30px;
  --primitive-font-size-4xl: 36px;
  --primitive-font-size-5xl: 48px;
  --primitive-font-size-6xl: 56px;
  --primitive-font-size-7xl: 64px;
  --primitive-font-size-8xl: 72px;
  --primitive-font-size-9xl: 80px;

  /* ----------------------------------------------------------
     Line Height
  ---------------------------------------------------------- */
  --primitive-line-height-none:    1;
  --primitive-line-height-narrow:  1.2;
  --primitive-line-height-tight:   1.25;
  --primitive-line-height-snug:    1.375;
  --primitive-line-height-normal:  1.5;
  --primitive-line-height-relaxed: 1.75;
  --primitive-line-height-loose:   2;

  /* ----------------------------------------------------------
     Letter Spacing (px)
  ---------------------------------------------------------- */
  --primitive-letter-spacing-tight:  -0.025em;
  --primitive-letter-spacing-normal: 0;
  --primitive-letter-spacing-wide:   0.05em;
  --primitive-letter-spacing-wider:  0.1em;

  /* ----------------------------------------------------------
     Font Family
  ---------------------------------------------------------- */
  --primitive-font-family-sans:  'Noto Sans JP', sans-serif;
  --primitive-font-family-serif: 'Noto Serif JP', serif;
  --primitive-font-family-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Noto Sans JP", monospace;

  /* ----------------------------------------------------------
     Font Weight
  ---------------------------------------------------------- */
  --primitive-font-weight-normal:   400;
  --primitive-font-weight-medium:   500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold:     700;

  /* ----------------------------------------------------------
     Border Radius
  ---------------------------------------------------------- */
  --primitive-border-radius-none: 0px;
  --primitive-border-radius-6xs:  2px;
  --primitive-border-radius-5xs:  4px;
  --primitive-border-radius-4xs:  6px;
  --primitive-border-radius-3xs:  8px;
  --primitive-border-radius-2xs:  10px;
  --primitive-border-radius-xs:   12px;
  --primitive-border-radius-sm:   14px;
  --primitive-border-radius-md:   15px;
  --primitive-border-radius-base: 16px;
  --primitive-border-radius-ml:   17px;
  --primitive-border-radius-lg:   18px;
  --primitive-border-radius-xl:   20px;
  --primitive-border-radius-2xl:  24px;
  --primitive-border-radius-full: 9999px;

  /* ----------------------------------------------------------
     Breakpoint
  ---------------------------------------------------------- */
  --primitive-breakpoint-md: 768px;
  --primitive-breakpoint-lg: 1025px;

  /* ----------------------------------------------------------
     Z-Index
  ---------------------------------------------------------- */
  --primitive-z-index-header:   100;
  --primitive-z-index-dropdown: 150;
  --primitive-z-index-drawer:   200;
}


/* ============================================================
   2. SEMANTIC TOKENS  （モード共通・変化なし）
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Spacing
  ---------------------------------------------------------- */
  --semantic-spacing-0:  var(--primitive-spacing-0);
  --semantic-spacing-1:  var(--primitive-spacing-1);
  --semantic-spacing-2:  var(--primitive-spacing-2);
  --semantic-spacing-3:  var(--primitive-spacing-3);
  --semantic-spacing-4:  var(--primitive-spacing-4);
  --semantic-spacing-5:  var(--primitive-spacing-5);
  --semantic-spacing-6:  var(--primitive-spacing-6);
  --semantic-spacing-8:  var(--primitive-spacing-8);
  --semantic-spacing-10: var(--primitive-spacing-10);
  --semantic-spacing-12: var(--primitive-spacing-12);
  --semantic-spacing-16: var(--primitive-spacing-16);
  --semantic-spacing-20: var(--primitive-spacing-20);
  --semantic-spacing-24: var(--primitive-spacing-24);
  --semantic-spacing-32: var(--primitive-spacing-32);
  --semantic-spacing-48: var(--primitive-spacing-48);

  /* ----------------------------------------------------------
     Border Radius
  ---------------------------------------------------------- */
  --semantic-border-radius-none: var(--primitive-border-radius-none);
  --semantic-border-radius-6xs:  var(--primitive-border-radius-6xs);
  --semantic-border-radius-5xs:  var(--primitive-border-radius-5xs);
  --semantic-border-radius-4xs:  var(--primitive-border-radius-4xs);
  --semantic-border-radius-3xs:  var(--primitive-border-radius-3xs);
  --semantic-border-radius-2xs:  var(--primitive-border-radius-2xs);
  --semantic-border-radius-xs:   var(--primitive-border-radius-xs);
  --semantic-border-radius-sm:   var(--primitive-border-radius-sm);
  --semantic-border-radius-md:   var(--primitive-border-radius-base);
  --semantic-border-radius-lg:   var(--primitive-border-radius-lg);
  --semantic-border-radius-xl:   var(--primitive-border-radius-xl);
  --semantic-border-radius-full: var(--primitive-border-radius-full);

  --semantic-border-width: 1px;
  --semantic-border-width-thin:  1px;
  --semantic-border-width-thick: 2px;
  --semantic-border-width-wide:  4px;
  --semantic-border-width-wider: 8px;

  /* ----------------------------------------------------------
     Color / Text
  ---------------------------------------------------------- */
  --semantic-color-text-primary:      var(--primitive-color-neutral-900);
  --semantic-color-text-secondary:    var(--primitive-color-neutral-600);
  --semantic-color-text-tertiary:     var(--primitive-color-neutral-400);
  --semantic-color-text-inverse:      var(--primitive-color-neutral-0);
  --semantic-color-text-inverse-a80:  rgba(255, 255, 255, 0.8);
  --semantic-color-text-link:         var(--primitive-color-primary-700);
  --semantic-color-text-link-hover:   var(--primitive-color-primary-400);
  --semantic-color-text-success:      var(--primitive-color-success-600);
  --semantic-color-text-warning:      var(--primitive-color-warning-600);
  --semantic-color-text-error:        var(--primitive-color-error-600);
  --semantic-color-text-disabled:     var(--primitive-color-neutral-400);
  --semantic-color-text-notes:        var(--primitive-color-neutral-800);

  /* ----------------------------------------------------------
     Color / Background
  ---------------------------------------------------------- */
  --semantic-color-bg:             var(--primitive-color-neutral-100);
  --semantic-color-bg-primary:     var(--primitive-color-neutral-0);
  --semantic-color-bg-secondary:   var(--primitive-color-secondary-100);
  --semantic-color-bg-tertiary:    var(--primitive-color-tertiary-100);
  --semantic-color-bg-inverse:     var(--primitive-color-primary-950);
  --semantic-color-bg-overlay:     var(--primitive-color-overlay);
  --semantic-color-bg-transparent: var(--primitive-color-transparent);
  --semantic-color-bg-highlight:   var(--primitive-color-primary-50);
  --semantic-color-bg-offlight:    var(--primitive-color-neutral-500);
  --semantic-color-bg-body:        var(--primitive-color-neutral-50);
  --semantic-color-bg-table:       var(--primitive-color-neutral-50);
  --semantic-color-bg-success:     var(--primitive-color-success-50);
  --semantic-color-bg-warning:     var(--primitive-color-warning-50);
  --semantic-color-bg-error:       var(--primitive-color-error-50);
  --semantic-color-bg-disabled:    var(--primitive-color-neutral-200);

  /* ----------------------------------------------------------
     Color / Border
  ---------------------------------------------------------- */
  --semantic-color-border-default:  var(--primitive-color-neutral-200);
  --semantic-color-border-strong:   var(--primitive-color-neutral-300);
  --semantic-color-border-focus:    var(--primitive-color-primary-500);
  --semantic-color-border-success:  var(--primitive-color-success-500);
  --semantic-color-border-warning:  var(--primitive-color-warning-500);
  --semantic-color-border-error:    var(--primitive-color-error-500);
  --semantic-color-border-disabled: var(--primitive-color-neutral-200);

  /* ----------------------------------------------------------
     Color / Brand
  ---------------------------------------------------------- */
  --semantic-color-brand-primary:         var(--primitive-color-primary-950);
  --semantic-color-brand-primary-hover:   var(--primitive-color-primary-600);
  --semantic-color-brand-primary-light:   var(--primitive-color-primary-50);
  --semantic-color-brand-secondary:       var(--primitive-color-secondary-900);
  --semantic-color-brand-secondary-hover: var(--primitive-color-secondary-950);
  --semantic-color-brand-tertiary:        var(--primitive-color-tertiary-700);
  --semantic-color-brand-tertiary-hover:  var(--primitive-color-tertiary-600);
  --semantic-color-brand-accent:          var(--primitive-color-accent-700);
  --semantic-color-brand-accent-hover:    var(--primitive-color-accent-500);

  /* ----------------------------------------------------------
     Color / Status
  ---------------------------------------------------------- */
  --semantic-color-status-success:    var(--primitive-color-success-600);
  --semantic-color-status-success-bg: var(--primitive-color-success-50);
  --semantic-color-status-warning:    var(--primitive-color-warning-600);
  --semantic-color-status-warning-bg: var(--primitive-color-warning-50);
  --semantic-color-status-error:      var(--primitive-color-error-600);
  --semantic-color-status-error-bg:   var(--primitive-color-error-50);

  /* ----------------------------------------------------------
     Typography / Font Family
  ---------------------------------------------------------- */
  --semantic-typography-font-family-body:    var(--primitive-font-family-sans);
  --semantic-typography-font-family-heading: var(--primitive-font-family-serif);
  --semantic-typography-font-family-mono:    var(--primitive-font-family-mono);

  /* ----------------------------------------------------------
     Typography / Font Weight  （モード共通）
  ---------------------------------------------------------- */
  --semantic-typography-font-weight-body:      var(--primitive-font-weight-normal);
  --semantic-typography-font-weight-heading:   var(--primitive-font-weight-semibold);
  --semantic-typography-font-weight-normal:    var(--primitive-font-weight-normal);
  --semantic-typography-font-weight-medium:    var(--primitive-font-weight-medium);
  --semantic-typography-font-weight-semibold:  var(--primitive-font-weight-semibold);
  --semantic-typography-font-weight-bold:      var(--primitive-font-weight-bold);

  /* ----------------------------------------------------------
     Typography / Line Height  （モード共通）
  ---------------------------------------------------------- */
  --semantic-typography-line-height-body:           var(--primitive-line-height-relaxed);
  --semantic-typography-line-height-heading:        var(--primitive-line-height-tight);
  --semantic-typography-line-height-heading-narrow: var(--primitive-line-height-narrow);
  --semantic-typography-line-height-heading-snug:   var(--primitive-line-height-snug);

  --semantic-typography-line-height-none:    var(--primitive-line-height-none);
  --semantic-typography-line-height-narrow:  var(--primitive-line-height-narrow);
  --semantic-typography-line-height-tight:   var(--primitive-line-height-tight);
  --semantic-typography-line-height-snug:    var(--primitive-line-height-snug);
  --semantic-typography-line-height-normal:  var(--primitive-line-height-normal);
  --semantic-typography-line-height-relaxed: var(--primitive-line-height-relaxed);
  --semantic-typography-line-height-loose:   var(--primitive-line-height-loose);

  /* ----------------------------------------------------------
     Typography / Letter Spacing  （モード共通）
  ---------------------------------------------------------- */
  --semantic-typography-letter-spacing-body:    var(--primitive-letter-spacing-wide);
  --semantic-typography-letter-spacing-heading: var(--primitive-letter-spacing-tight);

  --semantic-typography-letter-spacing-tight:  var(--primitive-letter-spacing-tight);
  --semantic-typography-letter-spacing-normal: var(--primitive-letter-spacing-normal);
  --semantic-typography-letter-spacing-wide:   var(--primitive-letter-spacing-wide);
  --semantic-typography-letter-spacing-wider:  var(--primitive-letter-spacing-wider);
}


/* ============================================================
   3. COMPONENT TOKENS — Mobile default
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Typography / Font Size  【Mobile】
  ---------------------------------------------------------- */
  --semantic-typography-font-size-body:      var(--primitive-font-size-sm);   /* 14px */
  --semantic-typography-font-size-body-xs:   var(--primitive-font-size-xs);   /* 12px */
  --semantic-typography-font-size-body-sm:   var(--primitive-font-size-sm);   /* 14px */
  --semantic-typography-font-size-body-md:   var(--primitive-font-size-base); /* 16px */
  --semantic-typography-font-size-body-lg:   var(--primitive-font-size-lg);   /* 18px */
  --semantic-typography-font-size-body-xl:   var(--primitive-font-size-xl);   /* 20px */
  --semantic-typography-font-size-body-2xl:  var(--primitive-font-size-2xl);  /* 24px */
  --semantic-typography-font-size-body-3xl:  var(--primitive-font-size-3xl);  /* 30px */

  --semantic-typography-font-size-heading:   var(--primitive-font-size-3xl);  /* 30px */
  --semantic-typography-font-size-heading-0: var(--primitive-font-size-3xl);  /* 30px */
  --semantic-typography-font-size-heading-1: var(--primitive-font-size-2xl);  /* 24px */
  --semantic-typography-font-size-heading-2: var(--primitive-font-size-xl);   /* 20px */
  --semantic-typography-font-size-heading-3: var(--primitive-font-size-lg);   /* 18px */
  --semantic-typography-font-size-heading-4: var(--primitive-font-size-base); /* 16px */
  --semantic-typography-font-size-heading-5: var(--primitive-font-size-md);   /* 15px */
  --semantic-typography-font-size-heading-6: var(--primitive-font-size-sm);   /* 14px */

  /* ----------------------------------------------------------
     Button  【Mobile】
  ---------------------------------------------------------- */
  --component-button-font-size-default: var(--primitive-font-size-sm);   /* 14px */
  --component-button-font-size-sm:      var(--primitive-font-size-xs);   /* 12px */
  --component-button-font-size-md:      var(--primitive-font-size-sm);   /* 14px */
  --component-button-font-size-lg:      var(--primitive-font-size-base); /* 16px */
  --component-button-font-weight:       var(--primitive-font-weight-medium);
  --component-button-line-height:       var(--primitive-line-height-none);
  --component-button-border-radius:     var(--primitive-border-radius-5xs); /* 4px */
  --component-button-border-width:      1px;

  --component-button-padding-x:    var(--semantic-spacing-6);  /* 24px */
  --component-button-padding-y:    var(--semantic-spacing-3);  /* 12px */
  --component-button-padding-x-sm: var(--semantic-spacing-2);  /* 8px  ← Mobile */
  --component-button-padding-y-sm: var(--semantic-spacing-1);  /* 4px  ← Mobile */
  --component-button-padding-x-lg: var(--semantic-spacing-8);  /* 32px */
  --component-button-padding-y-lg: var(--semantic-spacing-4);  /* 16px */

  --component-button-color-primary:          var(--semantic-color-brand-primary);
  --component-button-color-secondary:        var(--semantic-color-brand-secondary);
  --component-button-color-tertiary:         var(--semantic-color-brand-tertiary);
  --component-button-color-inverse:          var(--semantic-color-text-inverse);
  --component-button-color-hover:            var(--primitive-color-primary-500);
  --component-button-color-submit:           var(--semantic-color-brand-secondary);
  --component-button-color-submit-hover:     var(--primitive-color-error-700);
  --component-button-border-color-primary:   var(--semantic-color-brand-primary);
  --component-button-border-color-secondary: var(--semantic-color-brand-secondary);
  --component-button-border-color-tertiary:  var(--semantic-color-brand-tertiary);
  --component-button-border-color-inverse:   var(--semantic-color-border-default);

  /* ----------------------------------------------------------
     Input  （モード共通）
  ---------------------------------------------------------- */
  --component-input-color-text:    var(--semantic-color-text-primary);
  --component-input-font-size:     var(--primitive-font-size-base);
  --component-input-line-height:   var(--primitive-line-height-normal);
  --component-input-border-radius: var(--semantic-border-radius-md);
  --component-input-padding-x:     var(--semantic-spacing-4);
  --component-input-padding-y:     var(--semantic-spacing-3);
  --component-input-border:        var(--semantic-color-border-default);
  --component-input-border-focus:  var(--semantic-color-border-focus);
  --component-input-bg:            var(--semantic-color-bg-primary);
  --component-input-placeholder:   var(--semantic-color-text-tertiary);

  /* ----------------------------------------------------------
     Card  【Mobile】
  ---------------------------------------------------------- */
  --component-card-padding:   var(--semantic-spacing-6);
  --component-card-radius:    var(--semantic-border-radius-none);
  --component-card-bg:        var(--semantic-color-bg-primary);
  --component-card-border:    var(--semantic-color-border-default);

  --component-card-gap-xs:   var(--primitive-spacing-1);
  --component-card-gap-sm:   var(--primitive-spacing-2);
  --component-card-gap-base: var(--primitive-spacing-4);
  --component-card-gap-md:   var(--primitive-spacing-6);

  --component-card-header-font-size:   var(--primitive-font-size-md);   /* sm 14px ⇒ md 15px ← Mobile */
  --component-card-header-font-weight: var(--primitive-font-weight-bold);
  --component-card-header-line-height: 1.5;
  --component-card-header-color:       var(--semantic-color-text-primary);
  --component-card-header-date-size:   var(--primitive-font-size-xs);   /* 12px ← Mobile */
  --component-card-header-tag-color:   var(--semantic-color-text-secondary);

  --component-card-content-font-size:     var(--primitive-font-size-sm);  /* 14px */
  --component-card-content-font-size-xs:  var(--primitive-font-size-xs); /* 12px ← Mobile */
  --component-card-content-font-weight:   var(--primitive-font-weight-normal);
  --component-card-content-line-height:    1.5;
  --component-card-content-line-height-xs: 1.2875;
  --component-card-content-color:         var(--semantic-color-text-primary);

  --component-card-logo-width:           64px;

  --component-card-image-padding:        var(--primitive-spacing-2);
  --component-card-image-radius-base:    var(--primitive-border-radius-4xs);
  --component-card-image-radius-inside:  var(--primitive-border-radius-5xs);
  --component-card-image-radius-outside: var(--primitive-border-radius-3xs);

  /* ----------------------------------------------------------
     Tag  【Mobile】
  ---------------------------------------------------------- */
  --component-tag-font-size:   var(--primitive-font-size-2xs);      /* 11px ← Mobile */
  --component-tag-font-weight: var(--primitive-font-weight-medium);
  --component-tag-line-height: var(--primitive-font-size-xs);        /* 12px ← Mobile */
  --component-tag-padding-x:   var(--primitive-spacing-2);
  --component-tag-padding-y:   var(--primitive-spacing-1);           /* 4px  ← Mobile */
  --component-tag-radius:      var(--primitive-border-radius-full);
  --component-tag-color:       var(--semantic-color-text-inverse);
  --component-tag-bg-color:    var(--semantic-color-brand-tertiary);

  /* ----------------------------------------------------------
     Paragraph  【Mobile】
  ---------------------------------------------------------- */
  --component-paragraph-font-size:   var(--primitive-font-size-sm);  /* 14px ← Mobile */
  --component-paragraph-line-height: 1.8;                         /* ← Mobile */

  /* ----------------------------------------------------------
     Link  【Mobile】
  ---------------------------------------------------------- */
  --component-link-font-weight:       var(--primitive-font-weight-medium);
  --component-link-line-height:       var(--primitive-line-height-none);
  --component-link-font-size-default: var(--primitive-font-size-sm);   /* 14px ← Mobile */
  --component-link-font-size-sm:      var(--primitive-font-size-xs);   /* 12px ← Mobile */
  --component-link-font-size-lg:      var(--primitive-font-size-base); /* 16px ← Mobile */
  --component-link-color-primary:     var(--semantic-color-brand-primary);
  --component-link-color-secondary:   var(--semantic-color-brand-secondary);
  --component-link-color-tertiary:    var(--semantic-color-brand-tertiary);

  /* ----------------------------------------------------------
     Component / Marquee
  ---------------------------------------------------------- */
  --kv-marquee-width: calc(707.48px + 17.148px);
  --kv-marquee-height: 51.92px;
  --kv-marquee-timer: 14.29s;

  --char-count:    10;     /* 文字数：手動設定 */
  --char-size:     0.9em;  /* 1文字幅（調整値）：英語調整値;; */
  --marquee-speed: 0.5em;  /* 1秒あたりの移動量 */
  --marquee-gap:   2.0em;
  --marquee-distance: calc((var(--char-count) * var(--char-size)) + var(--marquee-gap));


  /* ----------------------------------------------------------
     Layout / Container  （モード共通）
  ---------------------------------------------------------- */
  --layout-container-max-width:  1140px;
  --layout-container-padding:    var(--semantic-spacing-4);
  --layout-container-padding-md: var(--semantic-spacing-6);
  --layout-container-padding-lg: var(--semantic-spacing-8);

  /* ----------------------------------------------------------
     Layout / Section  （モード共通）
  ---------------------------------------------------------- */
  --layout-section-padding-y-2xs: var(--semantic-spacing-4);
  --layout-section-padding-y-xs:  var(--semantic-spacing-6);
  --layout-section-padding-y-sm:  var(--semantic-spacing-8);
  --layout-section-padding-y:     var(--semantic-spacing-12);
  --layout-section-padding-y-md:  var(--semantic-spacing-16);
  --layout-section-padding-y-lg:  var(--semantic-spacing-24);
  --layout-section-padding-y-xl:  var(--semantic-spacing-32);
  --layout-section-padding-y-2xl: var(--semantic-spacing-48);

  /* ----------------------------------------------------------
     Layout / Gap  （モード共通）
  ---------------------------------------------------------- */
  --layout-gap-xs:      var(--primitive-spacing-2);
  --layout-gap-sm:      var(--primitive-spacing-3);
  --layout-gap-default: var(--semantic-spacing-4);
  --layout-gap-md:      var(--semantic-spacing-6);
  --layout-gap-lg:      var(--semantic-spacing-8);
  --layout-gap-xl:      var(--semantic-spacing-12);
  --layout-gap-2xl:     var(--semantic-spacing-16);

  /* ----------------------------------------------------------
     Layout / Grid  （モード共通）
  ---------------------------------------------------------- */
  --layout-grid-columns: 12;
  --layout-grid-gutter:  var(--semantic-spacing-4);

  --layout-header-height: 48px;  /* ← Mobile */

  /* ----------------------------------------------------------
     Global / Header  （モード共通）
  ---------------------------------------------------------- */
  --global-header-padding:   var(--semantic-spacing-4);
  --global-header-padding-y: var(--semantic-spacing-2);
  --global-header-padding-x: var(--semantic-spacing-2);

  /* ----------------------------------------------------------
     Global / Button
  ---------------------------------------------------------- */
  --global-header-button-height:  var(--layout-header-height);
  --global-header-icon-height:    var(--global-nav-button-icon-size);

  /* ----------------------------------------------------------
     Global / Logo  【Mobile】
  ---------------------------------------------------------- */
  --global-logo-width:  180px;  /* ← Mobile */

  /* ----------------------------------------------------------
     Global / Nav  【Mobile】
  ---------------------------------------------------------- */
  --global-nav-gutter:            var(--semantic-spacing-2);
  --global-nav-link-font-size:    15px;
  --global-nav-link-padding-x:    var(--global-nav-link-font-size);
  --global-nav-link-text-color:   var(--semantic-color-text-primary);
  --global-nav-link-bg-color:     var(--primitive-color-transparent);
  --global-nav-button-font-size:  8px;  /* ← Mobile */
  --global-nav-button-icon-size:  24px; /* ← Mobile */
  --global-nav-button-text-color: var(--semantic-color-text-primary);
  --global-nav-button-bg-login:   var(--semantic-color-brand-secondary);
  --global-nav-button-bg-contact: var(--semantic-color-brand-primary);
  --global-nav-button-bg-login-hover:   var(--primitive-color-error-700);
  --global-nav-button-bg-contact-hover: var(--primitive-color-primary-500);

  /* ----------------------------------------------------------
     Global / Footer  【Mobile】
  ---------------------------------------------------------- */
  --global-footer-padding-y-sm:    var(--semantic-spacing-4);
  --global-footer-padding-y:       var(--semantic-spacing-12);
  --global-footer-padding-y-md:    var(--semantic-spacing-16);
  --global-footer-padding-y-lg:    var(--semantic-spacing-24);
  --global-footer-font-size:       var(--primitive-font-size-2xs);  /* 11px ← Mobile */
  --global-footer-link-font-size:  var(--primitive-font-size-2xs);  /* 11px ← Mobile */
  --global-footer-copyright-size:  var(--primitive-font-size-3xs);  /* 10px ← Mobile */

  /* ----------------------------------------------------------
     Global / Main  （モード共通）
  ---------------------------------------------------------- */
  --global-main-default: var(--semantic-spacing-4);
  --global-main-md:      var(--semantic-spacing-6);
  --global-main-lg:      var(--semantic-spacing-8);
}


/* ============================================================
   4. LAPTOP OVERRIDES  @media (min-width: 768px)
      Mobileと差分があるトークンのみ上書き
   ============================================================ */

@media (min-width: 768px) {

  :root {

    /* Typography / Font Size */
    --semantic-typography-font-size-body:      var(--primitive-font-size-base); /* 16px */
    --semantic-typography-font-size-heading:   var(--primitive-font-size-8xl);  /* 72px */
    --semantic-typography-font-size-heading-0: var(--primitive-font-size-9xl);  /* 80px */
    --semantic-typography-font-size-heading-1: var(--primitive-font-size-7xl);  /* 64px */
    --semantic-typography-font-size-heading-2: var(--primitive-font-size-3xl);  /* 30px */
    --semantic-typography-font-size-heading-3: var(--primitive-font-size-2xl);  /* 24px */
    --semantic-typography-font-size-heading-4: var(--primitive-font-size-xl);   /* 20px */
    --semantic-typography-font-size-heading-5: var(--primitive-font-size-lg);   /* 18px */
    --semantic-typography-font-size-heading-6: var(--primitive-font-size-base); /* 16px */

    /* Button */
    --component-button-font-size-default: var(--primitive-font-size-base); /* 16px */
    --component-button-font-size-sm:      var(--primitive-font-size-sm);   /* 14px */
    --component-button-font-size-lg:      var(--primitive-font-size-lg);   /* 18px */
    --component-button-padding-x-sm:      var(--semantic-spacing-4);       /* 16px */
    --component-button-padding-y-sm:      var(--semantic-spacing-2);       /* 8px */

    --component-global-nav-item-padding-x: var(--semantic-spacing-4);
    --component-global-nav-item-padding-y: var(--semantic-spacing-4);

    /* Card */
    --component-card-header-font-size:    var(--primitive-font-size-base); /* 16px */
    --component-card-header-line-height:  1.5;
    --component-card-header-date-size:    var(--primitive-font-size-sm);   /* 14px */
    --component-card-content-font-size-xs:var(--primitive-font-size-xs);   /* 12px */

    --component-card-logo-width:           96px;

    /* Tag */
    --component-tag-font-size:   var(--primitive-font-size-xs);      /* 12px */
    --component-tag-line-height: var(--primitive-font-size-base);    /* 16px */
    --component-tag-padding-y:   var(--primitive-spacing-0);         /* 0px */

    /* Paragraph */
    --component-paragraph-font-size:   var(--primitive-font-size-base); /* 16px */
    --component-paragraph-line-height: 1.8;

    /* Link */
    --component-link-font-size-default: var(--primitive-font-size-base); /* 16px */
    --component-link-font-size-sm:      var(--primitive-font-size-sm);   /* 14px */
    --component-link-font-size-lg:      var(--primitive-font-size-lg);   /* 18px */

    /* Keyvisual / Marquee */
    --kv-marquee-width: calc(1478px + 36px);
    --kv-marquee-height: 109px;
    --kv-marquee-timer: 30s;

    /* Layout */
    --layout-header-height: 80px;

    /* Nav */
    --global-nav-link-font-size:    13.66px;
    --global-nav-button-font-size:  12.8px;
    --global-nav-button-icon-size:  32px;
    --global-nav-button-text-color: var(--semantic-color-text-inverse);

    /* Button  */
    --global-header-button-height:  64px;
    --global-header-icon-height:    32px;

    /* Logo  */
    --global-logo-width:  248px;

    /* Footer */
    --global-footer-font-size:        var(--primitive-font-size-xs);  /* 12px */
    --global-footer-link-font-size:   var(--primitive-font-size-sm);  /* 14px */
    --global-footer-copyright-size:   var(--primitive-font-size-xs);  /* 12px */
  }
}