/* ========= 基本トークン ========= */
:root{
  --container-max:1280px;
  --font-sans: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;




  --c-bg:#fff; --c-border:#e5e7eb; --c-text:#111827;
  --shadow-lg:0 6px 20px rgba(17,24,39,.06);

  --chart-border-radius:0;   /* 柱や点の角丸 */
  --tbl-max:1350px;          /* 表の最大幅（PHPから変わるなら :root をインラインで上書き可） */

  /* Highchartsの流体フォント（PC基準） */
  --hc-fs-axis:   clamp(12px, 1.4vw, 16px);
  --hc-fs-legend: clamp(12px, 1.4vw, 16px);
  --hc-fs-title:  clamp(14px, 1.6vw, 18px);
  --hc-fs-tip:    clamp(12px, 1.6vw, 16px);
}

/* ========= ベース ========= */
html{ font-size:62.5%; }
body{ font-size:16px; font-family:var(--font-sans); color:var(--c-text); }
h1{ font-size:2.0rem; margin:0 0 8px; } /* 2.0rem ≒ 20px（html:62.5% の場合） */
/*---251219木下---*/
h1{font-family:"BIZ UDゴシック";font-size:2.0rem;}


html, body{ overflow-x:hidden; }        /* ページ横はみ出し防止 */

/* ========= ラッパ/グリッド ========= */
.container{ max-width:var(--container-max); margin:0 auto; padding:0 16px; }

.charts-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(280px, 1fr));
  gap:16px;
  margin:6px 0 24px;
  overflow-x:hidden;
}
@media (max-width:1200px){
  .charts-row{ grid-template-columns:repeat(2, minmax(280px,1fr)); }
}
@media (max-width:760px){
  .charts-row{ grid-template-columns:1fr !important; }
}

/* ========= カード/見出し/操作 ========= */
.chart-card{
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:0;
  box-shadow:var(--shadow-lg);
  padding:12px 14px;
  min-width:0;
  overflow-x:hidden;
}
.chart-title{
  display:flex; 
  justify-content:center; 
  align-items:center; 
  text-align:center;
  margin:6px 0 6px;
  white-space: nowrap;          /* 折り返し禁止 */
  overflow: hidden;             /* はみ出した分を隠す（必要なければ消してOK） */
  text-overflow: ellipsis;      /* 末尾を「…」にする（いらなければ消す） */
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight:600;

/*---木下251219---*/
font-family:"BIZ UDゴシック";
  font-size: clamp(16px, 2.2vw, 20px);
}
@media (max-width:760px){
  .chart-title{ 
    margin:6px 0 8px; 
    font-size: clamp(12px, 3.5vw, 16px);
  }
}

/* 範囲指定UI（任意で使う場合） */
.chart-card .chart-overlay{
  position:static !important;
  display:flex; justify-content:center; align-items:center;
  gap:8px; margin:20px auto; padding:0; background:transparent;
  border:none; box-shadow:none; width:100%;
}
.chart-card .chart-overlay label{ font-size:20px; color:#6b7280; }
.chart-card .chart-overlay select{ min-width:84px; font-size:20px; padding:4px 6px; }
/*---木下251219---*/
.chart-card .chart-overlay select{ min-width:84px; font-size:16px; padding:4px 6px; }
@media (max-width:760px){
  .chart-card .chart-overlay label,
  .chart-card .chart-overlay select{ font-size:13px; }
}

/* ========= Highcharts 共通 ========= */
.highcharts-container{ font-family:var(--font-sans) !important; }
.highcharts-point{ rx:var(--chart-border-radius) !important; ry:var(--chart-border-radius) !important; }
.highcharts-legend-item text{ fill:#374151 !important; font-weight:500; }

/* 幅フィット（容器/内部SVGとも横幅100%） */
.chart-card > div[id^="chart-"],
.chart-card .highcharts-container,
.chart-card svg{
  width:100% !important;
  max-width:100% !important;
}

/* グラフ容器の高さ（PC） */
#chart-pie, #chart-amount, #chart-percent{ height:500px; }

/* Highchartsのテキスト（軸/凡例/データラベル/軸タイトル） */
.highcharts-axis-labels text{ font-size:var(--hc-fs-axis) !important; fill:#6b7280; }
.highcharts-legend-item text{ font-size:var(--hc-fs-legend) !important; }
.highcharts-data-label text{ font-size:var(--hc-fs-axis) !important; }

/*---251219木下---*/
.highcharts-data-label text{ font-size:var(--hc-fs-axis) !important;font-family:"BIZ UDゴシック";font-weight:normal;}

.highcharts-axis-title,
.highcharts-axis-title text,
.highcharts-axis-title tspan{
  font-size:var(--hc-fs-title) !important; font-weight:600; fill:#6b7280;
}

/* HighchartsのHTMLツールチップ（JS側で className:'hc-tip' を付ける想定） */
.hc-tip{ color:#fff !important; }
.hc-tip > span{
  font:500 var(--hc-fs-tip)/1.4 var(--font-sans);
  background:rgba(11,83,229,.92);
  padding:8px 10px; border-radius:0; box-shadow:var(--shadow-lg);
}
@media (max-width:760px){
  .hc-tip > span{ padding:6px 8px; }
}
/* 表とグラフの間の見出し */
.rev-title{
  margin: 10px 0 6px;
  padding: 8px 12px;
  color: #333131;
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  letter-spacing: .02em;
}
.rev-title .t1{ font-size:20px; font-weight:500; }
.rev-title .t2{ font-size:20px; font-weight:500; }

/*---木下251219---*/
.rev-title .t1{ font-size:14px; font-weight:500; }
.rev-title .t2{ font-size:14px; font-weight:500; }



@media (max-width:760px){
  .rev-title .t1{ font-size:13px; }
  .rev-title .t2{ font-size:13px; }
}

/* ========= スマホ最適化（文字＆高さ） ========= */
@media (max-width:760px){
  /* Highchartsの文字をさらに小さく */
  :root{
    --hc-fs-axis:11px;
    --hc-fs-title:12px;
    --hc-fs-legend:11px;
    --hc-fs-tip:12px;
  }

  /* ★スマホは3グラフの高さを低く（最終勝ち） */
  #chart-pie, #chart-amount, #chart-percent{
    height:260px !important;   /* お好みで 220–300px 程度に */
  }
  /* Highcharts 内部も容器高さにフィット */
  #chart-pie .highcharts-container,
  #chart-amount .highcharts-container,
  #chart-percent .highcharts-container,
  #chart-pie svg,
  #chart-amount svg,
  #chart-percent svg{
    height:100% !important;
  }
}

/* さらに狭い端末向け（任意） */
@media (max-width:360px){
  :root{
    --hc-fs-axis:10px; --hc-fs-title:11px; --hc-fs-legend:10px; --hc-fs-tip:11px;
  }
}