@media only screen and (min-width: 468px) {}


@media only screen and (min-width: 576px) {}

@media only screen and (min-width: 767px) {

    .brsp {
        display: none;
    }

}

@media only screen and (min-width: 768px) {
    #otoku-info{
        margin-top:-3rem;
    }

}

@media only screen and (min-width: 992px) {}

@media only screen and (min-width: 1009px) {}

@media only screen and (min-width: 1085px) {}

@media only screen and (min-width: 1201px) {


    @-webkit-keyframes fadeInLeftBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-800px, 0, 0);
            transform: translate3d(-800px, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    @keyframes fadeInLeftBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-800px, 0, 0);
            transform: translate3d(-800px, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    .fadeInLeftBig {
        -webkit-animation-name: fadeInLeftBig;
        animation-name: fadeInLeftBig
    }






    @-webkit-keyframes fadeInRightBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(800px, 0, 0);
            transform: translate3d(800px, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    @keyframes fadeInRightBig {
        0% {
            opacity: 1;
            -webkit-transform: translate3d(1800px, 0, 0);
            transform: translate3d(1800px, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    .fadeInRightBig {
        -webkit-animation-name: fadeInRightBig;
        animation-name: fadeInRightBig
    }



    .codebox {
        padding-left: 60px;
        padding-right: 60px;
    }

}


@media only screen and (min-width: 1250px) {

.headtitle {
    padding-bottom:0rem;

}

#gift02 {
    padding-top:0;
}

}



@media only screen and (min-width: 1400px) {


    #sale_wrap.inner {
        max-width: 1400px;
    }


}



@media only screen and (min-width:467px) and (max-width:992px) {}

@media only screen and (min-width:767px) and (max-width:1024px) {}

@media only screen and (min-width: 1350px) {}



@media only screen and (max-width: 1200px) {
    @-webkit-keyframes fadeInLeftBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-400px, 0, 0);
            transform: translate3d(-400px, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    @keyframes fadeInLeftBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-400px, 0, 0);
            transform: translate3d(-400px, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    .fadeInLeftBig {
        -webkit-animation-name: fadeInLeftBig;
        animation-name: fadeInLeftBig
    }






    @-webkit-keyframes fadeInRightBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(400px, 0, 0);
            transform: translate3d(400px, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    @keyframes fadeInRightBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(1100px, 0, 0);
            transform: translate3d(1100px, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    .fadeInRightBig {
        -webkit-animation-name: fadeInRightBig;
        animation-name: fadeInRightBig
    }
}

@media only screen and (max-width: 1008px) {}

@media only screen and (max-width: 1085px) {}


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

    #gift02:before {
        background-size:contain;
    
    }



    .specialday{
        width:95%;
    }





}




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

    #gift01:before {
        background: url(../images/bg_info_seagull03.png) no-repeat center bottom 14% ;
    background-size: 70%;
    }



    #sale-area {
        padding-top:2rem;
        gap:1rem 1rem;
    }



.sale_item{
    width:calc(50% - 1.5rem);
}

.sale_item.twoblock{
    width:calc(100% - 1.5rem);
}


}


@media only screen and (max-width: 991px) {
    .dottop {
        border-top: none;
    }


#pass-area:before {   
    background: none;
}


#sale-area .row{
    justify-content: center;
    }


}




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

    .openbtn {
        width: 54px;
        height: 54px;
    }

    .deer02 {
        left: 18%;
        top: 15%;
        width: calc(30px + 100 * ((100vw - 320px) / 1120));
    }


    #gift02 #code_title {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }
    
    
    .headtitle {
        padding-bottom:17rem;
    
    }
    .catmenu {
        top: 83%;
    }


    .event_title{
        margin:0rem auto 4rem auto;
    }




}


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


    .mujibox {
        flex-wrap: wrap;
    }

    .mujibox img.left {
        width: calc(100%);
    }

    .mujibox img.rigth {
        width: calc(100%);
    }


    .infobox.cinemabox {
        padding: 2rem 2rem 2rem 2rem;
    }



    .cinemabox {
        flex-wrap: wrap;
        gap: 0px;
        justify-content: center;

    }

    .cinemabox .left {
        width: calc(100%);
        max-width: 260px;
        margin-bottom: 20px;

    }

    .cinemabox .right {
        width: calc(100%) !important;
    }

    .mov_txt {
        font-size: 1.4rem;
    }


    .orikomi {
        width: 21vw;

        left: calc(2%);
        bottom: calc(-3%);
        padding-bottom: 2rem;


    }

    .orikomi img {
        filter: drop-shadow(2px 2px 2px #aaa);
    }

    .contentstitlebox {

        margin-top: -2rem;
    }







    .dotright-pc {
        border-right: none;
    }



    .infobox {

        padding: 1rem 1rem 1rem 1rem;
    }



    #gourmet-area .grid-index {
        padding-top: 2rem;
    }




    #spring-area .grid-index {
        padding-top: 0rem;
    }

    #suimin-area .grid-index {
        padding-top: 0rem;
    }


    #gift01 .grid-item:nth-child(2),
    #gift02 .grid-item:nth-child(2),
    #gift03 .grid-item:nth-child(2) {
        margin-top: 0rem;
    }



    #gift04 {
        padding-bottom: 3rem;
    }



    







    .hand_left {
        position: absolute;
        left: 20%;
        top: 57%;
        z-index: 100;
        width: calc(70px + 210 * ((100vw - 320px) / 1120));
        max-width: 300px;
    }

    .hand_right {
        position: absolute;
        right: 20%;
        top: 57%;
        z-index: 100;
        width: calc(70px + 210 * ((100vw - 320px) / 1120));
        max-width: 300px;
    }



    


    #sale-area {
        margin-top: -3rem;
    }




    #gift01 {
        width: 100%;
        background: #00C8FF url(../images/event_bg.png) repeat-x left 10% bottom;
    background-size: 250%;
        padding: 5rem 0 8.2rem 0;
        
    }

    .event_flame{
        margin:0 auto 2rem auto;
        padding:2rem 0rem 2rem 2rem;
        width:95%;
    }
    
    .event_flame img{
        margin-left:-2rem;
        
    }



}





