/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : relative;
  max-width  : 1200px;
  height     : 300px;
  margin     : 15px auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 44s infinite;   /* 4画像 × 各11s = 44s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(../images/item/20190725_001.jpg);   /* 背景の画像を指定 */
}
.box .src2 {
  background-image : url(../images/item/20190725_002.jpg);   /* 背景の画像を指定 */
  animation-delay  : 11s;
}
.box .src3 {
  background-image : url(../images/item/20190725_003.jpg);   /* 背景の画像を指定 */
  animation-delay  : 22s;
}
.box .src4 {
  background-image : url(../images/item/20190725_004.jpg);   /* 背景の画像を指定 */
  animation-delay  : 33s;
}

@keyframes bgAnime {
   0% { opacity: 0; transform: scale(1.2, 1.2); }
   1% { opacity: 1; transform: scale(1.2, 1.2); }
   5% { opacity: 1; transform: scale(1.2, 1.2); }
  21% { opacity: 1; transform: scale(1.0, 1.0); }
  25% { opacity: 1; transform: scale(1.0, 1.0); }
  26% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 15px;
  background : rgba(255, 255, 255, 0.6);          /* 半透明の青 */
  color      : #000;
  top        : 250px;                               /* inboxの位置 */
  right      : -341px;
  transform  : translate(-67%,-50%);
  width: 547px;
  font-weight: bold;
}