/*
  Hiroshima Bus Live - stylesheet
  v9.02 CSS整理版

  方針:
  - 現在の画面デザインとcascade順序を維持
  - 同一selector/contextで後続宣言に上書きされる同一propertyのみ整理
  - 過去バージョン別の履歴コメントはREADME/CODE_AUDITへ集約
  - 30系統、各社方向幕、スマホ縦UI、popup、経路表示の仕様は変更しない
*/

*{box-sizing:border-box;} html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;}
body{display:grid;grid-template-rows:auto auto auto 1fr;background:#f3f6f9;}
header{display:flex;justify-content:space-between;align-items:center;background:#fff;}
h1{margin:0;} header p{color:#64748b;margin:2px 0 0;}.status{text-align:right;}.status strong{display:block;}.status span{font-size:11px;color:#64748b;}

.stop-search-inner{display:flex;gap:8px;align-items:center;}.stop-search-inner label{font-weight:700;font-size:13px;white-space:nowrap;}
.autocomplete-wrap{position:relative;flex:1;max-width:420px;}.autocomplete-wrap input{width:100%;border:1px solid #bfc9d5;border-radius:7px;background:#fff;}
.stop-search button{padding:9px 14px;border:0;border-radius:7px;background:#172033;color:#fff;cursor:pointer;}
.suggestions{display:none;position:absolute;z-index:2000;top:39px;left:0;right:0;background:#fff;border:1px solid #cbd5e1;border-radius:7px;max-height:260px;overflow:auto;box-shadow:0 5px 18px #0002;}
.suggestions.show{display:block;}.suggestion{padding:8px 10px;cursor:pointer;border-bottom:1px solid #eef2f6;font-size:13px;}.suggestion:hover{background:#f1f5f9;}.suggestion small{display:block;color:#64748b;}
.selected-stop{font-size:12px;font-weight:700;}
.arrivals{display:flex;overflow-x:auto;}.arrival-card{min-width:220px;border:1px solid #dce3ea;border-radius:9px;}
.arrival-card .mins{font-weight:800;}.arrival-card .clock{font-size:11px;color:#64748b;margin-left:5px;}.arrival-card .dest{font-weight:700;margin-top:3px;}.arrival-card .route{font-size:12px;}.arrival-card .agency{font-size:10px;color:#64748b;margin-top:4px;}.arrival-card .delay{font-size:11px;margin-top:4px;}.live{font-size:10px;background:#e8f5e9;border-radius:999px;padding:2px 6px;margin-left:5px;}
.arrival-empty{font-size:12px;color:#64748b;padding:5px 0;}
.toolbar{display:flex;flex-wrap:wrap;gap:8px 15px;padding:7px 14px;border-bottom:1px solid #dce3ea;font-size:12px;}.mapsearch{margin-left:auto;}.mapsearch input{padding:5px 7px;border:1px solid #cbd5e1;border-radius:6px;}
#message{color:#b45309;} main{display:grid;grid-template-columns:minmax(0,1fr) 320px;}#panel{overflow:auto;border-left:1px solid #dce3ea;padding:14px;}
.empty{color:#64748b;font-size:12px;line-height:1.6;}.detail h2{margin:0;}.headsign{font-weight:700;margin:5px 0;}.via{font-size:12px;color:#64748b;}.badge{display:inline-block;border:1px solid #d6dee8;border-radius:999px;padding:2px 7px;font-size:10px;margin:5px 4px 5px 0;}
.info{width:100%;border-collapse:collapse;font-size:12px;}.info th,.info td{border-bottom:1px solid #eef2f6;text-align:left;}.info th{width:75px;color:#64748b;font-weight:500;}
.stops{list-style:none;padding:0;margin:8px 0 0 6px;border-left:2px solid #cbd5e1;}.stops li{padding:0 0 8px 14px;font-size:11px;}.time{color:#64748b;margin-left:4px;}
.bus-marker{border-radius:50%;background:#fff;display:grid;place-items:center;}.bus-marker.dim{opacity:.25;}
@media(max-width:800px){body{grid-template-rows:auto auto auto 1fr;}.stop-search-inner{flex-wrap:wrap;}.autocomplete-wrap{max-width:none;min-width:200px;}.arrivals{padding-bottom:2px;}main{grid-template-columns:1fr;grid-template-rows:minmax(320px,55vh) auto;}#panel{border-left:0;border-top:1px solid #dce3ea;max-height:38vh;}.mapsearch{width:100%;margin-left:0;}}


.destination-filters{

  flex-wrap:wrap;

  
}


/* v4.1: 行先候補が多い停留所向けの折り返し表示 */
.destination-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:7px;
  width:100%;
  margin-top:8px;
  max-height:220px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 4px 4px 0;
}

.destination-filter{
  width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.35;
  text-align:center;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#172033;
  border-radius:8px;
  padding:7px 8px;
  font-size:12px;
  cursor:pointer;
}

.destination-filter:hover{
  background:#f1f5f9;
}

.destination-filter.active{
  background:#172033;
  color:#fff;
  border-color:#172033;
}

@media(max-width:800px){
  .destination-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:190px;
  }
}

@media(max-width:460px){
  .destination-filters{
    grid-template-columns:1fr;
    max-height:180px;
  }
}


.destination-controls{margin-top:8px;}
.destination-controls-row{display:flex;gap:8px;align-items:center;}
.destination-controls-row input{flex:1;min-width:0;max-width:360px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;}
.secondary-button{border:1px solid #cbd5e1!important;background:#fff!important;color:#172033!important;padding:7px 10px!important;border-radius:7px!important;}
.selected-destination-label{margin-top:6px;font-size:12px;font-weight:700;}
.destination-filters.collapsed{display:none;}
.destination-filter .count{display:inline-block;margin-left:4px;font-size:10px;opacity:.7;}
.destination-filter .next{display:block;margin-top:2px;font-size:10px;opacity:.72;}
@media(max-width:600px){.destination-controls-row{flex-wrap:wrap;}.destination-controls-row input{max-width:none;width:100%;}}


/* v4.4 arrival-card interaction */
.arrival-card-button{
  appearance:none;
  font:inherit;
  color:inherit;
  text-align:left;

  border:1px solid #dce3ea;
}
.arrival-card-button:hover{
  background:#f8fafc;
  border-color:#94a3b8;
}
.arrival-card-button:focus-visible{
  outline:3px solid rgba(23,32,51,.22);
  outline-offset:2px;
}


/* v4.6: 選択中バスの強調 */
.focused-marker .bus-marker{
  transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(23,32,51,.18),0 3px 12px rgba(0,0,0,.35);
  z-index:9999;
}


/* v4.7: 現在向かっている停留所と指定停留所への到着目安 */
.next-stop-status{
  margin-top:6px;
  padding:6px 7px;
  border-radius:6px;
  background:#f1f5f9;
  font-size:11px;
  font-weight:700;
}
.selected-stop-status{
  margin-top:4px;
  font-size:11px;
  color:#475569;
}


/* v4.9: 初期表示へ戻る */
.selected-stop-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.reset-view-button{
  border:1px solid #cbd5e1 !important;
  background:#fff !important;
  color:#172033 !important;
  padding:7px 11px !important;
  border-radius:7px !important;
  cursor:pointer;
  font-size:12px;
}
.reset-view-button:hover{
  background:#f1f5f9 !important;
}


/* v5.0: 多数事業者対応 */
.toolbar{
  align-items:flex-start;
}
.agency-filter-head{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.agency-filter-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  flex:1 1 100%;
}
.agency-filter-list label{
  white-space:nowrap;
}
.mini-filter-button{
  border:1px solid #cbd5e1;
  background:#fff;
  color:#172033;
  border-radius:6px;
  padding:4px 7px;
  cursor:pointer;
  font-size:11px;
}
@media(max-width:800px){
  .agency-filter-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:460px){
  .agency-filter-list{
    grid-template-columns:1fr;
  }
}


/* v5.1: VehiclePosition freshness */
.position-meta{
  margin-top:6px;
  padding-top:5px;
  border-top:1px solid #eef2f6;
  font-size:10px;
}
.position-fresh{
  color:#166534;
}
.position-warn{
  color:#b45309;
}
.position-stale{
  color:#b91c1c;
  font-weight:700;
}
.position-unknown{
  color:#64748b;
}


/* v5.3: 到着予定カードを一画面内に収める */
.arrivals{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px;

  
  width:100%;
  padding-top:8px;
}

.arrival-card{
  min-width:0 !important;
  width:100%;
  max-width:none;
  padding:8px 9px;
}

.arrival-card .mins{
  font-size:20px;
}

.arrival-card .dest{
  font-size:13px;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.arrival-card .route,
.arrival-card .agency,
.arrival-card .delay,
.arrival-card .next-stop-status,
.arrival-card .selected-stop-status{
  overflow-wrap:anywhere;
}

@media (min-width:1400px){
  .arrivals{
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
}

@media (min-width:1100px) and (max-width:1399px){
  .arrivals{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}

@media (min-width:850px) and (max-width:1099px){
  .arrivals{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (min-width:600px) and (max-width:849px){
  .arrivals{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:380px) and (max-width:599px){
  .arrivals{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:379px){
  .arrivals{
    grid-template-columns:1fr;
  }
}


/* v5.4: 到着予定が多くても地図を画面内に残す */
.stop-search{
  min-height:0;
}

.arrivals{

  

  
  padding-right:4px;
  scrollbar-gutter:stable;
}

/* 一覧が多い場合でもメイン地図領域を確保 */
main{
  min-height:360px;
}

/* スクロール時もカード幅を崩さない */
.arrivals > *{
  min-width:0;
}

/* 到着一覧のスクロールバーを見やすく */
.arrivals::-webkit-scrollbar{
  width:10px;
}
.arrivals::-webkit-scrollbar-track{
  background:#eef2f6;
  border-radius:8px;
}
.arrivals::-webkit-scrollbar-thumb{
  background:#94a3b8;
  border-radius:8px;
  border:2px solid #eef2f6;
}

@media (min-width:1400px){

}

@media (max-width:1099px){

}

@media (max-width:800px){


  main{
    min-height:330px;
  }
}

@media (max-width:460px){

}


.arrival-scroll-note{
  margin-top:5px;
  font-size:10px;
  color:#64748b;
}


/* v5.5: 到着一覧の最下段が切れないように修正 */
.arrivals{
  box-sizing:border-box;

  

  
  scroll-padding-bottom:18px;
}

/* グリッド最終行の下側に必ず余白を確保 */
.arrivals::after{
  content:"";
  display:block;
  height:8px;
  grid-column:1 / -1;
}

.arrival-card{
  box-sizing:border-box;
  align-self:stretch;
}

/* 一覧と事業者フィルターの境界を明確化 */
.toolbar{
  position:relative;
  z-index:2;
  background:#fff;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid #e2e8f0;
}

@media (min-width:1400px){
  .arrivals{max-height:310px;}
}
@media (max-width:1099px){
  .arrivals{max-height:280px;}
}
@media (max-width:800px){

}
@media (max-width:460px){
  .arrivals{max-height:235px;}
}


/* v5.8: 選択車両マーカーを確実に可視化 */
.leaflet-marker-icon.focused-marker{
  z-index:10000 !important;
  opacity:1 !important;
}
.leaflet-marker-icon.focused-marker .bus-marker{
  transform:scale(1.45);
  opacity:1 !important;
  box-shadow:
    0 0 0 5px rgba(255,255,255,.92),
    0 0 0 8px rgba(23,32,51,.28),
    0 4px 14px rgba(0,0,0,.4);
}


/* v6.3 PC接近警告 */
.arrival-card-actions{margin-top:8px;}
.approach-watch-button{
  width:100%;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#172033;
  border-radius:7px;
  padding:7px 8px;
  font-size:11px;
  cursor:pointer;
}
.approach-watch-button.active{
  background:#172033;
  color:#fff;
  border-color:#172033;
}
.bus-alert-overlay[hidden]{display:none!important;}
.bus-alert-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(15,23,42,.60);
}
.bus-alert-dialog{
  width:min(520px,100%);
  background:#fff;
  border-radius:16px;
  padding:24px;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.bus-alert-icon{font-size:48px;}
.bus-alert-dialog h2{margin:8px 0 12px;font-size:24px;}
.bus-alert-body{line-height:1.7;}
.bus-alert-destination{font-size:20px;font-weight:800;}
.bus-alert-main{margin-top:12px;font-size:18px;}
.bus-alert-route{margin-top:8px;color:#64748b;font-size:12px;}
.bus-alert-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;}
.bus-alert-actions button{
  min-width:130px;
  padding:10px 14px;
  border:0;
  border-radius:8px;
  cursor:pointer;
}
#busAlertShowMap{background:#172033;color:#fff;}

/* v6.4: 到着予定カードと接近通知ボタンの表示修正 */
.stop-search{overflow:visible;}
.arrivals{min-height:150px;max-height:300px;grid-auto-rows:max-content;align-items:start;align-content:start;padding-bottom:14px!important;}
.arrival-card{min-height:138px;overflow:visible;display:block;}
.stop-search .arrival-card .approach-watch-button{display:block;width:100%;height:auto;min-height:32px;margin-top:8px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:7px;background:#f8fafc;color:#172033;font-size:11px;font-weight:600;line-height:1.35;white-space:normal;cursor:pointer;}
.stop-search .arrival-card .approach-watch-button:hover{background:#eef2f6;}
.stop-search .arrival-card .approach-watch-button.active{background:#172033;color:#fff;border-color:#172033;}
.arrivals:has(.arrival-card:nth-child(1):last-child),.arrivals:has(.arrival-card:nth-child(2):last-child),.arrivals:has(.arrival-card:nth-child(3):last-child){min-height:0;}
@media(max-width:800px){.arrivals{min-height:0;max-height:255px;}.arrival-card{min-height:132px;}}


/* v6.5: 到着予定カード下部が切れる根本原因を修正 */

/*
  body の固定高グリッドで stop-search が縮められていたため、
  ページ全体は必要に応じて縦へ伸びるようにする。
*/
html{
  min-height:100%;
  height:auto;
}

body{
  height:auto !important;
  min-height:100%;

}

/* 到着予定領域は中身より小さく縮ませない */
.stop-search{
  min-height:auto !important;
  overflow:visible !important;
}

/*
  一覧はカード1段分を必ず完全表示。
  多数ある場合は最大約2段分で内部スクロール。
*/
.arrivals{

  
  overflow-y:auto !important;
  overflow-x:hidden !important;
  grid-auto-rows:max-content !important;
  align-content:start !important;

}

/* カードの高さを固定・圧縮しない */
.arrival-card{
  height:max-content !important;
  min-height:0 !important;
  overflow:visible !important;
  align-self:start !important;
  padding-bottom:10px !important;
}

/* 通知ボタンまでカード寸法に含める */
.arrival-card-actions{
  display:block !important;
  position:static !important;
  margin-top:8px !important;
  padding:0 !important;
}

.stop-search .arrival-card .approach-watch-button{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-height:34px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* 一覧と事業者欄が重ならないよう完全に通常フローへ戻す */
.toolbar{
  position:relative !important;
  margin-top:0 !important;
  z-index:1 !important;
  flex-shrink:0;
}

/* 地図は十分な高さを確保 */
main{

  height:520px;
}

@media(max-width:800px){
  .arrivals{
    max-height:320px !important;
  }

  main{
    height:auto;
    min-height:340px !important;
  }
}


/* v6.7: 選択中バスの一時的な位置情報欠落を保持 */
.position-hold{
  margin-top:6px;
  padding:5px 7px;
  border-radius:6px;
  background:#fff7ed;
  color:#9a3412;
  font-size:11px;
  font-weight:700;
}


/* v6.8: 地図上で選択したバスの追従 */
.popup-next-stop{
  margin-top:5px;
  font-weight:700;
  font-size:12px;
}

.reset-view-button{
  display:inline-block !important;
}


/* v6.9 停留所時刻一覧の中に現在のバス位置を表示 */
.stops .bus-between-stops{
  list-style:none;
  margin:3px 0 3px -18px;
  padding:4px 4px 4px 12px;
  border-left:2px solid #64748b;
}
.bus-position-badge{
  display:inline-block;

  border-radius:999px;
  background:#172033;
  color:#fff;

  font-weight:700;
}
.stops .bus-between-stops small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:10px;
}
.stops .current-stop{
  font-weight:700;
}


/* v6.11 次停留所GPS推定 */
.next-stop-source{
  margin-top:2px;
  font-size:10px;
  color:#64748b;
}


/* v6.12: GPS推定時も右側停留所一覧に現在位置を明確表示 */
.stops .bus-between-stops{
  margin-top:5px;
  margin-bottom:5px;
}
.bus-position-badge{
  font-size:12px;
  padding:4px 8px;
}


/* v6.14: 右側タイムテーブルを現在位置中心へ自動スクロール */
.stops .bus-between-stops,
.stops .current-stop{
  scroll-margin-block:45%;
}

.stops .bus-between-stops{
  position:relative;
}


/* v6.15: timetable centering target visibility */
#panel{scroll-behavior:auto;}
#tripDetail .bus-between-stops{
  scroll-margin-top:0;
  scroll-margin-bottom:0;
}


/* v6.16: 到着予定カードの行き先後方に路線番号 */


/* v6.17: 路線番号を「走行中」のようなバッジ表示に */
.dest-route-no{
  display:inline-block;
  margin-left:6px;
  padding:2px 7px;
  border-radius:999px;
  background:#e8f5e9;
  color:#166534;
  border:1px solid #bbf7d0;
  font-size:.78em;
  font-weight:800;
  line-height:1.35;
  vertical-align:middle;
  white-space:nowrap;
}


/* =========================================================
   FINAL UI REVIEW — v7.0
   Existing functional rules are preserved; this block is the
   final visual/layout layer.
   ========================================================= */
:root{
  --ink:#172033; --muted:#64748b; --line:#dbe3ec; --soft:#f5f7fa;
  --panel:#fff; --accent:#176b50; --accent-soft:#e8f5ef;
  --warn:#b45309; --radius:12px; --shadow:0 5px 18px rgba(15,23,42,.08);
}

body{grid-template-rows:auto auto auto minmax(430px,1fr)!important;}
header{
  padding:9px 18px;border-bottom:1px solid var(--line);
  z-index:20
;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-icon{
  width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  background:var(--ink);font-size:22px
;}
h1{font-size:18px;letter-spacing:.01em;}
header p{font-size:11px;margin-top:3px;}
.status strong{font-size:15px;}.status span{display:block;margin-top:2px;}

.stop-search{
  padding:10px 16px 11px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.04);
  border-bottom:1px solid var(--line)
;}
.stop-search-inner{max-width:980px;}
.stop-search-inner label,.section-caption{font-size:13px;font-weight:800;}
.step-no{
  display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:11px;margin-right:4px
;}
.autocomplete-wrap input,.destination-controls-row input,.mapsearch input{
  border:1px solid #cbd5e1;border-radius:9px;outline:none;
  transition:border-color .15s,box-shadow .15s
;}
.autocomplete-wrap input{height:40px;padding:8px 12px;}
.autocomplete-wrap input:focus,.destination-controls-row input:focus,.mapsearch input:focus{
  border-color:#64748b;box-shadow:0 0 0 3px rgba(100,116,139,.12)
;}
.primary-button,#showArrivals{
  min-height:40px;padding:8px 16px!important;border-radius:9px!important;
  background:var(--ink)!important;font-weight:750
;}
.selected-stop-row{margin-top:4px;}
.selected-stop{margin-top:4px;color:var(--accent);}
.reset-view-button{font-weight:700;}

.destination-controls{padding-top:7px;border-top:1px solid #eef2f6;}
.section-caption{margin-bottom:7px;}
.destination-filters{
  max-height:150px!important;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important;
  padding:3px 3px 5px!important;}
.destination-filter{min-height:38px;border-radius:9px!important;}
.destination-filter.active{background:var(--ink)!important;}
.selected-destination-label{color:var(--accent);}

.arrival-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding-top:8px;border-top:1px solid #eef2f6;font-size:13px
;}
.arrival-scroll-note{margin:0!important;font-size:10px!important;}
.arrivals{
  max-height:258px!important;min-height:0!important;padding:7px 6px 14px 0!important;
  gap:7px!important;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))!important;}
.arrival-card{
  position:relative;border:1px solid var(--line)!important;border-radius:11px!important;
  padding:10px 11px!important;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.04);
  transition:transform .12s,box-shadow .12s,border-color .12s
;}
.arrival-card-button:hover{
  transform:translateY(-1px);box-shadow:var(--shadow);border-color:#94a3b8!important;}
.arrival-card .mins{font-size:23px!important;line-height:1;font-variant-numeric:tabular-nums;}
.arrival-card .clock{font-variant-numeric:tabular-nums;}
.live{
  display:inline-block;background:var(--accent-soft)!important;color:#166534;
  border:1px solid #bbf7d0;font-weight:800
;}
.arrival-card .dest{font-size:14px!important;margin-top:7px!important;}
.dest-route-no{
  background:var(--accent-soft)!important;color:#166534!important;border:1px solid #bbf7d0!important;
  padding:2px 7px!important;}
.next-stop-status{background:#f4f7fa!important;border-left:3px solid #94a3b8;}
.selected-stop-status{font-weight:700;color:#334155!important;}
.arrival-card .route{margin-top:6px;color:#334155;}
.arrival-card .agency{font-size:10.5px!important;}
.approach-watch-button{border-radius:8px!important;}
.approach-watch-button.active{background:var(--ink)!important;}

.toolbar{
  min-height:42px;padding:6px 14px!important;margin:0!important;align-items:center!important;
  border-top:0!important;box-shadow:none
;}
.agency-settings{flex:1;min-width:220px;}
.agency-settings summary{
  cursor:pointer;font-weight:750;font-size:12px;list-style:none;display:inline-flex;align-items:center;
  padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff
;}
.agency-settings summary::-webkit-details-marker{display:none;}
.agency-settings summary::after{content:"▾";margin-left:7px;color:var(--muted);}
.agency-settings[open] summary::after{content:"▴";}
.agency-settings .agency-filter-head{margin-top:7px;}
.agency-settings .agency-filter-list{
  padding:8px;margin-top:5px;border:1px solid var(--line);border-radius:10px;background:#f8fafc
;}
.mapsearch{margin-left:auto!important;color:var(--muted);font-size:11px;}
.mapsearch input{height:31px;background:#fff;}
#message{font-size:11px;}

main{
  height:auto!important;min-height:430px!important;grid-template-columns:minmax(0,1fr) 330px!important;
  margin:0;background:#fff;border-top:1px solid var(--line)
;}
#map{min-height:430px;}
#panel{
  padding:0!important;background:#fff;
  scrollbar-gutter:stable
;}
#panel>.empty{padding:22px;}
.detail{padding:16px 16px 26px;}
.detail h2{font-size:17px;}.headsign{font-size:14px;}
.info th,.info td{padding:6px 3px;}
#tripDetail>strong{
  display:block;position:sticky;top:-1px;z-index:5;background:#fff;
  padding:9px 0 7px;border-bottom:1px solid #eef2f6
;}
.stops{margin-top:9px!important;}
.stops li{font-size:11.5px!important;padding-bottom:9px!important;}
.bus-position-badge{
  background:var(--ink)!important;box-shadow:0 2px 7px rgba(15,23,42,.14)
;}
.bus-marker{
  width:34px;height:34px;font-size:19px;border:2px solid #fff;
  box-shadow:0 3px 9px rgba(15,23,42,.35)
;}
.leaflet-control-zoom a{color:var(--ink)!important;}

.bus-alert-dialog{border-radius:18px!important;}
.bus-alert-dialog h2{color:var(--ink);}
#busAlertShowMap{background:var(--ink)!important;}

@media(min-width:1500px){
  main{grid-template-columns:minmax(0,1fr) 360px!important;}
  .arrivals{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
}
@media(max-width:900px){
  header{padding:8px 11px;}.brand-icon{width:36px;height:36px;}
  .stop-search{padding:9px 10px;}
  .stop-search-inner{display:grid;grid-template-columns:auto 1fr;gap:7px;}
  .stop-search-inner label{grid-column:1/-1;}
  #showArrivals{min-width:112px;}
  .arrivals{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:245px!important;}
  .toolbar{padding:6px 10px!important;}
  main{

    
    min-height:650px!important;}
  #map{min-height:360px;}
  #panel{max-height:none!important;border-top:1px solid var(--line);}
}
@media(max-width:520px){
  body{display:block!important;}
  header{position:relative;}
  h1{font-size:15px;}.brand-icon{display:none;}
  header p{font-size:10px;}
  .status strong{font-size:13px;}
  .stop-search-inner{grid-template-columns:1fr;}
  .stop-search-inner label,#showArrivals,.autocomplete-wrap{grid-column:1;}
  #showArrivals{width:100%;}
  .selected-stop-row{align-items:flex-start;}
  .destination-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:140px!important;}
  .destination-controls-row{display:grid;grid-template-columns:1fr auto;}

  

  .toolbar{display:block!important;}
  .mapsearch{margin-top:7px!important;align-items:center;}
  .mapsearch input{flex:1;min-width:0;}

  #map{min-height:360px;}
  #panel{min-height:320px;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}


/* v7.3: 右側タイムテーブルの現在位置表示の横ズレ修正 */


/* 通常停留所と同じ本文開始位置に揃える */
#tripDetail .stops .bus-between-stops{
  list-style:none !important;
  position:relative;
  margin:5px 0 7px 0 !important;
  padding:4px 0 4px 16px !important;

  min-height:34px;
}

/* 停留所一覧の縦ライン */
#tripDetail .stops .bus-between-stops::before{
  content:"";
  position:absolute;
  left:1px;
  top:-7px;
  bottom:-7px;
  width:2px;
  background:#cbd5e1;
}

/* 現在位置を示す丸印を縦ライン上に配置 */
#tripDetail .stops .bus-between-stops::after{
  content:"";
  position:absolute;
  left:-3px;
  top:11px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#172033;
  box-shadow:0 0 0 3px #fff;
}

/* 「現在のバス位置」ラベルを停留所名と同じ左位置へ */
#tripDetail .bus-position-badge{
  display:inline-block;
  margin:0 !important;
  padding:3px 8px !important;
  border-radius:999px;
  vertical-align:middle;
  white-space:nowrap;
}

/* 「○○ → ○○」などの補足もバッジ下で揃える */
#tripDetail .stops .bus-between-stops small{
  display:block;
  margin:4px 0 0 1px !important;
  padding:0 !important;
  line-height:1.35;
}

/* 旧CSSの負のマージンが残っていても打ち消す */
#tripDetail .stops .bus-between-stops{
  margin-left:0 !important;
  transform:none !important;
}


/* v7.4: バス選択カードのhover/focus表示改善 */
.arrival-card-button{
  cursor:pointer;
  color:#172033 !important;
  background:#fff !important;
  border:1px solid #dbe3ec !important;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease !important;
}

/* hoverで内容が消えないよう、背景だけを明確に変える */
@media (hover:hover) and (pointer:fine){
  .arrival-card-button:hover{
    background:#eef6f3 !important;
    border-color:#5d9b86 !important;
    box-shadow:0 6px 18px rgba(15,23,42,.12) !important;
    transform:translateY(-1px);
    color:#172033 !important;
    opacity:1 !important;
  }

  .arrival-card-button:hover .mins,
  .arrival-card-button:hover .clock,
  .arrival-card-button:hover .dest,
  .arrival-card-button:hover .route,
  .arrival-card-button:hover .agency,
  .arrival-card-button:hover .next-stop-status,
  .arrival-card-button:hover .selected-stop-status,
  .arrival-card-button:hover .delay{
    color:inherit !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .arrival-card-button:hover .dest-route-no{
    background:#dff2e9 !important;
    color:#166534 !important;
    border-color:#86c7ad !important;
  }

  .arrival-card-button:hover .live{
    background:#dcfce7 !important;
    color:#166534 !important;
    border-color:#86efac !important;
  }

  .arrival-card-button:hover .approach-watch-button{
    background:#fff !important;
    color:#172033 !important;
    border-color:#94a3b8 !important;
  }

  .arrival-card-button:hover .approach-watch-button.active{
    background:#172033 !important;
    color:#fff !important;
    border-color:#172033 !important;
  }
}

/* キーボード操作でも同じように選択可能であることを示す */
.arrival-card-button:focus-visible{
  outline:none !important;
  background:#eef6f3 !important;
  border-color:#176b50 !important;
  box-shadow:0 0 0 3px rgba(23,107,80,.18),0 6px 18px rgba(15,23,42,.10) !important;
  color:#172033 !important;
}

/* タップ中も消えない */
.arrival-card-button:active{
  background:#e2efe9 !important;
  color:#172033 !important;
  opacity:1 !important;
  transform:translateY(0);
}


/* v7.5: スマホ用「上へ」フローティングボタン */
.mobile-back-to-top{
  display:none;
}

@media(max-width:520px){
  .mobile-back-to-top{
    position:fixed;
    right:14px;
    bottom:18px;
    z-index:99990;
    min-width:58px;
    min-height:48px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:999px;
    background:rgba(23,32,51,.94);
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:1.1;
    box-shadow:0 6px 18px rgba(15,23,42,.28);
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility .16s ease;
    align-items:center;
    justify-content:center;
    gap:3px;
  }

  .mobile-back-to-top span:first-child{
    font-size:18px;
    line-height:1;
  }

  .mobile-back-to-top.show{
    display:flex;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-back-to-top{
    transition:none !important;
  }
}


/* v7.8 広島交通・方向幕イメージ */
.leaflet-popup-content:has(.hk-sign){

  min-width:320px;
}

.leaflet-popup-content-wrapper:has(.hk-sign){
  padding:0;
  overflow:hidden;
  border-radius:12px;
  border:2px solid #0b6b35;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}

.hk-sign{
  background:#fff;
  color:#172033;
  min-width:320px;
}

.hk-sign-buscenter{
  border-color:#0b6b35;
}

.hk-sign-top,
.hk-detail-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.hk-sign-buscenter .hk-sign-top{
  background:#0b6b35;
  padding:12px 14px 7px;
}

.hk-route-no{
  display:inline-block;
  min-width:62px;
  padding:4px 10px;
  border-radius:5px;
  background:#fff;
  color:#0b6b35;
  font-size:26px;
  font-weight:900;
  line-height:1;
  text-align:center;
  border:1px solid rgba(255,255,255,.85);
}

.hk-via{
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
}

.hk-destination{
  padding:4px 14px 13px;
  background:#0b6b35;
  color:#fff;
  font-size:31px;
  font-weight:900;
  line-height:1.18;
  letter-spacing:.02em;
}

.hk-yuki{
  font-size:15px;
  margin-left:5px;
  white-space:nowrap;
}

.hk-info{
  padding:12px 14px 14px;
  background:#fff;
  color:#172033;
}

.hk-next-label{
  font-size:12px;
  font-weight:700;
  color:#475569;
}

.hk-next-stop{
  margin-top:2px;
  font-size:24px;
  font-weight:900;
}

.hk-source{
  display:inline-block;
  margin-top:5px;
  padding:3px 7px;
  border-radius:5px;
  border:1px solid #17823e;
  color:#0b6b35;
  background:#f5fff8;
  font-size:11px;
  font-weight:700;
}

.hk-last-position{
  margin-top:9px;
  padding-top:7px;
  border-top:1px solid #e5e7eb;
  font-size:11px;
  color:#475569;
}

/* 広島交通でも「バスセンター経由」でない場合は白ベース */
.hk-sign:not(.hk-sign-buscenter) .hk-sign-top{
  background:#fff;
  padding:11px 14px 5px;
}
.hk-sign:not(.hk-sign-buscenter) .hk-route-no{
  background:#0b6b35;
  color:#fff;
}
.hk-sign:not(.hk-sign-buscenter) .hk-destination{
  background:#fff;
  color:#172033;
  border-bottom:1px solid #e5e7eb;
}
.hk-sign:not(.hk-sign-buscenter) .hk-via{
  color:#0b6b35;
}

/* 右側詳細 */
.hk-detail{
  padding-top:0 !important;
}

.hk-detail-sign{
  margin:0 -16px 12px;
  padding:12px 16px 14px;
  background:#fff;
  border-bottom:1px solid #dbe3ec;
}

.hk-detail-buscenter .hk-detail-sign{
  background:#0b6b35;
  color:#fff;
}

.hk-detail .hk-route-no{
  min-width:52px;
  font-size:20px;
  padding:4px 8px;
}

.hk-detail:not(.hk-detail-buscenter) .hk-route-no{
  background:#0b6b35;
  color:#fff;
}

.hk-detail-destination{
  margin-top:8px;
  font-size:25px;
  font-weight:900;
  line-height:1.15;
}

.hk-detail-destination span{
  font-size:13px;
}

.hk-detail .badge{
  margin-bottom:8px;
}

.hk-detail-buscenter .badge{
  background:#eaf7ef;
  color:#0b6b35;
}

/* スマホ */
@media(max-width:520px){
  .leaflet-popup-content:has(.hk-sign){
    min-width:260px;
  }
  .hk-sign{
    min-width:260px;
  }
  .hk-route-no{
    min-width:50px;
    font-size:21px;
  }
  .hk-via{
    font-size:12px;
  }
  .hk-destination{
    font-size:25px;
  }
  .hk-next-stop{
    font-size:20px;
  }
}


/* v7.9 広島交通「基町経由」旧方向幕ブルーデザイン */
:root{
  --hk-motomachi-blue:#0638a8;
  --hk-motomachi-blue-dark:#052b83;
}

/* 地図吹き出し */
.leaflet-popup-content-wrapper:has(.hk-sign-motomachi){
  border-color:var(--hk-motomachi-blue) !important;
}

.hk-sign-motomachi .hk-sign-top{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
  padding:12px 14px 7px !important;
}

.hk-sign-motomachi .hk-route-no{
  background:#fff !important;
  color:var(--hk-motomachi-blue) !important;
  border:2px solid #fff !important;
  font-weight:900;
}

.hk-sign-motomachi .hk-via{
  display:inline-block;
  padding:4px 12px;
  border:2px solid #fff;
  border-radius:4px;
  color:#fff !important;
  font-size:16px;
  font-weight:900;
  line-height:1.1;
}

.hk-sign-motomachi .hk-destination{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
  color:#fff !important;
  padding-top:5px;
  font-size:32px;
  letter-spacing:.04em;
}

.hk-sign-motomachi .hk-info{
  border-top:2px solid var(--hk-motomachi-blue);
}

.hk-sign-motomachi .hk-source{
  color:var(--hk-motomachi-blue) !important;
  border-color:var(--hk-motomachi-blue) !important;
  background:#f7f9ff !important;
}

/* 右側車両詳細も基町経由は青い方向幕 */
.hk-detail-motomachi .hk-detail-sign{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
  color:#fff !important;
  border-bottom:0 !important;
}

.hk-detail-motomachi .hk-route-no{
  background:#fff !important;
  color:var(--hk-motomachi-blue) !important;
  border-color:#fff !important;
}

.hk-detail-motomachi .hk-via{
  display:inline-block;
  padding:4px 10px;
  border:2px solid #fff;
  border-radius:4px;
  color:#fff !important;
  font-weight:900;
}

.hk-detail-motomachi .badge{
  background:#e8efff !important;
  color:var(--hk-motomachi-blue) !important;
}

.hk-detail-motomachi .info tr:first-child th,
.hk-detail-motomachi .info tr:first-child td{
  border-top-color:#c9d7ff;
}

/* スマホでも方向幕の比率を保つ */
@media(max-width:520px){
  .hk-sign-motomachi .hk-via{
    font-size:12px;
    padding:3px 8px;
  }
  .hk-sign-motomachi .hk-destination{
    font-size:25px;
  }
}


/* =========================================================
   v7.10 広島交通「立町・本川町経由」旧方向幕デザイン
   白地＋黒文字、経由表示のみ青
   ========================================================= */
:root{
  --hk-tate-blue:#143da8;
  --hk-tate-blue-dark:#0c2f8e;
}

/* 地図吹き出し本体 */
.leaflet-popup-content-wrapper:has(.hk-sign-tate-honkawa){
  border-color:var(--hk-tate-blue) !important;
  background:#fff !important;
}

.hk-sign-tate-honkawa{
  background:#fff !important;
  color:#111827 !important;
}

/* 上段 */
.hk-sign-tate-honkawa .hk-sign-top{
  background:#fff !important;
  padding:12px 14px 8px !important;
  border-bottom:0 !important;
}

.hk-sign-tate-honkawa .hk-route-no{
  background:var(--hk-tate-blue) !important;
  color:#fff !important;
  border-color:var(--hk-tate-blue) !important;
  font-weight:900;
}

.hk-sign-tate-honkawa .hk-oldroad{
  display:inline-block;
  padding:4px 10px;
  border:2px solid #111827;
  border-radius:4px;
  background:#fff;
  color:#111827;
  font-size:17px;
  font-weight:900;
  line-height:1;
}

.hk-sign-tate-honkawa .hk-via{
  display:inline-block;
  padding:5px 10px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--hk-tate-blue),var(--hk-tate-blue-dark));
  color:#fff !important;
  border:1px solid var(--hk-tate-blue-dark);
  font-size:15px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.02em;
}

/* 行き先 */
.hk-sign-tate-honkawa .hk-destination{
  background:#fff !important;
  color:#111827 !important;
  padding:5px 14px 14px !important;
  font-size:32px;
  font-weight:900;
  border-bottom:2px solid var(--hk-tate-blue);
}

.hk-sign-tate-honkawa .hk-yuki{
  color:#111827 !important;
}

/* 下段情報 */
.hk-sign-tate-honkawa .hk-info{
  background:#fff !important;
  color:#111827 !important;
}

.hk-sign-tate-honkawa .hk-source{
  color:var(--hk-tate-blue) !important;
  border-color:var(--hk-tate-blue) !important;
  background:#f7f9ff !important;
}

/* 右側車両詳細 */
.hk-detail-tate-honkawa .hk-detail-sign{
  background:#fff !important;
  color:#111827 !important;
  border-bottom:2px solid var(--hk-tate-blue) !important;
}

.hk-detail-tate-honkawa .hk-route-no{
  background:var(--hk-tate-blue) !important;
  color:#fff !important;
  border-color:var(--hk-tate-blue) !important;
}

.hk-detail-tate-honkawa .hk-oldroad{
  display:inline-block;
  padding:4px 9px;
  border:2px solid #111827;
  border-radius:4px;
  color:#111827;
  background:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1;
}

.hk-detail-tate-honkawa .hk-via{
  display:inline-block;
  padding:4px 9px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--hk-tate-blue),var(--hk-tate-blue-dark));
  color:#fff !important;
  border:1px solid var(--hk-tate-blue-dark);
  font-weight:900;
}

.hk-detail-tate-honkawa .hk-detail-destination{
  color:#111827 !important;
}

.hk-detail-tate-honkawa .badge{
  background:#e9efff !important;
  color:var(--hk-tate-blue) !important;
}

/* スマホ */
@media(max-width:520px){
  .hk-sign-tate-honkawa .hk-oldroad{
    font-size:13px;
    padding:3px 7px;
  }

  .hk-sign-tate-honkawa .hk-via{
    font-size:11px;
    padding:4px 7px;
  }

  .hk-sign-tate-honkawa .hk-destination{
    font-size:25px;
  }
}


:root{
  --v8-navy:#071a3a;
  --v8-navy2:#0c234b;
  --v8-blue:#1647c8;
  --v8-line:#dce4ef;
  --v8-soft:#f6f8fb;
  --v8-text:#101828;
  --v8-muted:#667085;
  --v8-green:#16824b;
  --v8-shadow:0 8px 28px rgba(16,24,40,.12);
}

/* overall */
html,body{
  background:var(--v8-soft);
  color:var(--v8-text);
}
body{
  overflow-x:hidden;
}
header{
  min-height:62px;
  background:linear-gradient(100deg,var(--v8-navy),var(--v8-navy2)) !important;
  color:#fff !important;
  border-bottom:0 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
header h1, header h2, header strong, header small, header div{
  color:inherit;
}
button,input,select{
  border-radius:8px !important;
}
button{
  transition:background .15s ease,border-color .15s ease,transform .08s ease,box-shadow .15s ease;
}
button:hover{
  filter:none !important;
  box-shadow:0 2px 8px rgba(16,24,40,.12);
}
button:active{
  transform:translateY(1px);
}

/* search/control area: clean white card */
#controls,
.controls,
.search-area,
.top-controls{
  background:#fff !important;
  border-bottom:1px solid var(--v8-line) !important;
}

/* map + detail area */
#map{
  background:#e9eef4;
  border-radius:0;
}

/* Right panel becomes a proper vehicle-detail card on desktop */
#panel{
  background:#fff !important;
  border-left:1px solid var(--v8-line) !important;
  color:var(--v8-text);
}
#panel .detail{
  padding:18px !important;
}
#panel .detail h2{
  margin:0 0 6px;
  font-size:24px;
}
#panel .headsign{
  font-size:18px;
  font-weight:800;
}
#panel .badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:6px;
  font-weight:800;
}
#panel .info{
  width:100%;
  margin-top:12px;
  border-collapse:collapse;
}
#panel .info th,
#panel .info td{
  padding:8px 5px;
  border-bottom:1px solid #edf0f4;
}

/* Stop timetable: timeline visual */
#panel .stops,
#panel .stop-list,
#panel [class*="timetable"]{
  position:relative;
}
#panel .stop-row,
#panel [class*="stop-row"]{
  position:relative;
  border-bottom:1px solid #edf0f4;
}
.current-bus-position,
.current-position,
.bus-position-row{
  border-radius:7px !important;
}

/* Popup is intentionally compact: it must fit inside narrow maps */
.leaflet-popup{
  max-width:min(310px,calc(100vw - 34px)) !important;
}
.leaflet-popup-content-wrapper{
  border-radius:12px !important;
  box-shadow:var(--v8-shadow) !important;
  overflow:hidden;
}
.leaflet-popup-content{
  width:auto !important;
  max-width:290px !important;
  margin:12px 14px !important;
}
.leaflet-popup-content:has(.hk-sign){
  margin:0 !important;
  min-width:0 !important;
  width:min(290px,calc(100vw - 44px)) !important;
  max-width:290px !important;
}
.hk-sign{
  min-width:0 !important;
  width:100% !important;
  max-width:290px !important;
}
.hk-sign-top{
  gap:7px !important;
}
.hk-route-no{
  min-width:44px !important;
  font-size:18px !important;
  padding:4px 7px !important;
}
.hk-via{
  font-size:12px !important;
  padding:4px 7px !important;
}
.hk-oldroad{
  font-size:12px !important;
  padding:3px 6px !important;
}
.hk-destination{
  font-size:25px !important;
  padding:5px 12px 10px !important;
}
.hk-yuki{
  font-size:12px !important;
}
.hk-info{
  padding:10px 12px 11px !important;
}
.hk-next-label{
  font-size:11px !important;
}
.hk-next-stop{
  font-size:20px !important;
}
.hk-last-position{
  font-size:10px !important;
}

/* Selected bus marker gets stronger visual focus */
.leaflet-marker-icon.selected,
.selected-bus-marker{
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.28));
}

/* Desktop layout polish */
@media(min-width:901px){
  #panel{
    box-shadow:-5px 0 18px rgba(16,24,40,.06);
  }
  #map{
    min-height:520px;
  }
}

/* Mobile: map-first, compact controls, detail stays reachable */
@media(max-width:900px){
  header{
    min-height:52px;
  }


  

  .hk-destination{
    font-size:23px !important;
  }
  .hk-next-stop{
    font-size:18px !important;
  }

  #panel{
    border-left:0 !important;
    border-top:1px solid var(--v8-line) !important;
    box-shadow:0 -6px 20px rgba(16,24,40,.08);
  }
  #panel .detail{
    padding:14px !important;
  }
}

/* Very narrow phones */
@media(max-width:420px){

  
  .hk-sign-top{
    padding:8px 10px 5px !important;
  }
  .hk-destination{
    padding:4px 10px 9px !important;
    font-size:21px !important;
  }
  .hk-info{
    padding:8px 10px 9px !important;
  }
}


.hk-nightbus-row{

  
  justify-content:flex-start;
  padding:5px 12px 3px;
}

/* 緑・青方向幕上でもマーク自体の配色は統一 */
.hk-sign-buscenter .hk-nightbus-row,
.hk-sign-motomachi .hk-nightbus-row{
  background:inherit;
}

.hk-sign-tate-honkawa .hk-nightbus-row{
  background:#fff;
}

.hk-nightbus-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:25px;
  padding:3px 10px 4px;
  border:2px solid #111;
  border-radius:2px;
  background:#f39a19;

  font-size:15px;
  font-weight:950;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

/* 右側詳細 */
.hk-detail-sign .hk-nightbus-row{
  padding:6px 0 3px;
}
.hk-detail-sign .hk-nightbus-mark{
  font-size:14px;
}

/* v8 compact popup */
@media(max-width:900px){
  .hk-nightbus-row{
    padding:4px 10px 2px;
  }
  .hk-nightbus-mark{
    min-height:22px;
    padding:3px 8px;
    font-size:12px;
    border-width:1.5px;
  }
}


@media(max-width:900px){
  .leaflet-popup{
    max-width:calc(100vw - 20px) !important;
  }

  .leaflet-popup-content-wrapper{
    max-height:min(330px,calc(100vh - 180px)) !important;
    overflow:hidden !important;
  }

  .leaflet-popup-content:has(.hk-sign){
    width:min(270px,calc(100vw - 34px)) !important;
    max-width:270px !important;
    margin:0 !important;
  }

  .hk-sign{
    width:100% !important;
    max-width:270px !important;
  }

  /* 路線番号・旧道・経由を1段にコンパクトに保持 */
  .hk-sign .hk-sign-top{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    padding:7px 9px 4px !important;
    overflow:hidden;
  }

  .hk-sign .hk-route-no{
    flex:0 0 auto;
    min-width:42px !important;
    padding:3px 6px !important;
    font-size:17px !important;
    line-height:1.05 !important;
  }

  .hk-sign .hk-oldroad{
    flex:0 0 auto;
    padding:3px 5px !important;
    font-size:11px !important;
    line-height:1 !important;
  }

  .hk-sign .hk-via{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:3px 6px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
  }

  /* 深夜マークは行き先直上だが、縦幅を最小限に */
  .hk-sign .hk-nightbus-row{
    padding:3px 9px 0 !important;
    min-height:0 !important;
  }

  .hk-sign .hk-nightbus-mark{
    min-height:19px !important;
    padding:2px 7px 3px !important;
    border-width:1px !important;
    font-size:11px !important;
    line-height:1 !important;
  }

  .hk-sign .hk-destination{
    padding:4px 9px 7px !important;
    font-size:22px !important;
    line-height:1.08 !important;
  }

  .hk-sign .hk-yuki{
    font-size:11px !important;
  }

  .hk-sign .hk-info{
    padding:7px 9px 8px !important;
  }

  .hk-sign .hk-next-label{
    margin-bottom:1px !important;
    font-size:10px !important;
    line-height:1.15 !important;
  }

  .hk-sign .hk-next-stop{
    margin-bottom:4px !important;
    font-size:18px !important;
    line-height:1.12 !important;
  }

  .hk-sign .hk-source{
    display:inline-block;
    padding:2px 5px !important;
    font-size:9.5px !important;
    line-height:1.1 !important;
  }

  .hk-sign .hk-last-position{
    margin-top:5px !important;
    padding-top:5px !important;
    font-size:9px !important;
    line-height:1.15 !important;
  }
}

/* さらに狭い端末 */
@media(max-width:420px){
  .leaflet-popup-content:has(.hk-sign){
    width:min(250px,calc(100vw - 30px)) !important;
    max-width:250px !important;
  }

  .hk-sign{
    max-width:250px !important;
  }

  .hk-sign .hk-sign-top{
    gap:4px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .hk-sign .hk-route-no{
    min-width:39px !important;
    font-size:16px !important;
  }

  .hk-sign .hk-via{
    font-size:9.5px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }

  .hk-sign .hk-destination{
    font-size:21px !important;
  }

  .hk-sign .hk-next-stop{
    font-size:17px !important;
  }
}


/* 広島交通専用方向幕ではない、通常吹き出しに最低幅を保証 */
.leaflet-popup-content:not(:has(.hk-sign)){
  box-sizing:border-box;
  width:260px !important;
  min-width:230px !important;
  max-width:280px !important;
  margin:12px 14px !important;

  /* 日本語を1文字ずつ不自然に折り返さない */
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
}

/* 通常吹き出し内部の各行も、意味のある単位で折り返す */
.leaflet-popup-content:not(:has(.hk-sign)) strong,
.leaflet-popup-content:not(:has(.hk-sign)) div,
.leaflet-popup-content:not(:has(.hk-sign)) small{
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
}

/* 長い路線名・行先の行間を整える */
.leaflet-popup-content:not(:has(.hk-sign)) strong{
  display:block;
  margin-bottom:4px;
  line-height:1.3;
}

.leaflet-popup-content:not(:has(.hk-sign)) .popup-next-stop{
  margin-top:5px;
  line-height:1.35;
}

/* 位置情報や補足は少し小さくして高さを抑える */
.leaflet-popup-content:not(:has(.hk-sign)) .position-meta,
.leaflet-popup-content:not(:has(.hk-sign)) .next-stop-source,
.leaflet-popup-content:not(:has(.hk-sign)) .position-hold{
  line-height:1.3;
}

/* スマホでは地図枠からはみ出さない範囲で幅を確保 */
@media(max-width:900px){
  .leaflet-popup-content:not(:has(.hk-sign)){
    width:min(245px,calc(100vw - 42px)) !important;
    min-width:min(220px,calc(100vw - 42px)) !important;
    max-width:245px !important;
    margin:10px 12px !important;
  }
}

/* かなり狭い端末ではさらに縮小するが、細長くならない最低幅を維持 */
@media(max-width:380px){
  .leaflet-popup-content:not(:has(.hk-sign)){
    width:min(225px,calc(100vw - 30px)) !important;
    min-width:min(205px,calc(100vw - 30px)) !important;
    max-width:225px !important;
  }
}


#tripDetail .stops{
  --timeline-x:12px;
  position:relative;
  list-style:none !important;
  margin:10px 0 0 !important;
  padding:0 0 8px 0 !important;
}

/* 連続する縦ライン */
#tripDetail .stops::before{
  content:"";
  position:absolute;
  left:var(--timeline-x);
  top:13px;
  bottom:16px;
  width:2px;
  background:#9fbae8;
  border-radius:2px;
  z-index:0;
}

/* 通常停留所 */
#tripDetail .stops .timeline-stop{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
  min-height:36px;
  margin:0 !important;
  padding:4px 0 !important;
  border:0 !important;
  list-style:none !important;
  background:transparent;
  z-index:1;
}

