/* 駅名サジェスト。/stations とトップページで共有する。
   station-discovery.css とは独立して動くよう、色は自前で定義している。 */
:root{--station-navy:#062b63;--station-deep:#021e46;--station-line:#d9e1eb;--station-muted:#6f7f93}

.station-search{padding:56px max(6vw,40px);background:#fff;border-bottom:1px solid var(--station-line)}
.station-search-inner{max-width:1180px;margin:0 auto}
.station-search-inner h2{margin:0 0 6px;color:var(--station-deep);font-size:22px;letter-spacing:.03em}
.station-search-inner>p{margin:0 0 18px;color:var(--station-muted);font-size:14px;line-height:1.9}
.station-search-box{max-width:620px;display:flex;align-items:stretch;border:2px solid var(--station-navy);background:#fff}
.station-search-tag{flex:0 0 auto;display:flex;align-items:center;padding:0 18px;background:var(--station-navy);color:#fff;font-size:15px;font-weight:700;letter-spacing:.08em}
.station-search-field{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.station-search-field input{width:100%;min-width:0;padding:16px 44px 16px 16px;border:0;background:transparent;color:var(--station-deep);font:500 17px "DM Sans","Noto Sans JP",sans-serif;outline:0}
.station-search-field input::placeholder{color:#96a3b4;font-weight:400}
.station-search-clear{position:absolute;right:8px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:50%;background:#e8edf3;color:#5d6e84;font-size:17px;line-height:1;cursor:pointer}
.station-search-clear:hover{background:var(--station-navy);color:#fff}
/* 読み上げ専用。候補件数を伝えるが画面には出さない。 */
.station-search-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.station-search-list{position:absolute;z-index:15;top:calc(100% + 6px);left:-2px;right:-2px;max-height:340px;margin:0;padding:6px;overflow-y:auto;list-style:none;border:1px solid var(--station-line);background:#fff;box-shadow:0 18px 40px rgba(3,34,76,.16)}
.station-search-list li{padding:11px 13px;display:grid;gap:3px;cursor:pointer}
.station-search-list li.is-active{background:#eef3f9}
.station-suggest-name{color:var(--station-deep);font-size:16px;font-weight:600}
.station-suggest-name b{color:var(--station-navy);font-weight:700}
.station-suggest-pref{color:var(--station-muted);font-size:14px;font-style:normal;font-weight:500}
.station-suggest-meta{color:#7d8b9c;font-size:12px}

@media(max-width:620px){
  .station-search{padding:40px 20px}
  .station-search-inner h2{font-size:19px}
  .station-search-inner>p{font-size:13px}
  .station-search-tag{padding:0 13px;font-size:13px}
  .station-search-field input{padding:14px 40px 14px 13px;font-size:16px}
  .station-suggest-name{font-size:15px}
  .station-suggest-pref{font-size:13px}
}