html,body {
    height: 100%;
    background-color: whitesmoke;
}

.grid-height {
    height: 50%;
}

/*グリッドタイトル*/
.grid h4 {
    /*場所タイトル背景色*/
    background-color: #EB3249;
    /*場所文字色*/
    color: whitesmoke ;
    font-size: 1.8vmax;
}

/*グリッド表示部*/
.g_img {
    /*表示グリッドコメントサイズ*/
    height: 0;
    min-height: 80px;
    font-size: 1.2vmax;
}

.icon {
    height: 60%;
}

#updatetime {
    font-size: 3.6vmin;
    margin: 1vmin 0;
}

.caution {
    font-size: 2vmin;
    margin-bottom: 2vmin;
}

h3 {
    font-size: 1.6vmax;
}

/*左側のグリッドタイトル（男湯）*/
#grid_0 h4 {
    /*場所タイトル背景色-青*/
    background-color: #1e88e5;
}

/*右側のグリッドタイトル（女湯）*/
#grid_1 h4 {
    /*場所タイトル背景色-赤*/
    background-color: #EB3249;
}

/* 混雑状況Lite*/
#grid_2 h4, #grid_3 h4, #grid_4 h4, #grid_5 h4{
    /*場所タイトル背景色-グレー*/
    background-color: #757575;
}

/* 混雑状況Liteの更新時間表示 */
#congestionwithIotRefreshTime {
    text-align: end;
    color: rgba(0,0,0, 0.54);
    font-size: 2.8vmin;
    white-space: nowrap;
    position: absolute;
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
    padding-right: 15px;
}

/*スマホ表示用　（576px以下の時）*/
@media screen and (max-width:576px) {

    .grid-height {
        height: 25%;
    }

    #updatetime{
        font-size: 4vw;
    }

    .caution {
        font-size: 3vw;
    }

    .grid h2 {
        font-size: 3.6vmin;
    }

    .grid h4 {
        font-size: 3vmin;
    }
}