/* 松江バスナビ — すべて .mbn-app の中に閉じ込め、テーマのCSSと干渉しにくくしている */
.mbn-app {
  --mbn-ink: #0f172a;
  --mbn-ink2: #334155;
  --mbn-muted: #64748b;
  --mbn-line: #e2e8f0;
  --mbn-bg: #f8fafc;
  --mbn-card: #ffffff;
  --mbn-blue: #1d4ed8;
  --mbn-red: #dc2626;
  --mbn-board: #059669;
  --mbn-goal: #7c3aed;
  --mbn-green: #047857;
  --mbn-amber: #b45309;
  color: var(--mbn-ink);
  background: var(--mbn-bg);
  border-radius: 16px;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  box-sizing: border-box;
}
.mbn-app *, .mbn-app *::before, .mbn-app *::after { box-sizing: border-box; }
.mbn-app button { font: inherit; cursor: pointer; }
.mbn-app h3, .mbn-app p, .mbn-app ul, .mbn-app ol { margin: 0; }

.mbn-map { width: 100%; min-height: 260px; background: #e5e7eb; z-index: 0; }

.mbn-panel { padding: 12px 14px 18px; }

/* 目的地検索 */
.mbn-search { position: relative; margin-bottom: 8px; }
.mbn-search-label { display: block; font-size: 13px; font-weight: 700; color: var(--mbn-ink2); margin-bottom: 4px; }
.mbn-search-row { display: flex; gap: 8px; align-items: stretch; }
.mbn-search-box { position: relative; flex: 1; min-width: 0; }
.mbn-app .mbn-dest-input {
  width: 100%; height: 46px; padding: 0 44px 0 14px; margin: 0;
  border: 2px solid var(--mbn-line); border-radius: 12px; background: #fff;
  font-size: 16px; color: var(--mbn-ink); outline: none; box-shadow: none;
}
.mbn-app .mbn-dest-input:focus { border-color: var(--mbn-blue); }
.mbn-app .mbn-dest-input::-webkit-search-cancel-button { display: none; }
.mbn-app .mbn-dest-clear {
  position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #f1f5f9; color: var(--mbn-muted); font-size: 18px; line-height: 1; padding: 0;
}
.mbn-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1000; margin-top: 4px !important; padding: 4px !important;
  list-style: none; background: #fff; border: 1px solid var(--mbn-line); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14); max-height: 300px; overflow-y: auto;
}
.mbn-suggest li { margin: 0; }
.mbn-app .mbn-suggest button {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px;
  border-radius: 8px; color: var(--mbn-ink); font-size: 15px;
}
.mbn-app .mbn-suggest button:hover, .mbn-app .mbn-suggest button:focus { background: #eff6ff; outline: none; }
.mbn-sug-empty { padding: 10px 12px; color: var(--mbn-muted); font-size: 14px; }

/* ステータス */
.mbn-status { min-height: 22px; margin: 2px 0 10px; }
.mbn-st { font-size: 12px; color: var(--mbn-muted); display: inline-flex; align-items: center; gap: 6px; }
.mbn-st.is-live { color: var(--mbn-green); font-weight: 600; }
.mbn-st.is-live i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; animation: mbn-pulse 1.6s infinite; }
.mbn-st.is-warn { color: var(--mbn-amber); }
@keyframes mbn-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

