.js {
    display: none;
}

p {
    color: #ffffff;
}


img {
    width: 100%;
}


/*==================*
アニメーション
*==================*/

/* 元々あったボタン消し */
header {
    display: none !important;
}

/* ローディングアニメーション 背景画面設定　*/
#chun_afb {
    /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: #5d0c00;
    text-align: center;
    color: #fff;
}

/* ローディングアニメーション 画像中央配置　*/
#chun_afb_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ローディングアニメーション アイコンの大きさ設定　*/
#chun_afb_logo img {
    width: 400px;
}

/* ローディングアニメーション fadeUpをするアイコンの動き */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}

.scroll_up.on {
    transform: translateY(0);
    opacity: 1;
}

.scroll_down {
    transition: 0.8s ease-in-out;
    transform: translateY(-30px);
    opacity: 0;
}

.scroll_down.on {
    transform: translateY(0);
    opacity: 1;
}

.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}

.scroll_left.on {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    transform: translateX(0);
}

.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}

.scroll_right.on {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    transform: translateX(0);
}

.inview-blur {
    opacity: 0;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.blur {
    -webkit-animation-name: imageBlur;
    animation-name: imageBlur;
    opacity: 1;
    transition: .8s;
}

@-webkit-keyframes imageBlur {
    from {
        opacity: 0;
        -webkit-filter: blur(15px);
        -moz-filter: blur(15px);
        -ms-filter: blur(15px);
        -o-filter: blur(15px);
        filter: blur(15px);
    }

    to {
        opacity: 1;
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -ms-filter: blur(0px);
        -o-filter: blur(0px);
        filter: blur(0px);
    }
}

@keyframes imageBlur {
    from {
        opacity: 0;
        -webkit-filter: blur(15px);
        -moz-filter: blur(15px);
        -ms-filter: blur(15px);
        -o-filter: blur(15px);
        filter: blur(15px);
    }

    to {
        opacity: 1;
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -ms-filter: blur(0px);
        -o-filter: blur(0px);
        filter: blur(0px);
    }
}

/*========= レイアウトのためのCSS ===============*/


#scroll-img {
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #FFFCF4;
    z-index: -30;
}


#reservation {
    position: relative;
    z-index: 1;
    background: #FFFCF4;
    text-align: center;
    height: 106vw;
}

@media screen and (max-width:768px) {

    #scroll-img,
    #scroll-img:before {
        height: 90vh;
    }

}


/*==================*
背景
*==================*/

.background {
    background-image: url(shared/img/chun_delivery/background_image_sm2.jpg),
        url(shared/img/chun_delivery/background_image_sm1.jpg);
    background-size: 50% auto,
        cover;
    background-position: 50%,50%;
    background-repeat: no-repeat,
        no-repeat;
    height: 195vw;
    position: relative;
}

/*==================*
トップ
*==================*/
/*トップ画像サイズ*/
.top {
    height: 57vw;
    position: relative;
}


header {
    background-color: rgba(255, 255, 255, 1);
    height: 58px;
    position: relative;
    z-index: 50;
}


.delivery-btn {
    position: absolute;
    top: 80%;
    left: 30%;
    width: 40%;
}

/*==================
#block-bg1 {
    background-image: url(https://www.chunshuitang.jp/wp-content/themes/chunshuitang/shared/img/2023_af/top-img.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    height: 52.5vw;
    position: relative;
    color: #fff;
}

#block-bg2 {
    background-size: 100% auto;
    height: 52.5vw;
    position: relative;
}


ここまでも決していいかも？

*==================*/



/*==================*
タプレット
*==================*/


@media (max-width: 810px) {


    header {
        position: fixed;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 10000;
    }

    #toplogo {
        top: 18.2%;
        right: 51%;
        width: 41%;
    }

   

    .br_sp {
        display: flex;
    }


    #scroll-img {
        width: 100%;
        height: 37vh;
        position: relative;
        background-color: #FFFCF4;
        z-index: -30;
    }

    #scroll-img::before {
        height: 67vh;
    }



}



/*==================*
スマホ
*==================*/

@media screen and (max-width: 479px) {

    .background {
        background-image: url(shared/img/chun_delivery/background_image_sm2.jpg),
            url(shared/img/chun_delivery/background_image_sm1.jpg);
        background-size: 100% auto,
            cover;
        background-repeat: no-repeat;
        height: 390vw;
        position: relative;
    }

    .top {
        height: 114vw;
    }

    
    header {
        position: fixed;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 10000;
    }



    p {
        font-size: 5vw;
        color: #ffffff;
        font-weight: 300;
    }

    #toplogo {
        top: 0%;
        right: 46%;
        width: 51%;
    }

    .delivery-btn {
        top: 80%;
        left: 10%;
        width: 80%;
    }

    

    .br_sp {
        display: flex;
    }

}