/*
 * swiper common style
 * @ user/top
 * @ user/search_detail
 * @ user/maintenance       ! only phone
 */

/* only for search_detail */
.swiper-pagination{
    bottom: -30px !important;
}

.swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
    background-color: #1CB539 !important;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 15px !important;
    background-color: gray;
}

/* common */
.swiper-button-prev {
    /* left -> 各ページにて設定 */
    width: 30px;
    height: 30px;
    top: 50%;
    &::before {
        content: "";
        width: 30px;
        height: 30px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #eef;
        display: block;
        position: absolute;
        left: 25%;
        top: 0;
        opacity: 0.8;
    }
    &::after {
        content: "";
        width: 10px;
        height: 10px;
        border-bottom: 2px solid #1CB539;
        border-left: 2px solid #1CB539;
        -webkit-transform: rotate(45deg);
        transform-origin: center center;
        transform: rotate(45deg) translateY(-50%);
        display: block;
        position: absolute;
        left: 50%;
        top: 45%;
        z-index: 1;
    }
}

.swiper-button-next {
    /* right -> 各ページにて設定 */
    width: 30px;
    height: 30px;
    top: 50%;
    &::before {
        content: "";
        width: 30px;
        height: 30px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #eef;
        display: block;
        position: absolute;
        right: 25%;
        top: 0;
        opacity: 0.8;
    }
    &::after {
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #1CB539;
        border-right: 2px solid #1CB539;
        -webkit-transform: rotate(45deg);
        transform-origin: center center;
        transform: rotate(45deg) translateY(-50%);
        display: block;
        position: absolute;
        right: 75%;
        top: 45%;
        z-index: 1;
    }
}

@media screen and (min-width:768px) {
    .swiper-button-prev {
        width: 35px;
        height: 35px;
        left: 23%;
        &::before {
            width: 35px;
            height: 35px;
        }
        &::after {
            width: 12px;
            height: 12px;
            border-bottom: 3px solid #1CB539;
            border-left: 3px solid #1CB539;
        }
    }

    .swiper-button-next {
        width: 35px;
        height: 35px;
        right: 23%;
        &::before {
            width: 35px;
            height: 35px;
        }
        &::after {
            width: 12px;
            height: 12px;
            border-top: 3px solid #1CB539;
            border-right: 3px solid #1CB539;
        }
    }
}