@charset "utf-8";
/*++++++++++++++++++++++++++++++++++++++++++
    スライダ―Slickjs専用CSS
    ※Media Queryは下にまとめて
------------------------------------------*/
/* Mobile///////////////////////////////////
     100%（768px）
//////////////////////////////////////////*/
.main-slider-area {

}
    #main-slide-box {

    }
    #main-slide-box img {
        transform: scale(1.2);
        transition: .8s cubic-bezier(.645, .045, .355, 1);
    }
    #main-slide-box img {
        transform: scale(1);
    }

    .slide-img img {
        max-width: 100%;
        margin: 0 auto;
    }
    
.sub-slide-area {
    height: 200px;
    margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw);
}
/* Tablet///////////////////////////////////
    max-min width 991-768px
//////////////////////////////////////////*/
@media screen and (max-width: 991px) and (min-width: 768px) {
    .main-slider-area {
        position: absolute;
        right: 20px;
        width: 723px;
        margin: 0;
    }
    .sub-slide-area {
        height: 180px;
        margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw);
    }
         
}

/* Small Monitor////////////////////////////
    max-min width 1199-992px
//////////////////////////////////////////*/
@media screen and (max-width: 1199px) and (min-width: 992px) {
    .main-slider-area {
        position: absolute;
        right: 0;
        left: 0;
        width: 933px;
        margin: 0;
    }
    .sub-slide-area {
        height: 150px;
        margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw);
    }
}

/* Large Monitor////////////////////////////
    min width 1200px
//////////////////////////////////////////*/
@media screen and (min-width: 1200px) {
    .main-slider-area {
        position: absolute;
        right: 20px;
        width: 1127px;
        margin: 0;
    }
    .sub-slide-area {
        height: 200px;
        margin: 0 calc(50% - 50vw) 2em calc(50% - 50vw);
    }
}