/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
    border: 1px solid white;
    outline: 1px solid black;
    transition: .5s;
}

.sub-img_sp li.current img {
    border: 1px solid white;
    outline: 1px solid black;
    transition: .5s;

}

.container {
    /* margin: 50px auto 0; */
    /* max-width: 500px; */
    
}

.main-img {
    width: calc(7000vw / 192);
    height: calc(7000vw / 192);
    margin-left: 5px;
}
.main-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.sub-img {
}
.sub-img li {
    margin-right: 2%;
    margin-bottom: 10px;
    height: 90px;
    width: 90px;
}
.sub-img li:nth-child(3n) {
    margin-right: 0;
}
.sub-img li img {
    border: 2px solid transparent;
    transition: border .5s;
}
.sub-img img {
    cursor: pointer;
    height: 100%;
    width: 100%;

  object-fit: cover;
}


@media screen and (max-width: 1000px) {
    .sub-img li {
        height: 6vw;
        width: 6vw;
    }
}
@media screen and (max-width: 768px) {
    .detail-inner{
        position: relative;
    }
        .detail-left_sp {
            position: relative;
            height: 100%;
            width: 100%;
            max-height: 360px;
            max-width: 360px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0;
        }
        .detail-left_sp::before{
            content: "";
            display: block;
            padding-top: 100%;
        }
            .main-img_sp img{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                object-fit: cover;
                object-position: 0 50;
            }

    .sub-img_sp{
        display: block;
        position: absolute;
        margin-top: -40px;
    }

    .sub-img_sp ul{
        display: flex;
    }

    .sub-img_sp li {
        width: 60px;
        height: 60px;
        margin-right: 5px;
    }
}