@charset "UTF-8";
/* ===================================================================

common style

=================================================================== */
@import url(https://fonts.googleapis.com/css?family=Raleway:700,100,400,300);
body {
  font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

/* ===================================================================

content style

=================================================================== */
section {
  text-align: center; }
  section .inner {
    width: 420px;
    margin: auto;
    height: 22vh;
    position: relative;
/*    overflow: hidden; */
}
    section .inner div {
      opacity: 0;
      -webkit-transform-origin: 0px 0px;
          -ms-transform-origin: 0px 0px;
              transform-origin: 0px 0px;
      -webkit-animation-name: Drop;
              animation-name: Drop;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }

  section h2 {
	font-family: 'Raleway', sans-serif;
    font-size: 4em;
    z-index: 50;
    position: absolute;
    display: flex;
    font-weight: normal;
}

#kumo {
    color: #fff;
    background: linear-gradient(270deg, #00a3af, #2792c3, #2a4073, #a0d8ef);
    background-size: 500% 500%;
    animation: AnimationName 60s infinite;
    -webkit-animation: AnimationName 60s infinite;
    -moz-animation: AnimationName 60s infinite;
    -o-animation: AnimationName 60s infinite;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#kumo .inner div {
	position: absolute;
	display: block;
	width: 96px;
	height: 45px;
/*	background-image: url(../../etc/image/sakura.png);
*/	background-repeat: no-repeat;
}
    #kumo .inner div.flake1 {
		background-image: url(../../etc/image/Resize/kumo-01.png);
		background-size: 96px 25px !important; }
    #kumo .inner div.flake2 {
		background-image: url(../../etc/image/Resize/kumo-02.png);
		background-size: 96px 42px !important; }
    #kumo .inner div.flake3 {
		background-image: url(../../etc/image/Resize/kumo-03.png);
		background-size: 96px 44px !important; }
    #kumo .inner div.flake4 {
		background-image: url(../../etc/image/Resize/kumo-06.png);
		background-size: 96px 50px !important; }
    #kumo .inner div.flake5 {
		background-image: url(../../etc/image/Resize/kumo-05.png);
		background-size: 96px 30px !important; }
    #kumo .inner div.flake6 {
		background-image: url(../../etc/image/Resize/kumo-03.png);
		background-size: 96px 43px !important; }
    #kumo .inner div.flake7 {
		background-image: url(../../etc/image/Resize/kumo-04.png);
		background-size: 96px 43px !important; }
    #kumo .inner div.flake8 {
		background-image: url(../../etc/image/Resize/kumo-01.png);
		background-size: 96px 27px !important; }
    #kumo .inner div.flake9 {
		background-image: url(../../etc/image/Resize/kumo-02.png);
		background-size: 96px 42px !important; }
    #kumo .inner div.flake10 {
		background-image: url(../../etc/image/Resize/kumo-04.png);
		background-size: 96px 41px !important; }
    #kumo .inner div.flake11 {
		background-image: url(../../etc/image/Resize/kumo-06.png);
		background-size: 96px 39px !important; }


@-webkit-keyframes Drop {
  0% {
    -webkit-transform: translateX(390px);
            transform: translateX(390px);
    opacity: 0.3; } 

  50% {
    -webkit-transform: translateX(195px);
            transform: translateX(195px);
    opacity: 0.9; }

  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0; }
}

@keyframes Drop {
  0% {
    -webkit-transform: translateX(390px);
            transform: translateX(390px);
    opacity: 0.3; }

  50% {
    -webkit-transform: translateX(195px);
            transform: translateX(195px);
    opacity: 0.9; }

  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0; }
 }

.flake1 {
top:0px
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s; }

.flake2 {
  top: 40px;
  -webkit-animation-duration: 4.7s;
          animation-duration: 4.7s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

.flake3 {
  top: 20px;
  -webkit-animation-duration:4.9s;
          animation-duration: 4.9s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s; }

.flake4 {
  top: 100%;
  -webkit-animation-duration: 4.4s;
          animation-duration: 4.4s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }

.flake5 {
  top: 160px;
  -webkit-animation-duration: 5.4s;
          animation-duration:5.4s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }

.flake6 {
  top: 135px;
  -webkit-animation-duration: 8.2s;
          animation-duration: 8.2s;
  -webkit-animation-delay: 5.2s;
          animation-delay: 5.2s; }

.flake7 {
  top: 155px;
  -webkit-animation-duration: 6.7s;
          animation-duration: 6.7s;
  -webkit-animation-delay: 6.2s;
          animation-delay: 6.2s; }

.flake8 {
	top:66%;
  -webkit-animation-duration: 7.9s;
          animation-duration: 7.9s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }

.flake9 {
	top:15%;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s; 
  -webkit-animation-delay: 3.9s;
          animation-delay: 3.9s; }

.flake10 {
	top:105%;
  -webkit-animation-duration: 4.7s;
          animation-duration: 4.7s;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s; }

.flake11 {
	top:70%;
  -webkit-animation-duration: 9.9s;
          animation-duration: 9.9s;
  -webkit-animation-delay: 3s;
          animation-delay:	3s; }