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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
#page {
 width: 800px;
 margin-right: auto;
 margin-left: auto;
 }



CSS
/* 表示画面 */
#stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background:#777;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#back6,#next1,#next2,#next3,#next4,#next5,#next6,#r1,#r2,#r3,#r4,#r5,#r6{
	display: none;
}
/*全ての写真を水平一列に格納したdiv、#photosに,スライドショーの animation を設定*/
#photos {
	position:relative;
	top:10%;
	width:100%;
	animation: imgPassToLeft0 30s 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%; }
.pic { position:absolute;top:0;width:100%; }
/*写真サイズ・位置ボタンサイズを可変に*/
.pic img:nth-child(1) { width:60%; }
.order { float:left; }
.order img { width:100%; }
@media screen and (max-width: 640px) {
	.order img { width:80%; }16
	#slide_position img { width:80%; }
}

/* スライド移動animation設定 */
@keyframes imgPassToLeft0 {
	0%  { left:-100%; }
	16% { left:-200%; }
	20% { left:-200%; }
	36% { left:-300%; }
	40% { left:-300%; }
	56% { left:-400%; }
	60% { left:-400%; }
	76% { left:-500%; }
	80% { left:-500%; }
	96% { left:-600%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft1 {
	0%  { left:-100%; }
	16% { left:-200%; }
	20% { left:-200%; }
	36% { left:-300%; }
	40% { left:-300%; }
	56% { left:-400%; }
	60% { left:-400%; }
	76% { left:-500%; }
	80% { left:-500%; }
	96% { left:-600%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft2 {
	0%  { left:-100%; }
	16% { left:-200%; }
	20% { left:-200%; }
	36% { left:-300%; }
	40% { left:-300%; }
	56% { left:-400%; }
	60% { left:-400%; }
	76% { left:-500%; }
	80% { left:-500%; }
	96% { left:-600%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft3 {
	0%  { left:-100%; }
	16% { left:-200%; }
	20% { left:-200%; }
	36% { left:-300%; }
	40% { left:-300%; }
	56% { left:-400%; }
	60% { left:-400%; }
	76% { left:-500%; }
	80% { left:-500%; }
	96% { left:-600%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft4 {
	0%  { left:-100%; }
	16% { left:-200%; }
	20% { left:-200%; }
	36% { left:-300%; }
	40% { left:-300%; }
	56% { left:-400%; }
	60% { left:-400%; }
	76% { left:-500%; }
	80% { left:-500%; }
	96% { left:-600%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft5 {
	0%  { left:-100%; }
	16% { left:-200%; }
	20% { left:-200%; }
	36% { left:-300%; }
	40% { left:-300%; }
	56% { left:-400%; }
	60% { left:-400%; }
	76% { left:-500%; }
	80% { left:-500%; }
	96% { left:-600%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft6 {
	0%  { left:-100%; }
	16% { left:-200%; }
	20% { left:-200%; }
	36% { left:-300%; }
	40% { left:-300%; }
	56% { left:-400%; }
	60% { left:-400%; }
	76% { left:-500%; }
	80% { left:-500%; }
	96% { left:-600%; }
	100% { left:-600%; }
}
@keyframes imgPassToRight1 {
	0% { left:-600%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight2 {
	0% { left:-600%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight3 {
	0% { left:-600%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight4 {
	0% { left:-600%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight5 {
	0% { left:-600%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight6 {
	0% { left:-600%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}