.slider-box {
  position: relative;
  width: 400px;
  height: 566px;
  overflow: hidden;
  border: 1px solid gray;
}

.slider-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: switch-img 15s infinite;
}

.exp-area {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.general-exp {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 10em;
  box-sizing: border-box;
}

.general-exp p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  box-sizing: border-box;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;

  opacity: 0;
  animation: fade 15s infinite;
}

    /* 各画像の表示タイミングをずらす（アニメーションの開始を遅らせる） */
    .general-exp p:nth-child(1) , .slider-box img:nth-child(1) {
      animation-delay: 0s;
    }
    .general-exp p:nth-child(2) , .slider-box img:nth-child(2) {
      animation-delay: 3s; /* 3秒後にスタート */
    }
    .general-exp p:nth-child(3) , .slider-box img:nth-child(3) {
      animation-delay: 6s; /* 6秒後にスタート */
    }
    .general-exp p:nth-child(4) , .slider-box img:nth-child(4) {
      animation-delay: 9s; /* 9秒後にスタート */
    }
    .general-exp p:nth-child(5) , .slider-box img:nth-child(5) {
      animation-delay: 12s; /* 12秒後にスタート */
    }
    /* パッと切り替えるためのアニメーション設定（5枚用） */
    @keyframes switch-img {
      0% { opacity: 1; }  /* 表示 */
      20.0% { opacity: 1; } /* 3秒間（全体の1/5）表示を維持 */
      20.1% { opacity: 0; } /* 次の瞬間にパッと消す */
      100% { opacity: 0; }
    }

    /* 画像フェードインアニメーションのキーフレーム */
    @keyframes fade {
        0% { opacity: 0;} /* 非表示の状態からスタート */
        5% { opacity: 1;} /* 15%になるまでの間に少しづつ画像を表示（フェードイン）させる */
        15% { opacity: 1;} /* そこから30%の時点までは画像を表示させたままの状態を維持し */
        20% { opacity: 0;} /* 45%の時点に向けて画像を非表示（フェードアウト）する */
      100% { opacity: 0;} /* そこから100%まで非表示の状態を維持する */
    }