@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%;
    margin: auto;
    height: 180px;
    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;
    padding: 35px 0;
    font-weight: 100 !important; }

#kumo {
  color: #fff;
  background: #142744; }
#kumo .inner div {
	position: absolute;
	display: block;
	width: 128px;
	height: 60px;
	background-repeat: no-repeat;
}
    #kumo .inner div.flake1 {
		background-image: url(../../etc/image/Resize/kumo-01.png);
		background-size: 128px 36px !important; }
    #kumo .inner div.flake2 {
		background-image: url(../../etc/image/Resize/kumo-02.png);
		background-size: 128px 56px !important; }
    #kumo .inner div.flake3 {
		background-image: url(../../etc/image/Resize/kumo-03.png);
		background-size: 128px 58px !important; }
    #kumo .inner div.flake4 {
		background-image: url(../../etc/image/Resize/kumo-04.png);
		background-size: 128px 57px !important; }
    #kumo .inner div.flake5 {
		background-image: url(../../etc/image/Resize/kumo-05.png);
		background-size: 128px 41px !important; }
    #kumo .inner div.flake6 {
		background-image: url(../../etc/image/Resize/kumo-06.png);
		background-size: 128px 58px !important; }
    #kumo .inner div.flake7 {
		background-image: url(../../etc/image/Resize/kumo-01.png);
		background-size: 128px 36px !important; }

#sakura {
  color: #92405d;
/*  margin-bottom: 100px;*/ }

#sakura .inner div {
	position: absolute;
	display: block;
	width: 10px;
	height: 15px;
	background-image: url(../../etc/image/sakura.png);
	background-repeat: no-repeat;
}
    #sakura .inner div.flake2 {
      background-size: 5px 6px !important; }
    #sakura .inner div.flake4 {
      background-size: 5px 6px !important; }
    #sakura .inner div.flake6 {
      background-size: 5px 6px !important; }
    #sakura .inner div.flake8 {
      background-size: 5px 6px !important; }
    #sakura .inner div.flake10 {
      background-size: 5px 6px !important; }
    #sakura .inner div.flake12 {
      background-size: 5px 6px !important; }
    #sakura .inner div.flake14 {
      background-size: 5px 6px !important; }

#snow {
  color: #fff;
  background: #142744; }
  #snow .inner div {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background: #fff; }
    #snow .inner div.flake2 {
      width: 2px;
      height: 2px; }
    #snow .inner div.flake4 {
      width: 2px;
      height: 2px; }
    #snow .inner div.flake6 {
      width: 2px;
      height: 2px; }
    #snow .inner div.flake8 {
      width: 2px;
      height: 2px; }

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

  50% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 1; }

  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    opacity: 0.3; } }

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

  50% {
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
    opacity: 1; }

  100% {
    -webkit-transform: translateY(160px);
            transform: translateY(160px);
    opacity: 0.3; } }

.flake1 {
  left: 0px;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s; }

.flake2 {
  left: 20px;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

.flake3 {
  left: 50px;
  -webkit-animation-duration: 2.9s;
          animation-duration: 2.9s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }

.flake4 {
  left: 80px;
  -webkit-animation-duration: 2.4s;
          animation-duration: 2.4s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }

.flake5 {
  left: 110px;
  -webkit-animation-duration: 2.4s;
          animation-duration: 2.4s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }

.flake6 {
  left: 140px;
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s; }

.flake7 {
  left: 190px;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s; }

.flake8 {
  left: 200px;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s; }

.flake9 {
  left: 230px;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s; }

.flake10 {
  left: 260px;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

.flake11 {
  left: 290px;
  -webkit-animation-duration: 2.9s;
          animation-duration: 2.9s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }

.flake12 {
  left: 320px;
  -webkit-animation-duration: 2.4s;
          animation-duration: 2.4s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }

.flake13 {
  left: 350px;
  -webkit-animation-duration: 2.4s;
          animation-duration: 2.4s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }

.flake14 {
  left: 380px;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s; }