/* ヒーローを#page(max-width:1100px/overflow:hidden)の外側いっぱいに広げるための上書き */
#page { overflow: visible; }
html { overflow-x: hidden; }
.rk-wrap { --rk-blue: #2c7eb9; --rk-red: #e5321e; --rk-bg: #f4f8fc; font-feature-settings: "palt"; max-width: 1200px; margin: 0 auto; }
.rk-wrap *, .rk-hero, .rk-hero * { box-sizing: border-box; }
.rk-hero { --rk-blue: #2c7eb9; font-feature-settings: "palt"; }
.rk-wrap a.rk-more { color: var(--rk-blue); font-size: 13px; font-weight: bold; text-decoration: none; }
.rk-hero { position: relative; width: 100vw; max-width: 100vw; margin: -25px 0 1px calc(50% - 50vw); padding: 26px 0 34px; background: linear-gradient(rgba(8,40,90,0.22), rgba(8,40,90,0.04)), url('/weather/amedas/ranking_hero.webp') center 60% / cover no-repeat, linear-gradient(125deg, #a6dcff 0%, #e8f7ff 52%, #8dccff 100%); }
.rk-hero-inner { width: min(1100px, calc(100% - 40px)); margin-inline: auto; position: relative; z-index: 1; }
.rk-title-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; margin: 0 0 14px; }
.rk-eyebrow { margin: 0 0 2px; color: #eaf6ff; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-shadow: 0 1px 4px rgba(8,40,90,0.6); }
.rk-title-row h1 { margin: 0; color: #ffffff; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.25; letter-spacing: 0.02em; text-shadow: 0 2px 8px rgba(8,40,90,0.55); }
.rk-title-row h1 small { font-size: 0.58em; }
.rk-title-sub { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: #f2f9ff; text-shadow: 0 1px 5px rgba(8,40,90,0.55); }
.rk-upd { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.88); color: #16324f; font-size: 12.5px; font-weight: bold; }
.rk-upd svg { width: 15px; height: 15px; color: var(--rk-blue); flex-shrink: 0; }
.rk-sumbox { background: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.95); border-radius: 18px; padding: 14px 16px 16px; box-shadow: 0 8px 20px rgba(30,80,130,0.14); }
.rk-sumbox-title { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: #16324f; }
.rk-stats6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.rk-scard { padding: 10px 10px 12px; border: 1px solid #e2ecf5; border-radius: 12px; background: #fff; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; text-align: center; }
.rk-scard:hover { box-shadow: 0 4px 12px rgba(30,80,130,0.18); transform: translateY(-1px); }
.rk-scard .rk-scard-label { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; font-size: 11px; font-weight: 800; color: #33475b; }
.rk-scard .rk-scard-label small { font-size: 9px; }
.rk-scard .rk-scard-label .rk-ico-s { width: 18px; height: 18px; margin-right: 0; vertical-align: 0; }
.rk-scard .rk-scard-value { display: block; margin: 4px 0 2px; font-size: 23px; font-weight: bold; line-height: 1.15; letter-spacing: -0.02em; }
.rk-scard .rk-scard-value small { padding-left: 2px; font-size: 12px; letter-spacing: 0; }
.rk-scard .rk-scard-sub { font-size: 9.5px; line-height: 1.5; color: #5c7188; }
/* 要素タブ（白背景・紺文字。アクティブは紺背景・白文字） */
.rk-eltabs { display: flex; margin-bottom: 16px; border: 1px solid #1c5c96; overflow: hidden; background: #fff; box-shadow: 0 3px 10px rgba(20,60,110,0.12); }
.rk-eltabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 4px; border: none; border-bottom: 3px solid transparent; background: none; color: #1c5c96; font-size: 14px; font-weight: bold; cursor: pointer; }
.rk-eltabs button .rk-eltab-ico { display: inline-flex; width: 19px; height: 19px; flex-shrink: 0; }
.rk-eltabs button .rk-eltab-ico svg { width: 100%; height: 100%; }
.rk-eltabs button.on { background: #1c5c96; color: #fff; }
.rk-eltabs button + button { border-left: 1px solid #1c5c96; }  /* タブ間の青い縦線 */
/* タブパネル */
.rk-pane { display: none; }
.rk-pane.on { display: block; }
.rk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.rk-card { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; min-height: 100px; padding: 11px 13px; border: 1px solid #e2ecf5; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(30,80,130,0.10); }
.rk-card .rk-ico { margin: 0 auto; }
.rk-ico { display: inline-flex; width: 36px; height: 36px; flex-shrink: 0; }
.rk-ico svg { width: 100%; height: 100%; }
.rk-ico-s { display: inline-flex; width: 22px; height: 22px; margin-right: 6px; vertical-align: -3px; flex-shrink: 0; }
.rk-ico-s svg { width: 100%; height: 100%; }
.rk-card .rk-card-label { margin: 0; font-size: 12px; font-weight: 800; color: #33475b; }
.rk-card .rk-card-label small { font-size: 9.5px; }
.rk-card .rk-card-value { display: block; margin: 1px 0; font-size: 26px; font-weight: bold; line-height: 1.15; letter-spacing: -0.02em; color: #061d3b; }
.rk-card .rk-card-value small { padding-left: 2px; font-size: 14px; letter-spacing: 0; }
.rk-card .rk-card-sub { font-size: 10px; line-height: 1.45; }
.rk-card.hi .rk-card-value { color: #d32f2f; }
.rk-card.lo .rk-card-value { color: #1565c0; }
.rk-card.dry .rk-card-value, .rk-card.sn .rk-card-value { color: #ef6c00; }
.rk-panel { background: #fff; padding: 0 14px 14px; margin-bottom: 14px; overflow: hidden; }
.rk-panel h2:first-child { margin-left: -14px; margin-right: -14px; }
.rk-panel h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 8px 1.8%; font-size: 18px; font-weight: 800; color: #FFF; background-color: var(--rk-blue); border: none; border-left: none; line-height: 1.35; }
.rk-panel h2 .rk-h2-ico { display: inline-flex; width: 23px; height: 23px; flex-shrink: 0; color: #FFF; }
.rk-panel h2 .rk-h2-ico svg { width: 100%; height: 100%; }
.rk-panel h2 .rk-h2-time { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 11px; border: 1px solid #dfe7ee; border-radius: 6px; background: #fff; color: #333; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.rk-panel h2 .rk-h2-time svg { width: 15px; height: 15px; color: var(--rk-blue); flex-shrink: 0; }
.rk-maprow { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.rk-legend-bar { width: 50%; height: 12px; border-radius: 6px; margin: 4px 0 2px; }
.rk-legend-ticks { display: flex; justify-content: space-between; width: 50%; font-size: 10px; color: #6b7f92; margin-bottom: 6px; }
.rk-leaflet { width: 100%; height: 480px; background: #fff; border: 1px solid #e2ecf5; border-radius: 8px; }
.rk-leaflet .sq-pin-box { width: 100%; height: 100%; background: rgba(51, 51, 51, 0.5); }
.rk-map-hint { font-size: 11px; color: #6b7f92; margin: 6px 0 0; }
.rk-popup { text-align: center; }
.rk-popup strong { font-size: 12.5px; }
.rk-popup-temp { font-size: 20px; font-weight: bold; line-height: 1.3; }
.rk-popup-alt { font-size: 11px; color: #7a8fa5; margin-top: 1px; }
.rk-top10 { margin-bottom: 16px; }
.rk-top10 h3 { display: flex; align-items: center; margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.rk-top10 .rk-more { display: inline-block; margin-top: 4px; }
/* 11〜20位はSPの「もっと見る」でのみ展開（PCは非表示のまま） */
.rk-bars li.rk-ext { display: none; }
.rk-bars.rk-expanded li.rk-ext { display: grid; }
.rk-showmore { display: none; width: 100%; margin-top: 8px; padding: 9px; border: 1px solid #cfe0ee; border-radius: 8px; background: #f4f8fc; color: var(--rk-blue); font-size: 13px; font-weight: bold; cursor: pointer; }
.rk-tabs { display: inline-flex; background: #edf3f9; border-radius: 8px; padding: 3px; gap: 2px; margin-bottom: 10px; }
.rk-tabs button { border: none; background: none; border-radius: 6px; padding: 5px 14px; font-size: 12px; cursor: pointer; color: #46627e; }
.rk-tabs button.on { background: var(--rk-blue); color: #fff; font-weight: bold; }
.rk-chips { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.rk-chip { border-radius: 10px; padding: 10px 4px; text-align: center; border: 1px solid rgba(0,0,0,0.06); }
.rk-chip .rk-chip-name { display: block; font-size: 12px; font-weight: bold; color: #33475b; }
.rk-chip .rk-chip-val { display: block; font-size: 16px; font-weight: bold; margin-top: 2px; }
.rk-bars { list-style: none; margin: 0; padding: 0; }
.rk-bars li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: center; padding: 4px 0; font-size: 12px; }
.rk-bars .rk-rank { color: #8296a8; font-weight: bold; text-align: right; }
.rk-bars .rk-place { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.rk-bars .rk-place a { color: #1c5c96; text-decoration: none; }
.rk-bars .rk-place a:hover, .rk-bars .rk-place a:active { text-decoration: underline; }
.rk-bars .rk-place .rk-temp { font-size: 15px; font-weight: bold; flex-shrink: 0; }
.rk-bars .rk-place .rk-temp small { font-size: 10px; padding-left: 1px; }
.rk-bar-track { display: block; height: 8px; background: #eef3f8; border-radius: 4px; overflow: hidden; }
.rk-bar-fill { display: block; height: 8px; border-radius: 4px; }
.rk-chart-box { width: 100%; }
.rk-chart-box svg { width: 100%; height: auto; display: block; }
.rk-chart-legend { display: flex; gap: 14px; font-size: 11px; color: #46627e; margin-top: 6px; flex-wrap: wrap; }
.rk-chart-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.rk-chart-legend .lg-mx::before { background: #e5321e; }
.rk-chart-legend .lg-av::before { background: #43a047; }
.rk-chart-legend .lg-mn::before { background: #1e88e5; }
.rk-source { font-size: 12px; color: #6b7f92; line-height: 1.8; }
/* エリア別リンク（PC=地方見出し+全県一覧 / SP=地方タブ切替） */
.rk-al-pc { display: block; }
.rk-al-sp { display: none; }
.rk-al-row { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid #edf2f7; }
.rk-al-row:last-child { border-bottom: none; }
.rk-al-region { display: flex; align-items: center; padding: 10px 8px; font-size: 13px; font-weight: bold; color: #333; }
.rk-al-prefs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; align-items: center; }
.rk-al-prefs a { display: inline-block; padding: 7px 12px; border: 1px solid #cfe0ee; border-radius: 999px; background: #f6fafd; color: #1c5c96; font-size: 13px; text-decoration: none; }
.rk-al-prefs a:hover, .rk-al-prefs a:active { background: #1c5c96; color: #fff; border-color: #1c5c96; }
/* 表示中の都道府県（リンクなし・青塗り） */
.rk-al-prefs .rk-al-cur { display: inline-block; padding: 7px 12px; border: 1px solid #1c5c96; border-radius: 999px; background: #1c5c96; color: #fff; font-size: 13px; font-weight: bold; cursor: default; }
.rk-al-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.rk-al-tabs button { flex-shrink: 0; padding: 8px 16px; border: 1px solid #cfe0ee; border-radius: 999px; background: #fff; color: #1c5c96; font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.rk-al-tabs button.on { background: #1c5c96; color: #fff; border-color: #1c5c96; }
.rk-al-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.rk-al-body a { display: block; padding: 10px 4px; border: 1px solid #cfe0ee; border-radius: 8px; background: #f6fafd; color: #1c5c96; font-size: 13px; text-align: center; text-decoration: none; }
.rk-al-body a:hover, .rk-al-body a:active { background: #1c5c96; color: #fff; border-color: #1c5c96; }
.rk-al-body .rk-al-cur { display: block; padding: 10px 4px; border: 1px solid #1c5c96; border-radius: 8px; background: #1c5c96; color: #fff; font-size: 13px; font-weight: bold; text-align: center; cursor: default; }
/* 県内の観測点一覧 */
.rk-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.rk-plist a { display: block; padding: 9px 4px; border: 1px solid #cfe0ee; border-radius: 8px; background: #f6fafd; color: #1c5c96; font-size: 13px; text-align: center; text-decoration: none; }
.rk-plist a:hover, .rk-plist a:active { background: #1c5c96; color: #fff; border-color: #1c5c96; }
@media (max-width: 860px) {
  .rk-al-pc { display: none; }
  .rk-al-sp { display: block; }
  .rk-hero { padding: 14px 0 22px; }
  .rk-hero-inner { width: min(1100px, calc(100% - 24px)); }
  .rk-title-row { display: block; margin-bottom: 12px; }
  .rk-eyebrow { display: none; }
  .rk-title-row h1 { font-size: 27px; }
  .rk-title-sub { font-size: 12px; }
  .rk-upd { margin-bottom: 12px; font-size: 11px; }
  .rk-sumbox { padding: 12px 10px; border-radius: 13px; }
  .rk-stats6 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rk-scard .rk-scard-value { font-size: 20px; }
  .rk-eltabs { flex-wrap: wrap; }
  .rk-eltabs button { flex: 1 1 33.33%; padding: 10px 2px; font-size: 12.5px; gap: 4px; }
  .rk-eltabs button .rk-eltab-ico { width: 16px; height: 16px; }
  .rk-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .rk-card { grid-template-columns: 34px 1fr; min-height: 86px; padding: 9px 8px; border-radius: 12px; }
  .rk-card .rk-ico { width: 28px; height: 28px; }
  .rk-card .rk-card-label { font-size: 10px; }
  .rk-card .rk-card-value { font-size: 21px; }
  .rk-card .rk-card-value small { font-size: 12px; }
  .rk-card .rk-card-sub { font-size: 9px; }
  .rk-maprow { grid-template-columns: 1fr; }
  .rk-chips { grid-template-columns: repeat(3, 1fr); }
  .rk-leaflet { height: 360px; }
  .rk-showmore { display: block; }
}