:root{--navy:#12376a;--orange:#efa629;--green:#94af63;--paper:#fffdfa;--cream:#fff8eb;--line:#dfe6eb;--trend-1:#12376a;--trend-2:#c98218}
*{box-sizing:border-box}
/* hidden 属性を必ず効かせる。ブラウザ既定の [hidden]{display:none} は
   クラスの display に負けるので、JSが外すまで隠したい要素（再生ボタンなど）が
   JSの無い環境で出てしまう。押しても動かないボタンを置かないための保険 */
[hidden]{display:none!important}
html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--navy);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.8;letter-spacing:.045em}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
header{padding:28px 0 12px}.header-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}.brand{display:flex;align-items:center;gap:16px;flex-shrink:0}.brand img{width:104px}.brand h1{font-size:27px;letter-spacing:.08em;margin:0;white-space:nowrap}.brand small{display:block;font-size:11px;letter-spacing:.18em;margin-top:3px}.links-title{text-align:center;font-weight:700;border-top:1px solid var(--navy);padding-top:4px;margin-bottom:8px}/* リンクが増えても崩れないよう固定列数のグリッドで並べる。ラベルは1行に固定して語中で折らない。
   列数はリンクの数で決める。7本は4列にすると4+3で下の行の座りがよい（5列だと5+2で右が空く）。
   1000px以下は団体名の横に4列が入らず3列に落とすので3+3+1になる。ここは幅が足りず避けられない */