#tripDetail .timeline-stop-dot{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  justify-self:start;
  margin-left:6px;
  width:13px;
  height:13px;
  padding:0 !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  background:#2f67bb !important;
  box-shadow:0 0 0 1px #2f67bb;
  cursor:default;
  z-index:2;
}

#tripDetail .timeline-stop-name{
  min-width:0;
  font-size:12px;
  font-weight:650;
  line-height:1.35;
  color:#1d2939;
}

#tripDetail .timeline-stop .time{
  padding-right:2px;
  font-size:11px;
  color:#475467;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* 停車中の停留所 */
#tripDetail .timeline-stop.current-stop{
  background:#eef4ff;
  border-radius:7px !important;
}
#tripDetail .timeline-stop.current-stop .timeline-stop-dot{
  width:16px;
  height:16px;
  margin-left:4.5px;
  background:#0d3f9a !important;
  box-shadow:0 0 0 2px #dbe8ff;
}
#tripDetail .timeline-stop.current-stop .timeline-stop-name{
  color:#0b3e9b;
  font-weight:850;
}

/* 現在位置を縦ライン内へ統合 */
#tripDetail .stops .bus-between-stops.timeline-current-position{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:5px;
  min-height:54px;
  margin:2px 0 !important;
  padding:5px 0 6px !important;
  border:0 !important;
  list-style:none !important;
  background:transparent !important;
  z-index:3;
}

