@charset "utf-8";
/****************************************************************************************************

カルーセル

****************************************************************************************************/
/****************************************************************************************************

本体

****************************************************************************************************/
.carousel{
    position:relative;
    width:100%;
}
.carouselViOuter{
    overflow: hidden;
    width: 100%;
}





/****************************************************************************************************

スライド

****************************************************************************************************/
.carouselVi{
    position:relative;
    margin-bottom: 15px;
    width:100%;
/*    height: 480px;*/
}

    .carouselVi ul{
        position:absolute;
        top:0;
        left:0;
        overflow:hidden;
        /* width: calc(2880px + 50px * 3); */
    }

    .carouselVi li{
        float:left;
/*
        width:960px;
        margin-right: 50px;
        margin-right: calc( 50 / 1200 * 100% );
*/
    }

    .carouselVi img{
        vertical-align:bottom;
    }
    
        .carouselVi li img{
            -webkit-transition:all .2s ease;
            transition:all .2s ease;
        }
        .carouselVi li.-roll img{
            opacity:0.8;
        }










/****************************************************************************************************

ナビゲーション

****************************************************************************************************/
.carouselNavi{
    text-align:center;
}

.carouselNavi__list{
    display: inline-block;
    vertical-align: middle;
}

.carouselNavi__item{
    display: table-cell;
    width:28px;
    height: 18px;
}

    .carouselNavi__item div{
        margin: auto;
        width: 18px;
        height: 18px;
        background: url(../../images/home/promotion/no.png) no-repeat 0 0;
        cursor:pointer;
    }
    .carouselNavi__item.-current div{
        background-image: url(../../images/home/promotion/no_current.png);
    }




/*
横移動ボタン
*/
.carouselNavi__btn{
    position: absolute;
    display: inline-block;
    top: 50%;
    margin-top: -50px;
}
    .carouselNavi__btn img{
        vertical-align: bottom;
    }

    .carouselNavi__btn.-active{ cursor: pointer; }
    .carouselNavi__btn.-sleep{ opacity: 0.3; }


.carouselNavi__btnPrev{
    left: -25px;
}
.carouselNavi__btnNext{
    right: -25px;
}