/* 共通スタイル
---------------------------------------*/
#root {
  border-inline: none !important;
  border: none !important;
}

:root {
  --font-base: "Noto Sans JP", sans-serif;
}

/* 棒グラフ
---------------------------------------*/
:root {
  /* ===== テキスト・色 ===== */
  --axis-text: #111111;   /* 軸テキスト色 */
  --axis-font-size: clamp(0.75rem, 0.667rem + 0.42vw, 1rem);   /* 軸フォントサイズ 12-16px */
  --axis-font-weight: 700;  /* 軸フォント太さ */

  --label-bg: #ffffff;    /* 棒グラフラベル背景色 */
  --label-text: #111111;  /* ラベル文字色 */
  --label-font-size: clamp(0.75rem, 0.708rem + 0.21vw, 0.875rem);  /* ラベル文字サイズ 12-14px */
  --label-font-weight: 700; /* ラベル文字太さ */

  /* ===== 線・棒・グリッド ===== */
  --bar-main: #0b3a7e;    /* 棒グラフ色 */
  --line-main: #E3475F;   /* 折れ線色 */
  --line-dot-stroke: #ffffff; /* 折れ線ドット枠色 */
  --grid-line: #707070;   /* 補助線色 */

  /* ===== アニメーション速度 ===== */
  --sales-chart-animation-duration: 1000; /* 棒グラフ速度(ms) */
}

.sales-chart-wrap {
  width: 100%;
  height: 300px;
  /* 以下、表示時のチラつき防止 */
  opacity: 0;
  transform: translateY(8px); /* 初期位置 */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sales-chart-wrap.is-visible {
  opacity: 1; /* 表示 */
  transform: translateY(0); /* 元位置 */
}

/* ドーナツグラフ
---------------------------------------*/
:root {
  /* ===== テキスト・色 ===== */
  --doughnut-main: #E3475F; /* ドーナツメイン色 */
  --doughnut-base: #D0D0D0; /* ドーナツベース色 */
  --doughnut-size: 100%;     /* ドーナツサイズ */

  --doughnut-label-color: #111111;  /* ドーナツラベル色 */
  --doughnut-label-font-size: clamp(0.875rem, 0.833rem + 0.21vw, 1rem);   /* ドーナツラベル文字サイズ 14-16px */
  --doughnut-label-font-weight: 500;  /* ドーナツラベル太さ */

  --doughnut-value-color: var(--doughnut-main); /* ドーナツ数値色 */
  --doughnut-value-font-size: clamp(1.625rem, 1.5rem + 0.63vw, 2rem);   /* ドーナツ数値文字サイズ 26-32px */
  --doughnut-value-font-weight: 800; /* ドーナツ数値太さ */

  --doughnut-value-unit-color: var(--doughnut-main); /* 色 */
  --doughnut-value-unit-font-size: clamp(1.25rem, 1.125rem + 0.63vw, 1.5rem);  /* %文字サイズ 20-24px */
  --doughnut-value-unit-font-weight: 800; /* %太さ */

  /* ===== アニメーション速度 ===== */
  --job-doughnut-animation-duration: 1000; /* ドーナツ速度(ms) */
}

.job-doughnut-chart-wrap {
  width: var(--doughnut-size); /* サイズ */
  height: var(--doughnut-size); /* サイズ */
  position: relative; /* 中央配置用 */
  aspect-ratio: 1 / 1;
}
.job-doughnut-chart-wrap.is-visible {
  opacity: 1; /* 表示 */
}

.doughnut-center-wrap {
  position: absolute; /* 重ねる */
  inset: 0; /* 全面 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* クリック無効 */
  text-align: center;
}

.doughnut-label {
  font-family: var(--font-base); /* フォント */
  font-weight: var(--doughnut-label-font-weight); /* 太さ */
  font-size: var(--doughnut-label-font-size); /* サイズ */
  color: var(--doughnut-label-color); /* 色 */
}
.doughnut-value {
  font-family: var(--font-base); /* フォント */
  font-weight: var(--doughnut-value-font-weight); /* 太さ */
  font-size: var(--doughnut-value-font-size); /* サイズ */
  color: var(--doughnut-value-color); /* 色 */
}
.doughnut-value-unit {
  font-family: var(--font-base); /* フォント */
  font-weight: var(--doughnut-value-unit-font-weight); /* 太さ */
  font-size: var(--doughnut-value-unit-font-size); /* サイズ */
  color: var(--doughnut-value-unit-color); /* 色 */
}

/* 円グラフ
---------------------------------------*/
:root {
  /* ===== テキスト・色 =====  ※項目ごとの色分けはdata-graph.jsonで指定 */
  --pie-label-text-on-color: #ffffff; /* 円内ラベル色 */
  --pie-label-text: #111111; /* 円外ラベル色 */

  --pie-label-font-size: 13px; /* 円内項目名サイズ */
  --pie-label-font-weight: 700; /* 円内項目名太さ */

  --pie-value-font-size: 22px; /* 円内数値サイズ */
  --pie-value-font-weight: 800; /* 円内数値太さ */

  --pie-value-unit-font-size: 0.7em; /* %サイズ */
  --pie-label-gap-y: 1.0em; /* 項目名と数値の間隔 */

  --pie-label-line: #111111; /* 外ラベル線色 */
  --pie-label-line-width: 1; /* 外ラベル線太さ */

  --pie-min-angle: 2; /* 極小扇形の最小角度 */

  --pie-chart-height: 320px; /* グラフ高さ */

  --pie-font-scale: 1; /* デフォルト倍率 */
  --pie-label-font-size: 13; /* 項目名サイズ（数値だけ。pxは書かない） */
  --pie-value-font-size: 22; /* 数値サイズ（数値だけ。pxは書かない） */
  --pie-value-unit-font-size: 0.7; /* %サイズ倍率 */

  /* ===== アニメーション速度 ===== */
  --pie-chart-animation-duration: 1400; /* 円グラフ速度(ms) */
}

.pie-chart-card {
  width: 100%;
  /* 以下、表示時のチラつき防止 */
  opacity: 0; /* 初期非表示 */
  transform: translateY(8px); /* 初期位置 */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pie-chart-card.is-visible {
  opacity: 1; /* 表示 */
  transform: translateY(0); /* 元位置 */
}
.pie-chart-body {
  width: 100%;
  height: var(--pie-chart-height);
}