body {
	overflow-x: hidden;
}

.hana{
	/*position:absolute;*/
	position:fixed;
	height:0;
	width:0;
	border: 10px solid pink;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	background-color: pink;
}
.hana::after{
	content:"";
	display:block;
	position:absolute;
	top:-7px;
	left:-7px;
	height:0;
	width:0;
	border: 10px solid pink;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	-webkit-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);
	background-color: pink;
}
.type1{-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
.type2{-webkit-transform: rotate(60deg);-ms-transform: rotate(60deg);transform: rotate(60deg);}
.type3{-webkit-transform: rotate(120deg);-ms-transform: rotate(120deg);transform: rotate(120deg);}
.type4{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
.type5{-webkit-transform: rotate(240deg);-ms-transform: rotate(240deg);transform: rotate(240deg);}
.type6{-webkit-transform: rotate(300deg);-ms-transform: rotate(300deg);transform: rotate(300deg);}

.type1{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.type2{-webkit-transform: scale(.9);-ms-transform: scale(.9);transform: scale(.9);}
.type3{-webkit-transform: scale(.8);-ms-transform: scale(.8);transform: scale(.8);}
.type4{-webkit-transform: scale(.7);-ms-transform: scale(.7);transform: scale(.7);}
.type5{-webkit-transform: scale(.6);-ms-transform: scale(.6);transform: scale(.6);}
.type6{-webkit-transform: scale(.5);-ms-transform: scale(.5);transform: scale(.5);}

.type1{border-color:#ffecf7;}
.type2{border-color:#ffdbf0;}
.type3{border-color:#febae2;}
.type4{border-color:#fea9db;}
.type5{border-color:#fd77c6;}
.type6{border-color:#fd66bf;}
.type1::after{border-color:#ffecf7;}
.type2::after{border-color:#ffdbf0;}
.type3::after{border-color:#febae2;}
.type4::after{border-color:#fea9db;}
.type5::after{border-color:#fd77c6;}
.type6::after{border-color:#fd66bf;}

.type1{background-color:#ffecf7;}
.type2{background-color:#ffdbf0;}
.type3{background-color:#febae2;}
.type4{background-color:#fea9db;}
.type5{background-color:#fd77c6;}
.type6{background-color:#fd66bf;}
.type1::after{background-color:#ffecf7;}
.type2::after{background-color:#ffdbf0;}
.type3::after{background-color:#febae2;}
.type4::after{background-color:#fea9db;}
.type5::after{background-color:#fd77c6;}
.type6::after{background-color:#fd66bf;}

.type1{animation:v1 6s infinite;}
.type2{animation:v2 6s infinite;}
.type3{animation:v2 5s infinite;}
.type4{animation:v2 5s infinite;}
.type5{animation:v2 4s infinite;}
.type6{animation:v2 4s infinite;}


.y1{-webkit-animation:v1 10s infinite;animation:v1 10s infinite;}
.y2{-webkit-animation:v2 10s infinite;animation:v2 10s infinite;}
.y3{-webkit-animation:v3 9s infinite;animation:v3 9s infinite;}
.y4{-webkit-animation:v4 9s infinite;animation:v4 9s infinite;}
.y5{-webkit-animation:v5 8s infinite;animation:v5 8s infinite;}
.y6{-webkit-animation:v6 8s infinite;animation:v6 8s infinite;}



@keyframes v1{
	from{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	to{transform: rotate(1deg);}
}
@keyframes v2{
	from{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	to{transform: rotate(-89deg);}
}
@keyframes v3{
	from{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	to{transform: rotate(1deg);}
}
@keyframes v4{
	from{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	to{transform: rotate(-89deg);}
}
@keyframes v5{
	from{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	to{transform: rotate(1deg);}
}
@keyframes v6{
	from{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	to{transform: rotate(-89deg);}
}