@charset 'UTF-8';

.slick-prev,
.slick-next{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 34px;
    height: 34px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    position: relative!important;
    background: transparent;
}
.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    line-height: 1;
    opacity: .75;
}
.slick-prev{
    position: absolute!important;
    right:calc(510 *(100vw/1900));
    bottom: calc(170 *(100vw/1980));
    z-index: 20;
}
.slick-prev:before{
    content:url(../img/s-after.png);
}
.slick-next{
    bottom: calc(170 *(100vw/1980));
    left: calc(510 *(100vw/1900));
}
.slick-next:before{
    content:url(../img/s-before.png);
}
.slick-dots{
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    padding: 0;
    bottom: -40px;
    list-style: none;
    text-align: center;
}
.slick-dots li{
    position: relative;
    left: 10px;
    display: inline-block;
    width: 30px;
    height: 20px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 50px;
    height: 50px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{outline: none;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{opacity: 1;
}.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 60px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before{
opacity: .75;
color: #006cb8;
}

@media screen and (max-width: 980px) {

.slick-next{
    bottom: calc(380*(100vw / 750));
    left: calc(0 *(100vw/1980));
}
.slick-prev {
    position: absolute !important;
    left: 72%;
    bottom: calc(350*(100vw / 750));
    z-index: 20;
}

.slick-prev:before{
    position: absolute;
    left: calc(150 *(100vw/750));
    top: calc(20 *(100vw/750));;
    content: '';/*何も入れない*/
    display: inline-block;
     width: calc(80 *(100vw/750));
    height: calc(80 *(100vw/750));
    background-image: url(../img/s-after.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}
.slick-next:before{
    position: absolute;
    left: calc(20 *(100vw/750));
    top: calc(40 *(100vw/750));;
    content: '';/*何も入れない*/
    display: inline-block;
     width: calc(80 *(100vw/750));
    height: calc(80 *(100vw/750));
    background-image: url(../img/s-before.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}
    .slick-dots{
        position: absolute;
        bottom: calc(-60*(100vw / 750));
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
        }
        .slick-dots li{
        position: relative;
        left: 10px;
        display: inline-block;
        width: calc(37*(100vw / 750));
        height: calc(20*(100vw / 750));
        padding: 0;
        cursor: pointer;
        }
        .slick-dots li button{
        font-size: 0;
        line-height: 0;
        display: block;
        width: calc(20*(100vw / 750));
        height: calc(80*(100vw / 750));
        padding:calc(5*(100vw / 750));
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus
        {outline: none;}
        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before
        {opacity: 1;
        }.slick-dots li button:before
        {
        font-family: 'slick';
        font-size: calc(60*(100vw / 750));
        line-height:calc(40*(100vw / 750));
        position: absolute;
        top: 0;
        left: 0;
        width: calc(20*(100vw / 750));
        height: calc(20*(100vw / 750));
        content: '•';
        text-align: center;
        opacity: .25;
        color: #ccc;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }

}