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

/*スライダー全体のコンテナー*/
#stage {
    position: relative;
    height: 37.5vw;
    width: 100%;
    overflow: hidden;
    background-color: #FFFFFF;
}
/*全ラジオボタンを非表示に*/
#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {
	display: none;
}
/* 表示切換えボタンと表示位置 */
.circ img {
    position: absolute;
    cursor: pointer;
    bottom: 0px;
    opacity: 0.3;
    z-index: 50;
    padding: 0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}
#lb1 img {
	left: 45%;
	width: 2%;
}
#lb2 img {
	left: 47%;
	width: 2%;
}
#lb3 img {
	left: 49%;
	width: 2%;
}
#lb4 img {
	left: 51%;
	width: 2%;
}
#lb5 img {
	left: 53%;
	width: 2%;
}
/* 左右送りボタン */
.pb {
    display: block;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0%;
    margin: 0px;
    width: 30%;
    height: 35vw;
    padding: 0px;
}
.nb {
	display: block;
	opacity: 0;
	position: absolute;
	top: 0px;
    width: 30%;
    height: 35vw;
	right: 0%;
	margin: 0px;
	padding: 0px;
}
.pb:hover, .nb:hover {
	cursor: pointer;
}

#photos {
	position: absolute;
	width: 100%;
	height: auto; /*100%;*/
	opacity: 0;
	/*pointer-events: none;*/
	animation: flowSlides 40s infinite;
}
/* 個々のスライド・現スライド標示ボタン */
.pic {
    position: absolute;
    height: 37.5vw;
    width: 100%;
}
.pic img:nth-child(1) {
    width: 100%;
    height: auto;
    }

.pic img:nth-child(2) {
	position: absolute;
    width:2%;
    bottom: 0px;
    z-index: 50;
    }

/*表示スライドをphotosの中に横並びで一列に並べる*/
#photo1 { left: 0; }
#photo2 { left: 100%; }
#photo3 { left: 200%; }
#photo4 { left: 300%; }
#photo5 { left: 400%; }

/* 写真の下に現スライド標示ボタンを配置 */
#photo1 img:nth-child(2) {
    left: 45%;
}
#photo2 img:nth-child(2) {
	left: 47%;
}
#photo3 img:nth-child(2) {
	left: 49%;
}
#photo4 img:nth-child(2) {
	left: 51%;
}
#photo5 img:nth-child(2) {
	left: 53%;
}
/*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動*/
#r1:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#r2:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#r3:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#r4:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#r5:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
/* 左送りボタン */
#back1:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#back2:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#back3:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#back4:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#back5:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
/* 右送りボタン */
#next1:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#next2:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#next3:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#next4:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#next5:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
/* 初期スライドショー */
@keyframes flowSlides {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	15% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-100%; opacity:0; }
	25% { left:-100%; opacity:1; }
	35% { left:-100%; opacity:1; }
	40% { left:-100%; opacity:0; }
	40.01% { left:-200%; opacity:0; }
	45% { left:-200%; opacity:1; }
	55% { left:-200%; opacity:1; }
	60% { left:-200%; opacity:0; }
	60.01% { left:-300%; opacity:0; }
	65% { left:-300%; opacity:1; }
	75% { left:-300%; opacity:1; }
	80% { left:-300%; opacity:0; }
	80.01% { left:-400%; opacity:0; }
	85% { left:-400%; opacity:1; }
	95% { left:-400%; opacity:1; }
	100% { left:-400%; opacity:0; }
}
/* 各スライド向けスライドショー */
@keyframes flowSlides1 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	15% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-100%; opacity:0; }
	25% { left:-100%; opacity:1; }
	35% { left:-100%; opacity:1; }
	40% { left:-100%; opacity:0; }
	40.01% { left:-200%; opacity:0; }
	45% { left:-200%; opacity:1; }
	55% { left:-200%; opacity:1; }
	60% { left:-200%; opacity:0; }
	60.01% { left:-300%; opacity:0; }
	65% { left:-300%; opacity:1; }
	75% { left:-300%; opacity:1; }
	80% { left:-300%; opacity:0; }
	80.01% { left:-400%; opacity:0; }
	85% { left:-400%; opacity:1; }
	95% { left:-400%; opacity:1; }
	100% { left:-400%; opacity:0; }
}
@keyframes flowSlides2 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	15% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-100%; opacity:0; }
	25% { left:-100%; opacity:1; }
	35% { left:-100%; opacity:1; }
	40% { left:-100%; opacity:0; }
	40.01% { left:-200%; opacity:0; }
	45% { left:-200%; opacity:1; }
	55% { left:-200%; opacity:1; }
	60% { left:-200%; opacity:0; }
	60.01% { left:-300%; opacity:0; }
	65% { left:-300%; opacity:1; }
	75% { left:-300%; opacity:1; }
	80% { left:-300%; opacity:0; }
	80.01% { left:-400%; opacity:0; }
	85% { left:-400%; opacity:1; }
	95% { left:-400%; opacity:1; }
	100% { left:-400%; opacity:0; }
}
@keyframes flowSlides3 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	15% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-100%; opacity:0; }
	25% { left:-100%; opacity:1; }
	35% { left:-100%; opacity:1; }
	40% { left:-100%; opacity:0; }
	40.01% { left:-200%; opacity:0; }
	45% { left:-200%; opacity:1; }
	55% { left:-200%; opacity:1; }
	60% { left:-200%; opacity:0; }
	60.01% { left:-300%; opacity:0; }
	65% { left:-300%; opacity:1; }
	75% { left:-300%; opacity:1; }
	80% { left:-300%; opacity:0; }
	80.01% { left:-400%; opacity:0; }
	85% { left:-400%; opacity:1; }
	95% { left:-400%; opacity:1; }
	100% { left:-400%; opacity:0; }
}
@keyframes flowSlides4 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	15% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-100%; opacity:0; }
	25% { left:-100%; opacity:1; }
	35% { left:-100%; opacity:1; }
	40% { left:-100%; opacity:0; }
	40.01% { left:-200%; opacity:0; }
	45% { left:-200%; opacity:1; }
	55% { left:-200%; opacity:1; }
	60% { left:-200%; opacity:0; }
	60.01% { left:-300%; opacity:0; }
	65% { left:-300%; opacity:1; }
	75% { left:-300%; opacity:1; }
	80% { left:-300%; opacity:0; }
	80.01% { left:-400%; opacity:0; }
	85% { left:-400%; opacity:1; }
	95% { left:-400%; opacity:1; }
	100% { left:-400%; opacity:0; }
}
@keyframes flowSlides5 {
	0% { left:0px; opacity:0; }
	5% { left:0px; opacity:1; }
	15% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-100%; opacity:0; }
	25% { left:-100%; opacity:1; }
	35% { left:-100%; opacity:1; }
	40% { left:-100%; opacity:0; }
	40.01% { left:-200%; opacity:0; }
	45% { left:-200%; opacity:1; }
	55% { left:-200%; opacity:1; }
	60% { left:-200%; opacity:0; }
	60.01% { left:-300%; opacity:0; }
	65% { left:-300%; opacity:1; }
	75% { left:-300%; opacity:1; }
	80% { left:-300%; opacity:0; }
	80.01% { left:-400%; opacity:0; }
	85% { left:-400%; opacity:1; }
	95% { left:-400%; opacity:1; }
	100% { left:-400%; opacity:0; }
}