/* 旧v7.3の擬似線/丸を無効化 */
#tripDetail .stops .bus-between-stops.timeline-current-position::before,
#tripDetail .stops .bus-between-stops.timeline-current-position::after{
  content:none !important;
  display:none !important;
}

#tripDetail .timeline-current-dot{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  justify-self:start;
  margin-left:1px;
  width:25px;
  height:25px;
  padding:0 !important;
  display:grid;
  place-items:center;

  

  
  font-size:13px;
  line-height:1;
  box-shadow:0 0 0 2px #073b91,0 3px 8px rgba(7,59,145,.22);
  cursor:default;
  z-index:4;
}

#tripDetail .timeline-current-body{
  min-width:0;
  padding-top:0;
}

#tripDetail .timeline-current-body .bus-position-badge{

  align-items:center;
  min-height:25px;

  

  

  font-size:11.5px;
  font-weight:850;
  line-height:1.1;
  box-shadow:none !important;
}

#tripDetail .timeline-current-body small{

  
  padding:0 !important;
  color:#475467;
  font-size:10.5px;
  line-height:1.4;
}

/* 既存の左余白指定をタイムラインに合わせて解除 */
#tripDetail .stops .timeline-stop,
#tripDetail .stops .timeline-current-position{
  margin-left:0 !important;
  transform:none !important;
}

/* スマホでは少し大きめのタップ/視認サイズ */
@media(max-width:900px){
  #tripDetail .stops{
    --timeline-x:13px;
  }
  #tripDetail .stops .timeline-stop{
    grid-template-columns:36px minmax(0,1fr) auto;
    min-height:39px;
  }
  #tripDetail .timeline-stop-dot{
    width:14px;
    height:14px;
    margin-left:6px;
  }
  #tripDetail .timeline-stop-name{
    font-size:12.5px;
  }
  #tripDetail .timeline-current-dot{
    width:27px;
    height:27px;
    margin-left:0;
  }
  #tripDetail .stops .bus-between-stops.timeline-current-position{
    grid-template-columns:36px minmax(0,1fr);
  }
}


@media(min-width:901px){


  #map{

    
    min-width:0 !important;

    
  }

  #panel{

    
    display:block !important;
    min-width:0 !important;

    overflow:auto !important;

    
  }
}

/* 900px以下のみ、従来のスマホ縦積み表示 */
@media(max-width:900px){
  main{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(360px,55vh) minmax(250px,40vh) !important;
  }
}


#tripDetail .stops{
  border-left:0 !important;
  border-right:0 !important;
  padding-left:0 !important;
  margin-left:0 !important;
}

/* 旧CSS由来の個別の縦線を完全に無効化 */
#tripDetail .stops .bus-between-stops{
  border-left:0 !important;
}
#tripDetail .stops .bus-between-stops::before,
#tripDetail .stops .bus-between-stops::after{
  content:none !important;
  display:none !important;
}

/* 現行タイムラインの1本だけを残す */
#tripDetail .stops::before{
  display:block !important;
  content:"" !important;
}

/* 現在位置ノードを確実に前面表示 */

#tripDetail .timeline-current-dot,
#tripDetail .timeline-current-body,
#tripDetail .bus-position-badge{
  visibility:visible !important;
  opacity:1 !important;
}


/* 現在位置表示を一覧内で確実に見える状態にする */
#tripDetail .timeline-current-position{
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) !important;
  align-items:start !important;
  min-height:58px !important;
  margin:3px 0 !important;
  padding:6px 0 !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:4 !important;
}

#tripDetail .timeline-current-dot{
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  height:28px !important;
  margin-left:0 !important;
  border-radius:50% !important;
  background:#073b91 !important;
  color:#fff !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 2px #073b91 !important;
  font-size:13px !important;
  z-index:5 !important;
}

#tripDetail .timeline-current-body{
  display:block !important;
  min-width:0 !important;
}

#tripDetail .timeline-current-body .bus-position-badge{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:5px 10px !important;
  border-radius:999px !important;

  
  font-size:11.5px !important;
  font-weight:850 !important;
  line-height:1.1 !important;
}

#tripDetail .timeline-current-body small{
  display:block !important;
  margin:5px 0 0 2px !important;

  font-size:10.5px !important;
  line-height:1.4 !important;
}

/* PC: ページ全体ではなく地図と停留所一覧を独立スクロール領域にする */
@media(min-width:901px){
  html,body{
    height:100%;
  }

  body{

    
    overflow:hidden !important;

    grid-template-rows:auto auto auto minmax(0,1fr) !important;
  }


  /* 右側の停留所見出しはスクロール中も残す */

}


.hk-sign-kamiyacho .hk-sign-top{
  background:#fff !important;
  color:#111827 !important;
  padding:10px 12px 5px !important;
}

.hk-sign-kamiyacho .hk-route-no{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#1650b8 !important;
}

.hk-sign-kamiyacho .hk-via{
  background:#1650b8 !important;
  color:#fff !important;
  border:1px solid #0d3d91 !important;
  padding:4px 8px !important;
  border-radius:4px;
  font-weight:900;
}

.hk-sign-kamiyacho .hk-destination{
  background:#fff !important;
  color:#111827 !important;
  border-bottom:1px solid #dbe3ec !important;
}

.hk-sign-kamiyacho .hk-info{
  background:#fff !important;
  color:#111827 !important;
}

.hk-detail-kamiyacho .hk-detail-sign{
  background:#fff !important;
  color:#111827 !important;
  border-bottom:1px solid #dbe3ec !important;
}

.hk-detail-kamiyacho .hk-route-no,
.hk-detail-kamiyacho .hk-via{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#1650b8 !important;
}

.hk-detail-kamiyacho .badge{
  background:#edf3ff !important;
  color:#1650b8 !important;
}


/* 共通: 深夜バスマーク */
.hk-sign .hk-nightbus-mark{
  font-weight:900 !important;
}

/* バスセンター経由 = 緑 */
.hk-sign-buscenter .hk-nightbus-mark{
  background:#08783f !important;
  color:#fff !important;
  border-color:#065f33 !important;
}

/* 基町経由 = 青 */
.hk-sign-motomachi .hk-nightbus-mark{
  background:#123fa4 !important;
  color:#fff !important;
  border-color:#0b2f7d !important;
}

/* 立町・本川町経由 = 白地テーマ。青をアクセントとして使用 */
.hk-sign-tate-honkawa .hk-nightbus-mark{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#0d3d91 !important;
}

/* 紙屋町経由 = 白地＋青テーマ */
.hk-sign-kamiyacho .hk-nightbus-mark{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#0d3d91 !important;
}

/* 右側詳細表示にも同じテーマ色を適用 */
.hk-detail-buscenter .hk-nightbus-mark{
  background:#08783f !important;
  color:#fff !important;
  border-color:#065f33 !important;
}

.hk-detail-motomachi .hk-nightbus-mark{
  background:#123fa4 !important;
  color:#fff !important;
  border-color:#0b2f7d !important;
}

.hk-detail-tate-honkawa .hk-nightbus-mark,
.hk-detail-kamiyacho .hk-nightbus-mark{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#0d3d91 !important;
}


/* マーク本体は全テーマ共通で元のオレンジへ戻す */
.hk-sign .hk-nightbus-mark,
.hk-detail-sign .hk-nightbus-mark,
.hk-detail-buscenter .hk-nightbus-mark,
.hk-detail-motomachi .hk-nightbus-mark,
.hk-detail-tate-honkawa .hk-nightbus-mark,
.hk-detail-kamiyacho .hk-nightbus-mark{
  background:#f39a19 !important;
  color:#090909 !important;
  border-color:#111 !important;
}

/* 地図吹き出し：マークの背景帯を経由テーマへ */


.hk-sign-tate-honkawa .hk-nightbus-row,
.hk-sign-kamiyacho .hk-nightbus-row{
  background:#fff !important;
}

/* 通常テーマは白 */


/* 右側詳細も同じ考え方 */


/* バスセンター経由：行き先背景と同じ緑 */
.hk-sign-buscenter .hk-nightbus-row{
  background:#0b6b35 !important;
}

/* 基町経由：行き先背景と同じ青 */
.hk-sign-motomachi .hk-nightbus-row{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
}

/* 立町・本川町経由：行き先背景は白 */
.hk-sign-tate-honkawa .hk-nightbus-row{
  background:#fff !important;
}

/* 紙屋町経由：行き先背景は白 */
.hk-sign-kamiyacho .hk-nightbus-row{
  background:#fff !important;
}

/* その他の広島交通：行き先背景と同じ白 */
.hk-sign:not(.hk-sign-buscenter):not(.hk-sign-motomachi):not(.hk-sign-tate-honkawa):not(.hk-sign-kamiyacho) .hk-nightbus-row{
  background:#fff !important;
}

/* 右側詳細も同じルール */
.hk-detail-buscenter .hk-nightbus-row{
  background:#0b6b35 !important;
}

.hk-detail-motomachi .hk-nightbus-row{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
}

.hk-detail-tate-honkawa .hk-nightbus-row,
.hk-detail-kamiyacho .hk-nightbus-row{
  background:#fff !important;
}

/* マーク本体は必ずオレンジ固定 */
.hk-nightbus-mark{
  background:#f39a19 !important;
  color:#090909 !important;
  border-color:#111 !important;
}


#tripDetail .timeline-current-position{
  background:#f5f8ff !important;
  border-radius:9px !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
}

#tripDetail .timeline-current-body .bus-position-badge{
  background:#073b91 !important;
  color:#fff !important;
  border:0 !important;
}

#tripDetail .timeline-current-body small{
  color:#344054 !important;
}


#tripDetail .stops > li[data-current-bus-position="1"]{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  min-height:60px !important;
  overflow:visible !important;
  position:relative !important;
  z-index:8 !important;
  background:#f2f6ff !important;
  border-radius:9px !important;
  margin:4px 0 !important;
  padding:7px 0 !important;
}

#tripDetail .stops > li[data-current-bus-position="1"] .timeline-current-dot{
  display:grid !important;
}

#tripDetail .stops > li[data-current-bus-position="1"] .timeline-current-body{
  display:block !important;
}

#tripDetail .stops > li[data-current-bus-position="1"] .bus-position-badge{
  display:inline-flex !important;
  background:#073b91 !important;
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}


.leaflet-popup-content:has(.hb-popup){
  margin:0 !important;
  width:min(300px,calc(100vw - 36px)) !important;
  max-width:300px !important;
}

.leaflet-popup-content-wrapper:has(.hb-popup){
  padding:0 !important;
  overflow:hidden !important;
  border:2px solid #0b7a45 !important;
  border-radius:12px !important;
}

.hb-popup{
  background:#fff;
  color:#101828;
}

.hb-brand{
  background:#fff;
  padding:10px 12px 7px;
}

.hb-brand-row{
  display:flex;
  align-items:center;
  gap:9px;
}

.hb-logo{
  width:56px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto;
}

.hb-company-name{
  font-size:18px;
  font-weight:900;
  color:#111;
  white-space:nowrap;
}

.hb-route-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
}

.hb-route-no{
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  background:#0b7a45;
  color:#fff;
  font-size:21px;
  font-weight:900;
  line-height:1;
}

