/* 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; }
/* 経路上の停留所マーカーの名前ラベル (立て看板方式: 赤丸から棒が立ち、その上に名前プレート)
マーカーは常に画面向き(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; } /* 通信断の警告色 */
/* ---- 直行便検索 ---- */
#sb-direct .sb-set-card { width: min(340px, 88vw); max-height: calc(100dvh - 30px); overflow-y: auto; }
.sb-dir-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sb-dir-form input {
font-size: 16px; padding: 8px 10px; border-radius: 10px;
border: 2px solid #7fd0ff; background: #08204a; color: #fff;
}
#sb-dir-swap {
align-self: center; width: 44px; height: 30px; font-size: 15px;
border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 8px;
background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
}
#sb-dir-go {
font-size: 15px; font-weight: 700; padding: 9px;
border: none; border-radius: 10px;
background: #ffd54f; color: #123; cursor: pointer;
}
.sb-dir-hit {
border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px;
padding: 8px 10px; margin-bottom: 8px;
font-size: 13px; line-height: 1.6;
}
.sb-dir-num { display: inline-block; padding: 1px 7px; border-radius: 7px; font-weight: 800; }
.sb-dir-l2 { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-dir-l3 b { color: #7fd0ff; font-size: 15px; }
.sb-dir-delay { color: #ffd54f; }
.sb-dir-rt { font-size: 11px; color: #99ff99; }
.sb-dir-empty { font-size: 13px; opacity: 0.85; }
/* タイトル右のβバージョン表示 (正データは 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-a11y=2000)は全画面の別画面なので、そちらより下のままにする。 */
#sb-settings,
#sb-direct {
position: fixed; inset: 0; z-index: 1600;
background: transparent; /* 地図の見た目をそのまま確認できるよう幕なし */
display: flex; align-items: center; justify-content: center;
}
#sb-settings[hidden], #sb-direct[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,
#sb-buttons #sb-mode-single, #sb-buttons #sb-mode-stops { 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で左右の高さを自動一致) */
#sb-buttons .sb-btn-ghost { visibility: hidden; pointer-events: none; }
/* ⏰カウントダウンは一番使う想定: ひときわ大きく・目立つ琥珀色 */
#sb-buttons #sb-delay {
background: #ffb300; color: #231a00; border-color: #ffd54f;
/* 大きさは他ボタンと完全同一にする (特大だと下端揃えで右列全行が数px下にズレる)。強調は琥珀色が担う */
}
#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-a11y-more)・ガイド(#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; }
.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); }
/* ================= 凡例シート ================= */
#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-a11y-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); }
/* バッジのすぐ下に出る選択パネル (カウントダウン等の候補一覧を上部に集約) */
#sb-guide-panel {
pointer-events: auto;
background: rgba(11, 37, 87, 0.96); color: #fff;
border: 2px solid #ffffff; border-radius: 12px;
padding: 8px;
max-height: 46vh; overflow-y: auto;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
#sb-guide-panel:empty { display: none; }
.sb-guide-ptitle { font-size: 14px; font-weight: 700; color: #ffe23d; margin: 2px 4px 6px; }
/* スクロール目印: リストにまだ下がある時だけ出る「▼ 下にもっと」 */
#sb-guide-more[hidden] { display: none !important; }
#sb-guide-more {
pointer-events: none;
text-align: center;
margin-top: -2px; padding: 5px 8px;
font-size: 13px; font-weight: 800; color: #0b2557;
background: #ffe23d; border-radius: 0 0 10px 10px;
animation: sb-more-bounce 1.2s ease-in-out infinite;
}
@keyframes sb-more-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* キャンセルバッジ (パネルの外・固定表示。リストが長くてもスクロールせず必ず見える) */
#sb-guide-cancel-fixed[hidden] { display: none !important; }
#sb-guide-cancel-fixed {
pointer-events: auto;
display: block; width: 100%;
padding: 11px 12px; border-radius: 10px;
background: #4a1f1f; color: #ffb3b3;
border: 2px solid #ff8a8a;
font-size: 15px; font-weight: 800; line-height: 1.2;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
#sb-guide-cancel-fixed:hover { background: #5c2626; }
/* スマホでは拡大鏡利用を考慮してガイドを大きく・見やすく */
@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; }
.sb-guide-ptitle { font-size: 16px; }
#sb-guide-cancel-fixed { font-size: 17px; padding: 13px 14px; }
}
/* ================= 吹き出しを最前面へ (バスマーカー z-index:3 より上) ================= */
/* ---- アクセシビリティ画面 (お手軽モード): いつものバス停の次のバスを特大表示 ---- */
/* バス停えらび行: 左=選択 / 右=🗺地図で見る (バス停シートの📌で登録解除できる導線) */
.sb-a11y-stopline { display: flex; gap: 8px; align-items: stretch; }
.sb-a11y-stopline .sb-a11y-stoprow { flex: 1; min-width: 0; }
.sb-a11y-stopmap {
flex: none; width: 64px;
border: 2px solid #7fd0ff; border-radius: 12px;
background: rgba(41, 98, 255, 0.30); color: #fff;
font-size: 26px; cursor: pointer;
}
.sb-a11y-stopmap:active { background: rgba(41, 98, 255, 0.55); }
/* 📍近くのバス停: 距離えらび (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; }
/* ◀もどる: 画面推移で最上段カードの色・形が変わると不安になるため、🔍さがすと同じ緑・同じ高さ (2026-07-13 ご主人様方針) */
.sb-a11y-backbtn { margin: 0 0 8px; }
.sb-a11y-gooff { opacity: 0.35; cursor: default; }
/* 系統カード: 明るめの紫+左の太い帯で、バス停カード (青) と「色でも形でも」区別 (弱視でも判別できるように) */
.sb-a11y-routerow { background: #322566; border-color: #9b8cf0; border-left: 10px solid #b8a4ff; }
.sb-a11y-routerow.sb-on2 { background: #ffe23d; border-color: #ffe23d; border-left: 10px solid #d4a900; }
/* 💛いつものバス停カード (系統一覧の2枚目): 次のカードと密着しないよう間隔 */
.sb-a11y-pinbig { margin-bottom: 6px; }
/* 横はみ出し文字の自動往復スクロール (端で一時停止しながら文字だけ動く) */
.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; }
/* ハートのトグルボタン: 背景は黒、状態はハートで表現 — 登録済=赤 (白縁) / 未登録=白い細輪郭のみ。約2倍サイズで目立たせる */
.sb-a11y-heartbtn { background: #0e1b3a; width: 51px; } /* 背景=お手軽モードの地色 (#sb-a11y と同じダークブルー) に合わせる */
.sb-a11y-heartbtn:active { background: #16264d; }
/* ☆お気に入りボタン: ♥と同様に枠なし+背景=地色。状態は星グリフの色で (お気に入り=黄 / 未=白抜き) */
.sb-a11y-starbtn { background: #0e1b3a; border: none; color: #cfe0ff; }
.sb-a11y-starbtn:active { background: #16264d; }
.sb-a11y-staron { color: #ffe23d; }
.sb-a11y-heartbtn .sb-a11y-heart { width: 28px; height: 26px; vertical-align: middle; } /* 2段化でカードが低くなった分ハートも追随 */
.sb-a11y-heartbtn .sb-a11y-heart path { fill: none; stroke: #ffffff; stroke-width: 1.1; }
.sb-a11y-hearton .sb-a11y-heart path { fill: #ff4d5e; stroke: #ffffff; stroke-width: 1.1; }
/* 「登録済」ラベル内の小ハートも赤 (登録済=赤の統一) */
.sb-a11y-pin .sb-a11y-heart { color: #ff4d5e; }
.sb-on2 .sb-a11y-heart, #sb-a11y-stopbtn .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-stopbtn .sb-a11y-stopsign, .sb-a11y-stoprow.sb-on2 .sb-a11y-stopsign { color: #111111; --sign-hole: #ffe23d; }
#sb-a11y.sb-a11y-lg .sb-a11y-stopsign { width: 30px; height: 38px; }
#sb-a11y.sb-a11y-xl .sb-a11y-stopsign { width: 34px; height: 43px; }
/* 📍緑ボタン (黄色ボタンの上の常設入口): 黄色ボタンと同じ高さ・角丸で揃え、間隔は最小限に */
.sb-a11y-nearmain { margin: 0 0 6px; min-height: 64px; padding: 0 10px; border-radius: 14px; }
#sb-a11y-nearmain[hidden] { display: none !important; }
/* 2行レイアウト (バス停/系統): コンパクト=文字・バッジは大きいまま、余白だけ圧縮して1画面に4停以上 */
.sb-a11y-stopline { margin-bottom: 6px; }
.sb-a11y-stoprow.sb-a11y-2l { padding: 8px 10px; }
/* 距離ボタン: 数字を大きく・単位は控えめに */
.sb-a11y-rnum { font-size: 26px; font-weight: 800; }
.sb-a11y-runit { font-size: 15px; font-weight: 700; margin-left: 1px; }
#sb-a11y.sb-a11y-lg .sb-a11y-rnum { font-size: 30px; }
#sb-a11y.sb-a11y-xl .sb-a11y-rnum { font-size: 34px; }
/* 一覧のコンパクト見出し (「📍 今の場所 から 500m 以内」など) */
.sb-a11y-listhead { font-size: 16px; font-weight: 800; color: #9fd3ff; text-align: left; margin: 2px 2px 8px; }
.sb-a11y-2l { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; text-align: left; }
/* ※後方の .sb-a11y-stoprow (横並び用 align-items:center) に上書きされないよう複合セレクタで確定させる */
.sb-a11y-stoprow.sb-a11y-2l { align-items: flex-start; justify-content: center; text-align: left; }
.sb-a11y-2l .sb-a11y-stopnm, .sb-a11y-2l .sb-a11y-stopsub { line-height: 1.3; }
/* 👁ボタン: 枠は本文カードと同じ太さ・色 (2px #4a6db0)。♥ボタン: カードの枠線なし (黒地にハートのみ) */
.sb-a11y-eyebtn { border: 2px solid #4a6db0; font-size: 24px; }
.sb-a11y-heartbtn { border: none; }
.sb-a11y-2l .sb-a11y-stopnm { font-size: 20px; font-weight: 800; }
.sb-a11y-stopsub { font-size: 18px; color: #eaf6ff; font-weight: 600; }
.sb-a11y-next { color: #ffe23d; font-size: 22px; }
.sb-a11y-pin { font-size: 14px; color: #ffb0c8; }
.sb-a11y-runtxt { color: #8fffab; font-weight: 800; }
.sb-a11y-run { display: inline-block; animation: sbA11yBusHop 0.7s ease-in-out infinite; }
@keyframes sbA11yBusHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* 右のボタン列: ☆(お気に入り) と 🚌⏰(追跡+カウントダウン) を間隔を空けて縦に */
.sb-a11y-btncol { display: flex; flex-direction: column; gap: 6px; }
.sb-a11y-btncol .sb-a11y-stopmap { width: 51px; flex: 1; font-size: 22px; } /* 上下2段の小カードは同じ大きさに統一 */
.sb-a11y-eyebtn { font-size: 24px; }
.sb-a11y-go2 { border-color: #ffb300; background: rgba(255, 179, 0, 0.25); }
.sb-a11y-go2:active { background: rgba(255, 179, 0, 0.5); }
.sb-a11y-stopmap.sb-on2 { border-color: #ffe23d; background: rgba(255, 226, 61, 0.3); }
/* 黄色点灯行 (sb-on2) では下段の文字を濃色に (黄on黄で消える対策) */
.sb-a11y-2l.sb-on2 .sb-a11y-stopsub { color: #16305e; }
.sb-a11y-2l.sb-on2 .sb-a11y-next { color: #0b2557; }
.sb-a11y-2l.sb-on2 .sb-a11y-runtxt { color: #0f6b35; }
.sb-a11y-2l.sb-on2 .sb-a11y-pin { color: #b3005c; }
#sb-a11y {
position: fixed; inset: 0; z-index: 2000;
background: #0e1b3a; color: #eaf2ff;
display: flex; flex-direction: column; gap: 8px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
#sb-a11y[hidden] { display: none !important; } /* ★hidden要素の鉄則 (G-追記) */
#sb-a11y-clock {
text-align: center; font-size: 56px; font-weight: 700; color: #ffe23d;
font-variant-numeric: tabular-nums; line-height: 1.05; flex: none;
}
#sb-a11y-tabs { display: flex; flex-direction: column; gap: 6px; flex: none; }
#sb-a11y-tabs:empty { display: none; } /* 空タブが余分なコンテナgapを1つ生む→非表示にして緑カード直下の間隔を全画面で統一 */
.sb-a11y-tab {
width: 100%; padding: 10px 12px; border-radius: 12px;
background: #10275a; border: 2px solid #4a6db0; color: #cfe3ff;
font-size: 18px; font-weight: 700; text-align: left; cursor: pointer;
}
.sb-a11y-tab.sb-on2 { background: #ffe23d; border-color: #ffe23d; color: #3a2e00; }
#sb-a11y-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#sb-a11y-hero { background: #0b2557; border: 3px solid #ffe23d; border-radius: 16px; padding: 12px 14px; flex: none; }
#sb-a11y-hero[hidden] { display: none !important; }
.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分〜)は一回り小さく */
#sb-a11y.sb-a11y-lg .sb-a11y-hnum.sb-num-3digit { font-size: 57px; }
#sb-a11y.sb-a11y-xl .sb-a11y-hnum.sb-num-3digit { font-size: 66px; }
.sb-a11y-hunit { font-size: 22px; font-weight: 700; color: #ffe23d; }
.sb-a11y-hsub { font-size: 13px; color: #9fb8e8; margin-top: 4px; }
.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; }
.sb-a11y-row { display: flex; align-items: center; gap: 8px; background: var(--sb-l1); border-radius: 10px; padding: 9px 10px; flex: none; }
.sb-a11y-rstop { font-size: 15px; color: #dbe8ff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-a11y-rmin { font-size: 19px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ★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-more {
align-self: center; flex: none;
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-a11y-more[hidden] { display: none !important; }
#sb-a11y-close {
flex: 1.4; min-height: 56px; cursor: pointer;
background: #163a7a; border: 2px solid #7fd0ff; border-radius: 14px;
color: #eaf2ff; font-size: 22px; font-weight: 700;
}
.sb-a11y-empty { color: #cfe3ff; font-size: 17px; line-height: 1.7; padding: 14px; background: var(--sb-l1); border-radius: 12px; }
/* お手軽モードFAB (左下・丸ボタン)。PCは左下クレジットの上、スマホは🚌FABの上 */
#sb-a11y-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;
}
#sb-a11y-fab svg { width: 30px; height: 30px; }
#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-a11y-fab { bottom: 160px; z-index: 9; } /* 🚌FAB(bottom:88px)の真上・完全同サイズ (定義共有)。z9=メニューの後ろ */
#sb-a11y-clock { font-size: 64px; }
}
/* ---- お手軽モード: バス停えらび (上段の黄色ボタン + 一覧) ---- */
#sb-a11y-stopbtn {
width: 100%; flex: none; cursor: pointer;
background: #ffe23d; border: 2px solid #ffe23d; border-radius: 14px;
color: #3a2e00; padding: 0 12px;
min-height: 64px; /* 緑の「さがす」ボタンと同じ高さに揃えてバランスを取る */
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* 黄色ボタン内のバス停名は flex で並べ、ポールバッジを大きく見せる */
#sb-a11y-stopbtn .sb-a11y-stopnm { display: flex; align-items: center; }
#sb-a11y-stopbtn .sb-a11y-stopsign { width: 38px; height: 48px; vertical-align: middle; margin-right: 9px; }
#sb-a11y-stopbtn[hidden] { display: none !important; }
.sb-a11y-stopnm { font-size: 20px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-a11y-stopchg { font-size: 13px; font-weight: 700; opacity: .85; white-space: nowrap; }
.sb-a11y-stoprow {
width: 100%; flex: none; cursor: pointer; text-align: left;
background: #10275a; border: 2px solid #4a6db0; border-radius: 12px;
color: #eaf2ff; padding: 12px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sb-a11y-stoprow.sb-on2 { background: #ffe23d; border-color: #ffe23d; color: #3a2e00; }
.sb-a11y-stoprow .sb-a11y-stopnm { font-size: 18px; }
.sb-a11y-stopsoon { font-size: 13px; font-weight: 700; 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; }
.sb-a11y-histbtn { border-color: #b39ddb !important; color: #d7c7f0 !important; min-width: 84px; justify-content: center; }
/* ★2026-08-04 ご主人様のご指示: 読み上げの枠は外す (色だけ他のボタンに合わせる) */
.sb-a11y-histspkbtn { border: 0 !important; color: #d7c7f0 !important; }
.sb-a11y-cdb { border-color: #ffd54f; color: #ffd54f; }
.sb-a11y-run { border-color: #7bd97f; }
/* ---- お手軽モード: 空メッセージを大きく・あたたかく (後勝ちで上書き) ---- */
.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-a11y-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; }
/* ---- お手軽モード: 下段アクション行 (見かた切替ボタン + とじる) ---- */
#sb-a11y-actions { display: flex; gap: 8px; flex: none; }
#sb-a11y-mode {
flex: 1; min-height: 56px; cursor: pointer;
background: #10275a; border: 2px solid #ffd54f; border-radius: 14px;
color: #ffd54f; font-size: 17px; font-weight: 700; white-space: nowrap;
}
/* ---- お手軽モード: あ⁺文字サイズ (右上の丸ボタン + 大/特大スケール) ---- */
#sb-a11y-font {
position: absolute; top: 10px; right: 12px; z-index: 1;
width: 52px; height: 52px; border-radius: 50%; padding: 0;
background: #10275a; border: 2px solid #7fd0ff; color: #7fd0ff;
font-size: 19px; font-weight: 700; cursor: pointer;
}
/* 大 (sb-a11y-lg) */
#sb-a11y.sb-a11y-lg #sb-a11y-clock { font-size: 68px; }
#sb-a11y.sb-a11y-lg .sb-a11y-tab { font-size: 21px; }
#sb-a11y.sb-a11y-lg .sb-a11y-stopnm { font-size: 24px; }
#sb-a11y.sb-a11y-lg .sb-a11y-hstop { font-size: 20px; }
#sb-a11y.sb-a11y-lg .sb-a11y-hnum { font-size: 76px; }
#sb-a11y.sb-a11y-lg .sb-a11y-hunit { font-size: 26px; }
#sb-a11y.sb-a11y-lg .sb-a11y-rstop { font-size: 18px; }
#sb-a11y.sb-a11y-lg .sb-a11y-rmin { font-size: 22px; }
#sb-a11y.sb-a11y-lg .sb-a11y-empty { font-size: 23px; }
#sb-a11y.sb-a11y-lg #sb-a11y-close, #sb-a11y.sb-a11y-lg #sb-a11y-mode { font-size: 21px; }
/* 特大 (sb-a11y-xl) */
#sb-a11y.sb-a11y-xl #sb-a11y-clock { font-size: 80px; }
#sb-a11y.sb-a11y-xl .sb-a11y-tab { font-size: 24px; }
#sb-a11y.sb-a11y-xl .sb-a11y-stopnm { font-size: 28px; }
#sb-a11y.sb-a11y-xl .sb-a11y-hstop { font-size: 23px; }
#sb-a11y.sb-a11y-xl .sb-a11y-hnum { font-size: 88px; }
#sb-a11y.sb-a11y-xl .sb-a11y-hunit { font-size: 30px; }
#sb-a11y.sb-a11y-xl .sb-a11y-rstop { font-size: 21px; }
#sb-a11y.sb-a11y-xl .sb-a11y-rmin { font-size: 26px; }
#sb-a11y.sb-a11y-xl .sb-a11y-empty { font-size: 26px; }
#sb-a11y.sb-a11y-xl #sb-a11y-close, #sb-a11y.sb-a11y-xl #sb-a11y-mode { font-size: 24px; }
/* お手軽モード: すやすや緑バスの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; }
.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-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; }
/* ヒーローはスクロール領域の外・上に固定 (行き先が多くても常に一番上) */
#sb-board-hero { background: #0b2557; border: 3px solid #ffe23d; border-radius: 16px; padding: 12px 14px; flex: none; }
#sb-board-hero[hidden] { display: none !important; }
#sb-board-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#sb-board-list { display: flex; flex-direction: column; gap: 6px; }
#sb-board-stopbtn {
width: 100%; padding: 10px 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-a11y-stopchg { font-size: 14px; font-weight: 700; opacity: .8; }
/* 左端: ハート枠を黒く抜いた丸 (外側の黄ラインは残す)。中に白線ハート、登録済=赤/未登録=中黒 */
#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; }
#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=青) --- */
.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: var(--sb-stop-line); border-color: var(--sb-stop-line); color: #2a1d00; }
.sb-board-nearmy .sb-board-nearnm, .sb-board-nearmy .sb-a11y-stopnm { color: #2a1d00; }
.sb-board-nearmy .sb-board-neardir, .sb-board-nearmy .sb-board-neardist { color: #4a3800; }
.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-stopbtn.sb-board-stop-unreg .sb-a11y-stopchg { opacity: .85; }
.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; }
#sb-board-hero .sb-board-hnumwrap { display: flex; align-items: baseline; gap: 4px; flex: none; }
#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; }
/* 方面えらびフローティング */
.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; }
/* もどる: アプリ本体の ◀もどる と同じ配色 (同じ言葉のボタンは同じ見た目) */
.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; /* 針のカクつきをならす。長すぎると追従が遅れる */
}
/* 許可がまだ / 端末が非対応 のときは薄く出す。「効いていない」ことを見て分かるように */
#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 {
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-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; }
.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 {
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;
}
.sb-board-dialnow .sb-board-dialnm { font-size: 30px; 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 に合わせた。
「ミント=押せる」の言葉を崩さないため、勝手に別の色を足さない。 */
.sb-board-dialhome {
display: block;
width: 100%;
margin: 8px 0 0;
padding: 12px 0;
border-radius: 12px;
border: 2px solid rgba(143, 201, 186, 0.55);
background: rgba(143, 201, 186, 0.10);
color: #fff;
font-size: 18px;
font-weight: 800;
cursor: pointer;
}
.sb-board-dialhome:active { background: rgba(143, 201, 186, 0.28); }
/* ⏱ 遅れの表示 */
.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: 34px; }
#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: 38px; }
#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段目=時刻+行き先(左)+🔊(右端) */
.sb-board-row { flex-direction: column; align-items: stretch; row-gap: 3px; }
.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;
}