@charset "UTF-8";

@media(max-width:780px){
    img{
        height: auto;
        max-width: 100%;
    }
    /* hambargerbutton */
    .circle{
        display: block;
    }
    /* header */
    #head{
        width: 95%;
        padding: 15px 0 20px;
    }
    #head h1 a img{
        width: 30%;
    }
    #head p{
        margin-left: 3%;
    }
    /* left_column */
    #left_column{
        display: none;
    }

    /* main */
    #outline{
        display: block;
        width: 95%;
    }
    #wrapper{
        float: none;
        display: block;
        margin: 0 auto;
    }
    /* index */
    #intro{
        text-align: center;
    }
    #top #intro p{
        float: none;
    }
    #top #main_pic{
        height: 350px;
    }

    .service_title p{
        font-size: 20px;
    }

    /* about */
    /* #about_us{
        width: 100%;
    } */
    #about_us .backimg{
        background-size: contain;
        height: 120vh;
    }
    #about_us .text{
        top: 65px;
        left: 10px;
    }
    .backimg .text .m20{
        margin: 0;
    }

    .mobile_text{
        display: block;
        width: 95%;
        margin: 0 auto;
    }
    #about_us .text2{
        position: static;
        width: 95%;
        margin: 0 auto;
    }
    #about_us .text3{
        position: static;
        width: 95%;
        margin: 0 auto;
    }
    .backimg .text{
        display: none;
    }
    .backimg .text2{
        display: none;
    }
    .backimg .text3{
        display: none;
    }
    

    /* access */
    #access{
        width: 100%;
    }
    .shopmap p{
        width: 90%;
        margin: 0 auto;
    }

    /* servicetime */
    .service_time #ser_morning{
        padding: 100px 0 30px 10px;
    }
    /* servicetime lunch */
    .service_time #ser_lunch .lunch_box{
        margin: 0 10px 0 0;
        background-size: 50%;
    }
    /* takeout */
    #takeout .title{
        padding-left: 5px;
    }
    /* footer */
    #footer{
        width: 95%;
    }
    .footer_inner{
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    .footer_img{
        width: 40%;
    }
    .footer_nav{
        display: flex;
        flex-wrap: wrap;
    }
    .footer_nav li{
        width: 50%;
        margin-bottom: 10px;
    }
}