: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 20px; 
  text-align: center; 
  white-space: nowrap;          /* 折り返し禁止 */
  overflow: hidden;             /* はみ出した分を隠す（必要なければ消してOK） */
  text-overflow: ellipsis;      /* 末尾を「…」にする（いらなければ消す） */
  font-size: 26px;
  font-weight:600;
}

/* 期間フォームの軽い整形 */
.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{
display: flex;
  flex-direction: column; /* 中身を縦並びにする */
  width: fit-content;     /* コンテンツに合わせて幅を縮める */
  margin-left: auto;
  /* margin: 10px 0 6px;
  padding: 8px 12px; */
  color: #333131;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  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:16px; font-weight:500; }
.rev-title .t2 { font-size:16px; font-weight:500; }
@media (max-width: 760px) {
  .rev-title {
    white-space: normal;          /* スマホでは改行を許可 */
    overflow-wrap: anywhere;      /* 長い語/括弧内がはみ出さないよう保険 */
    word-break: normal;
  }
  .rev-title .t1 { font-size:13px; font-weight:500; }
  .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;
  }
}