/*** for PC Browser ***/
@media (min-width:401px)
{
.slide_a {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 800px;
  height     : 360px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */

}
 
 /*=== 画像の設定 ======================================= */
.slide_a img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 24s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide_a img:nth-of-type(1) { animation-delay: 0s }
.slide_a img:nth-of-type(2) { animation-delay: 6s }
.slide_a img:nth-of-type(3) { animation-delay: 12s }
.slide_a img:nth-of-type(4) { animation-delay: 18s }

 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
  20% { opacity: 1 }
  25% { opacity: 1 }
  40% { opacity: 0 }
 100% { opacity: 0 }
}



.slide_aa {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 282px;
  padding: 0.5rem 1.0rem;
  margin: 0.5rem auto;
  background: #fff;
  border: 1px solid #AAA;
}

.slide_aa img {
  display: block;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: inherit;
  height: inherit;
  left: 100%;
  animation: slide-anime 12s linear infinite; /* 4枚 × 3秒 = 12秒 */
}

.slide_aa img:nth-of-type(1) { animation-delay: 0s; }
.slide_aa img:nth-of-type(2) { animation-delay: 3s; }
.slide_aa img:nth-of-type(3) { animation-delay: 6s; }
.slide_aa img:nth-of-type(4) { animation-delay: 9s; }

@keyframes slide-anime {
  0%   { left: 100%; }
  4%   { left: 3%; }
  20%  { left: 3%; }
  24%  { left: -100%; }
  100% { left: -100%; }
}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
.slide_a {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 800px;
  height     : 360px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */

}
 
 /*=== 画像の設定 ======================================= */
.slide_a img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 8s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide_a img:nth-of-type(1) { animation-delay: 0s }
.slide_a img:nth-of-type(2) { animation-delay: 2s }
.slide_a img:nth-of-type(3) { animation-delay: 4s }
.slide_a img:nth-of-type(4) { animation-delay: 6s }

 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   1% { opacity: 1 }
  13% { opacity: 1 }
  14% { opacity: 0 }
 100% { opacity: 0 }
}
}