body { margin: 0px; padding: 0px; height: 100%; font-family: "Meiryo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif; }
body { display: flex; overflow: hidden; }
#page { font-size: 2.4vw; display: flex; flex-direction: column;  width: 100%; height: 100%; }
@media screen and (min-width: 750px) {
    #page { font-size: 18px; }
}

/* ヘッダー */
#header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }

#head { width: 55vw; }
@media (min-width: 1090px) {
    #head { width: 600px; }
}

/* ビューエリア */
#viewarea { display: flex; flex-direction: raw; overflow: auto; width: 100%; height: 100% }
#mapview { display: flex; flex-direction: column; width: 100%;}

/* マップ表示 */
#map { width: 100%; height: 100%; flex: 0 1 auto; }

#list { display: flex; flex-wrap: wrap; }
[id^=DSMM01_] { background-color: white; border-radius: 5px; margin: 1px; padding-left: 4px; padding-right: 4px; font-size: 2.4vw; }
[id^=DSMM01_] { background-image: none }
@media screen and (min-width: 750px) {
    [id^=DSMM01_] { font-size: 18px; }
}
#list { min-height: 0; max-height: 30vh; flex: 1 0 auto; overflow-y: auto; }

.fixed { border-width: 1px; background-color: #f4fff4; }

.info { text-align: center; margin-bottom: 3px; font-size: 14px; }
.enhanced { font-weight: bold; }

.separater { width: 100%; height: 0px; }


/* バウンスアニメーション */
.bounce {
    animation-name: bounceAnimation;
    animation-duration: 0.33s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}

@keyframes bounceAnimation {
    0% { transform: translate(0, 0); }
    100% { transform: translate(0, -20px); }
}

/* バス停アイコン */
.station_icon {
    position: relative;
}

/* バス停アイコンイメージ */
.station_icon_image {
    display: block;
}

/* バス停アイコンラベル */
.station_icon_label {
    display: block;
    position: absolute;
    width: 32px;              /* 将来削除 */
    height: 20px;             /* 将来削除 */
    line-height: 20px;        /* 将来削除 */ 
    top: 8px;                 /* 将来削除 */
    font-family: sans-serif;
    font-size: 10px;
    text-align: center;
}

/* 共通 */
.centered { text-align: center; }
.suspended { background-color: #dddddd; }
.locked_on { border-color: blue; background-color: #ddffff; }
.locked_on.suspended { background-color: #ddeeee; }
.locked_on { color: blue; }
.suspended { color: #aaaaaa; }
.alert { color: red; }
.hidden { display: none; }

/* ルート検索ボタン */
.routeSearchButton {
    border: none;
    border-radius: 10px;
    background-color: #2277aa;
    margin: 6px;
    padding: 8px;
    font-size: 15px;
    font-weight: bold;
    color: white;
    filter: drop-shadow(1px 3px 1px rgba(0, 0, 0, 0.2));
}