/* =========================
   レイアウト
========================= */

.transfer-main{
position:relative;
z-index:1;
}

.transfer-form{
display:grid;
gap:14px;
}

/* =========================
   入力欄
========================= */

.input-group{

position:relative;

z-index:1;

}

.transfer-form input{

width:100%;

padding:10px 12px;

border:none;

border-radius:6px;

box-sizing:border-box;

background:#fff;

color:#222;

font-size:16px;

box-shadow:
0 1px 3px rgba(0,0,0,.12);

}

/* =========================
   あいうえお
========================= */

.kana-table{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:8px;

margin-top:4px;

}

/* =========================
   ボタン
========================= */

.kana-table button,
.search-btn{

background:#0b8f1f !important;

color:#fff !important;

border:none !important;

padding:10px 8px;

border-radius:4px;

font-weight:bold;

cursor:pointer;

transition:.12s;

font-size:15px;

box-shadow:
0 1px 2px rgba(0,0,0,.15);

}

.kana-table button:hover,
.search-btn:hover{

background:#0ca322 !important;

}

.kana-table button:active,
.search-btn:active{

transform:translateY(1px);

box-shadow:none;

}

.search-btn{

font-size:1rem;

margin-top:6px;

}

/* =========================
   予測変換
========================= */

.suggest-box{

display:none;

position:fixed;

left:0;
top:0;

width:calc(100vw - 32px);

max-width:650px;

background:#fff;

border-radius:10px;

box-shadow:
0 8px 24px rgba(0,0,0,.18);

z-index:999999;

max-height:260px;

overflow-y:auto;

overflow-x:hidden;

}

/* 表示 */
.suggest-box.show{
display:block;
}

/* 候補 */
.suggest-item{

padding:12px 14px;

cursor:pointer;

background:#fff;

line-height:1.4;

}

/* hover */
.suggest-item:hover{

background:#f5f9ff;

}

/* =========================
   検索結果
========================= */

.result-group{
margin-top:24px;
}

.result-title{

font-size:1.2rem;

font-weight:bold;

margin-bottom:10px;

}

.direct-title{
color:#008800;
}

.transfer-title{
color:#ff8800;
}

/* =========================
   カード
========================= */

.route-card{

background:#fff;

border-radius:10px;

padding:14px;

margin-bottom:14px;

box-shadow:
0 2px 6px rgba(0,0,0,.08);

transition:.15s;

}

.route-card:hover{

transform:translateY(-2px);

box-shadow:
0 6px 18px rgba(0,0,0,.12);

}

.route-card.direct{
border-left:6px solid #008800;
}

.route-card.transfer{
border-left:6px solid #ff8800;
}

/* =========================
   時間
========================= */

.route-time{

font-size:1.3rem;

font-weight:bold;

margin-bottom:8px;

}

/* 行先 */
.route-dest{

font-size:1rem;

margin-bottom:8px;

}

/* 停留所 */
.stop-list{

font-size:.9rem;

line-height:1.7;

}

/* hr */
hr{

border:none;

height:1px;

background:#eee;

margin:10px 0;

}

/* Safari */
body{

overflow-x:hidden;

}