@charset "UTF-8";
/* ///////////////////////////////////////////////////////////////////// 
//  パネルスライド
///////////////////////////////////////////////////////////////////// */

.bg-color-pickup {
  background-color: #f0efef;
}
/* グラデーションを左右に追加するためのスタイル */
.swiper-container {
  position: relative;
  overflow: hidden; /* G追加　横スクロールバーを防ぐ */
  padding: 0 20px; /* スライドの両端にスペースを追加 */
}
.swiper-wrapper {
   max-width: 100%;
  display: flex;
  width: auto; /* G追加　自動幅に設定 */
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #f0efef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* PC（デスクトップ）サイズ以上でのみ両端にグラデーションを適用する */
@media (min-width: 992px) {
    .swiper-container::before,
    .swiper-container::after {
        /* 両端のグラデーション */
        content: ""; /* contentプロパティは空にせず、"" を指定する必要があります */
        position: absolute;
        top: 0;
        bottom: 0;
        width: 5%; /* 両端のグラデーションのサイズ */
        z-index: 10;
    }

    .swiper-container::before {
        left: 0;
        background: linear-gradient(to right, #f0efef, transparent);
    }

    .swiper-container::after {
        right: 0;
        background: linear-gradient(to left, #f0efef, transparent);
    }
}

/* swiper-paginationの位置を調整 */
.swiper-pagination {
  position: relative; /* 親要素に対して相対位置を使用 */
  margin-top: 20px; /* 間隔を20pxに設定 */
}
/* G追加　メディアクエリでパディングを調整 */
@media (max-width: 768px) {
  .swiper-container {
    padding: 0 10px;
  }
}
/* ホーバー時に画像を透明にするスタイル */
.hover-opacity {
  transition-property: opacity;
  transition-duration: 0.5s ease; /* 透明度の変化を滑らかにする */
}
.hover-opacity:hover {
  opacity: 0.7; /* 透明度を70%にする。数字を調整可能 */
}