/* CSS部分 */
.custom-container {
    width: 100%;
    padding: 0 5%;
}

/* Masonry グリッド */
.masonry-grid {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.masonry-item {
    width: calc(25% - 40px); /* 幅を調整 */
    box-sizing: border-box;
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}


/* 画像アスペクト比 */
.aspect-8-5 img {
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

.aspect-2-3 img {
    width: 100%;
    object-fit: cover;
}

/* 共通スタイル */
.masonry-img {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}

/* スピナースタイル */
.spinner {
    display: none;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #7b8a94;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1200px) {
    .masonry-item {
        width: calc(33.333% - 30px);
    }
}

@media (max-width: 768px) {
    .masonry-item {
        width: calc(50% - 2.5%);
    }
}