/* ------------------------------------------- */
/* === 3枚スライダー用 CSS定義 (slider-3-item-*) === */
/* ------------------------------------------- */
/* 1. スライダー全体のラッパー (表示領域を決定) */
.slider-3-item-wrapper {
    position: relative;
    width: 630px; /* バナーの表示幅 */
    max-width: 630px;
    height: 200px; /* スライドの高さ */
    overflow: hidden; /* スライドのはみ出た部分を非表示 */
    background: transparent;
    margin-bottom: 20px;
	padding-bottom:30px;
    /* ユーザーの背景設定を再現 */
    background: url(../images/bg_bxslider.jpg) no-repeat left bottom -5px; 
}
/* 2. スライドのトラック (アニメーション対象) */
.slides-3-item-track {
    display: flex;
    /* 5枚の要素 (クローン2枚 + 本物3枚) = 500% */
    width: 500%; 
    font-size: 0; 
    height: 100%;
    
    /* 初期位置を最初の本物のスライド1に設定 (クローン3を避けて移動) */
    transform: translateX(-20%);
    
    /* CSSアニメーションの設定: 24秒のサイクルで無限にループ */
    animation: infinite-slide-3 24s infinite;
}
/* 3. 各スライドアイテム */
.slide-item-3 {
    /* 5枚構成なので、親要素 (500%) に対して 1/5 の幅 (20%) を取る */
    flex-basis: 20%; 
    flex-shrink: 0;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    font-size: 16px; 
}

/* 4. アニメーションの定義 (3枚スライダー用) */
@keyframes infinite-slide-3 {
    /* 0%〜20%: スライド1表示 (初期位置) */
    0%   { transform: translateX(-20%); } /* 本物1の位置 */
    20%  { transform: translateX(-20%); } 
    
    /* 25%: スライド2へ移動 (滑らか) */
    25%  { transform: translateX(-40%); } /* 本物2の位置 */
    45%  { transform: translateX(-40%); } 
    
    /* 50%: スライド3へ移動 (滑らか) */
    50%  { transform: translateX(-60%); } /* 本物3の位置 */
    70%  { transform: translateX(-60%); } 
    
    /* 75%: クローン1へ移動 (滑らか) */
    75%  { transform: translateX(-80%); } /* クローン1の位置 */
    
    /* 75.01%〜100%: 最後のクローンから最初の本物へ瞬間ジャンプ */
    75.01% { 
        transform: translateX(-20%);
        animation-timing-function: ease-in-out; 
    } 
    100% { transform: translateX(-20%); } /* 本物1の位置で終了し、ループ */
}

/* ------------------------------------------- */
/* === 2枚スライダー用 CSS定義 (slider-2-item-*) === */
/* ------------------------------------------- */
/* 1. スライダー全体のラッパー (表示領域を決定) */
.slider-2-item-wrapper {
    position: relative;
    width: 630px; /* バナーの表示幅 */
    max-width: 630px;
    height: 200px; /* スライドの高さ */
    overflow: hidden; 
    background: transparent;
	margin-bottom: 20px;
	padding-bottom:30px;
    /* ユーザーの背景設定を再現 */
    background: url(../images/bg_bxslider.jpg) no-repeat left bottom -5px;
}
/* 2. スライドのトラック (アニメーション対象) */
.slides-2-item-track {
    display: flex;
    /* 4枚の要素 (クローン2枚 + 本物2枚) = 400% */
    width: 400%; 
    font-size: 0; 
    height: 100%;
    
    /* 初期位置を最初の本物のスライド1に設定 (クローン2を避けて移動) */
    /* 1/4 = 25% 移動 */
    transform: translateX(-25%);
    
    /* CSSアニメーションの設定: 16秒のサイクルで無限にループ (1枚あたり8秒) */
    animation: infinite-slide-2 16s infinite;
}
/* 3. 各スライドアイテム */
.slide-item-2 {
    /* 4枚構成なので、親要素 (400%) に対して 1/4 の幅 (25%) を取る */
    flex-basis: 25%; 
    flex-shrink: 0;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    font-size: 16px; 
}
/* 4. アニメーションの定義 (2枚スライダー用) */
@keyframes infinite-slide-2 {
    /* 0%〜40%: スライド1表示 (初期位置 -25%) */
    0%   { transform: translateX(-25%); } 
    40%  { transform: translateX(-25%); } 
    
    /* 45%: スライド2へ移動 (滑らか: -50%) */
    45%  { transform: translateX(-50%); } 
    
    /* 85%: スライド2表示 (-50%) */
    85%  { transform: translateX(-50%); } 
    
    /* 90%: クローン1へ移動 (滑らか: -75%) */
    90%  { transform: translateX(-75%); } /* クローン1の位置 */
    
    /* 90.01%〜100%: 最後のクローンから最初の本物へ瞬間ジャンプ */
    90.01% { 
        /* 瞬間的に本物1の位置へジャンプ。アニメーションには見えない。 */
        transform: translateX(-25%);
        animation-timing-function: ease-in-out; 
    } 
    100% { transform: translateX(-25%); } /* 本物1の位置で終了し、ループ */
}
/* 画像の設定 (共通) */
.slide-item-3 img, .slide-item-2 img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/*-- バナーが1枚の時 --*/
.slide-item-1{
	background: url(../images/bg_bxslider.jpg) no-repeat left bottom;
	padding-bottom: 30px;
    margin-bottom: 20px;
}