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

.swiper{
    position:relative;
    text-align: left;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

/* #visula{
    width: 87.5%;
    max-width: 752px;
} */

.img_wrap_1{
    background-image:url(../image/top/MV_1.png);
    width: 100%;
    height: 0;
    padding-top: 53.7%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.img_wrap_2{
    background-image:url(../image/top/MV_2.png);
    width: 100%;
    height: 0;
    padding-top: 53.7%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.img_wrap_3{
    background-image:url(../image/top/MV_3.png);
    width: 100%;
    height: 0;
    padding-top: 53.7%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


.img_wrap img{
    display: block;
    width: 100%;
    height: auto;
}

.slider_wrap{
    position: relative;
}

.slider_wrap .swiper-button-next{
    content: "";
    display: block;
    position: absolute;
    background: url(../image/common/next.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 52px;
    height: 52px;
    top: 60%;
    right: -100px;
    transform: translateX(-50%);
    z-index: 10;
}

.slider_wrap .swiper-button-prev{
    content: "";
    display: block;
    position: absolute;
    background: url(../image/common/prev.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 52px;
    height: 52px;
    top: 60%;
    left: -100px;
    transform: translateX(50%);
    z-index: 10;
}

/* .top_slide_2 .swiper-button-next:after{
    content: "";
    display: block;
    position: absolute;
    background: url(../image/common/next.png);
    width: 52px;
    height: 52px;
    left: 0px;
    transform: translateX(-50%);
    z-index: 10;
} */

/* .top_slide_2 .swiper-button-prev:after{
    content: "";
    display: block;
    position: absolute;
    background: url(../image/common/prev.png);
    width: 52px;
    height: 52px;
    right: 0px;
    transform: translateX(-50%);
    z-index: 10;
} */

/*----------------------------
追記
-----------------------------*/

.swiper-container,
.swiper-slide {
  height: 100%;
}


@media screen and (max-width:1300px) {
    
    /* .slider_wrap .swiper-button-next{
        content: "";
        display: block;
        position: absolute;
        background: url(../image/common/next.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 50px;
        height: 50px;
        top: 60%;
        right: 0px;
        transform: translateX(-50%);
        z-index: 10;
    }
    
    .slider_wrap .swiper-button-prev{
        content: "";
        display: block;
        position: absolute;
        background: url(../image/common/prev.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 50px;
        height: 50px;
        top: 60%;
        left: 0px;
        transform: translateX(50%);
        z-index: 10;
    }  */
    
        
}





@media screen and (max-width:1200px) {
    
.swiper-horizontal>.swiper-scrollbar{
    width: 150px;
     right: 0%;
    bottom:77px;
}    

.slider_wrap{
    max-width: 750px;
    margin: 0 auto;
}
    
}


@media screen and (max-width:1000px) {
    
    .slider_wrap{
        max-width: calc(700px - 104px);
        margin: 0 auto;
    }
        
    }

@media screen and (max-width:768px) {
    
    .slider_wrap .swiper-button-next{
        content: "";
        display: block;
        position: absolute;
        background: url(../image/common/next.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 30px;
        height: 30px;
        top: 60%;
        right: -10px;
        transform: translateX(-50%);
        z-index: 10;
    }
    
    .slider_wrap .swiper-button-prev{
        content: "";
        display: block;
        position: absolute;
        background: url(../image/common/prev.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 30px;
        height: 30px;
        top: 60%;
        left: -10px;
        transform: translateX(50%);
        z-index: 10;
    }
    
}