@charset "UTF-8";
/* 過去の気象データ（/weather/forecast/{県}/past/ 配下）専用CSS
   サイト共通CSSと干渉しないよう、すべて .wx-past 配下にスコープする */

.wx-past{
  --wx-blue:#2b6fd6; --wx-blue-d:#1f56ab; --wx-ink:#1f2733; --wx-sub:#6b7684;
  --wx-line:#e6eaf0; --wx-bg:#f5f7fb; --wx-red:#e2574c;
  color:var(--wx-ink); line-height:1.6;
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.wx-past *{ box-sizing:border-box; }
.wx-past a{ color:var(--wx-blue); }

/* ページ内ツールバー */
.wx-past .wx-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--wx-line); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.wx-past .wx-toolbar .wx-tt{ font-weight:700; }
.wx-past .wx-toolbar .wx-pref{ color:var(--wx-sub); border-left:1px solid var(--wx-line); padding-left:12px; }
.wx-past .wx-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.wx-past .wx-btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border:1px solid var(--wx-line); border-radius:8px; background:#fff; color:var(--wx-ink);
  font-size:.85rem; cursor:pointer; text-decoration:none; }
.wx-past .wx-btn:hover{ border-color:var(--wx-blue); color:var(--wx-blue); }
.wx-past .wx-btn select{ border:none; background:transparent; font:inherit; color:inherit; cursor:pointer; outline:none; }
.wx-past .wx-dd{ position:relative; }
.wx-past .wx-dd[open] .wx-dd-menu{ display:block; }
.wx-past .wx-dd summary{ list-style:none; }
.wx-past .wx-dd summary::-webkit-details-marker{ display:none; }
.wx-past .wx-dd-menu{ display:none; position:absolute; right:0; top:110%; background:#fff;
  border:1px solid var(--wx-line); border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.08);
  padding:6px; min-width:190px; z-index:20; }
.wx-past .wx-dd-menu a{ display:block; padding:6px 10px; border-radius:6px; text-decoration:none; color:var(--wx-ink); font-size:.85rem; }
.wx-past .wx-dd-menu a:hover{ background:var(--wx-bg); }

/* 見出し下のリード文（H1はサイト標準 .type-page を使用） */
.wx-past .wx-lead{ margin:2px 0 16px; color:var(--wx-sub); font-size:.9rem; }

/* タブ */
.wx-past .wx-tabs{ display:flex; gap:22px; border-bottom:1px solid var(--wx-line); margin:0 0 18px; }
.wx-past .wx-tab{ padding:10px 2px; color:var(--wx-sub); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent; font-weight:600; font-size:.95rem; }
.wx-past .wx-tab.active{ color:var(--wx-blue); border-bottom-color:var(--wx-blue); }

