/* ======== ヘッダーのスライドショー ======== */
/* 左右スライドショー全体のスタイル */
#header-slideshow {
    display: flex; /* 横並び配置 */
    width: 100%; /* 横幅全体を使用 */
    height: 300px; /* 高さはそのまま */
    margin-top: 40px; /* ナビゲーションバーの高さ分を確保 */
    overflow: hidden; /* オーバーフローを非表示 */
    gap: 0.5%; /* 左右の間に適度なスペース */
}

/* 左側スライドショー */
#header-slideshow-left {
    flex: 6.5; /* 左側を全体の70%に設定 */
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 右側スライドショー */
#header-slideshow-right {
    flex: 3.5; /* 右側を全体の30%に設定 */
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* スライドショー画像の共通スタイル */
#header-slideshow-left img,
#header-slideshow-right img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1; /* すべての画像を表示状態にする */
    animation: none; /* アニメーションを無効化 */
}

/* アニメーションのタイミング (左側) */
#header-slideshow-left img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fadeInOut 19s infinite; /* フェードイン・アウトアニメーション */
}

#header-slideshow-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 左側画像のアニメーションタイミング */
#header-slideshow-left img:nth-child(1) {
    animation-delay: 0s;
}
#header-slideshow-left img:nth-child(2) {
    animation-delay: 4s;
}
#header-slideshow-left img:nth-child(3) {
    animation-delay: 8s;
}
#header-slideshow-left img:nth-child(4) {
    animation-delay: 12s;
}

/* フェードイン・アウトアニメーション */
@keyframes fadeInOut {
    0%, 25% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 右側のスライドショー調整 */
#header-slideshow-right img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* 初期は透明 */
    animation: fadeLoop 16s infinite; /* 新しいアニメーション */
}

/* 初期状態で1枚目を表示 */
#header-slideshow-right img:nth-child(1) {
    opacity: 1; /* 初期表示で透明度を1に設定 */
    animation-delay: 0s;
}
#header-slideshow-right img:nth-child(2) {
    animation-delay: 4s;
}
#header-slideshow-right img:nth-child(3) {
    animation-delay: 8s;
}
#header-slideshow-right img:nth-child(4) {
    animation-delay: 12s;
}

/* フェードインとフェードアウトのループアニメーション */
@keyframes fadeLoop {
    0% { opacity: 0; }
    10% { opacity: 1; } /* フェードイン */
    40% { opacity: 1; } /* 表示継続 */
    50% { opacity: 0; } /* フェードアウト */
    100% { opacity: 0; } /* 待機 */
}

/* ======== レスポンシブ対応 ======== */
@media (max-width: 768px) {
    #header-slideshow {
        /*flex-direction: column; /* 左右分割を縦並びに変更 */
        height: auto;
    }

    #header-slideshow-left,
    #header-slideshow-right {
        height: 150px; /* 高さを縮小 */
    }
}

@media (max-width: 430px) {
    #header-slideshow-left,
    #header-slideshow-right {
        height: 120px; /* 高さをさらに縮小 */
    }
}