.quick-links{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px;font-size:13px}.quick-links a{text-align:center;white-space:nowrap}.quick-links span,.quick-links img{display:block;width:24px;height:24px;object-fit:contain;line-height:1.2;margin:0 auto 2px}
/* 5列だと団体名の横に収まらなくなる幅では3列にする。9本が3行に均等に入り、横スクロールも出ない */
@media(max-width:1000px){.quick-links{grid-template-columns:repeat(3,1fr)}}
.hero{padding:18px 0 32px}.hero-grid{display:grid;grid-template-columns:31% 69%;align-items:center}.hero-copy{padding-left:14px;position:relative;z-index:1}.hero-copy:after{content:"";display:block;width:48px;height:2px;background:var(--orange);margin-top:30px}.hero h2{font-size:54px;line-height:1.42;letter-spacing:.08em;margin:0 0 22px;font-weight:700;white-space:nowrap}.hero p{font-size:19px;line-height:2}.accent{color:var(--orange)}.hero-art{margin-left:-28px}.hero-art img{width:100%}
.activities{padding:42px 0 34px}.section-title{text-align:center;font-size:26px;letter-spacing:.12em;margin:0 0 24px}.section-title:before,.section-title:after{content:"❧";color:var(--green);font-size:17px;margin:0 12px}.cards{display:grid;grid-template-columns:repeat(4,1fr)}.card{text-align:center;padding:0 24px 4px;border-right:1px dashed #cfd9df}.card:last-child{border-right:0}.card img{width:100%;height:155px;object-fit:contain}.card h3{font-size:18px;margin:10px 0 5px}.card p{font-size:13px;line-height:1.8;margin:0}
.about{background:linear-gradient(90deg,#fffaf0,#fffdfa);padding:26px 0}.about-grid{display:grid;grid-template-columns:42% 58%;align-items:center}.about-art img{width:100%;max-height:190px;object-fit:contain}.about-copy{padding:0 22px}.about-copy .small{font-weight:700;margin:0}.about-copy h2{font-size:30px;letter-spacing:.08em;margin:3px 0 8px}.about-copy p{font-size:14px;margin:0}
.closing{padding:24px 0 0;text-align:center}.closing h2{font-size:25px;letter-spacing:.08em;margin:0 0 3px}.closing img{width:100%;height:auto}
footer{background:#12376a;color:white;padding:20px 0 22px}.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.footer-grid>div+div{border-left:1px solid rgba(255,255,255,.35);padding-left:28px}footer h3{font-size:19px;margin:0 0 6px;white-space:nowrap}footer p,footer a{font-size:12px;margin:2px 0;display:block}.footer-links a span{display:block;font-size:10px;letter-spacing:.02em;line-height:1.5;margin-top:1px;opacity:.62}.copyright{display:block;margin:18px auto 0;text-align:center;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.58)}.credit{display:block;margin:3px auto 0;text-align:center;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.48)}
.footer-brand{text-align:left}/* 印影のPNGは透明の余白を含むので、clip-path で台紙ごと内側に詰めて白縁を細くする。
   clip-path は box-shadow を切り落とすため、影は filter: drop-shadow で付ける */
.footer-seal{width:100px;margin:22px auto 0;background:var(--paper);clip-path:inset(4px 5px 7px 5px round 9px);filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))}
/* PCは列幅に余裕があるので、リンク名と説明を1行に並べてフッターを詰める。
   幅が足りない行だけ説明が下に落ちるよう flex-wrap を効かせる（980px以下の縦積みと同じ見た目に戻るだけ） */
@media(min-width:981px){.footer-links a{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:5px 0}.footer-links a span{margin-top:0}}
.kakugen{padding:6px 0 10px}.kakugen-teaser{text-align:center}.kakugen-teaser-date{font-size:11px;letter-spacing:.12em;margin:0}.kakugen-teaser-text{font-size:26px;font-weight:700;letter-spacing:.06em;line-height:1.6;margin:4px 0 0}.kakugen-teaser-text:after{content:"";display:block;width:44px;height:2px;background:var(--orange);margin:14px auto 0}.kakugen-more{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.1em;border-bottom:1px solid var(--orange);padding-bottom:2px}.kakugen-more:hover{color:var(--orange)}/* 手稲のいま。中身は独立して欠けうるので、どの行が抜けても崩れない並びにする */
.live{padding:2px 0 14px}.live-panel{border:1px solid var(--line);border-radius:12px;background:var(--cream);padding:16px 20px}
/* 塗りつぶすと強すぎるので、左の罫線と小さな見出しだけにする */
.live-alert{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0 0 12px;padding:2px 0 2px 10px;border-left:3px solid #c0392b;font-size:12px;line-height:1.7;color:#4a5b6a}.live-alert-badge{flex-shrink:0;font-size:11px;font-weight:700;letter-spacing:.06em;color:#9a2b21}
/* 実況。予報とちがって実際に測った値なので、パネルの中で一番大きく出す */
.live-now{padding:0 4px 14px;border-bottom:1px dashed #cfd9df;margin-bottom:14px}
.live-now-heading{display:flex;align-items:center;gap:10px;margin:0 0 8px}.live-now-label{flex-shrink:0;background:var(--navy);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;border-radius:4px;padding:3px 9px}.live-now-note{font-size:11px;letter-spacing:.08em;color:#6b7a88}
/* 山口は海沿いで手稲駅と条件が違うため札幌と併記する。予報と同じ2列に揃える */
.live-now-points{display:grid;grid-template-columns:1fr 1fr}.live-now-point{padding:0 4px}.live-now-points>.live-now-point+.live-now-point{border-left:1px dashed #cfd9df;padding-left:24px;margin-left:24px}
.live-now-place{font-size:11px;letter-spacing:.06em;color:#6b7a88;margin:0}
.live-now-values{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;margin:2px 0 0}.live-now-temp{font-size:30px;font-weight:700;letter-spacing:.02em;line-height:1.2}.live-now-item{font-size:14px}.live-now-key{font-size:11px;letter-spacing:.1em;color:#6b7a88;margin-right:5px}
/* min-width:0 が無いと、中の横スクロール要素が列を押し広げてページごとあふれる */
.live-forecasts{display:grid;grid-template-columns:1fr 1fr}.live-forecast{padding:0 4px;min-width:0}.live-forecasts>.live-forecast+.live-forecast{border-left:1px dashed #cfd9df;padding-left:24px;margin-left:24px}.live-forecast p{margin:3px 0 0}.live-forecast p:first-child{margin:0}
.live-forecast-when{font-size:11px;letter-spacing:.12em}.live-forecast-label{font-weight:700;margin-right:8px}.live-forecast-weather{font-size:19px;font-weight:700;letter-spacing:.02em;line-height:1.5}.live-mark{margin-right:6px}/* 詳細文は気象庁の発表そのまま。語間が空くので字間を締めて添え物の大きさにする */
.live-forecast-detail{font-size:12px;line-height:1.75;letter-spacing:0;color:#6b7a88}
/* 天気名と気温を同じ行に。入らない日は折り返す */
.live-forecast-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;margin-top:3px}.live-forecast-head p{margin:0}
/* 数字だけだと現在の気温と紛らわしいので、最低・最高のラベルを必ず添える */
/* 気温の行が天気名より高いと、気温の無い日と表の開始位置がずれる。行間を揃える */
.live-forecast .live-forecast-temp{display:flex;flex-wrap:wrap;gap:0 14px;margin-top:0;line-height:1.5}.live-temp{display:inline-flex;align-items:baseline;gap:5px}.live-temp-label{font-size:11px;letter-spacing:.1em;color:#6b7a88}
/* 天気名と同じ字送りにする。ここが違うと行の高さが変わり、気温の無い日と表の位置がずれる */
.live-temp-min,.live-temp-max{font-size:19px;font-weight:700;letter-spacing:.02em}.live-temp-min{color:#3d7ea6}.live-temp-max{color:var(--orange)}
/* 推移と降水確率を同じ時間軸のひとつの表にする。列は3時間ごとに8つ固定。
   降水確率は6時間ごとなので colspan で2列をまたぐ。
   角丸を出すため border-collapse は separate にし、外枠は table 側で持つ */
.live-forecast .live-grid{width:100%;margin-top:8px;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);font-size:10px;line-height:1.5}
.live-grid-corner{border-right:1px solid var(--line);border-bottom:1px solid #e8eef3}
/* 列幅は colgroup で決める。見出し列だけ内容ぶん確保する */
.live-grid-col-label{width:34px}
.live-grid-label{padding:2px 6px 2px 7px;text-align:left;font-weight:400;letter-spacing:-.03em;color:#6b7a88;white-space:nowrap;border-right:1px solid var(--line)}
/* 列境界は小数位置（213.75pxなど）に来る。破線はそこでアンチエイリアスに
   潰れて薄く見えるので、内側の仕切りは実線の淡い色にする */
.live-grid-time,.live-grid-cell,.live-grid-pop{padding:2px 1px;text-align:center;white-space:nowrap;border-left:1px solid #e8eef3}
/* 見出し列は右に罫線を持つので、隣の列にも引くと2pxに見える。見出し行の角セルも同じ */
.live-grid-label+*,.live-grid-corner+*{border-left:0}
.live-grid-time{font-size:9px;font-weight:400;letter-spacing:-.04em;color:#6b7a88;border-bottom:1px solid #e8eef3}
/* 数字は既定の字間だと「10-14」のように間延びするので詰め、桁を揃える */
.live-grid-cell{color:#4a5b6a;letter-spacing:0;font-variant-numeric:tabular-nums}.live-grid-mark{font-size:13px}.live-grid-temp{font-weight:700;color:#12376a}
/* 風速だけ「10–14」と桁が多く、既定の字形では33pxの枠に入らない。
   数字と区切りしか出ないので欧文のナロー体を当てる。気温は℃を含むので当てない */
.live-grid-speed{font-family:"Arial Narrow","Helvetica Neue Condensed","Avenir Next Condensed",sans-serif}
/* 毎秒10メートル以上。傘や自転車に影響が出るあたりだけ色を変える */
.live-grid-cell--windy{color:#c0392b;font-weight:700}
/* 風向は「南東」と矢印で2文字ぶん要るので、時刻行と同じ9pxにして枠に収める */
.live-grid-wind{font-size:9px}
/* 風向の矢印。1つの字形を回して8方位にする。方位名と同じ向きを指す */
.live-grid-arrow{display:inline-block;margin-left:.5px;font-size:8px;line-height:1;vertical-align:1px;opacity:.75}
/* 降水確率は2列ぶん。数字を太くして、上の行より目に入るようにする */
/* 降水確率だけ6時間ごとで2列をまたぐ。縦線が途中で切れて見えるので、
   上の罫線を実線にして「ここから粒度が変わる」と分かるようにする */
.live-grid-pop{font-size:11px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
.live-grid-blank{color:#c8d2da}
/* 済んだ時間帯。縦にそろって薄くなるので、いまどのあたりかが分かる */
.live-grid .is-past{opacity:.38}
/* 絵や数字だけのセルに、読み上げ用の言葉を視覚的にだけ隠して添える */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 警報級の可能性。「高」「中」のときだけ出る */
.live-warning-level{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 14px;padding:8px 14px;border-radius:8px;background:#fff4e2;color:#8a5a12;font-size:13px}.live-warning-level-badge{flex-shrink:0;background:var(--orange);color:#3d2a05;font-size:11px;font-weight:700;letter-spacing:.08em;border-radius:4px;padding:2px 8px}.live-warning-level-item{font-weight:700}
.live-train{display:flex;align-items:center;flex-wrap:wrap;gap:2px 14px;font-size:13px;margin:14px 0 0;padding-top:12px;border-top:1px dashed #cfd9df}.live-train-title{font-weight:700;letter-spacing:.08em}.live-snow{color:#3d7ea6}.live-line--info{color:#c0392b;font-weight:700}/* 運行時間外は異常ではないので、平常より控えめに置く */
.live-line--closed{color:#8a97a3}
.live-train-more{margin-left:auto;font-size:12px;border-bottom:1px solid var(--orange);padding-bottom:1px}.live-train-more:hover{color:var(--orange)}
.live-note{font-size:11px;color:#6b7a88;margin:12px 0 0;line-height:1.7}.live-source{margin-left:8px}.live-source a{border-bottom:1px solid #b9c6d0}
@media(max-width:800px){.live-panel{padding:14px 15px}/* 天気名と気温を1行に収めるため、狭い画面では気温と間隔を少し詰める */
.live-forecast-head{gap:0 10px}.live-forecast .live-forecast-temp{gap:0 10px}.live-temp-min,.live-temp-max{font-size:18px}.live-forecast-weather{font-size:18px}
.live-now-temp{font-size:26px}.live-now-item{font-size:13px}.live-now-points{grid-template-columns:1fr 1fr;gap:0 12px}.live-now-points>.live-now-point+.live-now-point{padding-left:12px;margin-left:12px}.live-forecasts{grid-template-columns:1fr}.live-forecasts>.live-forecast+.live-forecast{border-left:0;border-top:1px dashed #cfd9df;padding-left:4px;padding-top:10px;margin-left:0;margin-top:10px}.live-train-more{margin-left:auto}}
/* ファーストビューに「今日の格言」まで入るよう、ヘッダーとヒーローを詰める。
   端末のブラウザバーを引くと実効600〜650pxしかなく、詰めないと格言が見切れる */
@media(max-width:800px){.wrap{width:min(100% - 28px,680px)}header{padding:14px 0 8px}.kakugen{padding:4px 0 8px}.kakugen-teaser-text{font-size:22px}.header-inner{display:block}.brand img{width:78px}.brand h1{font-size:21px}.related{display:none}.about-grid{grid-template-columns:1fr}.hero{padding:2px 0 16px}/* 縦に積むとコピーと絵で320px使ってしまい、格言がファーストビューから押し出される。
   同じマスに重ねて、文字の下に紙色を敷いて読めるようにする */
/* 絵の四角い端が文字カードの角丸からはみ出すので、マス自体を角丸で切り抜く。
   角丸はマスが持ち、文字カードは紙色を敷くだけにする */
.hero-grid{grid-template-columns:1fr;border-radius:14px;overflow:hidden;background:var(--paper)}
.hero-copy,.hero-art{grid-column:1;grid-row:1}
/* 絵の地色(#faf5ee)は紙色(#fffdfa)と違うため、文字より背が低いと上下に帯が出る。
   端をぼかして紙色に溶かす。切り抜きではなく透過なので継ぎ目が出ない */
.hero-art{margin:0;align-self:center}
.hero-art img{width:100%;max-height:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.hero-copy{align-self:center;margin:0;padding:18px;background:rgba(255,253,250,.82)}
.hero-copy:after{margin-top:14px}.hero h2{font-size:32px;white-space:normal;margin:0 0 12px}.hero p{font-size:15px;line-height:1.8;margin:8px 0}.kakugen-more{margin-top:10px}.cards{grid-template-columns:1fr 1fr;gap:26px 0}.card:nth-child(2){border-right:0}.card{padding:0 15px}.card img{height:135px}.about-art{order:2}.about-copy{padding:0 5px 16px}.about-copy h2{font-size:25px}.mobile-break{display:block}.closing h2{font-size:20px}.footer-seal{width:82px;margin-top:16px;clip-path:inset(3px 4px 6px 4px round 8px)}}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr;gap:16px}.footer-grid>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.3);padding:12px 0 0}.footer-links a{margin:0;padding:9px 0;font-size:15px}.footer-links a span{font-size:12px;margin-top:2px}}
@media(max-width:470px){.cards{grid-template-columns:1fr}.card{border-right:0;border-bottom:1px dashed #cfd9df;padding-bottom:22px}.card:last-child{border-bottom:0}.hero h2{font-size:34px}.section-title{font-size:22px}.closing h2{font-size:17px}.kakugen-teaser-text{font-size:19px}}
/* アメダスの推移。実況を取るのに毎回読んでいるブロックファイルには10分値が
   丸ごと入っているので、追加の取得なしで貯まる。実測の続きとして実況の下に置く。
   系列の色は凡例と対応させ、気温・降水・風速を通して同じ地点は同じ色にする */
.live-trend{padding:0 4px 12px;border-bottom:1px dashed #cfd9df;margin-bottom:14px}
/* 畳んだ状態でも気温の幅が読めるようにして、開かずに済む人を作る */
.live-trend-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;cursor:pointer;list-style:none}.live-trend-heading::-webkit-details-marker{display:none}
.live-trend-heading:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:3px}
.live-trend[open] .live-trend-heading{margin-bottom:2px}
.live-trend-title{font-size:11px;letter-spacing:.12em;color:#6b7a88}
.live-trend-lead{font-size:11px;letter-spacing:.02em;color:#96a3af;font-variant-numeric:tabular-nums}
.live-trend[open] .live-trend-lead{display:none}
.live-trend-legend{display:flex;justify-content:flex-end;gap:12px;margin:0 0 2px;font-size:10px;letter-spacing:.06em;color:#6b7a88}
.live-trend-key{display:flex;align-items:center;gap:5px}.live-trend-key:before{content:"";width:12px;height:2px;border-radius:1px}
.live-trend-key--1:before{background:var(--trend-1)}.live-trend-key--2:before{background:var(--trend-2)}
.live-trend-pane+.live-trend-pane{margin-top:8px}
.live-trend-head{display:flex;align-items:baseline;gap:8px;margin:0 0 1px;line-height:1.4}.live-trend-label{font-size:10px;letter-spacing:.1em;color:#6b7a88}.live-trend-range{font-size:10px;letter-spacing:.02em;color:#96a3af;font-variant-numeric:tabular-nums}
/* 高さは組み立て側が決めた値（--trend-h）を基準に、画面幅に応じて伸ばす。
   狭い画面の高さのまま広げると縦横比が17:1になり、気温の線が寝てしまう。
   縦横は独立に伸びるので、線の太さだけは拡大率に引きずらせない */
.live-trend-svg{display:block;width:100%;height:calc(var(--trend-h) * 1px)}
@media(min-width:640px){.live-trend-svg{height:calc(var(--trend-h) * 1.45px)}}
@media(min-width:1000px){.live-trend-svg{height:calc(var(--trend-h) * 1.9px)}}
.live-trend-line{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.live-trend-line--1{stroke:var(--trend-1)}.live-trend-line--2{stroke:var(--trend-2)}
.live-trend-bar--1{fill:var(--trend-1)}.live-trend-bar--2{fill:var(--trend-2)}
.live-trend-midnight{stroke:#cfd9df;stroke-width:1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
/* 気温は10℃、風速は5m/sごとの目盛線。データの線より薄くして手前に出さない */
.live-trend-plot{position:relative}
.live-trend-grid{stroke:#e8eef3;stroke-width:1;vector-effect:non-scaling-stroke}
.live-trend-grid-label{position:absolute;left:0;transform:translateY(-50%);padding:0 3px;background:var(--cream);font-size:9px;line-height:1.2;color:#a8b4bf;font-variant-numeric:tabular-nums}
.live-trend-base{stroke:#dfe6eb;stroke-width:1;vector-effect:non-scaling-stroke}
/* 位置は上のグラフと同じ割合（%）で置く。3時間ごとなら24時間を8等分した中心 */
.live-trend-arrows{display:block;position:relative;height:18px}
.live-trend-mark{position:absolute;top:0;transform:translateX(-50%);width:16px;text-align:center;line-height:1}
.live-trend-arrow{display:inline-block;font-size:13px;line-height:1;color:var(--trend-1)}
.live-trend-calm{display:inline-block;font-size:11px;line-height:1;color:#b6c1cb}
.live-trend-toggle{margin-left:auto;font-size:10px;letter-spacing:.04em;color:#8a97a3}
.live-trend-toggle:after{content:"▾";display:inline-block;margin-left:4px;transition:transform .15s}
.live-trend[open] .live-trend-toggle:after{transform:rotate(180deg)}
/* 風向は地点ごとに1段。24本を並べるので1本あたりが狭く、矢印は小さめにする */
.live-trend-row{margin-top:1px}
.live-trend-row-name{display:block;font-size:10px;letter-spacing:.06em;line-height:1.6;color:#8a97a3}
.live-trend-row .live-trend-arrows{height:15px}
.live-trend-row .live-trend-mark{width:11px}
.live-trend-row .live-trend-arrow{font-size:11px}
.live-trend-axis{position:relative;height:13px;margin:3px 0 0}
.live-trend-tick{position:absolute;top:0;transform:translateX(-50%);font-size:9px;letter-spacing:0;line-height:1.4;color:#9aa7b3;white-space:nowrap;font-variant-numeric:tabular-nums}
.live-trend-tick--midnight{color:#6b7a88;font-weight:700}
/* ひまわりの衛星画像。推移と同じ見出しの作りにする（ADR-0006） */
/* 道内8地点の気温を北海道の地図に置く（ADR-0009）。「手稲のいま」の2地点は
   手稲駅をはさむために選んだ組で、こちらは北海道の広さの話。枠を分けている */
.live-region{padding:0 4px 12px;border-bottom:1px dashed #cfd9df;margin-bottom:14px}
/* 畳んだ状態でも高い地点と低い地点の差が読めるようにして、開かずに済む人を作る */
.live-region-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;cursor:pointer;list-style:none}.live-region-heading::-webkit-details-marker{display:none}
.live-region-heading:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:3px}
.live-region-title{font-size:11px;letter-spacing:.12em;color:#6b7a88}
.live-region-lead{font-size:11px;letter-spacing:.02em;color:#96a3af;font-variant-numeric:tabular-nums}
.live-region[open] .live-region-lead{display:none}
.live-region-toggle{margin-left:auto;font-size:10px;letter-spacing:.04em;color:#8a97a3}
.live-region-toggle:after{content:"\25be";display:inline-block;margin-left:4px;transition:transform .15s}
.live-region[open] .live-region-toggle:after{transform:rotate(180deg)}
/* 地図はSVG1枚、丸と文字はHTMLを割合で置く。SVGの中の文字は拡大率で
   大きさが変わり、スマホで小さくデスクトップで大きくなってしまうため。
   文字の大きさは枠を広げても変わらないので、いちばん狭いところ（枠の幅が
   図の座標とほぼ1:1になる320px前後）でラベルが重ならないよう位置を決める */
.live-region-frame{position:relative;width:100%;max-width:340px;aspect-ratio:288/275;margin:0 auto}
.live-region-map{display:block;width:100%;height:100%}
.live-region-mark{position:absolute;width:0;height:0}
.live-region-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--trend-1);box-shadow:0 0 0 2px var(--cream)}
/* 文字は海岸線の上にも乗る。地の色で縁を付けて、線の上でも読めるようにする。
   背景と同じ生成りなので「文字のまわりだけ線が消える」ように見える
   （推移グラフの目盛ラベルが background で同じことをしているのと同じ狙い） */
.live-region-label{position:absolute;display:flex;gap:4px;align-items:baseline;white-space:nowrap;font-size:11px;line-height:1.2;text-shadow:0 2px var(--cream),0 -2px var(--cream),2px 0 var(--cream),-2px 0 var(--cream),1.4px 1.4px var(--cream),-1.4px 1.4px var(--cream),1.4px -1.4px var(--cream),-1.4px -1.4px var(--cream)}
.live-region-name{color:#6b7a88;letter-spacing:.04em}
.live-region-temp{color:var(--trend-1);font-weight:700;font-variant-numeric:tabular-nums}
/* ラベルをどちら側に出すかは地点ごとに決め打ち（region.ts）。札幌と千歳は
   17pxしか離れておらず、機械的に同じ側へ出すと必ず重なる */
.live-region-mark--right .live-region-label{left:9px;top:-7px}
.live-region-mark--left .live-region-label{right:9px;top:-7px}
.live-region-mark--below .live-region-label{left:50%;top:8px;transform:translateX(-50%)}
.live-region-mark--above .live-region-label{left:50%;bottom:8px;transform:translateX(-50%)}
/* いちばん高い地点と低い地点だけ目立たせる。凡例は置かない ── 畳んだ行と
   下の注記が地点名で名指ししているので、色が見分けられなくても文で分かる */
.live-region-mark.is-high .live-region-dot,.live-region-mark.is-low .live-region-dot{width:9px;height:9px;left:-4.5px;top:-4.5px}
.live-region-mark.is-high .live-region-dot{background:#d98600}
.live-region-mark.is-low .live-region-dot{background:#3d7ab8}
.live-region-mark.is-high .live-region-temp{color:#9a5f00}
.live-region-mark.is-low .live-region-temp{color:#2a5f92}
/* 24時間の推移。**1地点1枚の小さなグラフを並べる。** 9本を1枚に重ねて
   色で見分けようとすると破綻する ── 生成りの背景で全ペアが見分けられるのは
   3色まで、9色目は彩度が足りず灰色になり、緑と橙は赤緑色覚で判別できない。
   目盛は全枚共通。共通でなければ枚どうしを比べられない */
.live-region-chart{margin-top:14px;padding-top:12px;border-top:1px dashed #e3e9ee}
.live-region-chart-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0 0 6px;line-height:1.4}
.live-region-chart-label{font-size:10px;letter-spacing:.1em;color:#6b7a88}
.live-region-chart-range{font-size:10px;letter-spacing:.02em;color:#96a3af;font-variant-numeric:tabular-nums}
/* 凡例。色は2つだけなので、印と語を並べれば足りる */
.live-region-keys{display:flex;gap:10px;margin-left:auto;font-size:10px;letter-spacing:.06em;color:#6b7a88}
.live-region-key{display:flex;align-items:center;gap:4px}
.live-region-key:before{content:"";width:11px;height:2px;border-radius:1px}
.live-region-key--inland:before{background:#eb6834}.live-region-key--coast:before{background:#2a78d6}
/* 3列。狭ければ2列に落ちる */
.live-region-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px 8px}
.live-region-panel{min-width:0}
/* 名前・最低〜最高・寒暖差を縦に積む。1行に押し込むと84pxの枚からはみ出す */
.live-region-panel-head{margin:0 0 2px;line-height:1.25;white-space:nowrap}
.live-region-panel-name{display:block;font-size:11px;letter-spacing:.04em;color:var(--trend-1);font-weight:700}
.live-region-panel-range{display:block;font-size:9px;letter-spacing:0;color:#6b7a88;font-variant-numeric:tabular-nums}
.live-region-panel-spread{display:block;font-size:9px;letter-spacing:0;color:#96a3af;font-variant-numeric:tabular-nums}
/* 縦は1単位=1pxのまま横だけ伸ばす。線の太さは拡大率に引きずらせない */
.live-region-spark{display:block;width:100%;height:44px}
@media(min-width:640px){.live-region-spark{height:58px}}
.live-region-line{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.live-region-line--inland{stroke:#eb6834}
.live-region-line--coast{stroke:#2a78d6}
.live-region-chart-foot{margin:8px 0 0;font-size:9px;letter-spacing:.04em;color:#a8b4bf;text-align:center}
.live-region-note{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:6px 0 0;font-size:10px;letter-spacing:.04em;color:#8a97a3;font-variant-numeric:tabular-nums}
.live-train+.live-region{margin-top:14px;padding-top:12px;border-top:1px dashed #cfd9df}
.live-sat{padding:0 4px 12px;border-bottom:1px dashed #cfd9df;margin-bottom:14px}
.live-sat-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;cursor:pointer;list-style:none}.live-sat-heading::-webkit-details-marker{display:none}
.live-sat-heading:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:3px}
.live-sat-title{font-size:11px;letter-spacing:.12em;color:#6b7a88}
.live-sat-lead{font-size:11px;letter-spacing:.02em;color:#96a3af;font-variant-numeric:tabular-nums}
.live-sat[open] .live-sat-lead{display:none}
.live-sat-toggle{margin-left:auto;font-size:10px;letter-spacing:.04em;color:#8a97a3}
.live-sat-toggle:after{content:"▾";display:inline-block;margin-left:4px;transition:transform .15s}
.live-sat[open] .live-sat-toggle:after{transform:rotate(180deg)}
/* タイル4枚は 東経135〜146度 / 北緯41〜49度。上の35%はサハリンと海しか
   写らないので切り落として、北緯41〜46度（北海道と周辺）に寄せる。
   切る量は translateY 一つで表し、タイルの並びは触らない */
/* 元が512px四方なので、広い画面で目一杯に伸ばすとぼやける。上限で止める */
.live-sat-frame{overflow:hidden;border-radius:8px;background:#0d1b2a;aspect-ratio:512/332;max-width:560px;margin:0 auto}
/* タイル2×2ぶんの正方形。**中身は全部 absolute なので高さを宣言する。**
   宣言しないと高さ0になり、切り抜き（translateY）も効かず、海岸線も
   手稲の印も座標を失う */
.live-sat-mosaic{position:relative;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;transform:translateY(-35.156%)}
/* 海岸線と手稲の印。タイルと同じ座標系なので、枠を変えなければずれない */
.live-sat-coast{position:absolute;inset:0;width:100%;height:100%}
/* 衛星写真のコマ。重ねて置き、いま出すものだけを見せる（雨雲と同じ作り） */
.live-sat-photo{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;opacity:0}
.live-sat-photo.is-current{opacity:1}
/* 標高の濃淡はいちばん下。雨雲の色に干渉させない */
.live-sat-relief{position:absolute;inset:0;width:100%;height:100%}
/* 等高線は雨雲の上・海岸線の下。線どうしが重なるときは海岸線を勝たせる */
.live-sat-contour{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.live-sat-here{position:absolute;left:55.56%;top:74.74%;width:7px;height:7px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 0 5px rgba(0,0,0,.7)}
.live-sat-here-label{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;letter-spacing:.1em;color:#fff;white-space:nowrap;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.8)}
/* 1pxだけ重ねる。ぴったり並べると拡大時の端数で継ぎ目に線が出る */
.live-sat-tile{display:block;width:calc(100% + 1px);height:auto;margin:0 -1px -1px 0}
/* 手稲まわりの寄り（z=8）。衛星画像が敷けないので海岸線だけの地になる。
   上下を12.5%ずつ落として横長にする（切らないと正方形で縦を食いすぎる）。
   手稲は 東経141.25度・北緯43.09度 をこの枠に投影した位置 */
.live-sat-frame--teine{aspect-ratio:512/384}
.live-sat-frame--teine .live-sat-mosaic{transform:translateY(-12.5%)}
.live-sat-here--teine{left:72.22%;top:48.97%}
/* 雨雲のコマ。重ねて置き、いま出すものだけを見せる（ADR-0007）。
   海岸線と手稲の印より下に敷いて、線が雨雲に隠れないようにする */
.live-sat-rain{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:1fr 1fr;opacity:0}
.live-sat-rain.is-current{opacity:1}
.live-sat-rain-tile{display:block;width:calc(100% + 1px);height:auto;margin:0 -1px -1px 0}
.live-sat-coast{z-index:3}
.live-sat-here{z-index:4}
/* 再生の操作。JSが無ければ hidden のまま出ない */
.live-sat-play{display:flex;align-items:center;gap:10px;margin:8px auto 0;max-width:560px;font-size:11px}
.live-sat-button{flex-shrink:0;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 10px;cursor:pointer;font-family:inherit}
.live-sat-button:hover{border-color:var(--orange);color:var(--orange)}
.live-sat-button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.live-sat-time{flex-shrink:0;display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy)}
/* 予測を実況と同じ顔で見せない。文字と目盛の両方で区別する */
.live-sat-kind{font-size:10px;font-weight:700;letter-spacing:.08em;color:#6b7a88}
.live-sat-kind.is-forecast{color:var(--orange)}
.live-sat-bar{flex:1;display:flex;gap:2px;align-items:center;min-width:0}
.live-sat-tick{flex:1;height:3px;border-radius:2px;background:#cfd9df}
.live-sat-tick--forecast{background:#f0d9bd}
.live-sat-tick.is-current{background:var(--navy)}
.live-sat-tick--forecast.is-current{background:var(--orange)}
/* 降水強度の凡例。気象庁の色に合わせる。無いと青と黄の差が読めない */
.live-sat-scale{display:flex;align-items:center;gap:8px;margin:6px auto 0;max-width:560px;font-size:9px;color:#8a97a3;font-variant-numeric:tabular-nums}
.live-sat-step{display:flex;align-items:center;gap:3px}
.live-sat-chip{width:10px;height:8px;border-radius:2px}
.live-sat-scale-unit{margin-left:-4px}
.live-sat-note{margin:6px 0 0;font-size:10px;letter-spacing:.06em;color:#96a3af}
/* JRの行の直後に畳みが来ると、罫線が無くてJRの続きに見える。
   眺めもの（衛星画像・太陽）の区切りをここで入れる */
.live-train+.live-sat{margin-top:14px;padding-top:12px;border-top:1px dashed #cfd9df}
/* 今日の太陽（ADR-0008）。畳みの作法は衛星画像と共通なので .live-sat-* を借りる */
.live-sun{padding:0 4px 12px;border-bottom:1px dashed #cfd9df;margin-bottom:14px}
.live-sun:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:4px}
/* 今日と7日前を並べる。見比べる相手が隣にいないと変化が読めない */
.live-sun-pair{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:880px;margin:0 auto}
/* 狭い画面で4列だと1枚が小さすぎる。2×2に折ると隙間なく収まる */
@media(max-width:720px){.live-sun-pair{grid-template-columns:repeat(2,1fr)}}
.live-sun-cell{margin:0}
/* コマは重ねて置き、いま出すものだけを見せる。地は黒（太陽の画像の背景と揃える） */
.live-sun-frame{position:relative;aspect-ratio:1;background:#000;border-radius:8px;overflow:hidden}
.live-sun-image{position:absolute;inset:0;width:100%;height:auto;opacity:0}
.live-sun-image.is-current{opacity:1}
.live-sun-caption{margin:4px 0 0;text-align:center;font-size:10px;letter-spacing:.06em;color:#6b7a88;font-variant-numeric:tabular-nums}
.live-sun-play{justify-content:center}
.live-sun-hint{font-size:10px;letter-spacing:.06em;color:#96a3af}
.live-sun-date{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--navy);font-variant-numeric:tabular-nums}
/* 宇宙天気の概況（ADR-0010）。「今日の太陽」の中に置くので、写真と同じ枠に収める。
   裸の数字は上に出さない。状態の言葉が主役で、数値は帯の下の脚注に落とす */
.live-space-state{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin:0 0 8px}
.live-space-word{font-size:14px;font-weight:700;letter-spacing:.04em}
.live-space-word--storm{color:#c0392b}
.live-space-chance{font-size:11px;letter-spacing:.02em;color:#8a97a3;font-variant-numeric:tabular-nums}
/* 条件を満たした日だけ現れる行。降水0mmなら枠ごと出さないのと同じ考え方 */
.live-space-flag{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0 0 8px;padding:3px 0 3px 10px;border-left:3px solid var(--green);font-size:12px;line-height:1.7;color:#4a5b6a}
.live-space-flag--aurora{border-left-color:#7b5ea7}
.live-space-badge{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.1em;color:#5c6b7a}
.live-space-flag--aurora .live-space-badge{color:#6a4f96}
/* 3時間ごとの地磁気。上流の刻み（00/03/…/21 UT）がJSTでも3の倍数なので、
   天気の予報表と同じ 0/3/6/9/12/15/18/21時 の枠にそのまま並ぶ */
.live-space-kp{margin-top:10px}
.live-space-kp-head{display:flex;align-items:baseline;gap:8px;margin:0 0 2px}
.live-space-kp-label{font-size:10px;letter-spacing:.1em;color:#6b7a88}
.live-space-kp-note{font-size:10px;letter-spacing:.02em;color:#96a3af}
.live-space-bars{position:relative;display:flex;align-items:flex-end;gap:2px;height:44px;border-bottom:1px solid var(--line)}
/* 磁気嵐（G1=Kp5）の高さ。ここを超えた棒だけが色を変える */
.live-space-line{position:absolute;left:0;right:0;border-top:1px dashed #cfd9df;pointer-events:none}
.live-space-slot{flex:1;display:flex;align-items:flex-end;height:100%;min-width:0}
.live-space-slot.is-past{opacity:.42}
.live-space-slot.is-daystart{box-shadow:inset 1px 0 0 #cfd9df}
.live-space-bar{width:100%;border-radius:1px 1px 0 0;background:var(--navy);min-height:1px}
.live-space-bar--g1,.live-space-bar--g2{background:var(--orange)}
.live-space-bar--g3,.live-space-bar--g4,.live-space-bar--g5{background:#c0392b}
.live-space-ticks{display:flex;gap:2px;margin:2px 0 0}
.live-space-tick{flex:1;min-width:0;text-align:left;font-size:9px;line-height:1.4;color:#9aa7b3;font-variant-numeric:tabular-nums}
.live-space-numbers{margin:6px 0 0;font-size:10px;letter-spacing:.04em;color:#96a3af;font-variant-numeric:tabular-nums}
/* 畳んだ行。黒点数の隣に状態を1語だけ添える */
.live-space-lead{margin-left:10px}
/* 概況を厚くする。静かな日でも1行で終わらないよう、傾向・確率・実績を並べる */
.live-space-trend{font-size:11px;letter-spacing:.02em;color:#6b7a88}
.live-space-record{margin:0 0 8px;font-size:11px;letter-spacing:.02em;color:#8a97a3;font-variant-numeric:tabular-nums}
.live-space-record b{font-weight:700;color:#c0392b}
/* 黒点数の30日。棒が30本になるので隙間を詰める */
.live-space-bars--spots{gap:1px;height:34px}
.live-space-bar--spot{background:var(--orange)}
/* 縮尺の階段（ADR-0011）。日本列島と地球は雨雲を重ねず、切り落としもしない。
   枠の縦横比とグリッドの列数はタイルの枚数から決まるので inline style で渡す */
.live-sat-frame--japan,.live-sat-frame--earth{aspect-ratio:auto}
/* 窓で切り出す枠は、モザイクを拡大して外へはみ出させ、枠が切り取る */
.live-sat-mosaic--plain{transform:none}
.live-sat-frame--hokkaido,.live-sat-frame--japan{position:relative;overflow:hidden}
.live-sat-here--japan{left:63.89%;top:43.69%;width:6px;height:6px;margin:-3px 0 0 -3px}
.live-sat-here--japan .live-sat-here-label{left:9px}
.live-sat-here--earth{left:47.84%;top:16.76%;width:6px;height:6px;margin:-3px 0 0 -3px;z-index:4}
.live-sat-here--earth .live-sat-here-label{left:9px}
/* 地球は縦長（4列×6行）。横幅いっぱいだとスマホで縦に長すぎる */
/* 地球は正方形。配信のメルカトルを earth.js が円盤へ引き直して画布に描く。
   JSが動かなければ画布は空のままで、下のタイル（歪んだ地図）が見える */
.live-sat-frame--earth{max-width:520px;aspect-ratio:1;position:relative;background:none;border-radius:0}
.live-sat-frame--earth .live-sat-mosaic{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%)}
.live-sat-globe{position:absolute;inset:0;width:100%;height:100%;z-index:2}
/* 引き直せたらメルカトルは隠す */
/* JSが動くなら卵形は見せない。読み込み中から隠し、引き直せたらそのまま。
   失敗したら印を外して歪んだ絵に戻す。JSが無い環境では印が付かないので
   最初から見えている */
.live-sat-frame--earth[data-earth-loading] .live-sat-mosaic,
.live-sat-frame--earth[data-earth-ready] .live-sat-mosaic{visibility:hidden}
/* 海岸線と印は円盤に合わせて作ってあるので、引き直せるまで出さない */
.live-sat-coast--globe,.live-sat-frame--earth .live-sat-here{position:absolute;opacity:0;transition:opacity .2s}
.live-sat-coast--globe{inset:0;width:100%;height:100%;z-index:3}
.live-sat-frame--earth[data-earth-ready] .live-sat-coast--globe,
.live-sat-frame--earth[data-earth-ready] .live-sat-here{opacity:1}
/* 縮尺を1つの畳みに並べる（ADR-0011 決定5の改訂）。狭い画面は縦、広ければ2列。
   **`live-sat-step` と `live-sat-scale` は降水強度の凡例が先に使っている。**
   図に同じ名前を付けたら凡例の `display:flex` を拾って、枠の高さが0に潰れた */
.live-sat-views{display:grid;gap:18px;justify-items:stretch}
@media(min-width:720px){.live-sat-views{grid-template-columns:1fr 1fr;align-items:start}}
.live-sat-view{display:block;margin:0;width:100%;max-width:520px}
.live-sat-view-caption{margin:5px 0 0;text-align:center;font-size:11px;letter-spacing:.08em;color:#6b7a88}
/* 4枚とも同じ大きさで並べる。朝夕の縁は円盤の数%しかないので、
   小さく出すと消える（真夜中は0.6%＝髪の毛ほどの太さになる） */
.live-sat-view--earth{max-width:520px}
/* 雨の枠が出ない日に、その事実を書く行（ADR-0012）。枠を空けたままにしない */
.live-trend-dry{display:flex;align-items:baseline;gap:8px;margin:6px 0 2px;font-size:11px;letter-spacing:.02em;color:#8a97a3}
.live-trend-dry b{font-weight:700;color:#c08a2a;font-variant-numeric:tabular-nums}
/* 道内9地点の項目切り替え（ADR-0013）。ラジオと :checked だけで組み、JSは使わない。
   層はすべて描いてあり、選ばれたものだけを見せる。**ラジオは枚と同じ親に置く** */
.live-region-radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.live-region-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.live-region-tab{cursor:pointer;font-size:11px;letter-spacing:.06em;color:#6b7a88;border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--paper)}
#live-region-temp:checked~.live-region-tabs [for="live-region-temp"]{background:var(--navy);border-color:var(--navy);color:#fff}
#live-region-sun:checked~.live-region-tabs [for="live-region-sun"]{background:var(--navy);border-color:var(--navy);color:#fff}
#live-region-rain:checked~.live-region-tabs [for="live-region-rain"]{background:var(--navy);border-color:var(--navy);color:#fff}
#live-region-wind:checked~.live-region-tabs [for="live-region-wind"]{background:var(--navy);border-color:var(--navy);color:#fff}
#live-region-humidity:checked~.live-region-tabs [for="live-region-humidity"]{background:var(--navy);border-color:var(--navy);color:#fff}
.live-region-radio:focus-visible~.live-region-tabs .live-region-tab{outline:1px dotted #9aa7b3}
/* 既定は気温だけ。選ばれた項目に入れ替える */
.live-region-only--sun,.live-region-only--rain,.live-region-only--wind,.live-region-only--humidity{display:none}
#live-region-sun:checked~.live-region-panels .live-region-only--sun,
#live-region-sun:checked~.live-region-chart-foot.live-region-only--sun,
#live-region-rain:checked~.live-region-panels .live-region-only--rain,
#live-region-rain:checked~.live-region-chart-foot.live-region-only--rain,
#live-region-wind:checked~.live-region-panels .live-region-only--wind,
#live-region-wind:checked~.live-region-chart-foot.live-region-only--wind,
#live-region-humidity:checked~.live-region-panels .live-region-only--humidity,
#live-region-humidity:checked~.live-region-chart-foot.live-region-only--humidity{display:revert}
#live-region-sun:checked~.live-region-panels .live-region-only--temp,
#live-region-sun:checked~.live-region-chart-foot.live-region-only--temp,
#live-region-rain:checked~.live-region-panels .live-region-only--temp,
#live-region-rain:checked~.live-region-chart-foot.live-region-only--temp,
#live-region-wind:checked~.live-region-panels .live-region-only--temp,
#live-region-wind:checked~.live-region-chart-foot.live-region-only--temp,
#live-region-humidity:checked~.live-region-panels .live-region-only--temp,
#live-region-humidity:checked~.live-region-chart-foot.live-region-only--temp{display:none}
/* 気温の基準線。どの項目でも薄く残る */
.live-region-base{fill:none;stroke:#c3cdd6;stroke-width:1;vector-effect:non-scaling-stroke}
.live-region-bar{fill:#4a80b8}
/* **display は書かない。** 後から書くと、上の「選ばれた項目だけ見せる」
   指定と同じ強さでぶつかって、風向がどの項目でも出てしまう */
.live-region-arrows{justify-content:space-between;margin:1px 0 0;line-height:1}
#live-region-wind:checked~.live-region-panels .live-region-arrows{display:flex}
.live-region-arrow{display:inline-block;font-size:9px;line-height:1;color:#6b7a88}