/* KPI */
.wx-past .wx-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:18px; }
.wx-past .wx-kpi{ padding:6px 10px; text-align:center; background:#f5f7fb; }
.wx-past .wx-kpi-vrow{ display:flex; align-items:center; justify-content:center; gap:8px; margin:3px 0 2px; }
/* パターン2: 淡い背景カード（並び順 平均/最高/最低/降水/風/日照/湿度 に対応） */
.wx-past .wx-kpis .wx-kpi:nth-child(1){ background:#fff6e5; } /* 平均気温 */
.wx-past .wx-kpis .wx-kpi:nth-child(2){ background:#fdebe9; } /* 最高気温 */
.wx-past .wx-kpis .wx-kpi:nth-child(3){ background:#e9f1fc; } /* 最低気温 */
.wx-past .wx-kpis .wx-kpi:nth-child(4){ background:#e7effe; } /* 降水量 */
.wx-past .wx-kpis .wx-kpi:nth-child(5){ background:#e2f6ef; } /* 最大瞬間風速 */
.wx-past .wx-kpis .wx-kpi:nth-child(6){ background:#fef4dc; } /* 日照時間 */
.wx-past .wx-kpis .wx-kpi:nth-child(7){ background:#e1f5f9; } /* 平均湿度（日別のみ） */
/* 最高/最低気温カードの数値だけ色付け（単位はグレーのまま） */
.wx-past .wx-kpis .wx-kpi:nth-child(2) .val{ color:#FF0000; }
.wx-past .wx-kpis .wx-kpi:nth-child(3) .val{ color:#0096FF; }
.wx-past .wx-kpi-ico{ flex:0 0 30px; width:30px; height:30px; }
.wx-past .wx-kpi-ico svg{ width:30px; height:30px; display:block; }
.wx-past .wx-kpi-body{ min-width:0; }
.wx-past .wx-kpi .lbl{ font-size:.76rem; font-weight:bold; }
.wx-past .wx-kpi .val{ font-size:1.5rem; font-weight:700; margin:0; }
.wx-past .wx-kpi .val small{ font-size:.8rem; font-weight:600; color:var(--wx-sub); }
.wx-past .wx-kpi .sub{ font-size:.73rem; color:var(--wx-sub); }
/* スマホ: KPIカードの縦サイズを圧縮（基本ルールより後に置いて上書き） */
@media(max-width:560px){
  .wx-past .wx-kpis{ gap:6px; }
  .wx-past .wx-kpi{ padding:2px 6px; }
  .wx-past .wx-kpi-ico{ flex:0 0 12px; width:12px; height:12px; }
  .wx-past .wx-kpi-ico svg{ width:12px; height:12px; }
  .wx-past .wx-kpi-vrow{ gap:3px; margin:0; }
  .wx-past .wx-kpi .val{ font-size:.82rem; }
  .wx-past .wx-kpi .val small{ font-size:.55rem; }
  .wx-past .wx-kpi .lbl{ font-size:.6rem; line-height:1.05; }
  .wx-past .wx-kpi .sub{ font-size:.58rem; line-height:1.05; }
}
@media(max-width:1000px){ .wx-past .wx-kpis{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:560px){ .wx-past .wx-kpis{ grid-template-columns:repeat(2,1fr);} }
/* 日別ページは7枚 */
.wx-past .wx-kpis.seven{ grid-template-columns:repeat(7,1fr); }
@media(max-width:1000px){ .wx-past .wx-kpis.seven{ grid-template-columns:repeat(4,1fr);} }
@media(max-width:560px){ .wx-past .wx-kpis.seven{ grid-template-columns:repeat(2,1fr);} }
/* グループ見出し表（日別） */
.wx-past table th.grp{ text-align:center; border-bottom:1px solid #ccc; }
.wx-past table th.sub{ font-weight:600; font-size:.78rem; }
.wx-past th .wx-unit{ font-size:10px; color:var(--wx-sub); }
/* 日ごとの値テーブル: TH に縦罫線 */
.wx-past .wx-daily thead th{ border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; }
.wx-past table td.wx-wcell{ text-align:center; white-space:nowrap; }
/* 年/月/日付（先頭列）と詳細・風向列はセンター寄せ */
.wx-past td.y, .wx-past td.m, .wx-past td.date, .wx-past td.detail, .wx-past td.dir{ text-align:center; }
.wx-past .wx-wicon{ width:32px; height:auto; border:none; display:block; margin:0 auto; }
.wx-past .wx-wtext{ display:block; font-size:8px; color:#999; line-height:1.2; white-space:normal; max-width:6em; margin:0 auto; }
/* スマホでは天気テキストを非表示（PCのみ表示） */
@media(max-width:770px){ .wx-past .wx-wtext{ display:none; } }
/* 祝日名（日別表） */
.wx-past .wx-holiday{ display:block; font-size:.7rem; color:#c0392b; line-height:1.2; white-space:nowrap; }

/* 表＋グラフの2カラム */
.wx-past .wx-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; align-items:start; }
@media(max-width:900px){ .wx-past .wx-grid{ grid-template-columns:1fr; } }
.wx-past .wx-card h2{ margin:0 0 10px; }
.wx-past .wx-tablewrap{ overflow-x:auto; }
.wx-past .wx-tablewrap.scroll{ max-height:560px; overflow-y:auto; }

/* テーブル（サイト共通CSSを上書き） */
.wx-past table{ border-collapse:collapse; width:100%; font-size:.86rem; background:#fff; }
.wx-past th,.wx-past td{ padding:8px 10px; border-bottom:1px solid #ccc; text-align:right; white-space:nowrap; }
.wx-past th{ background:#fff; color:var(--wx-ink); font-weight:600; position:sticky; top:0; text-align:center; vertical-align:middle; border-bottom:2px solid #2c7eb9; line-height:1.3; }
.wx-past td.y a,.wx-past td.m a{ font-weight:700; text-decoration:none; }
.wx-past td.wx{ white-space:normal; min-width:8em; }
.wx-past .tmax{ color:#FF0000; } .wx-past .tmin{ color:#0096FF; }
.wx-past tr.nodata td{ color:#bbb; }
/* ゼブラ（1行おきに薄いグレー） */
.wx-past tbody tr:nth-child(even){ background:#f6f7f9; }
/* 週末/祝日はゼブラより優先（並び順で上書き） */
.wx-past tbody tr.list_date0{ background:#ffdddd; }
.wx-past tbody tr.list_date6{ background:#e9f4fe; }
/* 行ホバー: #2c7eb9 の薄い青（最優先） */
.wx-past tbody tr{ transition:background-color .12s; }
.wx-past tbody tr:hover{ background:rgba(44,126,185,0.12); }
.wx-past .detail a{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  text-decoration:none; font-size:.8rem; font-weight:bold; }

/* グラフ枠 */
.wx-past .wx-chart{ width:100%; height:250px; }
.wx-past .wx-chart.lg{ height:440px; }
/* 2カラムのグラフ並び（年ページ） */
.wx-past .wx-charts2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
@media(max-width:820px){ .wx-past .wx-charts2{ grid-template-columns:1fr; } }
/* 平年差の色 */
.wx-past .diff-pos{ color:var(--wx-red); } .wx-past .diff-neg{ color:var(--wx-blue); }

/* 地点切替（日別/年ページ） */
.wx-past .wx-stations{ margin:.6rem 0 1rem; font-size:.9rem; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.wx-past .wx-stations a{ display:inline-block; padding:3px 10px; border:1px solid var(--wx-line);
  border-radius:6px; text-decoration:none; color:var(--wx-blue); }
.wx-past .wx-stations a.current{ background:var(--wx-blue); color:#fff; border-color:var(--wx-blue); }
.wx-past .wx-stations a.nodata{ color:#aaa; border-style:dashed; }

/* 前後ナビ（月/年） */
.wx-past .wx-nav{ display:flex; align-items:center; gap:14px; margin:12px 0 18px; }
.wx-past .wx-nav a,.wx-past .wx-nav span.dis{ padding:5px 14px; border:1px solid #ccc;
  border-radius:8px; text-decoration:none; background:#fff; font-weight:bold; }
.wx-past .wx-nav span.dis{ color:#bbb; }
.wx-past .wx-nav .cur{ font-weight:700; font-size:1.1rem; border:none; background:none; padding:0; }

/* 補足 */
.wx-past .wx-foot{ color:var(--wx-sub); font-size:.78rem; margin-top:16px; }
.wx-past .wx-notice{ background:#fff8e1; border:1px solid #ffe082; padding:1rem; border-radius:10px; }
.wx-past .wx-hidden{ display:none; }