/* ベースのリセット */ 
body { 
    font-family: sans-serif; 
    margin: auto; 
    padding: 0; 
    /* display: block; はbodyには通常不要です */
} 

/* スライドショーコンテナ */ 
.slideshow-container { 
    position: relative; /* 子要素のposition:absolute基準点にする場合は必要 */
    margin: 0 auto; 
    border: 1px solid #ddd; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
    background-color: white; 
    /* heightはJSで制御するため、ここでのtransitionは不要か、幅のみに限定 */
    /* transition: width 0.5s ease-in-out, height 0.5s ease-in-out; */ 

    max-width: 100%; /* ビューポートを超えないように */ 
    width: auto; 
    /* 初期高さを設定するか、JavaScriptで確実に設定 */
    overflow: hidden; /* スライド切り替え時のちらつき防止 */
} 

/* スライド（初期は非表示） */ 
.mySlides { 
     /* position: absolute; は削除したままでOK */
    display: block; /* 全ての要素をブロック要素として配置 */
    opacity: 0; /* 初期は完全に透明 */
    visibility: hidden; /* 初期は完全に非表示（スペースも確保しない） */
    transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out; /* visibilityもトランジション対象にする */
    line-height: 0; 
    font-size: 0; 
    position: absolute; /* スライドを重ねるためにposition:absoluteを復活 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

/* 表示中のスライド */ 
.mySlides.active { 
    opacity: 1; 
    visibility: visible; /* アクティブなスライドは表示 */
} 

/* スライド内の画像 */ 
.mySlides img { 
    width: 100%; 
    height: auto; /* 高さを自動調整 */
    display: block; /* これが重要！ */ 
    object-fit: contain; /* 画像がコンテナ内に収まるように */
    object-position: center; 
    max-width: 100%; 
    vertical-align: bottom; /* 保険として残す */ 
} 

/* ドットナビゲーション */ 
.dot { 
    cursor: pointer; 
    height: 15px; 
    width: 15px; 
    margin: 0 2px; 
    background-color: #bbb; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
} 

.dot.active, .dot:hover { /* .active クラスをドットにも適用するように変更 */
    background-color: #717171; 
} 

/* スマホ対応 */ 
@media screen and (max-width: 768px) { 
    .slideshow-container { 
        width: 100% !important; 
        height: auto !important; /* height: auto; を維持 */
    } 

    .mySlides img { 
        width: 100%; 
        height: auto; 
    } 
}


/* ホバー */

 /* ホバー効果を適用するためのCSS */
    .image-container {
        flex: 0 0 calc(25% - 15px); /* 横4列のレイアウトを維持 */
        max-width: 250px; /* 最大幅を設定 */
        width: 100%; /* 親要素の幅に合わせる */
        position: relative; /* z-indexのために必要 */
        overflow: hidden; /* 拡大した画像がはみ出さないように */
        transition: transform 0.3s ease, z-index 0.3s ease; /* スムーズなアニメーション */
    }

    .image-container img {
        width: 100%; /* 画像の幅を親要素に合わせる */
        height: auto; /* 高さを自動調整 */
        display: block; /* 画像下の余白をなくす */
        transition: transform 0.3s ease; /* スムーズなアニメーション */
    }

    .image-container:hover {
        transform: scale(1.05); /* ホバー時に1.05倍に拡大 */
        z-index: 10; /* ホバー時に前面に表示 */
        /* 隣接する画像と重なるように少しずらす場合は、translateXなども追加できますが、
           今回は拡大効果を優先しています。
           例: transform: scale(1.05) translateX(5px);
        */
    }