/* yama-weather 共通デザイン: アルパイン・ウェイファインディング 方針: 高視認・信号色・平易な言葉。山に不慣れな人/高齢の登山者にも一目で。 */ @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap'); :root{ --paper:#f5f3ec; --card:#ffffff; --ink:#1b2823; --ink-soft:#5e6c64; --line:#e3ded2; --pine:#0e4733; --pine-2:#0a3a29; --sky:#1f6dba; --good:#1c7a4a; --good-bg:#e6f3eb; --good-bd:#bcdcc8; --warn:#a4660f; --warn-bg:#fbf0d8; --warn-bd:#eccf99; --bad:#bb392b; --bad-bg:#fbe5e2; --bad-bd:#eebbb3; --low:#7c8590; --r:14px; --r-sm:10px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{font-family:'Zen Kaku Gothic New',system-ui,sans-serif; color:var(--ink); background:var(--paper); margin:0; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased} .wrap{max-width:1000px; margin:0 auto; padding:0 16px} a{color:var(--sky)} /* a11y(rank11): キーボード操作時のフォーカスリングを全インタラクティブ要素に。暗いpine背景上は明色リングへ切替（--skyだと低コントラスト）。マウス操作には:focus-visibleなので出ない。 */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sky); outline-offset:2px} .hero a:focus-visible,.hero select:focus-visible,.install-btn:focus-visible{outline-color:#eef5f0} /* アルパイン・ヘッダー帯 */ .hero{position:relative; background:var(--pine); color:#eef5f0; padding:22px 0 30px; overflow:hidden} .hero .wrap{position:relative; z-index:1} .hero h1{font-size:28px; font-weight:900; margin:0; letter-spacing:.01em} .hero .meta{font-size:13.5px; color:#aecdbd; margin-top:4px} .hero .links{margin-top:10px; display:flex; gap:18px; flex-wrap:wrap} .hero .links a{color:#d7ece1; text-decoration:none; font-weight:500; font-size:14.5px} .hero .links a:hover{text-decoration:underline} .hero .mt-pick{margin-top:10px; font-size:13.5px; color:#aecdbd} .hero .mt-pick select{font-family:inherit; font-size:14px; padding:4px 9px; margin-left:4px; border-radius:7px; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#eef5f0; min-height:36px} .hero .mt-pick option{color:#16110a} /* PWA-2 インストール導線（hero 内・薄背景に明色） */ .install-btn{font-family:inherit; font-size:14px; font-weight:600; padding:7px 14px; min-height:40px; cursor:pointer; border-radius:8px; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.14); color:#eef5f0} .install-btn:hover{background:rgba(255,255,255,.26)} .install-hint{margin-top:9px; font-size:12.5px; color:#aecdbd; line-height:1.5} .ridge{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:38px; display:block} main{padding:18px 0 48px} h2{font-size:19px; font-weight:700; margin:0} /* 操作部 (大きめ・タップしやすい) */ .controls{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:end; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin:0 0 14px} .controls label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-soft); font-weight:500} .controls input,.controls select{font-family:inherit; font-size:16px; padding:9px 10px; border:1px solid #cfc9bb; border-radius:var(--r-sm); background:#fff; min-height:44px; color:var(--ink)} .btn{font-family:inherit; font-size:15px; font-weight:500; padding:10px 16px; min-height:44px; border:1px solid var(--pine); color:var(--pine); background:#fff; border-radius:var(--r-sm); cursor:pointer} .btn:hover{background:var(--good-bg)} .btn-accent{background:var(--pine); color:#fff; border-color:var(--pine)} .btn-accent:hover{background:var(--pine-2)} .btn:disabled{opacity:.42; cursor:default; border-color:var(--line); color:var(--ink-soft); background:#fff} .btn:disabled:hover{background:#fff} .inp-unit{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--ink-soft)} .stay{font-family:inherit; font-size:12.5px; padding:4px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink-soft); cursor:pointer; margin-left:8px; white-space:nowrap} .stay:hover{border-color:var(--pine)} .stay.on{background:var(--pine); color:#fff; border-color:var(--pine)} .help{font-size:13.5px; color:var(--ink-soft); background:#eef2ec; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 13px; margin:0 0 14px; line-height:1.7} .help b{color:var(--ink)} /* かんたん/くわしい 切替 */ .modebar{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:14px; color:var(--ink-soft)} .seg{display:inline-flex; border:1.5px solid var(--pine); border-radius:999px; overflow:hidden} .seg button{font-family:inherit; font-size:15px; font-weight:500; padding:8px 20px; min-height:44px; border:0; background:#fff; color:var(--pine); cursor:pointer} .seg button[aria-pressed="true"]{background:var(--pine); color:#fff} /* 信頼度バー */ .skillbar{background:#eaefe9; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin:12px 0} .skillbar b{color:var(--ink); font-weight:700} /* 予報モデルの説明（アコーディオン: 既定は閉じる） */ .modelinfo{background:#eef2ec; border:1px solid var(--line); border-radius:var(--r-sm); margin:12px 0} .modelinfo>summary{list-style:none; cursor:pointer; padding:12px 14px; font-weight:700; color:var(--pine); font-size:14px; display:flex; align-items:center; gap:8px} .modelinfo>summary::-webkit-details-marker{display:none} .modelinfo>summary::before{content:"▸"; font-size:12px} .modelinfo[open]>summary::before{content:"▾"} .mi-body{padding:0 14px 14px; color:var(--ink-soft); line-height:1.75; font-size:13px} .mi-body p{margin:2px 0 10px} .mi-rel-head{font-size:12px; font-weight:700; color:var(--ink); margin:6px 0 2px} .mi-row{display:grid; grid-template-columns:80px 1fr 90px; gap:10px; align-items:center; padding:7px 0; border-top:1px solid var(--line)} .mi-name{font-weight:700; font-size:13.5px} .mi-desc{font-size:12.5px; color:var(--ink)} .mi-bar{height:8px; border-radius:4px; background:#d6dbd4; overflow:hidden} .mi-bar>span{display:block; height:100%; border-radius:4px} /* 凡例 */ .legend{display:flex; gap:14px 16px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); margin:10px 2px} .legend span{display:flex; align-items:center; gap:5px} .sw{width:18px; height:4px; border-radius:2px; display:inline-block} .hint{font-size:14.5px; color:var(--ink-soft); margin:12px 2px; line-height:1.7} .hint b{color:var(--ink)} /* はじめての方へ・読み方ガイド */ .guide{background:#eef2ec; border:1px solid var(--line); border-radius:var(--r-sm); margin:14px 0} .guide>summary{list-style:none; cursor:pointer; padding:13px 15px; font-weight:700; color:var(--pine); font-size:15px; display:flex; align-items:center; gap:8px} .guide>summary::-webkit-details-marker{display:none} .guide>summary::after{content:"▸"; margin-left:auto; font-size:12px} .guide[open]>summary::after{content:"▾"} .guide-body{padding:0 16px 15px; font-size:14px; color:var(--ink); line-height:1.85} .guide-body h4{margin:13px 0 3px; font-size:13.5px; color:var(--pine)} .guide-body ul{margin:3px 0 0; padding-left:1.25em} .guide-body li{margin:2px 0} .g-badge{display:inline-block; font-weight:900; padding:1px 10px; border-radius:999px; font-size:13px; margin:2px 4px 2px 0} .guide-flow{background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 13px; margin:4px 0 8px; font-weight:700; color:var(--ink); font-size:14px} .guide-flow b{color:var(--pine)} /* rank8(オンボ): 2ステップ手順バー（常時可視・現在地強調・他方はリンク＝syncCrossLinkでhref同期） */ .stepbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 2px; font-size:13.5px} .stepbar .step{padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); text-decoration:none; font-weight:700; min-height:36px; display:inline-flex; align-items:center} .stepbar a.step{color:var(--pine)} .stepbar a.step:hover{background:#eef2ec} .stepbar .step-now{background:var(--pine); color:#fff; border-color:var(--pine)} .stepbar .step-arrow{color:var(--low); font-weight:700} /* rank7(②理解): 公開版 用語ミニ辞書（定義のみ・.guideと同系の畳めるカード） */ .glossary{background:#eef2ec; border:1px solid var(--line); border-radius:var(--r-sm); margin:10px 0} .glossary>summary{list-style:none; cursor:pointer; padding:11px 14px; font-weight:700; color:var(--pine); font-size:14px; display:flex; align-items:center; gap:8px} .glossary>summary::-webkit-details-marker{display:none} .glossary>summary::after{content:"▸"; margin-left:auto; font-size:12px} .glossary[open]>summary::after{content:"▾"} .glossary-list{margin:0; padding:0 16px 13px 30px; font-size:13.5px; color:var(--ink); line-height:1.8} .glossary-list li{margin:3px 0} /* 地図の操作ヒント帯（地点を置くまで表示） */ .map-hint{position:absolute; left:8px; right:8px; top:8px; z-index:450; background:rgba(14,71,51,0.92); color:#fff; font-size:13.5px; font-weight:700; padding:8px 12px; border-radius:8px; text-align:center; pointer-events:none; box-shadow:0 1px 6px rgba(0,0,0,0.25)} .map-hint.warn{background:rgba(187,57,43,0.95)} /* #H3 山データ未取得（圏外）の警告 */ @media (max-width:1023px){ .map-hint{padding-right:130px} } /* rank13: 全幅可視化した拡大ボタン(右上・幅≈113px)とヒント帯(中央寄せ・全幅)の重なりを回避＝右側にボタン幅ぶんの退避を確保し末尾文字の被覆を防ぐ。≥1024px はデスクトップ無傷（従来どおり） */ .lib-missing{padding:18px 16px; background:var(--bad-bg); border:1px solid var(--bad-bd); border-radius:var(--r); color:var(--bad); font-weight:700; line-height:1.7} /* #H3 ライブラリ未読込（圏外）フォールバック */ .sum-warn{color:var(--bad); font-weight:700} /* #H3 一部地点が圏外で取得不可の注記 */ /* 初回プレースホルダー（結果が空の時） */ .empty-card{background:var(--card); border:1.5px dashed var(--pine-bd,#cfdccd); border-radius:var(--r); padding:22px 20px; text-align:center; color:var(--ink-soft); line-height:1.8} .empty-card .ec-big{font-size:16px; color:var(--ink); font-weight:700; margin-bottom:4px} .empty-card .ec-arrow{font-size:28px; margin:4px 0; color:var(--pine); line-height:1} /* 常時見せる一文（5モデル=不確実性） */ .primer{font-size:14px; color:var(--ink); margin:12px 2px 6px; line-height:1.6} .primer b{font-weight:700} /* 免責（予報の発表ではない／最終判断はご自身で）を読める大きさで */ .disclaimer{font-size:14px; color:var(--ink); background:#fff; border:1px solid var(--line); border-left:4px solid var(--sky); border-radius:var(--r-sm); padding:9px 13px; margin:12px 2px; line-height:1.65} .disclaimer b{font-weight:700} /* 公開②安全版：強い免責（赤帯）＋生値カード（合成判定なし・常時表示） */ .disclaimer-strong{background:var(--bad-bg); border:1px solid var(--bad-bd); border-left:4px solid var(--bad); color:var(--ink); font-weight:600} .raw-band{font-size:13px; color:var(--ink); background:#f1efe7; border-radius:8px; padding:9px 12px; margin:7px 0 11px; line-height:1.7} .raw-band b{font-weight:700} .raw-table{width:100%; border-collapse:collapse; font-size:14px; margin-top:4px} .raw-table th{font-size:12px; color:var(--ink-soft); font-weight:700; padding:5px 6px; text-align:right; border-bottom:1.5px solid var(--line); line-height:1.25} .raw-table th .u{display:block; font-weight:400; font-size:10.5px} .raw-table td{padding:7px 6px; text-align:right; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums} .raw-table th:first-child,.raw-table td:first-child{text-align:left} .raw-table .mname{font-weight:700; font-size:13.5px} .raw-cap{font-size:11.5px; color:var(--ink-soft); margin-top:9px; line-height:1.6} /* 公開②安全版 Q13安全形: 値の幅(min〜max)表示（一致度メーターの代替＝評価語なし・中立） */ .rspan{display:inline-flex; align-items:baseline; gap:4px; margin-right:12px; white-space:nowrap; line-height:1.9} .rspan-k{font-size:11.5px; color:var(--ink-soft); font-weight:700} .rspan-v{font-size:13.5px; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums} .rspan-n{font-size:10.5px; color:var(--ink-soft); font-weight:400} .rspan.none .rspan-v{color:#b3b9b3} /* 公開②安全版 Q13安全形: 当日の時系列を通しで表示し到着時刻列を▼マーカーで指す表（値の色分け・判定なし） */ .tl-wrap{margin:8px 0 11px} .tl-cap{font-size:11.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:5px} .tl-scroll{overflow-x:auto} .tl-table{border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums} .tl-table th,.tl-table td{padding:4px 7px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap} .tl-table th{font-size:11px; color:var(--ink-soft); font-weight:700} .tl-table .tl-m{text-align:left; font-weight:700; position:sticky; left:0; background:var(--card,#fff)} .tl-table th.tl-m{color:var(--ink-soft)} .tl-table th.tl-mark,.tl-table td.tl-mark{background:#eef2ef; box-shadow:inset 2px 0 0 var(--pine),inset -2px 0 0 var(--pine)} /* マーカー＝位置を示す枠のみ（値の強調・判定色なし） */ .tl-arrow{color:var(--pine); font-size:10px} /* (6) 公開②安全版の技術注記（フッター） */ .tech-note{font-size:11px; color:var(--ink-soft); line-height:1.6; margin-top:8px; max-width:70ch} /* 公開②安全版: 5モデル別の数値表を折りたたみ（既定は一致度メーター＋範囲サマリ＝初心者に軽く・生データの開閉なので②安全）。印刷時は beforeprint で全展開しサマリーだけ隠す */ .raw-more{margin:9px 0 2px} .raw-more>summary{cursor:pointer; list-style:none; font-size:13px; font-weight:700; color:var(--pine); padding:6px 2px; display:inline-flex; align-items:center; gap:6px; min-height:34px} .raw-more>summary::-webkit-details-marker{display:none} .raw-more>summary::before{content:"▸"; font-size:11px} .raw-more[open]>summary::before{content:"▾"} /* 予報の鮮度（○時時点） */ .freshness{font-size:13px; color:var(--ink-soft); margin:4px 2px 0} #map{height:560px; border:1px solid var(--line); border-radius:var(--r); position:relative} @media (min-width:900px){ #map{height:660px} } /* L1 地図主体UI: 広い画面では地図を主役化（事前計画＝デスクトップ。モバイルは下の媒体クエリで縮小） */ #minimap{height:260px; border:1px solid var(--line); border-radius:var(--r)} /* ── L2 地図主体UI: PC二分割ワークベンチ（デスクトップ限定＝screen and min-width:1024px。印刷/モバイルは block のまま無傷） ── 方針: リボン=全幅トップ帯（部品は無改修reflow）／地図=左の主役（sticky＝スクロール追従）／パネル=右の行程詳細。 パネルは内部スクロールせずページごとスクロール＝focusCard は window スクロールのまま不変・invalidateSize の罠を最小化。 */ #workbench{display:block} /* 既定（モバイル/狭幅）＝従来の縦積み。デスクトップだけ下で grid 化 */ /* rank13: 地図拡大トグル＝モバイル/タブレット(<1024px)でも使える（#map は position:relative なので全幅でも右上にオーバーレイ）。 タップ44px。<1024px は #map 高さを .map-tall で拡大（パネルは下に残す）、≥1024px はパネルを畳む map-full（下のデスクトップ block）。 印刷は @media print で #map ごと display:none＝子のこのボタンも自動的に非表示。 */ #mapExpandBtn{display:inline-flex; align-items:center; gap:6px; position:absolute; top:8px; right:8px; z-index:500; font-family:inherit; font-size:12.5px; font-weight:700; padding:6px 11px; min-height:44px; cursor:pointer; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--pine); box-shadow:0 1px 5px rgba(0,0,0,.18)} #mapExpandBtn:hover{background:#fff} @media screen and (min-width:1024px){ .wrap{max-width:min(1680px,93vw)} /* デスクトップは1000px制限を解いて画面幅(〜1680px)まで使う＝側方の余白を回収。hero/操作部/footerも同幅で左端を揃える（個人版指摘＝余白が目立つ・地図をより大きく） */ #workbench{display:grid; grid-template-columns:minmax(0,1fr) clamp(360px,30%,480px); /* パネルは360〜480pxに固定し、増えた横幅はすべて地図が吸収＝地図を主役に最大化（1440pxで地図≈577→約900px） */ grid-template-areas:"ribbon ribbon" "disc disc" "mapcol panel"; column-gap:18px; align-items:start} #workbench>#ribbon{grid-area:ribbon} #workbench>.disclaimer{grid-area:disc} /* 免責=全幅・常時可視（map-full でも畳まれない＝公開版強免責の視認性を保つ） */ #workbench>#mapcol{grid-area:mapcol; position:sticky; top:16px; align-self:start} /* 地図は左で固定追従。パネルが伸びてもページスクロールで地図が見え続ける */ #workbench>#panel{grid-area:panel; min-width:0} /* min-width:0＝grid子の横はみ出し防止（テーブル/長語の収まり） */ #workbench>#mapcol #map{height:72vh; min-height:520px; max-height:760px} /* ワークベンチは縦長の地図（vh＝デスクトップはアドレスバー問題なし）。#mapより高特異性で@900の660pxを上書き */ #panel .cards{grid-template-columns:1fr; margin-top:0} /* パネル内カードは1列固定（横並び2列を抑止＝狭幅でも可読） */ #panel #summary:empty{display:none} /* 未計算時の空バナーで余白を作らない */ #panel .ec-arrow{transform:rotate(-90deg)} /* ★Batch A(rank3): 二分割は地図が左＝空状態の誘導矢印を上向き(↑)→左向き(←地図の方)に */ /* 全画面トグル（地図右上オーバーレイ・Leafletズームは左上なので非干渉）。装飾は base に集約済み＝デスクトップは従来の高さ(34px)を維持（base のモバイル44pxタップターゲットを上書き） */ #mapExpandBtn{min-height:34px} #workbench.map-full{grid-template-columns:1fr; grid-template-areas:"ribbon" "disc" "mapcol"} /* パネルを畳んで地図を全幅化（免責 disc は残す） */ #workbench.map-full>#panel{display:none} } @media print{ #workbench{display:block} #workbench>#mapcol{position:static} #workbench>#panel{display:block} } /* 印刷=block（@900以上でも grid を当てない・地図は別途 #map で非表示） */ /* rank13: 地図拡大トグル(.map-tall)＝モバイル/タブレット(<1024px)のみ。vh不使用(アドレスバー伸縮回避)＝px固定。中間帯は通常560/660px→拡大720px。 ≥1024px は L2 の 72vh/map-full（#workbench>#mapcol #map＝id3個で高特異性）が担うので .map-tall は無効。≤560px の通常/拡大は下のスマホ最適化 block。 */ @media (min-width:561px) and (max-width:1023px){ #map.map-tall{height:720px} } /* 結果カード */ .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:14px; margin-top:14px} .wp{background:var(--card); border:1px solid var(--line); border-left:7px solid var(--line); border-radius:var(--r); padding:16px 18px} .wp.s-good{border-left-color:var(--good)} .wp.s-warn{border-left-color:var(--warn)} .wp.s-bad{border-left-color:var(--bad)} .wp-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap} /* ①一致度メーター追加で狭幅折返しを許可（地点名の圧迫/横はみ出し防止） */ .wp-title{font-size:18px; font-weight:700} .wp-time{font-weight:500; color:var(--ink-soft); font-size:15px; margin-left:4px} .badge{display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:900; padding:6px 15px; border-radius:999px; white-space:nowrap} .badge.s-good{background:var(--good-bg); color:var(--good)} .badge.s-warn{background:var(--warn-bg); color:var(--warn)} .badge.s-bad{background:var(--bad-bg); color:var(--bad)} .wp-sub{font-size:13.5px; color:var(--ink-soft); margin:7px 0 13px} .wp-sub b{font-weight:700} /* #C 判定の真実: 一致ピル・先タグ・警告ピル */ .wp-verdict{display:flex; flex-direction:column; align-items:flex-end; gap:5px} .wp-verdict-sub{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px} .conf-pill{font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap} .conf-pill.s-good{background:var(--good-bg); color:var(--good)} .conf-pill.s-warn{background:var(--warn-bg); color:var(--warn)} .conf-pill.s-bad{background:var(--bad-bg); color:var(--bad)} /* ①UI再設計 Phase1: モデル一致度メーター（min–max帯＋中央値tick＋一語）。 分散の“記述”＝中立グレー（信号色とは別軸）。幅=ばらつき、tick=中央値、濃淡(level)で補強。 */ .agree{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; line-height:1.3; padding:3px 10px 3px 7px; border-radius:999px; background:#eef0ed; color:var(--ink-soft); border:1px solid #dde1dc; max-width:100%} .agree-txt{overflow-wrap:break-word} /* 狭幅でテキストは折返し可（トラックは固定）＝メーターが画面幅を超えない */ .agree-track{position:relative; width:44px; height:7px; border-radius:4px; background:#d7dbd6; flex:none} .agree-fill{position:absolute; top:0; bottom:0; min-width:3px; border-radius:4px; background:#9aa39d} .agree-tick{position:absolute; top:-2px; width:2px; height:11px; background:var(--ink); border-radius:1px; margin-left:-1px} /* rank17: 一致度メーターに重ねる5モデルの個別ドット（中立色・半透明＝重なると濃く＝「束ねている」実感）。fillの上・tickの下に描く */ .agree-dot,.strip-dot{position:absolute; top:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:rgba(27,40,35,.5); box-shadow:0 0 0 .5px rgba(255,255,255,.9); transform:translateY(-50%)} /* 白い細リング＝暗い割れ帯(#69736d)でもドットが視認できる（rank17の効きを「割れ」ケースで担保・レビュー測定wide=1.78:1への対処）。重なりは半透明fillで濃淡が出る */ .agree.tight .agree-fill{background:#bcc4be} .agree.mid .agree-fill{background:#9aa39d} .agree.wide .agree-fill{background:#69736d} .agree.wide{background:#e9ebe8; border-color:#c7ccc6} .agree.wide .agree-txt{color:var(--ink); font-weight:700} .lead-tag{font-size:10.5px; font-weight:700; color:var(--ink-soft); background:#eef2ec; border:1px solid var(--line); border-radius:999px; padding:1px 8px; white-space:nowrap} /* ①UI再設計 Phase2: ルート・ウェザー・リボン（出力最上部の主役＝到着時刻順の各地点×モデル一致度） */ .ribbon{margin:0 0 16px} .ribbon:not(.on){display:none} .ribbon-cap{font-size:12px; color:var(--ink-soft); line-height:1.6; margin:0 2px 8px} .ribbon-cap b{color:var(--ink); font-weight:700} .ribbon-rail{display:flex; overflow-x:auto; overflow-y:hidden; padding:2px 2px 10px; scrollbar-width:thin; -webkit-overflow-scrolling:touch} .rnode{flex:0 0 auto; width:184px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--r-sm); padding:11px 13px 12px; margin-right:24px; position:relative} .rnode:last-child{margin-right:0} .rnode + .rnode::before{content:"→"; position:absolute; left:-21px; top:50%; transform:translateY(-50%); color:var(--low); font-size:16px; font-weight:700} /* ノード間=時間の流れ */ .rnode.s-good{border-left-color:var(--good)} .rnode.s-warn{border-left-color:var(--warn)} .rnode.s-bad{border-left-color:var(--bad)} /* rank10: 安全色はノードの左帯のみ（メーターは中立）。横並びリボンで各ノード左の縦色帯＝severity */ .rnode-head{display:flex; align-items:baseline; justify-content:space-between; gap:6px} .rnode-jump{width:100%; border:0; background:none; margin:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer} /* rank5: 見出し=カードへのジャンプボタン。button既定装飾を打ち消し、レイアウト(flex/baseline/space-between)は.rnode-headを継承＝見出しの見た目は従来の
と同一に保つ。タップ標的は自然高(行高で約25px)×全幅(約158px)でWCAG2.5.8 AA(24px)達成＝主役リボンの間延びを避けるため44px(AAA)は採らない。focus-visibleは共通配線で担保 */ .rnode-jump:hover .rnode-i{text-decoration:underline} /* ポインタでの操作可を示唆 */ .rnode-go{color:var(--pine); font-weight:700; margin-left:3px} /* ジャンプ可を示す矢印（装飾＝aria-hiddenで名前から除外） */ .rnode-i{font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap} .rnode-time{font-size:13px; font-weight:700; color:var(--pine); white-space:nowrap} .rnode-meta{font-size:11.5px; color:var(--ink-soft); margin:3px 0 9px; line-height:1.4} .rnode-meta b{color:var(--ink); font-weight:700} .rnode-strips{display:flex; flex-direction:column; gap:7px} .rnode.stub .rnode-msg{font-size:12px; color:var(--ink-soft); margin-top:6px} /* コンパクト一致度ストリップ（1指標＝風/雨/雷）。幅+濃淡で“そろう/割れ”、語で3段を明示。個人版のみ信号色をfillに乗せる */ .strip{display:grid; grid-template-columns:38px 1fr auto; grid-template-rows:auto auto; column-gap:7px; row-gap:2px; align-items:center} .ribbon.pub .strip{grid-template-columns:54px 1fr auto} /* 公開版＝面別ラベル(風700hPa)が折返さないようキー列を拡幅。3指標で揃え、バー開始位置も整列 */ .strip-k{white-space:nowrap} .strip-k{grid-column:1; grid-row:1 / span 2; align-self:center; font-size:11px; color:var(--ink-soft); font-weight:700; line-height:1.2} .strip-track{grid-column:2; grid-row:1; position:relative; height:6px; border-radius:4px; background:#d7dbd6} .strip-fill{position:absolute; top:0; bottom:0; min-width:3px; border-radius:4px; background:#9aa39d} .strip-tick{position:absolute; top:-2px; width:2px; height:10px; background:var(--ink); border-radius:1px; margin-left:-1px} .strip-v{grid-column:3; grid-row:1; font-size:12.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right} .strip-u{font-size:9.5px; color:var(--ink-soft); font-weight:600; margin-left:1px} .strip-w{grid-column:2 / 4; grid-row:2; font-size:10px; color:var(--ink-soft); line-height:1.15} .strip.tight .strip-fill{background:#bcc4be} .strip.mid .strip-fill{background:#9aa39d} .strip.wide .strip-fill{background:#69736d} .strip.wide .strip-w{color:var(--ink); font-weight:700} .strip.one .strip-w,.strip.none .strip-w{color:var(--low)} .strip.none .strip-v,.strip.none .strip-k{color:#b3b9b3} /* rank10: メーターfillへの信号色は撤去（色×幅の二軸混線を解消）。安全色はノード左帯(.rnode)とカードbadgeのみが担う。 */ .wp-notes{display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 2px} .warn-pill{font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:8px; white-space:nowrap} .warn-pill.s-warn{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd)} .warn-pill.s-bad{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-bd)} .sum-notes{font-size:12px; color:var(--ink-soft); margin-top:10px; line-height:1.75; border-top:1px dashed var(--line); padding-top:9px} .sum-notes b{color:var(--ink); font-weight:700} /* 平易チップ: 言葉+数値+色 */ .chips{display:grid; grid-template-columns:1fr 1fr; gap:10px} .chip{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:var(--r-sm); background:#f6f5f0; border:1px solid var(--line)} .chip.s-good{background:var(--good-bg); border-color:var(--good-bd)} .chip.s-warn{background:var(--warn-bg); border-color:var(--warn-bd)} .chip.s-bad{background:var(--bad-bg); border-color:var(--bad-bd)} .chip-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px} .chip-k{font-size:15px; color:var(--ink); font-weight:700; white-space:nowrap; flex-shrink:0} .chip-v{font-size:19px; font-weight:700; white-space:nowrap; line-height:1.25; word-break:keep-all} .chip.s-good .chip-v{color:var(--good)} .chip.s-warn .chip-v{color:var(--warn)} .chip.s-bad .chip-v{color:var(--bad)} .chip-n{font-size:13px; color:var(--ink-soft)} /* 展望チップ（全幅・横並び。体験情報＝安全判定には含めない） */ .chip.span2{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px} .chip.span2 .chip-top{gap:3px 10px} .chip.span2 .chip-v{font-size:17px} /* くわしい(モデル別) */ .detail{margin-top:14px; border-top:1px dashed var(--line); padding-top:12px} .detail-note{font-size:13.5px; color:var(--ink); background:#f1efe7; border-radius:8px; padding:9px 12px; margin-bottom:11px; line-height:1.6} .detail-note b{font-weight:700} .detail-note.s-warn{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd)} .detail-note.s-warn b{color:var(--warn)} .detail-note.s-bad{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-bd)} .detail-note.s-bad b{color:var(--bad)} .detail table{width:100%; border-collapse:collapse; font-size:14.5px} .detail th{font-size:12.5px; color:var(--ink-soft); font-weight:700; padding:5px 7px; text-align:right; border-bottom:1.5px solid var(--line); line-height:1.25} .detail th .u{display:block; font-weight:400; font-size:11px} .detail td{padding:7px 7px; text-align:right; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums} .detail tr:last-child td{border-bottom:0} .detail th:first-child,.detail td:first-child{text-align:left} .detail .mname{font-weight:700; font-size:14px} .detail-cap{font-size:11.5px; color:var(--ink-soft); margin-top:9px; line-height:1.6} .cards.simple .detail{display:none} /* チャート枠 (山頂ビュー) */ .chart{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin:14px 0} .chart h2{font-size:16px} .chart .cap{font-size:12px; color:var(--ink-soft); margin:2px 0 8px} .box{position:relative; height:185px} footer{font-size:11.5px; color:var(--ink-soft); margin-top:20px; line-height:1.7; border-top:1px solid var(--line); padding-top:12px} /* ②応援リンク（公開版のみ・控えめなテキストリンク＝バナー広告化しない）。出典行の後ろに小さく。 */ .support{margin-top:10px; font-size:12px; color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px} .support-lead{color:var(--ink-soft)} .support a{color:var(--pine); font-weight:600; text-decoration:none; min-height:34px; display:inline-flex; align-items:center} .support a:hover{text-decoration:underline} .support-sep{color:var(--low)} .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} /* H 共有/印刷ツールバー・トースト */ .plan-actions{display:flex; gap:10px; flex-wrap:wrap; margin:0 2px 12px} .toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(18px); background:var(--pine); color:#fff; font-size:14px; font-weight:700; padding:11px 18px; border-radius:999px; box-shadow:0 3px 14px rgba(0,0,0,0.28); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:2000} .toast.show{opacity:1; transform:translateX(-50%) translateY(0)} .print-head{display:none} /* 印刷＝行程表（無電波で残せる成果物。地図/操作部は隠し、判定とカードだけ） */ @media print{ .hero,.controls,.guide,.more,#skillbar,.primer,.hint,#map,.legend,.modebar,.plan-actions,.map-hint,footer,.stay,.stepbar,.glossary,.mtmap-overlay{display:none !important} .disclaimer{font-size:11px; padding:6px 9px; margin:10px 0 0} /* 印刷にも免責は残す */ body{background:#fff; font-size:12px; color:#000} .wrap{max-width:none; padding:0} main{padding:0} .print-head{display:block !important; font-size:18px; font-weight:900; color:#000; margin:0 0 10px} .summary{break-inside:avoid; border:1px solid #999; background:#fff} .ribbon-rail{flex-wrap:wrap; overflow:visible; gap:8px; -webkit-mask:none; mask:none} /* リボンは折返して全ノードを残す（横スクロール→印刷で全表示）。rank14のフェードマスクは紙で右端を欠けさせるので解除 */ .rnode{width:158px; margin-right:0; break-inside:avoid; border:1px solid #999} .rnode + .rnode::before{display:none} .rnode-go{display:none} /* rank5: 印刷でジャンプ矢印は無意味 */ .strip-track,.strip-fill,.strip-dot,.agree-dot{-webkit-print-color-adjust:exact; print-color-adjust:exact} .tl-table th.tl-mark,.tl-table td.tl-mark{-webkit-print-color-adjust:exact; print-color-adjust:exact} /* 到着時刻マーカーの枠を紙にも残す */ .tl-scroll{overflow-x:visible} /* 印刷は横スクロールできないので全列表示 */ .raw-more>summary{display:none} /* 公開版の数値表は beforeprint で開かれるので、トグル見出しは紙に出さない */ .cards{grid-template-columns:1fr 1fr; gap:8px; margin-top:10px} .wp{break-inside:avoid; border:1px solid #999; box-shadow:none} a[href]:after{content:""} } /* 詳細設定（折りたたみ） */ .more{margin:-2px 0 14px} .more>summary{cursor:pointer; font-size:13.5px; color:var(--pine); font-weight:500; padding:6px 2px; list-style:none} .more>summary::-webkit-details-marker{display:none} .more>summary::before{content:"▸ "} .more[open]>summary::before{content:"▾ "} .more .controls{margin-top:8px} /* 行程の総合判定バナー */ .summary{border-radius:var(--r); padding:14px 16px; margin:14px 0 6px; border:1px solid var(--line); background:var(--card)} .summary.s-good{background:var(--good-bg); border-color:var(--good-bd)} .summary.s-warn{background:var(--warn-bg); border-color:var(--warn-bd)} .summary.s-bad{background:var(--bad-bg); border-color:var(--bad-bd)} .sum-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .sum-badge{font-size:16px; font-weight:900; padding:5px 14px; border-radius:999px; background:#fff; white-space:nowrap} .summary.s-good .sum-badge{color:var(--good)} .summary.s-warn .sum-badge{color:var(--warn)} .summary.s-bad .sum-badge{color:var(--bad)} .sum-line{font-size:16px; font-weight:700; color:var(--ink)} .sum-stale{margin-top:10px; padding:9px 12px; background:var(--bad); color:#fff; border-radius:var(--r-sm); font-size:13.5px; font-weight:700; line-height:1.65} .sum-stale b{color:#fff; text-decoration:underline} .sum-stats{font-size:13px; color:var(--ink-soft); margin-top:9px} .sum-gear{margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:var(--ink-soft)} .geartag{background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:500; color:var(--ink)} /* 週間 登山日和ランキング */ .week-title{font-size:14px; font-weight:700; color:var(--ink); margin:16px 2px 6px} .week-legend{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:12.5px; font-weight:700; margin:0 2px 9px} .week-legend .wl-note{font-weight:500; color:var(--ink-soft); font-size:11.5px} .week-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px} .day{min-width:112px; flex:1 0 112px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 8px; text-align:center} .day.s-good{background:var(--good-bg); border-color:var(--good-bd)} .day.s-warn{background:var(--warn-bg); border-color:var(--warn-bd)} .day.s-bad{background:var(--bad-bg); border-color:var(--bad-bd)} .day.best{outline:2px solid var(--pine); outline-offset:-2px} .day-d{font-size:12.5px; font-weight:700; color:var(--ink)} .wend{font-size:10px; background:#fff; color:var(--warn); border:1px solid var(--warn-bd); border-radius:6px; padding:0 5px; margin-left:3px} .day-badge{font-size:14px; font-weight:900; margin:5px 0 3px} .day.s-good .day-badge{color:var(--good)} .day.s-warn .day-badge{color:var(--warn)} .day.s-bad .day-badge{color:var(--bad)} .day-reason{font-size:11.5px; color:var(--ink-soft)} .day-best{font-size:11px; font-weight:700; color:var(--pine); margin-top:4px} .day-lead{font-size:10px; font-weight:700; color:var(--ink-soft); margin-top:3px} /* マーカーのポップアップ（ミニカード） */ .pop{font-size:12.5px; line-height:1.6; color:var(--ink); min-width:200px} .pop-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; margin-bottom:8px} .pop-badge{font-weight:900; padding:2px 10px; border-radius:999px; font-size:12px} .pop-badge.s-good{background:var(--good-bg); color:var(--good)} .pop-badge.s-warn{background:var(--warn-bg); color:var(--warn)} .pop-badge.s-bad{background:var(--bad-bg); color:var(--bad)} .pop-chips{display:grid; grid-template-columns:1fr 1fr; gap:5px} .pchip{font-size:12.5px; font-weight:700; padding:5px 9px; border-radius:8px; background:#f6f5f0; border:1px solid var(--line); white-space:nowrap} .pchip.s-good{background:var(--good-bg); border-color:var(--good-bd); color:var(--good)} .pchip.s-warn{background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn)} .pchip.s-bad{background:var(--bad-bg); border-color:var(--bad-bd); color:var(--bad)} .leaflet-popup.wppop .leaflet-popup-content{margin:11px 13px} /* L1 地図主体UI: ポップアップの「詳細を見る」＋一致度メーター余白＋ジャンプ先カードの一瞬ハイライト */ .pop .agree{margin:2px 0 8px} .pop-more{display:inline-block; margin-top:4px; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--pine); cursor:pointer; text-decoration:underline; min-height:32px; line-height:32px; border:0; background:none; padding:0; text-align:left} /* rank11 a11y: