@media screen and (max-width: 767px) {
    .head-info{
        display: none;
    }

    .sp{
        display: block;
    }

    .logo{
        font-size: 18px;
        width: 40%;
    }

    .logo a img{
        width: 100%;
    }

    .navbar{
        top: 0;
    }

    .mainv-content{
        width: 90%;
    }

    .tp-about-bg{
        flex-direction: column;
    }

    .tp-about-img{
        width: 100%;
    }

    .tp-about-img figure img{
        height: 200px;
        object-fit: cover;
    }

    .tp-about-content{
        width: 90%;
        margin: 50px auto;
    }

    .tp-about-text p{
        line-height: 1.5em;
    }

    .tp-menu-list{
        flex-direction: column;
        gap: 50px;
    }

    .tp-menu-list img{
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .tp-menu-list a{
        width: 100%;
    }

    .tp-menu-dessert{
        margin-top: 0;
    }

    .tp-hl{
        flex-direction: column;
    }

    .tp-hl figure{
        width: 100%;
    }

    .tp-hl figure img{
        height: 200px;
        object-fit: cover;
    }

    .tp-hl-content{
        width: 90%;
    }

    .tp-hl-content th,.tp-hl-content td{
        display: block;
        width: 100%;
        padding: 5px 0;
    }

    .tp-hl-content th{
        border-bottom: 1px solid #a2b5ba;
    }

    .tp-map{
        height: 200px;
    }

    .tp-map iframe{
        height: 200px;
    }

    .foot-sitemap{
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .head-common{
        margin-top: 80px;
        display: flex;
        flex-direction: column-reverse;
    }

    .head-title,.head-img{
        position: static;
        width: 100%;
    }

    .head-title{
        margin-top: -50px;
    }

    .head-title-text{
        display: none;
    }

    .about-greeting{
        flex-direction: column-reverse;
        gap: 0;
        margin-top: 50px;
    }

    .about-text{
        width: 90%;
        margin: 20px auto;
    }

    .about-text p,.about-text2 p{
        line-height: 1.5em;
    }

    .about-tl{
        width: 100%;
        display: flex;
    }

    .about-tl1,.about-tl2{
        width: 45%;
    }

    .about-tr{
        width: 100%;
        margin-top: 0;
    }

    .about-img{
        margin: 0 auto 50px auto;
    }

    .about-text2{
        width: 80%;
    }

    .menu{
        flex-direction: column;
    }

    .menu-content{
        width: 100%;
    }

    .menu-subtitle h4{
        font-size: 16px;
    }

    .menu-list th,.menu-list td{
        font-size: 14px;
        padding: 10px 0;
    }

    .hl-content{
        flex-direction: column;
        margin-top: 50px;
    }

    .hl-l,.hl-r{
        width: 100%;
    }

    .hl-l th,.hl-l td{
        display: block;
        width: 100%;
    }

    .hl-r{
        margin-top: 20px;
    }

    .hl-map{
        height: 200px;
    }

    .hl-map iframe{
        height: calc(200px + 300px);
    }

    .shopintro-img{
        flex-direction: column;
    }

    .si-img-l,.si-img-r{
        display: flex;
        flex-direction: row;
    }

    .si-img-l,.si-img-c,.si-img-r{
        width: 100%;
    }

    .shopintro-text{
        width: 90%;
    }

    .contact-content{
        margin-top: 50px;
    }

    .field{
        flex-direction: column;
    }

    .label{
        width: 100%;
        margin-bottom: 10px;
    }

    input,textarea{
        width: 100%;
    }

    .pripoli-content{
        margin-top: 50px;
    }
}