@charset "UTF-8";

#wrapper{
    position: relative;
}
.w750{
    max-width: 750px;
    margin: 0 auto;
}
.w640{
    max-width: 640px;
    margin: 0 auto;
}
.flex__box{
    display: flex;
    flex-wrap: wrap;
}
#container{
    max-width: 750px;
    margin: 0 auto;
    background: #FFF;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 1;
}
@media (min-width: 751px) {
    a{ transition: all 0.6s ease; }
    a:hover{
        opacity: 0.8;
    }
    #wrapper::before{
        content: "";
        display: block;
        width: 100%;
        height: 100vh;
        background:url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u93497754/pc/sucrey_campaign_2606/css/../images/camp2606_back.png) no-repeat center;
        background-size: cover;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0;
    }
    #container{
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    }
}

/*****************************
    header
******************************/
header{
    background: #FFF;
    position: relative;
    z-index: 1;
}
header .flex__box{
    align-items: center;
    padding: 30px 0;
}
header .flex__box h1{
    width: 25%;
    padding: 0 3%;
}
header .flex__box .head__bnr{
    width: 75%;
}
@media (max-width: 750px) {
    header .flex__box{
        padding: 10px 0;
    }
}

/*****************************
    area
******************************/
section.fv__area{
    padding-bottom: 30px;
}
section.line{
    text-align: center;
    padding-bottom: 40px;
}
section.menu__area{
    padding: 0 0 25px;
}
section.menu__area ul{
    justify-content: center;
    padding: 0 5%;
}
section.menu__area ul li{
    margin: 0 4.5px 15px;
}
section.coupon__area{
    padding-bottom: 30px;
}
section.coupon__area .flex__box{
    justify-content: center;
}
section.coupon__area .flex__box li{
    margin: 0 10px;
}
section.pre__area{
    background:#14489d;
    margin-bottom: 60px;
}
section.pre__area .inner{
    padding:0 67px 50px;
}
section.pre__area .flex__box{
    background: #f6f6f6;
}
section.limited__area{
    padding-bottom: 40px;
}
section.point__area{
    padding-bottom: 40px;
}
section.present__area{
    padding-bottom: 40px;
}
section.present__area .present__bnr{
    margin-top: 50px;
}
section.item__area{
    padding-bottom: 40px;
}
section#RECO.item__area{
    padding: 0;
}
section.bottom__totop{
    padding: 20px 0;
    text-align: center;
}
@media (max-width: 750px) {
    section.fv__area{
        padding-bottom: 15px;
    }
    section.line{
        padding:0 6% 20px;
    }
    section.menu__area{
        padding: 0 0 15px;
    }
    section.menu__area ul{
        padding: 0 1%;
    }
    section.menu__area ul li{
        width: 24%;
        margin: 0 0.5% 2%;
    }
    section.coupon__area{
        padding:0 0 35px;
    }
    section.coupon__area .flex__box li{
        width: 45%;
        margin: 0 1%;
    }
    section.pre__area{
        margin-bottom: 30px;
    }
    section.pre__area .inner{
        padding:0 8% 20px;
    }
    section.pre__area .flex__box li{
        width: 50%;
    }
    section.limited__area{
        padding:0 6% 20px;
    }
    section.point__area{
        padding:0 6% 20px;
    }
    section.point__area ul li{
        width: 50%;
    }
    section.present__area{
        padding:0 6% 20px;
    }
    section.present__area .present__bnr{
        margin-top: 25px;
    }
    section.item__area{
        padding:0 6% 20px;
    }
    section.item__area ul li{
        width: 50%;
    }
    section.item__area ul li.wide{
        width: 100%;
    }
    section#RECO.item__area{
        padding:0 6%;
    }
    section.bottom__totop{
        padding: 10px 6% ;
    }
}