.lsg-gallery {
    --lsg-gap: 12px;
    --lsg-thumb: 82px;
    --lsg-rail-padding: 4px;
    --lsg-rail: 98px;
    max-width: 100%;
    min-width: 0;
    position: relative;
}

.lsg-layout {
    display: flex;
    gap: var(--lsg-gap);
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.lsg-main {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

.lsg-main-button {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    line-height: 0;
    box-sizing: border-box;
}

.lsg-main-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    transition: opacity .18s ease;
}

.lsg-main-image.is-changing { opacity: .25; }

.lsg-thumbnails {
    display: flex;
    gap: 8px;
    box-sizing: border-box;
}

.lsg-thumbnail {
    flex: 0 0 var(--lsg-thumb);
    width: var(--lsg-thumb);
    min-width: var(--lsg-thumb);
    max-width: var(--lsg-thumb);
    height: var(--lsg-thumb);
    padding: 3px;
    border: 2px solid transparent;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
}

.lsg-thumbnail:hover { border-color: #999; }
.lsg-thumbnail.is-selected { border-color: #222; }

.lsg-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

/* 下配置 */
.lsg-gallery--bottom .lsg-layout {
    flex-direction: column;
}

.lsg-gallery--bottom .lsg-thumbnails {
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
}

/* 左右配置：サムネイル列を絶対に縮ませない */
.lsg-gallery--left .lsg-layout,
.lsg-gallery--right .lsg-layout {
    flex-direction: row;
}

.lsg-gallery--left .lsg-thumbnails,
.lsg-gallery--right .lsg-thumbnails {
    flex: 0 0 var(--lsg-rail);
    width: var(--lsg-rail);
    min-width: var(--lsg-rail);
    max-width: var(--lsg-rail);
    flex-direction: column;
    max-height: min(76vh, 760px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: var(--lsg-rail-padding);
    padding-right: var(--lsg-rail-padding);
    scrollbar-width: thin;
}

.lsg-gallery--left .lsg-thumbnails::-webkit-scrollbar,
.lsg-gallery--right .lsg-thumbnails::-webkit-scrollbar {
    width: 6px;
}

.lsg-gallery--left .lsg-thumbnails { order: -1; }
.lsg-gallery--right .lsg-thumbnails { order: 2; }

.lsg-gallery--left .lsg-main,
.lsg-gallery--right .lsg-main {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(100% - var(--lsg-rail) - var(--lsg-gap));
}

.lsg-gallery--left .lsg-main-button,
.lsg-gallery--right .lsg-main-button {
    width: 100%;
}

.lsg-gallery--left .lsg-main-image,
.lsg-gallery--right .lsg-main-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    margin: 0;
}

.lsg-data{display:none}.lsg-lightbox[hidden]{display:none!important}.lsg-lightbox{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center}.lsg-lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88)}.lsg-lightbox-stage{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:calc(100vw - 140px);height:calc(100vh - 80px)}.lsg-lightbox-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.lsg-lightbox-close,.lsg-lightbox-nav{position:absolute;z-index:3;border:0;background:rgba(0,0,0,.35);color:#fff;cursor:pointer}.lsg-lightbox-close{top:15px;right:18px;width:46px;height:46px;border-radius:50%;font-size:34px;line-height:40px}.lsg-lightbox-nav{top:50%;transform:translateY(-50%);width:56px;height:76px;font-size:52px;line-height:65px;border-radius:5px}.lsg-lightbox-prev{left:18px}.lsg-lightbox-next{right:18px}.lsg-lightbox-counter{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);padding:6px 12px;border-radius:20px;background:rgba(0,0,0,.45);color:#fff;font-size:14px}.lsg-lightbox-open{overflow:hidden!important}.lsg-notice{padding:10px 12px;border-left:4px solid #d63638;background:#fff}
@media (max-width: 782px) {
    .lsg-gallery { --lsg-thumb: 70px; }

    .lsg-gallery--left .lsg-layout,
    .lsg-gallery--right .lsg-layout,
    .lsg-gallery--bottom .lsg-layout {
        flex-direction: column;
    }

    .lsg-gallery--left .lsg-main,
    .lsg-gallery--right .lsg-main,
    .lsg-gallery--bottom .lsg-main {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    .lsg-gallery--left .lsg-thumbnails,
    .lsg-gallery--right .lsg-thumbnails,
    .lsg-gallery--bottom .lsg-thumbnails {
        order: 2;
        flex: 0 0 auto;
        flex-direction: row;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 4px;
    }

    .lsg-gallery--left .lsg-main-image,
    .lsg-gallery--right .lsg-main-image {
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }

    .lsg-lightbox-stage {
        width: calc(100vw - 24px);
        height: calc(100vh - 110px);
    }

    .lsg-lightbox-nav {
        width: 44px;
        height: 64px;
        font-size: 42px;
        background: rgba(0,0,0,.48);
    }

    .lsg-lightbox-prev { left: 6px; }
    .lsg-lightbox-next { right: 6px; }
    .lsg-lightbox-close { right: 8px; top: 8px; }
}