.hb-nightbus{
  display:inline-block;
  padding:4px 9px;
  border:2px solid #111;
  border-radius:3px;
  background:#f39a19;
  color:#090909;
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.hb-destination{
  padding:9px 12px 11px;
  background:#0b7a45;
  color:#fff;
  font-size:25px;
  font-weight:900;
  line-height:1.1;
}

.hb-destination span{
  margin-left:5px;
  font-size:12px;
}

.hb-popup-info{
  padding:10px 12px 11px;
}

.hb-next-label{
  font-size:11px;
  font-weight:700;
  color:#475467;
}

.hb-next-stop{
  margin-top:2px;
  font-size:20px;
  font-weight:900;
}

.hb-source{
  display:inline-block;
  margin-top:5px;
  padding:3px 7px;
  border:1px solid #0b7a45;
  border-radius:5px;
  color:#0b7a45;
  background:#f5fff8;
  font-size:10px;
  font-weight:700;
}

.hb-last-position{
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid #e5e7eb;
  color:#667085;
  font-size:10px;
}

/* Right-side detail */
.hb-detail-brand{
  margin:-18px -18px 12px;
  overflow:hidden;
  border-bottom:1px solid #dfe5ec;
}

.hb-detail-brand .hb-brand{
  padding:14px 16px 9px;
}

.hb-detail-brand .hb-logo{
  width:68px;
  height:40px;
}

.hb-detail-brand .hb-company-name{
  font-size:22px;
}

.hb-detail-brand .hb-route-no{
  font-size:22px;
}

.hb-detail-destination{
  padding:13px 16px 15px;
  background:#0b7a45;
  color:#fff;
  font-size:27px;
  font-weight:900;
}

.hb-detail-destination span{
  font-size:13px;
  margin-left:5px;
}


/* compact popup header */
.hb-brand-compact .hb-logo{
  width:48px;
  height:29px;
}
.hb-brand-compact .hb-company-name{
  font-size:15px;
}
.hb-brand-compact .hb-route-no{
  font-size:18px;
}

/* mobile */
@media(max-width:520px){
  .leaflet-popup-content:has(.hb-popup){
    width:min(260px,calc(100vw - 30px)) !important;
    max-width:260px !important;
  }
  .hb-brand{
    padding:8px 9px 6px;
  }
  .hb-logo{
    width:42px;
    height:26px;
  }
  .hb-company-name{
    font-size:13px;
  }
  .hb-route-no{
    font-size:17px;
    padding:3px 7px;
  }
  .hb-nightbus{
    font-size:10px;
    padding:3px 6px;
  }
  .hb-destination{
    padding:7px 9px 9px;
    font-size:21px;
  }
  .hb-popup-info{
    padding:8px 9px 9px;
  }
  .hb-next-stop{
    font-size:18px;
  }
}


.op-brand{
  display:flex;
  align-items:center;
  gap:8px;
  box-sizing:border-box;
  width:100%;
  padding:8px 10px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  color:#111827;
}

.op-brand-logo{
  display:block;
  width:56px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto;
}

.op-brand-name{
  min-width:0;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
  color:#111827;
}

.op-brand-compact{
  padding:6px 8px;
}
.op-brand-compact .op-brand-logo{
  width:46px;
  height:28px;
}
.op-brand-compact .op-brand-name{
  font-size:12px;
}

/* Horizontal/wider artwork variants */
.op-brand-hiroko .op-brand-logo,
.op-brand-bihoku .op-brand-logo{
  width:82px;
}
.op-brand-compact.op-brand-hiroko .op-brand-logo,
.op-brand-compact.op-brand-bihoku .op-brand-logo{
  width:66px;
}

.op-brand-jrbus .op-brand-logo{
  width:64px;
}
.op-brand-compact.op-brand-jrbus .op-brand-logo{
  width:52px;
}

/* Detail panel */
.op-detail-brand{
  margin:-18px -18px 10px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}
.op-detail-brand .op-brand{
  padding:12px 15px;
}
.op-detail-brand .op-brand-logo{
  width:72px;
  height:42px;
}
.op-detail-brand .op-brand-name{
  font-size:19px;
}

/* Hiroshima Kotsu popup shell */
.hk-popup-shell{
  width:100%;
  background:#fff;
}
.leaflet-popup-content:has(.hk-popup-shell){
  margin:0 !important;
  min-width:0 !important;
}
.hk-popup-shell .hk-sign{
  width:100% !important;
}

/* Generic popup with brand header */
.leaflet-popup-content > .op-brand:first-child{
  margin:-12px -14px 8px;
  width:calc(100% + 28px);
}

/* operator accent line */
.op-brand::before{
  content:"";
  display:block;
  width:4px;
  align-self:stretch;
  border-radius:3px;
  background:var(--op-theme,#64748b);
}

/* Mobile */
@media(max-width:520px){
  .op-brand{
    gap:6px;
    padding:6px 7px;
  }
  .op-brand-logo{
    width:42px;
    height:25px;
  }
  .op-brand-name{
    font-size:11px;
  }
  .op-brand-hiroko .op-brand-logo,
  .op-brand-bihoku .op-brand-logo{
    width:58px;
  }
  .op-detail-brand{
    margin:-14px -14px 9px;
  }
}


.op-brand-forble .op-brand-logo{
  width:70px;
  height:40px;
}
.op-brand-asahi .op-brand-logo{
  width:70px;
  height:36px;
}
.op-brand-onomichi .op-brand-logo{
  width:74px;
  height:38px;
}
.op-brand-compact.op-brand-forble .op-brand-logo{
  width:55px;
  height:31px;
}
.op-brand-compact.op-brand-asahi .op-brand-logo{
  width:55px;
  height:29px;
}
.op-brand-compact.op-brand-onomichi .op-brand-logo{
  width:58px;
  height:30px;
}

@media(max-width:520px){
  .op-brand-forble .op-brand-logo,
  .op-brand-asahi .op-brand-logo,
  .op-brand-onomichi .op-brand-logo{
    width:52px;
    height:29px;
  }
}


.nearby-stops-button{
  min-height:38px;
  padding:7px 12px;
  border:1px solid #0b7a45 !important;
  border-radius:8px !important;
  background:#fff;
  color:#0b6b3d;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.nearby-stops-button:hover{
  background:#f0faf4;
}
.nearby-stops-button:disabled{
  opacity:.65;
  cursor:wait;
}

.nearby-stops-panel{
  margin:8px 0 0;
  padding:8px;
  border:1px solid #d9e2ec;
  border-radius:10px;
  background:#fff;
  box-shadow:0 5px 18px rgba(16,24,40,.08);
}
.nearby-stops-panel[hidden]{
  display:none !important;
}

.nearby-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 3px 7px;
  border-bottom:1px solid #edf1f5;
  font-size:12px;
}
.nearby-close{
  width:27px;
  height:27px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#667085;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.nearby-stop-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:6px;
  margin-top:7px;
}
.nearby-stop-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:9px 10px !important;
  border:1px solid #dce4ec !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#172033 !important;
  text-align:left;
  cursor:pointer;
}
.nearby-stop-item:hover{
  border-color:#0b7a45 !important;
  background:#f4fbf7 !important;
}
.nearby-stop-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nearby-stop-main strong{
  font-size:13px;
}
.nearby-stop-main small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#667085;
  font-size:10px;
}
.nearby-distance{
  flex:0 0 auto;
  min-width:42px;
  padding:3px 6px;
  border-radius:999px;
  background:#eaf7ef;
  color:#08733f;
  font-size:11px;
  font-weight:900;
  text-align:center;
}
.nearby-loading,
.nearby-error,
.nearby-empty{
  padding:10px 8px;
  color:#475467;
  font-size:12px;
}
.nearby-error{
  color:#b42318;
}
.nearby-error small,
.nearby-empty span{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:#667085;
}

@media(max-width:900px){
  .stop-search-inner{
    align-items:end;
  }
  .nearby-stops-button{
    min-height:40px;
  }
  .nearby-stop-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .nearby-stops-button{
    grid-column:1 / -1;
    width:100%;
  }
  .nearby-stops-panel{
    margin:7px 0 0;
  }
}


:root{
  --hiroshima-bus-curtain-blue:#19267c;
  --hiroshima-bus-curtain-bg:#f7f4ea;
}

/* 地図吹き出し */
.hb-popup{
  background:var(--hiroshima-bus-curtain-bg) !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-brand{
  background:var(--hiroshima-bus-curtain-bg) !important;
}

.hb-popup .hb-company-name{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-route-no{
  background:#fff !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border:2px solid var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-destination{
  background:var(--hiroshima-bus-curtain-bg) !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border-top:1px solid #ded9c9 !important;
  border-bottom:1px solid #ded9c9 !important;
}

.hb-popup .hb-destination span{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-popup-info{
  background:#fff !important;
}

.hb-popup .hb-next-label,
.hb-popup .hb-next-stop{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-source{
  border-color:var(--hiroshima-bus-curtain-blue) !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  background:#f7f8ff !important;
}

/* 吹き出し外枠も方向幕色に合わせる */
.leaflet-popup-content-wrapper:has(.hb-popup){
  border-color:var(--hiroshima-bus-curtain-blue) !important;
}

/* 右側詳細 */
.hb-detail .hb-detail-brand{
  background:var(--hiroshima-bus-curtain-bg) !important;
}

.hb-detail .hb-brand{
  background:var(--hiroshima-bus-curtain-bg) !important;
}

.hb-detail .hb-company-name{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-detail .hb-route-no{
  background:#fff !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border:2px solid var(--hiroshima-bus-curtain-blue) !important;
}

.hb-detail-destination{
  background:var(--hiroshima-bus-curtain-bg) !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border-top:1px solid #ded9c9 !important;
  border-bottom:1px solid #ded9c9 !important;
}

.hb-detail-destination span{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-agency-badge{
  background:#f1f2ff !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border:1px solid #c9ccec !important;
}

/* タイムラインの現在位置・停留所強調も広島バス選択時は青系 */
.hb-detail #tripDetail .timeline-stop.current-stop{
  background:#f1f2ff !important;
}

.hb-detail #tripDetail .timeline-stop.current-stop .timeline-stop-name{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-detail #tripDetail .timeline-stop.current-stop .timeline-stop-dot{
  background:var(--hiroshima-bus-curtain-blue) !important;
  box-shadow:0 0 0 2px #e3e5ff !important;
}

.hb-detail #tripDetail .timeline-current-dot,
.hb-detail #tripDetail .timeline-current-body .bus-position-badge{
  background:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-detail #tripDetail .stops::before{
  background:#b8bde6 !important;
}

/* 深夜バスマークはオレンジを維持 */
.hb-nightbus{
  background:#f39a19 !important;
  color:#090909 !important;
  border-color:#111 !important;
}


/* 共通外枠 */
.leaflet-popup.bus-company-popup .leaflet-popup-content-wrapper{
  border-width:2px !important;
  border-style:solid !important;
}

/* Leaflet の吹き出し三角も外枠色に近づける */
.leaflet-popup.bus-company-popup .leaflet-popup-tip{
  border:1px solid currentColor;
}

/* 広島電鉄：緑 */
.leaflet-popup.bus-company-hiroden{
  color:#079c2f;
}
.leaflet-popup.bus-company-hiroden .leaflet-popup-content-wrapper{
  border-color:#079c2f !important;
}

/* 広島バス：赤 */
.leaflet-popup.bus-company-hiroshima-bus{
  color:#e60012;
}
.leaflet-popup.bus-company-hiroshima-bus .leaflet-popup-content-wrapper{
  border-color:#e60012 !important;
}

/* 広島交通：車体イメージのオレンジ */
.leaflet-popup.bus-company-hiroko{
  color:#e65300;
}
.leaflet-popup.bus-company-hiroko .leaflet-popup-content-wrapper{
  border-color:#e65300 !important;
}

/* 芸陽バス：オレンジ */
.leaflet-popup.bus-company-geiyo{
  color:#f28c00;
}
.leaflet-popup.bus-company-geiyo .leaflet-popup-content-wrapper{
  border-color:#f28c00 !important;
}

/* 備北交通：濃紺 */
.leaflet-popup.bus-company-bihoku{
  color:#243f9b;
}
.leaflet-popup.bus-company-bihoku .leaflet-popup-content-wrapper{
  border-color:#243f9b !important;
}

/* エイチ・ディー西広島：ブルー */
.leaflet-popup.bus-company-hd-nishihiroshima{
  color:#1769aa;
}
.leaflet-popup.bus-company-hd-nishihiroshima .leaflet-popup-content-wrapper{
  border-color:#1769aa !important;
}

/* フォーブル：赤 */
.leaflet-popup.bus-company-fourble{
  color:#bd1822;
}
.leaflet-popup.bus-company-fourble .leaflet-popup-content-wrapper{
  border-color:#bd1822 !important;
}

/* JRバス中国：JR系ブルー */
.leaflet-popup.bus-company-jr-chugoku{
  color:#1680be;
}
.leaflet-popup.bus-company-jr-chugoku .leaflet-popup-content-wrapper{
  border-color:#1680be !important;
}

/* おおのハートバス：ピンク系 */
.leaflet-popup.bus-company-heart-bus{
  color:#d94f87;
}
.leaflet-popup.bus-company-heart-bus .leaflet-popup-content-wrapper{
  border-color:#d94f87 !important;
}

/* 呉市生活バス：青緑 */
.leaflet-popup.bus-company-kure-life{
  color:#168b8b;
}
.leaflet-popup.bus-company-kure-life .leaflet-popup-content-wrapper{
  border-color:#168b8b !important;
}

/* 廿日市市自主運行バス：緑 */
.leaflet-popup.bus-company-hatsukaichi{
  color:#2e8b57;
}
.leaflet-popup.bus-company-hatsukaichi .leaflet-popup-content-wrapper{
  border-color:#2e8b57 !important;
}

/* おのみちバス：黒 */
.leaflet-popup.bus-company-onomichi{
  color:#111111;
}
.leaflet-popup.bus-company-onomichi .leaflet-popup-content-wrapper{
  border-color:#111111 !important;
}

/* 朝日交通：緑 */
.leaflet-popup.bus-company-asahi-ato{
  color:#15944b;
}
.leaflet-popup.bus-company-asahi-ato .leaflet-popup-content-wrapper{
  border-color:#15944b !important;
}

/* 未登録事業者 */
.leaflet-popup.bus-company-default{
  color:#64748b;
}
.leaflet-popup.bus-company-default .leaflet-popup-content-wrapper{
  border-color:#64748b !important;
}

/*
  重要:
  広島交通の以下の既存専用デザインは一切変更しない。
  - 広島バスセンター経由
  - 基町経由
  - 立町・本川町経由
  - 紙屋町経由
  - 旧道表示
  ここでは Leaflet の最外周 border-color だけを上書きする。
*/


header{
  position:sticky !important;
  top:0 !important;
  z-index:2000 !important;
  width:100%;
  box-sizing:border-box;
}

/* Leaflet等より確実に前面へ */
header .brand,
header .status{
  position:relative;
  z-index:1;
}


.schedule-fallback{
  background:#f8fafc !important;
  color:#475569 !important;
  border:1px solid #cbd5e1 !important;
}


.leaflet-popup-content:has(.std-popup){
  margin:0 !important;
  min-width:265px;
}
.leaflet-popup-content-wrapper:has(.std-popup){
  padding:0;
  overflow:hidden;
}

.std-popup{
  --std-theme:#64748b;
  width:100%;
  background:#fff;
  color:#172033;
}

.std-brand{
  --std-theme:#64748b;
  padding:11px 12px 8px;
  background:#fff;
  box-sizing:border-box;
}

.std-brand-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.std-logo{
  display:block;
  width:58px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto;
}

.std-logo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:28px;
  border:2px solid var(--std-theme);
  border-radius:4px;
  color:var(--std-theme);
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  flex:0 0 auto;
}

.std-company-name{
  min-width:0;
  color:#172033;
  font-size:17px;
  font-weight:900;
  line-height:1.2;
}

.std-route-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
}

.std-route-no{
  display:inline-block;
  min-width:42px;
  padding:4px 9px;
  border-radius:4px;
  background:var(--std-theme);
  color:#fff;
  font-size:21px;
  font-weight:900;
  line-height:1;
  text-align:center;
}

.std-destination{
  padding:9px 12px 11px;
  background:var(--std-theme);
  color:#fff;
  font-size:25px;
  font-weight:900;
  line-height:1.1;
}

.std-destination span{
  margin-left:5px;
  font-size:12px;
}

.std-popup-info{
  padding:10px 12px 11px;
  background:#fff;
}

.std-next-label{
  font-size:11px;
  font-weight:700;
  color:#475467;
}

.std-next-stop{
  margin-top:2px;
  color:#172033;
  font-size:20px;
  font-weight:900;
}

.std-source{
  display:inline-block;
  margin-top:5px;
  padding:3px 7px;
  border:1px solid var(--std-theme);
  border-radius:5px;
  color:var(--std-theme);
  background:#fff;
  font-size:10px;
  font-weight:700;
}

.std-via{
  margin-top:7px;
  color:#667085;
  font-size:11px;
}

.std-last-position{
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid #e5e7eb;
  color:#667085;
  font-size:10px;
}

/* compact popup header */
.std-brand-compact{
  padding:8px 9px 6px;
}
.std-brand-compact .std-logo{
  width:48px;
  height:29px;
}
.std-brand-compact .std-logo-placeholder{
  width:42px;
  height:25px;
  font-size:9px;
}
.std-brand-compact .std-company-name{
  font-size:15px;
}
.std-brand-compact .std-route-no{
  font-size:18px;
}

/* Right-side detail — Hiroshima Bus と同じ縦配置 */
.std-detail-brand{
  --std-theme:#64748b;
  margin:-18px -18px 12px;
  overflow:hidden;
  border-bottom:1px solid #dfe5ec;
}

.std-detail-brand .std-brand{
  padding:14px 16px 9px;
}

.std-detail-brand .std-logo{
  width:68px;
  height:40px;
}

.std-detail-brand .std-logo-placeholder{
  width:58px;
  height:34px;
  font-size:11px;
}

.std-detail-brand .std-company-name{
  font-size:22px;
}

.std-detail-brand .std-route-no{
  font-size:22px;
}

.std-detail-destination{
  padding:13px 16px 15px;
  background:var(--std-theme);
  color:#fff;
  font-size:27px;
  font-weight:900;
}

.std-detail-destination span{
  margin-left:5px;
  font-size:13px;
}

.std-agency-badge{
  background:#f8fafc !important;
  color:var(--std-theme) !important;
  border:1px solid color-mix(in srgb,var(--std-theme) 35%,#fff) !important;
}

@media(max-width:520px){
  .leaflet-popup-content:has(.std-popup){
    width:min(260px,calc(100vw - 30px)) !important;
    max-width:260px !important;
    min-width:0 !important;
  }
  .std-brand{
    padding:8px 9px 6px;
  }
  .std-logo{
    width:42px;
    height:26px;
  }
  .std-logo-placeholder{
    width:38px;
    height:23px;
  }
  .std-company-name{
    font-size:13px;
  }
  .std-route-no{
    font-size:17px;
    padding:3px 7px;
  }
  .std-destination{
    padding:7px 9px 9px;
    font-size:21px;
  }
  .std-popup-info{
    padding:8px 9px 9px;
  }
  .std-next-stop{
    font-size:18px;
  }
}

/* color-mix 非対応ブラウザ向け */
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  .std-agency-badge{
    border-color:#d1d5db !important;
  }
}


.leaflet-popup.bus-company-popup .leaflet-popup-content-wrapper{
  max-width:calc(100vw - 32px);
}
.leaflet-popup.bus-company-popup .leaflet-popup-content{
  max-width:calc(100vw - 48px);
}
@media(max-width:520px){
  .leaflet-popup.bus-company-popup .leaflet-popup-content-wrapper{
    max-width:calc(100vw - 24px);
  }
  .leaflet-popup.bus-company-popup .leaflet-popup-content{
    max-width:calc(100vw - 40px);
  }
}


@media(max-width:520px){
  .toolbar{
    scroll-margin-top:58px;
  }

  /* 地図より停留所一覧を少し広く取り、選択後に両方を確認しやすくする */


}


.express-badge{
  display:inline-block;
  box-sizing:border-box;
  padding:4px 9px;
  border:2px solid #111;
  border-radius:3px;
  background:#ffd400 !important;
  color:#111 !important;
  font-size:13px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

/* 広島交通の深夜バス用行を種別バッジ共通行として利用 */
.hk-nightbus-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* 広島バス・標準表示でも路線番号の隣に同じ位置関係で表示 */
.hb-route-row,
.std-route-row{
  flex-wrap:wrap;
}

.std-service-badge{
  display:inline-block;
  padding:4px 9px;
  border:2px solid #111;
  border-radius:3px;
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.std-nightbus{
  background:#f39a19;
  color:#090909;
}

@media(max-width:520px){
  .express-badge,
  .std-service-badge{
    padding:3px 6px;
    font-size:10px;
  }
}


@media(max-width:520px) and (pointer:coarse){
  .mobile-back-to-top{
    user-select:none;
    -webkit-user-select:none;
  }
  .mobile-back-to-top:active{
    transform:translateY(0) !important;
  }
}


@media(max-width:520px){
  .mobile-back-to-top,
  .mobile-back-to-top:active,
  .mobile-back-to-top:focus{
    transform:translateY(0) !important;
  }
  .mobile-back-to-top:focus{
    outline:none;
  }
}


.bus-marker-wrap{
  position:relative;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bus-marker-wrap.dim{opacity:.25;}
.bus-marker-wrap .bus-marker{
  position:relative;
  z-index:2;
  flex:0 0 auto;
}
.bus-direction{
  position:absolute;
  z-index:1;
  left:50%;
  top:-7px;
  width:16px;
  height:56px;
  color:#172033;
  font-size:15px;
  font-weight:900;
  line-height:15px;
  text-align:center;
  transform-origin:50% 28px;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.95));
  pointer-events:none;
}
.focused-marker .bus-marker-wrap{
  transform:scale(1.18);
}
.focused-marker .bus-marker-wrap .bus-marker{
  transform:none !important;
}
.occupancy-badge{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  margin:4px 0;
  padding:4px 8px;
  border:1px solid #94a3b8;
  border-radius:999px;
  background:#f8fafc;
  color:#172033;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
}
.occupancy-badge.compact{font-size:10px;padding:3px 7px;}
.occupancy-empty,.occupancy-many_seats_available{background:#ecfdf5;border-color:#86efac;}
.occupancy-few_seats_available{background:#fefce8;border-color:#fde047;}
.occupancy-standing_room_only{background:#fff7ed;border-color:#fdba74;}
.occupancy-crushed_standing_room_only,.occupancy-full{background:#fef2f2;border-color:#fca5a5;}
.occupancy-not_accepting_passengers,.occupancy-not_boardable{background:#f1f5f9;border-color:#64748b;}

@media(max-width:520px){
  .bus-direction{
    top:-6px;
  }
}


.occupancy-ui-hidden{
  display:none !important;
}


.bus-marker-wrap .bus-marker{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:3px solid rgba(255,255,255,.96);
  box-shadow:0 1px 5px rgba(15,23,42,.35);
  background:#64748b;
}
.bus-marker-wrap.hub-inbound .bus-marker{
  background:#2563eb;
}
.bus-marker-wrap.hub-outbound .bus-marker{
  background:#f59e0b;
}
.bus-marker-wrap.hub-at .bus-marker,
.bus-marker-wrap.hub-neutral .bus-marker{
  background:#64748b;
}
.bus-marker-wrap.hub-inbound .bus-direction{
  color:#1d4ed8;
}
.bus-marker-wrap.hub-outbound .bus-direction{
  color:#d97706;
}

.hub-direction-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  width:100%;
  margin-top:6px;
  color:#475569;
  font-size:11px;
  line-height:1.3;
}
.hub-direction-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.hub-legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  border:1px solid rgba(15,23,42,.15);
}
.hub-legend-inbound{background:#2563eb;}
.hub-legend-outbound{background:#f59e0b;}
.hub-legend-neutral{background:#64748b;}

@media(max-width:520px){
  .hub-direction-legend{
    font-size:10px;
    gap:5px 10px;
  }
}


.bus-marker-wrap.hub-at .bus-marker,
.bus-marker-wrap.hub-neutral .bus-marker{
  background:#ffffff !important;
  border-color:#64748b !important;
}
.bus-marker-wrap.hub-at .bus-direction,
.bus-marker-wrap.hub-neutral .bus-direction{
  color:#64748b;
}
.hub-legend-neutral{
  background:#ffffff !important;
  border-color:#64748b !important;
}


.bus-direction{
  display:none !important;
}


.leaflet-routeVisibilityPane-pane,
.leaflet-pane.leaflet-routeVisibilityPane-pane{
  pointer-events:none !important;
}


.arrival-card.arrival-no-map{
  opacity:.72;
  border-style:dashed;
  background:#f8fafc;
}
.arrival-card.arrival-no-map:hover{
  opacity:.9;
}
.arrival-card-topline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.live-map-badge,
.no-map-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:2px 7px;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  white-space:nowrap;
}
.live-map-badge{
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac;
}
.no-map-badge{
  background:#e2e8f0;
  color:#475569;
  border:1px solid #cbd5e1;
}
.arrival-location-note{
  margin-top:5px;
  padding:5px 7px;
  border-radius:6px;
  background:#f1f5f9;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}
@media(max-width:520px){
  .live-map-badge,
  .no-map-badge{
    font-size:10px;
    padding:2px 6px;
  }
  .arrival-location-note{
    font-size:10px;
  }
}


.map-stop-marker-shell{
  background:transparent !important;
  border:0 !important;
}
.map-stop-marker{
  display:block;
  width:12px;
  height:12px;
  margin:6px;
  box-sizing:border-box;
  border-radius:50%;
  background:#fff;
  border:3px solid #2563eb;
  box-shadow:0 1px 4px rgba(15,23,42,.38);
  cursor:pointer;
}
.map-stop-marker.selected{
  width:16px;
  height:16px;
  margin:4px;
  background:#2563eb;
  border:3px solid #fff;
  box-shadow:0 0 0 3px #2563eb,0 2px 6px rgba(15,23,42,.45);
}
.map-stop-marker-shell:hover .map-stop-marker{
  transform:scale(1.18);
}
@media(max-width:520px){
  .map-stop-marker{
    width:14px;
    height:14px;
    margin:5px;
  }
  .map-stop-marker.selected{
    width:18px;
    height:18px;
    margin:3px;
  }
}


.mobile-destination-select-wrap{
  display:none;
}

.mobile-map-cta{
  display:none;
}

@media(max-width:520px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }
  body{
    background:#f6f8fb;
  }
  *,*::before,*::after{
    max-width:100%;
    box-sizing:border-box;
  }

  /* ヘッダー：端末幅を超える台数表示を隠し、タイトルだけを簡潔に固定 */
  header{
    min-width:0 !important;
    padding:12px 16px !important;
    min-height:68px;
  }
  header .brand{
    min-width:0;
    width:100%;
  }
  header .brand-icon{
    display:none !important;
  }
  header .brand h1{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.25 !important;
    white-space:normal !important;
    letter-spacing:0 !important;
  }
  header .brand p{
    margin-top:4px !important;
    font-size:11px !important;
    line-height:1.4 !important;
    white-space:normal !important;
  }


  /* STEP 1〜3 は完全な縦一列 */
  .stop-search{
    width:100% !important;
    padding:14px 14px 18px !important;
    overflow:visible !important;
  }
  .stop-search-inner{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100%;
  }
  .stop-search-inner > label{
    width:100%;
    margin:0 !important;
    font-size:20px !important;
    line-height:1.25;
  }
  .step-no{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    font-size:18px !important;
    margin-right:8px !important;
  }
  .autocomplete-wrap,
  #stopInput,
  #showArrivals,
  #nearbyStopsButton{
    width:100% !important;
    min-width:0 !important;
  }
  #stopInput{
    height:52px !important;
    padding:0 14px !important;
    font-size:17px !important;
    border-radius:12px !important;
  }
  #showArrivals,
  #nearbyStopsButton{
    min-height:48px !important;
    padding:11px 14px !important;
    font-size:15px !important;
    border-radius:12px !important;
  }

  .nearby-stops-panel{
    width:100% !important;
    margin:10px 0 0 !important;
  }
  .nearby-stop-list{
    width:100%;
  }
  .nearby-stop-item{
    width:100% !important;
    min-width:0 !important;
  }

  .selected-stop-row{
    display:block !important;
    width:100%;
    margin-top:12px !important;
  }
  #selectedStop.selected-stop{
    width:100%;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:10px;
    background:#ecfdf5;
    color:#12664b;
    font-size:17px !important;
    font-weight:900;
  }
  #selectedStop:empty{
    display:none;
  }
  .reset-view-button{
    display:none !important;
  }

  /* STEP 2: 横ボタンを廃止。行先は<select>一つだけ */
  .destination-controls{
    width:100% !important;
    margin-top:14px !important;
    padding-top:14px !important;
    border-top:1px solid #e2e8f0;
  }
  .destination-controls .section-caption{
    font-size:20px !important;
    line-height:1.25;
  }
  .destination-controls-row,
  #destinationFilters,
  #selectedDestinationLabel{
    display:none !important;
  }
  .mobile-destination-select-wrap{
    display:block !important;
    width:100%;
    margin-top:12px;
  }
  .mobile-destination-select-wrap label{
    display:block;
    margin-bottom:6px;
    color:#475569;
    font-size:12px;
    font-weight:800;
  }
  #mobileDestinationSelect{
    display:block;
    width:100%;
    height:52px;
    min-width:0;
    padding:0 42px 0 13px;
    border:2px solid #cbd5e1;
    border-radius:12px;
    background:#fff;
    color:#172033;
    font:inherit;
    font-size:16px;
    font-weight:800;
    text-overflow:ellipsis;
  }
  .mobile-destination-select-wrap small{
    display:block;
    margin-top:6px;
    color:#64748b;
    font-size:11px;
  }

  /* STEP 3: 到着予定は画面内スクロールをやめ、ページを縦に読む */
  .arrival-head{
    width:100%;
    margin-top:18px !important;
    padding-top:14px !important;
    border-top:1px solid #e2e8f0;
  }
  .arrival-head strong{
    font-size:20px !important;
  }
  #arrivalScrollNote{
    display:none !important;
  }
  .arrivals{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    gap:10px !important;
    padding:10px 0 0 !important;
    scrollbar-gutter:auto !important;
  }
  .arrivals::after{
    display:none !important;
  }
  .arrival-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:13px 14px !important;
    border-radius:14px !important;
    background:#fff;
  }
  .arrival-card .mins{
    font-size:24px !important;
  }
  .arrival-card .clock{
    font-size:14px !important;
  }
  .arrival-card .dest{
    margin-top:7px;
    font-size:17px !important;
    line-height:1.35 !important;
  }
  .arrival-card .route,
  .arrival-card .agency{
    font-size:12px !important;
  }
  .next-stop-status,
  .selected-stop-status{
    font-size:12px !important;
    line-height:1.45;
  }
  .arrival-location-note{
    font-size:11px !important;
  }
  .mobile-map-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:9px;
    padding:9px 10px;
    border-radius:9px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:13px;
    font-weight:900;
  }
  .mobile-map-cta span{
    font-size:22px;
    line-height:1;
  }
  .arrival-card-actions{
    margin-top:8px !important;
  }
  .approach-watch-button{
    min-height:42px;
    font-size:12px !important;
  }

  /* 表示設定は補助機能として簡潔にし、その後に地図→停留所一覧 */
  .toolbar{
    width:100% !important;
    margin:0 !important;
    padding:12px 14px !important;
    overflow:hidden !important;
    scroll-margin-top:74px !important;
  }
  .agency-settings,
  .mapsearch,
  .hub-direction-legend,
  #message{
    width:100% !important;
    min-width:0 !important;
  }
  .mapsearch{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px;
  }
  .mapsearch input{
    width:100% !important;
    min-width:0 !important;
  }
  .agency-filter-list{
    grid-template-columns:1fr !important;
  }
  .hub-direction-legend{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  main{
    display:grid !important;

    grid-template-rows:minmax(390px,55vh) auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  #map{

    min-width:0 !important;
    height:auto !important;
    min-height:390px !important;
  }
  #panel{
    width:100% !important;
    min-width:0 !important;
    min-height:320px !important;
    max-height:none !important;
    overflow:visible !important;
    border-left:0 !important;
    border-top:1px solid #dbe2ea;
  }

  /* Leaflet自身の要素もviewport幅から飛び出させない */
  .leaflet-container,
  .leaflet-control-container,
  .leaflet-popup-pane{
    max-width:none;
  }
  .leaflet-popup-content-wrapper{
    max-width:calc(100vw - 24px) !important;
  }

  .mobile-back-to-top{
    right:12px !important;
    bottom:16px !important;
  }
}


