@charset "utf-8";
/* //////////////////////////////////////////////////

━━━━━━━━━━━━━━━━━━━━━━━
slide.css

参考：http://css.programming.jp/?p=113
━━━━━━━━━━━━━━━━━━━━━━━

////////////////////////////////////////////////// */

/* **************************************************

【！】スライド枚数変更時に必要な修正
-----------------------------------------------------

/* 全体　…枚数分の時間に変更

　　［各10秒×5枚分の場合］

　　-moz-animation: imgtrans 50s infinite;
    -webkit-animation: imgtrans 50s infinite;
    animation: imgtrans 50s infinite;

/* 各スライド

　　…スライド枚数分の記述　ul:nth-child(2)←何枚目か

　　…表示時間を修正（各10秒ずつの場合）
　　　
　　［1枚目：0s／2枚目：10s／3枚目：20s ～ ］

　    -moz-animation-delay: 10s;
  　  -webkit-animation-delay: 10s;
    　animation-delay: 10s;

/* 各スライドのアニメーション　…全体の枚数に合わせて3番目の％を変更

　　［スライド5枚の場合 100÷5＝20%］

　　　0% { left:100%; }
　　　2% { left:0%; }
　！> 20% { left:0%; }　←１枚の表示時間
　　　22% { left:-100%; }　←合わせて変更
　　　100% { left:-100%; }


************************************************** */

#rn_scrollBanner_inner {
	position: relative;
}
/* 全体 */
#rn_scrollBanner_inner .rn_scrollBanner_slide ul {
	position: absolute;
	-moz-animation: imgtrans 35s infinite;
	-webkit-animation: imgtrans 35s infinite;
	animation: imgtrans 35s infinite;
}
/* 各スライド */
#rn_scrollBanner_inner .rn_scrollBanner_slide ul:nth-child(1) {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul:nth-child(2) {
	-moz-animation-delay: 7s;
	-webkit-animation-delay: 7s;
	animation-delay: 7s;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul:nth-child(3) {
	-moz-animation-delay: 14s;
	-webkit-animation-delay: 14s;
	animation-delay: 14s;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul:nth-child(4) {
	-moz-animation-delay: 21s;
	-webkit-animation-delay: 21s;
	animation-delay: 21s;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul:nth-child(5) {
	-moz-animation-delay: 28s;
	-webkit-animation-delay: 28s;
	animation-delay: 28s;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide {
	position: relative;
	overflow: hidden;
}

/* 各スライドのアニメーション */
@-webkit-keyframes imgtrans {
 0% {
left:100%;
}
 2% {
left:0%;
}
 20% {
left:0%;
}
 22% {
left:-100%;
}
 100% {
left:-100%;
}
}
@-moz-keyframes imgtrans {
 0% {
left:100%;
}
 2% {
left:0%;
}
 20% {
left:0%;
}
 22% {
left:-100%;
}
 100% {
left:-100%;
}
}
@keyframes imgtrans {
 0% {
left:100%;
}
 2% {
left:0%;
}
 20% {
left:0%;
}
 22% {
left:-100%;
}
 100% {
left:-100%;
}
}