@charset "utf-8";

/* 花びら　ひらひら */
/*
pink ... #ffc0cb
*/

/*
  html,body{overflow-x:hidden;}
*/

.hana{
  position:absolute;height:0;width:0;
  border: 10px solid pink;
  border-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;}
.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);
}

/* 色 */

/* 緑 */
.hanaG{
  border-color: green;
}
.hanaG::after{
  border-color: green;
}

/* 青 */
.hanaB{
  border-color: blue;
}
.hanaB::after{
  border-color: blue;
}


/* 色味ココカラ */
/* デフォルト (ピンク) */
.t1{border-color:#fff3f5;}
.t2{border-color:#ffe2e7;}
.t3{border-color:#ffd1d9;}
.t4{border-color:#ffc0cb;}
.t5{border-color:#ffafbd;}
.t6{border-color:#ffafbd;}

.t1::after{border-color:#fff3f5;}
.t2::after{border-color:#ffe2e7;}
.t3::after{border-color:#ffd1d9;}
.t4::after{border-color:#ffc0cb;}
.t5::after{border-color:#ffafbd;}
.t6::after{border-color:#ffafbd;}

/* 緑 */
.tG1{border-color:#0bff47;}
.tG2{border-color:#6dd888;}
.tG3{border-color:#62a873;}
.tG4{border-color:#49ec71;}
.tG5{border-color:#0ded44;}
.tG6{border-color:#72ee90;}

.tG1::after{border-color:#0bff47;}
.tG2::after{border-color:#6dd888;}
.tG3::after{border-color:#62a873;}
.tG4::after{border-color:#49ec71;}
.tG5::after{border-color:#0ded44;}
.tG6::after{border-color:#72ee90;}

/* 青 */
.tB1{border-color:#3d3ea0;}
.tB2{border-color:#3e3ee6;}
.tB3{border-color:#3b3b9d;}
.tB4{border-color:#4c4cef;}
.tB5{border-color:#2d47c9;}
.tB6{border-color:#3733dc;}

.tB1::after{border-color:#3d3ea0;}
.tB2::after{border-color:#3e3ee6;}
.tB3::after{border-color:#3b3b9d;}
.tB4::after{border-color:#4c4cef;}
.tB5::after{border-color:#2d47c9;}
.tB6::after{border-color:#3733dc;}
/* 色味ココマデ */


/* ヒラヒラココカラ */
.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;}

@-webkit-keyframes v1{
  from{-webkit-transform: rotate(0deg) scale(1);}
  50%{-webkit-transform: rotate(270deg) scale(1);}
  to{-webkit-transform: rotate(1deg) scale(1);}
}
@-webkit-keyframes v2{
  from{-webkit-transform: rotate(-90deg) scale(.9);}
  50%{-webkit-transform: rotate(-360deg) scale(.9);}
  to{-webkit-transform: rotate(-89deg) scale(.9);}
}
@-webkit-keyframes v3{
  from{-webkit-transform: rotate(30deg) scale(.8);}
  50%{-webkit-transform: rotate(300deg) scale(.8);}
  to{-webkit-transform: rotate(29deg) scale(.8);}
}
@-webkit-keyframes v4{
  from{-webkit-transform: rotate(-120deg) scale(.7);}
  50%{-webkit-transform: rotate(-390deg) scale(.7);}
  to{-webkit-transform: rotate(-119deg) scale(.7);}
}
@-webkit-keyframes v5{
  from{-webkit-transform: rotate(60deg) scale(.6);}
  50%{-webkit-transform: rotate(330deg) scale(.6);}
  to{-webkit-transform: rotate(59deg) scale(.6);}
}
@-webkit-keyframes v6{
  from{-webkit-transform: rotate(-150deg) scale(.5);}
  50%{-webkit-transform: rotate(-420deg) scale(.5);}
  to{-webkit-transform: rotate(-149deg) scale(.5);}
}
/* ヒラヒラココマデ */


@keyframes v1{
  from{transform: rotate(0deg) scale(1);}
  50%{transform: rotate(270deg) scale(1);}
  to{transform: rotate(1deg) scale(1);}
}
@keyframes v2{
  from{transform: rotate(-90deg) scale(.9);}
  50%{transform: rotate(-360deg) scale(.9);}
  to{transform: rotate(-89deg) scale(.9);}
}
@keyframes v3{
  from{transform: rotate(30deg) scale(.8);}
  50%{transform: rotate(300deg) scale(.8);}
  to{transform: rotate(29deg) scale(.8);}
}
@keyframes v4{
  from{transform: rotate(-120deg) scale(.7);}
  50%{transform: rotate(-390deg) scale(.7);}
  to{transform: rotate(-119deg) scale(.7);}
}
@keyframes v5{
  from{transform: rotate(60deg) scale(.6);}
  50%{transform: rotate(330deg) scale(.6);}
  to{transform: rotate(59deg) scale(.6);}
}
@keyframes v6{
  from{transform: rotate(-150deg) scale(.5);}
  50%{transform: rotate(-420deg) scale(.5);}
  to{transform: rotate(-149deg) scale(.5);}
}



.overwrap {
  position: absolute;
  top:0px;

  /* ↓absoluteでセンタリングをかけるからくり */
  left:0;
  right:0;
  margin:0 auto;

/*
 opacity: 0.5;
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
*/
}

#leafFall {
/*  width:500px;*/
  height:500px;
}