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

/*スライダー全体のコンテナー*/
#stage {
    position: relative;
    max-width: 360px;
    margin: 0 auto;
    overflow: hidden;
    height: 200px;
    width: 360px;
}
/*全ラジオボタンを非表示に*/
#r1,#r2,#r3,#r4,#back1,#back2,#back3,#back4,#next1,#next2,#next3,#next4 {
	display: none;
}
/* 表示切換えボタンと表示位置 */
.circ img {
	position: absolute;
	cursor: pointer;
	bottom: 0px;
	opacity: 0.3;
	z-index: 50;
	padding: 10px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
#lb1 img {
	left: 100px;
	width: 15px;
}
#lb2 img {
	left: 140px;
	width: 15px;
}
#lb3 img {
	left: 180px;
	width: 15px;
}
#lb4 img {
	left: 220px;
	width: 15px;
}

/* 左右送りボタン */
.pb {
	display: block;
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0%;
	margin: 0px;
	width: 180px;
	height: 166px;
	padding: 0px;
}
.nb {
	display: block;
	opacity: 0;
	position: absolute;
	top: 0px;
	height: 166px;
	width: 180px;
	right: 0%;
	margin: 0px;
	padding: 0px;
}
.pb:hover, .nb:hover {
	cursor: pointer;
}
.arrowL {
	display: block;
	opacity: 0.5;
	position: absolute;
	top: 0px;
	left: 0%;
	padding-top: 73px;
	margin: 0px;
	width: 20px;
	padding-bottom: 73px;
	padding-right: 160px;
	padding-left: 0px;
	height: 20px;
	pointer-events: none;
}
.arrowR {
	display: block;
	opacity: 0.5;
	position: absolute;
	top: 0px;
	height: 20px;
	width: 20px;
	right: 0%;
	padding-top: 73px;
	padding-right: 0px;
	padding-bottom: 73px;
	padding-left: 160px;
	pointer-events: none;
}
/* stageが初期サイズ以下のなったときのサイズ */
/*@media screen and (max-width: 360px) { .pb, .nb { font-size:18px; } }*/
/*全表示スライドのコンテナー*/
.photosBG {
    background-color: #000000;
    width: 360px;
    height: 167px;
}

#photos {
    position: absolute;
    width: 360px;
    height: 166px; /*100%;*/
    left: 0%;
    opacity: 0;
    /*pointer-events: none;*/
    animation: flowSlides 32s infinite;
}
/* 個々のスライド・現スライド標示ボタン */
.pic {
	position: absolute;
	width: 100%;
	height: 100%;
}
.pic img:nth-child(1) { width:100%; margin-left:0%; }
.pic img:nth-child(2) {	width:15px;	bottom: 10px; }

/*表示スライドをphotosの中に横並びで一列に並べる*/
#photo1 { left: 0; }
#photo2 { left: 660px; }
#photo3 { left: 1320px; }
#photo4 { left: 1980px; }

/* 写真の下に現スライド標示ボタンを配置 */
#photo1 img:nth-child(2) {
	position: absolute;
	left: 110px;
	width: 15px;
	bottom: -24px;
	z-index: 50;
}
#photo2 img:nth-child(2) {
	position: absolute;
	left: 150px;
	width: 15px;
	bottom: -24px;
	z-index: 50; 
}
#photo3 img:nth-child(2) {
	position: absolute;
	left: 190px;
	width: 15px;
	bottom: -24px;
	z-index: 50; 
}
#photo4 img:nth-child(2) {
	position: absolute;
	left: 230px;
	width: 15px;
	bottom: -24px;
	z-index: 50; 
}

