#stage {
	position: relative;
	width: 100%;
	height: 397px;
	overflow: hidden;
	background:#777;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#back6,#back7,#next1,#next2,#next3,#next4,#next5,#next6,#next7,#r1,#r2,#r3,#r4,#r5,#r6,#r7{
	display: none;
}
/*全ての写真を水平一列に格納したdiv、#photosに,スライドショーの animation を設定*/
#photos {
	position:absolute;
	top:0;
	width:100%;
	animation: imgPassToLeft0 40s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite;
}
/*各写真の並び位置を設定 */
#photo0 { left:  0%; }
#photo1 { left:100%; } 
#photo2 { left:200%; }
#photo3 { left:300%; }
#photo4 { left:400%; }
#photo5 { left:500%; }
#photo6 { left:600%; }
#photo7 { left:700%; }
#photo8 { left:800%; }
#photo9 { left:900%; }

.pic { position:absolute;top:0;width:100%; }
/*写真サイズ・位置ボタンサイズを可変に*/
.pic img:nth-child(1) { width:100%; }
.order { float:left; }
.order img { width:110%; }
@media screen and (max-width: 640px) {
	.order img { width:80%; }
	#slide_position img { width:80%; }
}
/* 位置表示ボタン */
#btn_band {
	position:relative;
	width:160px;
	margin:0 auto;
	margin-top:375px;
	bottom: #fff;
	display: none;
}
#slide_position {
	position:absolute;left:0;
	animation:orderToLeft0 40s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite;
	display: none;
}
.circ:hover { cursor:pointer; }

/*送りボタン文字（＜、＞）の設定*/
.b_left, .b_right {
	position: absolute;
	top: 48%;
	opacity:0;
}
.b_left {
	left: 3%;height:5%;width:15%;
	background-image:url(../images/slide/back_1.png);
	background-repeat: no-repeat;
	background-size:contain;
}
.b_right {
	left: 95%;height:5%;width:15%;
	background-image:url(../images/slide/forward_1.png);
	background-repeat: no-repeat;
	background-size:contain;
}
.b_left:hover { 
	background-image:url(../images/slide/back_2.png); 
}
.b_right:hover { 
	background-image:url(../images/slide/forward_2.png); 
}


/* スライド移動animation設定 */
@keyframes imgPassToLeft0 {
	0%  { transform: translateX(-100%); }
	10% { transform: translateX(-100%); }
	12.5% { transform: translateX(-200%); }
	22.5% { transform: translateX(-200%); }
	25% { transform: translateX(-300%); }
	35% { transform: translateX(-300%); }
	37.5% { transform: translateX(-400%); }
	47.5% { transform: translateX(-400%);}
	50% { transform: translateX(-500%); }
	60% { transform: translateX(-500%); }
	62.5% { transform: translateX(-600%); }
	72.5% { transform: translateX(-600%); }
	75% { transform: translateX(-700%); }
	85% { transform: translateX(-700%); }
	87.5% { transform: translateX(-800%); }
	97.5% { transform: translateX(-800%); }
	100% { transform: translateX(-100%); }
}

/* 位置表示ボタン移動animation設定 */
@keyframes orderToLeft0 {
	0%  { left: 0; opacity:1; }
	9%  { left: 0; opacity:1; }
	10% {  opacity:0; }
	11.5% {  opacity:0; }
	12.5% { left: 12.5%; opacity:1; }
	21.5% { left: 12.5%; opacity:1; }
	22.5% {  opacity:0; }
	24% {  opacity:0; }
	25% { left: 25%; opacity:1; }
	34% { left: 25%; opacity:1; }
	35% {  opacity:0; }
	36.5% {  opacity:0; }	
	37.5% { left: 37.5%; opacity:1; }
	46.5% { left: 37.5%; opacity:1; }
	47.5% { opacity:0; }
	49% { opacity:0; }
	50% { left: 50%; opacity:1; }
	59% { left: 50%; opacity:1; }
	60% { opacity:0; }
	61.5% { opacity:0; }
	62.5% { left:  62.5%; opacity:1; }
	71.5% { left:  62.5%; opacity:1; }
	72.5% { opacity:0; }
	74% { opacity:0; }
	75% { left:  75%; opacity:1; }
	84% { left: 75%; opacity:1; }
	85% { opacity:0; }
	86.5% { opacity:0; }
	87.5% { left:  87.5%; opacity:1; }
	96.5% { left: 87.5%; opacity:1; }
	99% { left: 87.5%; opacity:1;}
	100% {  opacity:0; }
}