@charset "utf-8";

/**** backgorund ****/
#back__top{
    background: #102447;
    background-image: linear-gradient(180deg,#102447 70%,#3b4f71);
}
#back__bottom{
    position: relative;
    background-image: linear-gradient(180deg,#3b4f71,#d9e7ff);
}

.back__gra{
    position: relative;
}
.back__gra:before{
    content: "";
    display: block;
    width: 300%;
    height: 1000px;
    opacity: 0.3;
    background-image: linear-gradient(160deg, rgba(16, 36, 71, 0) 35%, #9518ff 50%, rgba(16, 36, 71, 0) 65%);
    position: absolute;
    top: 0;
    left: -100%;
    z-index: -1;
}

.yoru__contents #back__top>section,
.yoru__contents #back__bottom>section{
    position: relative;
}
.yoru__contents #back__top>section::before,
.yoru__contents #back__bottom>section::before{
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode:color-dodge;
}
.timer__area::after,
.about__area::after,
.item__area::after,
.award__area::after,
.itemAbout__area::after,
.review__area::after{
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode:screen;
}

.image__shadow{
    box-shadow: 0px 0px 15px 7px rgba(0, 0, 0, 0.35);
}

#back__bottom .back__sun{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#back__bottom .story__back{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-image:url(/cms/img/usr/feature/cocoris_yoru/story_back.png);
    background-repeat: no-repeat;
    background-size:100% auto;
    background-position:center 300px;
    opacity: 0.8;
    /*mix-blend-mode:lighten;*/
}
#back__bottom .foot__about__area .story__back{
    background-position:center calc( 300px - 840px );
}
#back__bottom .story__area .story__back{
    background-position:center calc( 300px - 840px - 1561.67px );
}
#back__bottom .back__sun{
    z-index: 0;
    background-image:url(/cms/img/usr/feature/cocoris_yoru/back_sun.png);
    background-repeat: no-repeat;
    background-size:100% auto;
    background-position:bottom;
    mix-blend-mode:screen;
}
@media (max-width: 750px) {
    .back__gra:before{
        height: 1000px;
    }

    .image__shadow{
        box-shadow: 0px 0px 2vw 0.93vw rgba(0, 0, 0, 0.35);
    }

    #back__bottom .story__back{
        background-position:center 40vw;
    }
    #back__bottom .foot__about__area .story__back{
        background-position:center calc( 40vw - 112vw );
    }
    #back__bottom .story__area .story__back{
        background-position:center calc( 40vw - 112vw - 208.22vw );
    }
}

/****************************
    timer__area
****************************/
.timer__area{
    background-image: linear-gradient(180deg, #102447, #102447);
}
.timer__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__timer__area.png);
    background-position: bottom!important;
}
.timer__area::after{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background02__timer__area.png);
    background-position: bottom!important;
}


/****************************
    about__area
****************************/
.about__area{
    background-image: linear-gradient(180deg, #102447, #102447);
}
.about__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__about__area.png);
}
.about__area::after{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background02__about__area.png);
}


/****************************
    schedule__area
****************************/
.schedule__area{
    background-image: linear-gradient(180deg, #102447, #102447);
}
.schedule__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__schedule__area.png);
}


/****************************
    item__area
****************************/
.item__area{
    background-image: linear-gradient(180deg, #102447, #162a4d);
}
.item__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__item__area.png);
}
.item__area::after{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background02__item__area.png);
}


/****************************
    itemAbout__area
****************************/
.itemAbout__area{
    background-image: linear-gradient(180deg, #162a4d, #24385b);
}
.itemAbout__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__itemAbout__area.png);
}
.itemAbout__area::after{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background02__itemAbout__area.png);
}


.itemAbout__area .back__gra:before {
    background-image: linear-gradient(166deg, rgba(16, 36, 71, 0) 35%, #117ff0 50%, rgba(16, 36, 71, 0) 65%);
    top:-280px;
}


/****************************
    movie__area
****************************/
.movie__area{
    background-image: linear-gradient(180deg, #24385b, #3b4f71);
}
.movie__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__movie__area.png);
}

/****************************
    award__area
****************************/
.award__area{
    background-image: linear-gradient(180deg, #3b4f71, #667999);
}
.award__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__award__area.png);
}
.award__area::after{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background02__award__area.png),url(/cms/img/usr/feature/cocoris_yoru/background03__award__area.png);
    background-position: top,bottom!important;
}


/****************************
    review__area
****************************/
.review__area{
    background-image: linear-gradient(180deg, #667999, #7f91af);
}
.review__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__review__area.png);
}
.review__area::after{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background02__review__area.png);
}


/****************************
    foot__about__area
****************************/
.foot__about__area{
    background-image: linear-gradient(180deg, #7f91af, #b0c0db);
}
.foot__about__area::before{
    background-image: url(/cms/img/usr/feature/cocoris_yoru/background__foot__about__area.png);
}


/****************************
    story__area
****************************/
.story__area{
    background-image: linear-gradient(180deg, #b0c0db, #d4e2fb);
}