.clock-delay{
  display:inline-block;
  color:#b45309;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
@media(max-width:520px){
  .clock-delay{
    font-size:11px;
  }
}


@media(max-width:520px){
  .bus-marker-wrap{
    width:46px !important;
    height:46px !important;
    overflow:visible !important;
  }

  .bus-marker-wrap .bus-marker{
    position:relative !important;
    width:34px !important;
    height:34px !important;
    font-size:19px !important;
    border-width:3px !important;
    border-style:solid !important;
    background:#fff !important;
    box-shadow:
      0 2px 6px rgba(15,23,42,.28),
      0 0 0 3px #64748b !important;
  }

  /* 広島駅・広島バスセンター方面：青 */
  .bus-marker-wrap.hub-inbound .bus-marker{
    background:#2563eb !important;
    border-color:#fff !important;
    box-shadow:
      0 2px 6px rgba(15,23,42,.28),
      0 0 0 4px #2563eb !important;
  }

  /* 中心部から外向き：オレンジ */
  .bus-marker-wrap.hub-outbound .bus-marker{
    background:#f59e0b !important;
    border-color:#fff !important;
    box-shadow:
      0 2px 6px rgba(15,23,42,.28),
      0 0 0 4px #f59e0b !important;
  }

  /* 判定対象外・拠点停車中：白＋灰色 */
  .bus-marker-wrap.hub-at .bus-marker,
  .bus-marker-wrap.hub-neutral .bus-marker{
    background:#fff !important;
    border-color:#fff !important;
    box-shadow:
      0 2px 6px rgba(15,23,42,.28),
      0 0 0 4px #64748b !important;
  }

  /* 絵文字に隠れても方向色が必ず見える下部チップ */
  .bus-marker-wrap::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:1px;
    width:16px;
    height:5px;
    transform:translateX(-50%);
    border-radius:999px;
    background:#64748b;
    border:1px solid rgba(255,255,255,.95);
    box-shadow:0 1px 2px rgba(15,23,42,.25);
    pointer-events:none;
    z-index:4;
  }
  .bus-marker-wrap.hub-inbound::after{background:#2563eb;}
  .bus-marker-wrap.hub-outbound::after{background:#f59e0b;}
  .bus-marker-wrap.hub-at::after,
  .bus-marker-wrap.hub-neutral::after{background:#64748b;}

  .focused-marker .bus-marker-wrap .bus-marker{
    box-shadow:
      0 2px 8px rgba(15,23,42,.35),
      0 0 0 4px currentColor,
      0 0 0 8px rgba(255,255,255,.9) !important;
  }
  .focused-marker .bus-marker-wrap.hub-inbound{color:#2563eb;}
  .focused-marker .bus-marker-wrap.hub-outbound{color:#f59e0b;}
  .focused-marker .bus-marker-wrap.hub-at,
  .focused-marker .bus-marker-wrap.hub-neutral{color:#64748b;}
}


.selected-stop-route-summary{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:150px;
  max-width:240px;
  padding:8px 10px;
  border:2px solid #dc2626;
  border-radius:10px;
  background:rgba(255,255,255,.95);
  color:#172033;
  box-shadow:0 2px 8px rgba(15,23,42,.18);
  font-size:12px;
  line-height:1.35;
}
.selected-stop-route-summary strong{
  color:#b91c1c;
  font-size:13px;
}
.selected-stop-route-summary span{
  font-weight:800;
}
@media(max-width:520px){
  .selected-stop-route-summary{
    min-width:0;
    max-width:58vw;
    padding:7px 9px;
    font-size:11px;
  }
  .selected-stop-route-summary strong{
    font-size:12px;
  }
}


@media(max-width:520px){

  header{
    position:sticky !important;
    top:0 !important;
    z-index:1200 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    background:#071a3a !important;
  }

  header .brand{
    min-width:0 !important;
  }


  header .status{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:1px !important;
    min-width:64px !important;
    color:#fff !important;
    text-align:right !important;
    white-space:nowrap !important;
  }
  header .status strong{
    display:block !important;
    font-size:11px !important;
    line-height:1.15 !important;
    color:#fff !important;
  }
  header .status span{
    display:block !important;
    font-size:9px !important;
    line-height:1.15 !important;
    color:#cbd5e1 !important;
  }


  .selected-stop-row .reset-view-button{
    display:block !important;
    width:100% !important;
    min-height:42px !important;
    margin-top:8px !important;
    padding:8px 12px !important;
    border-radius:10px !important;
    font-size:13px !important;
    font-weight:800 !important;
  }

  /* 選択停留所が無い初期状態ではリセットボタンだけ出さない */
  .selected-stop-row:has(#selectedStop:empty) .reset-view-button{
    display:none !important;
  }
}

@media(max-width:520px){
  .selected-stop-row:not(.has-selected-stop) .reset-view-button{
    display:none !important;
  }

}


.mobile-reset-view{
  display:none;
}

@media(max-width:520px){
  .mobile-reset-view{
    position:fixed;
    left:14px;
    bottom:18px;
    z-index:99991;
    min-width:90px;
    min-height:48px;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.78);
    border-radius:999px;
    background:rgba(23,32,51,.94);
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:1.1;
    box-shadow:0 6px 18px rgba(15,23,42,.28);
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);
    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility .16s ease;
    align-items:center;
    justify-content:center;
    gap:4px;
  }

  .mobile-reset-view span:first-child{
    font-size:17px;
    line-height:1;
  }

  .mobile-reset-view.show{
    display:flex !important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  /* 上部の既存ボタンも従来どおり残す */
  .selected-stop-row.has-selected-stop .reset-view-button{
    display:block !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-reset-view{
    transition:none !important;
  }
}


:root{
  --fixed-app-header-height:62px;
}

/* stickyではなくfixedにして、iPhone Safariでもスクロール位置に関係なく常時表示 */
header#appHeader{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--fixed-app-header-height);
  min-height:var(--fixed-app-header-height) !important;
  z-index:100000 !important;
  background:#071a3a !important;
}

/* fixed化で本文がヘッダーの下へ潜らないように補正 */
body{
  padding-top:var(--fixed-app-header-height) !important;
}

/* タイトル全体を押せるが、見た目は従来のブランド表示を維持 */
header#appHeader .brand-home-button{
  appearance:none;
  -webkit-appearance:none;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin:0;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:inherit !important;
  box-shadow:none !important;
  text-align:left;
  cursor:pointer;
  transform:none !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,255,255,.12);
}

header#appHeader .brand-home-button:hover,
header#appHeader .brand-home-button:active{
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

header#appHeader .brand-home-button:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:4px;
  border-radius:4px !important;
}

@media(max-width:520px){


  header#appHeader{
    height:var(--fixed-app-header-height);

  }

  header#appHeader .brand-home-button{
    width:100%;
    overflow:hidden;
  }

  header#appHeader .brand-home-button > div:last-child{
    min-width:0;
  }

  header#appHeader .brand-home-button h1{
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


@media(max-width:520px){
  :root{
    --fixed-app-header-height:64px;
  }

  header#appHeader{
    height:var(--fixed-app-header-height) !important;
    min-height:var(--fixed-app-header-height) !important;
    padding:8px 10px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:6px !important;
    overflow:hidden;
  }

  header#appHeader .brand-home-button{
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  header#appHeader .brand-home-button > div:last-child{
    min-width:0 !important;
    overflow:hidden !important;
  }

  header#appHeader .brand-home-button h1{
    display:block !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }

  header#appHeader .brand-home-button p{
    display:block !important;
    margin:3px 0 0 !important;
    font-size:9px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
    color:#cbd5e1 !important;
  }

  header#appHeader .status{
    min-width:76px !important;
    max-width:92px !important;
    flex:0 0 auto !important;
  }

  header#appHeader .status strong{
    font-size:10px !important;
    line-height:1.1 !important;
  }

  header#appHeader .status span{
    margin-top:2px !important;
    font-size:8px !important;
    line-height:1.1 !important;
  }
}


@media(max-width:520px){
  .leaflet-popup{
    overflow:visible !important;
  }
  .leaflet-popup .mobile-popup-route-overlay{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:20 !important;
    pointer-events:none !important;
    overflow:hidden !important;
  }
  .leaflet-popup-close-button{
    z-index:30 !important;
  }
}


@media(min-width:901px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
  }

  body{
    height:auto !important;
    min-height:100vh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    display:block !important;
  }

  /* 上部の操作領域は通常フローで表示し、地図へ十分な高さを確保 */
  main{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 330px !important;
    grid-template-rows:minmax(560px,72vh) !important;
    width:100% !important;
    height:auto !important;
    min-height:560px !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #map{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    height:100% !important;
    min-height:560px !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  #panel{
    grid-column:2 !important;
    grid-row:1 !important;
    height:100% !important;
    min-height:0 !important;
    max-height:72vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-top:0 !important;
    border-left:1px solid var(--v8-line) !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  #tripDetail>strong{
    position:sticky !important;
    top:0 !important;
    z-index:10 !important;
    background:#fff !important;
  }
}

/* 大きなPC画面では地図をさらに広く見せる */
@media(min-width:1400px) and (min-height:850px){
  main{
    grid-template-rows:minmax(620px,74vh) !important;
    min-height:620px !important;
  }
  #map{
    min-height:620px !important;
  }
  #panel{
    max-height:74vh !important;
  }
}


:root{
  --hb30-blue:#123aa7;
}

/* 30系統だけ路線番号も青地・白文字 */
.hb-brand.hb-route30 .hb-route-no{
  background:var(--hb30-blue) !important;
  color:#fff !important;
  border-color:var(--hb30-blue) !important;
}

/* popup */
.hb30-sign{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 12px;
  background:var(--hb30-blue);
  color:#fff;
  line-height:1.05;
}

.hb30-via{
  flex:0 0 auto;
  padding:4px 6px;
  border:1.5px solid #fff;
  border-radius:5px;
  color:#fff;
  font-size:17px;
  font-weight:900;
  white-space:nowrap;
}

.hb30-destination{
  min-width:0;
  color:#fff;
  font-size:24px;
  font-weight:900;
  white-space:nowrap;
}

