@Charset "UTF-8";

/* #globalnav ul li:nth-of-type(3)>a {
	border-bottom: 3px solid white;
	background-color: white;
} */

p:first-of-type {
	background-color: white;
	
}

#main,main {
	display: block;
	margin-top: 0;
	padding-top: 0;
	/* background-color: gray; */
}

footer {
	text-align: center;
}

/* clearfixの記述 */
.clearfix {
	*zoom: 1;
}
.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
	line-height: 0;
}
.clearfix:after {
	clear: both;
}

#stage {
	position: relative;
	background: #000 url(./images/plum001.jpg) no-repeat;
	width: 900px;
	height:250px;
	margin: 0 0;
	padding: 0;
}
#photo1,#photo2,#photo3,#photo4,#photo5 {
	position: absolute;
}
#photo0,#photo1,#photo2,#photo3,#photo4,#photo5 {
	float: left;
	width: 900px;
	height: 250px;
	left:900px;
	-moz-animation: slideanim 20s infinite;
	-webkit-animation: slideanim 20s infinite;
	animation: slideanim 20s infinite;
}

#photo1 {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 {
	-moz-animation-delay: 4s;
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}
#photo3 {
	-moz-animation-delay: 8s;
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
}
#photo4 {
	-moz-animation-delay: 12s;
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo5 {
	-moz-animation-delay: 16s;
	-webkit-animation-delay: 16s;
	animation-delay: 16s;
}

#frame {
width: 900px;
height: 250px;
position: relative;
overflow: hidden;
background: #000 url(./images/plum001.jpg) no-repeat;
}
@-webkit-keyframes slideanim {
	0% { left:100%; }
	5% { left:0%; }
	20% { left:0%; }
	25% { left:-100%; }
	100% { left:-100%; }
}
@-moz-keyframes slideanim {
	0% { left:100%; }
	5% { left:0%; }
	20% { left:0%; }
	25% { left:-100%; }
	100% { left:-100%; }
}
@keyframes slideanim {
	0% { left:100%; }
	5% { left:0%; }
	20% { left:0%; }
	25% { left:-100%; }
	100% { left:-100%; }
}


#back2, input#next1 {
	display: none;
}

#allstage {
	position:relative;
}

/*ボタン領域の設定*/
.cover_left, .cover_right {
	position:absolute;
	top: 100;
	width:450px;
	height:250px;
	/* display:none; */
	cursor:pointer;
	z-index:100;
}
.cover_left {
	left: 0px;
	/* border: 1px solid black; */
	background-color: rgba(176, 176, 176, 0);
}
.cover_right {
	left: 450px;
	/* border: 1px solid black; */
	background-color: rgba(196, 176, 176, 0);
}
/*ボタン領域内のボタン文字（＜、＞）の設定*/
.cover_left span, .cover_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 32px;
	font-weight: bold;
	opacity:0;
	top: 120px;
}
.cover_left span {
	left: 200px;
}
.cover_right span {
	left: 200px;
}
/*ボタン領域hover時文字の設定*/
.cover_right:hover > span,.cover_left:hover > span {
	opacity:1;
	color:#EEE;
	text-shadow:3px 3px 2px black;
}
#back2:checked ~  div #photo1 {
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
#next1:checked ~  div #photo1 {
	-moz-animation-play-state: running;
	-webkit-animation-play-state: running;
	animation-play-state: running;
}
#back2:checked ~  div #photo2 {
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
#next1:checked ~  div #photo2 {
	-moz-animation-play-state: running;
	-webkit-animation-play-state: running;
	animation-play-state: running;
}
#back2:checked ~  div #photo3 {
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
#next1:checked ~  div #photo3 {
	-moz-animation-play-state: running;
	-webkit-animation-play-state: running;
	animation-play-state: running;
}
#back2:checked ~  div #photo4 {
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
#next1:checked ~  div #photo4 {
	-moz-animation-play-state: running;
	-webkit-animation-play-state: running;
	animation-play-state: running;
}
#back2:checked ~  div #photo5 {
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
#next1:checked ~  div #photo5 {
	-moz-animation-play-state: running;
	-webkit-animation-play-state: running;
	animation-play-state: running;
}