/*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動*/
#r1:checked ~ #photos { animation:flowSlides1 32s infinite; animation-delay: 0s; }
#r2:checked ~ #photos { animation:flowSlides2 32s infinite; animation-delay:-8s; }
#r3:checked ~ #photos { animation:flowSlides3 32s infinite; animation-delay:-16s; }
#r4:checked ~ #photos { animation:flowSlides4 32s infinite; animation-delay:-24s; }
/* 左送りボタン */
#back1:checked ~ #photos { animation:flowSlides5 32s infinite; animation-delay:-24s; }
#back2:checked ~ #photos { animation:flowSlides1 32s infinite; animation-delay: 0s; }
#back3:checked ~ #photos { animation:flowSlides2 32s infinite; animation-delay:-8s; }
#back4:checked ~ #photos { animation:flowSlides3 32s infinite; animation-delay:-16s; }
/* 右送りボタン */
#next1:checked ~ #photos { animation:flowSlides2 32s infinite; animation-delay:-8s; }
#next2:checked ~ #photos { animation:flowSlides3 32s infinite; animation-delay:-16s; }
#next3:checked ~ #photos { animation:flowSlides4 32s infinite; animation-delay:-24s; }
#next4:checked ~ #photos { animation:flowSlides5 32s infinite; animation-delay: 0s; }
/* 初期スライドショー */
@keyframes flowSlides {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	20% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-660px; opacity:0; }
	30% { left:-660px; opacity:1; }
	45% { left:-660px; opacity:1; }
	50% { left:-660px; opacity:0; }
	50.01% { left:-1320px; opacity:0; }
	55% { left:-1320px; opacity:1; }
	70% { left:-1320px; opacity:1; }
	75% { left:-1320px; opacity:0; }
	75.01% { left:-1980px; opacity:0; }
	80% { left:-1980px; opacity:1; }
	95% { left:-1980px; opacity:1; }
	100% { left:-1980px; opacity:0; }
}
/* 各スライド向けスライドショー */
@keyframes flowSlides1 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	20% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-660px; opacity:0; }
	30% { left:-660px; opacity:1; }
	45% { left:-660px; opacity:1; }
	50% { left:-660px; opacity:0; }
	50.01% { left:-1320px; opacity:0; }
	55% { left:-1320px; opacity:1; }
	70% { left:-1320px; opacity:1; }
	75% { left:-1320px; opacity:0; }
	75.01% { left:-1980px; opacity:0; }
	80% { left:-1980px; opacity:1; }
	95% { left:-1980px; opacity:1; }
	100% { left:-1980px; opacity:0; }
}
@keyframes flowSlides2 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	20% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-660px; opacity:0; }
	30% { left:-660px; opacity:1; }
	45% { left:-660px; opacity:1; }
	50% { left:-660px; opacity:0; }
	50.01% { left:-1320px; opacity:0; }
	55% { left:-1320px; opacity:1; }
	70% { left:-1320px; opacity:1; }
	75% { left:-1320px; opacity:0; }
	75.01% { left:-1980px; opacity:0; }
	80% { left:-1980px; opacity:1; }
	95% { left:-1980px; opacity:1; }
	100% { left:-1980px; opacity:0; }
}
@keyframes flowSlides3 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	20% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-660px; opacity:0; }
	30% { left:-660px; opacity:1; }
	45% { left:-660px; opacity:1; }
	50% { left:-660px; opacity:0; }
	50.01% { left:-1320px; opacity:0; }
	55% { left:-1320px; opacity:1; }
	70% { left:-1320px; opacity:1; }
	75% { left:-1320px; opacity:0; }
	75.01% { left:-1980px; opacity:0; }
	80% { left:-1980px; opacity:1; }
	95% { left:-1980px; opacity:1; }
	100% { left:-1980px; opacity:0; }
}
@keyframes flowSlides4 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	20% { left:0px; opacity:1; }
	25% { left:0px; opacity:0; }
	25.01% { left:-660px; opacity:0; }
	30% { left:-660px; opacity:1; }
	45% { left:-660px; opacity:1; }
	50% { left:-660px; opacity:0; }
	50.01% { left:-1320px; opacity:0; }
	55% { left:-1320px; opacity:1; }
	70% { left:-1320px; opacity:1; }
	75% { left:-1320px; opacity:0; }
	75.01% { left:-1980px; opacity:0; }
	80% { left:-1980px; opacity:1; }
	95% { left:-1980px; opacity:1; }
	100% { left:-1980px; opacity:0; }
}