/*********************************
 横スライド（停止→移動→停止・・・）
**********************************/

/*------------------------------------
  横方向スライド 3枚分
--------------------------------------*/
#stage10 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 480px;
  background: url(../images/pc_a_base.jpg) no-repeat left top;
  overflow: hidden;
}
#photo10 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 720px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright10 9s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright10 9s ease infinite;
  -webkit-transition:left 1s ease;
  /*
  ease：開始と完了を滑らかにする（初期値）
  linear：一定／ease-in：ゆっくり始まる／ease-out：ゆっくり終わる
  ease-in-out：ゆっくり始まってゆっくり終わる
  cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
  */
}
.pic10 {
  width:720px;
  position:absolute;
}
.pic10 img { width:720px; }

#photo10-1 { left:-635px; }
#photo10-2 { left: 115px; }
#photo10-3 { left: 865px; }
#photo10-4 { left:1615px; }
#photo10-5 { left:2365px; }

/* スライド群のanimation */
@keyframes transtoright10 {
    0%      { left:     0px; } /* Start */
   22.22%   { left:     0px; } /* 2sec wait */
   33.33%   { left:  -750px; } /* 1sec 1->2 */
   55.55%   { left:  -750px; } /* 2sec wait */
   66.67%   { left: -1500px; } /* 1sec 2->3 */
   88.89%   { left: -1500px; } /* 2sec wait */
   99.9999% { left: -2250px; } /* 1sec 3->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

/*------------------------------------
  横方向スライド 4枚分
--------------------------------------*/
#stage11 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 480px;
  background: url(../images/pc_b_base.jpg) no-repeat left top;
  overflow: hidden;
}
#photo11 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 720px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright8 12s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright8 12s ease infinite;
  -webkit-transition:left 1s ease;
  /*
  ease：開始と完了を滑らかにする（初期値）
  linear：一定／ease-in：ゆっくり始まる／ease-out：ゆっくり終わる
  ease-in-out：ゆっくり始まってゆっくり終わる
  cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
  */
}
.pic11 {
  width:720px;
  position:absolute;
}
.pic11 img { width:720px; }

#photo11-1 { left:-635px; }
#photo11-2 { left: 115px; }
#photo11-3 { left: 865px; }
#photo11-4 { left:1615px; }
#photo11-5 { left:2365px; }
#photo11-6 { left:3115px; }

/* スライド群のanimation */
@keyframes transtoright8 {
    0%      { left:     0px; } /* Start */
   16.67%   { left:     0px; } /* 2sec wait */
   25%      { left:  -750px; } /* 1sec 1->2 */
   41.67%   { left:  -750px; } /* 2sec wait */
   50%      { left: -1500px; } /* 1sec 2->3 */
   66.67%   { left: -1500px; } /* 2sec wait */
   75%      { left: -2250px; } /* 1sec 3->4 */
   91.67%   { left: -2250px; } /* 2sec wait */
   99.9999% { left: -3000px; } /* 1sec 4->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}