/* NIPPON ATLAS いまの天気（観測）の部品（site/weather.js が描く）。白を基調に、差し色は藍だけ。
   静的ページ（pages.css）と地図アプリ（theme.css）のどちらに置いても同じ見た目になるよう、色はこのファイルの変数（--wx-*）で持つ */
:root{--wx-ink:#22272e;--wx-sub:#5d6670;--wx-line:#e3e6ea;--wx-soft:#f5f6f8;--wx-bg:#fff;--wx-ai:#35577a;--wx-ai-soft:#eaf0f6;--wx-bar:#8fb0d3}
:root[data-theme="dark"]{--wx-ink:#e6e9ed;--wx-sub:#a3abb5;--wx-line:#2f353d;--wx-soft:#1f242b;--wx-bg:#1c2127;--wx-ai:#8fb4db;--wx-ai-soft:#22364b;--wx-bar:#4f6f92}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wx-ink:#e6e9ed;--wx-sub:#a3abb5;--wx-line:#2f353d;--wx-soft:#1f242b;--wx-bg:#1c2127;--wx-ai:#8fb4db;--wx-ai-soft:#22364b;--wx-bar:#4f6f92}}

.na-wx,.na-wx-rank{color:var(--wx-ink);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;font-weight:400;line-height:1.6;font-size:15px;line-break:strict}
.na-wx b,.na-wx-rank b,.nawx-h{font-weight:700}
.nawx-msg{margin:8px 0;padding:12px 14px;border-radius:8px;background:var(--wx-soft);color:var(--wx-sub);font-size:14px}
.nawx-meta{margin:0 0 8px;font-size:12.5px;color:var(--wx-sub);line-height:1.65}
.nawx-meta b{color:var(--wx-ink)}
.nawx-src{margin:10px 0 0;font-size:12px;color:var(--wx-sub);line-height:1.65}
.nawx-src a,.nawx-meta a{color:var(--wx-sub)}
.nawx-src a:hover,.nawx-meta a:hover{color:var(--wx-ai)}
.na-wx-rank a{color:var(--wx-ai)}

/* 市区町村のいまの天気。置いた場所の幅（ページの本文・地図アプリのパネル約360px）で並べ方を変える */
.na-wx{container-type:inline-size}
.nawx-far{margin:0 0 10px;padding:10px 12px;border-radius:8px;background:var(--wx-soft);font-size:13.5px;line-height:1.6}
/* 気温（主役）: いまの気温と、今日の最低〜最高の帯 */
.nawx-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:center;margin:4px 0 12px}
.nawx-cur{margin:0;display:flex;align-items:baseline;gap:4px;white-space:nowrap;line-height:1}
.nawx-cur small{font-size:12.5px;color:var(--wx-sub);margin-right:6px;align-self:center}
.nawx-cur b{font-size:48px;letter-spacing:-.01em}
.nawx-cur span{font-size:20px}
.nawx-band{min-width:0}
.nawx-bt{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--wx-ai-soft),var(--wx-bar));margin:10px 6px 8px}
.nawx-bt i{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--wx-bg);border:3px solid var(--wx-ai);box-sizing:border-box}
.nawx-bl{display:flex;justify-content:space-between;gap:8px;font-size:13px;white-space:nowrap}
.nawx-bl b{font-size:16px}
.nawx-bl small{font-size:11.5px;color:var(--wx-sub)}
.nawx-bl.solo{justify-content:flex-start;gap:20px}
.nawx-snow{margin:-4px 0 12px;font-size:13px}
.nawx-snow b{font-size:16px}
.nawx-snow small{font-size:11.5px;color:var(--wx-sub)}
@container (max-width:420px){.nawx-hero{grid-template-columns:minmax(0,1fr)}.nawx-cur b{font-size:44px}}
/* 小さな計器（雨・風・湿度・日照）。PC は4つ横並び、狭いところは2×2 */
.nawx-gs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@container (max-width:560px){.nawx-gs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nawx-g{background:var(--wx-soft);border-radius:8px;padding:8px 12px 10px;min-width:0}
.nawx-g p{margin:0}
.nawx-g .h{font-size:12px;color:var(--wx-sub);font-weight:700}
.nawx-g .v{font-size:20px;font-weight:700;white-space:nowrap;line-height:1.5;overflow:hidden;text-overflow:ellipsis}
.nawx-g .v small{font-size:12px;font-weight:400;margin-left:2px;color:var(--wx-sub)}
.nawx-g .s{font-size:11.5px;color:var(--wx-sub);line-height:1.5;margin-top:4px}
.nawx-steps{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;margin-top:4px}
.nawx-steps span{height:8px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative}
.nawx-steps .z{background:var(--wx-bg)}
.nawx-steps .on{outline:2px solid var(--wx-ink);outline-offset:1px}
.nawx-wa{display:flex;align-items:center;gap:6px;color:var(--wx-ai);font-size:12.5px;white-space:nowrap}
.nawx-wa span{color:var(--wx-ink)}
.nawx-mini{height:6px;border-radius:3px;background:var(--wx-line);overflow:hidden;margin-top:6px}
.nawx-mini i{display:block;height:100%;background:var(--wx-ai);border-radius:3px}

/* 今日の推移のグラフ（上: 気温の線、下: 降水量の棒） */
.nawx-fig{margin:16px 0 4px;padding:0}
.nawx-fig figcaption{font-size:12.5px;color:var(--wx-sub);margin:0 0 4px}
.nawx-chart{position:relative;width:100%;min-height:254px;touch-action:pan-y;border-radius:8px}
.nawx-chart:focus-visible{outline:2px solid var(--wx-ai);outline-offset:2px}
.nawx-area svg{display:block;max-width:100%;height:auto;font-family:inherit;overflow:visible}
.nawx-area text{font-size:11px;fill:var(--wx-sub)}
.nawx-area .ax{font-size:11.5px;font-weight:700}
.nawx-area .g{stroke:var(--wx-line);stroke-width:1}
.nawx-area .g2{stroke:var(--wx-line);stroke-width:1;stroke-dasharray:2 3}
.nawx-area .b{stroke:var(--wx-sub);stroke-width:1}
.nawx-area .tl{fill:none;stroke:var(--wx-ai);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.nawx-area .pb{fill:var(--wx-bar)}
.nawx-area .mk{fill:var(--wx-bg);stroke:var(--wx-ai);stroke-width:2}
.nawx-area .ml{font-size:11.5px;font-weight:700;fill:var(--wx-ink);paint-order:stroke;stroke:var(--wx-bg);stroke-width:4px;stroke-linejoin:round}
.nawx-area .now{stroke:var(--wx-sub);stroke-width:1;stroke-dasharray:3 3}
.nawx-x{position:absolute;top:22px;bottom:22px;width:0;border-left:1px solid var(--wx-ink);pointer-events:none}
.nawx-tip{position:absolute;top:0;z-index:2;padding:6px 10px;border-radius:8px;background:var(--wx-bg);border:1px solid var(--wx-line);box-shadow:0 4px 14px rgba(0,0,0,.14);font-size:12px;line-height:1.55;white-space:nowrap;pointer-events:none}

/* 下の控えめな情報（近くの地点・1時間ごとの値・注記・出典） */
.nawx-foot{margin-top:8px;font-size:12px;color:var(--wx-sub);line-height:1.6}
.nawx-foot>p{margin:6px 0 0}
.nawx-foot>p:first-child{display:inline;margin:0}
.nawx-foot a{color:var(--wx-sub)}
.nawx-foot a:hover{color:var(--wx-ai)}
.nawx-near{list-style:none;display:inline;margin:0;padding:0}
.nawx-near li{display:inline;margin-right:12px;white-space:nowrap}
.nawx-hr{margin:6px 0 0;font-size:12px}
.nawx-hr summary{cursor:pointer;color:var(--wx-sub);font-weight:700}
.nawx-hr summary:hover{color:var(--wx-ai)}
.nawx-foot .nawx-src{font-size:12px}
@media (prefers-reduced-motion:reduce){.nawx-chart{scroll-behavior:auto}}

/* 表（順位・1時間ごとの値） */
.nawx-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0}
.nawx-rt{border-collapse:collapse;width:100%;font-size:13.5px}
.nawx-rt caption{text-align:left;font-weight:700;font-size:15px;padding:0 0 6px;color:var(--wx-ink)}
.nawx-rt th{font-size:12px;color:var(--wx-sub);text-align:left;border-bottom:1.5px solid var(--wx-line);padding:5px 8px;white-space:nowrap;font-weight:700}
.nawx-rt td{border-bottom:1px solid var(--wx-line);padding:6px 8px;vertical-align:top}
.nawx-rt td small{display:block;font-size:11.5px;color:var(--wx-sub)}
.nawx-rt .num{text-align:right;white-space:nowrap}
.nawx-rt td:first-child{white-space:nowrap}
.nawx-pt td span{font-size:12px;color:var(--wx-sub);margin-left:4px}
.nawx-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:8px 28px}
.nawx-h{font-size:16px;margin:20px 0 4px}

