/* 花びら */
.petals{
	position:absolute;
	width:100%;
	/*max-width:1920px;*/
	min-width:1100px;
	margin:0px auto;
	height:3300px;
	overflow:hidden;
	visibility:hidden;
}
.petals > .pane{
	visibility:hidden;
}
.petal{
	position:absolute;
	display:none;
	top:0px;
	z-index:1000;
	visibility:visible;
}
.petal.left1{
	position:absolute;
	left:-390px;
}
.petal.left2{
	position:absolute;
	left:-290px;
}
.petal.left3{
	position:absolute;
	left:-190px;
}
.petal.left4{
	position:absolute;
	left:-90px;
}

.petal.right1{
	right:-90px;
}
.petal.right2{
	right:-190px;
}
.petal.right3{
	right:-290px;
}
.petal.right4{
	right:-390px;
}

/* 落下するアニメーション */
.petal.p1{
	-webkit-animation: petalfailn 18000ms infinite linear forwards;
	animation: petalfailn 18000ms infinite linear forwards;
}
.petal.p2{
	-webkit-animation: petalfailn 20000ms infinite linear forwards;
	animation: petalfailn 20000ms infinite linear forwards;
}
.petal.p3{
	-webkit-animation: petalfailn 30000ms infinite linear forwards;
	animation: petalfailn 30000ms infinite linear forwards;
}
.petal.p4{
	-webkit-animation: petalfailn 25000ms infinite linear forwards;
	animation: petalfailn 25000ms infinite linear forwards;
}
.petal.p5{
	-webkit-animation: petalfailn 23000ms infinite linear forwards;
	animation: petalfailn 23000ms infinite linear forwards;
}
.petal.p6{
	-webkit-animation: petalfailn 21000ms infinite linear forwards;
	animation: petalfailn 21000ms infinite linear forwards;
}
.petal.p7{
	-webkit-animation: petalfailn 28000ms infinite linear forwards;
	animation: petalfailn 28000ms infinite linear forwards;
}
.petal.p8{
	-webkit-animation: petalfailn 19000ms infinite linear forwards;
	animation: petalfailn 19000ms infinite linear forwards;
}

@-webkit-keyframes petalfailn{
	0%{
		-webkit-transform: translate(0px,0px);
	}
	80%{
		opacity:0.9;
	}
	100%{
		-webkit-transform: translate(0px,3300px);
		opacity:0;
	}
}
@keyframes petalfailn{
	0%{
		transform: translate(0px,0px);
	}
	80%{
		opacity:0.9;
	}
	100%{
		transform: translate(0px,3300px);
		opacity:0;
	}
}

/* 左右に揺れるアニメーション */
.petal.p1 > img{
	-webkit-animation: petalmove 5000ms infinite linear;
	animation: petalmove 5000ms infinite linear;
}
.petal.p2 > img{
	-webkit-animation: petalmove2 7000ms infinite linear;
	animation: petalmove2 7000ms infinite linear;
}
.petal.p3 > img{
	-webkit-animation: petalmove 4000ms infinite linear;
	animation: petalmove 4000ms infinite linear;
}
.petal.p4 > img{
	-webkit-animation: petalmove2 10000ms infinite linear;
	animation: petalmove2 10000ms infinite linear;
}
.petal.p5 > img{
	-webkit-animation: petalmove 9000ms infinite linear;
	animation: petalmove 9000ms infinite linear;
}
.petal.p6 > img{
	-webkit-animation: petalmove2 7000ms infinite linear;
	animation: petalmove2 7000ms infinite linear;
}
.petal.p7 > img{
	-webkit-animation: petalmove 6000ms infinite linear;
	animation: petalmove 6000ms infinite linear;
}
.petal.p8 > img{
	-webkit-animation: petalmove2 8000ms infinite linear;
	animation: petalmove2 8000ms infinite linear;
}
@-webkit-keyframes petalmove{
	0%{
		transform: rotateY(0deg) rotateX(0deg) ;
		opacity:0.5;
	}
	25%{
		transform: rotateY(90deg) rotateX(90deg) translate(30px,0px);
	}
	50%{
		transform: rotateY(180deg) rotateX(180deg) translate(40px,0px);
		opacity:1;
	}
	75%{
		transform: rotateY(270deg) rotateX(270deg) translate(30px,0px);
	}
	100%{
		transform: rotateY(360deg) rotateX(360deg) ;
		opacity:0.5;
	}
}
@keyframes petalmove{
	0%{
		transform: rotateY(0deg) rotateX(0deg) ;
		opacity:0.5;
	}
	25%{
		transform: rotateY(90deg) rotateX(90deg) translate(30px,0px);
	}
	50%{
		transform:  rotateY(180deg) rotateX(180deg) translate(40px,0px);
		opacity:1;
	}
	75%{
		transform: rotateY(270deg) rotateX(270deg) translate(30px,0px);
	}
	100%{
		transform: rotateY(360deg) rotateX(360deg);
		opacity:0.5;
	}
}
@-webkit-keyframes petalmove2{
	0%{
		transform: rotateY(0deg) rotateX(0deg) translate(40px,0px);
		opacity:0.5;
	}
	25%{
		transform: rotateY(90deg) rotateX(90deg) translate(30px,0px);
	}
	50%{
		transform: rotateY(180deg) rotateX(180deg) translate(0px,0px);
		opacity:1;
	}
	75%{
		transform: rotateY(270deg) rotateX(270deg) translate(30px,0px);
	}
	100%{
		transform: rotateY(360deg) rotateX(360deg) translate(40px,0px);
		opacity:0.5;
	}
}
@keyframes petalmove2{
	0%{
		transform: rotateY(0deg) rotateX(0deg) translate(40px,0px);
		opacity:0.5;
	}
	25%{
		transform: rotateY(90deg) rotateX(90deg) translate(30px,0px);
	}
	50%{
		transform: rotateY(180deg) rotateX(180deg) translate(0px,0px);
		opacity:1;
	}
	75%{
		transform: rotateY(270deg) rotateX(270deg) translate(38px,0px);
	}
	100%{
		transform: rotateY(360deg) rotateX(360deg) translate(40px,0px);
		opacity:0.5;
	}
}