/* charts.css
 * 統計チャート共通スタイル（数量グラフ disp_q / 金額グラフ disp_v）
 * 表本体のスタイルは tables.css 側に切り出し、ここではグラフ関連のみ扱います。
 */

:root{
  --grid-gap:16px; --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;
  --fs-sm:13px; --fs-lg:16px;
  --c-bg:#fff; --c-surface:#f7f7fb; --c-border:#e5e7eb; --c-text:#111827; --c-muted:#6b7280; --c-accent:#0f59ff;
  --shadow-lg:0 6px 20px rgba(17,24,39,.06);
  --chart-border-radius:0; --card-radius:0;
}

/* グラフ（表の下に1つ） */
.chart-box {
  margin: 16px 0;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  background: #fff;
  padding: 12px;
}
.chart-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }





/* 期間フォームの軽い整形 */
.range-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 12px;}
.range-form select, .range-form button { padding:2px 6px; }

/* グラフ下のクレジットを右端に寄せる */
.credits{
  margin-top: 8px;
  font-size: 16px;
  color: #666;
  text-align: right;       /* 右寄せ */
}
.credits .org{
  display: inline-block;   /* 幅ぴったりで右端に揃える */
  line-height: 1.6;
}
/* 表とグラフの間の見出し */
.rev-title{
  margin: 10px 0 6px;
  padding: 8px 12px;
  color: #333131;
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  letter-spacing: .02em;
}
/* PC/タブレットの既定（例：26pxのまま） */
#wrap > h1 {
  font-size: 26px;
  line-height: 1.25;
  margin: 12px 0 14px;
}

/* スマホだけ小さく（幅768px以下をスマホ基準とする例） */
@media (max-width: 768px) {
  #wrap > h1 {
    font-size: clamp(18px, 4.5vw, 24px);
    line-height: 1.25;
    margin: 8px 0 10px;
  }
}
/* PCは1行、スマホ幅では折り返し可 */
.rev-title { 
  white-space: nowrap;
  line-height: 1.6;
 }
.rev-title .t1 { font-size:24px; font-weight:700; }
.rev-title .t2 { font-size:20px; font-weight:500; }
@media (max-width: 760px) {
  .rev-title {
    white-space: normal;          /* スマホでは改行を許可 */
    overflow-wrap: anywhere;      /* 長い語/括弧内がはみ出さないよう保険 */
    word-break: normal;
  }
  .rev-title .t1 { font-size:16px; font-weight:700; }
  .rev-title .t2 { font-size:13px; font-weight:500; }
}
.highcharts-root { font-family: "Noto Sans JP", Meiryo, sans-serif; }
.highcharts-axis-labels text { font-size:18px; }
.highcharts-axis-title       { font-size:18px; font-weight:600; }
.highcharts-legend-item text { font-size:16px; font-weight:500;  }
.highcharts-legend-title     { font-size:16px; font-weight:600; }
.highcharts-tooltip text     { font-size: 14px; }
.chart-range-inline label {
  font-size: 20px;
  color: #6b7280;
}
.chart-range-inline select {
  min-width: 84px;
  font-size: 20px;
  padding: 4px 6px;
}
/* ==== グラフ内の範囲UI（中央） ==== */
.chart-range-inline{
  display:flex; justify-content:center; align-items:center;
  gap:8px; flex-wrap:wrap; margin:6px 0 10px;
}
.chart-range-inline label{ font-size:13px; }
.chart-range-inline select{ padding:2px 6px; }
.chart-range-inline .sep{ margin:0 2px; opacity:.7; }
.chart-range-inline select, .chart-range-inline button{ 
    font-size:20px; 
    padding:8px 10px; 
    border:1px solid #111827; 
    border-radius:0; 
    background:#fff; 
    cursor:pointer; 
}
/* --- グラフ専用スワイプ（スマホのみ） --- */
@media (max-width: 768px){
  .chart-title{ font-size:13px; }
  .highcharts-axis-labels text { font-size:14px; }
  .highcharts-axis-title       { font-size:14px; font-weight:600; }
  .highcharts-legend-item text { font-size:12px; }
  .highcharts-legend-title     { font-size:12px; font-weight:600; }
  .highcharts-tooltip text     { font-size: 12px; }
  .chart-range-inline label    { font-size: 14px; }
  .chart-scroll-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pinch-zoom;
  }
  /* data-max で指定（なければ 1000px） */
  .chart-scroll-wrap .chart-inner{ width: var(--chart-max, 1200px); }
  .chart-range-inline select {
    font-size: 13px;
    padding: 2px 3px;
  }
}

/* --- 金額グラフ用スタイル（disp_v.css 由来） --- */

/* ========= 基本トークン ========= */
: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;
  font-size:26px; font-weight:600;
}
/*---木下251219---*/
.chart-title{
font-family:"BIZ UDゴシック";font-size:20px; 
}




@media (max-width:760px){
  .chart-title{ margin:6px 0 8px; font-size:13px; }
}

/* 範囲指定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; }
.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 .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;
  }
}