/* トップページの小さな列（今日の最高・最低の上位） */
.nawx-strip{list-style:none;margin:0;padding:2px 2px 10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.nawx-strip li{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border:1px solid var(--wx-line);border-radius:12px;min-width:0}
.nawx-strip .k{font-size:11.5px;font-weight:700;color:var(--wx-ai)}
.nawx-strip .v{font-size:22px;line-height:1.3}
.nawx-strip .v small{font-size:13px;font-weight:400}
.nawx-strip .n{font-size:14px;font-weight:700}
.nawx-strip small{font-size:11.5px;color:var(--wx-sub)}

/* 都道府県のページの市区町村の表の「いまの気温」の列 */
.na-wxc{white-space:nowrap}
.na-wxc b{font-size:14.5px}
.na-wxc small{display:block;font-size:11.5px;color:var(--wx-sub)}
.nawx-th{display:block;font-size:11px;font-weight:400}

/* 地図アプリのパネル（.sin p などの余白）に負けないよう、部品の中の段落の余白をここで決め直す */
.na-wx.na-wx p,.na-wx.na-wx figure{margin:0}
.na-wx.na-wx .nawx-msg{margin:8px 0}
.na-wx.na-wx .nawx-meta{margin:0 0 8px}
.na-wx.na-wx .nawx-far{margin:0 0 10px}
.na-wx.na-wx .nawx-snow{margin:-4px 0 12px}
.na-wx.na-wx .nawx-g .s{margin-top:4px}
.na-wx.na-wx .nawx-fig{margin:16px 0 4px}
.na-wx.na-wx .nawx-foot>p{margin:6px 0 0}
.na-wx.na-wx .nawx-foot>p:first-child{margin:0}
.na-wx.na-wx .nawx-src{margin:8px 0 0}

/* 英語（<html lang="en">）: 風向き（North-northwest wind）や雨の段階（80 or more）は日本語より長いので、狭い計器では折り返す */
:lang(en) .nawx-wa{white-space:normal;line-height:1.35}
:lang(en) .nawx-g .v{white-space:normal;line-height:1.3}