/*----- 内観 -----*/
#condominium-contents .interiorphoto {
        width: 100%;
        background-image: linear-gradient(90deg, #1c223c, #003366 50%, #0f2a50 80%, #1c223c);
        padding: 4rem 0 7rem;
}

#condominium-contents .interiorphoto .condominium-title {
        width: 100%;
        margin: 0 auto;
        padding: 0;
}

#condominium-contents .interiorphoto-container {
        width: 94%;
        max-width: 1632px;
        margin: 3rem auto 0;
        padding: 4rem 0 3.5rem;
        background: var(--white-color);
}

#condominium-contents .interiorphoto-box {
        display: flex;
        justify-content: space-between;
        width: 90%;
        max-width: 1240px;
        margin: 0 auto;
}

#condominium-contents .interiorphoto-box li {
        list-style: none;
}

/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
        border: 2px solid #b49147;
}

/* レイアウトのためのスタイル */
.main-img {
        width: 60%;
        max-width: 750px;
}

.main-img img {
        height: auto;
        width: 100%;
}

.sub-img-box {
        display: block;
        width: 40%;
        max-width: 450px;
}

.sub-img {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-left: 2rem;
        height: auto;
}

.sub-img li {
        width: calc(100%/1 - 2%);
}

.sub-img li:nth-child(3n) {
        margin-right: 0;
}

.sub-img li img {
        border: 2px solid transparent;
}

.sub-img img {
        cursor: pointer;
        width: 100%;
}

@media screen and (max-width:768px) {
#condominium-contents .interiorphoto-box {
        display: block;
}
.main-img {
        width: 100%;
        padding-bottom: 2rem;
}
.sub-img {
        margin-left: 0;
        width: 100%;
        max-width: 750px;
}
.sub-img-box {
        width: 100%;
        max-width: 1632px;
}
}