.hb30-destination span{
  margin-left:5px;
  font-size:11px;
  font-weight:800;
}

/* PC右側詳細 */
.hb30-detail-sign{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px 15px;
  background:var(--hb30-blue);
  color:#fff;
}

.hb30-detail-sign .hb30-via{
  font-size:20px;
  padding:5px 8px;
}

.hb30-detail-sign .hb30-destination{
  font-size:27px;
}

/* 30系統では既存の広島バス緑テーマを方向幕部分だけ青へ */
.hb-detail .hb-brand.hb-route30 .hb-route-no{
  background:var(--hb30-blue) !important;
}

@media(max-width:520px){
  .hb30-sign{
    gap:7px;
    padding:8px 9px 9px;
  }
  .hb30-via{
    font-size:14px;
    padding:3px 5px;
  }
  .hb30-destination{
    font-size:20px;
  }
  .hb30-destination span{
    font-size:10px;
  }
}


:root{
  --shared-route30-blue:#123aa7;
}

.shared-route30-sign{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
}

.shared-route30-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 4px;
}

.shared-route30-route-no,
.shared-route30-sign .hk-route-no,
.shared-route30-sign .std-route-no{
  display:inline-block;
  padding:4px 10px;
  border:1.5px solid #fff !important;
  border-radius:6px;
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
  font-weight:900;
  line-height:1;
}

.shared-route30-via{
  display:inline-block;
  padding:3px 6px;
  border:1.5px solid #fff;
  border-radius:5px;
  background:transparent;
  color:#fff;
  font-weight:900;
  white-space:nowrap;
}

.shared-route30-destination,
.shared-route30-sign .hk-destination{
  padding:8px 12px 12px;
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
  font-size:25px;
  font-weight:900;
  line-height:1.1;
}

.shared-route30-destination span,
.shared-route30-sign .hk-destination .hk-yuki{
  margin-left:5px;
  font-size:12px;
  color:#fff !important;
}

/* 広島交通30系統では既存の経由別背景色を上書き */
.shared-route30-shell .hk-sign-top,
.shared-route30-sign .hk-sign-top,
.shared-route30-sign .hk-nightbus-row{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
}

.shared-route30-sign .hk-via{
  background:transparent !important;
  color:#fff !important;
  border-color:#fff !important;
}

.shared-route30-detail-sign{
  padding-bottom:0;
}

.shared-route30-detail-brand .std-brand{
  border-bottom:0 !important;
}

.shared-route30-detail .hk-detail-sign{
  background:var(--shared-route30-blue) !important;
}

.shared-route30-detail .hk-detail-top,
.shared-route30-detail .hk-detail-destination{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
}

@media(max-width:520px){
  .shared-route30-top{
    gap:7px;
    padding:8px 9px 3px;
  }

  .shared-route30-route-no,
  .shared-route30-sign .hk-route-no{
    font-size:17px !important;
    padding:3px 7px;
  }

  .shared-route30-via{
    font-size:14px;
    padding:3px 5px;
  }

  .shared-route30-destination,
  .shared-route30-sign .hk-destination{
    font-size:20px !important;
    padding:7px 9px 9px;
  }
}


.hk-popup-shell.shared-route30-shell .hk-sign,
.hk-popup-shell.shared-route30-shell .hk-sign-top,
.hk-popup-shell.shared-route30-shell .hk-nightbus-row,
.hk-popup-shell.shared-route30-shell .hk-destination,
.hk-detail.shared-route30-detail .hk-detail-sign,
.hk-detail.shared-route30-detail .hk-detail-top,
.hk-detail.shared-route30-detail .hk-detail-destination{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
}

.hk-popup-shell.shared-route30-shell .hk-route-no,
.hk-detail.shared-route30-detail .hk-route-no{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
  border-color:#fff !important;
}

.hk-popup-shell.shared-route30-shell .hk-via,
.hk-detail.shared-route30-detail .hk-via,
.hk-detail.shared-route30-detail .shared-route30-via{
  background:transparent !important;
  color:#fff !important;
  border-color:#fff !important;
}


.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-sign,
.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-sign.hk-sign-buscenter,
.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-sign.hk-sign-motomachi,
.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-sign.hk-sign-tate-honkawa,
.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-sign.hk-sign-kamiyacho,
.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-sign-top,
.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-nightbus-row,
.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-destination{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
}

.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-route-no{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
  border-color:#fff !important;
}

.leaflet-popup-content .hk-popup-shell.shared-route30-shell .hk-via,
.leaflet-popup-content .hk-popup-shell.shared-route30-shell .shared-route30-via{
  background:transparent !important;
  color:#fff !important;
  border-color:#fff !important;
}

#panel .detail.shared-route30-detail.hk-detail .hk-detail-sign,
#panel .detail.shared-route30-detail.hk-detail .hk-detail-top,
#panel .detail.shared-route30-detail.hk-detail .hk-detail-destination{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
}

#panel .detail.shared-route30-detail.hk-detail .hk-route-no{
  background:var(--shared-route30-blue) !important;
  color:#fff !important;
  border-color:#fff !important;
}

#panel .detail.shared-route30-detail.hk-detail .hk-via,
#panel .detail.shared-route30-detail.hk-detail .shared-route30-via{
  background:transparent !important;
  color:#fff !important;
  border-color:#fff !important;
}


.flow-step{
  border-top:1px solid #dbe3ee;
}

.flow-step:first-child{
  border-top:0;
}

.flow-step-title{
  padding:16px 20px;
  font-size:20px;
  font-weight:800;
  color:#0f1b33;
}

.flow-step .flow-step-body{
  display:block;
}

.flow-step-waiting{
  background:#f4f6f9;
  color:#8a95a6;
  cursor:default;
}

.flow-step-waiting .flow-step-title,
.flow-step-waiting .flow-step-title strong{
  color:#8a95a6;
}

.flow-step-waiting .step-no{
  background:#aeb7c4 !important;
  color:#fff !important;
}

.flow-step-waiting .flow-step-body{
  display:none !important;
}

.flow-step-active{
  background:#fff;
}

#stopStep2.flow-step-active .flow-step-title,
#stopStep3.flow-step-active .flow-step-title{
  color:#0f1b33;
}

#stopStep2.flow-step-active .destination-controls,
#stopStep2.flow-step-active .destination-filters{
  display:block;
}

#stopStep3.flow-step-active .arrivals{
  display:block;
}

/* PCでは既存レイアウトを崩さず、待機行だけコンパクトにする */
@media(min-width:521px){
  .flow-step-waiting .flow-step-title{
    padding-top:13px;
    padding-bottom:13px;
  }
}

/* スマホはステップ境界を明確にし、タイトルだけの待機行を省スペース化 */
@media(max-width:520px){
  .flow-step-title{
    padding:16px 16px;
    font-size:20px;
  }

  .flow-step-waiting .flow-step-title{
    padding-top:14px;
    padding-bottom:14px;
  }

  #stopStep2.flow-step-active .flow-step-body,
  #stopStep3.flow-step-active .flow-step-body{
    padding-bottom:4px;
  }
}


.popup-stop-disclosure{
  background:#fff;
  color:#0f1b33;
  border-top:1px solid #dbe3ee;
}

.popup-stop-toggle{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:10px 12px;
  border:0;
  border-radius:0;
  background:#fff;
  color:#0f1b33;
  font:inherit;
  font-size:13px;
  font-weight:900;
  text-align:left;
  cursor:pointer;
  box-shadow:none;
}

.popup-stop-toggle:hover{
  background:#f8fafc;
}

.popup-stop-chevron{
  flex:0 0 auto;
  color:#64748b;
  font-size:12px;
}

.popup-stop-body{
  max-height:260px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  border-top:1px solid #eef2f6;
  background:#f8fafc;
  scrollbar-width:thin;
}

.popup-stop-loading,
.popup-stop-empty{
  padding:12px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
}

.popup-stop-timeline{
  list-style:none;
  margin:0;
  padding:8px 10px 10px 28px;
  position:relative;
}

.popup-stop-timeline::before{
  content:"";
  position:absolute;
  /* v9.03: 通常丸・現在停留所丸・バスアイコンの中心軸へ揃える */
  left:15.5px;
  top:16px;
  bottom:18px;
  width:2px;
  background:#94a3b8;
}

.popup-stop-row,
.popup-stop-bus-position{
  position:relative;
  min-height:30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:5px 4px 5px 8px;
  font-size:11px;
}

.popup-stop-dot{
  position:absolute;
  left:-17px;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-5px;
  border:2px solid #2563eb;
  border-radius:50%;
  background:#fff;
  box-sizing:border-box;
  z-index:2;
}

.popup-stop-bus-position .popup-stop-dot.bus{
  width:24px;
  height:24px;
  left:-25px;
  margin-top:-12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#fff;
  font-size:15px;
  line-height:1;
  box-shadow:0 1px 5px rgba(15,23,42,.22);
}

.popup-stop-name{
  min-width:0;
  font-weight:800;
  line-height:1.25;
}

.popup-stop-time{
  color:#64748b;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  font-size:10px;
}

.popup-stop-row.passed-stop{
  color:#94a3b8;
}

.popup-stop-row.passed-stop .popup-stop-dot{
  border-color:#94a3b8;
  background:#e2e8f0;
}

.popup-stop-row.current-stop{
  color:#0f1b33;
  background:#eaf2ff;
  border-radius:6px;
}

.popup-stop-row.current-stop .popup-stop-dot{
  width:13px;
  height:13px;
  left:-19px;
  margin-top:-7px;
  background:#2563eb;
  border:3px solid #fff;
  box-shadow:0 0 0 2px #2563eb;
}

.popup-stop-bus-position{
  color:#0f1b33;
  font-weight:900;
  background:#fff7ed;
  border-radius:6px;
  margin:2px 0;
}

@media(max-width:520px){
  .popup-stop-toggle{
    min-height:40px;
    padding:9px 10px;
    font-size:12px;
  }

  .popup-stop-body{
    max-height:min(230px,34vh);
    -webkit-overflow-scrolling:touch;
  }

  .popup-stop-timeline{
    padding-left:27px;
    padding-right:8px;
  }

  /*
    v9.06:
    スマホではtimelineの左paddingがPCの28pxから27pxへ1px縮むため、
    丸の中心軸も15.5px→14.5pxへ移動する。
    縦線とバスアイコンも同じ14.5px軸へ揃える。
  */
  .popup-stop-timeline::before{
    left:14.5px;
  }

  .popup-stop-bus-position .popup-stop-dot.bus{
    left:-24.5px;
  }

  .popup-stop-row,
  .popup-stop-bus-position{
    min-height:29px;
    font-size:10.5px;
  }
}


.bus-speed,
.bus-bearing,
.bus-direction-detail,
[data-bus-speed],
[data-bus-bearing]{
  display:none !important;
}


@media(max-width:520px){
  #panel{
    display:none !important;
  }

  main{
    grid-template-columns:1fr !important;
  }

  #map{
    grid-column:1 !important;
    width:100% !important;
  }
}


.hk-popup-shell,
.hb-popup,
.std-popup{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.bus-popup-fixed{
  flex:0 0 auto;
  position:relative;
  z-index:2;
  background:#fff;
}

.bus-popup-scroll{
  flex:1 1 auto;
  min-height:0;
  max-height:300px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}

/* 停留所一覧は外側のスクロール領域に統合し、二重スクロールを避ける */
.bus-popup-scroll .popup-stop-body{
  max-height:none !important;
  overflow:visible !important;
}

/* 展開中の停留所情報のタイトルは下部スクロール領域内で上端に残す */
.bus-popup-scroll .popup-stop-toggle{
  position:sticky;
  top:0;
  z-index:3;
}

/* 上部固定領域と下部の境界を明確化 */
.bus-popup-fixed + .bus-popup-scroll{
  border-top:1px solid #dbe3ee;
}

@media(max-width:520px){
  .bus-popup-scroll{
    /* iPhoneで上部固定領域を確実に残しつつ、停留所一覧を十分確認可能 */
    max-height:min(280px,40vh);
  }

  .bus-popup-scroll .popup-stop-body{
    max-height:none !important;
    overflow:visible !important;
    -webkit-overflow-scrolling:auto;
  }
}


.mobile-arrivals-toggle{
  display:none;
}

@media(max-width:520px){
  .mobile-arrivals-toggle{
    display:flex;
    width:100%;
    min-height:48px;
    margin:10px 0 2px;
    padding:10px 14px;
    align-items:center;
    justify-content:center;
    border:1px solid #cbd5e1;
    border-radius:12px;
    background:#fff;
    color:#0f1b33;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-arrivals-toggle:active{
    background:#f1f5f9;
  }
}


/* =========================================================
   v9.08 地図上固定・停留所情報パネル
   ========================================================= */
.map-stop-info-panel{
  position:absolute;
  top:16px;
  right:16px;
  z-index:850;
  width:min(360px,calc(100% - 32px));
  max-height:calc(100% - 32px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(15,23,42,.22);
  color:#0f172a;
}

.map-stop-info-panel[hidden]{
  display:none !important;
}

.map-stop-info-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px 10px 14px;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}

.map-stop-info-titlebox{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.map-stop-info-title{
  font-size:15px;
  font-weight:900;
  line-height:1.2;
}

.map-stop-info-subtitle{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#475569;
  font-size:11px;
  font-weight:800;
}

.map-stop-info-close{
  flex:0 0 auto;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f1f5f9;
  color:#334155;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.map-stop-info-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#f8fafc;
}

.map-stop-info-body .popup-stop-timeline{
  padding-top:10px;
  padding-bottom:14px;
}

.popup-stop-launcher{
  border-top:1px solid #eef2f6;
  background:#fff;
}

.popup-stop-launcher .popup-stop-toggle{
  border-top:0;
}

.map-stop-info-toggle[aria-pressed="true"]{
  background:#eff6ff;
  color:#1d4ed8;
}

@media(max-width:520px){
  .map-stop-info-panel{
    top:auto;
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    max-height:min(48vh,390px);
    border-radius:16px;
    box-shadow:0 -8px 28px rgba(15,23,42,.22);
  }

  .map-stop-info-head{
    padding:10px 10px 9px 12px;
  }

  .map-stop-info-title{
    font-size:14px;
  }

  .map-stop-info-subtitle{
    font-size:10.5px;
  }

  .map-stop-info-close{
    width:32px;
    height:32px;
    font-size:20px;
  }

  .map-stop-info-body .popup-stop-timeline{
    padding-left:27px;
    padding-right:8px;
  }

  .map-stop-info-body .popup-stop-timeline::before{
    left:14.5px;
  }

  .map-stop-info-body .popup-stop-bus-position .popup-stop-dot.bus{
    left:-24.5px;
  }
}


/* =========================================================
   v9.10 現在地検索ボタンの状態復元
   ========================================================= */
.nearby-stops-button:not(:disabled):not(.is-loading){
  background:#fff !important;
  color:#0b6b3d !important;
  opacity:1 !important;
  cursor:pointer !important;
}

.nearby-stops-button.is-loading,
.nearby-stops-button:disabled{
  background:#f0faf4 !important;
  color:#0b6b3d !important;
  opacity:.65 !important;
  cursor:wait !important;
}

@media(max-width:520px){
  .nearby-stops-button:not(:disabled):not(.is-loading){
    background:#fff !important;
    color:#0b6b3d !important;
    opacity:1 !important;
  }
}


/* =========================================================
   v9.11 詳細画面: 行先帯の全幅化 / 速度・進行方向の完全非表示
   ========================================================= */

/* 詳細パネル内で会社ヘッダー・行先帯が右端まで届くよう幅計算を統一 */
#panel .detail{
  min-width:0 !important;
  overflow-x:hidden !important;
}

#panel .hb-detail-brand,
#panel .std-detail-brand,
#panel .op-detail-brand{
  box-sizing:border-box !important;
  width:calc(100% + 36px) !important;
  max-width:none !important;
}

#panel .hb-detail-destination,
#panel .std-detail-destination,
#panel .hk-detail-destination,
#panel .shared-route30-destination{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* 仕様として速度・進行方向は表示しない。
   既存class/data属性の双方を強制非表示にする。 */
#panel .bus-speed,
#panel .bus-bearing,
#panel .bus-direction-detail,
#panel [data-bus-speed],
#panel [data-bus-bearing],
.bus-speed,
.bus-bearing,
.bus-direction-detail,
[data-bus-speed],
[data-bus-bearing]{
  display:none !important;
}

/* スマホで詳細画面が表示される旧キャッシュとの混在時も横にはみ出させない */
@media(max-width:520px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  #panel,
  #panel .detail{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  #panel .hb-detail-brand,
  #panel .std-detail-brand,
  #panel .op-detail-brand{
    width:calc(100% + 36px) !important;
    max-width:none !important;
  }

  #panel .hb-detail-destination,
  #panel .std-detail-destination,
  #panel .hk-detail-destination,
  #panel .shared-route30-destination{
    width:100% !important;
    max-width:none !important;
  }
}


/* =========================================================
   v9.13 GPS高精度測位表示
   ========================================================= */
.nearby-loading{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nearby-loading strong{
  color:#344054;
  font-size:12px;
}

.nearby-loading span,
.nearby-accuracy{
  display:block;
  margin-top:2px;
  color:#667085;
  font-size:10px;
  font-weight:600;
}

.nearby-panel-head > div{
  min-width:0;
}


/* =========================================================
   v9.14 スマホ吹き出しの初回表示安定化
   ========================================================= */
@media(max-width:520px){
  /* 情報量を保ったまま左右余白を少し増やし、端への張り付きを抑える。 */
  .leaflet-popup{
    max-width:min(286px,calc(100vw - 46px)) !important;
  }

  .leaflet-popup-content{
    max-width:266px !important;
  }

  .leaflet-popup-content:has(.hk-sign){
    width:min(266px,calc(100vw - 56px)) !important;
    max-width:266px !important;
  }

  .hk-sign{
    max-width:266px !important;
  }
}


/* =========================================================
   v9.15 ドコオル / スマホ・シンプルモード
   ========================================================= */
.brand-logo{
  width:54px;
  height:54px;
  flex:0 0 54px;
  object-fit:cover;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.28);
}
.brand-copy{min-width:0;text-align:left;}
.brand-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.05em;color:#7dd3fc;margin-bottom:1px;}
.brand-copy h1{margin:0!important;font-size:26px!important;line-height:1!important;letter-spacing:.04em;}
.brand-copy p{margin:4px 0 0!important;font-size:10px!important;opacity:.82;}
.mobile-mode-switch{display:none;}

@media(max-width:520px){
  #appHeader .brand{gap:9px!important;}
  .brand-logo{width:46px;height:46px;flex-basis:46px;border-radius:11px;}
  .brand-kicker{font-size:8px;white-space:nowrap;}
  .brand-copy h1{font-size:24px!important;}
  .brand-copy p{font-size:8px!important;white-space:nowrap;}

  .mobile-mode-switch{
    display:grid;
    grid-template-columns:1fr 1fr 82px;
    gap:4px;
    position:sticky;
    top:var(--mobile-header-height,74px);
    z-index:1190;
    padding:7px 12px;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid #dbe4ef;
    box-shadow:0 3px 10px rgba(15,23,42,.06);
  }
  .mobile-mode-switch button{
    min-height:38px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#fff;
    color:#475569;
    font-weight:900;
    font-size:13px;
  }
  .mobile-mode-switch button.active{
    background:#071a3a;
    border-color:#071a3a;
    color:#fff;
  }

  /* シンプルモードでは地図関連UIを描画領域から外す。 */
  body.mobile-simple-mode .toolbar,
  body.mobile-simple-mode main,
  body.mobile-simple-mode #mobileResetView{
    display:none!important;
  }
  body.mobile-simple-mode #mobileBackToTop{display:flex!important;}

  body.mobile-simple-mode .stop-search{
    padding-bottom:84px!important;
  }
  body.mobile-simple-mode #stopStep2,
  body.mobile-simple-mode #stopStep3{
    background:#fff;
  }
  body.mobile-simple-mode #stopStep3.flow-step-active{
    display:block!important;
  }
  body.mobile-simple-mode #stopStep3 .arrival-head strong::after{
    content:" ・ 次に来る3台";
    font-size:12px;
    color:#64748b;
    font-weight:800;
  }
  body.mobile-simple-mode .arrivals{
    gap:9px!important;
  }
  body.mobile-simple-mode .arrival-card{
    cursor:default!important;
    box-shadow:0 3px 12px rgba(15,23,42,.07)!important;
  }
  body.mobile-simple-mode .arrival-card:active{
    transform:none!important;
  }
  body.mobile-simple-mode .arrival-card .mins{
    font-size:28px!important;
  }
  body.mobile-simple-mode .arrival-card .dest{
    font-size:18px!important;
  }
  body.mobile-simple-mode .mobile-map-cta{
    display:none!important;
  }
  body.mobile-simple-mode .mobile-arrivals-toggle{
    display:none!important;
  }
  body.mobile-simple-mode .destination-controls-row,
  body.mobile-simple-mode #destinationFilters,
  body.mobile-simple-mode #selectedDestinationLabel{
    display:none!important;
  }
  body.mobile-simple-mode .mobile-destination-select-wrap{
    display:block!important;
  }
  body.mobile-simple-mode .selected-stop-row{
    scroll-margin-top:122px;
  }

  body.mobile-detail-mode .toolbar,
  body.mobile-detail-mode main{
    display:grid;
  }
}


