/* 募金実績 */
.slide-container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 20s infinite linear 1s both;
}
.slide {
  width: 300px;
  object-fit: cover;
  border: 1px solid #ddd;
}

.slide-wrapper {
  display: flex;
  animation: slide-flow 20s infinite linear;
  width: calc(300px * 8); /* スライド数 * スライドの幅 */
}
@keyframes slide-flow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-300px * 4)); /* スライド数の半分 */
  }
}

/* イベント画像スライドショー */
/* スライダー全体のコンテナ */
.slide-event-container {
  position: relative;
  width: 80%;
  height: 550px; /* スライダー全体の高さを固定 */
  margin: 0 auto;
  overflow: hidden; /* コンテナ外の画像を隠す */
}

/* スライダーのスライド定義 */
.slide-event {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%; /* 親要素に高さを合わせる */
}

/* 各スライド画像 */
.slide-event img {
  flex: 0 0 100%; /* 各スライドを幅100%で表示 */
  width: 100%; /* 親要素の幅に合わせる */
  height: 100%; /* 親要素の高さに合わせる */
  object-fit: cover; /* 縦横比を維持して親要素に収める */
  display: block; /* ブロック要素として扱う */
}

/* インディケーター */
.indicator-container {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  width: 100%;
  z-index: 1;
}

.indicator {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #fff0f5;
  border-radius: 50%;
  cursor: pointer;
}

.indicator.active {
  background-color: #ffb2cb;
}

/* ボタン（前へ・次へ） */
.prev-btn,
.next-btn {
  position: absolute;
  top: 80%;
  transform: translateY(-50%);
  background-color: #fff0f5;
  color: #ffb2cb;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

@media screen and (max-width: 768px) {
  .slide-event-container {
    position: relative;
    width: 100%;
    height: auto; /* スライダー全体の高さを固定 */
    margin: 0 auto;
    overflow: hidden; /* コンテナ外の画像を隠す */
  }
  /* スライダーのスライド定義 */
  .slide-event {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%; /* 親要素に高さを合わせる */
  }

  /* 各スライド画像 */
  .slide-event img {
    flex: 0 0 100%; /* 各スライドを幅100%で表示 */
    width: 100%; /* 親要素の幅に合わせる */
    height: 100%; /* 親要素の高さに合わせる */
    object-fit: cover; /* 縦横比を維持して親要素に収める */
    display: block; /* ブロック要素として扱う */
  }

  /* インディケーター */
  .indicator-container {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
    z-index: 1;
  }

  .indicator {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #fff0f5;
    border-radius: 50%;
    cursor: pointer;
  }

  .indicator.active {
    background-color: #ffb2cb;
  }

  /* ボタン（前へ・次へ） */
  .prev-btn,
  .next-btn {
    position: absolute;
    top: 80%;
    transform: translateY(-50%);
    background-color: #fff0f5(0, 0, 0, 0.5);
    color: #ffb2cb;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
  }

  .prev-btn {
    left: 10px;
  }

  .next-btn {
    right: 10px;
  }
}