.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_mobile_order/background_image_sm2.jpg),
        url(shared/img/chun_mobile_order/background_image_sm1.jpg);
    background-size: 50% auto, cover;
    background-position: 50%, 50%;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, fixed;
    height: 433vw;
    position: relative;
}

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


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


.MO-btn {
    position: absolute;
    top: 136%;
    left: 33%;
    width: 34%;
}

.kiyaku_-btn1 {
    position: absolute;
    top: 175%;
    left: 40%;
    width: 20%;
}

.privacy-btn1 {
    position: absolute;
    top: 185%;
    left: 38%;
    width: 25%;
}

.syosai-btn {
    position: absolute;
    top: 400%;
    left: 33%;
    width: 34%;
}


.help-btn {
    position: absolute;
    top: 571%;
    left: 27%;
    width: 46%;
}

.kiyaku_-btn2 {
    position: absolute;
    top: 700%;
    left: 33%;
    width: 34%;
}

.privacy-btn2 {
    position: absolute;
    top: 720%;
    left: 33%;
    width: 34%;
}


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


@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_mobile_order/background_image_sm2.jpg),
            url(shared/img/chun_mobile_order/background_image_sm1.jpg);
        background-size: 100% auto,
            cover;
        background-repeat: no-repeat;
        height: 867vw;
        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%;
    }

.MO-btn {
    position: absolute;
    top: 136%;
    left: 15%;
    width: 70%;
}

.kiyaku_-btn1 {
    position: absolute;
    top: 176%;
    left: 32%;
    width: 36%;
}

.privacy-btn1 {
    position: absolute;
    top: 187%;
    left: 27%;
    width: 46%;
}

.syosai-btn {
    position: absolute;
    top: 400%;
    left: 15%;
    width: 70%;
}


.help-btn {
    position: absolute;
    top: 571%;
    left: 4%;
    width: 92%;
}

.kiyaku_-btn2 {
    position: absolute;
    top: 700%;
    left: 15%;
    width: 70%;
}

.privacy-btn2 {
    position: absolute;
    top: 719%;
    left: 15%;
    width: 70%;
}

    

    .br_sp {
        display: flex;
    }

}