@media screen and (max-width: 767px) {
    .offset-1,.offset-2{
        margin-left: 0;
    }

    #navbtn{
        position: fixed;
        top: 35px;
        right: 15px;
        padding: 0;
        outline: none;
        border: none;
        background: none;
        width: 30px;
        height: 20px;
        cursor: pointer;
        display: block;
        z-index: 10;
    }

    /* 高さ1pxの線を上下に表示 */
    #navbtn::before,#navbtn::after{
        content : '';
        display: block;
        height: 1px;
        background-color: #333333;
        transform: translateY(10px);
        transition: 0.3s ease-in-out;
    }

    #navbtn::before{
        transform: translateY(-10px);
        box-shadow: 0 10px #333333;
    }

    .open #navbtn{
        z-index: 100;
    }
    .open #navbtn::before{
        transform: rotate(-45deg);
        box-shadow: none;
    }
    .open #navbtn::after{
        transform: rotate(45deg);
        box-shadow: none;
    }
    .nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(232,160,188,0.9);
        color: #ffffff;
        display: flex;
        justify-content: center;     /* 中央表示 */
        align-items: center;
        /* 初期は非表示 */
        visibility: hidden;
        opacity: 0;
        /* ふわっと表示 */
        transition: 0.5s ease-in-out;
    }

    .open .nav{
        visibility: visible;
        opacity: 1;
    }

    .nav ul,.info,.foot-sitemap ul:first-of-type,.about-content,.shop-info-content,.menu-drink dl{
        flex-direction: column;
    }

    .info-content,.map,.ab-img,.ab-text,.shop-logo,.shop-info-text{
        width: 100%;
    }

    .nav li{
        text-align: center;
        margin: 10px auto;
    }

    .nav li a{
        font-size: 20px;
    }

    .logo a{
        display: block;
    }

    .logo img{
        width: 20%;
        padding-left: 20px;
    }

    .main-title img{
        width: 50%;
    }

    .recomenu{
        margin: 50px auto;
    }

    .content-title h2{
        font-size: 30px;
    }

    .recomenu-menu dt{
        font-size: 14px;
    }

    .tp-btn{
        margin-bottom: 0;
    }

    .sns{
        margin: 50px 0;
    }

    .info-content{
        font-size: 14px;
    }

    .map iframe{
        height: 300px;
    }

    .foot-logo img{
        width: 20%;
    }

    .foot-sitemap li{
        margin: 5px 10px;
    }

    .child-title{
        margin-top: 20px;
    }

    .child-title h2{
        font-size: 30px;
    }

    .ab-text{
        margin-top: 30px;
    }

    .menu .recomenu-list{
        flex-direction: column;
    }

    .recomenu-list{
        margin-top: 30px;
    }

    .menu .recomenu-menu{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .menu .recomenu-menu figure{
        width: 30%;
    }

    .menu .recomenu-menu dl{
        width: 65%;
        text-align: left;
        margin-top: 0;
    }

    .menu-text{
        flex-wrap: wrap;
    }

    .menu-text dl{
        margin: 10px 0;
    }

}