@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: 80%;
    height: 27vh;
    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: 3rem;
  z-index: 50;
  position: absolute;
  display: flex;
  letter-spacing: 1rem;
}

#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: 64px;
	height: 30px;
/*	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: 64px 18px !important; }
    #kumo .inner div.flake2 {
		background-image: url(../../etc/image/Resize/kumo-02.png);
		background-size: 64px 28px !important; }
    #kumo .inner div.flake3 {
		background-image: url(../../etc/image/Resize/kumo-03.png);
		background-size: 64px 29px !important; }
    #kumo .inner div.flake4 {
		background-image: url(../../etc/image/Resize/kumo-04.png);
		background-size: 64px 27px !important; }
    #kumo .inner div.flake5 {
		background-image: url(../../etc/image/Resize/kumo-05.png);
		background-size: 64px 20px !important; }
    #kumo .inner div.flake6 {
		background-image: url(../../etc/image/Resize/kumo-03.png);
		background-size: 64px 29px !important; }
    #kumo .inner div.flake7 {
		background-image: url(../../etc/image/Resize/kumo-03.png);
		background-size: 64px 29px !important; }
    #kumo .inner div.flake8 {
		background-image: url(../../etc/image/Resize/kumo-01.png);
		background-size: 64px 18px !important; }
    #kumo .inner div.flake9 {
		background-image: url(../../etc/image/Resize/kumo-02.png);
		background-size: 64px 28px !important; }
    #kumo .inner div.flake10 {
		background-image: url(../../etc/image/Resize/kumo-04.png);
		background-size: 64px 27px !important; }
    #kumo .inner div.flake11 {
		background-image: url(../../etc/image/Resize/kumo-06.png);
		background-size: 64px 29px !important; }


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

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

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

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

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

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

.flake1 {
top:10px
  -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: 140px;
  -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:100%;
  -webkit-animation-duration: 7.9s;
          animation-duration: 7.9s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s; }

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

.flake10 {
	top:80%;
  -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: 1.4s;
          animation-delay:	1.4s; }*/