/* 施工例・設計図：見本左側のSlickスライダー表示（キャッシュ更新版） */
html,
body {
    background: #7a7a7a !important;
}

.slider {
    margin: 35px auto 0;
    width: 100%;
}

.slider img {
    height: auto;
    width: 90%;
}

.slick-prev:before,
.slick-next:before {
    color: #deb887;
    font-size: 28px;
    opacity: 1;
}

.slick-prev {
    left: 10px;
    z-index: 1001;
}

.slick-next {
    right: 10px;
    z-index: 1001;
}

.slick-dots li button:before {
    color: #deb887;
    opacity: .5;
}

.slick-dots li.slick-active button:before {
    color: #deb887;
    opacity: 1;
}

/* ドットを現在表示中の写真のすぐ下、左右中央に揃える */
#thumbs.slider .slick-dots {
    right: auto !important;
    bottom: -22px !important;
    left: 50% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90% !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
}

#thumbs.slider .slick-dots li {
    position: relative !important;
    float: none !important;
    flex: 0 0 14px !important;
    display: block !important;
    width: 14px !important;
    height: 20px !important;
    margin: 0 2px !important;
    padding: 0 !important;
}

#thumbs.slider .slick-dots li button,
#thumbs.slider .slick-dots li button:before {
    width: 14px !important;
}

/* 既存ギャラリーの画像一覧をSlickのスライドとして使用 */
#main_image {
    display: none !important;
}

#main_image_wrap {
    height: auto !important;
}

#thumbs.slider {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box;
}

#thumbs.slider .slick-slide {
    float: left !important;
    width: var(--gallery-slide-width) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: 0 !important;
}

#thumbs.slider .thumb-btn {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    cursor: default;
    pointer-events: none;
    text-align: center;
}

#thumbs.slider .thumb-btn img,
#thumbs.slider li.active .thumb-btn img {
    display: block !important;
    width: 90% !important;
    height: auto !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
    object-fit: contain !important;
}

#thumbs.slider li.active .thumb-btn {
    outline: 0 !important;
}

#thumbs.slider .slick-prev,
#thumbs.slider .slick-next {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#dot_nav {
    display: none !important;
}

/* 画像ごとの説明を基準ページと同じタイミングで切り替える */
.work-caption {
    display: inline-block;
    min-height: 1.8em;
    transition: opacity .35s ease, transform .35s ease, letter-spacing .35s ease;
}

.work-caption.is-changing {
    opacity: 0;
    transform: translateY(8px);
    letter-spacing: .28em;
}

@media screen and (max-width: 767px) {
    #thumbs.slider {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 35px auto 0 !important;
        padding: 0 !important;
    }

    #thumbs.slider .slick-dots {
        flex-wrap: nowrap !important;
    }
}