/* パソコン用のCSS */
@media(min-width:751px){

/* 共通 画像の表示エリア */
	.slide {
		position  :relative;
  		overflow  :hidden;

/* 画像のサイズに合わせて変更 */  
		width     :1200px;
 		height    :600px;
 		margin    :auto;
  		background:#FFFFFF; /* 中央寄せの背景：白 */
	}

/* ========== 左から右へ ========== */
 
/* 画像の設定 */
	.slide img {
  		display :block;
  		position:absolute;
  
  		width   :inherit;  /* 画像のサイズを表示エリアに合せる */
  		height  :inherit;
		left :-100%;
		animation:slideAnime 100s ease infinite;
	}

/* スライドのアニメーションを段差で開始する */
	.slide img:nth-of-type(1) { animation-delay: 0s }
	.slide img:nth-of-type(2) { animation-delay: 10s }
	.slide img:nth-of-type(3) { animation-delay: 20s }
	.slide img:nth-of-type(4) { animation-delay: 30s }
	.slide img:nth-of-type(5) { animation-delay: 40s }
	.slide img:nth-of-type(6) { animation-delay: 50s }
	.slide img:nth-of-type(7) { animation-delay: 60s }
	.slide img:nth-of-type(8) { animation-delay: 70s }
	.slide img:nth-of-type(9) { animation-delay: 80s }
	.slide img:nth-of-type(10) { animation-delay: 90s }

/* スライドのアニメーション */
	@keyframes slideAnime{
   		0% { left:-100% }
   		1% { left:0 }
  		9% { left:0 }
  		10% { left:100% }
 		100% { left:100% }
	}
}

/* スマホ用のCSS */
@media(max-width:750px){

/* 共通 画像の表示エリア */
	.slide {
  		position:relative;
		top     :150px;
		left    :0px;
		overoverflow:visible;
  
/* 画像のサイズに合わせて変更 */
 		 width     :100%;
 		 height    :auto;
 		 margin    :auto;
  		 background:#FFFFFF; /* 中央寄せの背景：白 */
	}
 
/* ========== 縦軸回転 ========== */
	.slide img {
  		display :block;
  		position:absolute;
  
/* 画像のサイズを表示エリアに合せる */
  		width    :inherit;
  		height   :inherit;
  		opacity  :0;
  		animation:slideAnime 90s ease infinite;
	}

/* スライドのアニメーションを段差で開始する */
	.slide img:nth-of-type(1) { animation-delay: 0s }
	.slide img:nth-of-type(2) { animation-delay: 10s }
	.slide img:nth-of-type(3) { animation-delay: 20s }
	.slide img:nth-of-type(4) { animation-delay: 30s }
	.slide img:nth-of-type(5) { animation-delay: 40s }
	.slide img:nth-of-type(6) { animation-delay: 50s }
	.slide img:nth-of-type(7) { animation-delay: 60s }
	.slide img:nth-of-type(8) { animation-delay: 70s }
	.slide img:nth-of-type(9) { animation-delay: 80s }
	.slide img:nth-of-type(10) { animation-delay: 90s }

/* スライドのアニメーション */
	@keyframes slideAnime{
		0% { opacity: 0; transform: rotateY(90deg) }
        1% { opacity: 1; transform: rotateY(0deg)  }
        9% { opacity: 1; transform: rotateY(0deg)  }
        10% { opacity: 0; transform: rotateY(90deg) }
        100% { opacity: 0; transform: rotateY(90deg) }
	}
}