@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Jost:wght@100..900&family=Noto+Serif+JP&display=swap');

.wrapper_ .cocoris__yoru{
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.wrapper_ .cocoris__yoru .font__cor{
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.wrapper_ .cocoris__yoru .font__fut{
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}
.wrapper_ .cocoris__yoru .font__yugo{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
}

/****************************
    contents
****************************/
.cocoris__yoru{
    font-size: 24px;
    line-height: 2.4;
    letter-spacing: 0.1em;
    position: relative;
}
.yoru__wrapper{
    width: 100%;
    height: 100vh;
    background: url(/cms/img/usr/feature/cocoris_yoru/st_back.jpg) no-repeat center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}
.yoru__contents{
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: 0 auto;
    color: #FFF;
    overflow: hidden;
}

.yoru__contents section{
    position: relative;
    z-index: 5;
}

@media (max-width: 750px) {
    .cocoris__yoru{
        font-size:3.333vw;
    }
}

/****************************
    common
****************************/
:root {
  --fontsize-mid: 35px;
  --fontsize-large: 45px;

  --num-10: 10px;
  --num-20: 20px;
  --num-30: 30px;
  --num-40: 40px;
  --num-50: 50px;
  --num-60: 60px;
  --num-70: 70px;
  --num-90: 90px;
  --num-100: 100px;
}
@media (max-width: 750px) {
    :root {
    --fontsize-mid: 4.666vw;
    --fontsize-large: 6vw;
    
    --num-10: 1.33vw;
    --num-20: 2.66vw;
    --num-30: 4vw;
    --num-40: 5.33vw;
    --num-50: 6.66vw;
    --num-60: 8vw;
    --num-70: 9.33vw;
    --num-90: 12vw;
    --num-100: 13.33vw;
    }
}
/**** title ****/
.title__min{
    font-size: var(--fontsize-mid);
    letter-spacing: 0.2em;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title__min span::before,
.title__min span::after{
    content:"";
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(/cms/img/usr/feature/cocoris_yoru/back_star05.png) no-repeat;
    background-size: cover;
    margin: 0 10px;
}

.title__middle{
    font-size: var(--fontsize-mid);
    letter-spacing: 0.2em;
    line-height:1.42;
    padding: 35px 0;
    text-align: center;
    position: relative;
}
.title__middle::before,
.title__middle::after{
    content: "";
    display: block;
    width: 470px;
    height: 37px;
    background: url(/cms/img/usr/feature/cocoris_yoru/title_waku.png);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.title__middle::after{
    top: auto;
    bottom: 0;
    transform: translate(-50%) scaleY(-1);
}

.title__large{
    font-size: var(--num-30);
    font-weight: 300;
    letter-spacing: 0.2em;
    line-height:1;
    text-align: center;
    position: relative;
}
.wrapper_ .title__large .ENG{
    font-size: 80px;
    color: #ffecb4;
    display: block;
    font-weight: 300;
    letter-spacing: 0.11em;
}
@media (max-width: 750px) {
    .title__min span::before,
    .title__min span::after{
        width: 2.93vw;
        height: 2.93vw;
        margin: 0 1.333vw;
    }

    .title__middle{
        padding: 4.66vw 0;
    }
    .title__middle::before,
    .title__middle::after{
        width: 62.666vw;
        height: 4.93vw;
    }

    .wrapper_ .title__large .ENG{
        font-size: 10.66vw;
    }
}

/**** schedule ****/
.schedule___box{
    border: 2px #bc9f50 solid;
    padding: var(--num-50) 6% var(--num-40);
}
.schedule___headline{
    text-align: center;
    margin-bottom: var(--num-40);
}
.schedule___headline dt{
    line-height: 1;
    font-size: var(--num-40);
    margin-bottom: var(--num-40);
}
.schedule___headline dd{
    letter-spacing: 0.1em;
    line-height: 2;
}
.schedule__list{
    color: #102447;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--num-50);
    padding: var(--num-30) 35px var(--num-50);
    margin-bottom: var(--num-40);
    font-size: var(--num-30);
    letter-spacing: 0;
}
.schedule__list small{
    font-size: 80%;
}
.schedule__list .over{
    background: #bc9f50;
    border-radius: 10px;
    color: #FFF;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.05em;
    width: 80px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.schedule__list .over.before{ background: #44546e; }
.schedule__list .over.end{ background: #999998; }

.schedule__list li{
    display: flex;
    justify-content:space-between;
    align-items: center;
    border-bottom: 1px #102447 solid;
    padding: 8px 0;
}
@media (max-width: 750px) {
    .schedule___box{
        border-width: 1px;
    }
    .schedule__list{
        padding: var(--num-30) 4.66vw var(--num-50);
    }
    .schedule__list .over{
        font-size: 2.93vw;
        border-radius: 1.33vw;
        width: 10.66vw;
        height: 4.53vw;
    }
    .schedule__list li{
        padding: 1.06vw 0;
    }
}

/**** btn ****/
.yoru__btn{
    width: 590px;
    height: 110px;
    margin: 0 auto;
    letter-spacing: 0.2em;
}
.yoru__btn a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px #bc9f50 solid;
    border-radius: 55px;
    position: relative;
    background-color: #102447;
    font-size: var(--num-40);
    line-height: 1;
    color: #FFF;
    text-decoration: none;
}
.yoru__btn a::before,
.yoru__btn a::after{
    content: "";
    display: block;
    width: var(--num-40);
    height: var(--num-40);
    background-image: url(/cms/img/usr/feature/cocoris_yoru/back_star01.png);
    background-size: cover;
    mix-blend-mode: color-dodge;
    position: absolute;
    top: 15px;
    right:var(--num-90);
}
.yoru__btn a::after{
    top: auto;
    right: auto;
    width: var(--num-20);
    height: var(--num-20);
    bottom: var(--num-20);
    left: var(--num-70);
}

.yoru__btn a span{
    display: block;
}
.yoru__btn a span::after{
    content: "";
    width: 48px;
    height: 48px;
    background: url(/cms/img/usr/feature/cocoris_yoru/arro_btn.png);
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
}
@media (max-width: 750px) {
    .yoru__btn{
        width: 78.66vw;
        height: 14.66vw;
    }
    .yoru__btn a{
        border-radius: 7.33vw;
    }
    .yoru__btn a::before{
        top: 2vw;
    }
    .yoru__btn a span::after{
        width: 6.4vw;
        height: 6.4vw;
        right: 3.33vw;
    }
}


/****************************
    star__area
****************************/
.star__area{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.start__logo{
    opacity: 0;
}
.start__text{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    text-shadow: 2px 2px 5px rgba(9, 15, 34, 1),-2px -2px 5px rgba(9, 15, 34, 1);
}
.start__text dt{
    font-size: 33px;
    line-height: 1.7;
    margin-bottom: 25px;
}
.start__text dt b{
    display: block;
    font-size: var(--fontsize-large);
    font-weight: normal;
}
@media (max-width: 750px) {
    .start__text dt{
        font-size: 4.4vw;
        margin-bottom: 3.33vw;
    }
    .start__logo img{
        width: 51.73vw;
    }
}

/****************************
    fixed__menu
****************************/
.fixed__menu{
    position: fixed;
    right: 4%;
    bottom: 200px;
    width: 250px;
    padding-bottom: 15px;
}
.fixed__menu.menu__buy{
    bottom: var(--num-70);
}
.fixed__menu:before,
.fixed__menu:after{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    background: #FFF;
}
.fixed__menu:before{
    width: 100%;
    height: 1px;
    left: 0;
}
.fixed__menu:after{
    width: 13px;
    height: 1px;
    right: 0;
    transform-origin: bottom right;
    transform: rotate(30deg);
}
.fixed__menu a{
    color: #FFF;
    font-size: var(--num-20);
    letter-spacing: 0.1em;
    font-weight: 600;
}
.fixed__menu a:hover{
    text-decoration: none;
}
.wrapper_ .fixed__menu  .title__large .ENG{
    font-size:55px ;
}

.fixed__btn.yoru__btn{
    position: fixed;
    top: 50%;
    right: calc( ( 100% - 750px ) / 2 );
    z-index: 5;
    width: 74px;
    height: 250px;
    transform: translateY(-50%);
}
.fixed__btn.yoru__btn a{
    writing-mode:vertical-rl;
    font-size: 22px;
    letter-spacing: 0.1em;
    background: rgba(16, 36, 71, 0.9);
    border-color: #cec8af;
}
.fixed__btn.yoru__btn a::before,
.fixed__btn.yoru__btn a::after{
    display: none;
}
.fixed__btn.yoru__btn a span{
    margin-top: -25px;
}
.fixed__btn.yoru__btn a span::after{
    width: 28px;
    height: 28px;
    top: auto;
    bottom: 15px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
@media (min-width: 751px) {
    .fixed__btn.yoru__btn{
        display: none;
    }
}
@media (max-width: 750px) {
    .fixed__menu{
        display: none;
    }
    .fixed__btn.yoru__btn{
        right: 0;
        width: 9.86vw;
        height: 33.33vw;
    }
    .fixed__btn.yoru__btn a{
        font-size: 2.93vw;
    }
    .fixed__btn.yoru__btn a span{
        margin-top: -3.33vw;
    }
    .fixed__btn.yoru__btn a span::after{
        width: 3.73vw;
        height: 3.73vw;
        bottom: 2vw;
    }
}

/****************************
    mv__area
****************************/
.mv__area{
    height: 100vh;
    display: flex;
    justify-content: center;
    padding-top: 10%;
    background: url(/cms/img/usr/feature/cocoris_yoru/mv.jpg) no-repeat center;
    background-size: cover;
}
.mv__area h1{
    font-weight: normal;
    font-size: 42px;
    line-height: 1.3;
    writing-mode:vertical-rl;
}
.mv__area h1 span{
    display: block;
}
.mv__area h1 span:nth-child(2){
    margin-top: 14%;
}
.mv__arrow{
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
}
.mv__arrow span{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 197px;
    height: 80px;
    opacity: 0;
}
.mv__arrow span.arrow__02{
    top: 10%;
}
.mv__arrow span:before,
.mv__arrow span:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 2px;
    height: 103px;
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: top left;
    margin-left: 1.5px;
}
.mv__arrow span:before {
    transform: rotate(-70deg);
}
.mv__arrow span:after {
    transform: rotate(70deg);
    left: auto;
    right: 0;
    transform-origin: top right;
    margin-right: 1.5px;
}
@media (max-width: 750px) {
    .mv__area{
        padding-top: 15vw;
    }
    .mv__area h1{
        font-size: 7.6vw;
    }
    .mv__arrow span{
        width: 26.266vw;
        height: 10.66vw;
    }
    .mv__arrow span:before,
    .mv__arrow span:after {
        width: 1px;
        height: 13.73vw;
        margin-left: 0.2vw;
    }
    .mv__arrow span:before,
    .mv__arrow span:after {
        background-color: #FFF;
    }
}


/****************************
    timer__area
****************************/
.timer__area{
    padding: var(--num-60) 5% var(--num-100);
}
.timer__wrap{
    display: flex;
    justify-content: space-between;
    margin-top: var(--num-30);
}
.timer__box{
    width:151px;
    color: #fefeff;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
}
.timer__box span{
    display: flex;
    justify-content: center;
    align-items: center;
    width:151px;
    height: 177px;
    font-size: var(--num-100);
    margin-bottom: 15px;
    position: relative;
    background-color: #102447;
}
.timer__box span::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/cms/img/usr/feature/cocoris_yoru/time_back.png);
    background-size: cover;
    mix-blend-mode:color-burn;
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 750px) {
    .timer__wrap{
        margin-top: 4vw;
    }
    .timer__box{
        width:20.133vw;
    }
    .timer__box span{
        width:20.13vw;
        height: 23.6vw;
        margin-bottom: 2vw;
    }
}

/****************************
    about__area
****************************/
.about__area{
    text-align: center;
    padding-bottom: var(--num-70);
}
.about__area .back__gra:before{
    top: -300px;
}
.about__headline{
    margin-bottom: var(--num-100);
}
.about__headline dt{
    font-size: var(--num-50);
    line-height: 1.5;
    margin-bottom: var(--num-30);
}
.about__item .title__min{
    font-size: var(--fontsize-large);
}
.about__item .item__image dt{
    padding: var(--num-50) var(--num-50);
}
@media (max-width: 750px) {
    .about__area .back__gra:before{
        top: -40vw;
    }
    .about__headline dt{
        line-height: 1.5;
    }
    .about__item .title__min{
        font-size: var(--fontsize-large);
    }
}

/****************************
    schedule__area
****************************/
.schedule__area{
    padding:0 4% var(--num-90);
}
/****************************
    item__area
****************************/
.title__item.title__large{
    font-size: var(--num-50);
    padding: 0 0 var(--num-20);
    line-height: 1.2;
    position: relative;
    margin-bottom: var(--num-60) ;
}
.title__item.title__large::after{
    content: "";
    display: block;
    width: 70%;
    height: 1px;
    background: #FFF;
    position: absolute;
    bottom: 0;
    left: 15%;
}
.title__item.title__large small{
    font-size: var(--fontsize-mid);
}
.item__area .item__box{
    padding: 0 0 160px;
}
.item__area .item__box:nth-child(2){
    padding: 0 0 var(--num-100);
}
.item__area .item__image{
    max-width: 591px;
    margin: 0 auto;
    position: relative;
}
.item__area .item__image .image_02{
    position: absolute;
    bottom: -65px;
    right: -20px;
}
.item__area .item__box:nth-child(2) .item__image .image_02{
    bottom: -55px;
    right: -60px;
}
@media (max-width: 750px) {
    .item__area .item__box{
        padding: 0 0 21.33vw;
    }
    .item__area .item__image{
        width: 78%;
    }
    .item__area .item__image .image_02{
        bottom: -8.66vw;
        right: -2.66vw;
        width: 31.6vw;
        height: 21.06vw;
    }
    .item__area .item__box:nth-child(2) .item__image .image_02{
        bottom: -7.33vw;
        right: -8vw;
        width: 40.4vw;
        height: 25.6vw;
    }
}

/****************************
    itemAbout__area
****************************/
.itemAbout__area{
    padding-bottom: 110px;
    text-align: center;
}
.itemAbout__area .item__image dt{
    margin: var(--num-60)  var(--num-50) var(--num-40);
}
@media (max-width: 750px) {
    .itemAbout__area{
        padding-bottom: 14.66vw;
    }
}

/****************************
    movie__area
****************************/
.movie__area{
    padding-bottom:0;
}
.movie__box{
    margin-top: var(--num-60) ;
}
.movie__box video{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    vertical-align: bottom;
}


/****************************
    award__area
****************************/
.award__area{
    padding: 150px 0 80px;
    text-align: center;
    position: relative;
}
.award__area::before,
.award__area::after{
    content: "";
    display: block;
}
.award__area .headline__bottom{
    line-height: 1;
    margin: var(--num-30) 0 var(--num-20);
}
.award__area .text__gra{
    font-size: 34px;
    line-height: 1.5;
    display: inline-block;
    background: linear-gradient(90deg, #f9fae0, #e3c58c 50%, #f9fae0);
    background: -webkit-linear-gradient(90deg, #f9fae0, #e3c58c 50%, #f9fae0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.award__area .text__gra small{
    font-size: 16px;
}
.emb__list{
    padding: var(--num-50) 9% var(--num-10);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.emb__list li{
    margin-bottom: var(--num-30);
}
.emb__list__bottom{
    text-align: left;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.6;
    padding: 0 0 0 3%;
}
.award__area .schedule___box{
    width: 92%;
    margin: 150px auto 0;
}
@media (max-width: 750px) {
    .award__area{
        padding: 20vw 0 10.66vw;
    }
    .award__area .title__large{
        width: 51.6vw;
        margin: 0 auto;
    }
    .emb__list li {
        width: 31%;
    }
    .award__area .text__gra{
        font-size: 4.53vw;
    }
    .award__area .text__gra small{
        font-size: 2.13vw;
    }
    .emb__list__bottom{
        font-size: 2.13vw;
    }
    .award__area .schedule___box{
        margin: 20vw auto 0;
    }
}

/****************************
    review__area
****************************/
.review__area{
    padding-bottom: 130px;
}

.review__area .swiper-container{
    margin-top: var(--num-50);
    padding: 0 12%;
}
.review__box{
    width: 100%;
    height: 550px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: var(--num-50);
    padding: var(--num-60)  var(--num-40);
    color: #312c2c;
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: all 0.6s ease-out;
}
.review__box p{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.review__box.swiper-slide-active{
    opacity: 1;
}
.review__box .review__name{
    float: right;
}
.review__area .swiper-button-prev{
    width: var(--num-100);
    height: var(--num-100);
    top: calc(50% - var(--num-20) );
    left: var(--num-30);
    background: url(/cms/img/usr/feature/cocoris_yoru/review_prev.png);
    background-size: cover;
}
.review__area .swiper-button-next{
    width: var(--num-100);
    height: var(--num-100);
    top: calc(50% - var(--num-20) );
    right: var(--num-30);
    background: url(/cms/img/usr/feature/cocoris_yoru/review_next.png);
    background-size: cover;
}
@media (max-width: 750px) {
    .review__area{
        padding-bottom: 17.33vw;
    }
    .review__box{
        height: 73.33vw;
        font-size: 3.73vw;
    }
}

/****************************
    foot__about__area
****************************/
.foot__about__area{
    padding-bottom: 120px;
}
.foot__about__area .item__image{
    padding: var(--num-50) 11% 0;
}
.foot__about__area .item__image .title__box{
    width: 100%;
    margin: 25px 0 45px;
    padding: 23px 0;
    background: #102447;
}
.foot__about__area .item__image .item__exp{
    color: #102447;
    letter-spacing: 0.025em;
    line-height:1.52;
    padding-bottom: var(--num-40);
}
.foot__about__area .item__image .item__exp .headline{
    font-size: 35px;
    letter-spacing: 0.2em;
    line-height:1;
    margin-bottom: 25px;
}
.foot__about__area .yoru__btn a{
    border: none;
}
@media (max-width: 750px) {
    .foot__about__area{
        padding-bottom: 16vw;
    }
    .foot__about__area .item__image .title__box{
        margin: 3.33vw 0 6vw;
        padding: 3.06vw 0;
    }
    .foot__about__area .item__image .item__exp .headline{
        font-size: 4.66vw;
        margin-bottom: 3.33vw;
    }
}

/****************************
    story__area
****************************/
.story__area{
    color: #102447;
    padding-bottom: 140px;
    text-align: center;
}
.wrapper_ .story__area .title__large .ENG{
    color: #102447;
}
.story__box{
    position: relative;
    z-index: 1;
    padding: 120px 0 var(--num-50);
    margin-top: var(--num-40);
}
.story__box::before,
.story__box::after{
    content: "";
    display: block;
    width: 590px;
    height: 47px;
    background: url(/cms/img/usr/feature/cocoris_yoru/title_waku_bk.png);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.story__box::after{
    top: auto;
    bottom: 0;
    transform: translate(-50%) scaleY(-1);
}
.story__box dl dd{
    margin: var(--num-70) 0 var(--num-60) ;
}
.story__box p{
    line-height: 2.4;
    letter-spacing: 0.1em;
    padding-bottom: var(--num-70);
}
@media (max-width: 750px) {
    .story__area{
        padding-bottom: 18.66vw;
    }
    .story__box{
        padding-top: 16vw;
        margin-top: var(--num-40);
    }
    .story__box::before,
    .story__box::after{
        width: 78.66vw;
        height: 6.26vw;
    }

    .story__box dl dt img{
        width: 50.13vw;
    }
    .story__box dl dd img{
        width: 34.13vw;
    }
}



/****************************
    shop common parts
****************************/
body.yoru #header{
    transform: translateY(-130px);
    transition: transform 0.6s 0.2s ease-in-out;
    position: absolute;
}
body.yoru #header.fixed{
    transform: translateY(0);
    position: fixed;
}

body.yoru .mainframe_ > .forcms_block:last-child{
    padding-bottom: 0;
}
body.yoru .block-brand-footer,
body.yoru footer#footer{
    position: relative;
    z-index: 10;
    margin-top: 0;
}
@media (max-width: 750px) {
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
        font-size: inherit;
    }
    .review__area .swiper-button-next:after,
    .review__area .swiper-button-prev:after{
        display: none;
    }
}


body.yoru .forcms_block{
    z-index: 0;
    position: relative;
}