@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  color-scheme: light;
  --font-family-sans: "Source Han Sans JP",'Noto Sans JP', "ヒラギノ角ゴシック", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  --font-family-numeric: 'Roboto', sans-serif;


  /* ============================================= */
  /* 【第1階層】パレット定義 - soeasy
  /* Client Theme: Orange & White (おしえあうって、すばらしい。)
  /* ============================================= */
  --palette-white: #FFFFFF;
  --palette-black: #000000;

  /* グレー (Gray Scale) - さらに明るいグレーベース */
  --palette-gray-50: #FAFAFA;    /* ページのベース背景（かなり明るいグレー） */
  --palette-gray-100: #FCFCFC;   /* コンテナ内エリア・ホバー */
  --palette-gray-200: #F2F2F2;   /* ボーダー・区切り */
  --palette-gray-300: #EBEBEB;
  --palette-gray-350: #E5E5E5;
  --palette-gray-400: #C4C4C4;   /* ボーダー・補助 */
  --palette-gray-450: #B8B8B8;
  --palette-gray-500: #AAAAAA;
  --palette-gray-600: #999999;
  --palette-gray-700: #888888;
  --palette-gray-800: #787878;   /* 注釈・補助テキスト */
  --palette-gray-850: #555555;
  --palette-gray-900: #333333;   /* サブテキスト */
  --palette-gray-950: #222222;   /* 本文・見出し */

  /* プライマリ (Orange - メインカラー #FF9900) */
  --palette-primary-300: #FFCC66; /* ホバー・アクティブ背景 */
  --palette-primary-500: #FF9900; /* メイン（ボタン、アクセント） */
  --palette-primary-700: #E68A00; /* クリック時・強調 */

  /* セカンダリ (Blue - DCKit用 区別しやすい色) */
  --palette-secondary-300: #93C5FD;
  --palette-secondary-500: #3B82F6;
  --palette-secondary-700: #2563EB;

  /* ターシャリ (Teal - DCKit用 区別しやすい色) */
  --palette-third-300: #5EEAD4;
  --palette-third-500: #14B8A6;
  --palette-third-700: #0D9488;

  /* クォータナリ (Violet - DCKit用 区別しやすい色) */
  --palette-fourth-300: #C4B5FD;
  --palette-fourth-500: #8B5CF6;
  --palette-fourth-700: #7C3AED;

  /* 状態 (Status) */
  --palette-error-500: #EF4444;
  --palette-error-700: #DC2626;
  --palette-alert-800: #F59E0B;

  /* 汎用 */
  --palette-blue-200: #DBEAFE;
  --palette-blue-700: #2563EB;
  --palette-blue-800: #1D4ED8;
  --palette-blue-900: #1E40AF;
  --palette-blue-950: #172554;
  --palette-blue-alt-700: #0EA5E9;

  /* チャート系列1: オレンジグラデーション */
  --palette-chart-01: #FF9900;
  --palette-chart-02: #FFB74D;
  --palette-chart-03: #FFCC66;
  --palette-chart-04: #FFE0B2;
  --palette-chart-05: #FFF3E0;

  /* チャート系列2: ニュートラル・コントラスト */
  --palette-chart-06: #64748B;
  --palette-chart-07: #94A3B8;
  --palette-chart-08: #CBD5E1;
  --palette-chart-09: #E2E8F0;
  --palette-chart-10: #F1F5F9;


  /* ============================================= */
  /* 【第2階層】役割定義
  /* ============================================= */
  --page-background-color: var(--palette-gray-50);
  --background-container: #FFFFFF;
  --background-container-sub: #FFFFFF;
  --header-background: #FFFFFF19;
  --table-background: var(--palette-gray-450);

  --text-main: var(--palette-gray-950);
  --text-sub: var(--palette-gray-900);
  --text-muted: var(--palette-gray-800);
  --text-link: var(--palette-blue-700);
  --text-on-primary: var(--palette-white);

  --border-primary: var(--palette-gray-800);
  --border-muted: var(--palette-gray-400);

  --color-brand: var(--palette-primary-500);

  --color-error: var(--palette-error-500);
  --color-warning: var(--palette-error-700);

  --gradient-brand: linear-gradient(95deg, var(--palette-chart-01) -20%, var(--palette-chart-04) 100%);

  --indicator-background: rgba(255, 255, 255, 0.70);
  --indicator-text-inactive: var(--palette-gray-700);
  --indicator-track-inactive: var(--palette-gray-500);
  --indicator-track-active: var(--palette-primary-500);

  --gradient-gpt: linear-gradient(95deg, #FF9900 -20%, #FFB74D 100%);
  --gradient-sp: linear-gradient(168deg, #FF9900 8%, #FFCC66 100%);

  --shadow-field: 0px 0px 20px 0px rgba(255, 153, 0, 0.08);

  --background-blur-pattern: radial-gradient(50% 50% at 50% 50%, #FF9900 0%, #FFCC66 35%);

  --modal-background-color: rgba(255, 243, 224, .15);
  --modal-background-blur: blur(10px);
  --modal-container-background: #FFFFFF;

  --DC-normal-1: var(--palette-primary-500);
  --DC-normal-2: var(--palette-secondary-500);
  --DC-normal-3: var(--palette-third-500);
  --DC-normal-4: var(--palette-fourth-500);

  --DC-over-1: var(--palette-primary-700);
  --DC-over-2: var(--palette-secondary-700);
  --DC-over-3: var(--palette-third-700);
  --DC-over-4: var(--palette-fourth-700);

  --DC-base-1: var(--palette-primary-500);
  --DC-base-2: var(--palette-secondary-500);
  --DC-base-3: var(--palette-third-500);
  --DC-base-4: var(--palette-fourth-500);

  --DC-track: var(--palette-gray-200);

  --chart-01: var(--palette-chart-01);
  --chart-02: var(--palette-chart-02);
  --chart-03: var(--palette-chart-03);
  --chart-04: var(--palette-chart-04);
  --chart-05: var(--palette-chart-05);
  --chart-06: var(--palette-chart-06);
  --chart-07: var(--palette-chart-07);
  --chart-08: var(--palette-chart-08);
  --chart-09: var(--palette-chart-09);
  --chart-10: var(--palette-chart-10);

  --KPI-smallwrapper: var(--palette-gray-200);

  --grid-row-height: 25px;
}

@media (min-width: 640px) {
  :root { --grid-row-height: 36px; }
}
@media (min-width: 1024px) {
  :root { --grid-row-height: 40px; }
}
@media (min-width: 1920px) {
  :root { --grid-row-height: 44px; }
}

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}


@media print {
  @page {
    size: A2 portrait;
    margin: 10mm;
  }

  html, body, #svelte, main {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
  }

  .bg-white,
  .bg-gray-50, .bg-gray-100, .bg-gray-200,
  .bg-slate-50, .bg-slate-100, .bg-slate-200,
  .bg-zinc-50, .bg-zinc-100,
  .bg-background-page, .bg-background-container {
    background-color: #ffffff !important;
  }

  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .no-print {
    display: none !important;
  }

  .printing-mode aside,
  .printing-mode header,
  .printing-mode nav,
  .printing-mode .print\:hidden {
    display: none !important;
  }

  .overflow-hidden, .overflow-auto, .overflow-y-auto, .overflow-x-auto, .scroll-area {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

@layer utilities {
  .break-before-page {
    break-before: page !important;
    page-break-before: always !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    display: block !important;
    width: 100% !important;
  }

  .break-inside-avoid {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .break-inside-auto {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .break-after-avoid {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
}

svg text.tickLabel {
    fill: #3F3F3F !important;
    stroke: none !important;
    stroke-width: 0 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}
.fill-text-sub {
    fill: #3F3F3F !important;
}