@media screen and (max-width: 768px) {
    .top_background {
        color:white;
        text-align: center;
        margin-top: 50px;
        padding-bottom: 9vw;
    }

    .top_text {
        font-size:5vw;
        padding-top:28px;
    }
    .top_text_left {
        font-size:3vw;
    }

    .congestion_status_text{
        word-break: break-word;
        font-size:7vw;
        padding:3vw;
        padding-right: 0;
        padding-left: 0;
    }

    #crowded_time {
        word-break: break-word;
    }

    .status_area{
        display: inline-block;
        padding: 1em 0em 1em 0em;

    }

    .status_area2{
        vertical-align: middle;
    }

    .human_icon{
        display:inline-block;
        height:14vw;
        width:auto;
        padding-left: 0;
    }

    .white-round {
        border: 5px solid white;
        color: black;
        background-color: white;
        border-radius: 1.5em;
        padding: 0.3em 0.3em;
        margin-left: auto;
        margin-right: auto;
        width:80vw;
        font-size: 2.8vw;
        font-weight: 700;
        box-shadow:0px 4px 4px gray;
    }

    .top_congestion_box{
        width:80vw;
        margin: -4vw 0vw 0vw 0vw;
        /*border: 5px solid green;*/
        margin-left: auto;
        margin-right: auto;
    }

    .small_box {
        margin-bottom: 3vw;
        height:30vw;
    }

    .machine_frame {
        text-align: center;
        margin: 0vw 0vw 3vw 0vw;
        border: 1px solid white;
        color: black;
        background-color: white;
        border-radius: 1.5em;
        padding: 0.5em 0.5em;
        box-shadow:0px 4px 4px gray;
        width: 75vw;
        height: 29vw;
    }

    .congestion_info_box{
        display: flex;
        margin:none;
    }

    .congestion_icon {
        margin-top:5vw;
        margin-right:4vw;
        width: 16vw;
        height: 16vw;
    }

    .area_name {
        font-size:4vw;
        font-weight: 700;
        text-align: left;
        margin-bottom: 0;
        width:50vw;
        height:12vw;
        /*border: 1px solid green;*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .gauge_parent{
        text-align: left;
        width: 46vw;
        height: 9vw;
        margin-left: 4vw;
        margin-bottom: 0;
        /*border: 1px solid green;*/
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .gauge_child{
        /*display:inline-block;*/
        width:3.2vw;
        height:9vw;
        padding: 0 0vw 0 1.4vw;
    }

    .empty_frame {
        width:3vw;
        height:9vw;
        /*border: 1px solid green;*/
    }

    .congestion_info_value{
        text-align:right;
        margin-right: 0;
        display: clear;
        height:6vw;
        /*border: 1px solid green;*/
        padding:0vw 0vw;
        margin:0vw 0vw;
    }

    .use-count-text{
        font-size: 3vw;
        position: relative;
        bottom: 0;
    }

    .congestion_info_value_number{
        font-size: 6vw;
        font-weight: 700;
    }

    .congestion_info_value_unit{
        font-size: 6vw;
        font-weight: 700;
    }

    .congestion_info_max{
        font-size: 6vw;
    }
}