/* 外枠の余白設定 */
.free_space {
    font-size: 12px;
    padding: 10px 0; /* 左右の余白を0にして中央に寄せやすくします */
}

/* 画像リスト本体 */
.free_space-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;   /* 【重要】これがないと左側に40pxほどの隙間ができて右にずれます */
    margin: 0 auto;    /* 外側の余白をリセット */
    list-style: none; /* リストの「・」を消す */
}

/* リスト内の各要素（画像とテキスト） */
.free_space-banner li {
    width: 100%;       /* 1枚ずつ縦に並べる設定 */
    text-align: center;/* 中の画像とテキストを中央寄せ */
    padding: 10px 0;   /* 上下に余白、左右は0 */
    box-sizing: border-box;
}

/* 画像自体の設定 */
.free_space-banner img {
    max-width: 100%;   /* 親要素からはみ出さないように */
    height: auto;
    display: inline-block; /* text-align: centerを効かせるため */
  
  
 * --- スライドショーを1500px幅で中央に配置 --- */

  
/* 1. スライドの外枠を1500pxに固定して中央へ */
#slider, .bx-wrapper, .bx-viewport {
width: 1500px !important;
max-width: 1500px !important;
margin-left: calc(-750px + 50%) !important; /* 1500の半分(750)を使って中央寄せ */
margin-right: calc(-750px + 50%) !important;
left: 0 !important;
border: none !important;
background: transparent !important;
}

/* 2. 中の画像も1500px幅にフィットさせる */
.bx-wrapper img {
width: 1500px !important;
height: auto !important;
max-width: none !important;
}

/* 3. 画面が1500pxより小さい時（スマホなど）の対策 */
@media screen and (max-width: 1500px) {
#slider, .bx-wrapper, .bx-viewport {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}
.bx-wrapper img {
width: 100vw !important;
}
}