/* 全体のリセット */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ボディとHTML全体の余白とパディングをリセット */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* スライダー全体を中央に配置 */
.bx-wrapper {
  max-width: 80%;
  margin: 0 auto;
}

/* スライダーの高さを画像の高さに合わせる */
.bx-viewport {
  width: 100%;
  overflow: hidden; /* 余計なスクロールを防ぐ */
  text-align: center;
}

/* 画像のサイズを調整して枠内に収める */
.bxslider img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: calc(100vh - 50px); /* 上下のナビゲーションとページネーションを考慮 */
  width: auto;
  height: auto;
  object-fit: contain; /* 画像の縦横比を維持 */
}

/* ページネーションの位置を調整 */
.bx-wrapper .bx-pager {
  position: absolute;
  bottom: -20px; /* ページネーションを画像の下に配置 */
  width: 100%;
  text-align: center;
}

/* 前後のナビゲーションボタンを左右に配置 */
.bx-wrapper .bx-prev {
  left: 0;
  background: url('https://00.248ra.com/mycss/controls.png') no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
  right: 0;
  background: url('https://00.248ra.com/mycss/controls.png') no-repeat -43px -32px;
}

/* メディアクエリでモバイル向けスタイルを調整 */
@media only screen and (max-width: 600px) {
  .bx-wrapper {
    max-width: 100%;
    padding-bottom: 20px; /* ページネーションの領域を確保 */
  }
  .bxslider img {
    width: 100%;
    height: auto;
  }
}

/* キャプションのスタイルを調整 */
.bx-wrapper .bx-caption {
  text-align: right;             /* テキストを右揃え */
  color: orange;                  /* 文字色を黒に設定 */
  padding: 5px 10px;             /* 上下と左右に余白を追加 */
  position: absolute;            /* 絶対配置 */
  top: 0;                        /* 上部に配置 */
  right: 0;                      /* 右端に配置 */
  background: none;              /* 背景色をなくす */
  width: auto;                   /* 幅を自動に設定 */
  transform: none;               /* 中央揃えの変換を削除 */
  max-width: 100%;               /* 最大幅を100%に設定して横幅が溢れないように */
  white-space: nowrap;           /* テキストが折り返されないように */
}