/* =========================================================
   v9.17 シンプルモード：モード切替とSTEP表示の重なり修正
   ========================================================= */
@media(max-width:520px){
  /*
    v9.15のモード切替はstickyだったため、ページをスクロールすると
    STEP 1のラベルや入力欄が切替バーの背面へ入り込んでいた。
    シンプルモードでは通常フローへ戻し、物理的な重なりをなくす。
  */
  body.mobile-simple-mode .mobile-mode-switch{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:20 !important;
    width:100% !important;
    margin:0 !important;
    background:#fff !important;
    box-shadow:0 1px 0 #dbe4ef !important;
  }

  body.mobile-simple-mode .stop-search{
    position:relative !important;
    z-index:1 !important;
    padding-top:14px !important;
    margin-top:0 !important;
  }

  body.mobile-simple-mode #stopStep1{
    position:relative !important;
    z-index:1 !important;
    padding-top:0 !important;
  }

  /* 詳細マップ側は切替をstickyのまま維持する。 */
  body.mobile-detail-mode .mobile-mode-switch{
    background:#fff !important;
  }
}


/* =========================================================
   v9.20 シンプルモード：現在走行中のバス位置
   ========================================================= */
.simple-live-positions{
  display:none;
}

@media(max-width:520px){
  body.mobile-simple-mode .simple-live-positions{
    display:block;
    margin:18px 0 4px;
    padding-top:15px;
    border-top:1px solid #dbe4ef;
  }

  body.mobile-simple-mode .simple-live-positions[hidden]{
    display:none !important;
  }

  .simple-live-positions-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
  }

  .simple-live-positions-head strong{
    color:#0f1b33;
    font-size:17px;
    font-weight:900;
  }

  .simple-live-positions-head span{
    color:#64748b;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
  }

  .simple-live-positions-list{
    display:grid;
    gap:8px;
  }

  .simple-live-position-card{
    padding:11px 12px;
    border:1px solid #cbd5e1;
    border-radius:13px;
    background:#fff;
    box-shadow:0 2px 8px rgba(15,23,42,.05);
  }

  .simple-live-position-title{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    line-height:1.2;
  }

  .simple-live-position-title strong{
    color:#071a3a;
    font-size:19px;
    font-weight:900;
  }

  .simple-live-position-title span{
    display:inline-flex;
    min-width:32px;
    justify-content:center;
    padding:3px 7px;
    border-radius:999px;
    background:#e9f7ef;
    color:#16824b;
    font-size:12px;
    font-weight:900;
  }

  .simple-live-position-title span:empty{
    display:none;
  }

  .simple-live-position-title b{
    color:#1e293b;
    font-size:14px;
    font-weight:900;
  }

  .simple-live-position-location{
    margin-top:8px;
    padding:8px 9px;
    border-radius:8px;
    background:#f1f5f9;
    color:#334155;
    font-size:13px;
    font-weight:800;
    line-height:1.4;
  }

  .simple-live-position-card.is-loading .simple-live-position-location{
    color:#64748b;
    font-weight:700;
  }

  .simple-live-empty{
    padding:10px 11px;
    border-radius:10px;
    background:#f8fafc;
    color:#64748b;
    font-size:12px;
  }
}


/* =========================================================
   v9.21 シンプルモード：現在位置を到着カード内へ統合
   ========================================================= */
#simpleLivePositions{
  display:none !important;
}

@media(max-width:520px){
  body.mobile-simple-mode .simple-current-position{
    margin-top:7px !important;
    padding:9px 10px !important;
    border-left:3px solid #2563eb !important;
    border-radius:8px !important;
    background:#f1f5f9 !important;
    color:#172033 !important;
    font-size:13px !important;
    font-weight:900 !important;
    line-height:1.45 !important;
  }
}


/* =========================================================
   v9.22 シンプルモード：カード内ミニ停留所タイムライン
   ========================================================= */
@media(max-width:520px){
  body.mobile-simple-mode .arrival-card-button{
    cursor:pointer;
  }

  body.mobile-simple-mode .simple-card-tap-hint{
    margin-top:10px;
    padding-top:8px;
    border-top:1px solid #e2e8f0;
    color:#64748b;
    font-size:11px;
    font-weight:800;
    text-align:center;
  }

  body.mobile-simple-mode .arrival-card-button.is-simple-expanded .simple-card-tap-hint span{
    display:inline-block;
    transform:rotate(180deg);
  }

  body.mobile-simple-mode .simple-arrival-expand{
    margin-top:10px;
    padding:12px 10px 10px;
    border:1px solid #dbe4ef;
    border-radius:12px;
    background:#f8fafc;
  }

  body.mobile-simple-mode .simple-arrival-expand[hidden]{
    display:none !important;
  }

  .simple-mini-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
  }

  .simple-mini-head strong{
    color:#0f1b33;
    font-size:14px;
    font-weight:900;
  }

  .simple-mini-head span{
    color:#64748b;
    font-size:11px;
    font-weight:800;
  }

  .simple-mini-timeline{
    position:relative;
    list-style:none;
    margin:0;
    padding:2px 0 2px 28px;
  }

  .simple-mini-timeline::before{
    content:"";
    position:absolute;
    left:10px;
    top:8px;
    bottom:8px;
    width:2px;
    background:#cbd5e1;
  }

  .simple-mini-stop,
  .simple-mini-bus{
    position:relative;
    display:flex;
    align-items:center;
    min-height:31px;
    gap:7px;
  }

  .simple-mini-dot{
    position:absolute;
    left:-23px;
    z-index:1;
    display:grid;
    place-items:center;
    width:12px;
    height:12px;
    border:2px solid #64748b;
    border-radius:50%;
    background:#fff;
    box-sizing:border-box;
  }

  .simple-mini-bus .simple-mini-dot{
    left:-28px;
    width:22px;
    height:22px;
    border:0;
    background:transparent;
    font-size:18px;
  }

  .simple-mini-name{
    color:#334155;
    font-size:13px;
    font-weight:800;
  }

  .simple-mini-stop.passed .simple-mini-name{
    color:#94a3b8;
  }

  .simple-mini-stop.current .simple-mini-dot{
    width:15px;
    height:15px;
    left:-24.5px;
    border-color:#2563eb;
    background:#2563eb;
  }

  .simple-mini-stop.target{
    margin-top:3px;
    padding:5px 7px;
    border-radius:8px;
    background:#eaf8f1;
  }

  .simple-mini-stop.target .simple-mini-dot{
    border-color:#0b8a55;
    background:#0b8a55;
  }

  .simple-mini-stop.target .simple-mini-name{
    color:#086b45;
    font-weight:900;
  }

  .simple-mini-target-label{
    margin-left:auto;
    color:#086b45;
    font-size:10px;
    font-weight:900;
  }

  .simple-mini-loading,
  .simple-mini-empty{
    padding:8px;
    color:#64748b;
    font-size:12px;
    text-align:center;
  }

  .simple-open-detail-map{
    width:100%;
    margin-top:10px;
    padding:11px 12px;
    border:1px solid #0b8a55;
    border-radius:10px;
    background:#fff;
    color:#087246;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
  }
}


/* =========================================================
   v9.24 詳細マップ：モード切替とSTEP表示の重なり修正
   ========================================================= */
@media(max-width:520px){
  /*
    詳細マップでもsticky切替バーがSTEP 1の上へ重なるケースがあったため、
    シンプルモードと同じく通常フローに統一する。
    ヘッダー → モード切替 → STEP 1 の順序を常に維持する。
  */
  body.mobile-detail-mode .mobile-mode-switch{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:20 !important;
    width:100% !important;
    margin:0 !important;
    background:#fff !important;
    box-shadow:0 1px 0 #dbe4ef !important;
  }

  body.mobile-detail-mode .stop-search{
    position:relative !important;
    z-index:1 !important;
    margin-top:0 !important;
    padding-top:14px !important;
  }

  body.mobile-detail-mode #stopStep1{
    position:relative !important;
    z-index:1 !important;
    padding-top:0 !important;
  }

  /* モード切替そのものが本文を覆わないため、スクロール位置も安定する。 */
  body.mobile-detail-mode #stopStep1,
  body.mobile-detail-mode #stopStep2,
  body.mobile-detail-mode #stopStep3{
    scroll-margin-top:78px !important;
  }
}


/* =========================================================
   v9.26 スマホヘッダー右上表示のはみ出し防止
   ========================================================= */
@media(max-width:520px){
  header#appHeader{
    box-sizing:border-box !important;
    max-width:100vw !important;
  }

  header#appHeader .status{
    min-width:58px !important;
    max-width:70px !important;
    width:70px !important;
    overflow:hidden !important;
    text-align:right !important;
  }

  header#appHeader .status strong,
  header#appHeader .status span{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }

  header#appHeader .brand-home-button{
    min-width:0 !important;
    overflow:hidden !important;
  }
}


/* =========================================================
   v9.27 バージョン表記
   ========================================================= */
.app-version-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  box-sizing:border-box;
  padding:16px 12px 20px;
  border-top:1px solid #e2e8f0;
  background:#f8fafc;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}

.app-version-footer span:last-child{
  color:#475569;
  font-weight:900;
}

@media(max-width:520px){
  .app-version-footer{
    padding:14px 12px calc(82px + env(safe-area-inset-bottom,0px));
    font-size:10px;
  }
}


