@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: 400px;
	margin: 0 auto 0 auto;
    height: 300px;
    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: 5em;
    padding: 125px 0;
    font-weight: 200 !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(150px);
    opacity: 1; }

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

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

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

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

.flake1 {
  left: 10px;
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s; }

.flake2 {
  left: 40px;
  -webkit-animation-duration: 4.7s;
          animation-duration: 4.7s;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s; }

.flake3 {
  left: 70px;
  -webkit-animation-duration: 4.9s;
          animation-duration: 4.9s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }

.flake4 {
  left: 100px;
  -webkit-animation-duration: 4.4s;
          animation-duration: 4.4s;
  -webkit-animation-delay: 2s;
          animation-delay: 2s; }

.flake5 {
  left: 130px;
  -webkit-animation-duration: 4.4s;
          animation-duration: 4.4s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }

.flake6 {
  left: 160px;
  -webkit-animation-duration: 4.2s;
          animation-duration: 4.2s;
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s; }

.flake7 {
  left: 190px;
  -webkit-animation-duration: 4.7s;
          animation-duration: 4.7s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; }

.flake8 {
  left: 220px;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s; }

.flake9 {
  left: 250px;
  -webkit-animation-duration: 4.2s;
          animation-duration: 4.2s; }

.flake10 {
  left: 280px;
  -webkit-animation-duration: 4.2s;
          animation-duration: 4.2s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

.flake11 {
  left: 310px;
  -webkit-animation-duration: 4.9s;
          animation-duration: 4.9s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }

.flake12 {
  left: 340px;
  -webkit-animation-duration: 3.7s;
          animation-duration: 3.7s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }

.flake13 {
  left: 370px;
  -webkit-animation-duration: 4.4s;
          animation-duration: 4.4s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }

.flake14 {
  left: 400px;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s; }