:root {
  /* Base Colors */
  --color-primary: #005bac;
  --color-primary-strong: #076fb3;
  --color-primary-hover: #00478b;
  --color-primary-deep: #002b60;
  --color-black: #231815;
  --color-white: #fff;
  --color-surface-muted: #f5f5f5;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #333;
  --color-text-muted: #666;
  --color-text-subtle: #808080;
  --color-border-default: #dcdcdc;
  --color-border-muted: #d9d9d9;
  --color-border-strong: #b8b8b8;
  --color-border-light: #ddd;
  --color-border-medium: #aeaeb2;
  --color-border-soft: #d1d1d6;
  --color-neutral-500: #a0a0a0;
  --color-neutral-550: #999;
  --color-neutral-600: #8a8a8a;
  --color-neutral-650: #808080;
  --color-neutral-700: #4d4d4d;
  --color-neutral-750: #404040;
  --color-neutral-800: #333;
  --color-neutral-300: #d0d0d0;
  --color-neutral-350: #c9c9c9;
  --color-neutral-400: #bebebe;

  /* Color カーライフ */
  --color-red: #d7000f;
  --color-carlife-primary: var(--color-red);
  --color-yellow: #fff100;
  --color-dark: #59504c;
  --color-gray: #59504c;
  --color-blue: #000cb3;
  --color-blue-blue02: #00478b;
  --color-secondary: #0099d9;

  /* Color リビングライフ */
  --color-orange: #ef7c00;

  /* Color コンサルティング */
  --color-green: #6ba429;

  /* Color オフィス&レジデンス */
  --color-office-gray: #837e7c;
  --color-office-gray-deep: #585453;

  /* Color トップ */
  --color-top-bg: #dbeef8;
  --color-top-bg-alt: #b5d4e8;
  --color-top-divider: #b3b3b3;
  --color-top-surface: #d8d8d8;

  /* Color 各ページ個別トーン */
  --color-consulting-soft: #f0f6ea;
  --color-news-deep: #004a8c;
  --color-header-gradient-end: #fbfdff;
  --color-header-surface: #f8fbff;
  --color-header-surface-soft: #eef6fd;
  --color-legal-accent: #7bb8d6;
  --color-legal-gradient-start: #7fc0e2;
  --color-legal-gradient-end: #a8d5ee;
  --color-surface-light: #f3f3f3;
  --color-surface-soft: #e5e5e5;

  /* Color リビングライフ詳細 */
  --color-livinglife-band-yellow: #fff5d8;
  --color-livinglife-band-blue: #e8f2ff;
  --color-livinglife-band-green: #eaf9e8;
  --color-livinglife-band-orange: #fff0df;
  --color-livinglife-note-blue: #f2f7ff;
  --color-livinglife-accent-strong: #d86200;
  --color-livinglife-cool: #347f9b;
  --color-livinglife-cool-dark: #2a6880;
  --color-livinglife-magenta: #fe284c;

  /* Typography */
  --font-main: "Noto Sans JP", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-sm-plus: 0.9375rem;
  --font-size-md: 1rem;
  --font-size-md-alt: 0.98rem;
  --font-size-md-plus: 1.125rem;
  --font-size-lg-alt: 1.1875rem;
  --font-size-lg: 1.125rem;
  --font-size-lg-plus: 1.3125rem;
  --font-size-xl-plus: 1.375rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-2xl-plus: 1.75rem;
  --font-size-3xl: 2rem;
  --font-size-3xl-plus: 2.0625rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 4rem;
  --font-size-hero: 2.25rem;
  --font-size-4xs: 0.5rem;
  --font-size-3xs: 0.625rem;
  --font-size-2xs: 0.6875rem;
  --font-size-xs-plus: 0.8125rem;
  --line-height-tight: 1.2;
  --line-height-compact: 1;
  --line-height-condensed: 0.8;
  --line-height-xs: 1.075;
  --line-height-sm: 1.3;
  --line-height-sm-plus: 1.35;
  --line-height-snug: 1.4;
  --line-height-snug-plus: 1.45;
  --line-height-normal: 1.5;
  --line-height-normal-plus: 1.55;
  --line-height-relaxed-plus: 1.6;
  --line-height-wide: 1.7;
  --line-height-wide-plus: 1.75;
  --line-height-relaxed: 1.8;
  --line-height-loose-plus: 1.85;
  --line-height-loose-fixed: 1.857;
  --line-height-loose: 1.9;
  --line-height-double: 2;
  --line-height-double-plus: 2.1;
  --line-height-double-fluid: 2.1053;
  --line-height-display: 1.75rem;
  --line-height-display-wide: 2.5rem;

  /* Spacing Unit（必要なら） */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-s: 0.8rem;
  --space-m: 1.6rem;
  --space-l: 3.2rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Shadow */
  --shadow-sm: 0 6px 14px rgb(3 32 54 / 14%);
  --shadow-md: 6px 6px 10px 0 rgb(0 0 0 / 20%);
  --shadow-lg: 0 17px 25px 5px rgb(0 0 0 / 48%);
  --shadow-soft: 0.375rem 0.375rem 0.625rem 0 rgb(0 0 0 / 20%);
  --shadow-danger: 0 6px 14px rgb(223 0 19 / 25%);

  /* Breakpoint
     Note: CSS custom properties are not directly usable in media queries
     without a build step; keep these as design constants. */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;

  /* Breadcrumb */
  --breadcrumb-bg-color: var(--color-surface-muted);
  --breadcrumb-text-color: var(--color-black);
  --breadcrumb-padding-desktop: 31px 62px;
  --breadcrumb-padding-tablet: 20px 40px;
  --breadcrumb-padding-mobile: 15px 20px;
  --breadcrumb-gap: 7px;
  --breadcrumb-font-size: 1rem;
  --breadcrumb-line-height: 1.4;
  --breadcrumb-max-width: var(--layout-content-width);
  --breadcrumb-max-width--full: var(--layout-section-width-full);

  /* ==============================================
     Layout - サイト全体で統一するコンテンツ幅
     ============================================== */

  /* セクション外枠の最大幅（ヒーロー等の広いエリア） */
  --layout-section-width: 1440px;

  /* セクション外枠の最大幅（サービスページ等フル表示） */
  --layout-section-width-full: 1920px;

  /* コンテンツエリアの最大幅（テキスト・カード等） */
  --layout-content-width: 1180px;

  /* 左右の余白 */
  --layout-padding-desktop: 60px;
  --layout-padding-tablet: 40px;
  --layout-padding-mobile: 20px;

  /* セクション上下の余白 */
  --layout-section-padding-y-desktop: 80px;
  --layout-section-padding-y-tablet: 60px;
  --layout-section-padding-y-mobile: 40px;
}