/* =========================
   共通トークン（左右を揃える用）
   ========================= */
:root{
  --overlay-top: 8px;      /* オーバーレイ基準の上端（初期値） */
  --title-size: 20px;      /* 見出しフォントサイズ（左右共通） */
  --ctrl-gap:   20px;       /* 見出しと年UIの縦間隔（左右共通） */

  /* Highcharts font (CSS only / responsive) */
  --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-font-base:  clamp(11px, 1.0vw, 16px);
  --hc-font-axis:  clamp(11px, 0.95vw, 15px);
  --hc-font-axis-title: clamp(12px, 1.05vw, 16px);
  --hc-font-legend: clamp(11px, 0.95vw, 15px);
  --hc-font-tooltip: clamp(11px, 0.95vw, 15px);
  --hc-font-title: clamp(14px, 1.35vw, 20px);
  --hc-font-pie-name: clamp(11px, 1.0vw, 15px);
  --hc-font-pie-perc: clamp(14px, 1.5vw, 22px);

}

/* =========================
   地図
   ========================= */
#jpmap { height: 900px; }
#jpmap .leaflet-interactive { cursor: pointer; }
.leaflet-tooltip.port-tip{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  padding: 6px 10px;
}

/* =========================
   ラッパー & 戻るボタン
   ========================= */
#port-chart-wrap { margin: 16px auto; }
#btnBackToMap{
  padding: 6px 10px;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #f7f7f7;
  cursor: pointer;
}
#btnBackToMap:hover{ background:#eee; }

/* =========================
   2カラム 50% / 50%
   ========================= */
#port-charts{
  display:flex;
  gap:16px;
  align-items:stretch;
}
#port-charts .chart-item{
  flex:1 1 0;
  min-width:0;
  height:640px; /* 中の Highcharts も 640px に合わせる */
}

/* 折れ線＋棒の箱 */
#port-chart-box{ position:relative; }
#port-chart{ height:640px; }

/* 円グラフの箱 */
#port-pie-box{ position:relative; }
#port-pie{ height:640px; }

/* 狭い画面では縦並びに */
@media (max-width: 1100px){
  #port-charts{ flex-direction: column; }
  /* #port-charts .chart-item{ height:520px; } */
  /* #port-chart, #port-pie{ height:520px; } */
}

/* =========================
   左：折れ線＋棒のオーバーレイ
   ========================= */
#chart-overlay{
  position:absolute; left:0; right:0; top: var(--overlay-top);
  display:grid;
  grid-template-columns: 1fr auto 1fr;   /* 左：チェック / 中央：見出し+年範囲 / 右：空 */
  align-items:center;
  z-index:2;
  pointer-events:none; /* 全体は透過、必要な要素だけ有効化 */
}
#chart-overlay .overlay-checkbox{
  grid-column:2; 
  justify-self:center; 
  margin-top: 20px;
  font-size:16px;
  font-weight:600;
  color:#333;
  pointer-events:auto;
}
#chart-overlay .overlay-center{
  grid-column:2; justify-self:center;
  display:flex; flex-direction:column; align-items:center; gap: var(--ctrl-gap);
  pointer-events:auto;
}

/* =========================
   右：円グラフのオーバーレイ（初期位置）
   ＊最終位置は JS の positionPieOverlay() で調整
   ========================= */
#pie-overlay{
  position:absolute; left:0; right:0; top: var(--overlay-top);
  display:flex; justify-content:center; align-items:flex-start;
  z-index:2; pointer-events:none;
}
#pie-overlay .overlay-center{
  display:flex; flex-direction:column; align-items:center; gap: var(--ctrl-gap);
  pointer-events:auto;
}

/* =========================
   見出しと年UI（左右共通の見た目）
   ========================= */
.chart-title{ 
  font-size: var(--title-size); 
  font-weight:700; 
  margin-top: 20px;
}
.chart-range, .pie-year{ display:flex; gap:8px; align-items:center; }
.chart-range label, .pie-year label{ display:inline-flex; align-items:center; font-size:12px; }

/* =========================
   Highcharts フォント（CSSで一元管理 / レスポンシブ）
   ========================= */
/* SVG全体（Highchartsが inline style を付けてもCSSで上書きする） */
#port-chart, #port-pie{
  font-family: var(--hc-font-family);
}
#port-chart .highcharts-root,
#port-pie .highcharts-root,
#port-chart .highcharts-root text,
#port-pie .highcharts-root text{
  font-family: var(--hc-font-family) !important;
  font-size: var(--hc-font-base) !important;
}

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

