@charset "UTF-8";
.swiper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.swiper-container {
    max-width: 820px;
    margin: 0 30px;
}

.swiper-slide_item {
    padding: 0 4px;
}
.swiper-slide_item-inner {
    position: relative;
    overflow: hidden;
}
.swiper-slide_item div.title-work {
    position: absolute;
    top: 124px;
    right: -10px;
    width: 220px;
    text-align: right;
    font-size: 16px;
    color: #FFFFFF;
    background: #333333;
    border-radius: 5px;
    transform: skewX(-15deg);
}
.swiper-slide_item div.title-work span {
    display: block;
    padding: 5px 20px;
    transform: skewX(15deg);
}
.swiper-slide_item img {
    width: 100%;
    height: 162px;
    object-fit: cover;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-style: normal;
}
.work-detail-tmb-list .swiper-button-next:after,
.work-detail-tmb-list .swiper-button-prev:after {
    color: #333333;
}
.swiper-button-next {
    right: 10px !important;
}
.swiper-button-prev {
    left: 10px !important;
}
:root {
    --swiper-navigation-size: 22px !important;
    --swiper-theme-color: #fff !important;
}

@media screen and (max-width: 909px) {
    .swiper {
        width: calc(100% - 60px);
    }
    .work-detail-tmb-list .swiper-container {
        margin: 0;
    }
    .swiper-slide_item div.title-work {
        width: 100%;
        font-size: 2vw;
    }
    .swiper-slide_item div.title-work span {
        display: block;
        padding: 1% 12% 1% 3%;
        transform: skewX(15deg);
    }
    .swiper-slide_item img {
        height: 24vw;
    }
    .swiper-button-next {
        right: -20px !important;
    }
    .swiper-button-prev {
        left: -20px !important;
    }
}