@charset "utf-8";
/* CSS Document */
.ec-layoutRole__main video{
    z-index: -999!important;
}
.mv_bottom_pc img{
    z-index: 999!important;
}


/*PC左側　バナー　スライド*/
.mv_bottom_container .flex .top_slider{
    max-width: 1000px;              
    width: 90%;
    position: relative;
    margin: 0 auto 40px auto;
}
@media (min-width:769px){
    .mv_bottom_container .flex{
        display: flex;
    }
    
    .mv_bottom_container .flex .top_slider{
        width: 50%;
        margin-bottom: 0;
    }
  
}

/*.mv_bottom_container .flex .top_slider::before{  
    content: "";       
    position: absolute;    
    top: 0;
    left: -20%; 
    bottom: 0; 
    margin: auto;
      
    background: url("../img/top/bg02.png")no-repeat;      
    background-position: center left;   
    background-size: contain;
   
    height: 1200px;  
    max-width: 1000px;
    width: 100%;
}*/

.top_slider .slider {
    width: 100%;
    margin:  0 auto;
}

@media (min-width:769px){
    .top_slider .slider{
        width: 80%;
    }
}

/*PC左側　バナー　スライド 装飾*/
.top_slider .slick-slide {
    margin: 0px 20px;
}

.top_slider .slick-slide img {
    width: 100%;
}



.top_slider .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}
    
.top_slider .slick-active {
    opacity: .5;
}
    
.top_slider .slick-current {
    opacity: 1;
}



.js-top_slider div img{
    width: 100%;
    border-radius: 10px;
}




/*       プログレスバー      */ 
.dots-wrap button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.dots-wrap {
    display: flex;
    margin-top: 16px;
    margin-left: 18%;
}

@media (min-width:769px){
    .dots-wrap{
        margin-left: 12%;
    }  
}

.dots-wrap li {
    width: 20%;
    max-width: 80px;
    height: 8px;
    background-color: #ccc;
    cursor: pointer;
    position: relative;
    
    margin-right: 4%;
}

@media (min-width:769px){
    .dots-wrap li{
        margin-right: 16px;
    }
}

.dots-wrap li::before {
    content: "";
    display: inline-block;
    background: #2870AF;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
}

.dots-wrap li.slick-active::before {
    background: #2870AF;
    animation: progressbar-anime 4.5s linear forwards;
}

@keyframes progressbar-anime {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}


/* スライド枚数表示 */
.slider-count {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #2870AF;
    font-size: 16px;
    z-index: 10;
    margin-bottom: -2%;
    margin-left: 5%;
}

@media (min-width:769px){
    .slider-count {
        margin-bottom: -1%;
        margin-left: 12.5%;
    } 
}


/*PC右側　カテゴリアイコン*/
.mv_bottom_container .flex .items_container{            
    width: 100%;
}

.mv_bottom_container .items_container{
    padding-right: 5%;
    padding-left: 5%;
}

.mv_bottom_container .items_container .elem{   
    min-width: 48%;
}

.mv_bottom_container .items_container .elem img{
    width: 100%;
}


@media (min-width:769px){
    .mv_bottom_container .flex .items_container{            
        width: 60%;
    }
    
    .mv_bottom_container .items_container{
        padding-left: 0;
    } 
}