/* charts.css
 * 木材及び木材製品グラフ用スタイル
 * - 表とグラフをブラウザ中央に配置（幅 1050px）
 * - グラフタイトルと年選択 UI を中央に
 */
.chart-wood-export-box {
    margin: 0 auto;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    background: #fff;
    padding: 12px;
     width: 1050px;
}
.chart-wood-export-note {
    margin:6px 0 6px;
    text-align: right;
    font-size: 14px;
    color: #666;
}

#wrap {
    width: 1050px;
    margin: 0 auto;      /* ページ中央に */
}

/* 表も中央に（幅 1050px） */
#wrap table {
    width: 1050px;
    margin: 0 auto;
}

/* グラフ全体ブロック（タイトル + 年選択 + チャート） */
#chart-wood-export-block {
    width: 100%;
    margin: 16px auto 32px;
    text-align: center;
}

/* タイトル（チャート外の見出し） */
.chart-wood-export-title {
  display:flex; justify-content:center; align-items:center; text-align:center;
  margin:6px 0 6px;
  font-size:26px; font-weight:600;
}
@media (max-width: 760px) {
  .chart-wood-export-title {
    white-space: normal;          /* スマホでは改行を許可 */
    overflow-wrap: anywhere;      /* 長い語/括弧内がはみ出さないよう保険 */
    word-break: normal;
  }
  .chart-wood-export-title { margin:6px 0 8px; font-size:13px; }
}

/* From年 / To年 セレクタ */
.chart-wood-export-controls {
    /* margin-bottom: 8px;
    font-size: 13px; */
    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-wood-export-controls select {
    min-width: 84px;
    font-size: 20px;
    padding: 4px 6px;
}

/* 実際に Highcharts が描画されるコンテナ */
#chart-wood-export {
    width: 1050px;
    margin: 0 auto;
    display: block;
}

/* Highcharts のフォントをページに合わせる */
.highcharts-root {
    font-family: inherit;
}

/* クレジットは非表示（ライセンス的に問題なければ） */
.highcharts-credits {
    display: none !important;
}

/* =========================================================
   Highcharts fonts (CSS only) - Responsive
   ---------------------------------------------------------
   - JS 側では fontFamily/fontSize/fontWeight を持たせず、
     ここで一括指定する想定
   - SVG の inline style を上書きするため !important を使用
   ========================================================= */
:root{
  --hc-font-family: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --hc-title-size:     clamp(14px, 1.30vw, 22px);
  --hc-subtitle-size:  clamp(12px, 1.15vw, 18px);
  --hc-axis-size:      clamp(10px, 1.05vw, 18px);
  --hc-axis-title-size:clamp(11px, 1.10vw, 18px);
  --hc-legend-size:    clamp(10px, 1.00vw, 16px);
  --hc-tooltip-size:   clamp(11px, 0.95vw, 14px);
  --hc-datalabel-size: clamp(10px, 0.95vw, 13px);
}

.highcharts-root,
.highcharts-root text{
  font-family: var(--hc-font-family) !important;
}

.highcharts-title,
.highcharts-title text,
.highcharts-title tspan{
  font-size: var(--hc-title-size) !important;
  font-weight: 700 !important;
}

.highcharts-subtitle,
.highcharts-subtitle text,
.highcharts-subtitle tspan{
  font-size: var(--hc-subtitle-size) !important;
  font-weight: 600 !important;
}

.highcharts-axis-labels text{
  font-size: var(--hc-axis-size) !important;
  font-weight: 500 !important;
}

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

.highcharts-legend-item text{
  font-size: var(--hc-legend-size) !important;
  font-weight: 500 !important;
}

.highcharts-legend-title{
  font-size: var(--hc-legend-size) !important;
  font-weight: 600 !important;
}

.highcharts-tooltip text{
  font-size: var(--hc-tooltip-size) !important;
}

/* HTML tooltip（useHTML: true のとき） */
.hc-tip{
  font-family: var(--hc-font-family) !important;
  font-size: var(--hc-tooltip-size) !important;
  line-height: 1.35;
}

.highcharts-data-label text,
.highcharts-data-labels text{
  font-size: var(--hc-datalabel-size) !important;
  font-weight: 600 !important;
}