@media screen and (max-width : 1000px ){

/*スライダー全体のコンテナー*/
#stage {
    position: relative;
    height: 41vw;
    width: 100%;
    overflow: hidden;
    background-color: #FFFFFF;
}
/*全ラジオボタンを非表示に*/
#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {
	display: none;
}

/* 表示切換えボタンと表示位置 */
.circ img {
    position: absolute;
    cursor: pointer;
    bottom: 0px;
    opacity: 0.3;
    z-index: 50;
    padding: 0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}
#lb1 img {
	left: 37%;
	width: 6%;
}
#lb2 img {
	left: 42%;
	width: 6%;
}
#lb3 img {
	left: 47%;
	width: 6%;
}
#lb4 img {
	left: 52%;
	width: 6%;
}
#lb5 img {
	left: 57%;
	width: 6%;
}
/* 左右送りボタン */
.pb {
    display: block;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0%;
    margin: 0px;
    width: 30%;
    height: 35vw;
    padding: 0px;
}
.nb {
	display: block;
	opacity: 0;
	position: absolute;
	top: 0px;
    width: 30%;
    height: 35vw;
	right: 0%;
	margin: 0px;
	padding: 0px;
}
.pb:hover, .nb:hover {
	cursor: pointer;
}

#photos {
	position: absolute;
	width: 100%;
	height: auto; /*100%;*/
	opacity: 0;
	/*pointer-events: none;*/
	animation: flowSlides 40s infinite;
}
/* 個々のスライド・現スライド標示ボタン */
.pic {
    position: absolute;
    height: 41vw;
    width: 100%;
}
.pic img:nth-child(1) {
    width: 100%;
    height: auto;
    }

.pic img:nth-child(2) {
	position: absolute;
    width:6%;
    bottom: 0px;
    z-index: 50;
    }

/*表示スライドをphotosの中に横並びで一列に並べる*/
#photo1 { left: 0; }
#photo2 { left: 100%; }
#photo3 { left: 200%; }
#photo4 { left: 300%; }
#photo5 { left: 400%; }

/* 写真の下に現スライド標示ボタンを配置 */
#photo1 img:nth-child(2) {
    left: 37%;
}
#photo2 img:nth-child(2) {
	left: 42%;
}
#photo3 img:nth-child(2) {
	left: 47%;
}
#photo4 img:nth-child(2) {
	left: 52%;
}
#photo5 img:nth-child(2) {
	left: 57%;
}


}