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

    .top_text {
        font-size:2.5vw;
        padding-top:4vw;
    }
    .top_text_left {
        font-size:2.0vw;
    }

    .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:7vw;
        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;
        margin-top: 3vw;
        width:50vw;
        font-size: 1.8vw;
        font-weight: 700;
        box-shadow:0px 4px 4px gray;
    }

    .top_congestion_box{
        /*border: 5px solid blue;*/
        color: black;
        margin-left: auto;
        margin-right: auto;        
        width:90vw;
        margin-top: -5vw;
    }

    .machine_frame {
        text-align: center;
        margin: 0vw 1vw 3vw 1vw;
        border: 1px solid white;
        color: black;
        background-color: white;
        border-radius: 1.5em;
        padding: 1.5vw 1.5vw;
        z-index: 10;
        box-shadow:0px 4px 4px gray;
        width: 39vw;
        height: 13vw;
        display: inline-block;
    }

    .congestion_info_box{
        display: flex;
    }

    .congestion_icon {
        padding:10px 10px 10px 0px;
        width: 80px;
        height: 80px;
    }

    .area_name {
        font-size:1.8vw;
        font-weight: 700;
        text-align: left;
        width:28vw;
        height:5vw;
        /*border: 1px solid blue;*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .gauge_parent{
        text-align: left;
        width: 24vw;
        height:4vw;
        margin-left:4vw;
        margin-bottom: 0;
    }

    .gauge_child{
        display:inline-block;
        width:1.7vw;
        height:4vw;
    }

    .empty_frame{
        /*border: 1px solid blue;*/
        width:1.7vw;
        height:4vw;
    }

    .congestion_info_value{
        text-align:right;
        margin-top: 0;
        margin-right: 0;
        display: clear;
    }

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

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

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

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