@media only screen and (min-width:468px) and (max-width:600px) {}




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


    #pokapoka_title h2:before,
    #pokapoka_title h2:after,
    #cold_title h2:before,
    #cold_title h2:after {
        background: none;
    }




    .infobox {
        margin-bottom: 5rem;
    }



    .card-block {
        margin-bottom: 6rem;
    }


    .row-80>div {
        padding-right: 20px;
        padding-left: 20px;
    }




    .event-card.purpleflame {
        border: 3px solid #7f1084;
    }
    
    .event-card.blueflame {
        border: 3px solid #15a8b0;
    }
    
    .event-card.greenflame {
        border: 3px solid #8dc556;
    }
    
    .event-card.yellowflame {
        border: 3px solid #fff100;
    }


    

}



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

    .openbtn {
        position: fixed;
        z-index: 9999;
        top: 0px;
        right: 0px;
        /*ボタン内側の基点となるためrelativeを指定*/
        background: linear-gradient(0.25turn, #ce2ca5, #b41e8e);
        cursor: pointer;
        width: 46px;
        height: 46px;
    }

    /*ボタン内側*/
    .openbtn span {
        display: inline-block;
        transition: all .4s;
        /*アニメーションの設定*/
        position: absolute;
        left: 12px;
        height: 2px;
        border-radius: 0px;
        background: #fff;
        width: 52%;
    }

    .openbtn span:nth-of-type(1) {
        top: 14px;
    }

    .openbtn span:nth-of-type(2) {
        top: 21px;
    }

    .openbtn span:nth-of-type(3) {
        top: 28px;
    }

    /*activeクラスが付与されると線が回転して×に*/

    .openbtn.active span:nth-of-type(1) {
        top: 15px;
        left: 13px;
        transform: translateY(6px) rotate(-45deg);
        width: 45%;
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
        /*真ん中の線は透過*/
    }

    .openbtn.active span:nth-of-type(3) {
        top: 27px;
        left: 13px;
        transform: translateY(-6px) rotate(45deg);
        width: 45%;
    }



    .headerlogo {
        height:46px;
    
    }


    #head_menu {
        max-width: 350px;
    }


    .imgarea {
        padding-top: 6rem;
        
    }

    #hinyari-area {
        padding-top: 2.5rem;
    }

    .event_title{
        padding:1rem .5rem .3rem .5rem;
        margin-bottom:2rem;
    }

    .event_title img{
        margin-top:-1.5rem;
    }

    .codebox {
    
        padding-bottom: 1rem;
    }





}


@media only screen and (min-width:501px) and (max-width:1240px) {

    #head_menu {
        width: 80%;
    }


}



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

    .dotright-pc {
        border-right: none;
    }


}




@media only screen and (min-width:480px) and (max-width:768px) {}





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

    .warmcatch {
        position: absolute;
        left: 2%;
        top: 3rem;

        width: calc(150px + 100 * ((100vw - 320px) / 1120));
    }


    .menu_code.menu_denim {
        margin-top: -1rem;
    }


    .imgarea {
        padding-top: 4rem;
    }


    #gift02:before {
        background-size: contain;
    }



    #gift01 {
        padding-top: 5rem;
        
    }

    #gift02 {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    #gift03 {
        padding-top: 3rem;
        padding-bottom:0rem;
    }

    

    #gift06 {
        background-size: contain;
    }


    #sale-area {
        margin-top: -1.5rem;
    }

    #pass-area {
        margin-top: 3.5rem;
    }

    #suimin-area {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }


.aeoncard {
    margin-bottom: 2rem;
    margin-top:-2rem;
}

.chusenkai {
    margin-bottom: 2rem;
    
}



}