/* SoraBus (完全反転ダークモード既定) */
html { margin: 0; height: 100%; overflow: hidden; background: #0f1116; overscroll-behavior: none; }
body {
margin: 0; height: 100%; overflow: hidden; background: #0f1116;
position: fixed; inset: 0; width: 100%; /* iOS: ゴムバンドスクロールでページごとずれて固定ボタンが画面外に流れるのを防止 */
overscroll-behavior: none;
}
#map { position: fixed; inset: 0; }
/* ダークモード: 地図タイルだけを完全反転 (バスマーカーはDOMなので影響なし) */
body:not(.sb-light) .maplibregl-canvas {
/* 2026-07-17: brightness はここから外した。地図(道路・下地)/建物/文字を独立して調整するため、
明るさは JS が各レイヤーの paint プロパティへ個別に与える (applyLayerBrightness)。 */
filter: invert(1) hue-rotate(180deg) contrast(1.05);
}
/* 彩度はズームに応じてJS側で連続的に上書きする */
/* バスマーカー (系統番号入りの丸) */
.sb-bus {
box-sizing: content-box; /* 内側を36pxに (border 2pxは外側。文字サイズはそのまま) */
width: 36px; height: 36px;
min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; /* 内寸を完全固定して拡大縮小でサイズが揺れないようにする */
border-radius: 50%;
border: 2px solid #fff;
display: flex; align-items: center; justify-content: center; /* 系統番号を中央に安定配置 */
font: 700 11px/1 "Segoe UI", "Yu Gothic UI", sans-serif;
text-align: center; letter-spacing: -0.02em;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
cursor: pointer; user-select: none;
will-change: transform; backface-visibility: hidden; /* GPU合成で拡大中のサブピクセルにじみ(丸が細く見える)を抑える。transformはMapLibreが配置に使うので上書きしない */
}
.sb-bus:hover { box-shadow: 0 0 0 3px #7fd0ff, 0 0 8px rgba(0, 0, 0, 0.65); }
/* 遅延リング (案1): 系統色→細い白(既存border)→遅延色3px→外白1.5px の3重構造 */
.sb-bus.sb-dly-y { box-shadow: 0 0 0 3px #ffd54f, 0 0 0 4.5px #fff, 0 0 8px rgba(0, 0, 0, 0.65); }
.sb-bus.sb-dly-r { box-shadow: 0 0 0 3px #ff5252, 0 0 0 4.5px #fff, 0 0 8px rgba(0, 0, 0, 0.65); }
/* バス型モード: SVG の角丸ボックスに同じリングを重ねる */
body.sb-busicon .sb-dly-y .sb-icon-bob svg { border-radius: 10px; box-shadow: 0 0 0 3px #ffd54f, 0 0 0 4.5px #fff; }
body.sb-busicon .sb-dly-r .sb-icon-bob svg { border-radius: 10px; box-shadow: 0 0 0 3px #ff5252, 0 0 0 4.5px #fff; }
/* 凡例のリング見本 */
.sb-lg-dly-y { box-shadow: 0 0 0 3px #ffd54f, 0 0 0 4.5px #fff; margin: 5px 3px; }
.sb-lg-dly-r { box-shadow: 0 0 0 3px #ff5252, 0 0 0 4.5px #fff; margin: 5px 3px; }
/* ★★2026-08-31 五周目 指摘2 (S3/S4): 位置の【出どころ】をマーカーの見た目で分ける。
・sb-src-hold … 実測が途絶えたので最後の位置を凍らせている (サーバー側の上限 90 秒)
・sb-src-est … 時刻表からの推定
★色では分けない。ご主人様には黄色以外は白に見えるため、色は手がかりにならない。
使えるのは【濃さ】と【縁の形】だけである。遅延リング (黄・赤) は別の話なので触らない。
★opacity は要素ごと薄くするので、丸モードでもバス型モードでも同じように効く。
バス型モードは丸の border が消える (下の body.sb-busicon .sb-bus) ため、
破線は SVG 側へ outline で足す (box-shadow は破線にできないため outline を使う)。 */
.sb-bus.sb-src-hold { opacity: .60; }
.sb-bus.sb-src-est { opacity: .45; border-style: dashed; }
body.sb-busicon .sb-src-est .sb-icon-bob svg { outline: 2px dashed #fff; outline-offset: 1px; border-radius: 10px; }
/* 経路上の停留所マーカーの名前ラベル (立て看板方式: 赤丸から棒が立ち、その上に名前プレート)
マーカーは常に画面向き(billboard)なので、3Dで傾けると看板が立って見え、黄線とも重ならない */
.sb-stop::before {
content: ""; position: absolute;
left: 50%; top: -32px; width: 2px; height: 32px;
margin-left: -1px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55));
pointer-events: none; /* 棒はタップを邪魔しない */
}
.sb-stop::after {
content: attr(data-name);
position: absolute; left: 50%; top: -50px;
transform: translateX(-50%);
white-space: nowrap;
font: 700 11px/1.5 "Yu Gothic UI", "Hiragino Sans", sans-serif;
color: #7fd0ff; /* 地図の地名 (白系) と差別化する水色 */
background: rgba(11, 37, 87, 0.78);
border: 1px solid rgba(255, 255, 255, 0.55); /* 看板の縁 */
padding: 0 6px; border-radius: 7px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
pointer-events: none; /* ラベルはタップを邪魔しない */
}
/* 時刻表ポップアップの行 (時刻 + 系統バッジ + 行き先) */
.sb-tt-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.sb-tt-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-tt-head { flex: 1; }
#sb-panel {
position: fixed; top: 10px; left: 10px; z-index: 10;
background: rgba(20, 24, 34, 0.80); color: #fff;
padding: 8px 14px; border-radius: 10px;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", sans-serif;
line-height: 1.35; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
#sb-title { font-weight: 700; font-size: 15px; letter-spacing: .04em; }
#sb-subtitle { font-size: 10px; opacity: 0.75; letter-spacing: .02em; margin-top: 1px; }
#sb-count { font-size: 13px; color: #7fd0ff; }
#sb-count.sb-offline { color: #ff8a80; } /* 通信断の警告色 */
/* ★★2026-08-31 五周目 指摘2 (S6): 実測フィードが途絶えている間だけ出る一行。
★板 (ダイアログ) は足さない。常設の一行で足りるうえ、板は操作を奪う。
★色では知らせない (ご主人様には黄色以外は白に見えるため)。太字と大きさで目立たせる。
hidden 属性で消すので、display は指定しない (指定すると hidden が効かなくなる)。 */
#sb-feedstale { font-size: 13px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
/* ★★2026-08-28 撤去: ここには直行便検索の見た目 (#sb-direct / .sb-dir-*) が 28行ありました。
ご主人様のご判断「直行便検索は古い仕様です。畳んでください」。
★対応する画面の部品も JavaScript も、解の中にもう存在しません。
いま利用者が行き先から探すのは、お手軽モードの行き先さがし (.sb-board-dest*) の方です。 */
/* タイトル右のβバージョン表示 (正データは csproj の 、アセンブリ経由でサーバーレンダリング) */
#sb-ver {
font-size: 12px; font-weight: 600;
color: #7fd0ff; opacity: 0.8;
margin-left: 8px; vertical-align: 3px;
}
/* ---- 運行アラートバナー (迂回・減便=黄 / 運休あり=赤) ---- */
#sb-alert-banner[hidden] { display: none !important; } /* hidden 属性が下の display:flex に負けて✕だけ残るのを防ぐ */
#sb-alert-banner {
position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
z-index: 1500;
max-width: min(560px, 92vw);
display: flex; align-items: center; gap: 10px;
background: #4a3800; color: #ffd54f;
border: 2px solid #ffd54f; border-radius: 12px;
padding: 8px 10px 8px 14px;
font-size: 14px; font-weight: 700; line-height: 1.5;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#sb-alert-banner.sb-al-severe { background: #4a0d0d; color: #ff8a80; border-color: #ff8a80; }
#sb-al-close {
flex: none; width: 28px; height: 28px;
border: none; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 255, 0.18); color: inherit;
font-size: 14px; font-weight: 700;
}
/* ---- 初回ウェルカム ---- */
#sb-welcome {
position: fixed; inset: 0; z-index: 4000;
background: rgba(5, 12, 32, 0.9);
display: flex; align-items: center; justify-content: center;
padding: 16px;
transition: opacity .4s;
}
#sb-welcome[hidden] { display: none; } /* hidden 属性を display:flex より優先 (閉じた後に透明な覆いが残ってタップを吸うのを防止) */
#sb-welcome-card {
background: #0b2557; border: 3px solid #fff; border-radius: 20px;
max-width: 420px; width: 100%; padding: 20px 22px 24px; text-align: center;
color: #fff;
max-height: calc(100dvh - 30px); /* 小さい画面でもカードが収まる */
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#sb-welcome-bus { width: min(200px, 44vw); /* 縦の小さいスマホでも収まる */ height: auto; margin: 0 auto 4px; display: block; animation: sb-bus-bounce 2.4s ease-in-out infinite; }
@keyframes sb-bus-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#sb-welcome-card h1 { font-size: 25px; margin: 4px 0 8px; }
#sb-welcome-card p { font-size: 15px; line-height: 1.7; margin: 0 0 14px; }
.sb-welcome-desc { text-align: justify; } /* 行末を揃えて折り返しの見た目を整える */
#sb-welcome-start {
font-size: 22px; font-weight: 800; padding: 14px 36px;
border: none; border-radius: 999px; cursor: pointer;
background: #ffd54f; color: #3a2b00;
box-shadow: 0 4px 0 #c9a227;
}
#sb-welcome-start:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9a227; }
#sb-welcome-card p#sb-welcome-id { font-size: 14px; color: #7fd0ff; margin: 28px 0 4px; font-weight: 700; } /* ボタンの影(下4px)の分も見込む。#sb-welcome-card p より詳細度を上げないと margin が効かない */
#sb-welcome-ios {
font-size: 12.5px;
line-height: 1.65;
margin: 22px 0 0; /* ボタンの立体影 (下4px) と重ならないよう間隔を確保 */
padding: 8px 10px;
background: rgba(255, 213, 79, 0.12);
border: 1px solid rgba(255, 213, 79, 0.55);
border-radius: 10px;
color: #ffd54f;
text-align: left;
}
#sb-welcome-credit {
margin-top: 18px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
#sb-welcome-credit p {
font-size: 10px;
line-height: 1.7;
margin: 0;
opacity: 0.55;
letter-spacing: 0.02em;
}
.sb-cr-sep { margin: 0 0.6em; opacity: 0.6; }
#sb-welcome-copy {
font-size: 11.5px !important;
font-weight: 700;
opacity: 0.95 !important;
margin-top: 9px !important;
letter-spacing: 0.1em; /* 字間を広げてロゴ風に、一番下・中央 */
}
#sb-delay-stat {
font-size: 13px;
font-weight: 700;
color: #ffd54f; /* 遅延の意味色 (黄) で統一 */
line-height: 1.4;
}
#sb-delay-stat.sb-ds-late { color: #ff6b6b; } /* まち全体が3分以上遅れ気味なら赤 */
#sb-clock { font-size: 36px; font-weight: 700; line-height: 1; opacity: 1; font-variant-numeric: tabular-nums; }
#sb-theme {
margin-top: 6px; padding: 3px 10px; font-size: 12px;
color: #fff; background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
cursor: pointer;
}
#sb-theme:hover { background: rgba(255,255,255,.24); }
#sb-credit {
position: fixed; bottom: 4px; left: 6px; z-index: 10;
font-size: 10px; color: #ddd;
background: rgba(20, 24, 34, 0.65);
padding: 2px 8px; border-radius: 6px;
text-align: center; line-height: 1.4;
}
.sb-credit-org { opacity: 0.85; }
body.sb-light { background: #f2f2f2; }
body.sb-light #sb-credit { color: #333; background: rgba(255,255,255,.65); }
/* MapLibre 標準アトリビューション (右下) を自前クレジットの上へ持ち上げて重なりを回避 */
.maplibregl-ctrl-bottom-right { bottom: 42px; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { font-size: 10px; }
/* 自前クレジットは左寄せ・幅を抑えて右下のアトリビューションと横に並ばないようにする */
#sb-credit { text-align: left; max-width: 62vw; }
/* ================= 漫画吹き出しポップアップ ================= */
/* 標準の三角しっぽは使わず、自前の尖ったしっぽを描く */
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-content {
position: relative; overflow: visible;
background: #0b2557; color: #ffffff;
border: 3px solid #ffffff;
border-radius: 18px;
padding: 12px 18px;
font-family: "Yu Gothic UI", "Hiragino Sans", "Segoe UI", sans-serif;
font-size: 14px; font-weight: 600; line-height: 1.6;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.maplibregl-popup-content b { font-size: 15px; }
.maplibregl-popup-close-button {
position: absolute; top: -14px; right: -14px;
width: 28px; height: 28px; padding: 0;
background: #0b2557; color: #fff;
border: 3px solid #fff; border-radius: 50%;
font-size: 15px; font-weight: 700; line-height: 22px;
box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.maplibregl-popup-close-button:hover { color: #fff; background: #1c4aa8; }
/* しっぽ (白い菱形の露出2辺に黒縁 → 漫画のツノ) */
.maplibregl-popup-content::after {
content: ""; position: absolute;
width: 18px; height: 18px; background: #0b2557;
}
/* 下向きしっぽ (吹き出しがバスの上にあるとき) */
.maplibregl-popup-anchor-bottom .maplibregl-popup-content::after,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content::after,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content::after {
bottom: -12px; left: 50%;
transform: translateX(-50%) rotate(45deg) skew(12deg, 12deg);
border-right: 3px solid #fff; border-bottom: 3px solid #fff;
}
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content::after { left: 28px; }
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content::after { left: auto; right: 16px; transform: rotate(45deg) skew(12deg, 12deg); }
/* 上向きしっぽ */
.maplibregl-popup-anchor-top .maplibregl-popup-content::after,
.maplibregl-popup-anchor-top-left .maplibregl-popup-content::after,
.maplibregl-popup-anchor-top-right .maplibregl-popup-content::after {
top: -12px; left: 50%;
transform: translateX(-50%) rotate(45deg) skew(12deg, 12deg);
border-left: 3px solid #fff; border-top: 3px solid #fff;
}
.maplibregl-popup-anchor-top-left .maplibregl-popup-content::after { left: 28px; }
.maplibregl-popup-anchor-top-right .maplibregl-popup-content::after { left: auto; right: 16px; transform: rotate(45deg) skew(12deg, 12deg); }
/* 左向き・右向きしっぽ */
.maplibregl-popup-anchor-left .maplibregl-popup-content::after {
left: -12px; top: 50%;
transform: translateY(-50%) rotate(45deg) skew(12deg, 12deg);
border-left: 3px solid #fff; border-bottom: 3px solid #fff;
}
.maplibregl-popup-anchor-right .maplibregl-popup-content::after {
right: -12px; top: 50%;
transform: translateY(-50%) rotate(45deg) skew(12deg, 12deg);
border-right: 3px solid #fff; border-top: 3px solid #fff;
}
/* ================= 設定画面 ================= */
#sb-settings-btn {
margin-top: 6px; margin-left: 6px; padding: 3px 10px; font-size: 12px;
color: #fff; background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
cursor: pointer;
}
#sb-settings-btn:hover { background: rgba(255,255,255,.24); }
/* 設定内の利用者番号 (控えめ表示) と登録リセット */
.sb-cid-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 14px; padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: 12px; opacity: 0.9;
}
.sb-cid-row b { color: #7fd0ff; margin-left: 4px; }
#sb-push-status { display: block; margin-top: 4px; color: #ffb4ab; font-weight: 700; }
#sb-push-status[hidden] { display: none; }
#sb-cid-reset {
font-size: 11px; padding: 5px 10px;
border: 1px solid #ff8a80; border-radius: 8px;
background: transparent; color: #ff8a80; cursor: pointer;
}
#sb-cid-reset:active { background: rgba(255, 138, 128, 0.15); }
/* z-index 1600: ガイド(1400)・運行アラート(1500)より上に置く。
2026-07-17 酒井様のご指摘 — スマホ幅ではガイダンス帯と設定パネルが重なるが、
旧値(100)ではガイドが上に乗って設定の✕が押せず、ガイドを閉じるまで設定を閉じられなかった。
お手軽モード(#sb-board=2000)は全画面の別画面なので、そちらより下のままにする。 */
/* ★2026-08-28: #sb-direct を外した (直行便検索を畳んだため。要素はもう存在しない) */
#sb-settings {
position: fixed; inset: 0; z-index: 1600;
background: transparent; /* 地図の見た目をそのまま確認できるよう幕なし */
display: flex; align-items: center; justify-content: center;
}
#sb-settings[hidden] { display: none !important; }
.sb-set-card {
width: min(360px, 92vw);
max-height: calc(100dvh - 24px); overflow-y: auto;
background: #0b2557; color: #fff;
border: 3px solid #fff; border-radius: 14px;
padding: 10px 14px;
font-family: "Yu Gothic UI", "Hiragino Sans", "Segoe UI", sans-serif;
box-shadow: 0 6px 24px rgba(0,0,0,.6);
}
.sb-set-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; padding-right: 32px; }
/* 開発用の診断ボタン (📐診断直線 / 🟠実形状 / 凡例) は JS が生成し position:fixed で右下に積む。
ローカルアクセス時しか出ないが、狭い画面ではバス停・お気に入りのシートに重なって下が読めなくなるため、
スマホ幅では隠す (F12のスマホモードも表示幅が縮むのでここに当たる)。 2026-07-17 酒井様のご指摘 */
@media (max-width: 640px) {
#sb-rsdbg-btn, #sb-rsdbg-line-btn, #sb-rsdbg-legend { display: none !important; }
}
/* ===== 設定タイル (スクロール最小・グリッド) ===== */
.sb-tiles {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
margin-bottom: 8px;
}
.sb-tile {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
padding: 6px 9px;
}
.sb-tile-toggle {
display: flex; align-items: center; justify-content: space-between;
font-size: 12.5px; font-weight: 600;
}
.sb-tile .sb-tile-h {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 11px; margin-bottom: 2px; line-height: 1.2;
}
.sb-tile .sb-tile-h b { color: #7fd0ff; font-variant-numeric: tabular-nums; font-size: 12px; }
.sb-tile input[type="range"] { width: 100%; height: 18px; cursor: pointer; accent-color: #7fd0ff; margin: 0; }
.sb-tile-act {
display: flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 700; cursor: pointer;
background: rgba(140, 70, 180, 0.34); color: #fff;
min-height: 40px; text-align: center;
}
.sb-tile-act:active { background: rgba(140, 70, 180, 0.55); }
.sb-time-label { font-size: 11px; color: #7fd0ff; font-weight: 700; margin-right: 4px; align-self: center; }
.sb-tile-wide { grid-column: 1 / -1; background: rgba(41, 98, 255, 0.34); }
.sb-tile-wide:active { background: rgba(41, 98, 255, 0.55); }
.sb-set-item { display: block; margin-bottom: 8px; font-size: 12px; }
.sb-set-item span { display: flex; justify-content: space-between; margin-bottom: 2px; }
.sb-set-item b { color: #7fd0ff; font-variant-numeric: tabular-nums; }
.sb-set-item input[type="range"] {
width: 100%; height: 20px; cursor: pointer; accent-color: #7fd0ff;
}
/* (旧・設定の閉じるボタンは丸バッジ .sb-x に統一) */
#sb-settings-close:hover { background: #dce8ff; }
/* ================= モードボタン (2倍サイズのバッジ) ================= */
#sb-buttons {
display: flex; flex-direction: row; align-items: flex-end; gap: 6px; /* 両列を下端で揃える */
margin-top: 8px; width: auto;
}
/* 2列構成: 左=普段使う (よく使うほど下) / 右=たまに使う。ボタンの大きさは左右同じ。
右は個数が少ないので下端に寄せ、上を空白にする (B案: 左のボタンサイズに合わせる) */
#sb-btn-left, #sb-btn-right { display: flex; flex-direction: column; gap: 5px; }
#sb-btn-right { justify-content: flex-end; } /* 右列を下端寄せ → 上が空白、各ボタンは左と同サイズ */
#sb-btn-left { width: 190px; }
#sb-btn-right { width: 190px; } /* 左列と同じ幅に統一 (見た目の揃え) */
#sb-buttons button {
width: 100%; margin: 0; padding: 10px 12px;
font-size: 17px; font-weight: 700; text-align: left;
white-space: nowrap; /* ボタン内の折り返し禁止 */
color: #fff; background: rgba(255, 255, 255, 0.14); /* カード型を維持 (統一感重視・高さのみ圧縮) */
border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px;
cursor: pointer;
}
#sb-buttons button:hover { background: rgba(255, 255, 255, 0.26); }
/* 機能グループ別の背景色: 見る=青 / 通知=緑 / 調べる=琥珀 / ツール=紫 / 情報=グレー (ON 時の .sb-on が優先) */
#sb-buttons #sb-mode-all,
/* ★2026-09-22 系統検索: ご主人様のご指示「バス停の右隣に【同じ色で】」。
★「バス停」と同じ規則にぶら下げる。色の値を写して並べると、片方だけ直す事故が起きる。 */
#sb-buttons #sb-mode-single, #sb-buttons #sb-mode-stops,
#sb-buttons #sb-route-search { background: rgba(30, 90, 220, 0.62); }
#sb-buttons #sb-mode-announce { background: rgba(20, 150, 70, 0.85); }
#sb-buttons #sb-speak, #sb-buttons #sb-home { background: rgba(140, 70, 180, 0.62); }
/* 右列 (たまに使う) は控えめなグレーで統一 */
#sb-buttons #sb-mode-busicon, #sb-buttons #sb-legend-btn,
#sb-buttons #sb-help, #sb-buttons #sb-settings-btn { background: rgba(120, 130, 145, 0.45); }
/* 右列の頭数合わせゴースト: 場所は取るが見えない・押せない (行数7対7で左右の高さを自動一致)。
★2026-09-22 四便目: 2個とも出しっぱなしになった (読み上げと連動する出し入れは廃止)。 */
#sb-buttons .sb-btn-ghost { visibility: hidden; pointer-events: none; }
/* ★★2026-09-22 四便目 (ご主人様のご判断): 「🔊 読み上げ」は読み上げ設定が OFF でも消さず、薄く残す。
→ 左右の列がいつも 7 行で揃い、行の穴も、入切のたびの行の移動も無くなる。
★薄さ 0.45 は、この解に既にある「効いていない印」の作法に揃えた
(#sb-reload-fab.sb-compass-off #sb-compass-svg / #sb-stoploc-arrow.sb-compass-off)。
★幅も高さも変えない —— 薄いだけである。行の高さが変わると、上の「いつも 7 行」が意味を失う。
★pointer-events も切らない。薄いときに押したら ON にするのが、この釦の役目だからである
(sorabus.js の toggleSpeech)。★「見えているのに押せない」は、いちばん質の悪い形になる。 */
#sb-buttons #sb-speak.sb-off { opacity: 0.45; }
/* お手軽モードは一番使う想定: ひときわ大きく・目立つ琥珀色
(★2026-08-30 お手軽入口: 旧 #sb-delay「⏰ カウントダウン」から、id ごと #sb-menu-board へ改名) */
#sb-buttons #sb-menu-board {
background: #ffb300; color: #231a00; border-color: #ffd54f;
/* 大きさは他ボタンと完全同一にする (特大だと下端揃えで右列全行が数px下にズレる)。強調は琥珀色が担う */
/* ★アイコンは絶対配置で流し込みの外へ出す。inline-flex で横に並べると 28px の絵が行箱を押し広げ、
このボタンだけ数px高くなって上の「完全同一」が崩れるため。左の padding をアイコン分だけ広げて場所を作る */
position: relative; padding-left: 44px;
}
/* ★アイコンの色は currentColor (= 上の color) 追従。時計の下の抜き円だけは SVG 側に fill="#ffb300" を直書きしており、
これは上の background と同じ色でなければならない (違うと時計の下からバスの輪郭が透ける)。背景色を変えたら SVG も直すこと */
#sb-buttons #sb-menu-board svg {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px;
}
#sb-buttons button.sb-on {
background: #7fd0ff; color: #0b2557; border-color: #7fd0ff;
}
#sb-hint {
display: none; margin-top: 8px;
font-size: 13px; font-weight: 700; color: #ffd54f;
}
/* ================= 全点灯モード: ミニ吹き出し (バスに自動追従) ================= */
.sb-mini {
display: none;
position: absolute; bottom: 36px; left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: #0b2557; color: #fff;
border: 2px solid #fff; border-radius: 10px;
padding: 2px 9px;
font-size: 11px; font-weight: 700; line-height: 1.4;
pointer-events: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.sb-mini::after {
content: ""; position: absolute; left: 50%; bottom: -6px;
width: 8px; height: 8px; background: #0b2557;
border-right: 2px solid #fff; border-bottom: 2px solid #fff;
transform: translateX(-50%) rotate(45deg);
}
body.sb-allon .sb-mini { display: block; }
/* ================= 単一モード: 路線ラインと停留所 (キャンバス外描画で色鮮やか) ================= */
#sb-route-svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
overflow: visible;
}
#sb-route-svg path {
fill: none;
stroke: #ffe23d; /* 明るい黄色 */
stroke-width: 5;
stroke-opacity: 0.92;
stroke-linejoin: round;
stroke-linecap: round;
}
.sb-stop {
width: 16px; height: 16px; border-radius: 50%;
background: #ff3b30; /* 内側: 明るい赤 */
border: 3px solid #ffffff; /* 外側: 白 */
box-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
cursor: pointer;
z-index: 2;
}
.sb-bus { z-index: 3; }
/* ================= 現在地マーカー (エミュレート) ================= */
.sb-me {
width: 22px; height: 22px; border-radius: 50%;
background: #2196f3;
border: 3px solid #ffffff;
z-index: 4;
animation: sb-pulse 2s infinite;
cursor: grab;
}
.sb-me:active { cursor: grabbing; }
@keyframes sb-pulse {
0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.55); }
70% { box-shadow: 0 0 0 18px rgba(33, 150, 243, 0); }
100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}
/* ================= お気に入り路線 (⭐FAB + ボトムシート) ================= */
#sb-fav-fab {
position: fixed; right: 14px; bottom: 26px; z-index: 50;
width: 56px; height: 56px; border-radius: 50%;
font-size: 24px; line-height: 1;
background: #0b2557; color: #ffd54f;
border: 3px solid #ffffff; cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#sb-fav-fab:hover { box-shadow: 0 0 0 3px #7fd0ff, 0 4px 14px rgba(0, 0, 0, 0.5); }
/* 読み上げオン/オフFAB (⭐お気に入りの真上。丸の大きさは左のお手軽FABと同じ64px) */
#sb-speak-fab {
position: fixed; right: 14px; bottom: 94px; z-index: 50;
width: 56px; height: 56px; border-radius: 50%; padding: 0;
font-size: 24px; line-height: 1;
background: #0b2557; color: #ffd54f;
border: 3px solid #ffffff; cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#sb-speak-fab:hover { box-shadow: 0 0 0 3px #7fd0ff, 0 4px 14px rgba(0, 0, 0, 0.5); }
#sb-speak-fab.sb-off { color: #8fa2c5; } /* オフ時はグレー (絵文字も🔇に切替) */
/* 再読み込みFAB (右上・スマホのみ。裏に回って戻った時にアイコンが消える保険) */
#sb-reload-fab { display: none; } /* 既定は非表示。スマホでのみ下の@mediaで表示 */
#sb-reload-fab.sb-spin { animation: sb-reload-spin 0.6s ease; }
@keyframes sb-reload-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
#sb-fav-sheet {
position: fixed; inset: 0; z-index: 100;
background: transparent;
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none; /* 地図はそのまま操作可能 */
}
#sb-fav-sheet[hidden] { display: none; }
.sb-fav-card {
pointer-events: auto;
overscroll-behavior: contain; /* シート内スクロールをページへ連鎖させない (iOS) */
/* 2026-07-17: 古い2枚(バス停・お気に入り)が「下にチロッと出て操作しづらい」ため、
お手軽モード相当の大きさへ。min-height で中身が少なくても一定の高さを確保する。 */
width: min(420px, 92vw); min-height: 34vh; max-height: 68vh; overflow-y: auto;
background: #0b2557; color: #ffffff;
border: 3px solid #ffffff; border-bottom: none;
border-radius: 14px 14px 0 0;
padding: 10px 12px 12px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
/* 2026-07-17: padding-right の指定漏れで、タイトルが右上の✕ (.sb-x) の下まで伸びて被っていた。
汎用の .sb-set-title は 32px 空けているが、この上書きが引き継いでいなかった。
✕は 30px 幅 + 右10px なので 46px 空ける (お気に入り・バス停はカードが広い分ゆとりを持たせる)。 */
.sb-fav-card .sb-set-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; padding-right: 46px; }
/* 「▼ まだ下にあります」の目印。お手軽モード(#sb-board-more)と同じ見た目・同じ跳ね方に揃える。
(★2026-08-30 お手軽入口: 揃え先の1つだったガイドの #sb-guide-more は、カウントダウン案内ごと撤去済み)
カードの外(ラッパ直下)に置くので、リストをスクロールしても常に見える。 (2026-07-17) */
.sb-more-tag {
pointer-events: none;
position: absolute; left: 50%; transform: translateX(-50%);
bottom: 6px; z-index: 6;
background: #ffe23d; color: #3a2e00;
font-size: 14px; font-weight: 700;
padding: 4px 14px; border-radius: 999px;
animation: sb-more-bounce 1.2s ease-in-out infinite;
}
.sb-more-tag[hidden] { display: none !important; }
.sb-fav-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.sb-fav-badge {
min-width: 42px; text-align: center; flex: none;
padding: 3px 6px; border-radius: 12px;
font-weight: 700; font-size: 12px;
}
.sb-fav-head { flex: 1; font-size: 13px; }
.sb-fav-del {
flex: none; background: transparent; border: none;
color: #ff8a80; font-size: 15px; cursor: pointer; padding: 3px 6px;
}
.sb-fav-empty { padding: 10px 2px; font-size: 12px; opacity: 0.85; }
/* お気に入り行の走行中サイン: 上下ピコピコ + 前後がX字にシーソーする🚌。タップでそのバスへ */
.sb-fav-run {
flex: none; background: transparent; border: none;
font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer;
animation: sb-fav-gallop 0.6s ease-in-out infinite;
}
.sb-fav-run[hidden] { display: none; }
@keyframes sb-fav-gallop {
0%, 100% { transform: translateY(0) rotate(-7deg); }
25% { transform: translateY(-2px) rotate(0deg); }
50% { transform: translateY(0) rotate(7deg); }
75% { transform: translateY(-2px) rotate(0deg); }
}
/* (旧・閉じるボタンのスタイルは丸バッジ .sb-x に統一したため削除) */
/* iOS風トグルスイッチ (ON=通知する) */
.sb-switch { position: relative; width: 42px; height: 24px; flex: none; }
.sb-switch input { display: none; }
.sb-slider {
position: absolute; inset: 0;
background: #5a6478; border-radius: 12px;
transition: 0.2s; cursor: pointer;
}
.sb-slider::before {
content: ""; position: absolute;
width: 18px; height: 18px; left: 3px; top: 3px;
background: #ffffff; border-radius: 50%;
transition: 0.2s;
}
.sb-switch input:checked + .sb-slider { background: #4cd964; }
.sb-switch input:checked + .sb-slider::before { transform: translateX(18px); }
/* 吹き出しのお気に入り☆ (左上の丸バッジ、右上の✕と対のデザイン) */
.sb-fav-btn {
position: absolute; top: -14px; left: -14px;
width: 28px; height: 28px; padding: 0; margin: 0;
background: #0b2557; color: #ffd54f;
border: 3px solid #ffffff; border-radius: 50%;
font-size: 14px; font-weight: 700; line-height: 22px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.sb-fav-btn:hover { background: #1c4aa8; }
.sb-fav-btn.sb-faved { background: #ffd54f; color: #0b2557; }
.sb-veh { margin-top: 3px; font-size: 11px; font-weight: 600; opacity: 0.9; line-height: 1.5; } /* 実測バッジ (吹き出し内) */
.sb-late { color: #ff8a80; font-weight: 700; } /* 5分以上の遅れ */
.sb-dly { color: #ffd54f; font-weight: 700; } /* 1〜5分の遅れ */
.sb-ontime { color: #7fd0ff; } /* ほぼ定刻 */
/* ================= ⏰到着カウントダウン (中央特大カード) ================= */
#sb-cd {
position: fixed; inset: 0; z-index: 110;
display: flex; align-items: center; justify-content: center;
background: transparent; pointer-events: none; /* 地図はそのまま操作可能 */
}
#sb-cd[hidden] { display: none; }
.sb-cd-card {
pointer-events: auto; position: relative;
min-width: 280px; max-width: 86vw;
background: #0b2557; color: #ffffff;
border: 3px solid #ffffff; border-radius: 16px;
padding: 14px 24px 16px;
text-align: center;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
font-family: "Yu Gothic UI", "Hiragino Sans", "Segoe UI", sans-serif;
animation: sb-boing 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#sb-cd-route { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
#sb-cd-stop { font-size: 13px; opacity: 0.9; }
#sb-cd-time {
font-size: 64px; font-weight: 800; line-height: 1.15;
color: #ffd54f; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
#sb-cd-time.sb-cd-small { font-size: 30px; padding: 14px 0; }
#sb-cd-sub { font-size: 12px; font-weight: 600; color: #7fd0ff; }
/* バス停シートの⏰ボタン (☆と同じ操作感) */
.sb-dep-cd {
flex: none; background: transparent; border: none;
font-size: 18px; cursor: pointer; padding: 2px 4px;
}
/* ================= バス停モード (全バス停 + ビヨーンシート) ================= */
.sb-allstop {
width: 14px; height: 14px; border-radius: 50%;
background: #ff3b30; /* 内側: 赤 */
border: 3px solid #ffe23d; /* 外枠: 黄 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.55);
cursor: pointer;
z-index: 2;
}
.sb-allstop:hover { box-shadow: 0 0 0 3px #7fd0ff, 0 0 5px rgba(0, 0, 0, 0.55); }
/* ===== 🗺 地図からバス停をえらぶ (お手軽モード, 2026-07-23) ===== */
/* えらび中はバス・経路線・吹き出しを完全に消す (ポーリングで新しく生まれるバスもCSSで一律非表示)。
JS側の display 操作だけだと、えらび中に到着した新規バスが表示されてしまうため (2026-07-23 実機報告) */
body.sb-mappick-on .sb-bus,
body.sb-mappick-on .sb-stop,
body.sb-mappick-on #sb-route-svg,
body.sb-mappick-on .maplibregl-popup { display: none !important; }
/* えらび中はバス停を大きく・タップしやすく (指でも外さない大きさへ) */
body.sb-mappick-on .sb-allstop {
width: 22px; height: 22px; border-width: 4px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 0 8px rgba(0, 0, 0, .6);
animation: sb-mappick-pulse 1.6s ease-in-out infinite;
}
@keyframes sb-mappick-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 0 8px rgba(0,0,0,.6); }
50% { box-shadow: 0 0 0 9px rgba(255,226,61,.30), 0 0 8px rgba(0,0,0,.6); }
}
@media (prefers-reduced-motion: reduce) {
body.sb-mappick-on .sb-allstop { animation: none; }
}
#sb-mappick {
position: fixed; inset: 0; z-index: 1200;
pointer-events: none; /* 地図を触れるように、子だけ有効化 */
}
#sb-mappick-guide {
position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
max-width: min(94vw, 560px); box-sizing: border-box;
display: flex; flex-direction: column; gap: 2px; align-items: center;
padding: 8px 14px; border-radius: 12px;
background: rgba(10, 26, 74, .94); border: 2px solid #ffe23d;
box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
pointer-events: none; text-align: center;
}
#sb-mappick-gtext { font-size: 19px; font-weight: 800; color: #ffe23d; line-height: 1.25; }
#sb-mappick-gsub { font-size: 14px; font-weight: 700; color: #dce8ff; line-height: 1.25; }
#sb-mappick-cancel {
position: absolute; left: 50%; transform: translateX(-50%);
/* 2026-07-31: ◀もどると同じ理由で 12px → 88px (下部の出典2つにかぶらないように) */
bottom: calc(88px + env(safe-area-inset-bottom, 0px));
min-width: 190px; padding: 12px 22px;
font-size: 19px; font-weight: 800; color: #0a1a4a;
background: #ffe23d; border: 2px solid #10275a; border-radius: 12px;
box-shadow: 0 3px 12px rgba(0, 0, 0, .45);
pointer-events: auto; cursor: pointer;
}
#sb-mappick-cancel:active { filter: brightness(.92); }
/* 発車時刻の行 (1便=1カードの2段構成: 上段=系統・行き先・操作 / 下段=時刻・待ち時間) */
.sb-dep-row {
display: block; cursor: pointer;
padding: 6px 9px; margin: 6px 0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.16); /* .sb-fav-row の下線を枠線に統一 */
}
.sb-dep-row:hover { background: rgba(255, 255, 255, 0.12); }
/* お気に入り一覧の行: .sb-dep-row の display:block に負けて flex が外れ、
バッジと行き先が密着していたのを修正 (gap 復活 + 縦中央揃え) */
#sb-fav-list .sb-fav-row.sb-dep-row { display: flex; align-items: center; gap: 9px; }
/* ★★2026-08-31 六周目 (副長 A2-6 / 茜7): 行の中に出す断りの一行。
取得できなかった時だけ現れるので、0件・正常系の見た目は一つも変わらない。
色は通知の失敗表示 (#sb-push-status) と同じ赤系に揃える。
★お気に入り一覧の行は flex なので、断りが横へ割り込まないよう折り返しを許して
幅いっぱいの1行にする (バッジ・行き先・☆ の並びは、断りが無い間は今までと同じ)。 */
.sb-dep-note { font-size: 12px; line-height: 1.4; color: #ffb4ab; margin-top: 3px; }
#sb-fav-list .sb-fav-row.sb-dep-row { flex-wrap: wrap; }
#sb-fav-list .sb-fav-row.sb-dep-row .sb-dep-note { flex-basis: 100%; margin-top: 2px; }
.sb-dep-top { display: flex; align-items: center; gap: 7px; }
.sb-dep-top .sb-fav-head { flex: 1; font-size: 13px; line-height: 1.35; }
.sb-dep-bottom { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.sb-dep-time { flex: none; min-width: 42px; font-weight: 700; font-size: 13px; }
.sb-dep-fav {
flex: none; background: transparent; border: none;
color: #ffd54f; font-size: 20px; cursor: pointer; padding: 2px 6px;
}
/* 閉じるボタン (バス停シート用、お気に入りと同スタイル) */
.sb-sheet-close {
display: block; width: 100%; margin-top: 10px;
padding: 10px; font-size: 15px; font-weight: 700;
background: #1c3a75; color: #ffffff;
border: 2px solid #ffffff; border-radius: 10px; cursor: pointer;
}
/* ビヨーン アニメーション */
@keyframes sb-boing {
0% { transform: translateY(100%) scale(0.9); }
60% { transform: translateY(-14px) scale(1.02); }
80% { transform: translateY(6px) scale(0.99); }
100% { transform: translateY(0) scale(1); }
}
.sb-boing { animation: sb-boing 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
/* ================= 自宅マーカー ================= */
.sb-home {
font-size: 26px;
line-height: 1;
cursor: default;
z-index: 3;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
/* バス停シートの表示位置 (お気に入りシートと同じ固定オーバーレイ) */
#sb-stop-sheet {
position: fixed; inset: 0; z-index: 100;
background: transparent;
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none; /* 地図はそのまま操作可能 */
}
#sb-stop-sheet[hidden] { display: none; }
#sb-stop-sheet .sb-fav-card { pointer-events: auto; }
/* ================= バス型アイコンモード (🚌 丸⇔バス切替) ================= */
.sb-num { pointer-events: none; }
.sb-icon-rot {
display: none;
position: absolute;
width: 26px; height: 42px;
left: 50%; top: 50%;
margin-left: -13px; margin-top: -21px;
transform-origin: center;
transition: transform 0.8s ease; /* 回頭をなめらかに */
pointer-events: none;
}
/* バス型モード: 丸を消してバスを表示 */
body.sb-busicon .sb-bus {
background: transparent !important;
border: none;
box-shadow: none;
}
body.sb-busicon .sb-icon-rot { display: block; }
body.sb-busicon .sb-num {
position: absolute;
left: 50%; bottom: -14px;
transform: translateX(-50%);
font-size: 11px; line-height: 1.4;
padding: 0 6px;
background: rgba(11, 37, 87, 0.9);
color: #ffffff !important;
border: 1px solid #ffffff;
border-radius: 8px;
white-space: nowrap;
}
/* 地図上のバスは揺らさない (進行方向が分かりづらくなるため揺れは廃止) */
@keyframes sb-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1.5px); }
}
/* バス停シート: 走行中サイン (お気に入り行と同じペコペコ🚌に統一) と本日終了表示 */
.sb-dep-run {
flex: none; width: 20px;
font-size: 15px; text-align: center;
animation: sb-fav-gallop 0.6s ease-in-out infinite;
}
.sb-dep-none {
font-size: 12px;
opacity: 0.55;
}
/* ================= 丸バッジの閉じる× (吹き出しと統一デザイン) ================= */
.sb-sheet-wrap {
position: relative;
pointer-events: auto;
}
.sb-x {
position: absolute; top: 10px; right: 10px; z-index: 5; /* カドから一歩内側でバランス配置 (スマホの見切れも防止) */
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; min-width: 30px; max-width: 30px;
border-radius: 50%;
background: #16346e; color: #ffffff; /* カードより一段明るい紺 (悪目立ちしない) */
border: 2px solid rgba(255, 255, 255, 0.85);
font-size: 14px; font-weight: 700; line-height: 1;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
padding: 0; margin: 0;
}
.sb-x:hover { background: #1c3a75; }
/* ラッパ内のカードは従来どおりスクロール可能 */
.sb-sheet-wrap .sb-fav-card { pointer-events: auto; }
/* ================= タイムトラベルパネル (時刻スライダー) ================= */
#sb-time-panel {
position: fixed; left: 0; right: 0; bottom: 70px; z-index: 60;
display: flex; justify-content: center;
pointer-events: none;
}
#sb-time-panel[hidden] { display: none; }
.sb-time-card {
pointer-events: auto;
display: flex; align-items: center; gap: 10px;
width: min(560px, 94vw);
background: #0b2557; color: #ffffff;
border: 3px solid #ffffff; border-radius: 14px;
padding: 10px 14px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#sb-time-val {
flex: none; min-width: 64px;
font-size: 18px; font-weight: 700;
color: #ffd54f;
}
#sb-time-slider { flex: 1; }
.sb-time-card button {
flex: none; padding: 8px 12px;
font-size: 14px; font-weight: 700;
background: #1c3a75; color: #ffffff;
border: 2px solid #ffffff; border-radius: 10px; cursor: pointer;
white-space: nowrap;
}
.sb-time-card button:hover { background: #2a4d96; }
/* バス停シートの「あと◯分」 */
.sb-dep-wait {
flex: none;
color: #ffd54f; font-weight: 700; font-size: 11px;
}
/* ================= メニュー整理 (区切り線 / 準備中 / 開閉) ================= */
.sb-sep {
height: 1px;
background: rgba(255, 255, 255, 0.28);
margin: 2px 4px;
}
.sb-soon { opacity: 0.55; }
.sb-soon::after { content: " 準備中"; font-size: 10px; opacity: 0.9; }
#sb-title { cursor: pointer; user-select: none; }
body.sb-menu-min #sb-buttons { display: none; } /* ヒントは畳んでいても表示 (選択中の案内等) */
/* ================= お気に入り検索 ================= */
#sb-fav-search {
width: 100%; box-sizing: border-box;
margin: 3px 0 6px;
padding: 6px 10px;
font-size: 13px;
border: 2px solid #ffffff; border-radius: 8px;
background: #122f66; color: #ffffff;
}
#sb-fav-search::placeholder { color: rgba(255, 255, 255, 0.55); }
#sb-fav-results { margin-bottom: 6px; }
#sb-fav-results .sb-fav-row { background: rgba(255, 255, 255, 0.05); }
/* ================= 🔢 系統検索 (2026-09-22) =================
系統番号から【いま走っている実車】を探す板。器はお気に入り検索と同じ
(.sb-sheet-wrap / .sb-fav-card / .sb-more-tag) なので、ここに足すのは
・板そのものの置き場所 (#sb-rs-sheet)
・入力欄 (#sb-rs-input … #sb-fav-search と同じ見た目。★五便目で幅だけ釦 3 つ分にした)
・数字の釦 (.sb-rs-keys / .sb-rs-key)
・結果の行 (.sb-rs-row … .sb-fav-row の中に押し所を三つ並べたもの。
★五便目で [札 .sb-rs-badge][本文 .sb-rs-main][★ .sb-dep-fav] の三つになった。
★ は お気に入り検索の行と同じ .sb-dep-fav をそのまま使うので、ここには足していない)
・支援技術にだけ読める状態文 (.sb-sr-only … 2026-09-22 二便目で追加)
の五つだけである。 */
#sb-rs-sheet {
position: fixed; inset: 0; z-index: 100;
background: transparent;
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none; /* 地図はそのまま操作可能 */
}
#sb-rs-sheet[hidden] { display: none; }
/* 入力欄。
★★2026-09-22 五便目 (ご主人様のご指示 3): 幅は【数字の釦 3 つ分】にして左へ寄せる。
系統番号はいちばん長くて 4 字なので、板の幅いっぱいは要らない。
★もう一つの狙い: 右上の閉じる (✕) と重ならないこと。
✕ は板の右上に浮いている (.sb-x … right:10px / 幅 30px / 上から 10〜40px)。
欄が板いっぱいだと、欄の右端がちょうどその帯まで伸びて【重なっていた】。
半分の幅にすると、欄の右端は板の真ん中で止まるので、重なりようがない。
★幅は釦の格子 (.sb-rs-keys) の数からそのまま割り出す。格子は 6 列・隙間 5px なので:
釦 3 つ分 = 3 列 + そのあいだの隙間 2 つ
= (100% − 隙間 5 つ分 25px) ÷ 6 × 3 + 10px
= 50% − 2.5px
★格子の列数か隙間を変える時は、ここも一緒に直すこと (数を二か所に書いているため)。
★左寄せは、欄が block なので幅を縮めるだけで決まる (margin は今までどおり)。 */
#sb-rs-input {
width: calc((100% - 25px) / 6 * 3 + 10px); box-sizing: border-box;
margin: 3px 0 6px;
padding: 6px 10px;
font-size: 15px;
border: 2px solid #ffffff; border-radius: 8px;
background: #122f66; color: #ffffff;
}
#sb-rs-input::placeholder { color: rgba(255, 255, 255, 0.55); }
/* 打鍵ゼロでも押せる釦。★指でも拡大鏡でも狙えるよう 44px 角を下限にする。
★★2026-09-22 二便目 (ご主人様のご指示 1・3): 並べ方を【折り返し】から【格子】へ替えた。
旧: display:flex + flex-wrap。釦の幅がまちまちで、行末がどこで切れるか誰にも分からなかった。
新: display:grid で列を固定する。こうすると「行末が欠けない形」を数で決められる。
★★2026-09-22 三便目 (ご主人様のご判断): 英字の釦を全部外し、列は【常に 6 列】にした。
> 「アルファベットはいらない。数字の番号だけで、その数字を含むものを出せばいい」
釦は 0-9 と「1字けす」(2 列ぶん) の 11 個。6 列ならちょうど二行で、余りも穴も出ない:
0 1 2 3 4 5 / 6 7 8 9 1字けす(2 列)
★だから「最後の行の残りを全部 1字けす へ渡す」仕掛け (JavaScript が入れていた
--sb-rs-del-span) も、383px で 7 列から 6 列へ落とす @media も要らなくなり、外した。
★6 列が入ることの実測: 板 (.sb-fav-card) の内側の幅は min(420px, 92vw)。★このファイルには
box-sizing のまとめ直しが無いので content-box、つまり border 3px と padding 12px は【外側】に付く。
スマホ 390px … 0.92 × 390 = 358.8px。縦のスクロール棒 (約 15px) を引いて約 344px。
6 列 = 44×6 + 5×5 = 289px ≤ 344px → 入る。
いちばん狭い部類の 375px (iPhone SE) でも (0.92×375 − 15 − 25) ÷ 6 ≒ 51px で、44px を割らない。
★列の数はここ (--sb-rs-cols) が正本である。 */
.sb-rs-keys {
--sb-rs-cols: 6;
display: grid;
grid-template-columns: repeat(var(--sb-rs-cols), minmax(40px, 1fr));
gap: 5px; margin: 0 0 8px;
}
.sb-rs-key {
min-width: 0; min-height: 44px; /* 幅は格子の 1 列ぶん。min-width:0 は中身での押し広げ止め */
padding: 6px 8px;
font-size: 18px; font-weight: 700; line-height: 1;
background: rgba(30, 90, 220, 0.62); color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 8px;
cursor: pointer;
}
.sb-rs-key:hover { background: rgba(30, 90, 220, 0.9); }
/* 消す系はグレー (右列の「たまに使う」釦と同じ考え) */
.sb-rs-key-op { background: rgba(120, 130, 145, 0.55); font-size: 14px; }
.sb-rs-key-op:hover { background: rgba(120, 130, 145, 0.85); }
/* 「1字けす」は【数字の釦 2 つ分】(ご主人様のご指示 1)。
★三便目で釦が 11 個・格子が常に 6 列に固まったので、ここで 2 列と決め打ちできるようになった
(旧は英字の頭が何種あるかで最後の行の残りが変わるため、JavaScript から幅を渡していた)。 */
.sb-rs-key-del { grid-column: span 2; }
/* 二段の見出し (上=走っている便 / 下=走っていない系統) */
.sb-rs-sec {
margin: 10px 0 2px; font-size: 13px; font-weight: 700;
color: #ffd54f; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 3px;
}
/* 結果の一行。
★★2026-09-22 五便目 (ご主人様のご判断): 押し所が【三つ】になった。
[札 (系統番号)] [本文 (行き先・次の停・遅れ)] [★ お気に入り]
三つは【兄弟】である (入れ子にしない)。だから行そのものは押し所ではなくなり、
button から div へ戻した (四便目までは行ぜんぶが一つの button だった)。
★押せるのは中の三つで、どれも Tab で届く —— キーボードだけで選べることは変わらない。
★寸法は .sb-fav-row のまま (あいだ 8px・上下 6px)。拡大鏡で押し所を取り違えないよう、
三つのあいだの空きは、他の一覧の行と【同じ数】にする (新しい寸法は作らない)。
★色と下線は今までどおり。button だった頃の打ち消し (width/font/color/text-align) は、
div には要らないので落とした。 */
.sb-rs-row {
box-sizing: border-box;
flex-wrap: wrap;
background: rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.sb-rs-row:hover { background: rgba(255, 255, 255, 0.14); }
/* ① 札 … 見た目は他の場所の丸バッジ (.sb-fav-badge) のまま。
★button の既定を打ち消すのは枠と字体だけ。font-family を継承させないと、
この札だけ別の書体になって、同じ丸バッジに見えなくなる。 */
.sb-rs-badge {
border: none; cursor: pointer;
font-family: inherit; line-height: 1.4;
}
/* ② 本文 … 行の残りぜんぶ。中で行き先 (1段目) と補足 (2段目) が折り返す。
★あいだの空き (gap) は .sb-fav-row と同じ 8px。四便目まで 1 枚の button だった頃も、
この 8px が行き先と補足のあいだに入っていた —— 行の高さを変えないための写しである。 */
.sb-rs-main {
flex: 1; min-width: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 0; text-align: left;
background: transparent; color: inherit; border: none;
font: inherit; cursor: pointer;
}
.sb-rs-sub { flex-basis: 100%; font-size: 12px; line-height: 1.4; opacity: 0.9; margin-top: 2px; }
/* 走っていない系統の一行は、走っている便と取り違えないよう淡い赤系 (.sb-dep-note と同じ色) */
.sb-rs-off .sb-rs-sub { color: #ffb4ab; opacity: 1; }
/* 目では見えないが、支援技術には読める一行 (#sb-rs-status)。
★★2026-09-22 二便目 (副長6【要修正】): display:none や visibility:hidden では【読まれない】。
読ませたまま目から消すには、この形 (1px に潰して切り抜く) しかない。
★position:absolute の基点は .sb-sheet-wrap (position:relative) 。1px なので、どこに
置かれても板の見た目は動かない。 */
.sb-sr-only {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* ★スマホでは、他の板と同じ 44vh だと結果の行がほとんど見えない。この板には入力欄と
釦の格子 (二行) が結果の【上】に積まれるためである。番号から実車へ着くのがこの板の目的
なので、高さは結果の側へ回す。
★★2026-09-22 三便目: 英字の釦を外して格子が 4 行から 2 行に減ったが、72vh のまま残した。
旧の理由 (釦だけで板が埋まる) は消えたが、数字を【含む】絞り込みに変わったぶん結果は
増える (「1」だけでも出る) ので、見える行が多いほうがこの板には効く。
★伸ばすのはこの板だけ (.sb-fav-card そのものは触らない = 他の板は今までどおり)。 */
@media (max-width: 640px) {
#sb-rs-sheet .sb-fav-card { max-height: 72vh; }
}
/* ================= 凡例シート ================= */
#sb-legend-sheet {
position: fixed; inset: 0; z-index: 100;
background: transparent;
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none;
}
#sb-legend-sheet[hidden] { display: none; }
.sb-legend-row {
display: flex; align-items: center; gap: 9px;
padding: 5px 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
font-size: 13px;
}
.sb-lg-stop {
width: 14px; height: 14px; border-radius: 50%; flex: none;
background: #ff3b30; border: 3px solid #ffe23d; display: inline-block;
}
.sb-lg-selstop {
width: 14px; height: 14px; border-radius: 50%; flex: none;
background: #ff3b30; border: 3px solid #ffffff; display: inline-block;
}
.sb-lg-me {
width: 16px; height: 16px; border-radius: 50%; flex: none;
background: #2196f3; border: 3px solid #ffffff; display: inline-block;
}
.sb-lg-line {
width: 36px; height: 5px; border-radius: 3px; flex: none;
background: #ffe23d; display: inline-block;
}
/* ================= 使い方ページ ================= */
.sb-help {
/* body が overflow:hidden (地図用) のため、ページ自身を独立スクロールさせる */
position: fixed; inset: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
box-sizing: border-box;
background: #0b1020; color: #ffffff;
padding: 26px 18px 60px;
font-size: 18px; line-height: 1.85;
}
/* 右上に常時見える閉じるバッジ */
.sb-help-close {
position: fixed; top: 12px; right: 12px; z-index: 10;
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: #0b2557; color: #ffffff;
border: 3px solid #ffffff;
font-size: 17px; font-weight: 700; text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.sb-help-inner { max-width: 760px; margin: 0 auto; }
.sb-help h1 { font-size: 27px; margin: 0 0 14px; }
.sb-help h2 {
font-size: 21px; margin: 30px 0 10px; color: #ffd54f;
border-bottom: 2px solid rgba(255, 255, 255, 0.25); padding-bottom: 6px;
}
.sb-help h3 { font-size: 18px; margin: 20px 0 4px; color: #7fd0ff; }
.sb-help dt { /* 項目見出し: チップ風で大きく目立たせる (弱視配慮、β0.19) */
display: inline-block;
font-weight: 800;
font-size: 23px;
margin-top: 22px;
padding: 6px 14px;
background: #122f66;
border-left: 5px solid #7fd0ff;
border-radius: 8px;
letter-spacing: 0.5px;
}
.sb-help dd { margin: 6px 0 0 0; opacity: 0.92; }
.sb-help li { margin: 6px 0; }
.sb-help b { color: #ffd54f; }
.sb-help a { color: #7fd0ff; } /* 暗背景でも読めるリンク色 (既定の紫はコントラスト不足) */
/* QR: タイトル直下・中央 (PC/スマホ共通で本文の一部として表示) */
.sb-help-qr {
display: inline-block; margin: 4px auto 20px; text-align: center;
background: #fff; padding: 10px 10px 6px; border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.sb-help-qr { display: block; width: fit-content; }
.sb-help-qr-label { font-size: 11px; line-height: 1.2; color: #0b2557; margin-top: 4px; font-weight: 700; }
.sb-help-credit {
margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.15);
font-size: 13px; opacity: 0.7; text-align: center;
}
.sb-help .sb-back {
display: inline-block; margin-top: 32px;
padding: 14px 22px; font-size: 17px; font-weight: 700;
background: #1c3a75; color: #ffffff; text-decoration: none;
border: 2px solid #ffffff; border-radius: 12px;
}
/* ================= スマホ最適化 (幅640px以下) ================= */
@media (max-width: 640px) {
#sb-title { font-size: 18px; }
#sb-buttons {
gap: 5px;
max-height: calc(100vh - 200px); /* 全項目が収まる想定 (スクロールは極小画面のみの保険) */
overflow-y: auto;
}
#sb-btn-left { width: 176px; }
#sb-btn-right { width: 176px; } /* mobileも左列と同じ幅に統一 */
#sb-buttons button { font-size: 16px; padding: 9px 10px; }
#sb-fav-fab { width: 56px; height: 56px; font-size: 24px; right: 10px; bottom: 88px; }
/* 読み上げFAB: ⭐(56px)の真上、サイズは左FABと同じ64pxのまま中心を揃える */
#sb-speak-fab { right: 10px; bottom: 156px; }
/* 再読み込みFAB: 右上に表示 (⚙設定パネルを開くボタン等と被らない位置) */
#sb-reload-fab {
display: block;
position: fixed; top: 10px; right: 10px; z-index: 45;
width: 48px; height: 48px; border-radius: 50%;
font-size: 26px; line-height: 1;
background: #0b2557; color: #ffffff;
border: 3px solid #ffffff; cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
padding: 0;
}
/* 右上の⟳と重ならないよう、MapLibre標準の右上コントロール (ズーム＋バー / 現在地◎) を下へずらす。
right も合わせて、幅の広い⟳ (48px, right:10px → 中心は右端から34px) の真下に縦一列で整列させる。 */
.maplibregl-ctrl-top-right {
top: 68px; right: 0;
width: 68px; /* ⟳(right:10px+幅48px=右端から58px)を包む幅 */
display: flex; flex-direction: column; align-items: center; /* 各コントロールを水平中央に */
}
.maplibregl-ctrl-top-right .maplibregl-ctrl { float: none; margin-right: 0; } /* 既定の右寄せfloatを解除 */
.sb-fav-card {
width: min(340px, 88vw); max-height: 44vh;
border-radius: 14px 14px 0 0;
}
#sb-time-panel { bottom: 84px; }
.sb-time-card { flex-wrap: wrap; }
#sb-time-slider { min-width: 60%; }
}
/* 設定内のダークモード切替行 */
.sb-theme-row {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
/* ================= サイトQRコード (デスクトップのみ表示) ================= */
#sb-qr {
position: fixed; top: 10px; right: 56px; z-index: 40;
background: #ffffff;
padding: 8px 8px 5px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
text-align: center;
}
#sb-qr-img img { display: block; }
.sb-qr-label {
margin-top: 4px;
font-size: 11px; font-weight: 700;
color: #0b2557;
}
@media (max-width: 640px) {
#sb-qr { display: none; } /* スマホでは非表示 (本人がアクセス中のため不要) */
}
/* ================= スマホ用メニュードロワー (☰) ================= */
#sb-menu-fab { display: none; } /* デスクトップでは非表示 (メニュー常時展開) */
@media (max-width: 640px) {
/* 左下の丸いメニューボタン (右下の⭐と対、親指の圏内) */
#sb-menu-fab, #sb-board-fab {
display: flex; align-items: center; justify-content: center;
position: fixed; left: 14px; bottom: 88px; z-index: 55;
width: 56px; height: 56px; border-radius: 50%;
font-size: 24px; line-height: 1;
background: #0b2557; color: #ffd54f;
border: 3px solid #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
cursor: pointer; padding: 0;
}
/* backdrop-filter は fixed 子孫の基準を狂わせるためスマホでは無効化 (メニューが画面外へ飛ぶ根本原因) */
#sb-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* メニューは左下からニョキッと生える (ビヨーンアニメ付き) */
body:not(.sb-menu-min) #sb-buttons {
position: fixed; left: 10px; bottom: 162px; z-index: 54;
background: rgba(11, 37, 87, 0.96);
border: 2px solid #ffffff; border-radius: 14px;
padding: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
box-sizing: border-box;
max-height: calc(100vh - 190px); /* 画面上端にはみ出さない高さ */
overflow-y: auto;
overscroll-behavior: contain; /* メニュー内スクロールもページへ連鎖させない */
animation: sb-boing 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
}
/* ================= 吹き出しを最前面へ (バスマーカー z-index:3 より上) ================= */
.maplibregl-popup { z-index: 6; }
/* ================= 操作ガイド (上部バッジ + 選択パネル) ================= */
/* 画面上部中央に常設するガイダンスのバッジ。拡大鏡でも読めるよう大きめ */
#sb-guide[hidden] { display: none !important; }
#sb-guide {
/* 2026-07-31: 中央寄せ(left:50%+translateX)をやめ、左8px〜右66px の帯にした。
・避けたいのは右上の🧭方位磁石だけ。左を避ける理由は無い (酒井様のご指摘)
・中央寄せだと「left:50%から右端まで」しか幅を取れず、狭い画面で不必要に折り返していた
・右66px = 方位磁石(右10px・幅48px)の手前。地図のズームボタン(右端)とも当たらない
広い画面では max-width と margin-inline:auto で従来どおり中央に見える。 */
position: fixed; top: 8px; left: 8px; right: 66px; transform: none;
width: auto; max-width: 560px; margin-inline: auto;
/* 2026-07-26: 1400 だと お手軽モード (#sb-board, z:2000 で不透明) の裏に隠れ、
ガイドを出しても見えなかった。ボードより前・履歴窓(2100)とモーダル(3000)より後ろへ。 */
z-index: 2050;
width: min(560px, 94vw);
display: flex; flex-direction: column; align-items: stretch; gap: 8px;
pointer-events: none; /* 地図操作を邪魔しない。子要素だけ操作可 */
}
/* ガイダンス文のバッジ本体 */
#sb-guide-badge {
pointer-events: auto;
display: flex; align-items: center; gap: 10px;
background: #0b2557; color: #ffe23d;
border: 2px solid #ffe23d; border-radius: 12px;
padding: 10px 14px;
font-size: 16px; font-weight: 800; line-height: 1.35;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
animation: sb-boing 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#sb-guide-step { font-size: 11px; font-weight: 700; color: #7fd0ff; white-space: nowrap; }
#sb-guide-text { flex: 1; }
#sb-guide-close {
flex: none; width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.15); color: #fff;
border: none; font-size: 16px; line-height: 1; cursor: pointer;
}
#sb-guide-close:hover { background: rgba(255, 255, 255, 0.3); }
/* ★2026-08-30 お手軽入口: #sb-guide-panel / .sb-guide-ptitle / #sb-guide-more / #sb-guide-cancel-fixed の
指定は撤去した。いずれも「⏰カウントダウン」の入口案内 (flow="countdown") 専用の見た目で、その流れごと
無くなり、DOM も Home.razor から消えたため。残るガイドはバッジ1枚 (#sb-guide-badge) だけ。 */
/* ▼跳ねアニメだけは残す: .sb-more-tag (バス停の時刻表・お気に入り・お手軽モードの「▼まだ下にあります」) が使う共用部品 */
@keyframes sb-more-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* スマホでは拡大鏡利用を考慮してガイドを大きく・見やすく */
@media (max-width: 640px) {
/* ★スマホ用の上書きを直し忘れると、スマホだけ重なったままになる。実際1度そうなった。 */
#sb-guide { width: auto; left: 6px; right: 64px; top: 6px; }
#sb-guide-badge { font-size: 18px; padding: 12px 14px; border-width: 3px; }
#sb-guide-step { font-size: 12px; }
#sb-guide-close { width: 34px; height: 34px; min-width: 34px; font-size: 20px; }
/* ★2026-08-30 お手軽入口: .sb-guide-ptitle / #sb-guide-cancel-fixed のスマホ上書きも、本体ごと撤去 */
/* ★2026-09-23 (ご主人様のご判断・案A): スマホ幅では、お手軽モードの板が開いている間は帯を【出さない】。
茜の撮影 (stopped_near_b/_c.png・390px) で、帯が板の上端の時計に重なり、時計が隠れていた。
・帯の中身は【地図の上の系統番号の札】の使い方なので、板の上で見せなくても困らない。
・隠すだけで閉じたのではないので、「もう見た」の印 (badgeHintDone) は立てない。
板を閉じれば [hidden] が戻り、この指定が外れて帯がそのまま見える。
・見方は PC 幅の「柱の右へ寄せる」(このファイルの末尾近く) と同じく :has で [hidden] を直に見る。
board.hidden を触る場所が 6 か所あり、札 (class) では必ずどれかで付け忘れるため。
・幅の切り替えは 640px (柱が始まるのが 641px)。641px 以上は柱の右へ寄せて被らないので、
今までどおり出す。:has を知らない古いブラウザは今までどおり出る (壊れはしない)。 */
#sb-guide:has(~ #sb-board:not([hidden])) { display: none !important; }
}
/* ================= 吹き出しを最前面へ (バスマーカー z-index:3 より上) ================= */
/* ---- v2ボード共用パーツ (旧お手軽モードの生き残り): 旧 #sb-a11y 画面は撤去済み。以降は v2 ボードが再利用している class 群 ---- */
/* 📍近くのバス停: 距離えらび (100m/200m/500m/1km) と入口ボタン */
.sb-a11y-rrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.sb-a11y-baserow { grid-template-columns: 1fr 1fr; }
.sb-a11y-rbtn {
padding: 12px 0; font-size: 20px; font-weight: 800;
/* 2026-07-27: 白枠 → 薄ミント枠へ (酒井様指示で nearbtn 一族と統一)。
色の言葉を2語に揃える: 「ミント=押せる」「黄=いま選んでいる」。
未選択は薄め (0.55/0.10) にして、黄の選択が主役のまま立つように。文字は読みやすさ優先で白のまま。 */
border: 2px solid rgba(143, 201, 186, 0.55); border-radius: 12px;
background: rgba(143, 201, 186, 0.10); color: #fff; cursor: pointer;
}
.sb-a11y-rbtn.sb-on2 { border-color: #ffe23d; background: rgba(255, 226, 61, 0.25); color: #ffe23d; }
.sb-a11y-nearbtn {
display: block; width: 100%; margin: 10px 0;
padding: 0 10px; min-height: 64px; font-size: 20px; font-weight: 800;
/* 2026-07-27: 蛍光寄りの緑 (#35d07f) → 実車 (仙台市営バス) のミント #8FC9BA へ。
ようこそ画面・アイコンと同じ塗装の出典で、紺地に馴染む。
⚠ このクラスは 🔍さがす/🏁行き先/◀もどる/目的地大ボタン の一族で共有。
「画面推移で色が変わると不安」(2026-07-13 ご主人様方針) のため、必ず一族ごと変えること。 */
border: 2px solid #8FC9BA; border-radius: 14px;
background: rgba(143, 201, 186, 0.20); color: #fff; cursor: pointer;
}
.sb-a11y-nearbtn:active { background: rgba(143, 201, 186, 0.42); }
/* 📍近くのバス停: 見出し付きグループ枠 (「場所」「距離」の意味がお年寄りにも一目で伝わる) */
.sb-a11y-group { border: 2px solid #4a6db0; border-radius: 14px; padding: 8px 8px 0; margin: 0 0 8px; }
.sb-a11y-grouplab { display: block; text-align: left; font-size: 15px; font-weight: 800; color: #9fd3ff; margin: 0 0 8px 2px; }
/* 横はみ出し文字の自動往復スクロール (端で一時停止しながら文字だけ動く) */
.sb-mq { overflow: hidden; text-overflow: clip; }
.sb-mq .sb-mq-inner {
display: inline-flex; align-items: center; white-space: nowrap;
animation: sbMq linear infinite alternate; animation-delay: 0.8s; will-change: transform;
}
@keyframes sbMq {
0%, 15% { transform: translateX(0); }
85%, 100% { transform: translateX(var(--mq-shift, 0)); }
}
/* 💛ハートSVG: 暗背景=ビビッド黄 / 黄背景 (sb-on2, #sb-stop-pin.sb-on2) =真っ黒 (アイコンの明暗反転の原則) */
.sb-a11y-heart { width: 22px; height: 20px; flex: none; display: inline-block; vertical-align: -3px; color: #ffe23d; overflow: visible; }
.sb-on2 .sb-a11y-heart { color: #111111; }
.sb-a11y-heart-big .sb-a11y-heart { width: 46px; height: 42px; }
/* バス停ポール型SVGバッジ (丸標識+支柱・単色シルエット)。暗背景=ビビッド黄 / 黄背景=真っ黒 (形で伝えるため大きく) */
.sb-a11y-stopsign { width: 26px; height: 33px; flex: none; display: inline-block; vertical-align: -9px; margin-right: 7px; color: #ffe23d; --sign-hole: #10275a; }
/* 🏁ゴールフラッグSVG (行き先) — 2026-08-02 ご主人様のご指摘
「アイコンがよくわからない。ゴールフラッグらしいアイコンに」
絵文字の🏁は環境により市松が潰れて灰色の四角に見える。自作SVGで形をはっきりさせる。
★ハート・停留所標識と同じ currentColor 方式。黄背景では黒へ自動反転する */
.sb-a11y-goalflag { width: 22px; height: 25px; flex: none; display: inline-block; vertical-align: -6px; margin-right: 5px; color: #ffe23d; }
.sb-goalflag-slot { display: inline-flex; align-items: center; }
.sb-on2 .sb-a11y-goalflag, #sb-board-stopbtn .sb-a11y-goalflag { color: #111111; }
/* 距離ボタン: 数字を大きく・単位は控えめに */
.sb-a11y-rnum { font-size: 26px; font-weight: 800; }
.sb-a11y-runit { font-size: 15px; font-weight: 700; margin-left: 1px; }
/* 一覧のコンパクト見出し (「📍 今の場所 から 500m 以内」など) */
.sb-a11y-listhead { font-size: 16px; font-weight: 800; color: #9fd3ff; text-align: left; margin: 2px 2px 8px; }
.sb-a11y-hrow { display: flex; align-items: center; gap: 8px; }
.sb-a11y-hbadge { font-size: 18px !important; padding: 4px 10px !important; }
.sb-a11y-hstop { font-size: 17px; font-weight: 700; color: #eaf2ff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-a11y-hmain { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.sb-a11y-hnum { font-size: 64px; font-weight: 700; color: #ffe23d; line-height: 1; font-variant-numeric: tabular-nums; }
.sb-a11y-hnum.sb-num-3digit { font-size: 48px; } /* 3桁(あと100分〜)は一回り小さく */
/* ★2026-09-01 ご主人様「文字が大きすぎる。小さくしてカウント欄に入るように」:
数字の枠に【言葉】(まもなく到着します) や【分と秒】(3分20秒) を入れるときの大きさ。
数字の 64px のままだと枠からはみ出す。言葉は 26px、分と秒は 40px で、行の高さは数字と同じに保つ (カードの丈が跳ねない)。 */
/* ★2026-09-01 ご主人様「まもなく到着します → まもなく到着。これなら文字の大きさを変えなくていい」→ 言葉を短くし、字は 22px のまま。 */
.sb-a11y-hnum.sb-num-text { font-size: 22px; line-height: 64px; white-space: nowrap; }
.sb-a11y-hnum.sb-num-msec { font-size: 40px; line-height: 64px; white-space: nowrap; }
/* ★★2026-09-23 ご主人様のご指示「手前で停車中」: 数字の枠に二段で「手前で停車中」(上)「まもなく到着」(下) を同時に出す。
字は「まもなく到着」(sb-num-text) と同じ 22px・同じ 6 文字なので、横幅は今の「まもなく到着」と変わらない (右の 🚌/🕒 の釦は落ちない)。
二段の丈 (22px × 1.2 × 2 ≒ 53px) は数字の行 (64px) に収まるので、カードの丈も跳ねない。 */
.sb-a11y-hnum.sb-num-2line { display: inline-flex; flex-direction: column; justify-content: center; font-size: 22px; line-height: 1.2; height: 64px; white-space: nowrap; }
.sb-a11y-hnum.sb-num-2line .sb-num-2l { display: block; }
/* ★2026-09-21 (パソコンの柱): 下の 9.4vw / 7.6vw の「vw」を --sb-vw という名前に置き換えた。
★中身は今までと同じである。--sb-vw を書いていない所では var() の既定 100vw が効くので、
スマホ (幅 390px / 360px) の字の大きさは【一字も変わらない】。
★パソコンで板を左の柱に収めたときだけ、このファイルの【いちばん最後】の節が #sb-board に
--sb-vw = 柱の幅 を与える。vw = 画面幅のままだと 1280px 幅で 9.4vw = 120px になり、
★柱 (424px) から言葉がはみ出す。基準にすべきは「字が入る器の幅」= 柱の幅である。 */
.sb-a11y-hnum.sb-num-word { font-size: min(40px, calc(var(--sb-vw, 100vw) * 0.094)); line-height: 64px; white-space: nowrap; } /* ★2026-09-11 「バス停滞中」「手前で停留中」= 時間の枠を空けない短い言葉。数字の枠と同じ大きさ */
/* ★★2026-09-14 ご主人様が本番で実見なさった崩れ (手前の停に停車中・iPhone):
言葉を数字と同じ 40px で置くと「手前で停留中」(6文字) が 240px になり、数字の行の右に常に並ぶ
🚌/🕒 の丸い釦の居場所が無くなって【下へ落ちていた】。
→ ①6文字以上の言葉は sb-num-word-l で一回り小さく (上限 32px)、②どちらの言葉も画面幅に連れて縮むよう
min(…px, …vw) にした。もう一段狭い 360px でも釦が数字の行に残る。
★★2026-09-14 (五便目) ここの覚書を【実装に合わせて】書き直した。
旧: 「iPhone 幅 390px では今までどおりの見た目 (40px / 39px)」。★これは事実と違っていた。
min() は小さい方が勝つので、390px で効いているのは vw の側である:
・「バス停滞中」(sb-num-word) 9.4vw → 390px で 36.7px / 360px で 33.8px
・「手前で停留中」(sb-num-word-l) 7.6vw → 390px で 29.6px / 360px で 27.4px
上限の 40px・32px が効き始めるのは、画面幅が 426px・421px より広いときだけである。
★ご主人様のご判断 (2026-09-14): 字は【幅に連れて縮む形】で確定。
390px でも 40px のまま、という形には戻さない (そちらが美しい、とのお言葉)。
★数字 (「12分」「4分20秒」「120分」) の大きさは一切変えていない (この二つの札は言葉のときだけ付く)。
★vw は画面幅そのもの。拡大鏡で大きくしても【枠と字の比】が変わらないので、崩れ方が幅に依らない。 */
.sb-a11y-hnum.sb-num-word.sb-num-word-l { font-size: min(32px, calc(var(--sb-vw, 100vw) * 0.076)); }
/* ★倍率の根拠 (実測 2026-09-14): 数字の行に残せる幅 = 画面幅 − 184px (カードの余白と枠 + 右の釦の帯 + 隙間)。
5文字なら 1文字あたり (幅−184)/5、6文字なら (幅−184)/6 まで。いちばん狭い 360px で
前者 35.2px・後者 29.3px なので、余裕を見て 9.4vw (360px→33.8px) と 7.6vw (360px→27.4px) にした。
★幅に連れてなめらかに縮むので、390px と 360px の【あいだ】の端末 (384px 等) にも穴が空かない。 */
/* ★2026-09-01 ご主人様のご提案 (実機で「あと2分30秒」が枠からはみ出した):
「分と秒の漢字を小さくして、全体で幅を縮小するのはどうでしょう」。
数字はそのまま、漢字だけを 0.55em (40px なら 22px = 単位の枠と同じ大きさ) にする。
em で書くので、下の画面幅ごとの clamp にも自動でついてくる。 */
.sb-a11y-hnum .sb-msec-u { font-size: 0.55em; font-weight: 700; }
.sb-a11y-hunit { font-size: 22px; font-weight: 700; color: #ffe23d; }
.sb-a11y-hsub { font-size: 13px; color: #9fb8e8; margin-top: 4px; }
/* 📰 ひとことニュース (2026-08-26 ご主人様の設計: 新幹線の電光掲示板ふうの一行流し)。
到着履歴から組んだ小話をヒーローカードの下端に右→左で流す。データが無い停では hidden のまま。
色は本文と同じ白系 (★黄色は「1位」専用。ご主人様には黄色以外すべて白に見えるため、色で意味を持たせない) */
/* ★2026-08-26 ご主人様のご指示: 縦幅を節約する。上の「◯時◯分ごろ とうちゃく」と
カード下端の枠との間が空きすぎていた。margin 7→3 / padding 5→3 / 行の高さを詰める (計11px) */
.sb-board-ticker { overflow: hidden; white-space: nowrap; margin-top: 3px; padding-top: 3px;
border-top: 1px solid rgba(255, 255, 255, .16); font-size: 16px; line-height: 1.25; color: #dbe8ff; }
.sb-board-ticker[hidden] { display: none !important; }
/* ★vertical-align: top は必須 (2026-08-26 碧ちゃんレビュー(9))。既定の baseline 揃えだと、
親の行箱にフォントごとの descender ぶん (0〜4px) が足され、詰めたはずの高さが端末によって戻る。
top なら line-height ぴったりに固定され、どのフォントでも同じ高さになる。 */
.sb-board-ticker-in { display: inline-block; vertical-align: top; padding-left: 100%;
animation: sb-tickmove linear infinite; will-change: transform; }
/* 流さずに一言だけ置く状態 (「バスの運行情報を取得しています…」「まだこのバス停には情報がありません」)。
★高さは流し版と同じ。枠を消さないので、文が入れ替わっても画面が縦に動かない (2026-08-26) */
.sb-board-ticker-in.sb-tick-note { animation: none; padding-left: 0; }
@keyframes sb-tickmove { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* 文字拡大 (大/特大) に連動。大きい文字の人ほど読みにくくならないように */
#sb-board.sb-a11y-lg .sb-board-ticker { font-size: 19px; }
#sb-board.sb-a11y-xl .sb-board-ticker { font-size: 22px; }
/* 「視差や動きを減らす」端末設定では流さない (JS 側は8秒ごとの静かな入れ替えに切り替える) */
@media (prefers-reduced-motion: reduce) { .sb-board-ticker-in { animation: none; padding-left: 0; } }
.sb-a11y-late { background: #5a3a00; color: #ffd54f; font-size: 13px; padding: 3px 8px; border-radius: 6px; align-self: center; }
.sb-a11y-late[hidden] { display: none !important; }
/* ★2026-08-04 ご主人様のご指示: 読み上げボタンの枠は全て外す (🔊の絵文字だけで示す)。 */
.sb-a11y-spk {
width: 38px; height: 38px; border-radius: 50%; flex: none;
background: transparent; border: 0; color: #7fd0ff;
font-size: 17px; cursor: pointer; padding: 0;
}
.sb-a11y-spk-big { width: 46px; height: 46px; font-size: 21px; margin-left: auto; background: transparent; border: 0; }
.sb-a11y-empty { color: #cfe3ff; font-size: 17px; line-height: 1.7; padding: 14px; background: var(--sb-l1); border-radius: 12px; }
/* お手軽モードFAB (#sb-board-fab・左下の丸ボタン)。PCは左下クレジットの上、スマホは🚌FABの上。★2026-08-30 旧 id sb-a11y-fab から改名 (v2 の sb-board-* に統一・経緯は #2492) */
#sb-board-fab {
position: fixed; left: 14px; bottom: 64px; z-index: 9; /* パネル(z10)より後ろ = メニュー展開中は隠れる */
width: 56px; height: 56px; border-radius: 50%; padding: 0;
background: #0b2557; border: 3px solid #ffffff; color: #ffd54f;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* ★2026-08-30 お手軽入口: 30px → 34px。丸ボタンの大きさ (56px) は変えず、中の絵だけ一回り大きくする */
#sb-board-fab svg { width: 34px; height: 34px; }
#sb-menu-fab svg { width: 32px; height: 32px; }
/* メニューFAB: 畳み中=SVGバス / 展開中=✕ (JSはクラス切替のみ、SVGを消さない) */
#sb-menu-fab .sb-menufab-x { display: none; font-size: 24px; color: #ffd54f; line-height: 1; }
body:not(.sb-menu-min) #sb-menu-fab svg { display: none; }
body:not(.sb-menu-min) #sb-menu-fab .sb-menufab-x { display: block; }
/* いつものバス停 登録ボタン (バス停シート内) */
#sb-stop-pin {
display: block; margin: 2px 0 8px; padding: 6px 10px; border-radius: 8px;
background: #10275a; border: 1px solid #4a6db0; color: #cfe3ff;
font-size: 13px; cursor: pointer;
}
#sb-stop-pin.sb-on2 { background: #ffe23d; border-color: #ffe23d; color: #3a2e00; font-weight: 700; }
@media (max-width: 640px) {
#sb-board-fab { bottom: 160px; z-index: 9; } /* 🚌FAB(bottom:88px)の真上・完全同サイズ (定義共有)。z9=メニューの後ろ */
}
/* ---- v2ボード共用パーツ (旧お手軽モード撤去後の生き残り): のりば名・バス停名の1行表示 ----
上の「v2ボード共用パーツ」群と同じ性格。旧 #sb-a11y 画面は 2026-08-30 に撤去済み (経緯は #2492) で、
この class は v2 ボード (#sb-board のバス停名ボタン・のりば行・行き先候補など) が再利用している。 */
.sb-a11y-stopnm { font-size: 20px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- お手軽モード: 行内アクションボタン (🚌走行中 / ⏰カウントダウン / 🔊読み上げ) ---- */
.sb-a11y-hbtns { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.sb-a11y-hbtns .sb-a11y-spk-big { margin-left: 0; }
/* 上段 (🚌⏰ + 🔊) と下段 (🕒 + 🔊) をそれぞれ横並びの行にする。バッジは横長ピルのまま。 */
.sb-a11y-hbrow { display: flex; gap: 6px; justify-content: flex-end; }
/* ★2026-09-01 ご主人様のご指示: 上の 🚌⏰ を 🚌 一つにして幅を詰めたのに、下の 🕒 の幅が直っていない。
原因は この min-width: 84px (二文字ぶんの幅を空けていた名残)。🕒 一文字なので、上と同じ自然な幅にする。
★数字 (3桁の秒) の余裕を作るのが目的なので、下も同じだけ詰めないと意味が無い。 */
.sb-a11y-histbtn { border-color: #b39ddb !important; color: #d7c7f0 !important; justify-content: center; }
/* ---- お手軽モード: 空メッセージを大きく・あたたかく (後勝ちで上書き) ---- */
.sb-a11y-empty {
font-size: 20px; font-weight: 700; line-height: 1.7;
text-align: center; padding: 22px 14px;
}
.sb-a11y-empty-icon { display: block; font-size: 44px; line-height: 1; margin-bottom: 10px; }
.sb-a11y-empty-sub { font-size: 14px; font-weight: 400; color: #9fb8e8; margin-top: 12px; line-height: 1.7; }
/* メニュー展開中 (body.sb-menu-min が外れている間) はお手軽FABを完全に隠す (縁のはみ出し防止) */
@media (max-width: 640px) {
body:not(.sb-menu-min) #sb-board-fab { display: none; }
}
/* ---- お手軽モード: 🚌⏰合体バッジ (横長ピル) ---- */
.sb-a11y-go {
height: 38px; padding: 0 12px; border-radius: 999px; flex: none;
background: #163a7a; border: 1px solid #ffd54f; color: #ffd54f;
font-size: 16px; cursor: pointer; white-space: nowrap;
display: flex; align-items: center; gap: 2px;
}
.sb-a11y-go-big { height: 46px; font-size: 20px; padding: 0 14px; }
/* お手軽バッジから起動したカウントダウンは画面上部へ (バスの吹き出しと同時に見えるように) */
#sb-cd.sb-cd-top { align-items: flex-start; padding-top: 10px; box-sizing: border-box; }
/* お手軽モード: すやすや緑バスのSVGサイズ */
.sb-a11y-empty-icon svg { width: 160px; max-width: 55vw; height: auto; }
/* ===== 3Dバス試作 (吹き出し追従中の1台だけ立体ミニチュア表示) ===== */
.sb-bus.sb-bus3don { background: transparent !important; border-color: transparent !important; box-shadow: none !important; z-index: 5 !important; } /* 他の丸(3)より上、吹き出し(6)より下 */
.sb-bus3don .sb-num, .sb-bus3don .sb-icon-rot, .sb-bus3don .sb-mini { display: none !important; }
.sb-b3wrap { position: absolute; left: 50%; top: 50%; width: 0; height: 0; perspective: 600px; pointer-events: none; z-index: 3; }
.sb-b3tilt, .sb-b3rot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.sb-b3rot div { position: absolute; }
/* 🎵 吹き出しタップ演出: 音符がぽわんと浮かぶ */
.sb-note { position: absolute; top: -40px; left: 0; font-size: 24px; color: #ffd23e; text-shadow: 0 1px 4px rgba(0,0,0,.65); pointer-events: none; z-index: 7; opacity: 0; animation: sbNoteUp 1.3s ease-out forwards; }
@keyframes sbNoteUp { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1.2) rotate(14deg); } }
/* 3Dバス遅延パルスリング: 中央から外へポワンポワン広がる波紋 (黄=1〜5分 / 赤=5分以上、丸マーカーの遅延リングと同色) */
.sb-b3ring { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 9px solid transparent; opacity: 0; pointer-events: none; }
.sb-bus3don.sb-dly-y .sb-b3ring { border-color: #ffd54f; animation: sbB3Ring 1.4s ease-out infinite; }
.sb-bus3don.sb-dly-r .sb-b3ring { border-color: #ff5252; animation: sbB3Ring 1.4s ease-out infinite; }
@keyframes sbB3Ring { 0% { opacity: .95; transform: translateZ(.2px) scale(.2); } 70% { opacity: .35; } 100% { opacity: 0; transform: translateZ(.2px) scale(1); } }
/* 📊 動的データの生成時刻表示 (ODPT開発者ガイドライン 2.1.1 準拠、時計の直下) */
#sb-datats { font-size: 14px; font-weight: 600; opacity: .85; line-height: 1.2; pointer-events: none; }
/* 🔮 予測モードFAB (お手軽モードFABの真上、同サイズ56px・縁3px統一) */
#sb-predict-fab {
position: fixed; left: 14px; bottom: 136px; z-index: 9; /* お手軽FAB(64px)の真上、間隔72pxで統一 */
width: 56px; height: 56px; border-radius: 50%; padding: 0;
background: #0b2557; border: 3px solid #ffffff; color: #ffd54f;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#sb-predict-fab svg { width: 30px; height: 30px; }
#sb-predict-fab:hover { box-shadow: 0 0 0 3px #7fd0ff, 0 4px 14px rgba(0,0,0,.5); }
/* ON時: 青い丸背景だけを赤にする。白い外枠(border)と中の時計マーク(color)はそのまま維持 */
#sb-predict-fab.sb-on { background: #ff3b30; }
body:not(.sb-menu-min) #sb-predict-fab { display: none; } /* メニュー展開中は隠す (他FABと同挙動) */
/* mobile: お手軽FAB(160px)の真上に確実に配置。本体のPC用bottom:136pxを上書き (後勝ち) */
@media (max-width: 640px) { #sb-predict-fab { bottom: 232px; } }
/* 🔮 大時計右の「予測」バッジ (黄色地に赤文字の警告色) */
/* 時計と同じ行に横並び。時計の下端にバッジ下端を合わせる */
#sb-clock-wrap { display: inline-flex; align-items: flex-end; gap: 8px; }
/* 🔮 予測モード 注意フロート (操作ガイドON時にONへ切り替える直前に表示) */
.sb-notice-overlay {
position: fixed; inset: 0; z-index: 3000;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.55); padding: 20px;
}
.sb-notice-card {
width: 340px; max-width: 92vw; box-sizing: border-box;
background: #0b2557; color: #fff;
border: 2px solid #ffffff; border-radius: 14px;
padding: 16px 16px 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.sb-notice-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.sb-notice-body { font-size: 16px; line-height: 1.65; opacity: 0.95; }
.sb-notice-ok {
display: block; width: 100%; margin-top: 14px; padding: 10px 12px;
font-size: 16px; font-weight: 700; cursor: pointer;
color: #0b2557; background: #7fd0ff;
border: 1px solid #7fd0ff; border-radius: 8px;
}
.sb-notice-ok:hover { background: #a5deff; }
#sb-predict-badge {
display: inline-block; padding: 2px 8px; border-radius: 6px;
background: #ffd21e; color: #d10000; font-size: 15px; font-weight: 800;
line-height: 1; letter-spacing: .05em;
position: relative; bottom: 4px; /* 時計フォントのディセンダ余白ぶん持ち上げ、数字の下端に視覚的に揃える */
}
/* ==== 到着履歴フローティング窓 (方式A・2026-07-22) ==== */
.sb-hist-overlay {
position: fixed; inset: 0; z-index: 2100;
background: rgba(0,0,0,.55);
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.sb-hist-card {
width: min(440px, 94vw); max-height: 80vh; overflow: auto;
background: #0b1a33; color: #e8f0ff;
border: 2px solid #b39ddb; border-radius: 16px;
padding: 16px 18px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.sb-hist-title { font-size: 19px; font-weight: 800; margin-bottom: 12px; line-height: 1.35; }
.sb-hist-sub { font-size: 14px; font-weight: 400; color: #9fb8e8; margin-top: 3px; }
.sb-hist-block { margin-bottom: 14px; }
.sb-hist-btitle {
font-size: 15px; font-weight: 700; color: #c7b3ec;
border-bottom: 1px solid #2a4a7a; padding-bottom: 4px; margin-bottom: 6px;
}
.sb-hist-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 5px 2px; font-size: 17px; border-bottom: 1px solid #16294a;
}
.sb-hist-clock { font-weight: 700; font-variant-numeric: tabular-nums; }
/* ★2026-08-30 履歴seq: 折返し便の「1かいめ / 2かいめ」の小さな添え (碧の仮起案)。
時計 (.sb-hist-clock) の中に入る内側の字なので、行の左右振り分けは崩れない。
★行の高さも変わらない: 17px の時計より小さい 13px を baseline でそろえるだけなので、
行の高さを決めているのは今までどおり時計のほう。折返し (改行) は white-space:nowrap で止める。 */
.sb-hist-seq {
font-size: 13px; font-weight: 400; color: #9fb8e8; margin-left: 6px; white-space: nowrap;
}
.sb-hist-delay { font-size: 16px; font-variant-numeric: tabular-nums; }
.sb-hist-late { color: #ff9e9e; }
.sb-hist-early { color: #9effb0; }
.sb-hist-empty {
font-size: 17px; line-height: 1.8; text-align: center;
padding: 24px 10px; color: #cfe0ff;
}
.sb-hist-ok {
display: block; width: 100%; margin-top: 8px; padding: 13px;
font-size: 18px; font-weight: 700; border: none; border-radius: 12px;
background: #b39ddb; color: #1a0f2e; cursor: pointer;
}
/* ==== お手軽モード v2 (バス停ボード) 2026-07-22。デザインは旧 #sb-a11y から流用 (旧お手軽モードは 2026-08-30 に撤去済み・経緯は #2492) ==== */
/* ★★2026-08-02 ご主人様のご指摘で配色を整理:
「背景とバス停とカードがすべて同系の青色なので、瞬時に見分けられない。
かといってケバケバしくなるのも嫌」
実測でも 地=#0e1b3a / カード=#10275a と、ほぼ同じ明るさだった。
★★一度目の失敗 (2026-08-02):
今風の作法 (Linear・GitHub 等) にならい「高いものほど明るくする」= 明るさで階層を作った。
ご主人様のご指摘:
「弱視の人、僕もそうだけど、あとお年寄り、★明るさでは区別がつかないんですよ。
そもそも★アクセシビリティを重視している画面だということを忘れないでほしい」
「普通は★バス停に経路がぶら下がるので、コントラストを上げるならバス停の方だよね」
→ 流行を優先して、このアプリの一番大事な前提を忘れていた。明るさ方式は破棄。
さらに、親であるバス停より子の経路を目立たせていた = 順序も逆だった。
★★二度目の失敗 (同日):
形 (ぶら下げ・内寄せ) で分けようとした。ご主人様のご指摘:
「カードをぶら下げるとか小手先のことをすると、修正箇所が大量に増える。
細かい小細工の流行ではなく、★色を変えてください。
今の配色はヨーロッパ・アメリカ的で、★くすんだ色が主体。
複数の日本製スマホアプリを検索してみてください」
★★調べて分かった決定的な事実 (日本のシニア向けデザインの資料):
・加齢で水晶体が黄色く濁る (黄変)。★黄色いサングラスをかけた状態になる
・そのため【寒色系は高齢者には見えにくい】。青は最も不利な色
・見やすいのは【赤・オレンジ・黄色】などの暖色。明暗差＋★色相差をはっきり付ける
・らくらくスマホ等の日本製は「カテゴリごとに色を変える」方式
→ このアプリは地もカードも濃紺 = ★いちばん見えにくい色で全部作っていた。
★★最終形 (ご主人様のご指示 2026-08-02): 【色モードを2つ用意して選べるようにする】
どちらも日本製アプリの配色。押し付けず、使う方が選ぶ。
モード1「ふだんの色」… 若い方に好まれる落ち着いた配色。★既定 (利用者の6〜7割)
役割ごとに色相は変えるが、彩度は控えめ。夜間の地図と並べても浮かない
モード2「見やすい色」… 加齢による黄変を前提にした配色
★寒色 (青) は黄変で沈むので、面を暖色系に寄せ、枠を極太にし、彩度も上げる
★色相が違えば、明るさが同じでも見分けられる。これが本題への答え。 */
#sb-board {
/* ===== モード1「ふだんの色」= 既定 =====
落ち着いた深い色に、役割ごとの色相差を入れる。彩度を上げすぎない。 */
--sb-l0: #0d1526; /* 地 (ほぼ黒に近い紺。カードを引き立てる) */
--sb-stop-bg: #1e2a44; /* バス停 = 青みの面 */
--sb-stop-line: #ffc107; /* 枠は琥珀 (バス停=黄 の体系を保つ) */
--sb-stop-fg: #ffe9b8; /* 文字 */
--sb-route-bg: #16302e; /* 路線 = 緑みの面 */
--sb-route-line: #4db6ac; /* 枠は青緑 */
--sb-route-fg: #d3f2ee; /* 文字 */
--sb-card-w: 3px; /* 枠の太さ */
--sb-l1: #16233d; /* その他のカード */
--sb-l2: #16233d;
--sb-line0: #2c4372;
--sb-line1: #4a6db0;
--sb-line2: #4a6db0;
position: fixed; inset: 0; z-index: 2000;
background: var(--sb-l0); color: #eaf2ff;
display: flex; flex-direction: column; gap: 8px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
/* ===== モード2「見やすい色」 =====
★根拠 (日本のシニア向けデザイン資料): 加齢で水晶体が黄変し、黄色いサングラスを
かけた状態になる。そのため寒色 (青) が沈み、暖色 (赤・橙・黄) は残る。
→ 面そのものを暖色に寄せ、枠を極太 (4px) にし、彩度と文字の明るさを上げる。
★色相の差 + 太さの差 + 文字色の差 の三重で伝える (どれか一つに頼らない)。 */
#sb-board.sb-color2 {
--sb-l0: #1a1206; /* 地 = 濃い焦茶 (青を使わない) */
--sb-stop-bg: #5a3505; /* バス停 = はっきりした茶 */
--sb-stop-line: #ffb300; /* 枠は濃い橙 */
--sb-stop-fg: #fff3d6;
--sb-route-bg: #0b3f2e; /* 路線 = 濃い緑 (茶とは明確に別の色相) */
--sb-route-line: #66d9a0; /* 枠は明るい緑 */
--sb-route-fg: #dcffe9;
--sb-card-w: 4px; /* ★枠をさらに太く */
--sb-l1: #3a2a10;
--sb-l2: #3a2a10;
--sb-line0: #6b4a15;
--sb-line1: #ffb300;
--sb-line2: #ffb300;
}
#sb-board[hidden] { display: none !important; }
#sb-board-clock {
/* 2026-07-27: 時計は黄→白 (酒井様指示)。強調は「あとN分」の黄が担う */
text-align: center; font-size: 56px; font-weight: 700; color: #ffffff;
font-variant-numeric: tabular-nums; line-height: 1.05; flex: none;
}
#sb-board.sb-a11y-lg #sb-board-clock { font-size: 68px; }
#sb-board.sb-a11y-xl #sb-board-clock { font-size: 80px; }
/* 特大時、時計の文字が左右の常設物 (左=🌤天気 / 右=あ⁺) に食い込むのを防ぐ。
スマホ幅 360px の特大で実測 -4px の重なりが出たため、両脇に居場所を確保する。
時計は中央寄せのままなので、見た目の位置は変わらない (2026-07-28 実測で決定)。 */
#sb-board-clock { padding: 0 76px; box-sizing: border-box; }
/* ==== ★2026-08-31 (副長 W6-④) 強い拡大でも便一覧を残す ====
■ 何が起きていたか
#sb-board は position:fixed; inset:0 の縦フレックスである。子のうち
時計・4つの丸ボタン・のりばボタン・ヒーロー・「まだ下にあります」・下部操作は
すべて flex:none = ★縮まない。縮む側は便一覧 (#sb-board-body) ただ一つで、
しかも min-height:0 が掛かっているので【0 まで潰れる】。
ブラウザの拡大を 500% にすると、組み立てに使われる画面は 390x700 → 約 78x140 になる。
縮まないものの合計はゆうに 140 を超えるため、便一覧の取り分が 0 になり、
★行はあるのに高さが 0 = 読めないし、押せない。「次のバスを見る」道具として用を成さない。
(拡大鏡ではなくブラウザ側の拡大・文字の拡大で起きる。拡大鏡は画面を後から
引き伸ばすだけなので、組み立てには影響しない。)
■ 直しは三段。上から順に効かせる
(a) 便一覧に【最低の高さ】を約束する … min-height
(b) 縦が短いときだけ固定領域を縮める・畳む … @media (max-height) の中だけ
(c) それでも足りなければ、お手軽画面ごと縦にスクロールできるようにする
★(c) を最後に置く理由: ふだんの画面ではスクロールさせたくない。高さが足りている間は
(a) も (b) も (c) も発動せず、外殻は動かない = 今までと一字も変わらない見え方になる。
★(c) が「最後の手段」でも必ず要る理由: どれだけ縮めても足りない拡大率は必ずあり、
そのとき★押せない物を画面の外に置いたままにしてはいけない。届く所に置くのが先で、
きれいに収めるのは その次である。 */
#sb-board { overflow-y: auto; overscroll-behavior: contain; } /* (c) */
/* (a) 便一覧の最低の高さは、すぐ下の #sb-board-body の一本 (min-height) で与えている。
★ここに二本目を書いてはいけない。同じセレクタが下にもう一度あり、後勝ちで
こちらが死ぬ (このファイルには既に同じ型の踏み抜きの跡が「ボードの行」の節にある)。 */
/* (b) 画面の縦が短いときだけ固定領域を縮める・畳む部分は、
★このファイルの【いちばん最後】に置いてある (「強い拡大のときだけ効く縮み方」の節)。
ここに書くと、#sb-board-hero / #sb-board-stopbtn / .sb-a11y-hsub などの同じセレクタが
すぐ下にもう一度あり、★後勝ちで丸ごと打ち消されて効かなくなるためである
(メディアクエリは優先度を上げない。同じ強さなら、あとに書いた方が勝つ)。 */
/* ヒーローはスクロール領域の外・上に固定 (行き先が多くても常に一番上) */
#sb-board-hero { background: #0b2557; border: 3px solid #ffe23d; border-radius: 16px; padding: 12px 14px; flex: none; }
#sb-board-hero[hidden] { display: none !important; }
/* ★2026-08-31 (副長 W6-④): min-height を 0 → 138px にした。ここが (a) の本体である。
旧: 0 = 便一覧だけが【いくらでも潰れてよい】。上の固定領域が画面を食い尽くすと
高さ 0 になり、行はあるのに読めない・押せない状態になっていた。
新: 138px = 便の行 (約44px) 3行ぶん + 行間。ここまでは必ず残す。
★ふだんの画面では本文の取り分がこれよりずっと大きいので、見え方は一つも変わらない。
取り分がこれを下回るほど狭い時だけ、はみ出したぶんは上の (c) で
お手軽画面ごとスクロールできる = 見えない物は必ず届く所に置く。 */
#sb-board-body { flex: 1; min-height: 138px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#sb-board-list { display: flex; flex-direction: column; gap: 6px; }
/* ★2026-08-26 ご主人様のご指示: 縦を上下2pxずつ詰める (10px→8px。高さ 64→60px)。
左右の14pxは変えない。中のハートの丸 44px が高さの下限なので、これ以上は丸を小さくしない限り縮まない */
#sb-board-stopbtn {
width: 100%; padding: 8px 14px; border-radius: 14px;
background: #ffe23d; border: none; color: #3a2e00;
font-size: 20px; font-weight: 800; cursor: pointer; flex: none;
display: flex; align-items: center; justify-content: flex-start; gap: 12px;
}
#sb-board-stopbtn[hidden] { display: none !important; }
/* 左端: ハート枠を黒く抜いた丸 (外側の黄ラインは残す)。中に白線ハート、登録済=赤/未登録=中黒 */
#sb-board-stopbtn .sb-board-heartbig {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%; background: #10275a;
}
#sb-board-stopbtn .sb-board-heartbig .sb-a11y-heart { width: 28px; height: 26px; color: transparent; }
#sb-board-stopbtn .sb-board-heartbig .sb-a11y-heart path { fill: #10275a; stroke: #ffffff; stroke-width: 1.2; }
#sb-board-stopbtn .sb-board-heartbig.on .sb-a11y-heart path { fill: #ff4d5e; stroke: #ffffff; stroke-width: 1.2; }
#sb-board-stopbtn .sb-a11y-stopnm { flex: 1; text-align: left; }
#sb-board-stopbtn .sb-board-switch {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%; background: #10275a;
border: none; color: #ffe23d; font-size: 22px; font-weight: 800; cursor: pointer;
}
#sb-board-stopbtn .sb-board-switch:active { filter: brightness(1.2); }
.sb-board-switch-cur { outline: 2px solid #ffe23d; }
.sb-board-switch-now { margin-left: auto; font-size: 13px; font-weight: 700; color: #ffe23d; flex: none; }
/* ★2026-08-02 ご主人様のご指摘「黄色のバッグのやつに統一してほしい」:
ここだけ「黄色い文字」で、他 (#sb-a11y-more / .sb-more-tag) は「黄色い背景のバッジ」だった。
→ 黄色い背景の丸バッジに統一する。跳ね方も同じ。 */
#sb-board-more {
align-self: center; flex: none;
background: #ffe23d; color: #3a2e00; font-size: 14px; font-weight: 700;
padding: 4px 14px; border-radius: 999px;
animation: sb-a11y-bounce 1.2s ease-in-out infinite;
}
#sb-board-more[hidden] { display: none !important; }
#sb-board-actions { display: flex; gap: 8px; flex: none; }
/* ★hidden要素の鉄則: display:flex が hidden 属性に勝ってしまうのを防ぐ (乗車中は とじる を隠す 2026-08-20) */
#sb-board-actions[hidden] { display: none !important; }
#sb-board-close {
flex: 1; padding: 13px; border-radius: 12px; border: 2px solid #4a6db0;
background: #10275a; color: #cfe3ff; font-size: 18px; font-weight: 700; cursor: pointer;
}
#sb-board-font {
position: absolute; top: 12px; right: 14px; z-index: 2; width: 46px; height: 46px;
border-radius: 50%; border: 2px solid #7fd0ff; background: #163a7a; color: #cfe3ff;
font-size: 20px; font-weight: 800; cursor: pointer;
}
/* --- ボードの行 (色分け: fav=黄 / myreach=緑系 / normal=青) --- */
/* ★注意 (2026-08-26 碧ちゃんレビュー(7)): ここの padding は【生きていない】。
同じセレクタがファイル末尾側 (「お手軽ボードの行を2段構成に」の節) にもう一度あり、
そちらの padding: 10px 14px 4px が後勝ちで効く。上下を直すときは、必ずそちらを直すこと。 */
.sb-board-row {
width: 100%; padding: 12px 14px; border-radius: 14px; cursor: pointer;
display: flex; align-items: center; gap: 10px; text-align: left;
border: 2px solid #4a6db0; background: #10275a; color: #eaf2ff;
}
.sb-board-rtime { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; min-width: 52px; }
.sb-board-rmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-board-rname { font-size: 15px; font-weight: 800; }
.sb-board-rbadge { align-self: flex-start; font-size: 14px; padding: 2px 8px; cursor: pointer; } /* 系統番号バッジ (列内で左寄せ・タップで時刻表) */
.sb-board-rbadge:active { filter: brightness(1.15); }
.sb-board-rhead { font-size: 16px; }
.sb-board-rwait { font-size: 16px; font-weight: 800; color: #ffd54f; flex: none; }
/* 走行中バス: 上下ピコピコ */
.sb-board-runbus { display: inline-block; animation: sb-runbus-bounce 0.7s ease-in-out infinite; }
@keyframes sb-runbus-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sb-board-runbus { animation: none; } }
/* fav = お気に入りの路線: 黄色 */
.sb-board-fav { background: #4a3d00; border-color: #ffe23d; }
.sb-board-fav .sb-board-rname { color: #ffe23d; }
/* myreach = いつものバス停へ行ける便: 緑系 (青でも黄でもない別色) */
.sb-board-myreach { background: #0d3320; border-color: #4bd08a; }
.sb-board-myreach .sb-board-rname { color: #7bffb0; }
.sb-board-myreach .sb-board-rwait { color: #7bffb0; }
/* normal = 青 (既定のまま) */
/* --- 近くののりば検索の行 --- */
/* 2行レイアウト: 1行目=停名+距離、2行目=行き先(小さめ) */
.sb-board-nearrow {
/* ★バス停 = 暖色 (濃い茶＋橙枠)。2026-08-02 やり直し。
加齢で水晶体が黄変すると寒色が沈む。★暖色なら沈まない。 */
width: 100%; padding: 12px 14px; border-radius: 14px; cursor: pointer;
display: flex; flex-direction: column; gap: 2px; text-align: left;
border: var(--sb-card-w) solid var(--sb-stop-line); background: var(--sb-stop-bg); color: var(--sb-stop-fg);
box-sizing: border-box;
}
/* いつものバス停 = 塗りつぶしで「自分の登録」を示す (色モードに追随) */
.sb-board-nearmy { background: #5a3200; border-color: #ff9800; color: var(--sb-stop-fg); }
.sb-board-nearmy .sb-board-nearnm, .sb-board-nearmy .sb-a11y-stopnm { color: var(--sb-stop-fg); }
.sb-board-nearmy .sb-board-neardir, .sb-board-nearmy .sb-board-neardist { color: #ffb74d; }
.sb-board-nearline1 { display: flex; align-items: center; gap: 8px; }
/* ★2026-08-04 ご主人様のご指摘: 🔊は【行き先が書かれた2行目の右端】。
2行目も横並びの器にし、行き先を左、🔊を右端に置く (.sb-board-rowspk の margin-left:auto で右寄せ)。 */
.sb-board-nearline2 { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.sb-board-nearline2 .sb-board-neardir { flex: 1; min-width: 0; }
.sb-board-nearnm { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.sb-board-neardir { font-size: 13px; color: #bcd3ff; padding-left: 2px; }
.sb-board-neardist { font-size: 15px; font-weight: 700; color: #9fb8e8; flex: none; }
.sb-board-nearnm .sb-a11y-stopsign { width: 24px; height: 30px; }
.sb-board-nearnm .sb-a11y-heart { width: 22px; height: 22px; }
/* ==== ボード: 便が無いときの路線一覧 ==== */
.sb-board-emptysm { padding: 14px 10px 8px; font-size: 18px; }
.sb-board-emptysm .sb-a11y-empty-icon { font-size: 38px; margin-bottom: 6px; }
.sb-board-routes { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sb-board-routeslab { font-size: 14px; font-weight: 700; color: #9fb8e8; padding: 2px 4px 4px; }
/* ★路線 = 濃い緑＋青緑の枠 (2026-08-02 やり直し)。
バス停 (茶＋橙) とは【色相】が違うので、明るさが同じでも見分けられる。
★ぶら下げや内寄せの小細工はしない (ご主人様のご指摘: 直す箇所が増えるだけ)。色だけで分ける。 */
.sb-board-route {
display: flex; align-items: center; gap: 8px; padding: 10px 12px;
border-radius: 12px; background: var(--sb-route-bg); border: var(--sb-card-w) solid var(--sb-route-line);
color: var(--sb-route-fg); cursor: pointer; box-sizing: border-box;
}
.sb-board-route:hover { filter: brightness(1.2); }
.sb-board-routehead { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--sb-route-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-board-routerun { flex: none; font-size: 18px; min-width: 22px; text-align: center; }
.sb-board-routecd {
flex: none; width: 42px; height: 42px; border-radius: 10px;
background: #163a7a; border: 1px solid #ffd54f; color: #ffd54f;
font-size: 19px; cursor: pointer;
}
.sb-board-routefav {
flex: none; width: 42px; height: 42px; border-radius: 10px;
background: #10275a; border: 1px solid #7fd0ff; color: #7fd0ff;
font-size: 21px; cursor: pointer;
}
.sb-board-routefav.on { background: #ffe23d; border-color: #ffe23d; color: #3a2e00; }
/* 🚌 走行中のバスを地図で追う (2026-08-02 お手軽モード内の操作を統一)。
ミント = 押せる、の体系に合わせる */
.sb-board-destrun {
flex: none; width: 42px; height: 42px; border-radius: 10px;
background: #10275a; border: 1px solid #8FC9BA; color: #8FC9BA;
font-size: 20px; cursor: pointer;
}
/* かな検索: 候補一覧の見出し (50音パッドの下に来るので何の一覧か明示する) */
.sb-board-kana-candslab { display: block; margin: 8px 0 4px; }
/* ==== ボード: いつものバス停に未登録の停 (黄色にせず黒ハートで明示) ==== */
#sb-board-stopbtn.sb-board-stop-unreg {
background: #10275a; border: 2px solid #4a6db0; color: #cfe3ff;
}
.sb-board-unregheart { display: inline-block; margin-right: 9px; font-size: 22px; color: #1a1a1a;
text-shadow: 0 0 2px rgba(255,255,255,.35); vertical-align: middle; }
/* ==== ボード: 今ヒーローに出している便の行 (オレンジで強調) ==== */
.sb-board-row.sb-board-heronow {
background: #5a3200; border-color: #ff9800;
}
.sb-board-row.sb-board-heronow .sb-board-rname { color: #ffb74d; }
.sb-board-row.sb-board-heronow .sb-board-rwait { color: #ffb74d; }
/* ==== ボード: ヒーロー下段 (到着予測テキスト + 遅延バッジを横並び) ==== */
#sb-board-hero .sb-a11y-hsub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#sb-board-hero .sb-board-hsubtxt { color: #9fc0ff; font-size: 14px; }
/* ==== ボード: 行き先を上に単独、「あと○分」の右に4バッジ(2×2) ==== */
#sb-board-hero .sb-board-hrow-head { align-items: center; gap: 8px; margin-bottom: 6px; }
#sb-board-hero .sb-board-hrow-head .sb-a11y-hstop { flex: 1; white-space: normal; }
/* 「あと○分」を左、バッジ群を右端に寄せて同じ行に収める */
#sb-board-hero .sb-board-hmain { display: flex; align-items: center; gap: 10px; }
/* ★2026-09-08 ご主人様のご発案「あと何メートル」を数字の真上に。hnumwrap を縦に積み、数字の行 (hnumrow) はそのまま横並び */
#sb-board-hero .sb-board-hnumwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: none; }
#sb-board-hero .sb-board-hnumrow { display: flex; align-items: baseline; gap: 4px; }
#sb-board-hero .sb-board-hdist { display: block; min-height: 18px; font-size: 14px; line-height: 18px; color: #cfe3ff; font-variant-numeric: tabular-nums; white-space: nowrap; }
#sb-board-hero .sb-board-hmain .sb-a11y-hbtns { margin-left: auto; margin-top: -6px; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
/* ==== 終日時刻表ポップアップ ==== */
.sb-tt-card { max-width: 92vw; width: 420px; }
.sb-tt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sb-tt-headtxt { font-size: 18px; font-weight: 800; color: #eaf2ff; }
.sb-tt-sub { font-size: 13px; color: #9fb8e8; margin-bottom: 10px; }
.sb-tt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.sb-tt-cell { text-align: center; padding: 8px 4px; border-radius: 8px; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; background: #163a7a; color: #ffe23d; }
.sb-tt-cell.past { background: #10203f; color: #5a6b8a; font-weight: 600; }
.sb-tt-empty { color: #9fb8e8; padding: 16px; text-align: center; }
/* ==== トップの4つの丸ボタン (2026-08-02 ご主人様のご指示で2→4に再構成) ====
近く / 行き先 / さがす / のってる。
★色はミント (#8FC9BA = 押せる) の体系で統一。以前の2ボタンと同じ色を保つので、
使っていた方が「別のアプリになった」と感じない。
★丸の中は絵、下に短い言葉。文字だけより形で覚えられる (お年寄り・弱視の方向け)。
★「のってる」だけは橙。降りるまで使う別の場面なので、色で区別する。 */
#sb-board-searchrow { display: flex; gap: 6px; align-items: flex-start; }
#sb-board-searchrow [hidden] { display: none !important; } /* hidden のボタンは確実に消す (flex隙間も残さない) */
.sb-board-searchbtn { flex: 1 1 0; min-width: 0; }
.sb-board-searchbtn-full { flex: 1 1 100%; }
/* ★各画面の「◀ もどる」(2026-08-02)。丸ボタンの意味を場面で変えないための独立ボタン。
中身の一番上に、いつも同じ形・同じ場所で出る = 迷わない */
.sb-board-backbtn { display: block; width: 100%; margin: 0 0 10px; text-align: center; }
.sb-board-circbtn {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 4px;
background: none; border: none; padding: 2px 0; cursor: pointer;
color: #eaf2ff;
}
.sb-board-circicon {
display: inline-flex; align-items: center; justify-content: center;
width: 58px; height: 58px; border-radius: 50%;
background: rgba(143, 201, 186, 0.20);
border: 2px solid #8FC9BA;
font-size: 26px; line-height: 1;
color: #8FC9BA; /* 自作SVG (ゴールフラッグ) の currentColor 用 */
}
.sb-board-circlab { font-size: 14px; font-weight: 700; color: #cfe3ff; white-space: nowrap; }
.sb-board-circbtn:active .sb-board-circicon { background: rgba(143, 201, 186, 0.38); }
.sb-board-circbtn:hover .sb-board-circicon { background: rgba(143, 201, 186, 0.30); }
/* 選択中 (その画面を開いている) は塗りつぶして現在地を示す */
.sb-board-circbtn.sb-on2 .sb-board-circicon { background: #8FC9BA; color: #08243a; }
.sb-board-circbtn.sb-on2 .sb-board-circlab { color: #8FC9BA; }
/* 🚌のってる: 乗車中は別の場面なので橙 (乗車中モードの見出しと同じ色) */
.sb-board-circride .sb-board-circicon { border-color: #ffa040; background: rgba(255, 160, 64, 0.18); color: #ffa040; }
.sb-board-circride:active .sb-board-circicon { background: rgba(255, 160, 64, 0.34); }
.sb-board-circride.sb-on2 .sb-board-circicon { background: #ffa040; color: #2a1d0c; }
.sb-board-circride.sb-on2 .sb-board-circlab { color: #ffa040; }
/* 文字を大きくしたときは丸も少し大きく (お手軽モードの文字サイズ切替に追随) */
#sb-board.sb-a11y-lg .sb-board-circicon { width: 64px; height: 64px; font-size: 29px; }
#sb-board.sb-a11y-lg .sb-board-circlab { font-size: 15px; }
#sb-board.sb-a11y-xl .sb-board-circicon { width: 70px; height: 70px; font-size: 32px; }
#sb-board.sb-a11y-xl .sb-board-circlab { font-size: 16px; }
.sb-board-circicon .sb-a11y-goalflag { width: 26px; height: 30px; margin-right: 0; color: inherit; }
/* 目的地えらびの大ボタン (いつものバス停から / 入力する) */
.sb-board-destbig { display: block; width: 100%; margin: 6px 0; }
/* 50音パッド */
/* ★入力欄は上に貼り付けて動かさない (2026-08-02 ご主人様のご指摘:
「探すと入力ボックスが下に下がってしまって、スクロールしないと2文字目を入力できない」)
候補が増えると入力欄が押し下げられていた。sticky で常に見える位置に留める。
背景を不透明にしないと、下を流れる候補が透けて読めなくなる (拡大鏡使用のため特に) */
.sb-board-kana-inrow {
display: flex; align-items: center; gap: 8px; margin: 6px 0;
position: sticky; top: 0; z-index: 5;
background: #0b1f47; padding: 6px 0; border-bottom: 1px solid #2a4a86;
}
.sb-board-kana-in { flex: 1; font-size: 20px; font-weight: 800; color: #ffe23d; background: var(--sb-l1); border-radius: 10px; padding: 8px 12px; min-height: 24px; }
.sb-board-kana-del { flex: none; background: #163a7a; border: 1px solid #4a6db0; color: #eaf2ff; border-radius: 10px; padding: 8px 12px; font-size: 15px; cursor: pointer; }
.sb-board-kana-cands { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
/* 検索候補の右端: いつものバス停に登録するハート */
/* かな候補行は停名とハートを横並びに (親の nearrow が column のため上書き) */
/* ★2026-08-02 ご主人様のご指摘「結果表示のカードが画面からはみ出ている」:
実測で 397px (枠は366px) と 31px はみ出していた。
原因は width:100% に padding 14px×2 と border 2px×2 が外側で足されていたこと。
→ box-sizing で内側に収める。停名が長いときは省略する。 */
.sb-board-candrow { flex-direction: row; align-items: center; gap: 8px; box-sizing: border-box; max-width: 100%; }
.sb-board-candrow .sb-a11y-stopnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ★2026-08-04 screen① の修正に伴う追加: 候補行は「器 (div) + 停名ボタン + ハート + 🔊」の
兄弟構成に改めた (ボタンの中にボタンの入れ子を解消)。
★ご主人様のご指摘 (2026-08-04): 幅と間隔は【元のまま】にすること。デザインは変えない。
停名ボタンを flex:1 にすると停名の枠が右端まで伸び、ハートが右へ押し出されて
🔊との間が開いてしまう。中身のぶんだけの幅にして、元の詰まった並びに戻す。 */
.sb-board-candname {
flex: 0 1 auto; min-width: 0; display: flex; align-items: center;
background: none; border: 0; padding: 0; margin: 0;
font: inherit; color: inherit; text-align: left; cursor: pointer;
overflow: hidden;
}
.sb-board-candname:active { filter: brightness(1.15); }
/* ★2026-08-04 ご主人様のご指摘 (再訂正): 近くののりばカードは2段。
1段目 = 停名 + ハート / 2段目 = 行き先(方面) + 🔊(右端)。
🔊は「行き先の行の右端」に置くのがご指定。 */
.sb-board-poletwo { flex-direction: column; align-items: stretch; row-gap: 4px; }
.sb-board-poleline1, .sb-board-poleline2 { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.sb-board-poleline1 .sb-a11y-stopnm { flex: 1; min-width: 0; }
.sb-board-poleline1 .sb-board-candfav { margin-left: auto; }
.sb-board-poleline2 .sb-board-neardir { flex: 1; min-width: 0; }
.sb-board-candfav {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; background: #10275a; margin-left: auto;
/* ★2026-08-04: span から button に変えたため、ブラウザ既定の枠と余白を消して見た目を保つ */
border: 0; padding: 0; cursor: pointer;
}
.sb-board-candfav .sb-a11y-heart { width: 22px; height: 20px; color: transparent; }
.sb-board-candfav .sb-a11y-heart path { fill: #10275a; stroke: #ffffff; stroke-width: 1.4; }
.sb-board-candfav:active { filter: brightness(1.25); }
/* 登録済み: ハートを赤く (登録済=赤の統一ルールに合わせる) */
.sb-board-candfav.on .sb-a11y-heart path { fill: #ff4d5e; stroke: #ffffff; stroke-width: 1.4; }
/* ★2026-08-04 ご主人様のご指示: 候補行のハートと🔊は【右詰め】。
ハートと🔊の間、および🔊の右側の余白を詰める。
実測 (修正前): ハート→🔊 = gap 8px + margin 6px + バッジ左padding 9px = 23px。
🔊→右枠 = バッジ右padding 9px + カード内側余白 14px = 23px。
修正後: margin を 0、横 padding を 4px にし、右へ -4px 引き寄せる。
→ ハート→🔊 = 12px、🔊→右枠 = 14px。縦 padding は 6px に増やし、押し場所は保つ。 */
.sb-board-candrow .sb-board-rowspk { margin-left: 0; padding: 6px 4px; margin-right: -4px; }
/* ★2026-08-04 ご主人様のご指示 (続き): ハートをもう少し右 (🔊寄り) へ。
ハートの右 margin を -6px にし、gap 8px と合わせて ハート→🔊絵文字 = 6px にする。
(-6px でもバッジの当たり判定はハートに重ならないことを計算で確認済み。) */
.sb-board-candrow .sb-board-candfav { margin-right: -6px; }
/* 🗺 地図でえらんだ停のバッジ行 (結果画面の最上段): 黄枠で「この停のことだよ」を強調 */
.sb-board-pickedrow { border-color: #ffe23d; cursor: default; }
/* ⌨️さがす の結果: のりばの見出し (2026-08-02)。その下に来る路線が並ぶ */
.sb-board-foundpole { margin-top: 10px; border-color: #ffe23d; }
.sb-board-foundpole .sb-board-neardir { display: block; font-size: 13px; color: #bcd3ff; }
/* ==== ★2026-09-18 開いたら そのまま「近くのバス停」 (ご主人様の構想) ====
いつものバス停が一つも無い方に、起動直後そのまま出す一覧の札。
★見た目は既存の のりばカード (.sb-board-nearrow + .sb-board-poletwo) をそのまま借り、
3段目に「次のバス」を足しただけである。新しい色も新しい形も作っていない。
★札そのものがキーボードで押せる (JS 側で role="button" / tabindex="0" を付けている) ので、
焦点が当たっていることが目で分かる枠を必ず出す。拡大鏡で見ている方には、これが唯一の手がかり。 */
.sb-board-onbrow { box-sizing: border-box; max-width: 100%; position: relative; }
.sb-board-onbrow .sb-a11y-stopnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ★★2026-09-18 二便目 (副長5): 押せるものを【兄弟】にした。
外枠 (.sb-board-onbrow) は article = 操作しない器。押す所は下の透明な釦が引き受ける。
★こうした理由: 3段組み (停名+距離+♡ / 方面+🔊 / 次のバス) の中に ♡ と 🔊 が挟まっており、
文字を釦の【中】へ入れると、この二つを元の位置へ戻せない = 見た目が変わる。
文字の並びはそのまま置き、上に透明な釦を重ねて「押す所」だけを移した。
★inset は 0 (枠の内側いっぱい) にしてある。外へ出すと隣の札の当たり判定と重なり得るし、
scrollWidth にも乗って「横にはみ出している」ように見えてしまう。 */
.sb-board-onbopen {
position: absolute; inset: 0; z-index: 0;
margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
font: inherit; border-radius: calc(14px - var(--sb-card-w)); cursor: pointer;
-webkit-appearance: none; appearance: none;
}
/* ★焦点の枠は釦の側へ移した。拡大鏡で見ている方には、これが唯一の手がかりである。
★釦は枠の【内側】に居るので、枠の太さぶん外へ押し出して、旧い形
(.sb-board-onbrow:focus-visible に offset 2px) とまったく同じ位置に出す。
色モードで枠が 3px→4px に太るときも、この式なら自分でついてくる。 */
.sb-board-onbopen:focus-visible {
outline: 3px solid #7fd0ff; outline-offset: calc(var(--sb-card-w) + 2px);
}
/* ★3段の文字は【押せない】ようにして、指も矢印も下の釦へ通す。
♡ と 🔊 だけ押せるように戻す = 二つは独立した操作要素のままである。 */
.sb-board-onbrow > .sb-board-poleline1,
.sb-board-onbrow > .sb-board-poleline2,
.sb-board-onbrow > .sb-board-onbnext { position: relative; z-index: 1; pointer-events: none; }
.sb-board-onbrow .sb-board-candfav,
.sb-board-onbrow .sb-board-rowspk { pointer-events: auto; }
/* ★:active は押された要素の【祖先にも】効くので、中の釦を押せばこの器も暗くなる (旧と同じ)。 */
.sb-board-onbrow:active { filter: brightness(1.15); }
/* 3段目 = 次のバス (系統 + あと◯分)。★この画面でいちばん知りたい一行なので、黄で大きく */
.sb-board-onbnext { font-size: 17px; font-weight: 800; color: #ffe23d; }
/* バスの話ではなく断り (うまく取得できません / 3時間以内に無い) は、同じ大きさで出さない */
.sb-board-onbnext-ng { font-size: 14px; font-weight: 700; color: #ffb74d; }
#sb-board.sb-a11y-lg .sb-board-onbnext { font-size: 20px; }
#sb-board.sb-a11y-xl .sb-board-onbnext { font-size: 23px; }
#sb-board.sb-a11y-lg .sb-board-onbnext-ng { font-size: 16px; }
#sb-board.sb-a11y-xl .sb-board-onbnext-ng { font-size: 18px; }
/* 位置が取れなかった回に、一覧の代わりに先頭へ出す「🔍 バス停の名前で さがす」。
★色と形は ◀もどる / 🔍さがす の一族 (.sb-a11y-nearbtn) のまま。画面推移で色を変えない方針。 */
.sb-board-onbfind { margin: 10px 0 0; }
/* 方面えらびフローティング */
.sb-pole-card { max-width: 92vw; width: 420px; }
.sb-pole-title { font-size: 20px; font-weight: 800; color: #eaf2ff; margin-bottom: 2px; }
.sb-pole-sub { font-size: 14px; color: #9fb8e8; margin-bottom: 10px; }
.sb-pole-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.sb-pole-row {
display: flex; align-items: center; gap: 8px; padding: 12px 14px; text-align: left;
border-radius: 12px; background: #163a7a; border: 2px solid #33507f; color: #eaf2ff;
font-size: 16px; font-weight: 700; cursor: pointer;
}
.sb-pole-row:active { filter: brightness(1.15); }
.sb-pole-head { flex: 1; min-width: 0; }
.sb-pole-done { opacity: .6; }
.sb-pole-donelab { flex: none; font-size: 13px; color: #ffe23d; }
.sb-board-kana-pad { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sb-board-kana-row { display: flex; gap: 6px; }
.sb-board-kana-key { flex: 1 1 0; aspect-ratio: 1 / 1; font-size: 22px; font-weight: 800; background: #10275a; border: 2px solid #33507f; color: #eaf2ff; border-radius: 10px; cursor: pointer; }
.sb-board-kana-key:hover { border-color: #4a6db0; }
.sb-board-kana-sp { flex: 1 1 0; }
/* おまかせ経路さがし 候補カード */
/* ★経路の結果カード = 中身は「便」なので、路線カードと同じ色にする (2026-08-02)。
★どの画面でも「便のカード」は同じ見た目 = 覚えることが減る */
.sb-board-destcard {
background: var(--sb-route-bg); border: var(--sb-card-w) solid var(--sb-route-line);
color: var(--sb-route-fg);
border-radius: 12px; padding: 10px 12px; margin: 8px 0; box-sizing: border-box; width: 100%;
}
.sb-board-destfrom, .sb-board-desthead { color: var(--sb-route-fg); }
/* ★2026-08-02 ご主人様のご指示:
「〇〇から は左詰め、ピンのバッジは右詰め。その幅は、下の ⭐ と 🚌 の
両方のアイコンの左端〜右端の幅に合わせる」
実測: ⭐ 42px + gap 8px + 🚌 42px = 92px。ピンをこの幅に固定して右端へ寄せる。
★下の段とタテ位置が揃うので、拡大鏡でも目で追いやすくなる。 */
.sb-board-destfrom {
font-size: 16px; color: #eaf2ff; margin-bottom: 6px;
display: flex; align-items: center; gap: 8px;
}
.sb-board-destfrom .sb-board-destfromnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-board-destfrom .sb-board-locbtn {
/* ★幅は「下の段の ⭐ と 🚌 の左端〜右端」に正確に合わせる。
★padding 5px9px と border 2px が外側に付くため box-sizing で内側に収める
(これを付けないと実測 113px になり、右端が揃わなかった。2026-08-02 実測) */
flex: none; width: 92px; box-sizing: border-box; /* = ⭐42 + gap8 + 🚌42 */
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.sb-board-destdist { color: #9fb8e8; font-size: 14px; }
/* ⚠ 登録した停が時刻表から消えているときの案内 (2026-08-02)。
★半透明を使わず、はっきり読める色にする (拡大鏡使用のため) */
.sb-board-stopgone {
background: #4a2b00; border: 2px solid #ffb300; border-radius: 12px;
padding: 12px 14px; margin: 10px 0; line-height: 1.35;
}
.sb-board-stopgone-t { font-size: 17px; font-weight: 800; color: #ffd54f; margin-bottom: 4px; }
.sb-board-stopgone-s { font-size: 15px; color: #ffe9b0; }
.sb-board-destmid { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* 系統バッジと行き先は左詰め、⭐🚌 は右端へ (上段のピンと右端を揃える) */
.sb-board-desthead { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: #eaf2ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-board-destdep { font-size: 18px; color: #ffe23d; font-weight: 800; }
.sb-board-destdep b { font-size: 22px; }
.sb-board-destwait { color: #7fe0a0; font-size: 15px; font-weight: 700; }
/* ===== ⚙ 設定: iOS設定風の縦リスト (2026-07-23) =====
ポップアップの2列タイルが目一杯になったため、セクション見出し + 角丸グループ +
1行1項目の縦リストへ再構成。行が大きくなり弱視・高齢の方にも扱いやすい。
既存の id / .sb-switch / .sb-tile-h はそのまま流用 (JS 無変更)。 */
.sb-set-card.sb-ios {
width: min(430px, 96vw);
padding: 10px 12px 14px;
}
@media (max-width: 640px) {
/* スマホは全画面 (iOSの設定アプリの流儀) */
#sb-settings { align-items: stretch; justify-content: stretch; }
.sb-set-card.sb-ios {
width: 100vw; max-height: 100dvh; height: 100dvh;
border: none; border-radius: 0;
}
}
.sb-ios-sec {
font-size: 12px; font-weight: 700; letter-spacing: .04em;
color: rgba(255,255,255,.62);
margin: 10px 4px 4px;
}
.sb-ios-group {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-radius: 12px;
overflow: hidden;
}
.sb-ios-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px;
font-size: 14px; font-weight: 600; color: #fff;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.sb-ios-group > .sb-ios-row:last-child { border-bottom: none; }
.sb-ios-row > span small { display: block; font-size: 11px; font-weight: 400; opacity: .65; }
/* スライダー行は 2 段 (ラベル+現在値 / バー) */
.sb-ios-range { flex-direction: column; align-items: stretch; gap: 4px; cursor: pointer; }
.sb-ios-range .sb-tile-h { display: flex; justify-content: space-between; font-size: 13px; }
.sb-ios-range input[type="range"] { width: 100%; margin: 0; }
/* アクション行 (ボタン) はグループに溶け込ませる */
button.sb-ios-act {
width: 100%; text-align: left; background: transparent; border: none;
border-bottom: 1px solid rgba(255,255,255,.10);
color: #7fd0ff; cursor: pointer; font-family: inherit;
}
button.sb-ios-act:hover { background: rgba(255,255,255,.08); }
.sb-ios .sb-cid-row { margin: 0; padding: 9px 12px; }
/* 見え方スライダー操作中はパネルを薄くして、後ろの地図で効果を確認できるようにする
(旧ポップアップ時代は幕なしで地図が見えていた利点の継承。JS が .sb-adjusting を付与) */
#sb-settings.sb-adjusting .sb-set-card { opacity: .22; transition: opacity .15s; }
/* 🏙 PLATEAU建物 (deck.gl) は路線ラインSVG・バスより下に敷く (2026-07-23 酒井様のご指摘)。
deck.gl の canvas (#deckgl-overlay) は canvasContainer 内で SVG より後に追加され上に来てしまうため、
z-index で地理院建物 (map canvas 内) と同じ「路線線・バスが建物の上」の関係を再現する。 */
#deckgl-overlay { z-index: 0 !important; }
#sb-route-svg { z-index: 1; }
/* 🏙 PLATEAU: deck.gl は addControl 経由で .maplibregl-ctrl-top-left (既定 z:2) に入るため、
路線SVG (z:1) より祖先ごと上になり路線線が建物に隠れていた (2026-07-23 酒井様のご指摘・真因)。
top-left は deck 専用 (ズーム・現在地等は top-right) なので枠ごと下げる。
将来 top-left に別コントロールを置く場合はこの指定を見直すこと。 */
.maplibregl-ctrl-top-left { z-index: 0 !important; }
/* ⚙ iOS風設定: サブ画面ナビ行 (›) と 戻るボタン (2026-07-23 階層化) */
button.sb-ios-nav {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; font-size: 14px; font-weight: 600; color: #fff; font-family: inherit;
text-align: left; background: transparent; border: none;
border-bottom: 1px solid rgba(255,255,255,.10); cursor: pointer;
}
button.sb-ios-nav:hover { background: rgba(255,255,255,.08); }
button.sb-ios-nav > span small { display: block; font-size: 11px; font-weight: 400; opacity: .65; }
.sb-ios-arrow { color: rgba(255,255,255,.5); font-size: 18px; font-weight: 400; }
.sb-ios-back {
background: #16346e; color: #fff; border: 1px solid rgba(255,255,255,.5);
border-radius: 8px; padding: 3px 10px; font-size: 13px; cursor: pointer; margin-right: 6px;
font-family: inherit;
}
.sb-ios-back:hover { background: #1c3a75; }
/* ⚙ iOS風設定: セクション見出しの補足 (例「ふだんはOFFのままで大丈夫です」) 2026-07-23 */
.sb-ios-sec small { font-weight: 400; opacity: .8; margin-left: 4px; }
/* ⚙ iOS風設定: ✕ボタンがカード外(sb-sheet-wrap基準)に置かれ、全画面表示のスマホでは画面外に見切れていた
(2026-07-23 酒井様のご指摘・実機iPhone)。設定パネルに限り、カード内の右上に収める。
タイトル行とも重ならないよう、タイトルに右パディングを確保する。 */
#sb-settings .sb-x {
position: fixed;
top: max(10px, env(safe-area-inset-top, 0px));
right: max(10px, env(safe-area-inset-right, 0px));
z-index: 20;
}
.sb-set-card.sb-ios .sb-set-title { padding-right: 52px; box-sizing: border-box; }
/* ===== 画面下のクレジット整理 (2026-07-23 酒井様のご指摘) =====
PLATEAU の出典追加でクレジットが4行に伸び、右下の MapLibre 標準アトリビューション
(地理院ベクトルタイル提供実験 | MapLibre) と重なって読めなくなっていた。
対策: 自前クレジットを画面幅いっぱいの「帯」にして最下部に固定し、
標準アトリビューションはその帯の真上の行に逃がす (縦に積んで重なりを物理的に無くす)。 */
#sb-credit {
left: 0; right: 0; bottom: 0;
max-width: none; /* 62vw 制限をやめ、折り返しを減らす */
padding: 3px 10px calc(3px + env(safe-area-inset-bottom, 0px));
border-radius: 0;
background: rgba(20, 24, 34, 0.82);
text-align: left;
}
/* 標準アトリビューションはクレジット帯の上へ。左寄せにして地図操作ボタンとも離す */
.maplibregl-ctrl-bottom-right { bottom: 46px; }
@media (max-width: 640px) {
/* スマホはクレジットが2〜3行になるため、さらに上へ逃がす */
.maplibregl-ctrl-bottom-right { bottom: 74px; }
#sb-credit { font-size: 9.5px; line-height: 1.35; }
}
/* スマホでカードが画面幅をはみ出していた (100vw がスクロールバー分を含み、親の padding と二重になる)
→ 幅は親に任せ、box-sizing でパディング込みに収める (2026-07-23 実測で判明) */
@media (max-width: 640px) {
#sb-settings .sb-sheet-wrap { width: 100%; }
.sb-set-card.sb-ios { width: 100%; max-width: 100%; box-sizing: border-box; }
}
/* ===== クレジット/閉じるボタンの最終調整 (2026-07-23 酒井様のご指示) ===== */
/* クレジットは1文で連結表示 (改行はブラウザの折り返しに任せる) */
#sb-credit .sb-credit-data, #sb-credit .sb-credit-org { display: inline; }
/* MapLibre 標準アトリビューションはクレジット帯のすぐ上に寄せる (離れすぎて浮いていた) */
.maplibregl-ctrl-bottom-right { bottom: 26px; }
@media (max-width: 640px) {
/* クレジット帯 (2-3行=約44px) の真上に接するまで下げる (2026-07-23 酒井様のご指示) */
.maplibregl-ctrl-bottom-right { bottom: 36px; }
}
/* 設定は ✕ ではなく iOS 流の「‹ 戻る」を左上に置く (右上は端末UIと干渉しやすい) */
#sb-settings .sb-x { display: none !important; }
#sb-set-close-left {
position: fixed; z-index: 20;
top: max(10px, env(safe-area-inset-top, 0px)); /* サブ画面の‹戻る(10px)と上端を揃える (2026-07-23 実測) */
left: max(8px, env(safe-area-inset-left, 0px));
background: #16346e; color: #fff;
border: 1px solid rgba(255,255,255,.55); border-radius: 8px;
padding: 5px 12px; font-size: 14px; font-weight: 700;
font-family: inherit; cursor: pointer;
}
#sb-set-close-left:hover { background: #1c3a75; }
/* 左上の戻るボタンと重ならないよう、パネル見出しは右へ寄せる */
.sb-set-card.sb-ios .sb-set-title { padding-left: 84px; padding-right: 10px; }
/* 左端の縦ラインを揃える (2026-07-23 酒井様のご指摘・実測: 戻る8px / グループ12px / 見出し16px とバラバラだった)
カードの padding-left(12px) を基準に、戻るボタンと見出しをその線へ合わせる */
#sb-set-close-left { left: max(12px, env(safe-area-inset-left, 0px)); }
.sb-ios-sec { margin-left: 0; }
/* サブ画面 (地理院/PLATEAU) の見出しは自前の「‹戻る」を内包するので、
メイン用に空けた左パディング(84px)は不要。左端12pxの縦ラインに揃える (2026-07-23 実測) */
#sb-sub-gsi .sb-set-title, #sb-sub-plateau .sb-set-title { padding-left: 0; }
/* 戻るボタンの見た目をメイン/サブで完全に統一 (2026-07-23 酒井様のご指摘)
実測差: メイン 14px・700・pad5/12 に対し サブ 13px・400・pad3/10 だった → メイン基準に合わせる */
#sb-sub-gsi .sb-ios-back, #sb-sub-plateau .sb-ios-back {
padding: 5px 12px; font-size: 14px; font-weight: 700; margin-right: 8px;
border: 1px solid rgba(255,255,255,.55); border-radius: 8px; box-sizing: border-box;
}
#sb-set-close-left { border: 1px solid rgba(255,255,255,.55); box-sizing: border-box; }
/* 実測でメイン=Noto Sans JP / サブ=Yu Gothic UI とフォントが異なり文字幅が2pxずれていた (2026-07-23)。
両方ともパネル(.sb-set-card)のフォントに合わせて完全一致させる */
#sb-set-close-left, #sb-sub-gsi .sb-ios-back, #sb-sub-plateau .sb-ios-back {
font-family: "Yu Gothic UI", "Hiragino Sans", "Segoe UI", sans-serif;
}
/* ================= 系統図 (ライン図) — 吹き出しの系統バッジから開くフローティング表示 =================
2026-07-26 新設。始発が上・終点が下。左のレールに丸を並べ、縦線でつないだ路線図風にする。
器 (#sb-line-sheet / .sb-fav-card / .sb-more-tag) は既存シートと同じ作りを共有し、
「▼ まだ下にあります」も共通実装 (refreshMoreTag) をそのまま使う。 */
#sb-line-sheet {
position: fixed; inset: 0; z-index: 101; /* 吹き出し(z:100系)より前 */
background: transparent;
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none; /* 地図はそのまま操作できる */
}
#sb-line-sheet[hidden] { display: none; }
.sb-line-msg { padding: 20px 4px; text-align: center; opacity: 0.85; }
.sb-line { list-style: none; margin: 6px 0 2px; padding: 0; }
.sb-line-it, .sb-line-bus { display: flex; align-items: center; gap: 10px; position: relative; }
.sb-line-it { min-height: 46px; } /* 指で押せる高さ = 読みやすい行間 */
/* 左のレール: 上下に伸びる縦線 + 停留所の丸 */
.sb-line-rail {
position: relative; flex: none; width: 30px; align-self: stretch;
display: flex; align-items: center; justify-content: center;
}
.sb-line-rail::before {
content: ""; position: absolute; left: 50%; transform: translateX(-50%);
top: 0; bottom: 0; width: 4px; background: #4a6ea8; border-radius: 2px;
}
.sb-line-first .sb-line-rail::before { top: 50%; } /* 始発は下向きだけ */
.sb-line-last .sb-line-rail::before { bottom: 50%; } /* 終点は上向きだけ */
.sb-line-dot {
position: relative; z-index: 1; box-sizing: border-box;
width: 15px; height: 15px; border-radius: 50%;
background: #0b2557; border: 4px solid #ffffff;
}
.sb-line-first .sb-line-dot,
.sb-line-last .sb-line-dot { width: 22px; height: 22px; border-width: 5px; }
.sb-line-name { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.25; }
.sb-line-time { flex: none; font-size: 14px; color: #7fd0ff; font-variant-numeric: tabular-nums; }
.sb-line-tag {
margin-left: 6px; vertical-align: middle;
font-size: 11px; font-weight: 700;
background: #ffe23d; color: #3a2e00; border-radius: 999px; padding: 1px 8px;
}
/* 通過済みは淡く落とし、これから乗る区間を目立たせる */
.sb-line-passed .sb-line-name,
.sb-line-passed .sb-line-time { opacity: 0.45; }
.sb-line-passed .sb-line-dot { border-color: #6f86ad; }
/* つぎに停まる停留所を強調 */
.sb-line-next .sb-line-name { color: #ffe23d; }
.sb-line-next .sb-line-dot { border-color: #ffe23d; box-shadow: 0 0 0 4px rgba(255, 226, 61, 0.25); }
/* いまここ (バスの現在位置) */
.sb-line-bus { min-height: 34px; }
.sb-line-busmk {
position: relative; z-index: 2; font-size: 20px; line-height: 1;
animation: sb-line-peco 0.9s ease-in-out infinite;
}
.sb-line-bustxt { font-size: 13px; font-weight: 700; color: #ffe23d; }
@keyframes sb-line-peco { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sb-line-busmk { animation: none; } }
/* 吹き出しの系統バッジは「押せる」ことを見た目でも伝える */
.maplibregl-popup-content .sb-fav-badge {
cursor: pointer;
text-decoration: underline dotted rgba(0, 0, 0, 0.4);
text-underline-offset: 2px;
}
@media (max-width: 640px) {
.sb-line-name { font-size: 15px; }
.sb-line-it { min-height: 44px; }
}
/* ==== 時刻表カードの2タブ (🕐時刻表 / 🚌系統図) — 2026-07-26 ====
系統バッジという1つの入口のまま、2つの見かたを切り替える。初期表示は従来どおり時刻表。
▼は共通の .sb-more-tag。position:absolute なのでカード側に基準 (relative) を持たせる。 */
.sb-tt-card { position: relative; }
.sb-tt-tabs { display: flex; gap: 8px; margin: 10px 0 8px; }
.sb-tt-tab {
flex: 1 1 0; min-width: 0; min-height: 48px; cursor: pointer;
font-size: 16px; font-weight: 800; white-space: nowrap;
background: #10275a; color: #9fb8e8;
border: 2px solid #35548f; border-radius: 12px;
}
.sb-tt-tab.sb-on {
background: #ffe23d; color: #3a2e00; border-color: #ffe23d;
}
.sb-tt-tab:hover { border-color: #7fd0ff; }
/* 中身の器。タブで入れ替わるので、スクロールと高さはここに集約する
(旧 .sb-tt-grid 側の max-height / overflow は下で打ち消す) */
.sb-tt-pane { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 12px; }
.sb-tt-pane .sb-tt-grid { max-height: none; overflow: visible; margin-bottom: 0; }
/* ▼はOKボタンに重ならないよう、器の下端あたりへ置く */
.sb-tt-card .sb-more-tag { bottom: 64px; }
/* ==== 系統図: 自分が待っているバス停 (💛) と 一行サマリ — 2026-07-26 ====
高齢の利用者には「地図でバスを探す」より「あと3停留所」の方が速い、というご主人様のご指摘による。
自分の停を強く出し、上に残り停留所数を置いて、地図を開かなくても状況が分かるようにする。 */
.sb-line-sum {
font-size: 16px; font-weight: 800; line-height: 1.4;
color: #0b2557; background: #ffe23d;
border-radius: 10px; padding: 9px 12px; margin: 0 0 10px;
}
.sb-line-sum b { font-size: 22px; }
.sb-line-sum-soon { background: #ff8a3d; color: #241000; }
.sb-line-sum-off { background: #163a7a; color: #9fb8e8; font-weight: 700; }
/* 自分のバス停: 行ごと帯にして、丸も一回り大きく */
.sb-line-mine { background: rgba(255, 226, 61, 0.14); border-radius: 10px; }
.sb-line-mine .sb-line-name { color: #ffe23d; }
.sb-line-mine .sb-line-dot {
width: 22px; height: 22px; border-width: 5px; border-color: #ffe23d;
box-shadow: 0 0 0 5px rgba(255, 226, 61, 0.3);
}
.sb-line-tag-mine { background: #ffffff; color: #0b2557; }
/* 通過済みでも「自分の停」は薄くしない (見失わせない) */
.sb-line-mine.sb-line-passed .sb-line-name,
.sb-line-mine.sb-line-passed .sb-line-time { opacity: 1; }
/* ==== 系統バッジの初回案内: バッジ自身を光らせて「これです」と示す — 2026-07-26 ====
流行りの「背景を暗転 + 吹き出し」は採らない。拡大鏡の利用者は暗転で周囲の手がかりを失い、
高倍率だと吹き出しが画面外へ出てしまうため。言葉は既存のガイド帯 (guideShow) が担当する。 */
.sb-badge-hint {
position: relative;
animation: sb-badge-hint-pulse 1.6s ease-in-out infinite;
}
@keyframes sb-badge-hint-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 226, 61, 0.9); }
50% { box-shadow: 0 0 0 8px rgba(255, 226, 61, 0); }
}
/* 動きが苦手な人には光らせず、白枠だけで示す (アニメは切っても在り処は分かるように) */
@media (prefers-reduced-motion: reduce) {
.sb-badge-hint { animation: none; box-shadow: 0 0 0 3px #ffe23d; }
}
/* ==== 🚏 ばしょ表示 (2026-07-28) ==== */
/* カード右下 (距離の下) に重ねる🗺ばしょバッジ (v2ボードの近くのバス停カード) */
/* 📍+距離を1列に納めたバッジ。カード内・1行目の停名の右端に置く
(2026-07-28 酒井様: カードを縦に伸ばさない / 文字は書かず📍と距離だけで伝える) */
.sb-board-locbtn {
flex: none; display: inline-flex; align-items: center; gap: 3px;
padding: 5px 9px; border-radius: 999px; cursor: pointer;
/* ミント=押せる の2語体系 (2026-07-27) に乗せる */
border: 2px solid rgba(143, 201, 186, 0.85); background: rgba(143, 201, 186, 0.14);
line-height: 1;
}
.sb-board-locbtn .sb-loc-pin { font-size: 15px; }
/* 数字は太らせない: 太字だと字の中の隙間が潰れて、かえって読みにくい (2026-07-28 酒井様) */
.sb-board-locbtn .sb-loc-d { font-size: 17px; font-weight: 400; color: #ffffff; }
.sb-board-locbtn:active { background: rgba(143, 201, 186, 0.42); }
.sb-board-locbtn:active { background: rgba(143, 201, 186, 0.4); }
/* 全画面オーバーレイ (mapPick と同じ流儀: 地図は触れる・子だけ有効) */
#sb-stoploc { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
#sb-stoploc-guide {
/* 2026-07-31: ガイド帯と同じ考え方。左8px〜右66px の帯にして、右の方位磁石だけ避ける。
中央寄せのままだと幅が 195px しか取れず、「仙台駅前」が「仙台駅/前」に割れていた。 */
position: absolute; top: 8px; left: 8px; right: 66px; transform: none;
width: auto; max-width: 560px; margin-inline: auto; box-sizing: border-box;
display: flex; flex-direction: column; gap: 2px; align-items: center;
padding: 8px 14px; border-radius: 12px;
background: rgba(10, 26, 74, .94); border: 2px solid #ffe23d;
pointer-events: auto;
}
#sb-stoploc-gtext { font-size: 20px; font-weight: 800; color: #ffe23d; line-height: 1.25; }
#sb-stoploc-gsub { font-size: 17px; font-weight: 800; color: #ffffff; line-height: 1.3; }
#sb-stoploc-back {
position: absolute; left: 50%; transform: translateX(-50%);
/* 2026-07-31: 12px → 88px。画面下の出典に かぶっていたため持ち上げた。
★下部には出典が2つある: 自前の #sb-credit (下から45px) と、地図の出典バッジ
.maplibregl-ctrl-attrib (下から80px)。実測して高い方 80px を超える 88px にした。
56px にした時は #sb-credit は避けられたが 地図バッジ に当たった (1度やらかした)。★出典は気象庁・国土地理院・公共交通オープンデータの
利用条件で表示が必須。ボタンで隠すと条件を満たさなくなる。ここは見た目の問題ではない。 */
bottom: calc(88px + env(safe-area-inset-bottom, 0px));
min-width: 190px; min-height: 56px; padding: 12px 22px;
font-size: 20px; font-weight: 800; color: #fff;
/* ◀もどる一族と完全に同じ配色に揃える (.sb-a11y-nearbtn と同値。2026-07-28 実測で
背景だけ紺94%になっていたのを修正。同じ言葉のボタンは同じ見た目、が方針) */
background: rgba(143, 201, 186, 0.20); border: 2px solid #8FC9BA; border-radius: 14px;
pointer-events: auto; cursor: pointer;
}
#sb-stoploc-back:active { background: rgba(143, 201, 186, 0.42); }
/* 対象バス停の大ピン。追従バスの遅延リング (sb-b3ring) と同じ流儀で、
輪を2枚 0.7秒ずらして重ね、中央から外へポワンポワン広がる波紋にする
(2026-07-28 酒井様「円形のふわんふわん、バスのやつ」) */
.sb-stoploc-pin { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sb-stoploc-ico { font-size: 46px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); z-index: 2; }
.sb-stoploc-ring {
position: absolute; left: 0; top: 0; width: 120px; height: 120px;
border-radius: 50%; border: 9px solid #ffe23d; opacity: 0;
animation: sb-stoploc-pulse 1.4s ease-out infinite;
}
@keyframes sb-stoploc-pulse { 0% { opacity: .95; transform: scale(.2); } 70% { opacity: .35; } 100% { opacity: 0; transform: scale(1); } }
/* 動きを減らす設定では止めて、輪だけ静かに残す */
@media (prefers-reduced-motion: reduce) { .sb-stoploc-ring { animation: none; opacity: .85; transform: scale(.62); } }
/* ==== 🌤 いまの天気 (2026-07-28): 時計の左端にちょろっと ====
右端は「あ⁺」が使っているので左端へ (酒井様指示)。
時計より小さく・控えめに = 主役は時刻という序列を崩さない。
出典表記が必須 (気象庁 公共データ利用規約 第1.0版) → クレジット行に気象庁を明記済み。 */
#sb-board-wx {
/* left は下のカード類と同じ 12px に揃える (ボードの padding と一致。
14px だと 2px 右にずれて見え、その分だけ時計との余裕も減っていた) */
position: absolute; top: 10px; left: 12px; z-index: 2;
/* 縦積み: 横に並べると幅を食って時計に迫るため (2026-07-28 酒井様) */
display: flex; flex-direction: column; align-items: center; gap: 1px;
padding: 5px 6px; border-radius: 12px;
background: rgba(22, 58, 122, 0.55); border: 1px solid rgba(127, 208, 255, 0.35);
line-height: 1.05; pointer-events: none;
}
#sb-board-wx[hidden] { display: none !important; }
#sb-board-wx .sb-wx-ico { font-size: 20px; }
#sb-board-wx .sb-wx-t { font-size: 15px; font-weight: 400; color: #eaf2ff; } /* 気温: 数字は太らせない (2026-07-27の方針と同じ) */
#sb-board-wx .sb-wx-r { font-size: 14px; font-weight: 700; color: #7fd0ff; } /* 降水: 降っている時だけ出す */
/* ⚠ 天気バッジは「あ⁺」で拡大しない (2026-07-28 実測で決定)。
時計は 56→68→80px と育つので、脇役の天気まで一緒に育てると
スマホ幅 360px では特大時に 30px 食い込んで時計と重なった。
主役は時刻。天気は「ちょろっと」の役なので据え置きで正しい。 */
/* ==== 使い方ページ: 目次ボタン式 (2026-07-28 全面改訂) ====
機能が増えて1枚に収まらなくなったので「大ボタン → 別画面」の2段構えへ。
酒井様の判断: 年配の方にはアコーディオン(その場で開く)より画面が変わる方が分かりやすい。 */
.hp-menu-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 24px; }
.hp-navbtn {
display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
min-height: 72px; padding: 12px 14px; text-align: left; cursor: pointer;
/* ミント=押せる の色の言葉に揃える (アプリ本体と同じ体系) */
border: 2px solid rgba(143, 201, 186, 0.85); border-radius: 14px;
background: rgba(143, 201, 186, 0.12); color: #eaf2ff;
}
.hp-navbtn:active { background: rgba(143, 201, 186, 0.34); }
.hp-navbtn-main { min-height: 88px; border-color: #8FC9BA; background: rgba(143, 201, 186, 0.2); } /* 最初に見てほしい項目 */
.hp-navbtn-ico { font-size: 30px; flex: none; width: 40px; text-align: center; }
.hp-navbtn-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-navbtn-txt b { font-size: 20px; font-weight: 800; color: #ffffff; }
.hp-navbtn-txt small { font-size: 14px; font-weight: 600; color: #cfe4ff; opacity: .92; line-height: 1.35; }
.hp-navbtn-main .hp-navbtn-txt b { font-size: 23px; }
/* ==== 使い方ページ: 「🌟 最初に やっていただきたいこと」の囲み (★2026-08-30 お手軽入口Help) ====
目次の導入文と大ボタンの間に置く。いつものバス停が1つも無いとお手軽モードは
空の画面になる (sorabus.js boardRender の myStops.length === 0 の枝) ので、
そこへ辿り着く前に登録をお願いするための囲み。
★色は琥珀 (お手軽モードのボタンと同じ色)。ミント (=押せる) は使わない:
ここは読むだけの囲みで、押せる所ではないため。色の言葉を崩さない。
★押し付けがましくならないよう、背景はごく薄くし、囲いは枠に担わせる。
★見出しは白・本文の強調は既存の .sb-help b (金) のまま = h1(白)/h2(金) の序列に揃う。 */
.hp-first {
margin: 18px 0 4px; padding: 14px 16px;
border: 2px solid rgba(255, 179, 0, 0.70); border-radius: 14px;
background: rgba(255, 179, 0, 0.10);
}
.hp-first-title { font-size: 21px; font-weight: 800; color: #ffffff; margin: 0 0 8px; }
.hp-first p { margin: 0 0 10px; }
.hp-first p:last-child { margin: 0; }
/* もどる: アプリ本体の ◀もどる と同じ配色 (同じ言葉のボタンは同じ見た目) */
.hp-back {
display: block; width: 100%; box-sizing: border-box; margin: 0 0 18px;
min-height: 56px; padding: 12px 16px; cursor: pointer;
font-size: 19px; font-weight: 800; color: #ffffff;
border: 2px solid #8FC9BA; border-radius: 14px; background: rgba(143, 201, 186, 0.20);
}
.hp-back:active { background: rgba(143, 201, 186, 0.42); }
.hp-page + .hp-page { margin-top: 0; }
.hp-page[hidden] { display: none !important; }
.hp-page h1:focus { outline: none; } /* 画面切替時に見出しへフォーカスを送るが、枠は出さない */
.hp-mint { color: #8FC9BA !important; }
/* お手軽モードの章だけ文字を大きく (酒井様: 分ける必要はないが、ここは大きく) */
.sb-help-big p, .sb-help-big dd, .sb-help-big li { font-size: 19px; line-height: 1.75; }
.sb-help-big dt { font-size: 19px; }
.sb-help-big h2 { font-size: 24px; }
/* ==== 🧭 方位磁石 + ばしょモードの向き案内 (2026-07-31) ====
右上の再読み込みFAB を方位磁石に作り替えた。ほとんど押されないボタンに常設の仕事を与える狙い。
★操作: タップ = 方位の許可を求めるだけ / 長押し = 再読み込み (従来の機能)
タップを再読み込みにすると、方位磁石を見ようとして押した人が驚くため分けた (酒井様の判断)。
★iOS は端末の向きを知るのに利用者の許可が要り、その許可は「タップした瞬間」にしか求められない。
だからタップに割り当てている。
★引っ張って更新は使えない (manifest が standalone / html,body が overflow:hidden・
position:fixed・overscroll-behavior:none)。だから再読み込みの口は残す必要がある。 */
#sb-reload-fab { font-size: 0; } /* 中の文字(⟳)は使わないので消す。中身はSVG */
#sb-compass-svg { width: 30px; height: 30px; display: block; margin: 0 auto; }
#sb-compass-needle {
transform-box: fill-box; transform-origin: 50% 50%;
transition: transform .18s linear; /* 針のカクつきをならす。長すぎると追従が遅れる */
}
/* ★2026-09-21: 針は【地図の北】を指すようになった (sorabus.js の 🧭方位)。端末の向きが取れなくても
正しいので、★針を薄くすることはもう無い。この規則が効くのは、JS が動き出すまでの一瞬だけ
(Home.razor の初期クラス)。compassApply が最初の一回で外す。薄い表示は矢印の側だけに残る。 */
#sb-reload-fab.sb-compass-off #sb-compass-svg { opacity: .38; }
/* 🚏ばしょモード中は操作ガイドを出さない (2026-07-31)。
ばしょモードには専用の帯があり、案内が2つ重なると読めない。
しかも「地図のバス停をタップすると時刻表が開きます」はこの画面では的外れ。 */
body.sb-stoploc-on #sb-guide { display: none !important; }
/* ばしょモード中だけ現在地を大きく・濃くする。
ふだんの地図で大きくするとバスを隠すので、この画面に限る。
(2026-07-28 酒井様「現在地は僕の目ではちょっと目立たなくて分かりづらい」) */
body.sb-stoploc-on .sb-me {
width: 32px; height: 32px; border: 4px solid #ffffff;
animation: sb-me-strong 1.8s infinite;
}
@keyframes sb-me-strong {
0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, .85); }
70% { box-shadow: 0 0 0 26px rgba(33, 150, 243, 0); }
100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}
@media (prefers-reduced-motion: reduce) {
body.sb-stoploc-on .sb-me { animation: none; box-shadow: 0 0 0 8px rgba(33, 150, 243, .45); }
}
/* 帯の中の「バス停はこっち」矢印。体の向きに追従して回る */
#sb-stoploc-guide { flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
#sb-stoploc-texts { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; }
#sb-stoploc-arrow { flex: none; width: 52px; height: 52px; }
#sb-stoploc-arrow svg { width: 52px; height: 52px; display: block; }
#sb-stoploc-arrow .sb-arrow-rot {
transform-box: fill-box; transform-origin: 50% 50%;
transition: transform .18s linear;
}
/* 端末の向きが取れない間は「地図の上が北」基準で指す。まだ体には合っていないので薄く */
#sb-stoploc-arrow.sb-compass-off { opacity: .45; }
/* 使い方ページの補足注記 (2026-07-31) */
.hp-note { font-size: 15px; color: #cfe4ff; opacity: .9; line-height: 1.7;
border-left: 3px solid rgba(143,201,186,.6); padding-left: 10px; margin: 14px 0; }
/* =====================================================================
🚌 のっています (乗車中モード) — 2026-08-01 ご主人様の設計
★上段 (時計・◀もどる) は一切変えない。見出しの色だけ 水色→橙 にする。
根拠: 「画面推移で最上段カードの色・形が変わると不安になる」(2026-07-13 方針)
同じ場所に居るまま、状態だけが変わったことを色で知らせる。
===================================================================== */
/* 入口のカード: 他の3つと同じ形だが、ひとまわり大きく・橙で「別のこと」だと分かるように。
★2026-08-02 ご主人様のご指摘「目立たそうとはしているが、中途半端で美しくない」:
旧: 左の縁だけ 10px の橙。左右で太さが違い、形が崩れて見えていた。
新: 枠を全周 3px の橙で均等にし、背景をわずかに橙へ寄せる。
★太さで叫ぶのではなく、色と面で「ここは別のこと」と伝える。 */
.sb-board-ridebtn {
border: 3px solid #ffa040 !important;
background: #2a1d0c !important;
color: #ffd9a0 !important;
font-size: 20px;
padding-top: 16px;
padding-bottom: 16px;
margin-top: 16px;
}
.sb-board-ridebtn:hover { background: #3a2810 !important; }
/* 乗車中の見出し: 橙。青系の画面でひとつだけ浮くので弱視でも状態が分かる */
.sb-board-ridehead { color: #ffa040 !important; }
.sb-board-ridegroup { border-color: #ffa040; }
.sb-board-ridecard {
position: relative; /* 📍 いまの ばしょ をカードの右に絶対配置するための基準 (2026-08-20) */
background: #10275a;
border: 2px solid #4a6db0;
border-radius: 14px;
padding: 10px 12px;
margin: 0 0 8px;
}
.sb-board-ridebig { font-size: 22px; font-weight: 800; color: #eaf2ff; }
.sb-board-ridesub { font-size: 15px; color: #9fd3ff; margin-top: 4px; line-height: 1.5; }
/* 🎡 ダイヤル式の系統図: 中心が最大、上下へ離れるほど小さく薄く (奥行きを出す)。
文字サイズと透明度は JS 側で1行ずつ付ける (中心からの距離で決まるため)。 */
.sb-board-dial {
background: #0b1f47;
border: 2px solid #4a6db0;
border-radius: 14px;
padding: 10px 6px;
margin: 0 0 8px;
text-align: center;
overflow: hidden;
/* ★2026-08-20 ご主人様の実車テストで発見: 「いまの ばしょ」ボタンが一覧の【下】に
あったため、外側の画面を送らないと顔を出さず、走るバスの中では押せなかった。
→ ボタンを一覧の上へ浮かせる (案2)。その基準にするため position を付ける。 */
position: relative;
}
/* (行・いまいる所・過ぎた所 の見た目は、この下の「一枚ずつのカード」の節へ集約した。
2026-08-01: 字を小さく薄くする作りは、年配の方に読めないので取りやめ) */
/* 🔊 の行: ボタンは共通デザイン (sb-a11y-spk-big) のまま。右に説明を添える */
.sb-board-riderow { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.sb-board-ridespk { margin-left: 0 !important; }
.sb-board-ridespklab { font-size: 15px; color: #9fd3ff; }
/* 「テスト中」の札: まだ実地で確かめていない機能だと正直に伝える (2026-08-02 改称) */
.sb-board-ridewip {
display: inline-block;
margin-left: 10px;
padding: 2px 8px;
border-radius: 999px;
background: #7a4a10;
color: #ffd9a0;
font-size: 13px;
font-weight: 700;
vertical-align: middle;
}
/* 🚌 乗車中: 🔊はダイヤル中央カード (いまの あたり) の右端に置く (2026-08-01 ご主人様のご指示)。
車内では押した時だけ喋る。絶対配置にして、停名の中央ぞろえは崩さない。 */
.sb-board-dialspkrow { position: relative; }
.sb-board-dialspk {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
margin-left: 0 !important;
}
/* 🎡 ダイヤルを指で回せるようにする (2026-08-01 ご主人様のご指示)。
高さを決めて中だけを転がす。中央の「いまの あたり」は必ず戻せる (📍ボタン)。 */
.sb-board-dialinner {
max-height: 340px;
overflow-y: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 4px 0;
}
/* つまみやすい太さのつまみ (細い線はロービジョンでは掴めない) */
.sb-board-dialinner::-webkit-scrollbar { width: 10px; }
.sb-board-dialinner::-webkit-scrollbar-thumb { background: #4a6db0; border-radius: 6px; }
/* ★一枚ずつのカードに作り直し (2026-08-01 ご主人様のご指摘)。
前は中心から離れるほど字を小さく薄くしていたが、年配の方には全く読めなかった。
・停名は最低 20px。中央は 30px
・停名 (左) と「あと◯ふん」(右) を左右に分け、間に線を引いて一停ずつを区切る
・行の間を空ける (詰まっていると、どこまでが1つの停か分からない) */
.sb-board-dialrow {
display: flex;
align-items: center;
gap: 10px;
color: #eaf2ff;
font-weight: 700;
line-height: 1.35;
padding: 11px 12px;
margin: 0;
border-bottom: 1px solid #2b4372;
white-space: normal; /* 長い停名は折り返す (…で消さない) */
overflow: visible;
text-overflow: clip;
}
.sb-board-dialrow:last-child { border-bottom: none; }
/* ★2026-08-24: 乗車中ダイヤルは【作り直さず】中身を出し入れして更新する方式に変えた。
各行は「◯分」「すみ」「🔊」を常に持っていて、要らない時は hidden にする。
★hidden要素の鉄則: 親が display:flex だと hidden 属性が負けて、
隠したはずの部品が flex の隙間として残る。ここで確実に消す。 */
.sb-board-dialrow [hidden] { display: none !important; }
.sb-board-dialnm { flex: 1 1 auto; min-width: 0; font-size: 20px; }
.sb-board-dialnext .sb-board-dialnm { color: #eaf2ff; }
.sb-board-dialsoon .sb-board-dialnm { font-size: 23px; } /* すぐ次の停は少し大きく */
/* 「あと◯ふん」: 右側の枠に入れて、停名と見間違えないようにする */
.sb-board-dialeta {
flex: none;
font-size: 15px;
font-weight: 600;
color: #cfe6ff;
background: #16326b;
border: 1px solid #4a6db0;
border-radius: 999px;
padding: 4px 12px;
white-space: nowrap;
}
.sb-board-dialetan { font-size: 20px; } /* 数字だけ大きく (太字にはしない) */
.sb-board-dialdone {
flex: none;
font-size: 14px;
color: #7f8fae;
padding: 4px 10px;
}
/* 過ぎた所: 「もう終わった」と分かるが、読めなくはしない (薄くしすぎない) */
.sb-board-dialpast { background: rgba(0, 0, 0, 0.18); }
.sb-board-dialpast .sb-board-dialnm { color: #9fb0cf; font-size: 18px; font-weight: 600; }
/* いまいる所: 橙で、ひとつだけはっきり浮かせる */
.sb-board-dialnow {
/* ★2026-08-20 ご主人様のご指摘で発覚: この行の 🔊 (.sb-board-dialspk) は絶対配置なのに、
この行に位置指定が無かったため、基準が外側の #sb-board (全画面) まで逃げ、
画面の右端・縦の真ん中に迷子のスピーカーが浮いていた。行を基準にして行内へ戻す。 */
position: relative;
color: #ffa040;
font-weight: 800;
background: rgba(255, 160, 64, 0.14);
border: 2px solid #ffa040;
border-radius: 12px;
padding: 12px 12px;
margin: 6px 0;
}
/* ★2026-08-20 ご主人様のご指示: いまの停の文字は【大きくしない】。橙にするだけでよい。
大きくすると長い停名 (交通局東北大学病院前 など) が折れて崩れる。 */
.sb-board-dialnow .sb-board-dialnm { font-size: 20px; color: #ffa040; }
.sb-board-dialnowlab {
flex: none;
font-size: 14px;
font-weight: 700;
color: #ffd9a0;
padding-right: 44px; /* 🔊 のぶん空ける */
}
/* 🎡 指で回せるようにする。中央の「いまの あたり」は 📍 で必ず戻せる */
.sb-board-dialinner {
max-height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 2px 0;
}
/* つまみやすい太さのつまみ (細い線はロービジョンでは掴めない) */
.sb-board-dialinner::-webkit-scrollbar { width: 12px; }
.sb-board-dialinner::-webkit-scrollbar-thumb { background: #4a6db0; border-radius: 6px; }
/* 🚌 中央の走っているバス。走行中だけ ぴょこぴょこ、停車中はピタッと止める */
.sb-board-dialbus {
flex: none;
width: 50px;
height: 37px;
animation: sb-bus-bounce 1.1s ease-in-out infinite;
}
.sb-board-dialbus svg { width: 100%; height: 100%; display: block; }
.sb-board-dialbus-stop { animation: none; }
/* 📍 いまの ばしょへ戻すボタン
★場所に関わるボタンは全部おなじ色にする (2026-08-01 ご主人様のご指示)。
距離のボタン (.sb-a11y-rbtn) と同じ 薄ミント枠 0.55 / 塗り 0.10 に合わせた。
「ミント=押せる」の言葉を崩さないため、勝手に別の色を足さない。 */
/* 📍 いまの ばしょ: 一覧の【上に浮かせる】(2026-08-20 ご主人様のご選択・案2)。
★以前は一覧の下に横いっぱいで置いていた。一覧は 400px で頭打ちなので、
外側の画面を送らないとボタンが顔を出さず、走るバスの中では押せなかった。
★浮かせる際の作法:
・背景は不透明にする。半透明だと下の停名が透けて、弱視の方には字が読めない
・右下に置く。片手で持ったときに親指が届く場所 (左利きの方は画面を持ち替える)
・重なるのは一番下の1行だけ。いまの停と次の停は隠さない
・当たり判定は 44px 以上を確保する (指で押せる最小の大きさ) */
.sb-board-dialhome {
/* ★2026-08-20 ご主人様のご指示: ダイヤルの右下ではなく【タイトルカード (S◯◯ けいとう) の右の余白】へ。
ダイヤルの下端に貼る形だと、一覧を送らないとボタンが画面に入らなかった。
タイトルカードは乗車中画面の一番上にあり、右側が空いている。 */
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: auto;
margin: 0;
padding: 11px 16px;
min-height: 44px;
border-radius: 999px;
border: 2px solid rgba(143, 201, 186, 0.85);
background: #123a5e; /* 不透明。下の文字を透かさない */
color: #fff;
font-size: 17px;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
}
.sb-board-dialhome:active { background: #1b5081; }
/* 文字を大きくする設定のときは、ボタンも一緒に大きくする (押しにくくならないように) */
#sb-board.sb-a11y-lg .sb-board-dialhome { font-size: 19px; padding: 12px 18px; }
#sb-board.sb-a11y-xl .sb-board-dialhome { font-size: 21px; padding: 13px 20px; }
/* ⏱ 遅れの表示 */
.sb-board-ridedelay { font-size: 18px; font-weight: 700; color: #8FC9BA; margin-top: 8px; }
.sb-board-ridedelay-late { color: #ffb26b; }
.sb-board-ridedelay-unk { color: #a8b4cb; font-weight: 600; font-size: 15px; }
/* 🚌 降りたあとの、見送ってくれるバスと ことば */
.sb-board-byebus { margin: 12px auto 2px; max-width: 260px; }
.sb-board-byebus svg { width: 100%; height: auto; display: block; animation: sb-bus-bounce 2.4s ease-in-out infinite; }
.sb-board-byemsg {
text-align: center;
font-size: 22px;
font-weight: 700;
color: #8FC9BA;
margin: 2px 0 14px;
}
/* 文字を大きく / 特大 の設定に合わせる (お手軽モードの あ+ ボタン) */
#sb-board.sb-a11y-lg .sb-board-dialnm { font-size: 23px; }
#sb-board.sb-a11y-lg .sb-board-dialsoon .sb-board-dialnm { font-size: 26px; }
#sb-board.sb-a11y-lg .sb-board-dialnow .sb-board-dialnm { font-size: 23px; } /* 大きくしない (2026-08-20) */
#sb-board.sb-a11y-lg .sb-board-dialpast .sb-board-dialnm { font-size: 20px; }
#sb-board.sb-a11y-lg .sb-board-dialeta { font-size: 17px; }
#sb-board.sb-a11y-lg .sb-board-dialetan { font-size: 23px; }
#sb-board.sb-a11y-lg .sb-board-byemsg { font-size: 25px; }
#sb-board.sb-a11y-xl .sb-board-dialnm { font-size: 26px; }
#sb-board.sb-a11y-xl .sb-board-dialsoon .sb-board-dialnm { font-size: 29px; }
#sb-board.sb-a11y-xl .sb-board-dialnow .sb-board-dialnm { font-size: 26px; } /* 大きくしない (2026-08-20) */
#sb-board.sb-a11y-xl .sb-board-dialpast .sb-board-dialnm { font-size: 22px; }
#sb-board.sb-a11y-xl .sb-board-dialeta { font-size: 19px; }
#sb-board.sb-a11y-xl .sb-board-dialetan { font-size: 26px; }
#sb-board.sb-a11y-xl .sb-board-byemsg { font-size: 28px; }
/* 動きを減らす設定の人には動かさない (酔い・まぶしさへの配慮) */
@media (prefers-reduced-motion: reduce) {
.sb-board-dialbus, .sb-board-byebus svg { animation: none; }
}
/* データの届き方の断り書き (2026-08-02 ご主人様のご指示)。
結合試験の実測で、バスの位置は最長30秒に1回しか届かないことを確かめた。
知らないと「画面が止まっている」と受け取られるので、押す前と乗車中の両方に出す。
★脅かさない色・大きさにする。読めないほど小さくはしない (14px)。 */
/* ★2026-08-02 ご主人様のご指摘:
「カードの中に入っている形にすると、これもボタンなのかと思ってしまう。
地べた背景に描いているような形に変えてほしい」
→ 枠と背景をやめ、地の文にする。押せるものと押せないものを、形で区別する。
★お手軽モードの約束: 枠のあるものは押せる。枠が無いものは読むだけ。 */
.sb-board-ridenote {
font-size: 14px;
line-height: 1.6;
color: #9fb8e8;
background: none;
border: none;
border-radius: 0;
padding: 2px 4px;
margin: 6px 0 10px;
text-align: left;
}
#sb-board.sb-a11y-lg .sb-board-ridenote { font-size: 16px; }
#sb-board.sb-a11y-xl .sb-board-ridenote { font-size: 18px; }
/* ==== 🎨 色モードの選択ボタン (2026-08-02 ご主人様のご指示) ====
★見本の色帯を出して「押す前にどんな色か分かる」ようにする。
文字だけだと、目が不自由な方には選びようがない。 */
/* 見出しの行 (ダークモードの下に置いたので、何の色かを明示する) */
.sb-colormode-head { padding-bottom: 2px; }
.sb-colormode-head small { display: block; font-size: 12px; opacity: .75; }
.sb-colormode-row { display: flex; gap: 10px; padding: 4px 12px 12px; }
.sb-colormode-btn {
flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 8px; border-radius: 12px; cursor: pointer;
background: #10275a; border: 2px solid #4a6db0; color: #eaf2ff;
}
.sb-colormode-btn.sb-on2 { border-color: #ffe23d; border-width: 3px; background: #1b3a7a; }
.sb-colormode-lab { font-size: 15px; font-weight: 700; }
.sb-colormode-btn.sb-on2 .sb-colormode-lab { color: #ffe23d; }
/* 見本の色帯 (地・バス停・路線 の3色を並べる) */
.sb-colormode-sw { display: flex; width: 100%; height: 26px; border-radius: 8px; overflow: hidden; }
.sb-colormode-sw i { flex: 1 1 0; display: block; }
.sb-colormode-sw1 i:nth-child(1) { background: #0d1526; }
.sb-colormode-sw1 i:nth-child(2) { background: #1e2a44; border-top: 3px solid #ffc107; border-bottom: 3px solid #ffc107; }
.sb-colormode-sw1 i:nth-child(3) { background: #16302e; border-top: 3px solid #4db6ac; border-bottom: 3px solid #4db6ac; }
.sb-colormode-sw2 i:nth-child(1) { background: #1a1206; }
.sb-colormode-sw2 i:nth-child(2) { background: #5a3505; border-top: 4px solid #ffb300; border-bottom: 4px solid #ffb300; }
.sb-colormode-sw2 i:nth-child(3) { background: #0b3f2e; border-top: 4px solid #66d9a0; border-bottom: 4px solid #66d9a0; }
/* ==== 設定の大きな区切り (2026-08-02 ご主人様のご指示) ====
「高齢者が必要な部分と3Dグラフィックなどが混在している。区分によってセパレートを入れて」
★ここから下は毎日使う方には要らない、と一目で分かる線。
線だけでなく言葉も入れる (線の意味は人によって伝わらないため)。 */
.sb-ios-divider {
display: flex; align-items: center; gap: 10px;
margin: 22px 4px 10px; color: #9fb8e8; font-size: 13px;
}
.sb-ios-divider::before, .sb-ios-divider::after {
content: ""; flex: 1 1 0; height: 2px; background: #33507f; border-radius: 2px;
}
.sb-ios-divider span { flex: none; white-space: nowrap; }
/* ★のってる: これからの停の小さな読み上げバッジ (2026-08-03 実車テストのご要望④)。
ミント=押せる の色体系に合わせた枠。過ぎた停には出さない (JS側で付けない)。 */
/* ★2026-08-04 再レビュー screen② の修正: 以前は .sb-board-dialrow の中にある時だけ枠が付く
書き方だったため、⌨️さがすの候補行など別の場所へ置いたバッジは枠の付かない裸の絵文字になり、
「押せるものはミント」の色体系から外れ、拡大表示時に見分けにくかった。
置き場所に関係なく同じ見た目になるよう、クラス単独の指定に改める。 */
.sb-board-dialrowspk {
margin-left: 6px;
padding: 2px 9px;
font-size: 14px;
line-height: 1.2;
background: transparent;
/* ★2026-08-04 ご主人様のご指示: 読み上げバッジの枠は不要。全て外す (絵文字だけで示す)。 */
border: 0;
border-radius: 10px;
color: inherit;
flex: 0 0 auto;
cursor: pointer;
}
/* ★読み上げバッジは行の右端へ寄せる (2026-08-03 ご主人様のご指示)。flex行で右押し */
.sb-board-rowspk { margin-left: auto; }
/* ★お手軽ボードの行を2段構成に (2026-08-03 ご主人様のご指示)。
1段目=系統バッジ(左)+あと◯分(右端) / 2段目=時刻+行き先(左)+🔊(右端) */
/* ★2026-08-26 ご主人様のご指示: 上のバッジの空きと下の空きが揃っていない (下が広い)。
実測 (390px幅) 上=12px / 下=17.5px。padding は上下とも 12px で同じなのに、
文字の行箱が字面より 5.5px 下へ伸びるため、目には下だけ広く映る。
→ 下を詰めて【字面で】上と揃え、さらに上下とも 2px 詰めた (1枚 82→72px)。
★上下同値に戻さないこと。「数字が同じ」と「同じに見える」は別である。
★★下は 4.5px ではなく【整数の 4px】にすること (2026-08-26 副長・碧ちゃん両者の指摘)。
小数だと等倍 (devicePixelRatio=1) の画面で下辺が半ピクセル位置に落ちてにじみ、
カードごとに1pxずれて見える。ご主人様は拡大鏡もお使いなので、そのずれは5〜6倍に見える。
狙い (字面で上下10px) との差は 0.5px で、目には見分けられない。 */
.sb-board-row { flex-direction: column; align-items: stretch; row-gap: 3px; padding: 10px 14px 4px; }
.sb-board-rline1, .sb-board-rline2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sb-board-rline1 .sb-board-rwait { margin-left: auto; }
.sb-board-rline2 .sb-board-rhead { overflow: hidden; text-overflow: ellipsis; }
/* ★ヒーローの到着予告行は高さを予約する (2026-08-03 ぴょこん対策)。
中身が一瞬空になっても行が潰れず、画面が上に巻き上がらない */
#sb-board-hero .sb-a11y-hsub { min-height: 1.4em; }
/* ★走行中の行の遅れ表示 (2026-08-03 ご主人様のご指示)。色は地図の遅延リング・吹き出しと同じ物差し:
黄 #ffd54f = 1〜5分 / 赤 #ff5252系 = 5分以上。早発は青緑。系統バッジの右の空きに置く */
.sb-board-rowdly { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 6px; flex: none; }
.sb-rowdly-y { color: #ffd54f; background: rgba(255, 213, 79, 0.14); }
.sb-rowdly-r { color: #ff8a80; background: rgba(255, 82, 82, 0.16); }
.sb-rowdly-e { color: #7fd0ff; background: rgba(127, 208, 255, 0.14); }
.sb-ridesim-banner {
position: fixed;
z-index: 10050;
top: 0;
left: 50%;
transform: translateX(-50%);
max-width: calc(100vw - 24px);
padding: 7px 14px;
border: 1px solid #ffd166;
border-radius: 0 0 10px 10px;
background: #593f00;
color: #fff8dc;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
text-align: center;
box-shadow: 0 2px 8px #0008;
pointer-events: none;
}
/* ======================================================================
★2026-08-31 (副長 W6-④) 強い拡大のときだけ効く「縮み方」
======================================================================
★この節は【必ずファイルの最後】に置く。#sb-board-hero / #sb-board-stopbtn /
#sb-board-hero .sb-a11y-hsub などは、このファイルの中で二度・三度と書かれている。
メディアクエリは優先度を上げないので、上の方に書くと後の同名セレクタに
丸ごと打ち消され、★「直したのに効かない」という一番たちの悪い形になる。
(同じ踏み抜きの跡が「ボードの行」の節に注記として残っている。)
■ 何を直しているか
お手軽画面 (#sb-board) は position:fixed; inset:0 の縦フレックスで、
便一覧 (#sb-board-body) 以外はすべて flex:none = 縮まない。
ブラウザの拡大を上げると、組み立てに使われる画面は
390x700 → 500% で 78x140 / 600% で 65x117
まで小さくなる。縮まないものの合計がそれを超えるので、
★便一覧の取り分が 0 になり、行はあるのに読めない・押せない状態になっていた。
(直す前の実測: 200% 以上で本文の高さ = 0.0px。)
■ 「縮める」ことは「小さくする」ことではない
500% 拡大では CSS の 1px が画面上の 5px になる。ここで時計を 17px にしても、
ご主人様の画面では 85px 相当に見える。★拡大ぶんを返しているだけであって、
字を小さくしているのではない。縮めないままだと、字は画面から はみ出して
【見えなくなる】。見える大きさを守るために縮める、という向きの直しである。
■ どこまで直ったか (2026-08-31 Playwright 実測・幅と高さを 1/N にして測定)
直す前 : 200% 以上で本文 0.0px。★便一覧は一行も出ない (スクロールしても出ない)。
直した後 : どの倍率でも本文は 138px を保ち、外殻もスクロールできる。
★ただし 400% 以上では、便の行そのもの (系統番号・行き先・時刻) が
折り返して 1行あたり 260px ほどになるため、140px の画面には
物理的に 1行も収まらない。これは縮め方の問題ではなく、
「画面の縦 140px に、高さ 260px の行は入らない」という算数である。
★収まらない ぶんは必ずスクロールで届く所に置く、というのがここでの約束。
====================================================================== */
/* ---- 第一段 (縦 460px 以下) : 押す所の大きさは【一切変えない】縮み方だけ ----
★ここが横向きのスマホ (縦 360〜430px) にも掛かる。横向きは縦が足りないので
詰めるのは正しいが、★指で押す物を小さくしてはいけない。文字と余白だけを詰める。 */
@media (max-height: 460px) {
/* 時計 (上限は今までの 56px なので、ふだんの縦向きの画面は一切変わらない) */
#sb-board-clock,
#sb-board.sb-a11y-lg #sb-board-clock,
#sb-board.sb-a11y-xl #sb-board-clock { font-size: clamp(17px, 11vh, 56px); }
/* 左右 76px は「天気 (左) と あ⁺ (右)」の居場所。狭い画面では
★時計そのものの居場所が無くなる (78px 幅では中身が 0 になる) ので詰める */
#sb-board-clock { padding: 0 32px; }
/* 天気を一行に畳む (縦3段 → 横1段)。押す物ではないので横向きでも縮めてよい */
#sb-board-wx { flex-direction: row; align-items: baseline; gap: 4px; padding: 2px 5px; top: 6px; left: 6px; }
#sb-board-wx .sb-wx-ico { font-size: 13px; }
#sb-board-wx .sb-wx-t { font-size: 12px; }
#sb-board-wx .sb-wx-r { font-size: 11px; }
/* 外殻の余白と、文字だけの行 */
#sb-board { gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
#sb-board-hero { padding: 6px 8px; border-width: 2px; border-radius: 10px; }
#sb-board-hero .sb-a11y-hnum { font-size: clamp(24px, 22vh, 64px); }
#sb-board-hero .sb-a11y-hnum.sb-num-3digit { font-size: clamp(20px, 18vh, 48px); }
#sb-board-hero .sb-a11y-hnum.sb-num-text { font-size: clamp(14px, 8vh, 22px); line-height: clamp(24px, 22vh, 64px); }
#sb-board-hero .sb-a11y-hnum.sb-num-msec { font-size: clamp(18px, 14vh, 40px); line-height: clamp(24px, 22vh, 64px); }
/* ★2026-09-23: 二段 (手前で停車中 / まもなく到着) も、縦が短いときは「まもなく到着」と同じ縮み方。丈は数字の行と同じ */
#sb-board-hero .sb-a11y-hnum.sb-num-2line { font-size: clamp(11px, 8vh, 22px); line-height: 1.1; height: clamp(24px, 22vh, 64px); }
#sb-board-hero .sb-a11y-hnum.sb-num-word { font-size: min(clamp(18px, 14vh, 40px), calc(var(--sb-vw, 100vw) * 0.094)); line-height: clamp(24px, 22vh, 64px); }
/* ★2026-09-14: 縦が短いとき (横向き) も、6文字の言葉は一回り小さく。上の base と同じ考え */
#sb-board-hero .sb-a11y-hnum.sb-num-word.sb-num-word-l { font-size: min(clamp(15px, 11vh, 32px), calc(var(--sb-vw, 100vw) * 0.076)); line-height: clamp(24px, 22vh, 64px); }
#sb-board-hero .sb-a11y-hunit { font-size: clamp(13px, 9vh, 22px); }
#sb-board-hero .sb-a11y-hsub { min-height: 0; }
#sb-board-hero .sb-board-hsubtxt { font-size: 12px; }
#sb-board-more { font-size: 11px; padding: 2px 8px; }
}
/* ---- 第二段 (縦 320px 以下) : 押す所も縮める ----
★ここは【もう ふつうの端末では起こらない】高さである。横向きのスマホでも 360px 以上あり、
320px を下回るのは 400% 以上に拡大したときだけ。
★このときボタンを 26〜34px にしても、指にとっては小さくならない。
400% 拡大では CSS の 26px が画面上の 104px になるからである。
★逆に縮めないと、ボタンが画面から追い出されて【押せる所が無くなる】。
押しやすさを守るために縮める、という向きの直しである。
★段を分けた理由: 第一段と一緒にすると、横向きのスマホ (縦 390px) でも
ボタンが 46px→26px になり、そこでは本当に押しにくくなる。 */
@media (max-height: 320px) {
#sb-board-font { width: 32px; height: 32px; font-size: 15px; top: 6px; right: 6px; }
/* ヒーローの右にある4つのボタン。
★内訳を測ったら、ヒーローで一番背が高いのは数字ではなく ここだった
(98px。数字は 31px)。★背の高い物から縮めないと、いくら詰めても効かない。 */
#sb-board-hero .sb-a11y-go-big { height: 26px; font-size: 14px; padding: 0 8px; }
#sb-board-hero .sb-a11y-spk-big { width: 26px; height: 26px; font-size: 14px; }
#sb-board-hero .sb-a11y-hbtns,
#sb-board-hero .sb-a11y-hbrow { gap: 4px; }
#sb-board-hero .sb-board-hmain .sb-a11y-hbtns { gap: 4px; margin-top: 0; }
/* のりばボタン (中の丸 44px は「等倍の指」の下限。ここは等倍ではない) */
#sb-board-stopbtn { padding: 4px 8px; font-size: clamp(14px, 10vh, 20px); gap: 6px; }
#sb-board-stopbtn .sb-board-heartbig,
#sb-board-stopbtn .sb-board-switch { width: 28px; height: 28px; font-size: 15px; }
#sb-board-stopbtn .sb-board-heartbig .sb-a11y-heart { width: 18px; height: 17px; }
/* 4つの丸ボタン (近く / 行き先 / さがす / のってる) と、下部の とじる */
#sb-board .sb-board-circicon { width: 34px; height: 34px; font-size: 17px; }
#sb-board .sb-board-circlab { font-size: 11px; }
#sb-board-close { padding: 7px; font-size: 14px; }
}
/* ======================================================================
★2026-09-21 ご主人様のご指示: パソコンでは お手軽モードの板を
【左の縦長の柱】に収める (右側は地図のまま)
======================================================================
■ ご主人様のお言葉 (2026-09-21)
「お手軽モードを PC で開くと随分横長に幅広になってしまう。検索のあいうえおの釦も
かなり大きくなる。PC の場合も左の方にメニューと同じように小さく表示できないか。
メニューも後ろ側は地図なので、そのまま地図で良い」
■ 何が起きていたか
#sb-board は position:fixed; inset:0 = 画面いっぱいである。スマホ (幅 390px) では
それが正しいが、パソコン (幅 1280px) では板そのものが 1280px に広がる。
中の部品はほとんど「親の幅を分け合う」造りなので (かなパッドの釦 .sb-board-kana-key は
flex:1 の正方形、上の4つの丸釦 .sb-board-circbtn も flex:1)、
★親が広がったぶん、そのまま大きくなる。かなの釦は 390px 幅で約 68px 角、
1280px 幅では約 246px 角になっていた。ご指摘の「釦がかなり大きくなる」はこれである。
■ 直し方 —— 横の一本だけを変える
広い画面のときだけ、板の右端の留め (inset の right) を外して【幅】を与える。
縦は今までどおり 0〜0 (画面いっぱい) のままなので、中の縦の組み立て
(時計・ヒーロー・便一覧・「まだ下にあります」・とじる) には一切手を触れていない。
★横の一本しか変えていないから、板の中身は「幅 424px のスマホ」と同じ見え方になる。
★#sb-board-font (あ⁺) や #sb-board-wx (天気) は position:absolute なので、
基準になる箱 (#sb-board) が柱になれば、自動的に柱の中に付いてくる。
★板の子に position:fixed の物は一つも無い (2026-09-21 に全部あたって確かめた)。
もし将来 fixed の子を足すと、それだけが柱の外 = 画面基準へ飛び出すので注意。
■ 柱の幅 (424px) の出どころ —— メニューの柱と【同じ右端】に合わせてある
#sb-panel … left:10px / padding 左右 14px
#sb-buttons … #sb-btn-left 190px + gap 6px + #sb-btn-right 190px
→ 10 + 14 + 190 + 6 + 190 + 14 = 424px。
★板は左端 0 から置くので、板の右端がメニューの柱の右端とぴったり揃う。
★数を直に書かず足し算のまま残すのは、上のどれか (190px 等) を直したときに
ここも一緒に動くようにするためである。
■ 切り替えの幅を 641px からにした理由
ご指示の目安は「768px 以上」だが、このファイルの【メニューの左寄せの切り方】は
640px である (「スマホ用メニュードロワー (☰)」の節 / sorabus.js の innerWidth <= 640)。
ご指示に「既存のメニューの左寄せの幅の切り方があればそれに揃える」とあるので、そちらに揃えた。
★640px 以下 = スマホは、この節がまるごと効かない = 見え方は一字も変わらない。
■ 右側の地図について
板は左の 424px しか覆わないので、右側は地図がそのまま見え、そのまま操作できる。
★幕 (画面全体を暗くする背景) は足していない。足すと右側の地図が触れなくなり、
「後ろ側は地図なので、そのまま地図で良い」というご指示に反する。
====================================================================== */
@media (min-width: 641px) {
/* ★2026-09-21 二便目: 柱の幅の宣言を #sb-board の中から :root へ引き上げた。
柱の【外】に居る地図の帯 (#sb-guide) も、柱を避けるには柱の右端を知らねばならない。
#sb-board へは継承でそのまま降りてくるので、板の見え方は一字も変わらない。
★足し算のまま残す理由は上の「柱の幅 (424px) の出どころ」と同じ。 */
:root {
/* 柱の幅。上の「出どころ」の足し算そのまま (= 424px) */
--sb-col-w: calc(10px + 14px + 190px + 6px + 190px + 14px);
}
#sb-board {
/* ★ヒーローの言葉 (「バス停滞中」「手前で停留中」) の縮み方の基準を、
画面幅ではなく【柱の幅】にする。
これを入れないと 1280px 幅で 9.4vw = 120px になり、柱から言葉がはみ出す。
柱の幅 424px なら 424 x 0.094 = 39.9px で、スマホの見え方 (390px で 36.7px)
の延長線上に収まる。詳しくは .sb-a11y-hnum.sb-num-word の所の注記。 */
--sb-vw: var(--sb-col-w);
/* inset:0 のうち right だけを外して、左端から柱の幅ぶんにする。
★top / bottom / left は 0 のまま = 縦は今までどおり画面いっぱい・左端に寄る。 */
right: auto;
width: var(--sb-col-w);
max-width: 100%; /* 641〜424px の画面でも はみ出さない保険 */
box-sizing: border-box; /* 柱の幅に padding (左右 12px) を含める */
/* 柱の右の縁。地図との境目が分かるように (メニューの枠と同じ役目) */
border-right: 2px solid rgba(255, 255, 255, 0.28);
box-shadow: 6px 0 20px rgba(0, 0, 0, 0.55);
}
/* ======================================================================
★2026-09-21 二便目 —— 地図の帯を、柱の右どなりへ寄せる
(茜の撮影 chk_pc_1board.png で見つかった被り)
■ 何が起きていたか
地図の上端の帯 (#sb-guide。「💡 系統番号をおすと、時刻表と系統図が見られます」)
は position:fixed で【画面】を基準にしている。柱ができても帯は知らないので、
1280px 幅では x≈331〜891 に居座り、★柱の右上に重なっていた。
帯は z-index:2050、板は 2000 なので、帯のほうが上 = 板の右上の
「あ⁺」(文字の大きさの釦。#sb-board-font は柱の中の right:14px / 幅 46px
→ x≈364〜410) が帯の下に隠れ、見えず押せずになっていた。
■ 直し方 —— 横の一本 (left) だけを変える
板が開いている間だけ、帯の左端を【柱の右端 + 8px】から始める。
・left 以外 (top:8px / right:66px = 🧭方位磁石よけ / 最大幅 560px /
margin-inline:auto の中央寄せ) は今までどおり。
1280px 幅なら 432〜1214px の中で 560px が中央に置かれ、実際の帯は
x≈543〜1103 = ★柱 (0〜424) に一切かからない。
・width は auto に戻す。元の width:min(560px,94vw) のままだと、
狭いパソコン (例 700px) で left と幅が食い合って★右へはみ出す。
auto なら「左端〜右端の残り」に収まり、560px を超える時だけ中央寄せになる。
★その代わり 641〜1000px あたりでは帯が細くなり、言葉がよく折り返す。
柱 424px を引いた残りしか無いのだから、これは被るよりは良い、と判断した。
■ 「板が開いている間だけ」をどう見ているか —— :has で [hidden] を直に見る
body に札 (class) を付ける手もあったが、★board.hidden を触る場所は
openBoard / closeBoard の他に mapPickStart / mapPickFinish /
stopLocStart / stopLocStop の計 6 か所ある。札は必ずどれかで付け忘れる。
[hidden] そのものを見れば、6 か所のどれを通っても必ず合う。
・#sb-guide は Home.razor で #sb-board の【前】に居る兄弟なので、
「後ろの兄弟が hidden でない」= :has(~ #sb-board:not([hidden])) で引ける。
・:has を知らない古いブラウザは、この一本だけを読み飛ばす
= 今までどおりの位置に出る。他の指定は壊れない。
・板を閉じれば [hidden] が戻るので、帯も自動で元の位置へ帰る。
■ 切り替えの幅について
ご指示の目安は「768px 以上」だが、★柱そのものが 641px から始まる。
768px で切ると 641〜767px の間だけ柱があるのに帯が被ったままになるので、
柱と同じ 641px に揃えた (上の「切り替えの幅を 641px からにした理由」と同じ)。
■ 他の top-center の物
・#sb-mappick-guide (地図えらび) / #sb-stoploc-guide (バス停の場所) の帯も
上端中央に出るが、★どちらも出る前に board.hidden = true で板を畳む
(sorabus.js mapPickStart / stopLocStart)。柱が無いので被りようがない。
・地図の左上のコントロール (.maplibregl-ctrl-top-left) は z-index:0 で、
板 (2000) の【裏】。柱の上に顔を出すことはない。
====================================================================== */
#sb-guide:has(~ #sb-board:not([hidden])) {
left: calc(var(--sb-col-w) + 8px);
width: auto;
max-width: 560px;
}
}