/* サムネイルギャラリー部分の CSS を以下のように変更 */
.product-gallery-thumbs {
    width: 100%;
    position: relative;
    margin-top: 15px;
}

.thumbs-slider {
    display: flex;
    flex-wrap: wrap; /* nowrap から wrap に変更して折り返しを有効に */
    gap: 10px;
}

.gallery-thumb {
    flex: 0 0 calc(20% - 8px); /* 5列表示（20%）に変更 */
    cursor: pointer;
    position: relative;
    margin-bottom: 10px; /* 行間のマージンを追加 */
}

.gallery-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.gallery-thumb.active img {
    border-color: #4CAF50;
}

/* PC表示（768px以上）でも同じく5列表示にする */
@media screen and (min-width: 768px) {
    .gallery-thumb {
        flex: 0 0 calc(20% - 8px); /* PC表示でも5列表示に統一 */
    }
}