/* 空のスライドを補完するための追加セクション */
#VswiperSlideEnd {}
/* 空のスライドを含む Hswiper-container */
#VswiperSlideEnd .Hswiper-container {}
/* その他の設定 */
#panelWrapper {
  position: relative;
  height: calc(var(--vh) * 100); /* カスタムプロパティを使用して高さを設定 */
  overflow: hidden; /* スクロールバーを非表示にする */
  z-index: 0;
}
#panelInner {
  position: relative;
  height: 100%; /* 高さを 100% に設定 */
}
#panelScroll {
  margin: 0;
  width: 100%;
}
.Vswiper-container {
  width: 100%;
  height: calc(var(--vh) * 100); /* カスタムプロパティを使用して高さを設定 */
}
.Hswiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  width: 100%;
  height: calc(var(--vh) * 100); /* カスタムプロパティを使用して高さを設定 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* スライド内でのオーバーフローを防ぐ */
}
.swiper-slide img {
  width: auto; /* 横幅を自動調整 */
  height: 100%; /* 高さをビューポートに合わせる */
  object-fit: cover; /* 高さに合わせてカバー表示 */
}

/* 左下に揃えるための調整 */
.swiper-wrapper {
  position: relative; /* 親要素にposition: relativeを設定して、子要素の絶対位置を制御 */
  width: 100%;
}

.swiper-wrapper li p {
  position: absolute;
  bottom: 1.5rem; /* 下から2rem */  	
  
 /* Extra small devices (max-width: 575.98px) */
  @media (max-width: 575.98px) {
    left: 1rem; /* スマホサイズで右端に揃える */
  }

  /* Small devices (min-width: 576px) */
  @media (min-width: 576px) {
    left: 1.5rem; /* Smallサイズで右端に揃える */
  }

  /* Medium devices (min-width: 768px) */
  @media (min-width: 768px) {
    left: 2rem; /* Mediumサイズで右端に揃える */
  }

  /* Large devices (min-width: 992px) */
  @media (min-width: 992px) {
    left: calc((100% - 960px) / 2 + .9rem); /* Largeサイズで右端に揃える */
  }

  /* X-Large devices (min-width: 1200px) */
  @media (min-width: 1200px) {
    left: calc((100% - 1140px) / 2 + .9rem); /* X-Largeサイズで右端に揃える */
  }

  /* XX-Large devices (min-width: 1400px) */
  @media (min-width: 1400px) {
    left: calc((100% - 1320px) / 2 + .9rem); /* XX-Largeサイズで右端に揃える */
  }
}




/* スマートフォンの縦幅に合わせるスタイル */
@media (max-width: 768px) {
  .swiper-slide {
    height: calc(var(--vh) * 100); /* カスタムプロパティを使用して高さを設定 */
  }
  .swiper-slide img {
    width: auto; /* 横幅を自動調整 */
    height: calc(var(--vh) * 100); /* カスタムプロパティを使用して高さを設定 */
    max-width: 100%; /* 横幅がビューポートを超えないように */
    object-fit: cover; /* 縦幅に合わせてカバー表示 */
  }
}
/* PCやiPadなどのデスクトップデバイスのスタイル */
@media (min-width: 769px) {
  .swiper-slide img {
    object-fit: cover; /* 画面いっぱいに表示させる */
  }
}
/* スクロールバーのスタイル */
.vertical-scrollbar {
  width: 8px; /* スクロールバーの幅 */
  background-color: rgba(0, 0, 0, 0); /* スクロールバーの背景色 */
  position: absolute;
  top: 0;
  right: 0;
  height: 100%; /* スクロールバーの高さを100%に設定 */
}
.vertical-scrollbar .swiper-scrollbar-drag {
  background-color: rgba(0, 0, 0, 0.3); /* ドラッグ部分の色 */
}