/* 全体コンテナ */
.works-container {
    width: 100%;
    padding: 0 5%;
    margin-top: 30px;
}

.works-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3em; /* グリッド間の間隔 */
}

/* 個別アイテム */
.work-item {
    position: relative;
    overflow: hidden;
    opacity: 0; /* 初期状態は非表示 */
    transform: translateY(20px); /* 初期位置を下にずらす */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.work-item.visible {
    opacity: 1; /* 表示 */
    transform: translateY(0); /* 元の位置に戻る */
}

.work-item img {
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    transition: transform 0.3s ease-in-out; /* ホバー時のアニメーション */
}

/* タイトルオーバーレイ */
.work-item .title-overlay {
    position: absolute;
    bottom: 0; /* 下部に固定 */
    left: 0;
    width: 100%;
    background: rgba(87, 87, 87, 0.6); /* 半透明の黒背景 */
    color: white;
    text-align: center;
    padding: 0.5em;
    font-size: 0.7em;
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 0.3s ease-in-out; /* ホバー時のフェードイン */
}

/* ホバー時のスタイリング */
.work-item:hover img {
    transform: scale(1.05); /* 少しズーム */
}

.work-item:hover .title-overlay {
    opacity: 1; /* タイトルを表示 */
}

@media (max-width: 1200px) {
    .works-grid {
        grid-template-columns: 1fr 1fr 1fr; /* 3列 */
    }
}

@media (max-width: 768px) {
    .works-container {
        margin-top: 20px;
    }

    .works-grid {
        grid-template-columns: 1fr 1fr; /* 2列 */
    }

    .work-item .title-overlay {
        opacity: 1;
        font-size: 0.6rem;
    }
}

@media (max-width: 576px) {
    .works-container {
        margin-top: 10px;
    }

    .works-grid {
        gap: 15px; /* グリッド間の間隔 */
    }

    .work-item .title-overlay {
        opacity: 1;
        font-size: 0.4rem;
    }
}