/* 軸 */
#port-chart .highcharts-axis-labels text,
#port-pie .highcharts-axis-labels text{
  font-size: var(--hc-font-axis) !important;
}
#port-chart .highcharts-axis-title,
#port-pie .highcharts-axis-title{
  font-size: var(--hc-font-axis-title) !important;
}

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

/* データラベル */
#port-chart .highcharts-data-label text,
#port-pie .highcharts-data-label text{
  font-size: var(--hc-font-base) !important;
}

/* ツールチップ（SVG） */
#port-chart .highcharts-tooltip text,
#port-pie .highcharts-tooltip text{
  font-size: var(--hc-font-tooltip) !important;
}
/* ツールチップ（useHTMLの場合） */
.highcharts-tooltip,
.highcharts-tooltip span,
.highcharts-tooltip table,
.highcharts-tooltip td,
.highcharts-tooltip th{
  font-family: var(--hc-font-family) !important;
  font-size: var(--hc-font-tooltip) !important;
}

/* 円グラフのデータラベル（名前＋％） */
#port-pie .pie-dl{ text-align:center; line-height:1.25; }
#port-pie .pie-dl .pie-name{ font-size: var(--hc-font-pie-name); font-weight:600; }
#port-pie .pie-dl .pie-perc{ font-size: var(--hc-font-pie-perc); font-weight:700; } /* ％を大きく */

/* 備考文字 */
#port-chart-note{ text-align:right; color:#666; font-size:12px; margin-top:6px; }

/* ヘルパ */
.w-90 { width: 90%; margin-left:auto; margin-right:auto; }
/* === グラフ全体ヘッダ === */
.rev-head{
  background:#1f2937;   /* ダーク（Tailwindのgray-800相当） */
  color:#fff;
  padding:10px 12px;
  margin:0 0 12px 0;
}
.rev-head #gh-title{
  font-size:24px;
  font-weight:700;
  line-height:1.4;
}
.rev-head #gh-note{
  font-size:20px;
  line-height:1.4;
  opacity:0.9;
  margin-top:2px;
}
.chart-explanation{
  text-align:left;
  font-size:20px;
  color:#db0f0f;
  margin-bottom:8px;
}
.rev-title{
  flex-direction: column; /* 中身を縦並びにする */
  width: fit-content;     /* コンテンツに合わせて幅を縮める */
  margin-left: auto;
  color: #333131;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  letter-spacing: .02em;
}
.rev-title .t1{ font-size:20px; font-weight:500; }
.rev-title .t2{ font-size:20px; font-weight:500; }
@media (max-width:760px){
  .rev-title .t1{ font-size:13px; }
  .rev-title .t2{ font-size:13px; }
}

/* 選択リスト（棒グラフ＝.chart-range、円グラフ＝.pie-year）共通 */
.chart-range select,
.pie-year select {
  font-size: 20px;       /* ボックス内の文字サイズ */
  line-height: 1.2;
  padding: 6px 10px;     /* ボックスの“高さ/横幅感” */
  min-width: 7.5em;      /* 「2025年」などが収まる幅 */
  height: 40px;          /* 明示しておくと崩れにくい */
  border: 1px solid #bbb;
  border-radius: 0;
  background: #fff;
  box-sizing: border-box;
}

/* ラベルとセレクトの間隔を少し広げたい場合（任意） */
.chart-range label,
.pie-year label {
  gap: 6px;
  font-size: 12px;       /* ラベル文字サイズ */
}

#chart-overlay .overlay-left{
  font-size: 18px;
}
/* 各グラフを四角いボックスで囲む（角丸なし） */
#port-chart-box,
#port-pie-box{
  position: relative;          /* 既存のオーバーレイの基準 */
  background: #fff;            /* 面色（必要に応じて変えてOK） */
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 0;            /* 角を丸くしない */
  box-shadow: none;            /* 影いらなければ none。薄い影なら下行を有効化 */
  /* box-shadow: 0 1px 3px rgba(0,0,0,.06); */

  /* 左右・下の内側余白。上は JS で動的に padding-top を確保するので触らない */
  padding: 0 12px 12px 12px;
  overflow: visible;           /* オーバーレイの要素がはみ出しても見えるように */
}
#cbOverlayStacked{
  transform: scale(1.6);        /* 好みで 1.4〜2.0 */
  transform-origin: left center;
  margin-right: 6px;            /* 文字との間隔 */
  accent-color: #0f59ff;        /* 任意：チェック色 */
}
/* タイトルの \n を改行として表示 */
#port-chart-title,
#pie-title{
  white-space: pre-line;
  display: inline-block;
  text-align: center;
}