body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .container {
            display: flex;
            height: 100vh;
            width: 100%;
            background-color: #000;
            overflow: hidden;
        }

        .restaurant {
            text-align: center;
            position: relative;
            overflow: hidden;
            flex: 1;
        }

        .minamisenba {background: url(../img/back/minamisenba.jpeg) no-repeat center;
        background-size: cover;}
        .in {background: url(../img/back/in.jpeg) no-repeat center;
        background-size: cover;}
        .hozenji {background: url(../img/back/hozenji.jpeg) no-repeat center;
        background-size: cover;}


        .background-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            filter: brightness(70%); /* 背景画像の輝度を調整 */
        }

        .r-box {
            max-width: 80%;
            max-height: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .logo {width: 66%;
            height: auto;
            margin-bottom: 40px;}

        .reservation {
            color: #fff;
            padding: 10px 25px;
            border: 1px #fff solid;
            font-family: 'Shippori Mincho', serif;
        }

        .reservation .r1 {font-size: 110%;
            font-weight: bold;}

    @media (min-width: 577px){
        .sp {display: none;}
    }

        /*576px以下の記述*/
    @media (max-width: 576px){

        body {
          min-height: 100vh;
          /* mobile viewport bug fix */
          min-height: -webkit-fill-available;}
         
        html {
          height: -webkit-fill-available;}

        .container {display: block;
            overflow: auto;}

        .restaurant {
            width: 100%;
            height: 400px;
        }

        .r-box {
            width: 66%;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .r-box .logo {width: 100%;
        height: auto;
        margin-bottom: 20px;}

        .minamisenba.sp {background: url(../img/back/sp_minamisenba.jpeg) no-repeat center;
        background-size: cover;}
        .in.sp {background: url(../img/back/sp_in.jpeg) no-repeat center;
        background-size: cover;}
        .hozenji.sp {background: url(../img/back/sp_hozenji.jpeg) no-repeat center;
        background-size: cover;}


        .reservation {
        width: 60%;
        margin: 0 auto;
        color: #fff;
        padding: 10px 48px;
        border: 1px #fff solid;
        font-family: 'Shippori Mincho', serif;}

        .reservation .r1 {font-size: 80%;
        font-weight: bold;}
        .reservation .r2 {font-size: 70%;}

        .pc {display: none;}

    }