/* v9.30 シンプルモード仕上げ */
.arrival-next-badge{
  display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;
  background:#0b8a55;color:#fff;font-size:10px;font-weight:900;white-space:nowrap;
}
.arrival-freshness-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;
  background:#f1f5f9;color:#475569;font-size:10px;font-weight:900;white-space:nowrap;
}
.arrival-freshness-badge small{font-size:9px;font-weight:800;opacity:.8}
.arrival-freshness-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#94a3b8}
.arrival-freshness-badge.live .arrival-freshness-dot{background:#16a34a}
.arrival-freshness-badge.aging .arrival-freshness-dot{background:#f59e0b}
.arrival-freshness-badge.stale .arrival-freshness-dot{background:#dc2626}
.arrival-freshness-badge.schedule .arrival-freshness-dot{background:#94a3b8}

/* v9.32.3 到着カードの運行会社表示 */
.arrival-operator{
  --arrival-operator-theme:#64748b;
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  min-height:36px;
  margin-top:8px;
  padding:5px 10px 5px 6px;
  overflow:hidden;
  border:1px solid #d7e0ea;
  border-left:5px solid var(--arrival-operator-theme);
  border-radius:9px;
  background:#f8fafc;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.arrival-operator-kicker{
  flex:0 0 auto;
  padding:3px 6px;
  border-radius:5px;
  background:var(--arrival-operator-theme);
  color:#fff;
  font-size:9px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
}
.arrival-operator-logo{
  flex:0 0 auto;
  width:48px;
  height:24px;
  object-fit:contain;
  object-position:center;
}
.arrival-operator-placeholder{
  flex:0 0 auto;
  padding:3px 5px;
  border:1px solid #cbd5e1;
  border-radius:4px;
  background:#fff;
  color:#475569;
  font-size:8px;
  font-weight:900;
}
.arrival-operator-name{
  min-width:0;
  overflow:hidden;
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.arrival-destination-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 10px;
  margin-top:7px;
}
.arrival-destination-row .dest{min-width:0;margin-top:0}
.arrival-operator.arrival-operator-compact{
  flex:0 1 auto;
  width:auto;
  max-width:220px;
  min-height:31px;
  margin-top:0;
  padding:4px 8px 4px 5px;
  gap:5px;
  border-left-width:3px;
  border-radius:8px;
  box-shadow:none;
}
.arrival-operator-compact .arrival-operator-kicker{display:none}
.arrival-operator-compact .arrival-operator-logo{width:38px;height:20px}
.arrival-operator-compact .arrival-operator-name{
  overflow:visible;
  font-size:11px;
  line-height:1.15;
  text-overflow:clip;
  white-space:normal;
}
@media(max-width:520px){
  body.mobile-simple-mode .arrival-card-button:first-of-type{
    border-color:#86cbb0;box-shadow:0 3px 12px rgba(11,138,85,.10);
  }
  body.mobile-simple-mode .arrival-card-topline{flex-wrap:wrap}
  body.mobile-simple-mode .simple-current-position{overflow-wrap:anywhere}
  body.mobile-simple-mode .arrival-operator{
    width:100%;
    min-height:42px;
    padding:6px 10px 6px 7px;
    background:#f4f7fb;
  }
  body.mobile-simple-mode .arrival-operator-kicker{font-size:10px}
  body.mobile-simple-mode .arrival-operator-logo{width:56px;height:27px}
  body.mobile-simple-mode .arrival-operator-name{font-size:14px}
  body.mobile-simple-mode .arrival-destination-row .dest{margin-top:0!important}
  body.mobile-simple-mode .arrival-operator.arrival-operator-compact{
    flex:0 1 auto;
    width:auto;
    max-width:100%;
    min-height:32px;
    padding:4px 7px 4px 5px;
    background:#f8fafc;
  }
  body.mobile-simple-mode .arrival-operator-compact .arrival-operator-logo{width:38px;height:20px}
  body.mobile-simple-mode .arrival-operator-compact .arrival-operator-name{font-size:11px}
}


/* =========================================================
   v9.31 時刻表 OSD
   ========================================================= */
.timetable-launch-row{margin-top:10px}
.timetable-launch-button{
  border:1px solid #cbd5e1;background:#fff;color:#0f3d62;border-radius:10px;
  padding:9px 14px;font-weight:900;cursor:pointer;
}
.timetable-overlay{
  position:fixed;inset:0;z-index:10050;background:rgba(15,23,42,.58);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.timetable-overlay[hidden]{display:none!important}
.timetable-dialog{
  width:min(680px,100%);max-height:min(86vh,820px);background:#fff;border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden;
}
.timetable-dialog-head{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  padding:18px 20px 14px;border-bottom:1px solid #e2e8f0;
}
.timetable-kicker{font-size:12px;font-weight:900;color:#64748b}
.timetable-dialog h2{margin:2px 0 3px;font-size:21px;color:#0f172a}
.timetable-subtitle{font-size:12px;color:#64748b}
.timetable-close-x{
  width:40px;height:40px;border:0;border-radius:50%;background:#f1f5f9;
  font-size:27px;line-height:1;cursor:pointer;color:#334155;
}
.timetable-dialog-body{padding:14px 20px 18px;overflow-y:auto;overscroll-behavior:contain}
.timetable-now-info{
  position:sticky;top:-14px;z-index:2;margin:-2px 0 10px;padding:9px 10px;
  background:#eff6ff;border-radius:9px;color:#1d4ed8;font-weight:900;font-size:13px;
}
.timetable-hour-row{display:grid;grid-template-columns:58px 1fr;border-top:1px solid #e2e8f0;padding:10px 0}
.timetable-hour-row:first-child{border-top:0}
.timetable-hour{font-size:25px;font-weight:900;color:#0f3d62;line-height:1.25}
.timetable-hour small{font-size:11px;margin-left:2px}
.timetable-minutes{display:flex;flex-wrap:wrap;gap:8px}
.timetable-minute-item{
  min-width:50px;padding:5px 7px;border-radius:8px;background:#f8fafc;text-align:center;
}
.timetable-minute-item strong{display:block;font-size:18px;color:#0f172a}
.timetable-minute-item span{display:block;max-width:80px;font-size:9px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timetable-show-all{width:100%;margin-top:14px}
.timetable-note{font-size:11px;line-height:1.6;color:#64748b;margin:14px 0 0}
.timetable-loading,.timetable-empty{padding:30px 12px;text-align:center;color:#64748b}
.timetable-dialog-foot{padding:12px 20px 16px;border-top:1px solid #e2e8f0;background:#fff}
.timetable-close-bottom{
  width:100%;border:0;border-radius:10px;padding:11px;background:#0f3d62;color:#fff;
  font-weight:900;font-size:15px;cursor:pointer;
}
@media(max-width:520px){
  .timetable-launch-button{width:100%;min-height:44px}
  .timetable-overlay{padding:10px;align-items:flex-end}
  .timetable-dialog{width:100%;max-height:92dvh;border-radius:18px 18px 10px 10px}
  .timetable-dialog-head{padding:15px 15px 12px}
  .timetable-dialog-body{padding:12px 15px 16px}
  .timetable-now-info{top:-12px}
  .timetable-dialog-foot{padding:10px 15px 14px}
  .timetable-hour-row{grid-template-columns:50px 1fr}
  .timetable-hour{font-size:23px}
  .timetable-minutes{gap:6px}
  .timetable-minute-item{min-width:46px;padding:5px}
}


/* v9.31.2 ヘッダー rev 表記 */
.brand-title-row{
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
}
.brand-title-row h1{
  flex:0 1 auto;
}
.brand-revision{
  display:inline-flex;
  align-items:center;
  padding:2px 5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  color:#cbd5e1;
  font-size:8px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
@media(max-width:520px){
  .brand-title-row{gap:5px}
  .brand-revision{
    font-size:7px;
    padding:2px 4px;
  }
}


/* =========================================================
   v9.32 お気に入りバス停・よく使う行き先
   ========================================================= */
.favorites-panel{
  margin:10px 0 0;
  padding:11px 12px;
  border:1px solid #dbe3ee;
  border-radius:12px;
  background:#fffdf6;
}
.favorites-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  color:#7c5b00;
}
.favorites-head strong{font-size:13px}
.favorites-head small{font-size:10px;color:#7c6f52}
.favorite-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}
.favorite-actions button{
  min-height:34px;
  padding:6px 10px;
  border:1px solid #d6b74c;
  border-radius:9px;
  background:#fff;
  color:#705400;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.favorite-actions button:disabled{
  border-color:#d8dee7;
  background:#f4f6f8;
  color:#9aa4b2;
  cursor:not-allowed;
}
.favorite-actions .favorite-slot-button{
  border-color:#9fb7d4;
  color:#24496f;
}
.favorite-actions .favorite-slot-button.is-active{
  border-color:#1f6f54;
  background:#eaf8f1;
  color:#14563f;
}
.favorite-items{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:9px;
}
.favorite-empty{
  color:#7c6f52;
  font-size:11px;
}
.favorite-item{
  display:flex;
  max-width:100%;
  border:1px solid #eadb9e;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
}
.favorite-open{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:7px 9px;
  border:0;
  background:#fff;
  color:#27364b;
  cursor:pointer;
}
.favorite-open strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.favorite-kind{
  flex:0 0 auto;
  padding:2px 5px;
  border-radius:999px;
  background:#fff4bf;
  color:#765b00;
  font-size:9px;
  font-weight:900;
}
.favorite-slot{
  flex:0 0 auto;
  padding:3px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.favorite-slot-home{
  background:#e8f7ef;
  color:#12603f;
}
.favorite-slot-work{
  background:#eaf1fb;
  color:#244f83;
}
.favorite-remove{
  width:32px;
  flex:0 0 32px;
  border:0;
  border-left:1px solid #f0e7c5;
  background:#fffaf0;
  color:#8b6b16;
  font-size:18px;
  cursor:pointer;
}
.favorite-open:hover,.favorite-open:focus-visible{background:#fff9df}
.favorite-remove:hover,.favorite-remove:focus-visible{background:#fff0c2}

@media(max-width:520px){
  .favorites-panel{margin:9px 0 0;padding:10px}
  .favorite-actions{display:grid;grid-template-columns:1fr 1fr}
  .favorite-actions button{min-height:42px;padding:6px;font-size:10px}
  .favorite-items{display:grid;grid-template-columns:1fr}
  .favorite-item{width:100%}
  .favorite-open{flex:1}
  .favorite-remove{width:40px;flex-basis:40px}
}

/* v9.32.1: 照合異常時だけ表示する診断情報コピー */
.copy-map-audit{
  min-height:32px;
  padding:6px 10px;
  border:1px solid #b45309;
  border-radius:8px;
  background:#fff7ed;
  color:#9a3412;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.copy-map-audit[hidden]{display:none!important}
@media(max-width:520px){
  .copy-map-audit{
    width:100%;
    min-height:40px;
    margin-top:6px;
  }
}

/* v9.34.1 ホーム画面追加の案内 */
.pwa-install-button[hidden],
.pwa-guide-overlay[hidden]{display:none!important}

@media(max-width:1024px){
  .mobile-mode-switch .pwa-install-button{
    grid-column:1 / -1;
    min-height:36px;
    border:1px solid #2b78ad;
    border-radius:9px;
    background:#eaf6ff;
    color:#0f527e;
    font-size:11px;
    font-weight:900;
  }
}

/* タブレットではモード切替は増やさず、追加案内だけを表示する。 */
@media(min-width:521px) and (max-width:1024px){
  .mobile-mode-switch.pwa-guide-available{
    display:block;
    position:relative;
    padding:7px 12px;
    background:#fff;
    border-bottom:1px solid #dbe4ef;
    box-shadow:0 3px 10px rgba(15,23,42,.06);
  }
  .mobile-mode-switch.pwa-guide-available > #simpleModeButton,
  .mobile-mode-switch.pwa-guide-available > #detailModeButton,
  .mobile-mode-switch.pwa-guide-available > #helpGuideButton{
    display:none;
  }
  .mobile-mode-switch.pwa-guide-available .pwa-install-button{
    width:100%;
  }
}

.pwa-guide-overlay{
  position:fixed;
  inset:0;
  z-index:10100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(7,26,58,.66);
}
.pwa-guide-dialog{
  width:min(520px,100%);
  max-height:90dvh;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
}
.pwa-guide-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:17px 18px 13px;
  border-bottom:1px solid #dbe4ef;
}
.pwa-guide-head span{color:#2b78ad;font-size:10px;font-weight:900}
.pwa-guide-head h2{margin:3px 0 0;color:#071a3a;font-size:20px;line-height:1.3}
.pwa-guide-head button{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#eef2f6;
  color:#334155;
  font-size:25px;
  cursor:pointer;
}
.pwa-guide-body{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:16px;
  padding:18px;
  overflow-y:auto;
  color:#334155;
}
.pwa-guide-body img{width:82px;height:82px;border-radius:18px}
.pwa-guide-body p{margin:0 0 10px;font-size:13px;line-height:1.6}
.pwa-guide-body ol{margin:0;padding-left:22px}
.pwa-guide-body li{margin:0 0 9px;font-size:13px;line-height:1.55}
.pwa-guide-foot{padding:12px 18px 17px;border-top:1px solid #e2e8f0}
.pwa-guide-foot button{
  width:100%;
  min-height:43px;
  border:0;
  border-radius:10px;
  background:#071a3a;
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}
@media(max-width:520px){
  .pwa-guide-overlay{align-items:flex-end;padding:10px}
  .pwa-guide-dialog{border-radius:18px 18px 10px 10px}
  .pwa-guide-body{grid-template-columns:64px 1fr;gap:12px;padding:15px}
  .pwa-guide-body img{width:64px;height:64px;border-radius:14px}
  .pwa-guide-head{padding:15px 15px 12px}
  .pwa-guide-head h2{font-size:18px}
  .pwa-guide-foot{padding:10px 15px 14px}
}

/* v9.34.2 TransitCanvas 基盤ブランド */
.header-platform-credit{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  margin-right:18px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  background:rgba(255,255,255,.96);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.header-platform-credit span{
  color:#64748b;
  font-size:7px;
  font-weight:800;
  white-space:nowrap;
}
.header-platform-credit img{
  display:block;
  width:104px;
  height:auto;
}
.app-version-footer{
  flex-direction:column;
  gap:10px;
}
.footer-service-version{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.footer-service-version span:last-child{
  color:#475569;
  font-weight:900;
}
.footer-platform-credit{
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:center;
  gap:3px 8px;
  padding-top:9px;
  border-top:1px solid #e2e8f0;
}
.footer-platform-credit > span{
  color:#94a3b8;
  font-size:8px;
  font-weight:800;
}
.footer-platform-credit img{
  display:block;
  width:136px;
  height:auto;
}
.footer-platform-credit small{
  grid-column:1 / -1;
  color:#64748b;
  font-size:8px;
  font-weight:700;
  letter-spacing:.06em;
  text-align:center;
}
@media(max-width:760px){
  .header-platform-credit{display:none}
}
@media(max-width:520px){
  .app-version-footer{gap:9px}
  .footer-platform-credit img{width:128px}
}

/* v9.35.0 使い方ガイド */
.desktop-help-guide-button{
  min-height:32px;
  padding:6px 11px;
  border:1px solid #2b78ad;
  border-radius:8px;
  background:#eaf6ff;
  color:#0f527e;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.help-guide-overlay[hidden]{display:none!important}
.help-guide-overlay{
  position:fixed;
  inset:0;
  z-index:10200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(7,26,58,.7);
}
.help-guide-dialog{
  display:flex;
  flex-direction:column;
  width:min(640px,100%);
  max-height:92dvh;
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.help-guide-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px 15px;
  background:linear-gradient(135deg,#071a3a,#123a68);
  color:#fff;
}
.help-guide-head span{color:#7dd3fc;font-size:10px;font-weight:900;letter-spacing:.08em}
.help-guide-head h2{margin:3px 0 0;font-size:22px;line-height:1.25}
.help-guide-head p{margin:5px 0 0;color:#cbd5e1;font-size:11px}
.help-guide-head button{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:25px;
  cursor:pointer;
}
.help-guide-body{padding:18px 20px;overflow-y:auto}
.help-main-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.help-main-steps li{
  display:grid;
  grid-template-columns:minmax(170px,.8fr) 1.4fr;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border:1px solid #dbe4ef;
  border-radius:13px;
  background:#f8fafc;
}
.help-main-steps strong{display:flex;align-items:center;gap:9px;color:#071a3a;font-size:14px}
.help-main-steps strong i{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#071a3a;
  color:#fff;
  font-style:normal;
  font-size:13px;
}
.help-main-steps li > span{color:#475569;font-size:11px;line-height:1.55}
.help-guide-tips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.help-guide-tips article{display:flex;flex-direction:column;gap:4px;padding:11px 12px;border-radius:11px;background:#eef5fb}
.help-guide-tips b{color:#173b61;font-size:12px}
.help-guide-tips span{color:#52677d;font-size:10px;line-height:1.45}
.help-freshness-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin-top:14px;
  padding:10px 12px;
  border-radius:10px;
  background:#f8fafc;
  color:#475569;
  font-size:9px;
}
.help-freshness-note strong{margin-right:2px;color:#1e293b;font-size:10px}
.help-freshness-note span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.help-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8}
.help-dot.help-live{background:#16a34a}
.help-dot.help-waiting{background:#f59e0b}
.help-dot.help-stale{background:#dc2626}
.help-dot.help-schedule{background:#94a3b8}
.help-auto-note{
  margin:10px 2px 0;
  color:#64748b;
  font-size:9px;
  line-height:1.5;
  text-align:center;
}
.help-guide-foot{padding:12px 20px 17px;border-top:1px solid #e2e8f0;background:#fff}
.help-guide-foot button{
  width:100%;
  min-height:44px;
  border:0;
  border-radius:11px;
  background:#071a3a;
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}
@media(max-width:520px){
  .desktop-help-guide-button{display:none}
  .mobile-mode-switch .help-guide-button{font-size:11px}
  .help-guide-overlay{align-items:flex-end;padding:10px}
  .help-guide-dialog{max-height:90dvh;border-radius:18px 18px 10px 10px}
  .help-guide-head{padding:15px 15px 12px}
  .help-guide-head h2{font-size:19px}
  .help-guide-body{padding:14px}
  .help-main-steps li{grid-template-columns:1fr;gap:6px;padding:10px 11px}
  .help-main-steps li > span{padding-left:39px}
  .help-guide-tips{grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}
  .help-guide-tips article{padding:9px}
  .help-freshness-note{gap:7px 10px;margin-top:11px}
  .help-freshness-note strong{width:100%}
  .help-auto-note{text-align:left}
  .help-guide-foot{padding:10px 14px 14px}
}

/* v9.36.0 新版更新OSD */
.app-update-notice[hidden]{display:none!important}
.app-update-notice{
  position:fixed;
  top:calc(var(--fixed-app-header-height,62px) + 10px);
  left:50%;
  z-index:99980;
  display:flex;
  align-items:stretch;
  width:min(390px,calc(100vw - 24px));
  overflow:hidden;
  border:1px solid #5aa8d8;
  border-radius:13px;
  background:#fff;
  box-shadow:0 10px 32px rgba(7,26,58,.28);
  transform:translateX(-50%);
  animation:app-update-in .28s ease-out;
}
.app-update-main{
  display:flex;
  flex:1;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:54px;
  padding:8px 12px;
  border:0;
  background:#eaf6ff;
  color:#071a3a;
  text-align:left;
  cursor:pointer;
}
.app-update-main:hover,.app-update-main:focus-visible{background:#dff1fd}
.app-update-main:disabled{cursor:wait;opacity:.75}
.app-update-mark{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#1674ad;
  color:#fff;
  font-size:21px;
  font-weight:900;
}
.app-update-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.app-update-copy strong{font-size:13px;line-height:1.3}
.app-update-copy small{color:#52677d;font-size:9px;font-weight:700}
.app-update-dismiss{
  flex:0 0 44px;
  width:44px;
  border:0;
  border-left:1px solid #c9e1f1;
  background:#fff;
  color:#64748b;
  font-size:22px;
  cursor:pointer;
}
.app-update-dismiss:hover,.app-update-dismiss:focus-visible{background:#f1f5f9;color:#071a3a}
@keyframes app-update-in{
  from{opacity:0;transform:translate(-50%,-12px)}
  to{opacity:1;transform:translate(-50%,0)}
}
@media(prefers-reduced-motion:reduce){
  .app-update-notice{animation:none}
}
@media(max-width:520px){
  .app-update-notice{
    top:calc(var(--fixed-app-header-height,64px) + 7px);
    width:calc(100vw - 20px);
  }
  .app-update-main{min-height:51px;padding:7px 10px}
  .app-update-mark{flex-basis:31px;width:31px;height:31px;font-size:19px}
  .app-update-dismiss{flex-basis:42px;width:42px}
}

/* v9.36.1 オフライン・通信状態OSD */
.connection-notice[hidden]{display:none!important}
.connection-notice{
  position:fixed;
  top:calc(var(--fixed-app-header-height,62px) + 10px);
  left:50%;
  z-index:99990;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(520px,calc(100vw - 24px));
  min-height:58px;
  padding:9px 12px;
  border:1px solid #d97706;
  border-radius:13px;
  background:#fff7ed;
  color:#7c2d12;
  box-shadow:0 10px 32px rgba(7,26,58,.25);
  transform:translateX(-50%);
  animation:app-update-in .28s ease-out;
}
.connection-notice.is-error{border-color:#dc2626;background:#fef2f2;color:#991b1b}
.connection-notice.is-recovered{border-color:#16a34a;background:#f0fdf4;color:#166534}
.connection-notice-mark{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#d97706;
  color:#fff;
  font-size:20px;
  font-weight:900;
}
.connection-notice.is-error .connection-notice-mark{background:#dc2626}
.connection-notice.is-recovered .connection-notice-mark{background:#16a34a}
.connection-notice-copy{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.connection-notice-copy strong{font-size:13px;line-height:1.3}
.connection-notice-copy small{font-size:10px;line-height:1.35;font-weight:700}
.connection-retry-button{
  flex:0 0 auto;
  min-height:36px;
  padding:6px 12px;
  border:1px solid currentColor;
  border-radius:9px;
  background:#fff;
  color:inherit;
  font-weight:900;
  cursor:pointer;
}
body.connection-notice-visible .app-update-notice{
  top:calc(var(--fixed-app-header-height,62px) + 78px);
}
@media(prefers-reduced-motion:reduce){.connection-notice{animation:none}}
@media(max-width:520px){
  .connection-notice{
    top:calc(var(--fixed-app-header-height,64px) + 7px);
    width:calc(100vw - 20px);
    gap:8px;
    padding:8px 9px;
  }
  .connection-notice-mark{flex-basis:31px;width:31px;height:31px;font-size:18px}
  .connection-notice-copy strong{font-size:12px}
  .connection-notice-copy small{font-size:9px}
  .connection-retry-button{padding:6px 9px;font-size:11px}
  body.connection-notice-visible .app-update-notice{
    top:calc(var(--fixed-app-header-height,64px) + 74px);
  }
}

/* v9.39.0 ドコオル 出発判断・第3段階 */
.departure-decision-panel[hidden]{display:none!important}
.departure-decision-panel{
  --decision-color:#2563eb;
  --decision-soft:#eff6ff;
  margin:0 0 14px;
  padding:15px 16px;
  border:1px solid color-mix(in srgb,var(--decision-color) 34%,#dbe4ee);
  border-left:6px solid var(--decision-color);
  border-radius:15px;
  background:linear-gradient(135deg,var(--decision-soft),#fff 76%);
  color:#0f172a;
  box-shadow:0 5px 18px rgba(15,23,42,.08);
}
.departure-decision-panel.is-comfortable{--decision-color:#059669;--decision-soft:#ecfdf5}
.departure-decision-panel.is-leave{--decision-color:#2563eb;--decision-soft:#eff6ff}
.departure-decision-panel.is-hurry{--decision-color:#d97706;--decision-soft:#fff7ed}
.departure-decision-panel.is-difficult,
.departure-decision-panel.is-unavailable{--decision-color:#dc2626;--decision-soft:#fef2f2}
.departure-decision-panel.is-waiting,
.departure-decision-panel.is-setup,
.departure-decision-panel.is-settings{--decision-color:#475569;--decision-soft:#f8fafc}
.departure-decision-panel.is-paused{--decision-color:#b45309;--decision-soft:#fffbeb}
.departure-decision-heading{display:flex;align-items:center;gap:11px}
.departure-decision-icon{
  display:grid;
  place-items:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--decision-color);
  color:#fff;
  font-size:21px;
}
.departure-decision-heading > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.departure-decision-heading small{color:var(--decision-color);font-size:10px;font-weight:900}
.departure-decision-heading strong{font-size:20px;line-height:1.3}
.departure-time-guide{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:3px 9px;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--decision-color) 24%,#e2e8f0);
  border-radius:12px;
  background:rgba(255,255,255,.88);
}
.departure-time-guide-label{
  padding:4px 7px;
  border-radius:999px;
  background:var(--decision-color);
  color:#fff;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.departure-time-guide strong{color:#0f172a;font-size:23px;line-height:1.1}
.departure-time-guide b{color:var(--decision-color);font-size:13px}
.departure-time-guide small{
  grid-column:1/-1;
  color:#64748b;
  font-size:9px;
  line-height:1.4;
}
.departure-target-toggle-button{
  width:100%;
  min-height:38px;
  margin-top:8px;
  padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--decision-color) 34%,#cbd5e1);
  border-radius:10px;
  background:rgba(255,255,255,.82);
  color:#334155;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.departure-target-toggle-button:hover,
.departure-target-toggle-button:focus-visible{
  border-color:var(--decision-color);
  color:var(--decision-color);
}
.departure-target-toggle-button.is-selected{
  background:#eef2ff;
  color:#3730a3;
}
.departure-decision-panel > p{margin:11px 0 0;color:#475569;font-size:13px;line-height:1.55}
.departure-decision-summary{margin-top:10px;color:#334155;font-size:12px;font-weight:800}
.departure-quality-line{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.departure-quality-line span{
  padding:5px 8px;
  border:1px solid rgba(100,116,139,.2);
  border-radius:999px;
  background:rgba(255,255,255,.8);
  color:#475569;
  font-size:10px;
  font-weight:900;
}
.departure-quality-line span.is-high{border-color:#86efac;background:#f0fdf4;color:#047857}
.departure-quality-line span.is-medium{border-color:#fde68a;background:#fffbeb;color:#a16207}
.departure-quality-line span.is-low{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
.departure-quality-line span.is-schedule{border-color:#cbd5e1;background:#f8fafc;color:#475569}
.departure-decision-details{margin-top:9px;border-top:1px solid rgba(100,116,139,.22)}
.departure-decision-details > summary{
  padding-top:9px;
  color:#475569;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.departure-decision-details[open] > summary{color:var(--decision-color)}
.departure-settings-button,.departure-save-button{
  min-height:42px;
  margin-top:12px;
  padding:8px 15px;
  border:0;
  border-radius:10px;
  background:#071a3a;
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.departure-decision-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:13px;
}
.departure-decision-facts span{
  min-width:0;
  padding:9px 10px;
  border:1px solid color-mix(in srgb,var(--decision-color) 18%,#e2e8f0);
  border-radius:10px;
  background:rgba(255,255,255,.82);
  color:#334155;
  font-size:12px;
  line-height:1.45;
}
.departure-decision-facts b{display:block;margin-bottom:2px;color:#64748b;font-size:9px}
.departure-switch-note{
  margin-top:11px;
  padding:7px 10px;
  border-radius:8px;
  background:#fff7ed;
  color:#9a3412;
  font-size:11px;
  font-weight:900;
}
.departure-decision-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.departure-decision-foot small{color:#64748b;font-size:10px;line-height:1.4}
.departure-settings-link{
  flex:0 0 auto;
  padding:5px 0;
  border:0;
  background:transparent;
  color:#1d4ed8;
  font-size:11px;
  font-weight:900;
  text-decoration:underline;
  cursor:pointer;
}
.departure-decision-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:13px}
.departure-decision-form > label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:800;
}
.departure-number-field{display:flex;align-items:center;gap:5px;white-space:nowrap}
.departure-number-field input{
  width:66px;
  min-height:38px;
  padding:5px 7px;
  border:1px solid #94a3b8;
  border-radius:8px;
  font:inherit;
  text-align:right;
}
.departure-decision-form select{
  min-height:38px;
  padding:5px 28px 5px 9px;
  border:1px solid #94a3b8;
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  font:inherit;
}
.departure-location-tools{
  display:flex;
  align-items:center;
  gap:10px;
  grid-column:1/-1;
  padding:9px 10px;
  border:1px dashed #93c5fd;
  border-radius:10px;
  background:#eff6ff;
}
.departure-location-tools small{color:#475569;font-size:10px;line-height:1.4}
.departure-location-button{
  flex:0 0 auto;
  min-height:38px;
  padding:7px 11px;
  border:1px solid #2563eb;
  border-radius:9px;
  background:#fff;
  color:#1d4ed8;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.departure-location-button:disabled{cursor:wait;opacity:.65}
.departure-notification-button{
  width:100%;
  min-height:40px;
  margin-top:10px;
  padding:7px 12px;
  border:1px solid #93c5fd;
  border-radius:10px;
  background:#fff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.departure-notification-button.active{border-color:#16a34a;background:#f0fdf4;color:#047857}
.departure-notification-note{display:block;margin-top:5px;color:#64748b;font-size:9px;text-align:center}
.departure-form-actions{display:flex;align-items:center;gap:8px;grid-column:1/-1;flex-wrap:wrap}
.departure-form-actions button{margin-top:0}
.departure-cancel-button,.departure-remove-button{
  min-height:40px;
  padding:7px 12px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.departure-remove-button{margin-left:auto;color:#b91c1c}
.departure-decision-form > small{grid-column:1/-1;color:#64748b;font-size:10px;line-height:1.45}
@media(max-width:700px){
  .departure-decision-facts{grid-template-columns:1fr}
}
@media(max-width:520px){
  body.mobile-simple-mode .departure-decision-panel{margin:0 0 13px;padding:13px 12px;border-radius:14px}
  body.mobile-simple-mode .departure-decision-heading strong{font-size:18px}
  body.mobile-simple-mode .departure-time-guide{grid-template-columns:auto auto 1fr;padding:9px 10px}
  body.mobile-simple-mode .departure-time-guide strong{font-size:21px}
  body.mobile-simple-mode .departure-decision-summary{font-size:11px}
  body.mobile-simple-mode .departure-decision-icon{flex-basis:37px;width:37px;height:37px;font-size:19px}
  body.mobile-simple-mode .departure-decision-facts{gap:6px;margin-top:11px}
  body.mobile-simple-mode .departure-decision-facts span{padding:8px 9px;font-size:11px}
  body.mobile-simple-mode .departure-decision-foot{align-items:flex-start;flex-direction:column;gap:5px}
  body.mobile-simple-mode .departure-decision-form{grid-template-columns:1fr}
  body.mobile-simple-mode .departure-form-actions,
  body.mobile-simple-mode .departure-decision-form > small,
  body.mobile-simple-mode .departure-location-tools{grid-column:1}
  body.mobile-simple-mode .departure-location-tools{align-items:stretch;flex-direction:column}
  body.mobile-simple-mode .departure-location-button{width:100%}
  body.mobile-simple-mode .departure-save-button{width:100%}
  body.mobile-simple-mode .departure-remove-button{margin-left:0}
}

/* v9.40.2 出発判断の対象便を到着カード上でも明示 */
.arrival-card.arrival-departure-target{
  --arrival-departure-color:#2563eb;
  opacity:1;
  border-color:var(--arrival-departure-color);
  border-style:solid;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--arrival-departure-color) 18%,transparent),
    0 5px 16px rgba(15,23,42,.10);
}
.arrival-card.arrival-departure-target.departure-target-comfortable{--arrival-departure-color:#059669}
.arrival-card.arrival-departure-target.departure-target-leave{--arrival-departure-color:#2563eb}
.arrival-card.arrival-departure-target.departure-target-hurry{--arrival-departure-color:#d97706}
.arrival-card.arrival-departure-target.departure-target-difficult{--arrival-departure-color:#dc2626}
.arrival-departure-target-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--arrival-departure-color,#2563eb) 38%,#cbd5e1);
  border-radius:999px;
  background:color-mix(in srgb,var(--arrival-departure-color,#2563eb) 10%,#fff);
  color:var(--arrival-departure-color,#2563eb);
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.arrival-departure-select-button{
  min-height:28px;
  padding:3px 8px;
  border:1px solid #93c5fd;
  border-radius:999px;
  background:#fff;
  color:#1d4ed8;
  font:inherit;
  font-size:10px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
}
.arrival-departure-select-button:hover,
.arrival-departure-select-button:focus-visible{
  border-color:#2563eb;
  background:#eff6ff;
  outline:2px solid rgba(37,99,235,.18);
  outline-offset:1px;
}
@media(max-width:520px){
  body.mobile-simple-mode .arrival-card.arrival-departure-target{
    border-color:var(--arrival-departure-color);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--arrival-departure-color) 18%,transparent),
      0 5px 16px rgba(15,23,42,.10);
  }
}