/* sec01スライダー用のCSS */
.sec01__slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

/* スクロールバー用に下マージンを追加 */
@media (min-width: 768px) {
  .sec01__slider-container {
    /* margin-bottom: 20px; */
    margin-bottom: 0;
  }
}

/* スマホ時はスクロールバー用に下マージンを追加 */
@media (max-width: 767px) {
  .sec01__slider-container {
    margin-bottom: 20px;
  }
}

/* PC表示時のスライダー */
@media (min-width: 768px) {
  .sec01__box .sec01__slider-container {
    /* PC時はoverflowを隠してスライダー動作 */
    overflow: hidden;
  }

  .sec01__box .sec01__list {
    display: flex !important;
    transition: transform 0.5s ease;
  }

  .sec01__box .sec01__item.slide {
    min-width: 100% !important;
    box-sizing: border-box;
    flex-shrink: 0 !important;
  }
}

/* スマホ表示時の横スクロール */
@media (max-width: 767px) {
  .sec01__box .sec01__slider-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* スクロールバーのスタイリング */
    /* scrollbar-width: thin; */
    scrollbar-color: #ccc #f0f0f0;
  }

  /* Webkit系ブラウザ用のスクロールバースタイル */
  .sec01__box .sec01__slider-container::-webkit-scrollbar {
    height: 8px;
  }

  .sec01__box .sec01__slider-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
    margin: 0 10px;
  }

  .sec01__box .sec01__slider-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }

  .sec01__box .sec01__slider-container::-webkit-scrollbar-thumb:hover {
    background: #999;
  }

  .sec01__box .sec01__list {
    display: flex !important;
  }

  .sec01__box .sec01__item.slide {
    width: min(100%, 343px);
    min-width: 100% !important;
    box-sizing: border-box;
    flex-shrink: 0 !important;
    margin-right: 15px;
  }
}

/* ナビゲーションボタン */
.sec01__slider-nav {
  position: relative;
  width: 100%;
  height: 0;
}

.sec01__slider-nav button {
  position: absolute;
  z-index: 1;
  top: -180px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  transition: opacity 0.3s ease;
}

.sec01__slider-nav button:hover {
  opacity: 0.7;
}

.sec01__slider-nav .prev img,
.sec01__slider-nav .next img {
  width: 30px;
  height: 66px;
}

.sec01__slider-nav .prev {
  left: -56px;
}

.sec01__slider-nav .next {
  right: -56px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .sec01__slider-nav {
    display: none;
  }
}

@media screen and (min-width: 767px) {
/* プログレスバー（PC・SP共通表示） */
.sec01__progress-container {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
}

.sec01__progress-bar {
  height: 100%;
  background-color: #ccc;
  border-radius: 4px;
  transition: transform 0.3s ease;
  width: calc(100% / 3); /* 固定幅 */
  position: absolute;
  left: 0;
  top: 0;
}
}

.sec03__progress-container {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
}

.sec03__progress-bar {
  height: 100%;
  background-color: #ccc;
  border-radius: 4px;
  transition: transform 0.3s ease;
  width: calc(100% / 3); /* 固定幅 */
  position: absolute;
  left: 0;
  top: 0;
}

/* sec03のスクロールバー非表示（SP時） */
@media (max-width: 767px) {
  .sec03_cont-inner {
    /* Firefox用 */
    scrollbar-width: none;
    /* IE・Edge用 */
    -ms-overflow-style: none;
  }

  /* Webkit系ブラウザ用（Chrome、Safari等） */
  .sec03_cont-inner::-webkit-scrollbar {
    display: none;
  }
}
  .sec03_cont-inner {
    /* Firefox用 */
    scrollbar-width: none;
    /* IE・Edge用 */
    -ms-overflow-style: none;
  }

  /* Webkit系ブラウザ用（Chrome、Safari等） */
  .sec03_cont-inner::-webkit-scrollbar {
    display: none;
  }
.sec03_cont-inner{
  padding-bottom: 0 !important;
  figure {
    margin: 0 !important;
  }
}