html{font-size:62.5%;}
body{font-size:16px;}
h1{font-size:26px;font-size:2.0rem;margin:0 0 8px;}
table,th,td{border:solid 1px #666;border-collapse:collapse;}
caption{text-align:right;color:#999;font-size:16px;}
table{width:100%; margin:0 auto; table-layout:fixed;}
.tbl-wrap table{ max-width: var(--tbl-max, 1350px); }
th,td{padding:0.25em;}
td{text-align:right;}
td span{font-size:16px;color:#999;display:block;}
.tbl-wrap tbody td { font-size: 16px; }
.tbl-wrap tbody td > span { font-size: 14px; color:#999; }
/* ===== Highcharts を外部CSSで統一制御 ===== */

/* 全体フォント */
:root{
  --hc-font: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --hc-title: 16px;           /* タイトル */
  --hc-subtitle: 20px;        /* サブタイトル */
  --hc-axis: 12px;            /* 軸ラベル */
  --hc-axistitle: 14px;       /* 軸タイトル */
  --hc-datalabel: 16px;       /* データラベル（円グラフのラベル等） */
  --hc-legend: 16px;          /* 凡例 */
  --hc-tooltip: 14px;         /* ツールチップ */
}
.highcharts-root{ font-family: var(--hc-font) !important; }

/* タイトル・サブタイトル */
.highcharts-title{ font-size: var(--hc-title) !important; font-weight:700 !important; }
.highcharts-subtitle{ font-size: var(--hc-subtitle) !important; }

/* 軸タイトル・軸ラベル（棒/折れ線に備えて） */
.highcharts-axis-title{ font-size: var(--hc-axistitle) !important; font-weight:700 !important; }
.highcharts-axis-labels text{ font-size: var(--hc-axis) !important; }

/* データラベル（円グラフの外側ラベルなど） */
.highcharts-data-label text{ font-size: var(--hc-datalabel) !important; font-weight:600 !important; }
.highcharts-data-label tspan{ font-size: inherit !important; }

/* 凡例 */
.highcharts-legend-item text{ font-size: var(--hc-legend) !important; }

/* ツールチップ（SVG/HTML双方に対応） */
.highcharts-tooltip text{ font-size: var(--hc-tooltip) !important; }
.highcharts-tooltip span{ font-size: var(--hc-tooltip) !important; }

.chart-box{ width:100%; max-width:1350px; margin:12px auto; }
.chart-card .chart-title{
  margin:4px 0 6px;
  font-size:24px;
  font-weight: 700;
  text-align:center;   /* ← 中央揃え */
}
.chart-card .chart-subtitle{
  margin:4px 0 6px;
  font-size:20px;
  color: #666;
  text-align:center;   /* ← 中央揃え */
}

/* スマホ時の縮小（必要に応じて値は調整） */
@media (max-width:768px){
  :root{
    --hc-title: 14px;
    --hc-subtitle: 18px;
    --hc-axis: 11px;
    --hc-axistitle: 13px;
    --hc-datalabel: 12px;
    --hc-legend: 12px;
    --hc-tooltip: 12px;
  }
}

@media (max-width:768px){ 
  /* サブタイトルとグラフの間を詰める */
  .chart-card .chart-subtitle{
    margin: 2px 0 2px !important;  /* 上下を小さく */
    line-height: 1.2 !important;
  }
}
/* 角が四角のボックス */
.chart-card{
  border:1px solid var(--c-border, #e5e7eb);
  border-radius:0;
  background:#fff;
  padding:16px;
  margin:0; /* 必要なら間隔は .chart-grid の gap で調整 */
  min-width:0;
}
.chart-grid{ 
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:16px; 
  width:100%; 
  max-width:1350px; 
  margin:12px auto; 
}

.table-swipe{ width:100%; }
.table-title {font-size: 26px; font-weight: 700; }
@media (max-width:768px){
   /* ページ全体は横に動かさない。スクロールは表ラッパに集約 */
  html, body { overflow-x: hidden; }
  .table-title {font-size: 18px;}
  .tbl-wrap tbody td { font-size: 14px; }
  .tbl-wrap tbody td > span { font-size: 12px; }
  /* 表ラッパだけ横スク有効（慣性あり＆スクロール連鎖を止める） */
  .table-swipe{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  /* 表自体は“中身の幅”で描画して必ずオーバーフローさせる */
  .table-swipe > table{
    width: max-content !important;
    max-width: none !important;
    table-layout: auto !important;
    margin: 0; /* はみ出し時の中央寄せを避ける */
  }
  th {font-size:14px}
  /* グラフは縦1列・幅100%のまま */
  .chart-grid{ grid-template-columns: 1fr !important; }
  .chart-box{ max-width: 100%; margin: 12px 0; }
  .chart-card{ padding:12px; }
  .chart-card .chart-subtitle{
    font-size:18px;
    font-weight: 700;
  }
}