:root{
  --ink:#12161c;
  --sub:#5a6472;
  --line:#dfe3ea;
  --bg:#ffffff;
  --panel:#f3f5f9;
  --c1:#e0261f;
  --c2:#137a3a;
  --c3:#0f52ba;
  --c4:#d9730d;
  --c5:#7a2ec0;
  --c6:#00868f;
  --accent:#e0261f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:700;font-size:17px;line-height:1.4;
  letter-spacing:.01em;
}
.wrap{max-width:960px;margin:0 auto;padding:0 8px 40px}

/* ---- header ---- */
/* 明るいカード型。タイトルの右にチップ、足元に6号車のカラーバー */
header{
  position:relative;background:var(--bg);border:2px solid var(--line);border-top:0;
  border-radius:0 0 14px 14px;padding:13px 12px 15px;margin-bottom:2px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand .bus{width:31px;height:31px;flex:0 0 auto;fill:var(--accent)}
/* 狭い画面でも折り返さず1行に収まるよう、画面幅に応じて字を縮める */
header h1{margin:0;font-size:clamp(17px,4.4vw,23px);font-weight:800;line-height:1.25;letter-spacing:0;white-space:nowrap}
header .chips{margin-top:0;margin-left:auto}
/* 6号車ぶんの色帯をヘッダーの底に敷く */
.carline{
  position:absolute;left:0;right:0;bottom:0;height:5px;display:flex;
  border-radius:0 0 12px 12px;overflow:hidden
}
.carline i{flex:1}
.carline i:nth-child(1){background:var(--c1)}
.carline i:nth-child(2){background:var(--c2)}
.carline i:nth-child(3){background:var(--c3)}
.carline i:nth-child(4){background:var(--c4)}
.carline i:nth-child(5){background:var(--c5)}
.carline i:nth-child(6){background:var(--c6)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:14px;font-weight:800;padding:4px 10px;border-radius:99px;border:2px solid;background:#fff}
.chip.free{color:var(--c1);border-color:var(--c1);background:#fdecec}
.chip.off{color:var(--c3);border-color:var(--c3);background:#eaf1fb}
/* スマホでは折り返して場所を取るのでチップは隠す（内容は下の注意書きにもある） */
@media (max-width:700px){
  header .chips{display:none}
  .brand{gap:7px}
  .brand .bus{width:25px;height:25px}
}

h2{font-size:19px;font-weight:800;margin:18px 0 7px;padding-left:9px;border-left:6px solid var(--accent);line-height:1.3}
h3{font-size:16px;font-weight:800;margin:12px 0 5px}
p{margin:5px 0}
small{font-size:13px;font-weight:700;color:var(--sub)}
a{color:#0f52ba}

/* ---- search ---- */
.searchbox{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:9px}
.searchbox input{
  width:100%;font-size:19px;font-weight:800;padding:11px 12px;border:2px solid #aab3c0;border-radius:9px;
  font-family:inherit;background:#fff;color:var(--ink)
}
.searchbox input:focus{outline:none;border-color:var(--accent)}
.searchbox input::placeholder{color:#b6bdc8;font-weight:700;opacity:1}
.hint{font-size:13px;font-weight:700;color:var(--sub);margin:6px 2px 0}
.quick{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.quick button{
  font-family:inherit;font-size:13px;font-weight:800;padding:5px 9px;border-radius:99px;
  border:2px solid #c3cbd6;background:#fff;color:var(--ink);cursor:pointer
}
/* 押した／選んでいる停留所はオレンジ（地図・時刻表の強調と同じ色） */
.quick button:active,
.quick button.on{background:var(--c4);border-color:var(--c4);color:#fff}

/* 「すべて表示▼」はボタンではなくただのテキスト（クイックボタンと同じ並び） */
.quick{align-items:center}
.quick #allbtn{
  font-size:14px;font-weight:800;color:var(--c4);cursor:pointer;padding:5px 4px
}
.quick #allbtn:active{opacity:.6}

/* 全停留所の一覧 */
.allstops{margin-top:8px;border:2px solid var(--line);border-radius:11px;background:var(--panel);padding:9px 10px 11px}
.allstops .allhead{font-size:14px;font-weight:800;color:var(--sub);margin-bottom:7px}
.allstops .allgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}
.allstops .allgrid button{
  font-family:inherit;font-size:15px;font-weight:800;text-align:left;padding:7px 9px;border-radius:8px;
  border:2px solid #c3cbd6;background:#fff;color:var(--ink);cursor:pointer
}
.allstops .allgrid button:active,
.allstops .allgrid button.on{background:var(--c4);border-color:var(--c4);color:#fff}

#results{margin-top:10px}
/* 枠は便カード・マップと同じ太さ（上下左右6px）、色は見出しと同じオレンジ */
.rescard{border:6px solid var(--c4);border-radius:11px;overflow:hidden;margin-bottom:9px}
.rescard .rh{padding:6px 10px;font-size:15px;font-weight:800;color:#fff;display:flex;justify-content:space-between;gap:8px;align-items:center}
.rescard .rh .maplink{background:rgba(255,255,255,.22);color:#fff;text-decoration:none;font-size:12px;padding:3px 8px;border-radius:99px;white-space:nowrap}
.times{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 10px}
.tm{
  border:2px solid var(--line);border-radius:8px;padding:5px 8px;font-size:16px;font-weight:800;background:#fff;min-width:96px;
  font-family:inherit;color:var(--ink);text-align:left;display:block;cursor:pointer
}
.tm:active{background:#e8ecf2}
/* タップして時刻表を開いた便 */
.tm.sel{border-color:#d9730d;background:#fff3e4}
.tm b{display:block;font-size:19px;line-height:1.15}
.tm span{display:block;font-size:11px;font-weight:700;color:var(--sub)}
.empty{padding:14px 4px;font-size:15px;color:var(--sub)}

/* ---- tabs ---- */
.tabs{display:flex;gap:5px;overflow-x:auto;padding:3px 0 6px;-webkit-overflow-scrolling:touch}
.tabs button{
  flex:0 0 auto;font-family:inherit;font-size:16px;font-weight:800;padding:8px 14px;border-radius:9px;
  border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap
}
.tabs button.on{color:#fff}

/* ---- trip cards ---- */
/* 便カードの上に出す横スクロールバー（中身はダミー） */
.scrolltop{overflow-x:auto;overscroll-behavior-x:contain;margin-bottom:4px}
.scrolltop>div{height:1px}
.scrolltop::-webkit-scrollbar,.tripgrid::-webkit-scrollbar{height:12px;-webkit-appearance:none}
.scrolltop::-webkit-scrollbar-track,.tripgrid::-webkit-scrollbar-track{background:var(--panel);border-radius:99px}
.scrolltop::-webkit-scrollbar-thumb,.tripgrid::-webkit-scrollbar-thumb{background:#8f9aab;border-radius:99px;border:2px solid var(--panel)}

/* 便カードは幅を詰めて横一列。はみ出す分は横スクロール */
.tripgrid{
  display:flex;gap:9px;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;padding-bottom:8px;align-items:flex-start
}
/* スマホ（タッチ）では上下2本のスクロールバーを消す。指でそのまま横に動かせるため */
@media (pointer:coarse){
  .scrolltop{display:none}
  .tripgrid{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0}
  .tripgrid::-webkit-scrollbar{display:none;height:0}
}

/* 枠は上下6px・左右は細く（横に並ぶので幅を取らせない） */
.trip{flex:0 0 auto;width:max-content;min-width:170px;border:6px solid var(--line);border-width:6px 2px;border-radius:11px;overflow:hidden}
.trip .th{padding:6px 10px;color:#fff;font-size:15px;font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:6px}
.trip .th em{font-style:normal;font-size:13px;opacity:.9}
.stoprow{display:flex;align-items:center;gap:9px;padding:4px 10px;border-top:1px solid #eef1f5;font-size:16px}
.stoprow:first-of-type{border-top:none}
.stoprow .t{font-variant-numeric:tabular-nums;font-weight:800;min-width:52px;font-size:17px}
.stoprow .n{flex:1;font-weight:800;text-decoration:none;color:var(--ink);white-space:nowrap}
.stoprow.term{background:#f3f5f9}
.stoprow.match{background:#e7f5ec;box-shadow:inset 5px 0 0 #137a3a}
.stoprow.match .n{color:#0d5c2c}
.stoprow.hit{background:#ffd66b;box-shadow:inset 6px 0 0 #d9730d;animation:hitflash 1.2s ease-out 2}
.stoprow.hit .t,.stoprow.hit .n{color:#7a3c05}
@keyframes hitflash{0%{background:#ffb020}100%{background:#ffd66b}}
.routebar{padding:8px 10px;background:var(--panel);font-size:13px;font-weight:700;border-top:2px solid var(--line);display:flex;flex-wrap:wrap;gap:6px}
.routebar a{display:inline-block;background:#fff;border:2px solid #c3cbd6;border-radius:8px;padding:5px 9px;text-decoration:none;color:#0f52ba}

/* ---- 時刻表の下に出す埋め込みマップ ---- */
.mapembed{margin-top:10px;border:6px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel)}
.mapembed .mh{
  padding:6px 10px;color:#fff;font-size:15px;font-weight:800;
  display:flex;justify-content:space-between;align-items:center;gap:8px
}
.mapembed .mh a,.mapembed .mh button{color:#fff;font-size:14px;font-weight:700;font-family:inherit;background:none;cursor:pointer;text-decoration:none;border:2px solid rgba(255,255,255,.7);border-radius:8px;padding:3px 9px;white-space:nowrap}
.mapembed .mh .mbtns{display:flex;gap:6px;align-items:center;flex:none}
.mapembed iframe{display:block;width:100%;height:420px;border:0}

/* ---- notes ---- */
.note{background:var(--panel);border:2px solid var(--line);border-radius:11px;padding:9px 11px;font-size:15px}
.note ul{margin:5px 0 0;padding-left:20px}
.note li{margin:3px 0}
.tbl{overflow-x:auto;border:2px solid var(--line);border-radius:11px}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
th,td{border-bottom:1px solid #e6eaf0;padding:7px 9px;text-align:left;vertical-align:top}
th{background:var(--panel);font-weight:800;white-space:nowrap}
tr:last-child td{border-bottom:none}
.pdflinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pdflinks a{background:#fff;border:2px solid #c3cbd6;border-radius:8px;padding:6px 10px;text-decoration:none;color:#0f52ba;font-size:14px;font-weight:800}
footer{margin-top:20px;font-size:13px;color:var(--sub);border-top:2px solid var(--line);padding-top:10px}