/* ボタン */
.mbn-app .mbn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--mbn-line);
  background: #fff; color: var(--mbn-ink); font-weight: 600; font-size: 14px; text-decoration: none;
}
.mbn-app .mbn-btn-primary { background: var(--mbn-blue); border-color: var(--mbn-blue); color: #fff; }
.mbn-app .mbn-btn-wide { width: 100%; min-height: 48px; font-size: 16px; }

.mbn-card { background: var(--mbn-card); border: 1px solid var(--mbn-line); border-radius: 14px; padding: 14px; }
.mbn-intro p { margin-bottom: 12px; }
.mbn-intro .mbn-hint { margin: 10px 0 0; font-size: 13px; color: var(--mbn-muted); }
.mbn-note { font-size: 13px; color: var(--mbn-ink2); background: #eff6ff; border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.mbn-empty { font-size: 14px; color: var(--mbn-ink2); background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 14px; margin: 8px 0; }
.mbn-loading { font-size: 14px; color: var(--mbn-muted); padding: 10px 2px; }

.mbn-sec { margin-bottom: 18px; }
.mbn-h { font-size: 16px; font-weight: 800; margin: 4px 0 8px; color: var(--mbn-ink); }

/* 近くのバス停 */
.mbn-near { list-style: none; padding: 0; background: #fff; border: 1px solid var(--mbn-line); border-radius: 14px; overflow: hidden; }
.mbn-near li { margin: 0; border-top: 1px solid var(--mbn-line); }
.mbn-near li:first-child { border-top: 0; }
.mbn-app .mbn-near button {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px;
  text-align: left; background: none; border: 0; padding: 12px 14px; color: var(--mbn-ink);
}
.mbn-app .mbn-near button:hover { background: #f8fafc; }
.mbn-near-name { font-weight: 700; font-size: 16px; }
.mbn-near-dist { grid-row: 2; font-size: 13px; color: var(--mbn-muted); }
.mbn-chev { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 24px; color: #94a3b8; }

/* 目的地プラン */
.mbn-plan-from { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 12px 0 6px; color: var(--mbn-ink2); flex-wrap: wrap; }
.mbn-plan-pin { width: 10px; height: 10px; border-radius: 50%; background: var(--mbn-board); }
.mbn-walk { font-size: 12px; background: #e0e7ff; color: #3730a3; border-radius: 999px; padding: 1px 8px; }

/* バス停画面 */
.mbn-stophead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mbn-app .mbn-back {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 1px solid var(--mbn-line);
  background: #fff; font-size: 26px; line-height: 1; padding: 0 0 3px; color: var(--mbn-ink);
}
.mbn-stopname { font-size: 20px; font-weight: 800; line-height: 1.3; }
.mbn-sub { font-size: 13px; color: var(--mbn-muted); }
.mbn-filter { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 10px; padding: 8px 12px; background: #fff; border: 1px solid var(--mbn-line); border-radius: 10px; }
.mbn-filter input { width: 18px; height: 18px; margin: 0; }

/* バスのカード */
.mbn-bus {
  --c: #2563eb;
  position: relative; background: var(--mbn-card); border: 1px solid var(--mbn-line); border-left: 6px solid var(--c);
  border-radius: 14px; padding: 12px 12px 8px; margin: 0 0 10px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06); transition: box-shadow .15s, opacity .15s;
}
.mbn-bus:focus { outline: none; }
.mbn-bus:focus-visible, .mbn-bus.is-selected { box-shadow: 0 0 0 3px var(--c); }
.mbn-bus.is-nodest { opacity: .55; }
.mbn-bus-head { display: flex; align-items: flex-start; gap: 8px; }
.mbn-route {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; margin-top: 3px;
}
.mbn-for { flex: 1; min-width: 0; font-size: 14px; color: var(--mbn-ink2); }
.mbn-for b { font-size: 18px; color: var(--mbn-ink); line-height: 1.3; }
.mbn-when { text-align: right; flex: 0 0 auto; }
.mbn-time { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mbn-mins { display: block; font-size: 12px; color: var(--mbn-muted); }
.mbn-mins.is-soon { color: var(--mbn-red); font-weight: 700; }
.mbn-sched { display: block; font-size: 11px; color: var(--mbn-muted); text-decoration: line-through; }

.mbn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mbn-chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: #f1f5f9; color: var(--mbn-ink2); }
.mbn-chip.is-live { background: #dcfce7; color: #166534; font-weight: 700; }
.mbn-chip.is-soon { background: #fee2e2; color: #991b1b; font-weight: 700; }
.mbn-chip.is-ok { background: #ecfdf5; color: var(--mbn-green); }
.mbn-chip.is-late { background: #fef3c7; color: #92400e; font-weight: 700; }
.mbn-chip.is-muted { color: var(--mbn-muted); }

.mbn-destline { font-size: 13px; margin-top: 8px; padding: 7px 10px; border-radius: 10px; }
.mbn-destline.is-ok { background: #ecfdf5; color: #065f46; }
.mbn-destline.is-ng { background: #f1f5f9; color: var(--mbn-muted); }
.mbn-tap { font-size: 11px; color: #94a3b8; text-align: right; margin-top: 2px; }

/* 路線図（横一本線・停留所名は縦書き） */
.mbn-line {
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  margin: 10px -12px 0; padding: 18px 12px 6px; scroll-behavior: smooth;
}
.mbn-line ol { display: flex; list-style: none; padding: 0; min-width: max-content; }
.mbn-node {
  position: relative; flex: 0 0 30px; width: 30px; margin: 0;
  display: block; text-align: center;
}
.mbn-node::before {
  content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--c);
}
.mbn-node:first-child::before { left: 50%; }
.mbn-node:last-child::before { right: 50%; }
.mbn-prev::before, .mbn-busnode::before { background: repeating-linear-gradient(90deg, #94a3b8 0 4px, transparent 4px 8px); }
.mbn-board::before { background: linear-gradient(90deg, #94a3b8 50%, var(--c) 50%); }
.mbn-board:first-child::before { background: var(--c); }
.mbn-after::before, .mbn-gap::before { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 10px); opacity: .45; }
.mbn-dest::before { background: linear-gradient(90deg, var(--c) 50%, transparent 50%); }
.mbn-dest.is-last::before { background: var(--c); }
.mbn-dot {
  position: relative; z-index: 1; display: block; width: 14px; height: 14px; margin: 3px auto 0; border-radius: 50%;
  background: #fff; border: 3px solid var(--c);
}
.mbn-prev .mbn-dot { border-color: #94a3b8; }
.mbn-after .mbn-dot { opacity: .5; }
.mbn-board, .mbn-dest { flex-basis: 48px; width: 48px; }
.mbn-board .mbn-dot, .mbn-dest .mbn-dot { width: 22px; height: 22px; margin: -1px auto 0; border-width: 4px; box-shadow: 0 0 0 2px #fff; }
.mbn-board .mbn-dot { background: var(--mbn-board); border-color: #fff; outline: 3px solid var(--mbn-board); }
.mbn-dest .mbn-dot { background: var(--mbn-goal); border-color: #fff; outline: 3px solid var(--mbn-goal); }
.mbn-name {
  /* 縦書き(writing-mode)は端末のフォントによって潰れるため、1文字幅で折り返して縦に並べる */
  display: block; width: 1.15em; margin: 6px auto 0;
  word-break: break-all; overflow-wrap: anywhere; white-space: normal;
  font-size: 12px; line-height: 1.12; text-align: center;
  max-height: 10.2em; overflow: hidden; color: var(--mbn-ink2);
}
.mbn-prev .mbn-name, .mbn-after .mbn-name { color: #94a3b8; }
.mbn-board .mbn-name, .mbn-dest .mbn-name { font-weight: 800; font-size: 13px; color: var(--mbn-ink); }
.mbn-dot, .mbn-busicon, .mbn-t { flex-shrink: 0; }
.mbn-t { display: block; font-size: 11px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--mbn-ink); }
.mbn-tag {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 800; color: #fff; background: var(--mbn-board); border-radius: 4px; padding: 0 5px; line-height: 15px;
}
.mbn-tag.is-dest { background: var(--mbn-goal); }
.mbn-busicon {
  position: relative; z-index: 1; width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; background: var(--c);
  display: grid; place-items: center; box-shadow: 0 0 0 2px #fff;
}
.mbn-busicon svg { width: 14px; height: 14px; fill: #fff; }
.mbn-busnode .mbn-name { color: var(--mbn-muted); }
.mbn-dots { display: block; position: relative; z-index: 1; font-size: 14px; color: var(--mbn-muted); background: var(--mbn-card); line-height: 18px; }

/* 地図上の部品 */
.mbn-app .mbn-locate-ctl {
  width: 36px; height: 36px; border-radius: 8px; border: 2px solid rgba(0,0,0,.2); background: #fff;
  display: grid; place-items: center; padding: 0;
}
.mbn-locate-ctl span { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--mbn-blue); position: relative; }
.mbn-locate-ctl span::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mbn-blue); }

.mbn-vicon { background: none; border: 0; }
.mbn-v {
  position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--c);
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.4); display: grid; place-items: center;
}
.mbn-v svg { width: 16px; height: 16px; fill: #fff; position: relative; z-index: 1; }
.mbn-v.is-focus { width: 38px; height: 38px; box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.45); }
.mbn-v.is-focus svg { width: 20px; height: 20px; }
.mbn-v-arrow { position: absolute; inset: -9px; pointer-events: none; }
.mbn-v-arrow::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--c);
}
.mbn-vpop { display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 140px; }
.mbn-vpop .mbn-route { align-self: flex-start; margin: 0; }
.mbn-pop strong { display: block; font-size: 15px; margin-bottom: 8px; }
.mbn-pop-btns { display: flex; gap: 6px; }
.mbn-app .leaflet-container { font: inherit; }
.leaflet-tooltip.mbn-tip-dest { background: #7c3aed; color: #fff; border: 0; font-weight: 700; }
.leaflet-tooltip.mbn-tip-dest::before { border-top-color: #7c3aed; }
.leaflet-tooltip.mbn-tip-board { background: #059669; color: #fff; border: 0; font-weight: 700; }
.leaflet-tooltip-bottom.mbn-tip-board::before { border-bottom-color: #059669; }


@media (prefers-reduced-motion: reduce) {
  .mbn-line { scroll-behavior: auto; }
  .mbn-st.is-live i { animation: none; }
}

/* ---- v1.1 目的地検索・事業者カラー ---- */
.mbn-app .mbn-pick {
  flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 64px; padding: 4px 8px; border: 2px solid var(--mbn-line); border-radius: 12px; background: #fff;
  color: var(--mbn-ink2); font-size: 11px; font-weight: 700; line-height: 1.1;
}
.mbn-app .mbn-pick.is-on { border-color: var(--mbn-goal); background: #f5f3ff; color: var(--mbn-goal); }
.mbn-pick-ico {
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--mbn-goal); position: relative; margin: 2px 0 3px;
}
.mbn-pick-ico::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.mbn-map.is-picking, .mbn-map.is-picking .leaflet-interactive { cursor: crosshair; }
.mbn-pickbanner {
  position: absolute; z-index: 1000; left: 50%; top: 10px; transform: translateX(-50%);
  background: var(--mbn-goal); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); white-space: nowrap;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 120px);
}
.mbn-pickbanner span { overflow: hidden; text-overflow: ellipsis; }
.mbn-app .mbn-pickbanner button { flex: 0 0 auto; border: 0; border-radius: 999px; background: #fff; color: var(--mbn-goal); font-size: 13px; font-weight: 800; padding: 3px 12px; }
.mbn-pickbanner[hidden] { display: none; }

.mbn-app .mbn-suggest button { display: flex; align-items: center; gap: 10px; }
.mbn-sug-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mbn-sug-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbn-sug-t small { font-size: 12px; color: var(--mbn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbn-sug-ops { flex: 0 0 auto; display: flex; gap: 3px; }
.mbn-sico { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; position: relative; background: #f1f5f9; }
.mbn-sico.is-stop::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 3px solid #334155; background: #fff; }
.mbn-sico.is-place { background: #ede9fe; }
.mbn-sico.is-place::after { content: ""; position: absolute; left: 7px; top: 5px; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mbn-goal); }
.mbn-sico.is-search { background: #e0f2fe; }
.mbn-sico.is-search::before { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border: 2px solid #0369a1; border-radius: 50%; }
.mbn-sico.is-search::after { content: ""; position: absolute; left: 14px; top: 14px; width: 5px; height: 2px; background: #0369a1; transform: rotate(45deg); }

.mbn-oppill {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px;
  color: #fff; background: var(--oc); white-space: nowrap; vertical-align: middle;
}
.mbn-near-ops { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 2px; }
.mbn-pop-ops { display: flex; gap: 4px; margin: -4px 0 8px; }
.mbn-opname { display: block; font-size: 12px; font-weight: 800; line-height: 1.2; }
.mbn-walkafter { display: inline-block; margin-left: 4px; font-weight: 700; color: var(--mbn-goal); }
.mbn-plan-arr { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mbn-goal); }

.mbn-legend {
  display: flex; flex-direction: column; gap: 3px !important; gap: 10px; background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 8px;
  font-size: 11px; font-weight: 700; color: #334155; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.mbn-legend span { display: inline-flex; align-items: center; gap: 4px; }
.mbn-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.mbn-pinicon { background: none; border: 0; }
.mbn-pinicon { overflow: visible; }
/* 先端（下のとがった所、y=40.5）がマーカーの位置に来るように置く */
.mbn-app .mbn-pin { position: absolute; left: -16px; top: -41px; width: 32px; height: 42px; max-width: none; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); cursor: pointer; }
.mbn-rname { font-weight: 600; color: var(--mbn-muted); }
.mbn-chip-no { display: inline-flex; align-items: center; gap: 4px; background: #0f172a; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.mbn-chip-bus svg { width: 12px; height: 12px; fill: #fff; display: block; }
.mbn-route { max-width: 7.5em; }

/* ---- v1.3 よく使うバス停・時刻表・スポンサー枠 ---- */
.mbn-stophead-t { flex: 1; min-width: 0; }
.mbn-stophead .mbn-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mbn-star { display: inline-flex; width: 18px; height: 18px; }
.mbn-star svg { width: 100%; height: 100%; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linejoin: round; }
.mbn-star.is-on svg { fill: #f59e0b; stroke: #f59e0b; }
.mbn-app .mbn-fav {
  flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--mbn-line); background: #fff; border-radius: 12px; padding: 5px 10px;
  font-size: 11px; font-weight: 700; color: var(--mbn-muted);
}
.mbn-app .mbn-fav .mbn-star { width: 22px; height: 22px; }
.mbn-app .mbn-fav.is-on { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
.mbn-h-fav { display: flex; align-items: center; gap: 6px; }
.mbn-favlist .mbn-near-dist { color: var(--mbn-ink2); }
.mbn-favlist .mbn-near-dist b { font-variant-numeric: tabular-nums; }
.mbn-dotop { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.mbn-late { color: #92400e; font-weight: 700; }

.mbn-seg { display: grid; grid-template-columns: 1fr 1fr; background: #e2e8f0; border-radius: 12px; padding: 3px; margin: 0 0 12px; }
.mbn-app .mbn-seg button { border: 0; background: none; border-radius: 9px; padding: 8px 0; font-size: 14px; font-weight: 700; color: var(--mbn-ink2); }
.mbn-app .mbn-seg button[aria-selected="true"] { background: #fff; color: var(--mbn-ink); box-shadow: 0 1px 3px rgba(15,23,42,.15); }

.mbn-tt-types { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.mbn-app .mbn-tt-types button, .mbn-app .mbn-tt-filters button {
  border: 1px solid var(--mbn-line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--mbn-ink2);
}
.mbn-app .mbn-tt-types button[aria-pressed="true"], .mbn-app .mbn-tt-filters button[aria-pressed="true"] { background: var(--mbn-ink); border-color: var(--mbn-ink); color: #fff; }
.mbn-tt-date { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mbn-muted); margin-left: auto; }
.mbn-tt-date.is-on { color: var(--mbn-ink); font-weight: 700; }
.mbn-app .mbn-tt-date input { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--mbn-line); border-radius: 8px; background: #fff; color: var(--mbn-ink); }
.mbn-tt-day { font-size: 15px; font-weight: 800; margin: 2px 0 8px; display: flex; align-items: center; gap: 8px; }
.mbn-tt-todaytag { font-size: 11px; background: #dcfce7; color: #166534; border-radius: 999px; padding: 1px 8px; }
.mbn-tt-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.mbn-app .mbn-tt-filters button { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mbn-tt-filters small { font-weight: 600; opacity: .7; }
.mbn-tt-legend { font-size: 12px; color: var(--mbn-ink2); margin: 2px 0 8px; line-height: 1.8; }
.mbn-tt-mk {
  display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: #334155; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1; vertical-align: 1px; margin-right: 2px;
}
.mbn-app .mbn-tt-past { display: block; width: 100%; margin: 0 0 6px; border: 1px dashed #cbd5e1; background: #fff; border-radius: 10px; padding: 8px; font-size: 13px; color: var(--mbn-ink2); }
.mbn-tt-grid { background: #fff; border: 1px solid var(--mbn-line); border-radius: 14px; overflow: hidden; }
.mbn-tt-row { display: grid; grid-template-columns: 44px 1fr; border-top: 1px solid var(--mbn-line); }
.mbn-tt-row:first-child { border-top: 0; }
.mbn-tt-h { background: #f1f5f9; font-weight: 800; font-size: 16px; display: grid; place-items: center; font-variant-numeric: tabular-nums; color: var(--mbn-ink); }
.mbn-tt-row.is-now .mbn-tt-h { background: #0f172a; color: #fff; }
.mbn-tt-m { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
.mbn-app .mbn-tt-min {
  --c: #475569;
  min-width: 42px; height: 34px; padding: 0 6px; border-radius: 8px; border: 2px solid transparent;
  background: #f1f5f9; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
}
.mbn-app .mbn-tt-min.is-past { opacity: .35; }
.mbn-app .mbn-tt-min.is-next { background: var(--c); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.mbn-app .mbn-tt-min.is-sel { border-color: var(--mbn-ink); }
.mbn-app .mbn-tt-min.is-demo { min-width: 0; height: 20px; font-size: 11px; padding: 0 5px; --c: #475569; vertical-align: 1px; }
.mbn-tt-note { font-size: 12px; color: var(--mbn-muted); margin: 8px 2px 0; }
.mbn-tt-trip { --c: #475569; margin: 0 8px 8px; padding: 10px 12px 12px; border-radius: 12px; border: 2px solid var(--c); background: #fff; }
.mbn-tt-trip-h { display: flex; align-items: center; gap: 8px; }
.mbn-tt-trip-h b { flex: 1; font-size: 15px; }
.mbn-tt-trip-h .mbn-route { margin-top: 0; }
.mbn-app .mbn-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f1f5f9; color: var(--mbn-muted); font-size: 16px; padding: 0; }
.mbn-tt-trip .mbn-line { margin: 6px -12px 4px; }
.mbn-tt-trip .mbn-btn { margin-top: 4px; }

.mbn-sp { margin: 14px 0 6px; }
.mbn-sp > a, .mbn-sp > div {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--mbn-line); border-radius: 12px;
  background: #fff; color: var(--mbn-ink); text-decoration: none;
}
.mbn-sp > a:hover { border-color: #cbd5e1; }
.mbn-sp-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: 0 0 48px; background: #f1f5f9; }
.mbn-sp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mbn-sp-pr { align-self: flex-start; font-size: 10px; font-weight: 800; color: var(--mbn-muted); border: 1px solid #cbd5e1; border-radius: 4px; padding: 0 4px; line-height: 15px; }
.mbn-sp-title { font-size: 14px; font-weight: 700; }
.mbn-sp-text { font-size: 12px; color: var(--mbn-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mbn-sp .mbn-chev { font-size: 22px; color: #94a3b8; }

/* ---- v1.4 お知らせ・文字サイズ・共有・最終バス・降車お知らせ ---- */
.mbn-search-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.mbn-search-top .mbn-search-label { margin: 0; }
.mbn-app .mbn-size { border: 1px solid var(--mbn-line); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--mbn-ink2); }
.mbn-app .mbn-size[aria-pressed="true"] { background: var(--mbn-ink); border-color: var(--mbn-ink); color: #fff; }
.mbn-app.is-large .mbn-panel { zoom: 1.2; }

.mbn-notice { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.mbn-notice.is-warn { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.mbn-notice[hidden] { display: none; }
.mbn-notice-main { display: flex; gap: 10px; align-items: flex-start; }
.mbn-notice-ico { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1d4ed8; color: #fff; font-weight: 900; font-size: 13px; font-style: normal; }
.mbn-notice.is-warn .mbn-notice-ico { background: #d97706; }
.mbn-notice small { display: block; font-size: 11px; font-weight: 700; opacity: .8; }
.mbn-notice p { margin: 4px 0 0; font-size: 13px; }
.mbn-notice a { color: inherit; font-weight: 700; }
.mbn-notice-more { margin: 8px 0 0 32px; padding-top: 8px; border-top: 1px dashed currentColor; }
.mbn-app .mbn-notice-tg { margin: 6px 0 0 32px; border: 0; background: none; padding: 0; color: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; }

.mbn-app .mbn-share { margin-left: 6px; }
.mbn-share-ico { width: 20px; height: 20px; position: relative; display: inline-block; }
.mbn-share-ico::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 9px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; }
.mbn-share-ico::after { content: "↑"; position: absolute; left: 0; right: 0; top: -3px; text-align: center; font-weight: 900; font-size: 14px; line-height: 1; }

.mbn-last { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; background: #fff; border: 1px solid var(--mbn-line); border-radius: 10px; padding: 7px 12px; margin: 0 0 10px; }
.mbn-last > b { font-size: 13px; }
.mbn-last > span { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--mbn-ink2); }
.mbn-last-i { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mbn-last-i.is-gone { color: #94a3b8; text-decoration: line-through; }
.mbn-last.is-near { background: #fff7ed; border-color: #fdba74; }
.mbn-last.is-near > b { color: #c2410c; }
.mbn-last.is-over { background: #f1f5f9; }
.mbn-last.is-over > b { color: var(--mbn-ink2); }

.mbn-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.mbn-cardfoot .mbn-tap { margin: 0; }
.mbn-app .mbn-btn-ride { min-height: 34px; padding: 0 10px; font-size: 13px; }
.mbn-bell { width: 14px; height: 14px; display: inline-block; position: relative; }
.mbn-bell::before { content: ""; position: absolute; left: 2px; right: 2px; top: 1px; bottom: 3px; border: 2px solid currentColor; border-radius: 6px 6px 2px 2px; }
.mbn-bell::after { content: ""; position: absolute; left: 5px; bottom: 0; width: 4px; height: 3px; border-radius: 0 0 3px 3px; background: currentColor; }

.mbn-ride {
  --c: #1d4ed8;
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 10000; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #0f172a; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); border-left: 6px solid var(--c); font-size: 14px;
}
.mbn-ride[hidden] { display: none; }
.mbn-ride.is-next { background: #7c3aed; animation: mbn-blink 1.2s ease-in-out infinite alternate; }
@keyframes mbn-blink { from { box-shadow: 0 0 0 0 rgba(124,58,237,.6); } to { box-shadow: 0 0 0 8px rgba(124,58,237,0); } }
.mbn-ride-t { flex: 1; min-width: 0; }
.mbn-ride-t small { display: block; font-size: 11px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbn-ride-t b { font-size: 16px; }
.mbn-app .mbn-ride-x { border: 1px solid rgba(255,255,255,.5); background: none; color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 700; }

.mbn-sheet { position: fixed; inset: 0; z-index: 10001; background: rgba(15,23,42,.5); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.mbn-sheet[hidden] { display: none; }
.mbn-sheet-box { background: #fff; color: var(--mbn-ink); width: 100%; max-width: 520px; max-height: 80vh; overflow: auto; border-radius: 16px; padding: 14px 14px 16px; }
.mbn-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mbn-sheet-h b { font-size: 16px; }
.mbn-sheet-sub { font-size: 13px; color: var(--mbn-ink2); margin: 4px 0 0; }
.mbn-sheet-note { font-size: 12px; color: var(--mbn-muted); background: #f8fafc; border-radius: 8px; padding: 6px 8px; margin: 8px 0; }
.mbn-sheet-list { list-style: none; padding: 0; margin: 0; }
.mbn-sheet-list li { margin: 0; border-top: 1px solid var(--mbn-line); }
.mbn-app .mbn-sheet-list button { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 11px 6px; text-align: left; font-size: 15px; color: var(--mbn-ink); }
.mbn-sheet-list button span { flex: 1; }
.mbn-sheet-list button small { color: var(--mbn-muted); font-variant-numeric: tabular-nums; }
.mbn-sheet-list button em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--mbn-goal); border-radius: 999px; padding: 1px 8px; }
.mbn-app .mbn-sheet-list button.is-rec { background: #f5f3ff; font-weight: 700; }
.mbn-alert { text-align: center; align-self: center; }
.mbn-alert-t { font-size: 22px; font-weight: 900; margin: 8px 0 4px; color: var(--mbn-goal); }
.mbn-alert p { margin: 0 0 14px; }

/* ---- v1.5 ふりがな ---- */
.mbn-tools { display: inline-flex; gap: 6px; }
.mbn-app .mbn-ruby-tg { border: 1px solid var(--mbn-line); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--mbn-ink2); }
.mbn-app .mbn-ruby-tg[aria-pressed="true"] { background: var(--mbn-ink); border-color: var(--mbn-ink); color: #fff; }
.mbn-rb { position: relative; display: inline-block; text-indent: 0; }
.mbn-rb-y {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: -.15em;
  font-size: .5em; font-weight: 600; line-height: 1.1; white-space: nowrap; color: var(--mbn-muted); letter-spacing: .02em; pointer-events: none;
}
.mbn-stopname .mbn-rb-y { font-size: .42em; }
.mbn-search-top { flex-wrap: wrap; }
.mbn-app .mbn-ruby-tg, .mbn-app .mbn-size { white-space: nowrap; }
/* ふりがなを表示しているときだけ、読みの分の高さを空ける */
.mbn-app.ruby-on .mbn-near-name, .mbn-app.ruby-on .mbn-stopname, .mbn-app.ruby-on .mbn-plan-from, .mbn-app.ruby-on .mbn-sug-t b,
.mbn-app.ruby-on .mbn-tt-trip-h b, .mbn-app.ruby-on .mbn-sheet-list button span, .mbn-app.ruby-on .mbn-ride-t span { padding-top: .4em; }
.mbn-app.ruby-on .mbn-for b { display: inline-block; padding-top: .55em; }
.mbn-app.ruby-on .mbn-destline, .mbn-app.ruby-on .mbn-last-i, .mbn-app.ruby-on .mbn-near-dist { line-height: 2.1; }
.mbn-app.ruby-on .mbn-tt-legend { line-height: 2.7; }
.mbn-app.ruby-on .mbn-tt-filters button { padding-top: 10px; }
.mbn-app .mbn-en { font-size: 12px; color: var(--mbn-muted); margin: 0; }
.mbn-node[data-n] { cursor: help; }

/* v1.6 データ提供元の表示（公共交通オープンデータ 開発者ガイドライン3.1） */
.mbn-credit { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e2e8f0; font-size: 11px; line-height: 1.6; color: #64748b; }
.mbn-credit p { margin: 0 0 4px; }
.mbn-credit a { color: #1565C0; }
.mbn-credit-data { display: block; }
.mbn-credit-data.is-expired { color: #b45309; font-weight: 700; }

/* v1.6.15 パソコン：トップは「地図｜検索」、バス停を開くと「地図の下に路線｜検索」。幅1024px以上でJSが is-desk を付ける */
.mbn-detail[hidden], .mbn-split { display: none; }
.mbn-app.is-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px var(--mbn-side, 340px);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "map ss panel";
  height: var(--mbn-h, calc(100vh - 32px));
  min-height: 520px;
}
.mbn-app.is-desk.is-3col {
  grid-template-rows: var(--mbn-maph, 50%) 8px minmax(0, 1fr);
  grid-template-areas: "map ss panel" "sd ss panel" "detail ss panel";
}
.mbn-app.is-desk .mbn-map { grid-area: map; height: auto !important; min-height: 0; }
.mbn-app.is-desk .mbn-detail { grid-area: detail; display: block; overflow-y: auto; padding: 12px 16px 18px; background: var(--mbn-card); min-width: 0; min-height: 0; overscroll-behavior: auto; }
.mbn-app.is-desk .mbn-panel { grid-area: panel; overflow-y: auto; min-width: 0; overscroll-behavior: auto; }
.mbn-app.is-desk .mbn-split { display: block; position: relative; background: var(--mbn-line); touch-action: none; }
.mbn-app.is-desk .mbn-split-side { grid-area: ss; cursor: col-resize; }
.mbn-app.is-desk .mbn-split-detail { grid-area: sd; cursor: row-resize; }
.mbn-app.is-desk:not(.is-3col) .mbn-split-detail { display: none; }
.mbn-app.is-desk .mbn-split::after {
  content: ""; position: absolute; top: 50%; left: 50%; border-radius: 2px; background: #94a3b8;
}
.mbn-app.is-desk .mbn-split-side::after { width: 2px; height: 36px; margin: -18px 0 0 -1px; box-shadow: -3px 0 0 #94a3b8; transform: translateX(1.5px); }
.mbn-app.is-desk .mbn-split-detail::after { width: 36px; height: 2px; margin: -1px 0 0 -18px; box-shadow: 0 -3px 0 #94a3b8; transform: translateY(1.5px); }
.mbn-app.is-desk .mbn-split:hover, .mbn-app.is-desk .mbn-split:focus-visible, .mbn-app.is-resizing .mbn-split { background: #bfdbfe; outline: none; }
.mbn-app.is-resizing { user-select: none; }
.mbn-app.is-resizing .mbn-map { pointer-events: none; }
/* 3列のとき、路線欄の中のバス停名などを読みやすく */
.mbn-app.is-desk.is-3col .mbn-detail .mbn-stophead { position: sticky; top: -12px; z-index: 2; background: var(--mbn-card); margin: -12px -16px 10px; padding: 12px 16px 8px; border-bottom: 1px solid var(--mbn-line); }
.mbn-app.is-desk.is-large .mbn-detail { zoom: 1.2; }

/* v1.6.2 パソコン：「地図で選ぶ」は検索窓の下に横長で置く */
.mbn-app.is-desk .mbn-search-row { flex-direction: column; gap: 6px; }
.mbn-app.is-desk .mbn-pick { flex-direction: row; gap: 6px; width: 100%; min-height: 38px; font-size: 13px; }
.mbn-app.is-desk .mbn-pick-ico { flex: 0 0 auto; }
.mbn-empty small { display: block; margin-top: 4px; font-size: 12px; color: var(--mbn-muted); font-weight: 400; }
.mbn-admin-hint { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; line-height: 1.6; }
.mbn-admin-hint code { font-size: 12px; background: #ffedd5; padding: 0 3px; border-radius: 3px; }

/* v1.6.5 地図で指定した地点の住所・最寄りバス停 */
.mbn-destsub { margin: -4px 0 8px; font-size: 13px; color: var(--mbn-muted); }
.mbn-destsub.is-loading { color: #94a3b8; }

/* v1.6.8 地図で指定した地点の候補 */
.mbn-cands { margin: 0 0 10px; }
.mbn-cands-h { font-size: 12px; color: var(--mbn-muted); margin: 0 0 4px !important; }
.mbn-cands-l { display: flex; flex-wrap: wrap; gap: 6px; }
.mbn-app .mbn-cand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: 100%; padding: 5px 10px; border: 1.5px solid var(--mbn-line); border-radius: 10px; background: #fff; text-align: left; line-height: 1.3; }
.mbn-app .mbn-cand b { font-size: 13px; font-weight: 700; color: var(--mbn-ink); overflow-wrap: anywhere; }
.mbn-app .mbn-cand small { font-size: 11px; color: var(--mbn-muted); }
.mbn-app .mbn-cand:hover { border-color: #c4b5fd; background: #faf5ff; }
.mbn-app .mbn-cand.is-on { border-color: var(--mbn-goal); background: #f5f3ff; }
.mbn-app .mbn-cand.is-on b { color: var(--mbn-goal); }

/* v1.6.13 降りるバス停の範囲（徒歩◯分以内） */
.mbn-dwalk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; font-size: 13px; color: var(--mbn-ink2); }
.mbn-app .mbn-dwalk button { border: 1.5px solid var(--mbn-line); background: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; color: var(--mbn-ink2); }
.mbn-app .mbn-dwalk button.is-on { border-color: var(--mbn-goal); background: var(--mbn-goal); color: #fff; }

/* v1.6.14 出発地（乗る場所） */
.mbn-app .mbn-from-input {
  width: 100%; height: 42px; padding: 0 44px 0 14px; margin: 0;
  border: 2px solid var(--mbn-line); border-radius: 12px; background: #fff; font-size: 15px; color: var(--mbn-ink);
}
.mbn-app .mbn-from-input:focus { border-color: var(--mbn-board); outline: none; }
.mbn-app .mbn-from-input::-webkit-search-cancel-button { display: none; }
.mbn-app .mbn-from-input::placeholder { color: #94a3b8; }
.mbn-app .mbn-from-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f5f9; color: var(--mbn-muted); font-size: 18px; line-height: 1; }
.mbn-from-row { margin-bottom: 10px; }
.mbn-to-label { margin-top: 2px; }
.mbn-pick-ico.is-from { background: var(--mbn-board); }
.mbn-app .mbn-pick-from.is-on { border-color: var(--mbn-board); background: #ecfdf5; color: var(--mbn-board); }
.mbn-pickbanner.is-from { background: var(--mbn-board); }
.mbn-app .mbn-pickbanner.is-from button { color: var(--mbn-board); }
.leaflet-tooltip.mbn-tip-from { background: #059669; color: #fff; border: 0; font-weight: 700; }
.leaflet-tooltip.mbn-tip-from::before { border-top-color: #059669; }
.mbn-from-wrap { position: relative; }
.mbn-from-wrap .mbn-suggest { top: calc(100% - 10px); }

/* v1.6.15 凡例：事業者ごとのバス停の表示／非表示 */
.mbn-legend { display: flex; flex-direction: column; gap: 3px; }
.mbn-legend-h { font-size: 10px; color: var(--mbn-muted); font-weight: 700; }
.mbn-app .mbn-legend button { display: flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; padding: 2px 6px 2px 4px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--mbn-ink2); text-align: left; }
.mbn-app .mbn-legend button:hover { background: #f1f5f9; }
.mbn-app .mbn-legend button[data-op]:not(.is-on) { color: #94a3b8; text-decoration: line-through; }
.mbn-app .mbn-legend button[data-op]:not(.is-on) i { opacity: .3; }
.mbn-app .mbn-legend button.mbn-legend-all { margin-top: 2px; border-color: var(--mbn-line); background: #fff; font-weight: 600; color: var(--mbn-blue); }
.mbn-app .mbn-legend button.mbn-legend-all.is-on { background: #eff6ff; }
.mbn-legend.is-route button[data-op] { opacity: .55; }

/* v1.6.16 走行中のバスの吹き出し */
.mbn-vicon { overflow: visible; }
.mbn-vpopup .leaflet-popup-content { margin: 10px 14px 10px 12px; line-height: 1.45; }
.mbn-vpopup .leaflet-popup-content-wrapper { border-radius: 12px; }
.mbn-vpopup .mbn-vpop { font-size: 13px; min-width: 0; }
.mbn-vpopup .mbn-vpop b { font-size: 14px; line-height: 1.4; }
.mbn-vpopup .mbn-rname { font-size: 12px; }

/* v1.6.18 吹き出しの先端：テーマのCSSに左右されないよう、Leaflet標準の先端を使わず三角形を描く */
.mbn-app .leaflet-popup { margin-bottom: 10px; }
.mbn-app .leaflet-popup-tip-container { display: none; }
.mbn-app .leaflet-popup-content-wrapper { position: relative; box-shadow: 0 4px 16px rgba(15,23,42,.22); }
.mbn-app .leaflet-popup-content-wrapper::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 0; height: 0; margin-left: -9px;
  border-style: solid; border-width: 10px 9px 0 9px; border-color: #fff transparent transparent transparent;
  filter: drop-shadow(0 2px 1px rgba(15,23,42,.12));
}
.mbn-app .leaflet-popup-close-button { top: 4px; right: 4px; width: 24px; height: 24px; line-height: 22px; font-size: 18px; }
/* 走行中のバスの吹き出しの中身 */
.mbn-vpop { display: flex; flex-direction: column; gap: 2px; padding-right: 10px; }
.mbn-vpop-h { display: flex; align-items: center; gap: 8px; }
.mbn-vpop-h small { font-weight: 700; font-size: 12px; }
.mbn-vpop .mbn-route { margin: 0; }
.mbn-vpop-t { margin-top: 2px; }
.mbn-vpop-st { font-weight: 700; color: var(--mbn-ink); }
.mbn-vpop .mbn-late { color: #b45309; }
.mbn-vpop .mbn-ontime { color: #047857; }
.mbn-vpop-m { color: var(--mbn-ink2); }
.mbn-vpop-age { color: var(--mbn-muted); font-size: 11px; }
.leaflet-tooltip.mbn-tip-end { background: #0f172a; color: #fff; border: 0; font-weight: 700; }
.leaflet-tooltip.mbn-tip-end::before { border-top-color: #0f172a; }

/* v1.6.20 凡例：畳める・吹き出しを開いている間は隠す */
.mbn-app .mbn-legend button.mbn-legend-h { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 11px; color: var(--mbn-muted); text-decoration: none; }
.mbn-legend-dots { display: none; gap: 3px; }
.mbn-legend-dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mbn-legend-car { font-size: 10px; color: var(--mbn-muted); }
.mbn-legend:not(.is-open) .mbn-legend-dots { display: inline-flex; }
.mbn-legend:not(.is-open) button:not(.mbn-legend-h) { display: none; }
.mbn-legend:not(.is-open) { padding: 3px 6px; }
.mbn-map.mbn-pop-open .mbn-legend { opacity: 0; visibility: hidden; transition: opacity .15s; }
@media (max-width: 640px) {
  .mbn-vpopup .leaflet-popup-content { margin: 8px 12px 8px 10px; }
  .mbn-vpopup .mbn-vpop { font-size: 12.5px; }
}

/* v1.6.22 凡例を左下へ。開いているときは色の点を出さない。出典表記と重ならないようにする */
.mbn-legend.is-open .mbn-legend-dots { display: none !important; }
.mbn-legend:not(.is-open) .mbn-legend-dots { display: inline-flex !important; }
.mbn-app .leaflet-bottom.leaflet-left .mbn-legend { margin-bottom: 8px; }
.mbn-app .leaflet-control-attribution { font-size: 10px; line-height: 1.4; max-width: calc(100% - 120px); text-align: right; }

/* v1.6.23 走行中のバスの吹き出し：小さい表示に切り替え */
.mbn-vpop { position: relative; }
.mbn-app .mbn-vpop-tg {
  position: absolute; top: -4px; right: 14px; width: 22px; height: 22px; padding: 0; border: 1px solid var(--mbn-line);
  border-radius: 6px; background: #fff; color: var(--mbn-ink2); font-size: 14px; font-weight: 700; line-height: 20px; text-align: center;
}
.mbn-app .mbn-vpop-tg:hover { background: #f1f5f9; }
.mbn-vpop.is-min { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding-right: 44px; }
.mbn-vpop.is-min .mbn-vpop-tg { top: 50%; transform: translateY(-50%); right: 18px; }
.mbn-vpop.is-min b { font-size: 13px; }
.mbn-vpop.is-min small { flex-basis: 100%; font-size: 12px; color: var(--mbn-ink2); }
.mbn-vpopup .leaflet-popup-content:has(.mbn-vpop.is-min) { margin: 6px 8px 6px 10px; }

/* v1.6.24 通過したバス */
.mbn-passed { margin-top: 14px; }
.mbn-passed-h { margin: 0 0 6px !important; font-size: 14px; color: var(--mbn-ink2); }
.mbn-passed-h small { font-weight: 400; color: var(--mbn-muted); margin-left: 4px; }
.mbn-passed ul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.mbn-app .mbn-passed-i { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--mbn-line); border-radius: 12px; background: #f8fafc; text-align: left; color: var(--mbn-ink); }
.mbn-app .mbn-passed-i:not(.is-na):hover { background: #eff6ff; border-color: #bfdbfe; }
.mbn-app .mbn-passed-i.is-na { cursor: default; opacity: .85; }
.mbn-passed .mbn-route { flex: 0 0 auto; margin: 0; }
.mbn-passed-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mbn-passed-b b { font-size: 14px; }
.mbn-passed-t { font-size: 12px; color: var(--mbn-muted); }
.mbn-passed-w { font-size: 13px; color: var(--mbn-ink2); }
.mbn-passed-n { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #e2e8f0; font-size: 11px; font-weight: 700; color: var(--mbn-ink2); }
.mbn-passed-na { color: var(--mbn-muted); }
.mbn-passed-go { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--mbn-blue); }
.mbn-app.ruby-on .mbn-passed-w, .mbn-app.ruby-on .mbn-passed-b b { padding-top: 7px; }

/* v1.6.25 選んだバスの情報（地図の下） */
.mbn-vinfo { background: var(--mbn-card); border-top: 3px solid var(--mbn-line); padding: 10px 14px 12px; }
.mbn-vinfo[hidden] { display: none; }
.mbn-vinfo-h { display: flex; align-items: center; gap: 10px; }
.mbn-vinfo-h .mbn-route { margin: 0; flex: 0 0 auto; }
.mbn-vinfo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mbn-vinfo-t b { font-size: 15px; line-height: 1.35; }
.mbn-vinfo-t small { font-size: 12px; color: var(--mbn-muted); }
.mbn-vinfo-st { margin: 6px 0 0 !important; font-size: 14px; font-weight: 700; }
.mbn-vinfo-st .mbn-late { color: #b45309; }
.mbn-vinfo-st .mbn-ontime { color: #047857; }
.mbn-vinfo-end { display: inline-block; margin-left: 10px; font-weight: 400; font-size: 13px; color: var(--mbn-ink2); }
.mbn-vinfo-m { margin: 2px 0 0 !important; font-size: 12px; color: var(--mbn-muted); }
.mbn-vinfo-f { display: flex; justify-content: flex-end; margin-top: 4px; }
.mbn-vinfo-f .mbn-btn { font-size: 13px; padding: 6px 12px; }
.mbn-app.ruby-on .mbn-vinfo-st, .mbn-app.ruby-on .mbn-vinfo-t b { padding-top: 6px; }
/* 停車順：いまの位置 */
.mbn-liveline { margin-top: 8px; }
.mbn-herenode .mbn-busicon, .mbn-busnode.is-live .mbn-busicon { width: 26px; height: 26px; }
.mbn-herenode .mbn-name { font-weight: 800; color: var(--mbn-ink); }
.mbn-tag.is-here { background: #0f172a; }
.mbn-busnode.is-live .mbn-name { color: var(--mbn-muted); font-size: 11px; }
.mbn-tt-live { margin: 4px 0 2px !important; font-size: 13px; font-weight: 700; }
.mbn-tt-live .mbn-late { color: #b45309; }
.mbn-app.ruby-on .mbn-tt-live { padding-top: 6px; }
/* パソコン：地図の下の段に置く */
.mbn-app.is-desk {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "map ss panel" "vinfo ss panel";
}
.mbn-app.is-desk.is-3col {
  grid-template-rows: var(--mbn-maph, 50%) auto 8px minmax(0, 1fr);
  grid-template-areas: "map ss panel" "vinfo ss panel" "sd ss panel" "detail ss panel";
}
.mbn-app.is-desk .mbn-vinfo { grid-area: vinfo; min-width: 0; max-height: 46vh; overflow-y: auto; }
.mbn-app.is-desk:not(.is-3col) .mbn-detail { display: none; }
.mbn-tag.is-gone { background: #94a3b8; }

/* v1.6.26 パソコン：ページ全体を縦スクロール。地図の高さは固定し、バスの情報・次のバス・時刻表は地図の下に続けて表示 */
.mbn-app.is-desk, .mbn-app.is-desk.is-3col {
  height: auto;
  min-height: 0;
  overflow: visible;
  grid-template-rows: var(--mbn-h, 640px) auto auto;
  grid-template-areas: "map ss panel" "vinfo ss panel" "detail ss panel";
  align-items: start;
}
.mbn-app.is-desk .mbn-map { height: var(--mbn-h, 640px) !important; border-radius: 16px 0 0 0; }
.mbn-app.is-desk .mbn-split-detail { display: none !important; }
.mbn-app.is-desk .mbn-split-side { align-self: stretch; }
.mbn-app.is-desk .mbn-vinfo { max-height: none; overflow: visible; }
.mbn-app.is-desk .mbn-detail { overflow: visible; min-height: 0; }
.mbn-app.is-desk.is-3col .mbn-detail .mbn-stophead { position: static; margin: 0 0 10px; padding: 0 0 8px; }
/* 右の検索欄は、ページをスクロールしても画面内に残す */
.mbn-app.is-desk .mbn-panel { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; align-self: start; }

/* v1.6.27 経路検索 */
.mbn-via-wrap { position: relative; margin-top: 8px; }
.mbn-via-wrap[hidden] { display: none; }
.mbn-via-wrap .mbn-suggest { top: 100%; }
.mbn-app .mbn-via-input { width: 100%; height: 42px; padding: 0 44px 0 14px; border: 2px solid var(--mbn-line); border-radius: 12px; background: #fff; font-size: 15px; }
.mbn-app .mbn-via-input:focus { border-color: #f59e0b; outline: none; }
.mbn-app .mbn-via-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f5f9; color: var(--mbn-muted); font-size: 18px; }
.mbn-pick-ico.is-via { background: #f59e0b; }
.mbn-app .mbn-pick-via.is-on { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.mbn-pickbanner.is-via { background: #d97706; }
.mbn-plan-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 13px; }
.mbn-app .mbn-when-sel, .mbn-app .mbn-when-date, .mbn-app .mbn-when-time { height: 32px; border: 1px solid var(--mbn-line); border-radius: 8px; background: #fff; padding: 0 6px; font-size: 13px; }
.mbn-when-set[hidden] { display: none; }
.mbn-when-set { display: inline-flex; gap: 4px; margin-left: 4px; }
.mbn-xfer-l { display: inline-flex; align-items: center; gap: 4px; }
.mbn-app .mbn-via-add { border: 0; background: none; color: var(--mbn-blue); font-size: 13px; font-weight: 700; padding: 4px 2px; }
.mbn-app .mbn-go { width: 100%; margin-top: 10px; min-height: 46px; border: 0; border-radius: 12px; background: var(--mbn-blue); color: #fff; font-size: 16px; font-weight: 800; }
.mbn-app .mbn-go:hover { background: #1e40af; }
.mbn-plan-cta p { margin-bottom: 10px !important; }
.mbn-alert { margin: 0 0 10px !important; padding: 10px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; line-height: 1.6; }
.mbn-alt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.mbn-it { border: 1px solid var(--mbn-line); border-radius: 14px; background: #fff; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; }
.mbn-it:hover { border-color: #bfdbfe; }
.mbn-it.is-selected { border: 2px solid var(--mbn-blue); padding: 9px 11px; }
.mbn-it-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mbn-it-h b { font-size: 16px; }
.mbn-it-m { font-size: 12px; color: var(--mbn-muted); }
.mbn-chip.is-xfer { background: #fef3c7; color: #92400e; }
.mbn-chip.is-direct { background: #dcfce7; color: #166534; }
.mbn-it-legs { list-style: none; margin: 8px 0 0 !important; padding: 0 0 0 4px !important; border-left: 3px solid var(--mbn-line); }
.mbn-it-legs li { position: relative; padding: 4px 0 4px 12px; font-size: 13px; }
.mbn-it-legs li.is-leg { display: flex; gap: 8px; align-items: flex-start; }
.mbn-it-legs li.is-leg .mbn-route { flex: 0 0 auto; margin: 2px 0 0; }
.mbn-it-l { display: flex; flex-direction: column; }
.mbn-it-l small { color: var(--mbn-muted); font-size: 12px; }
.mbn-it-legs li.is-xfer { color: #b45309; font-weight: 700; }
.mbn-it-legs li.is-walk { color: var(--mbn-muted); }
.mbn-it .mbn-late { color: #b45309; }
.mbn-app.ruby-on .mbn-it-legs li { padding-top: 9px; }
.leaflet-tooltip.mbn-tip-xfer { background: #d97706; color: #fff; border: 0; font-weight: 700; }
.leaflet-tooltip.mbn-tip-xfer::before { border-bottom-color: #d97706; border-top-color: #d97706; }
.mbn-plan-opts .mbn-when { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 100%; }
.mbn-when-set { flex-wrap: wrap; margin-left: 0; }

/* v1.7.1 地点のメニュー（乗る・降りる・経由地） */
.mbn-pmenu { min-width: 200px; }
.mbn-pmenu-t { display: block; font-size: 15px; padding-right: 18px; }
.mbn-pmenu-s { display: block; font-size: 11px; color: var(--mbn-muted); }
.mbn-pmenu-b { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mbn-app .mbn-pmenu-b .mbn-btn { display: flex; align-items: center; gap: 8px; justify-content: flex-start; width: 100%; font-size: 13px; padding: 7px 10px; }
.mbn-pmenu-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.mbn-app .mbn-pmenu-b .mbn-btn.is-from:hover { border-color: #059669; background: #ecfdf5; }
.mbn-app .mbn-pmenu-b .mbn-btn.is-to:hover { border-color: #7c3aed; background: #f5f3ff; }
.mbn-app .mbn-pmenu-b .mbn-btn.is-via:hover { border-color: #f59e0b; background: #fffbeb; }
.mbn-app .mbn-pmenu-b .mbn-btn.mbn-btn-primary { justify-content: center; }
.mbn-app .mbn-pmenu-b .mbn-btn.is-del { justify-content: center; color: var(--mbn-muted); font-size: 12px; }
/* ランドマーク */
.mbn-lmicon { overflow: visible; }
.mbn-lm { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; transform: rotate(45deg); background: #f59e0b; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
/* 乗る場所と行き先がそろったら「バスを探す」を目立たせる */
@keyframes mbn-ready { 0%, 100% { box-shadow: 0 0 0 0 rgba(29,78,216,.5); } 50% { box-shadow: 0 0 0 6px rgba(29,78,216,.15); } }
.mbn-app .mbn-go.is-ready { animation: mbn-ready 1.4s ease-in-out 3; }

/* v1.7.2 地図の向き */
.mbn-v-arrow { transform: rotate(calc(var(--b, 0deg) + var(--mbn-mapbear, 0deg))); }
.mbn-app .mbn-orient { background: #fff; position: relative; }
.mbn-app .mbn-orient-b { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: #fff; border-radius: 4px; padding: 0; }
.mbn-compass { position: relative; width: 18px; height: 18px; transform: rotate(var(--n)); transition: transform .3s; }
.mbn-orient-b { --n: 0deg; }
.mbn-orient-b .mbn-compass { transform: rotate(var(--n)); }
.mbn-compass::before, .mbn-compass::after { content: ""; position: absolute; left: 50%; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.mbn-compass::before { top: 0; border-bottom: 9px solid #dc2626; }
.mbn-compass::after { bottom: 0; border-top: 9px solid #94a3b8; }
.mbn-orient-b.is-alt { box-shadow: inset 0 0 0 2px var(--mbn-blue); }
.mbn-orient-m { position: absolute; right: 0; top: 40px; z-index: 1000; width: 170px; background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(15,23,42,.2); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.mbn-orient-m[hidden] { display: none; }
.mbn-app .mbn-orient-m button { border: 1px solid var(--mbn-line); background: #fff; border-radius: 8px; padding: 6px 8px; text-align: left; font-size: 13px; font-weight: 700; color: var(--mbn-ink2); }
.mbn-app .mbn-orient-m button.is-on { border-color: var(--mbn-blue); background: #eff6ff; color: var(--mbn-blue); }
.mbn-orient-m small { font-size: 10px; color: var(--mbn-muted); line-height: 1.4; padding: 2px 2px 0; }
.mbn-chip.is-day { background: #e0e7ff; color: #3730a3; font-weight: 800; }
/* v1.7.4 リセット */
.mbn-app .mbn-reset { border: 1px solid var(--mbn-line); background: #fff; color: var(--mbn-ink2); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.mbn-app .mbn-reset:hover { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }

/* v1.7.6 よく使うバス停：地図の吹き出しから追加・入力欄の候補 */
.mbn-app .mbn-pmenu-b .mbn-btn.mbn-pmenu-fav { gap: 6px; }
.mbn-app .mbn-pmenu-b .mbn-btn.mbn-pmenu-fav .mbn-star { width: 16px; height: 16px; }
.mbn-app .mbn-pmenu-b .mbn-btn.mbn-pmenu-fav:hover { border-color: #f59e0b; background: #fffbeb; }
.mbn-app .mbn-pmenu-b .mbn-btn.mbn-pmenu-fav.is-on { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.mbn-sico.is-fav { background: #fef3c7; display: inline-flex; align-items: center; justify-content: center; }
.mbn-sico.is-fav .mbn-star { width: 14px; height: 14px; }

/* v1.7.7 パソコン：地図の高さをウィンドウいっぱいに。右の検索欄も同じ高さで、管理バーの下に固定 */
.mbn-app.is-desk .mbn-panel { top: var(--mbn-top, 0px); max-height: var(--mbn-h, 100vh); }

/* v1.7.8 乗る場所・目的地の近くにバス停がないとき */
.mbn-fwarn { margin: 6px 0 2px; padding: 8px 10px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 10px; color: #7f1d1d; font-size: 13px; line-height: 1.5; }
.mbn-fwarn[hidden] { display: none; }
.mbn-fwarn p { margin: 0; }
.mbn-fwarn-t { display: flex; gap: 6px; align-items: flex-start; font-weight: 800; color: #b91c1c; }
.mbn-fwarn-ico { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 12px; font-weight: 900; line-height: 18px; text-align: center; }
.mbn-fwarn-s { padding-left: 24px; margin-top: 2px !important; }
.mbn-fwarn-b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-left: 24px; }
.mbn-app .mbn-fwarn-b .mbn-btn { font-size: 13px; padding: 6px 12px; background: #fff; border-color: #fca5a5; color: #991b1b; }
.mbn-app .mbn-fwarn-b .mbn-btn:hover { background: #fee2e2; }
.mbn-fwarn.is-card { margin: 8px 0 12px; padding: 12px 14px; font-size: 14px; }
.mbn-fwarn.is-card .mbn-fwarn-t { font-size: 15px; }
.mbn-app .mbn-search-box.is-warn input { border-color: #f87171; }
.mbn-tip-nostop { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; font-weight: 700; }
.mbn-tip-nostop::before { border-right-color: #fca5a5 !important; }

/* v1.7.9 SNSでシェア */
.mbn-sharebox { position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; font-family: inherit; }
.mbn-sharebox-in { width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); color: #0f172a; }
.mbn-sharebox-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 16px; }
.mbn-sharebox .mbn-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f5f9; font-size: 18px; cursor: pointer; }
.mbn-share-prev { margin: 0 0 6px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; line-height: 1.6; white-space: normal; word-break: break-word; }
.mbn-share-url { margin: 0 0 12px; font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbn-share-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.mbn-sbtn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; color: #0f172a; cursor: pointer; }
.mbn-sbtn:hover, .mbn-sbtn:focus-visible { border-color: #94a3b8; background: #f8fafc; outline: none; }
.mbn-sbtn-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: 14px; font-weight: 900; color: #fff; background: #475569; }
.mbn-sbtn.is-x .mbn-sbtn-ico { background: #000; }
.mbn-sbtn.is-line .mbn-sbtn-ico { background: #06c755; }
.mbn-sbtn.is-fb .mbn-sbtn-ico { background: #1877f2; font-family: Arial, sans-serif; }
.mbn-sbtn.is-copy .mbn-sbtn-ico { background: #64748b; }
.mbn-sbtn.is-more .mbn-sbtn-ico { background: #2563eb; }
.mbn-share-note { margin: 10px 0 0; font-size: 12px; color: #64748b; }
.mbn-app .mbn-btn-share { display: inline-flex; align-items: center; gap: 4px; }
.mbn-app .mbn-btn-share .mbn-share-ico { width: 16px; height: 16px; transform: scale(.85); }
.mbn-plan-share { margin: 10px 0 4px; text-align: right; }
.mbn-vinfo-f { display: flex; flex-wrap: wrap; gap: 8px; }

/* v1.7.10 シェアの内容を選ぶ・バスとバス停からシェア */
.mbn-share-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.mbn-share-opts > span { width: 100%; font-size: 12px; color: #64748b; font-weight: 700; }
.mbn-share-opts button { padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: #334155; cursor: pointer; font-family: inherit; }
.mbn-share-opts button.is-on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.mbn-app .mbn-vshare { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: #1d4ed8; cursor: pointer; }
.mbn-app .mbn-vshare:hover { background: #eff6ff; border-color: #93c5fd; }
.mbn-app .mbn-vshare .mbn-share-ico, .mbn-mapshare .mbn-share-ico, .mbn-app .mbn-pmenu-share .mbn-share-ico { width: 16px; height: 16px; transform: scale(.85); }
.mbn-app .mbn-vinfo-h .mbn-vshare + .mbn-x { margin-left: 0; }
.mbn-mapshare { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 800; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: 999px; background: #1d4ed8; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 6px 18px rgba(29, 78, 216, .35); cursor: pointer; font-family: inherit; }
.mbn-mapshare[hidden] { display: none; }
.mbn-mapshare:hover { background: #1e40af; }
.mbn-app .mbn-pmenu-b .mbn-btn.mbn-pmenu-share { justify-content: center; gap: 6px; color: #1d4ed8; }

/* v1.7.11 停車順の図のバス停を押して操作 */
.mbn-line .mbn-node[data-u] { cursor: pointer; }
.mbn-line .mbn-node[data-u] .mbn-name { text-decoration: underline dotted #94a3b8; text-underline-offset: 3px; }
.mbn-line .mbn-node[data-u]:hover .mbn-name, .mbn-line .mbn-node[data-u]:focus-visible .mbn-name { color: var(--mbn-blue); text-decoration-color: var(--mbn-blue); }
.mbn-line .mbn-node[data-u]:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 6px; }
.mbn-stopsheet .mbn-sharebox-in { max-width: 340px; padding: 14px 16px 16px; }
.mbn-stopsheet .mbn-sharebox-h b { font-size: 18px; }
.mbn-stopsheet .mbn-pop-ops { margin: -4px 0 4px; }
.mbn-stopsheet .mbn-pmenu-b .mbn-btn { min-height: 42px; }
.mbn-stopsheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mbn-app .mbn-pmenu-b .mbn-stopsheet-row .mbn-btn { justify-content: center; }
.mbn-pin-ico { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ef4444; display: inline-block; margin-right: 2px; }

/* v1.7.12 ハッシュタグ */
.mbn-share-tags { color: #1d4ed8; }
.mbn-share-tagchk { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; color: #334155; cursor: pointer; }
.mbn-share-tagchk input { width: 16px; height: 16px; margin: 0; }

/* v1.7.13 検索結果ごとのシェア・カレンダー、よく使う経路 */
.mbn-it-f { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.mbn-app .mbn-it-f .mbn-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.mbn-app .mbn-btn-cal { color: #b45309; }
.mbn-cal-ico { position: relative; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 3px; display: inline-block; }
.mbn-cal-ico::before { content: ""; position: absolute; left: -2px; right: -2px; top: 2px; border-top: 2px solid currentColor; }
.mbn-plan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; }
.mbn-plan-tools small { font-size: 12px; color: var(--mbn-muted); }
.mbn-app .mbn-frfav { min-height: 36px; font-size: 13px; }
.mbn-app .mbn-frfav .mbn-star { width: 16px; height: 16px; }
.mbn-app .mbn-frfav.is-on { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.mbn-cal-btns { grid-template-columns: 1fr 1fr; }
.mbn-sbtn.is-gcal .mbn-sbtn-ico { background: #1a73e8; font-size: 11px; }
.mbn-sbtn.is-ics .mbn-sbtn-ico { background: #f97316; }
.mbn-calsheet select { font-size: 13px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.mbn-frlist { display: flex; flex-direction: column; gap: 10px; }
.mbn-fr { background: #fff; border: 1px solid var(--mbn-line); border-radius: 14px; padding: 12px 14px; }
.mbn-fr-h { display: flex; align-items: center; gap: 6px; }
.mbn-fr-h b { font-size: 15px; }
.mbn-fr-h small { color: var(--mbn-muted); font-size: 12px; }
.mbn-fr-h .mbn-x { margin-left: auto; width: 26px; height: 26px; font-size: 14px; flex: 0 0 auto; }
.mbn-fr-today { margin: 8px 0 6px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mbn-fr-none { color: var(--mbn-muted); }
.mbn-fr-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mbn-app .mbn-fr-day { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 4px; border: 1px solid var(--mbn-line); border-radius: 10px; background: #f8fafc; font-size: 12px; color: var(--mbn-ink2); cursor: pointer; line-height: 1.35; }
.mbn-app .mbn-fr-day > span { font-weight: 800; font-size: 12px; color: var(--mbn-muted); }
.mbn-app .mbn-fr-day b { font-size: 15px; color: var(--mbn-ink); }
.mbn-app .mbn-fr-day small { font-size: 11px; color: var(--mbn-muted); }
.mbn-app .mbn-fr-day.is-on { border-color: var(--mbn-blue); background: #eff6ff; }
.mbn-fr-note { margin: 6px 0 0; font-size: 12px; color: var(--mbn-muted); }
.mbn-fr-note.is-diff { color: #b45309; font-weight: 700; }
.mbn-fr-note.is-diff::before { content: "⚠ "; }
.mbn-fr-f { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.mbn-app .mbn-fr-f .mbn-btn { min-height: 34px; font-size: 13px; padding: 0 12px; }
.mbn-fr-tt { margin-top: 10px; border-top: 1px dashed var(--mbn-line); padding-top: 8px; }
.mbn-fr-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.mbn-app .mbn-fr-tabs button { padding: 4px 12px; border: 1px solid var(--mbn-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--mbn-ink2); cursor: pointer; }
.mbn-app .mbn-fr-tabs button[aria-pressed="true"] { background: var(--mbn-blue); border-color: var(--mbn-blue); color: #fff; }
.mbn-fr-date { margin: 6px 0 4px; font-size: 12px; color: var(--mbn-muted); }
.mbn-fr-times { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; max-height: 260px; overflow-y: auto; }
.mbn-fr-times li { display: flex; align-items: center; gap: 4px; font-size: 13px; padding: 2px 0; flex-wrap: wrap; }
.mbn-fr-times li .mbn-route { font-size: 10px; padding: 1px 6px; min-width: 0; }
.mbn-fr-times li small { width: 100%; font-size: 11px; color: var(--mbn-muted); padding-left: 2px; }
.mbn-fr-times li.is-past { opacity: .45; }
.mbn-fr-times li.is-next b { color: var(--mbn-blue); text-decoration: underline; }
.mbn-fr-next { white-space: nowrap; }
.mbn-short { color: #1d4ed8; font-weight: 700; font-size: 12px; } .mbn-short-wait { color: #b45309; }

/* v1.7.15 降車お知らせ（検索結果・地図のバス） */
.mbn-app .mbn-it-f .mbn-btn { flex: 1 1 auto; }
.mbn-app .mbn-vinfo-f .mbn-btn-ride { margin-right: auto; }

/* v1.7.17 降車お知らせのバー：スマホではテーマの「ページの先頭へ」ボタン・固定フッターメニューと重ならないよう上に */
@media (max-width: 960px) {
  .mbn-ride { bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--mbn-ride-lift, 72px)); }
}

/* v1.7.18 時刻表とのズレ */
.mbn-gap { font-weight: 700; }
.mbn-gap small { font-weight: 400; font-size: .85em; opacity: .8; }
.mbn-gap.is-late { color: #b45309; }
.mbn-gap.is-early { color: #1d4ed8; }
.mbn-gap.is-ok { color: #047857; }
.mbn-chip.mbn-gap.is-late { background: #fef3c7; color: #92400e; }
.mbn-chip.mbn-gap.is-early { background: #dbeafe; color: #1e40af; }
.mbn-chip.mbn-gap.is-ok { background: #ecfdf5; color: var(--mbn-green); }
.mbn-line .mbn-tsched { display: block; font-size: 10px; color: var(--mbn-muted); font-weight: 400; text-decoration: line-through; white-space: nowrap; }
.mbn-line .mbn-t.is-act { color: #475569; }
.mbn-gapmini { display: block; font-size: 10px; font-weight: 800; white-space: nowrap; }
.mbn-gapmini.is-late { color: #b45309; }
.mbn-gapmini.is-early { color: #1d4ed8; }
.mbn-gapmini.is-ok { color: #047857; }

/* v1.7.19 地図の下（フッター）の広告 */
.mbn-adfoot { font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; margin: 16px 0 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mbn-adfoot-banner[hidden] { display: none; }
.mbn-adfoot-banner, .mbn-adsense { position: relative; width: 100%; max-width: 970px; text-align: center; }
.mbn-adlabel { display: block; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; margin: 0 0 3px; letter-spacing: .05em; }
.mbn-banner { display: block; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; background: #fff; text-decoration: none; color: #0f172a; }
.mbn-banner:hover { border-color: #cbd5e1; }
.mbn-banner-img { display: block; width: 100%; height: auto; max-height: 180px; object-fit: contain; margin: 0 auto; }
.mbn-banner-text { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-align: left; }
.mbn-banner-text b { font-size: 16px; }
.mbn-banner-text span { font-size: 13px; color: #64748b; }
.mbn-adsense { min-height: 100px; } /* 広告の読み込みで下が動かないよう、場所を先に確保 */

/* v1.7.20 停車順の図：縦／横の切り替え */
.mbn-linebar { display: flex; justify-content: flex-end; margin: 8px 0 -6px; }
.mbn-app .mbn-linedir { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--mbn-line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--mbn-ink2); cursor: pointer; }
.mbn-app .mbn-linedir:hover { border-color: #94a3b8; }
.mbn-linedir-ico { position: relative; width: 14px; height: 14px; display: inline-block; }
.mbn-linedir-ico::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: currentColor; box-shadow: -1px 0 0 0 currentColor; }
.mbn-linedir-ico::after { content: ""; position: absolute; left: 1px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 6px 0 0 0 currentColor; }
.mbn-linedir-ico.is-v { transform: rotate(90deg); }

.line-v .mbn-line { overflow-x: visible; margin: 8px 0 0; padding: 4px 0 2px; }
.line-v .mbn-line ol { display: block; min-width: 0; margin: 0; }
.line-v .mbn-node { display: flex; align-items: center; gap: 8px; width: auto; min-height: 34px; padding: 4px 0; text-align: left; flex: none; }
.line-v .mbn-board, .line-v .mbn-dest { width: auto; min-height: 42px; }
.line-v .mbn-node::before { top: 0; bottom: 0; left: 16px; right: auto; width: 4px; height: auto; }
.line-v .mbn-node:first-child::before { top: 50%; left: 16px; }
.line-v .mbn-node:last-child::before { bottom: 50%; right: auto; }
.line-v .mbn-prev::before, .line-v .mbn-busnode::before { background: repeating-linear-gradient(180deg, #94a3b8 0 4px, transparent 4px 8px); }
.line-v .mbn-board::before { background: linear-gradient(180deg, #94a3b8 50%, var(--c) 50%); }
.line-v .mbn-board:first-child::before { background: var(--c); }
.line-v .mbn-after::before, .line-v .mbn-gap::before { background: repeating-linear-gradient(180deg, var(--c) 0 5px, transparent 5px 10px); }
.line-v .mbn-dest::before { background: linear-gradient(180deg, var(--c) 50%, transparent 50%); }
.line-v .mbn-dest.is-last::before { background: var(--c); }
.line-v .mbn-dot { order: 1; flex: 0 0 auto; margin: 0 0 0 11px; }
.line-v .mbn-board .mbn-dot, .line-v .mbn-dest .mbn-dot { margin: 0 0 0 7px; }
.line-v .mbn-busicon { order: 1; flex: 0 0 auto; margin: 0 0 0 7px; }
.line-v .mbn-herenode .mbn-busicon, .line-v .mbn-busnode.is-live .mbn-busicon { margin-left: 5px; }
.line-v .mbn-dots { order: 1; margin-left: 12px; background: transparent; }
.line-v .mbn-tag { order: 2; position: static; transform: none; flex: 0 0 auto; }
.line-v .mbn-name { order: 3; width: auto; max-height: none; margin: 0; font-size: 14px; line-height: 1.4; text-align: left; flex: 1 1 auto; min-width: 0; word-break: normal; overflow-wrap: anywhere; }
.line-v .mbn-board .mbn-name, .line-v .mbn-dest .mbn-name { font-size: 15px; }
.line-v .mbn-busnode.is-live .mbn-name { font-size: 12px; }
.line-v .mbn-t { order: 4; margin: 0; font-size: 13px; flex: 0 0 auto; }
.line-v .mbn-tsched, .line-v .mbn-gapmini { order: 5; display: inline-block; flex: 0 0 auto; }
.line-v .mbn-tt-trip .mbn-line, .line-v .mbn-tt-trip .mbn-line { margin: 6px 0 4px; }
.line-v .mbn-liveline { max-height: none; }

/* パソコン：横幅いっぱい */
.mbn-app.is-full { border-radius: 0; position: relative; }
.mbn-app.is-full .mbn-map { border-radius: 0 !important; }

/* v1.7.22 縦表示：バス停をブロック（枠）で表示、通過したバス停はたたむ、いまここ・次・乗る・降りるを強調 */
.mbn-vonly, .mbn-passtoggle { display: none; }
.line-v .mbn-vonly { display: inline-block; }
.line-v .mbn-passtoggle { display: flex; }
.line-v .mbn-liveline:not(.is-open) .is-passed { display: none; }

.line-v .mbn-line ol { padding: 2px 0; }
.line-v .mbn-node {
  margin: 6px 0 6px 36px; padding: 9px 12px; min-height: 0; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--mbn-line); border-radius: 12px; background: #fff;
}
.line-v .mbn-node::before { left: -20px; right: auto; top: -8px; bottom: -8px; width: 4px; height: auto; }
.line-v .mbn-node:first-child::before { top: 50%; left: -20px; }
.line-v .mbn-node:last-child::before { bottom: 50%; }
.line-v .mbn-dot { position: absolute; left: -25px; top: 50%; transform: translateY(-50%); margin: 0; }
.line-v .mbn-board .mbn-dot, .line-v .mbn-dest .mbn-dot, .line-v .mbn-alight .mbn-dot { left: -29px; margin: 0; }
.line-v .mbn-busicon { position: absolute; left: -29px; top: 50%; transform: translateY(-50%); margin: 0; }
.line-v .mbn-herenode .mbn-busicon, .line-v .mbn-busnode.is-live .mbn-busicon { left: -31px; }
.line-v .mbn-name { flex: 1 1 8em; }
.line-v .mbn-name small { display: block; font-size: 12px; color: var(--mbn-muted); font-weight: 400; }
.line-v .mbn-t { margin-left: auto; }

/* 通過したバス停（たたんだ状態の見出し・開いたときのバス停） */
.line-v .mbn-passtoggle { border-style: dashed; background: #f8fafc; color: var(--mbn-muted); cursor: pointer; align-items: center; }
.line-v .mbn-passtoggle::before { background: repeating-linear-gradient(180deg, #94a3b8 0 4px, transparent 4px 8px); }
.line-v .mbn-passtoggle .mbn-dots { position: absolute; left: -24px; top: 50%; transform: translateY(-50%); margin: 0; font-weight: 900; color: #94a3b8; background: transparent; }
.line-v .mbn-passtoggle .mbn-name { font-size: 13px; font-weight: 700; color: var(--mbn-ink2); }
.line-v .mbn-passtoggle:hover { border-color: #94a3b8; }
.line-v .mbn-passchev { font-size: 11px; color: #94a3b8; }
.line-v .is-passed { background: #f8fafc; border-color: #e2e8f0; }
.line-v .is-passed .mbn-name { color: #94a3b8; }

/* いまここ（停車中のバス停・走行中の位置） */
.line-v .mbn-herenode, .line-v .mbn-busnode.is-live { border: 2px solid #0f172a; background: #f1f5f9; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.line-v .mbn-herenode .mbn-name, .line-v .mbn-busnode.is-live .mbn-name { font-weight: 800; color: #0f172a; font-size: 15px; }
.line-v .mbn-busnode.is-live { padding-top: 7px; padding-bottom: 7px; }
/* 次に停まるバス停 */
.line-v .is-nextstop { border: 2px solid #f59e0b; background: #fffbeb; }
.line-v .is-nextstop .mbn-name { font-weight: 800; color: #92400e; }
.line-v .is-nextstop .mbn-dot { border-color: #f59e0b; }
.mbn-tag.is-nextstop { background: #f59e0b; }
/* 乗る・降りる */
.line-v .mbn-board { border: 2px solid var(--mbn-board); background: #ecfdf5; }
.line-v .mbn-board .mbn-name { color: #065f46; }
.line-v .mbn-dest, .line-v .mbn-alight { border: 2px solid var(--mbn-goal); background: #f5f3ff; }
.line-v .mbn-dest .mbn-name, .line-v .mbn-alight .mbn-name { color: #5b21b6; font-weight: 800; }
.mbn-alight .mbn-dot { background: var(--mbn-goal); border-color: #fff; outline: 3px solid var(--mbn-goal); width: 22px; height: 22px; }
.line-v .mbn-board.is-nextstop, .line-v .mbn-alight.is-nextstop { box-shadow: 0 0 0 3px #fde68a; }
/* 横表示でも、次に停まるバス停の印を少し強調 */
.mbn-line .is-nextstop .mbn-dot { box-shadow: 0 0 0 3px #fde68a; }
.mbn-alight { flex-basis: 48px; width: 48px; } .line-v .mbn-alight { width: auto; flex-basis: auto; }

/* v1.7.23 このバス停について・案内ページへのリンク（地図の下） */
.mbn-stopinfo, .mbn-pagenav { font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; color: #0f172a; }
.mbn-stopinfo { margin: 18px 0 0; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; font-size: 15px; line-height: 1.6; }
.mbn-stopinfo h2 { font-size: 20px; margin: 0 0 8px; }
.mbn-stopinfo h2 rt { font-size: .5em; color: #64748b; }
.mbn-stopinfo h3 { font-size: 16px; margin: 14px 0 6px; }
.mbn-si-lead { margin: 0 0 10px; }
.mbn-si-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.mbn-si-dl dt { font-weight: 700; color: #475569; }
.mbn-si-dl dd { margin: 0; }
.mbn-si-near { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mbn-si-near li { border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 12px; }
.mbn-si-near small { color: #64748b; }
.mbn-si-more { margin: 12px 0 0; }
.mbn-pagenav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 14px 0 0; font-size: 14px; color: #94a3b8; }
.mbn-pagenav a { color: #1d4ed8; font-weight: 700; text-decoration: none; }
.mbn-pagenav a:hover { text-decoration: underline; }

/* v1.7.24 「このバス停について」の見出しもテーマの装飾を打ち消す */
.mbn-stopinfo h2, .mbn-stopinfo h3, .post_content .mbn-stopinfo h2, .post_content .mbn-stopinfo h3 {
  color: #0f172a !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; text-shadow: none !important; position: static !important;
}
.mbn-stopinfo h2::before, .mbn-stopinfo h2::after, .mbn-stopinfo h3::before, .mbn-stopinfo h3::after { content: none !important; display: none !important; }
.mbn-stopinfo ul.mbn-si-near { list-style: none !important; padding: 0 !important; }
.mbn-stopinfo ul.mbn-si-near li::before { content: none !important; display: none !important; }

/* v1.7.25 シェアの画像の選択とプレビュー */
.mbn-share-img { margin: 0 0 10px; }
.mbn-share-imgopts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.mbn-share-imgopts > span { font-size: 12px; color: #64748b; font-weight: 700; margin-right: 2px; }
.mbn-share-imgopts button { padding: 4px 10px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: #334155; cursor: pointer; font-family: inherit; }
.mbn-share-imgopts button.is-on { background: #0f172a; border-color: #0f172a; color: #fff; }
.mbn-share-thumb { aspect-ratio: 1200 / 630; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #f8fafc; display: grid; place-items: center; }
.mbn-share-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbn-share-thumb span { font-size: 12px; color: #64748b; padding: 8px; text-align: center; }

/* v1.7.26 シェアの QRコード */
.mbn-sbtn.is-qr .mbn-sbtn-ico { background: #111827; }
.mbn-sbtn.is-qr.is-on { border-color: #111827; box-shadow: inset 0 0 0 1px #111827; }
.mbn-qrpanel { display: flex; gap: 14px; align-items: center; margin: 10px 0 2px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.mbn-qrcode { flex: 0 0 auto; width: 156px; height: 156px; padding: 0; background: #fff; border-radius: 8px; }
.mbn-qrcode svg { display: block; width: 100%; height: 100%; }
.mbn-qrside { min-width: 0; font-size: 13px; line-height: 1.6; }
.mbn-qrside p { margin: 0 0 6px; }
.mbn-qrwait, .mbn-qrhint { color: #64748b; font-size: 12px; }
@media (max-width: 420px) { .mbn-qrpanel { flex-direction: column; text-align: center; } .mbn-qrcode { width: 180px; height: 180px; } }

/* v1.7.28 QRコードの有効期限 */
.mbn-qrexp { color: #334155; font-size: 12px; font-weight: 700; }

/* v1.7.29 パソコン：ホイールはページのスクロール（Ctrl/⌘＋ホイールで地図の拡大縮小） */
.mbn-wzhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 900; max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 12px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s; }
.mbn-wzhint.is-on { opacity: 1; }
/* パソコン：検索欄・路線の欄は、いちばん上・下まで読んだらページのスクロールに引き継ぐ */
.mbn-app.is-desk .mbn-panel, .mbn-app.is-desk .mbn-detail { overscroll-behavior-y: auto; }

/* v1.7.32 ご利用の前に（最初の利用時の注意） */
.mbn-caution { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); }
.mbn-caution-in { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; color: #0f172a; border-radius: 16px; padding: 18px 20px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); border-top: 6px solid #f59e0b; }
.mbn-caution-h { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: #92400e; }
.mbn-caution-in ul { margin: 0 0 12px; padding-left: 1.2em; }
.mbn-caution-in li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.7; }
.mbn-caution-chk { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 14px; cursor: pointer; }
.mbn-caution-chk input { width: 18px; height: 18px; margin: 0; }
.mbn-caution-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mbn-caution-f a { font-size: 13px; color: #1d4ed8; }
.mbn-caution-f .mbn-btn { min-width: 9em; }
.mbn-st-info { margin-left: 8px; padding: 1px 8px; border: 1px solid #f59e0b; border-radius: 999px; background: #fffbeb; color: #92400e; font-size: 11.5px; font-weight: 700; cursor: pointer; line-height: 1.6; }
.mbn-st-info:hover { background: #fef3c7; }
.mbn-caution .mbn-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid #1d4ed8; border-radius: 10px; background: #1d4ed8; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.mbn-caution .mbn-btn:hover { background: #1e40af; }

/* v1.7.35 長い行き先・バス停名で枠からはみ出さないように */
/* 日本語の長い行き先（「授産センター（朝日ヶ丘経由せず）(大橋南詰･県民会館前･…)」など）は、どこででも折り返す */
.mbn-app, .mbn-sharebox, .mbn-sheet, .mbn-caution, .mbn-ride { overflow-wrap: break-word; }
.mbn-app .leaflet-container { overflow-wrap: normal; }
/* 最終バス：1便ずつ縦に並べ、長い行き先は折り返す（以前は1行のままで枠の外へ） */
.mbn-last > span { flex-direction: column; min-width: 0; max-width: 100%; }
.mbn-last-i { white-space: normal; min-width: 0; max-width: 100%; }
.mbn-last-i > .mbn-dotop { flex: none; }
/* 時刻表の行き先の切り替え：長い行き先は省略（全文は「無印＝…」の説明と、ボタンの title に） */
.mbn-tt-fl { display: inline-block; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.mbn-app.ruby-on .mbn-tt-fl { padding-top: .95em; margin-top: -.95em; }

/* v1.7.37 スポンサー：表示場所を増やした（ピン・吹き出し・降車お知らせ・待ち時間など） */
.mbn-sp-lead { font-size: 11.5px; font-weight: 700; color: #b45309; }
.mbn-sp-walk { font-size: 11.5px; color: var(--mbn-muted); }
.mbn-sp-coupon { align-self: flex-start; margin-top: 3px; font-size: 12px; font-weight: 700; color: #b45309; background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 6px; padding: 1px 8px; }
.mbn-sp.is-compact { margin: 8px 0 0; }
.mbn-sp.is-compact > a, .mbn-sp.is-compact > div { padding: 6px 8px; gap: 6px; }
.mbn-sp.is-compact .mbn-sp-title { font-size: 13px; }
.mbn-sp-wait { margin: 8px 0 10px; }
.mbn-sp-wait > a, .mbn-sp-wait > div { border-color: #fcd34d; background: #fffbeb; }
.mbn-sp-plan > a, .mbn-sp-plan > div { border-color: #c7d2fe; }
/* 地図のピン（PR） */
.mbn-sppin { background: none; border: 0; }
.mbn-sppin span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #f59e0b; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); color: #fff; font-size: 10px; font-weight: 800; }
.mbn-sppin span { font-family: inherit; }
.mbn-sppin i { transform: rotate(45deg); font-style: normal; }
.mbn-sppop .leaflet-popup-content { margin: 8px 10px; min-width: 200px; }
.mbn-sppop .mbn-sp { margin: 0; }
.mbn-sppop .mbn-sp > a, .mbn-sppop .mbn-sp > div { border: 0; padding: 2px; box-shadow: none; }
/* 降車お知らせのバーの中（暗い背景） */
.mbn-ride .mbn-sp { margin: 6px 0 0; }
.mbn-ride .mbn-sp > a, .mbn-ride .mbn-sp > div { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.mbn-ride .mbn-sp-pr { color: #e2e8f0; border-color: rgba(255, 255, 255, .4); }
.mbn-ride .mbn-sp-lead { color: #fcd34d; }
.mbn-ride .mbn-sp-walk { color: #cbd5e1; }
.mbn-ride .mbn-sp-coupon { background: rgba(245, 158, 11, .2); color: #fde68a; }
/* バスのカード：行き先の欄が狭くなりすぎないように（時刻は縦に「18:02 / あと5分」） */
.mbn-bus-head .mbn-when { display: block; }
.mbn-bus-head .mbn-for { min-width: 6em; }
.mbn-bus-head .mbn-route { flex: 0 1 auto; min-width: 6.2em; }

/* v1.7.41 経路図（検索結果の各経路） */
.mbn-btn-diag .mbn-diag-ico { display: inline-block; width: 10px; height: 14px; margin-right: 4px; border-left: 3px solid currentColor; border-radius: 2px; position: relative; vertical-align: -2px; }
.mbn-btn-diag .mbn-diag-ico::before, .mbn-btn-diag .mbn-diag-ico::after { content: ""; position: absolute; left: -5.5px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mbn-btn-diag .mbn-diag-ico::before { top: -3px; } .mbn-btn-diag .mbn-diag-ico::after { bottom: -3px; }
.mbn-btn-diag.is-on { background: #eef2ff; border-color: #6366f1; color: #3730a3; }
.mbn-it-f { flex-wrap: wrap; }
.mbn-itd { margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--mbn-line); cursor: auto; }
.mbn-itd ol { list-style: none; margin: 0; padding: 0; }
.mbn-itd-l > li { margin: 0; }
.mbn-itd-l > li.is-walk { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 2px; color: var(--mbn-muted); font-size: 13px; }
.mbn-itd-l > li.is-walk .mbn-itd-dot { width: 12px; height: 12px; border: 2px dashed #94a3b8; background: #fff; }
.mbn-itd-l > li.is-goal .mbn-itd-dot { border: 2px solid var(--mbn-goal, #7c3aed); background: var(--mbn-goal, #7c3aed); }
.mbn-itd-bus { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 13px; color: var(--mbn-ink2); }
.mbn-itd-stops { position: relative; margin-left: 4px !important; }
.mbn-itd-stops::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--c, #475569); }
.mbn-itd-stops li { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 13.5px; }
.mbn-itd-dot { flex: none; position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--c, #475569); box-sizing: border-box; align-self: center; }
.mbn-itd-stops li.is-mid .mbn-itd-dot { width: 10px; height: 10px; border-width: 2px; margin: 0 3px; }
.mbn-itd-stops li.is-on .mbn-itd-dot { background: var(--mbn-board, #059669); border-color: #fff; box-shadow: 0 0 0 2px var(--mbn-board, #059669); }
.mbn-itd-stops li.is-off .mbn-itd-dot { background: var(--c, #475569); }
.mbn-itd-t { flex: none; width: 3.2em; font-variant-numeric: tabular-nums; color: var(--mbn-muted); font-size: 12.5px; }
.mbn-itd-stops li.is-on .mbn-itd-t, .mbn-itd-stops li.is-off .mbn-itd-t { color: var(--mbn-ink); font-weight: 700; }
.mbn-itd-n { flex: 1; min-width: 0; }
.mbn-itd-tag { flex: none; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #e2e8f0; color: var(--mbn-ink2); }
.mbn-itd-stops li.is-on .mbn-itd-tag { background: #dcfce7; color: #166534; }
.mbn-itd-stops li.is-more { display: block; padding: 0; }
.mbn-itd-stops li.is-more summary { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; list-style: none; color: var(--mbn-muted); font-size: 12.5px; }
.mbn-itd-stops li.is-more summary::-webkit-details-marker { display: none; }
.mbn-itd-stops li.is-more summary .mbn-itd-dot { width: 10px; height: 10px; border-width: 2px; margin: 0 3px; border-style: dotted; }
.mbn-itd-stops li.is-more summary::after { content: "▸ 開く"; font-size: 11px; color: var(--mbn-blue); }
.mbn-itd-stops li.is-more details[open] summary::after { content: "▾ 閉じる"; }
.mbn-itd-xfer { margin: 6px 0 4px 26px; font-size: 12.5px; font-weight: 700; color: #b45309; }
/* 経路図の中のPR：小さく・控えめに */
.mbn-itd .mbn-sp { margin: 4px 0 6px 26px; }
.mbn-itd .mbn-sp > a, .mbn-itd .mbn-sp > div { padding: 5px 8px; border-style: dashed; background: #fff; }
.mbn-itd .mbn-sp-title { font-size: 12.5px; }
.mbn-app.ruby-on .mbn-itd-stops li { padding-top: 8px; }

/* v1.7.46 バスのカードの経路（停車順の図）は、ふだんはたたむ */
.mbn-routefold { margin: 8px 0 4px; }
.mbn-routeopen { display: inline-flex !important; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 14px !important; border: 1px solid #cbd5e1 !important; border-radius: 999px !important; background: #fff !important; color: #1e293b !important; font-size: 14px !important; font-weight: 700; line-height: 1.4; cursor: pointer; text-align: left; }
.mbn-routeopen small { font-weight: 400; color: #64748b; font-size: 12.5px; }
.mbn-routeopen:hover { border-color: #94a3b8 !important; }
.mbn-routeopen-ico { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 2px 0 0; transition: transform .15s; flex: none; }
.mbn-routefold.is-open .mbn-routeopen-ico { transform: rotate(-135deg); margin-top: 3px; }
.mbn-routebody { margin-top: 6px; }
.mbn-routebody[hidden] { display: none !important; }

/* v1.7.47 遅れているとき：見込みの時刻を赤、時刻表の時刻は取り消し線なしで「◀ 時刻表」 */
.mbn-app .mbn-time.is-late, .mbn-app .mbn-line .mbn-t.is-late { color: #dc2626 !important; }
.mbn-app .mbn-sched.is-late, .mbn-app .mbn-line .mbn-tsched.is-late { text-decoration: none !important; }
.mbn-app .mbn-lateico { color: #dc2626; font-size: .85em; margin-right: 3px; }

/* v1.7.48 スポンサーのサムネイルアイコン（名前と紹介文の左） */
.mbn-app .mbn-sp-icon { display: block; object-fit: cover; border-radius: 10px; background: #f1f5f9; max-width: 40%; align-self: center; }
.mbn-app .mbn-sp > a, .mbn-app .mbn-sp > div { align-items: center; }
.mbn-app .mbn-banner .mbn-sp-icon { flex: none; margin-right: 10px; }
.mbn-app .mbn-banner:has(.mbn-sp-icon) { display: flex; align-items: center; }

/* v1.7.49 乗車モード：経路図と乗っているバスの地図だけ */
.mbn-app.is-ridemode { display: block !important; }
.mbn-app.is-ridemode > .mbn-panel, .mbn-app.is-ridemode > .mbn-detail, .mbn-app.is-ridemode .mbn-vinfo, .mbn-app.is-ridemode .mbn-legend, .mbn-app.is-ridemode .mbn-split, .mbn-app.is-ridemode .mbn-ride { display: none !important; }
.mbn-app.is-ridemode .mbn-map { width: 100% !important; height: 50vh !important; min-height: 280px; }
.mbn-app.is-desk.is-ridemode .mbn-map { height: 60vh !important; }
.mbn-rideview { padding: 12px 14px 16px; background: #fff; border-top: 4px solid var(--c, #1d4ed8); }
.mbn-rv-h { display: flex; align-items: center; gap: 10px; }
.mbn-rv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.mbn-rv-t small { color: #64748b; font-size: 12px; }
.mbn-rv-t b { font-size: 17px; overflow-wrap: break-word; }
.mbn-rv-normal { flex: none; white-space: nowrap; }
.mbn-rv-st { margin: 10px 0 8px !important; padding: 10px 12px; border-radius: 10px; background: #eff6ff; font-size: 16px; line-height: 1.6; }
.mbn-rv-st.is-next { background: #fef3c7; color: #92400e; animation: mbnPulse 1.4s ease-in-out infinite; }
.mbn-rv-st b { font-size: 1.15em; }
.mbn-rv-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mbn-rv-follow { font-size: 12.5px; color: #047857; }
.mbn-rv-stop { margin-left: auto; }
.mbn-rv-line { list-style: none !important; margin: 0 !important; padding: 0 0 0 4px !important; position: relative; }
.mbn-rv-line::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: var(--c, #1d4ed8); }
.mbn-rv-n { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 !important; padding: 4px 0 4px 32px; border-bottom: 1px dashed #e2e8f0; }
.mbn-rv-dot { position: absolute; left: 6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--c, #1d4ed8); box-sizing: border-box; }
.mbn-rv-name { flex: 1; min-width: 0; font-size: 15.5px; overflow-wrap: break-word; }
.mbn-rv-name .mbn-tag { margin-right: 6px; }
.mbn-rv-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.mbn-rv-time.is-late { color: #dc2626; }
.mbn-rv-n.is-passed { color: #94a3b8; }
.mbn-rv-n.is-passed .mbn-rv-dot { border-color: #cbd5e1; }
.mbn-rv-n.is-nextstop .mbn-rv-name { font-weight: 700; }
.mbn-rv-n.is-target { background: #f0fdf4; border-radius: 10px; border-bottom: 0; margin: 4px 0 !important; }
.mbn-rv-n.is-target .mbn-rv-dot { width: 24px; height: 24px; left: 3px; border-width: 6px; }
.mbn-rv-n.is-target .mbn-rv-name { font-weight: 800; font-size: 17px; }
.mbn-rv-bus { position: relative; display: flex; align-items: center; gap: 8px; margin: 2px 0 !important; padding: 6px 0 6px 32px; font-weight: 700; color: #0f172a; font-size: 14px; }
.mbn-rv-busico { position: absolute; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--c, #1d4ed8); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff; }
.mbn-rv-busico svg { width: 18px; height: 18px; fill: currentColor; }
.mbn-rv-leg { margin: 8px 0 !important; padding: 6px 10px 6px 32px; font-size: 13px; font-weight: 700; color: #92400e; background: #fffbeb; border-radius: 8px; }
.mbn-ride-btns { display: flex; gap: 6px; flex: none; }
.mbn-ride-mode { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; background: rgba(255, 255, 255, .15); color: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
@keyframes mbnRvPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } }
.mbn-rv-st.is-next { animation: mbnRvPulse 1.4s ease-in-out infinite; }

.mbn-app.ruby-on .mbn-rv-t b, .mbn-app.ruby-on .mbn-rv-name { padding-top: 10px; }
.mbn-app .mbn-rv-name .mbn-tag { position: static !important; display: inline-block; vertical-align: middle; transform: none !important; margin: 0 6px 0 0 !important; }

/* v1.7.50 フッターのPR：画面の枠と同じカード。地図の外（.mbn-app の外）でも同じ見た目にする */
.mbn-adfoot { --mbn-muted: #64748b; --mbn-ink: #0f172a; }
.mbn-adfoot-banner { text-align: left; }
.mbn-adfoot-banner .mbn-sp { margin: 0; }
.mbn-adfoot-banner .mbn-sp > a, .mbn-adfoot-banner .mbn-sp > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #c7d2fe; border-radius: 12px; background: #fff; color: #0f172a; text-decoration: none; text-align: left; }
.mbn-adfoot-banner .mbn-sp-title { color: #0f172a; }
.mbn-adfoot-banner .mbn-sp .mbn-chev { margin-left: auto; flex: none; }
.mbn-sp-icon { display: block; object-fit: cover; border-radius: 10px; background: #f1f5f9; max-width: 40%; align-self: center; }
/* v1.7.50 乗車モード：お店のピン（PR）の表示／非表示ボタン */
.mbn-rv-pr { display: inline-flex; align-items: center; gap: 6px; }
.mbn-rv-prico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #94a3b8; color: #fff; font-size: 8.5px; font-weight: 800; }
.mbn-rv-pr.is-on .mbn-rv-prico { background: #f59e0b; }

/* v1.7.51 よく使う路線 */
.mbn-app .mbn-btn-fl { color: #b45309; }
.mbn-app .mbn-btn-fl .mbn-star svg { width: 15px; height: 15px; }
.mbn-app .mbn-btn-fl.is-on { background: #fffbeb; border-color: #fcd34d; }
.mbn-fllist .mbn-fl { position: relative; }
.mbn-app .mbn-fllist .mbn-fl-b { padding-right: 64px; }
.mbn-app .mbn-fllist .mbn-route { margin-right: 6px; vertical-align: middle; }
.mbn-fl-hs { display: block; font-size: 12px; color: var(--mbn-muted); }
.mbn-fl-first, .mbn-fl-then { display: inline-block; margin-right: 10px; }
.mbn-fl-then { color: var(--mbn-muted); font-size: .92em; }
.mbn-fl-first b.is-late, .mbn-fl-then b.is-late { color: #dc2626; }
.mbn-app .mbn-fllist .mbn-fl-del { position: absolute; right: 30px; top: 8px; }

/* v1.7.52 乗車モード：バスの位置の補足 */
.mbn-rideview .mbn-rv-note { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-size: 12.5px; line-height: 1.6; }

/* v1.7.54 「これに乗る」：バスが来るまでの案内 */
.mbn-app .mbn-btn-wait { min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 700; background: #16a34a; border-color: #16a34a; color: #fff; }
.mbn-app .mbn-btn-wait:hover { background: #15803d; border-color: #15803d; }
.mbn-app .mbn-cardfoot .mbn-btn-wait { margin-right: 6px; }
.mbn-wait-ico { width: 14px; height: 14px; display: inline-block; position: relative; flex: none; border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.mbn-wait-ico::after { content: ""; position: absolute; left: 4px; top: 1px; width: 2px; height: 5px; background: currentColor; box-shadow: 2px 3px 0 -0px currentColor; transform-origin: bottom; }
.mbn-ride.is-wait { background: #15803d; }
.mbn-ride.is-wait.is-next { background: #b45309; }
.mbn-ride-board { padding: 6px 12px; border: 0; border-radius: 8px; background: #fff; color: #15803d; font-weight: 800; font-size: 13px; cursor: pointer; }
.mbn-rideview .mbn-rv-board { display: flex; width: 100%; justify-content: center; min-height: 48px; margin: 0 0 8px; font-size: 16px; font-weight: 800; background: #16a34a; border-color: #16a34a; color: #fff; border-radius: 12px; }
.mbn-rideview .mbn-rv-board:hover { background: #15803d; }
.mbn-tag.is-board { background: #16a34a; }
.mbn-rv-line .is-board .mbn-rv-dot { border-color: #16a34a; }
.mbn-rv-line .is-appr .mbn-rv-name { color: #475569; }
.mbn-rv-line .is-after { opacity: .75; }
.mbn-rv-line .is-after.is-target { opacity: 1; }
.mbn-rv-line .mbn-rv-more { list-style: none; padding: 4px 0 4px 32px; color: #94a3b8; font-size: 12px; }

/* v1.7.56 位置の記録が古いバス */
.mbn-vicon.is-stale .mbn-v { opacity: var(--vop, .5); filter: grayscale(.5); }

/* v1.7.57 終点に着いたバス（1分ほどグレーで残す） */
.mbn-vicon.is-ended .mbn-v { --c: #94a3b8 !important; filter: grayscale(1); opacity: .85; }
.mbn-vicon.is-ended .mbn-v-arrow { display: none; }

/* v1.7.58 凡例：走っているバスのアイコンの見方 */
.mbn-legend-veh { display: none; flex-direction: column; gap: 3px; margin-top: 4px; padding: 6px 4px 2px; border-top: 1px solid var(--mbn-line, #e2e8f0); font-size: 11px; color: var(--mbn-ink2, #334155); max-width: 220px; }
.mbn-legend.is-open .mbn-legend-veh { display: flex; }
.mbn-legend-veh b { font-size: 10px; color: var(--mbn-muted, #64748b); }
.mbn-legend-veh span { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; flex-wrap: wrap; }
.mbn-legend-veh small { flex-basis: 100%; padding-left: 22px; color: #64748b; font-size: 10px; }
.mbn-lv { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #1565c0; opacity: var(--o, 1); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15,23,42,.15); }
.mbn-lv.is-end { background: #94a3b8; }

/* v1.7.59 コミュニティバス（時刻表の画像・PDF） */
.mbn-app .mbn-cb { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.mbn-app .mbn-cb-item { border: 1px solid color-mix(in srgb, var(--cb) 35%, #e2e8f0); border-left: 5px solid var(--cb); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--cb) 6%, #fff); }
.mbn-app .mbn-cb-t { display: flex; gap: 10px; align-items: flex-start; }
.mbn-app .mbn-cb-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cb); color: #fff; display: flex; align-items: center; justify-content: center; }
.mbn-app .mbn-cb-ico svg { width: 18px; height: 18px; fill: currentColor; }
.mbn-app .mbn-cb-t small { display: block; font-size: 11px; color: #475569; }
.mbn-app .mbn-cb-t b { font-size: 15px; color: #0f172a; }
.mbn-app .mbn-cb-t p { margin: 2px 0 0 !important; font-size: 12.5px; color: #475569; line-height: 1.5; }
.mbn-app .mbn-cb-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mbn-app .mbn-cb-open { min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 700; border-color: var(--cb); color: var(--cb); background: #fff; }
.mbn-app .mbn-cb-open:hover { background: color-mix(in srgb, var(--cb) 10%, #fff); }
.mbn-cb-pdf { display: inline-block; margin-right: 5px; padding: 0 4px; border-radius: 3px; background: #b91c1c; color: #fff; font-size: 10px; line-height: 1.6; }
.mbn-cbdlg { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(15, 23, 42, .6); }
.mbn-cbdlg[hidden] { display: none; }
.mbn-cbdlg-box { display: flex; flex-direction: column; width: min(960px, 100%); max-height: calc(100vh - 24px); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); font-family: inherit; }
.mbn-cbdlg-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 3px solid var(--cb); }
.mbn-cbdlg-h b { flex: 1; font-size: 16px; color: #0f172a; }
.mbn-cbdlg-h small { margin-left: 8px; font-size: 12px; font-weight: 600; color: #64748b; }
.mbn-cbdlg-h .mbn-x { border: 0; background: #f1f5f9; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.mbn-cbdlg-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; }
.mbn-cbdlg-tabs button { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.mbn-cbdlg-tabs button[aria-pressed="true"] { background: var(--cb); border-color: var(--cb); color: #fff; }
.mbn-cbdlg-note { margin: 8px 12px 0; font-size: 13px; color: #475569; }
.mbn-cbdlg-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; background: #f8fafc; }
.mbn-cbdlg-imgw { display: block; }
.mbn-cbdlg-imgw img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; background: #fff; }
.mbn-cbdlg-pdf { display: block; width: 100%; height: min(75vh, 900px); border: 0; background: #fff; }
.mbn-cbdlg-f { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px 10px; font-size: 13px; border-top: 1px solid #e2e8f0; }
.mbn-cbdlg-f a { font-weight: 700; color: #1d4ed8; }
.mbn-cbdlg-f span { flex-basis: 100%; font-size: 11.5px; color: #64748b; }

/* v1.7.60 コミュニティバス：検索結果の乗り継ぎの案内 */
.mbn-app .mbn-it-legs li.is-cb { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--cb); background: color-mix(in srgb, var(--cb) 6%, #fff); list-style: none; }
.mbn-app .mbn-it-legs li.is-cb .mbn-cb-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cb); color: #fff; display: flex; align-items: center; justify-content: center; }
.mbn-app .mbn-it-legs li.is-cb .mbn-cb-ico svg { width: 15px; height: 15px; fill: currentColor; }
.mbn-app .mbn-it-legs li.is-cb b { display: block; font-size: 13px; color: #0f172a; }
.mbn-app .mbn-it-legs li.is-cb small { display: block; font-size: 11.5px; color: #475569; }
.mbn-app .mbn-it-legs li.is-cb .mbn-cb-btns { margin-top: 6px; }
.mbn-app .mbn-cb-t p.mbn-cb-tt { color: #047857; font-weight: 600; }

/* v1.7.61 走っているバスに途中から乗る */
.mbn-app .mbn-vinfo-on { margin: 6px 0 8px; }
.mbn-app .mbn-btn-onboard { width: 100%; justify-content: center; min-height: 44px; font-size: 15px; font-weight: 800; background: var(--c, #1d4ed8); border-color: var(--c, #1d4ed8); color: #fff; border-radius: 12px; }
.mbn-app .mbn-btn-onboard:hover { filter: brightness(.95); }
.mbn-app .mbn-btn-onboard[disabled] { opacity: .6; cursor: wait; }
.mbn-app .mbn-sheet-later { display: flex; width: calc(100% - 24px); margin: 8px 12px 12px; justify-content: center; min-height: 42px; font-weight: 700; }

/* v1.7.62 バスの位置の注記（更新間隔に限りがある） */
.mbn-app .mbn-posnote, .mbn-rideview .mbn-posnote { margin: 6px 0 !important; padding-left: 18px; position: relative; font-size: 11.5px; line-height: 1.55; color: #64748b; }
.mbn-app .mbn-posnote::before, .mbn-rideview .mbn-posnote::before { content: "ⓘ"; position: absolute; left: 2px; top: 0; color: #94a3b8; }
.mbn-legend-veh .mbn-legend-note { padding-left: 0; flex-basis: auto; margin-top: 2px; }

/* v1.7.67 混みやすい区間 */
.mbn-app .mbn-chip.is-trend { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }

/* v1.7.69 向きが分からないときは矢印を隠す */
.mbn-v-arrow.is-none { display: none; }

/* v1.7.73 乗車モード：これから通るバス停の近くのお店 */
.mbn-rideview .mbn-rv-way { list-style: none; margin: 2px 0 6px !important; padding: 0 0 0 32px; }
.mbn-rideview .mbn-rv-way .mbn-sp { margin: 0; }

/* v1.7.69→75 進行方向の矢印：路線の線（同じ色）と見分けやすいよう、黒っぽい色に白い縁・少し大きく */
.mbn-v-arrow { inset: -15px; }
.mbn-v.is-focus .mbn-v-arrow { inset: -16px; }
.mbn-v-arrow::before {
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid #111827;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.mbn-v.is-focus .mbn-v-arrow::before { border-left-width: 9px; border-right-width: 9px; border-bottom-width: 14px; }

/* v1.7.76 ホーム画面に追加 */
.mbn-app .mbn-a2hs { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 34px 10px 10px; border: 1px solid #bfdbfe; border-radius: 14px; background: #eff6ff; }
.mbn-app .mbn-a2hs img { flex: none; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mbn-app .mbn-a2hs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mbn-app .mbn-a2hs-t b { font-size: 14px; color: #0f172a; }
.mbn-app .mbn-a2hs-t small { font-size: 12px; color: #475569; }
.mbn-app .mbn-a2hs .mbn-btn { flex: none; min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 700; }
.mbn-app .mbn-a2hs-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; background: none; color: #64748b; font-size: 18px; cursor: pointer; border-radius: 50%; }
.mbn-app .mbn-a2hs-how { display: flex; align-items: center; gap: 12px; margin: 10px 14px; }
.mbn-app .mbn-a2hs-how img { border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.mbn-app .mbn-a2hs-how p { margin: 0 !important; }
.mbn-app .mbn-a2hs-steps { margin: 6px 14px 10px 34px !important; padding: 0; font-size: 14px; line-height: 1.7; }
.mbn-app .mbn-a2hs-steps li { margin: 4px 0; }
.mbn-a2hs-share { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; position: relative; vertical-align: -2px; margin: 0 2px; }
.mbn-a2hs-share::before { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 11px; background: currentColor; transform: translateX(-50%); }
.mbn-a2hs-share::after { content: ""; position: absolute; left: 50%; top: -7px; width: 6px; height: 6px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateX(-50%) rotate(45deg); }
.mbn-app .mbn-a2hs { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "i t" "b b"; row-gap: 8px; }
.mbn-app .mbn-a2hs img { grid-area: i; }
.mbn-app .mbn-a2hs-t { grid-area: t; }
.mbn-app .mbn-a2hs .mbn-btn { grid-area: b; width: 100%; justify-content: center; }
@media (min-width: 520px) { .mbn-app .mbn-a2hs { grid-template-columns: 44px 1fr auto; grid-template-areas: "i t b"; } .mbn-app .mbn-a2hs .mbn-btn { width: auto; } }