﻿/* インスタスライド */
.insta_area {
    width: 100%;
    margin: 20px auto 0px;
    padding: 70px 0px;
}

.dspInsta {
    box-sizing: border-box;
    margin: 40px auto;
}

    .dspInsta li img {
        margin: 0px 15px;
        width: 230px;
        height: 230px;
        object-fit: cover;
        border-radius: 0px 0px 0 0 !important;
    }

    .dspInsta .slick-prev {
        width: 50px;
        height: 50px;
        left: 92px;
        position: absolute;
        z-index: 9;
        box-sizing: border-box;
    }

        .dspInsta .slick-prev:before {
            color: #000;
            content: '';
            width: 30px;
            height: 30px;
            background: #495057;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -15px;
            opacity: 0.4;
        }

        .dspInsta .slick-prev:after {
            content: '';
            width: 0;
            height: 0;
            border: solid 5px transparent;
            border-right: solid 8px #ffffff;
            position: absolute;
            top: 50%;
            left: 5px;
            margin-top: -6px;
        }

    .dspInsta .slick-next {
        width: 50px;
        height: 50px;
        right: 92px;
        position: absolute;
        z-index: 9;
    }

        .dspInsta .slick-next:before {
            color: #000;
            content: '';
            width: 30px;
            height: 30px;
            background: #495057;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -15px;
            opacity: 0.4;
        }

        .dspInsta .slick-next:after {
            content: '';
            width: 0;
            height: 0;
            border: solid 5px transparent;
            border-left: solid 8px #ffffff;
            position: absolute;
            top: 50%;
            right: 5px;
            margin-top: -6px;
        }

    .dspInsta .slick-slide {
        margin-right: 4px;
    }

    .dspInsta .slick-dots {
        display: none !important;
    }

    .dspInsta .slick-dotted.slick-slider {
        margin-bottom: 2px !important;
    }

@media screen and (max-width:767px) {
    .dspInsta {
        overflow-x: hidden !important; /* スマホサイズ横スクロールバー防止 */
    }
    .dspInsta .slick-prev {
        left: 4px !important;
    }

    .dspInsta .slick-next {
        right: 4px !important;
    }
}


/* 再生停止ボタン */
.dspInsta .slick_toggle_wrap {
    width: 100%;
    margin: 0px auto;
    padding: 0px;
    position: relative;
    height: 20px
}

    .dspInsta .slick_toggle_wrap span {
        position: absolute;
        right: 15px;
        bottom: 45px;
        border: solid 1px;
        border-radius: 2px;
        padding: 0px 1px 1px 1px;
        width: 20px;
        height: 20px
    }

.dspInsta .slick_toggle {
    width: 20px;
    font-size: 12px;
    padding: 1px;
    border: none;
    text-align: center;
    vertical-align: middle;
    display: inline;
    cursor: pointer;
    cursor: hand;
}

.dspInsta .slick_toggl .stop {
    display: block;
    width: 20px;
    z-index: 10;
}

.dspInsta .slick_toggle .play {
    display: none;
    width: 0px;
    z-index: 0;
}

.dspInsta .slick_toggle.paused .stop {
    display: none !important;
    width: 0px !important;
    z-index: 0 !important;
}

.dspInsta .slick_toggle.paused .play {
    display: block !important;
    width: 20px !important;
    z-index: 10 !important;
}
