.carousel {
    width: 100%;
    /* heightを固定するとカルーセルのマージンが広がるので注意 */
    height: auto;
    overflow: hidden;
    position: relative;
  }
  .carousel--image {
    width: 100%;
    /* heightを固定すると画像の縦横比が狂うので注意 */
    height: auto;
    vertical-align: top;
  }
  
  /* スライド設定 */
  .carousel--wrap {
    /* スライド画像の枚数 ✕ 100%の値をセット */
    width: 600%;
    width: 400%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider 30s infinite;
    animation-delay: 3s;
  }
  
  /* slide-wrap-main */
  .carousel--wrapMain {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main 30s infinite;
    animation-delay: 3s;
  }
  .carousel--slide {
    width: 100%;
  }
  
/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider {
  0% { transform: translateX(0); }

  /* Sample */
  /* 13.6% { transform: translateX(calc(1 / 6 * -100%)); }
  16.6% { transform: translateX(calc(1 / 6 * -100%)); }

  30.3% { transform: translateX(calc(2 / 6 * -100%)); }
  33.3% { transform: translateX(calc(2 / 6 * -100%)); }

  46.9% { transform: translateX(calc(3 / 6 * -100%)); }
  49.9% { transform: translateX(calc(3 / 6 * -100%)); }

  63.6% { transform: translateX(calc(4 / 6 * -100%)); }
  66.6% { transform: translateX(calc(4 / 6 * -100%)); }

  80.3% { transform: translateX(calc(5 / 6 * -100%)); }
  83.3% { transform: translateX(calc(5 / 6 * -100%)); }

  97% { transform: translateX(calc(6 / 6 * -100%)); }
  100% { transform: translateX(calc(6 / 6 * -100%)); } */


  25% { transform: translateX(calc(1 / 4 * -100%)); }
  28% { transform: translateX(calc(1 / 4 * -100%)); }

  50% { transform: translateX(calc(2 / 4 * -100%)); }
  53% { transform: translateX(calc(2 / 4 * -100%)); }

  75% { transform: translateX(calc(3 / 4 * -100%)); }
  78% { transform: translateX(calc(3 / 4 * -100%)); }
  
  97% { transform: translateX(calc(4 / 4 * -100%)); }
  100% { transform: translateX(calc(4 / 4 * -100%)); }

}

@keyframes css-carousel-slider-main {
  /* 0% { transform: translateX(100%); }
  83.3% { transform: translateX(100%); }
  97% { transform: translateX(0%);} */

  0% { transform: translateX(100%); }
  /* スライダーアニメーションの最後から１つ手前の画像の２番目の％を入力 */
  78% { transform: translateX(100%); }
  /* スライダーアニメーションの最後の画像の１番目の％を入力 */
  97% { transform: translateX(0%);}
}