@charset "utf-8";


div#all{
  position: relative;
}
div#all::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url(../images/back.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  animation: back linear 3s forwards;
}
@keyframes back {
  0.0% {background-position: 50% 0%;}
  100% {background-position: 50% 50%;}
}

div#wrap{
  position: relative;
  z-index: 11;
}

header h1 img{
  position: relative;
  z-index: 100;
  max-width: 80%;
  transform: scale(0);
  animation-name: logo;
  animation-timing-function: ease-out;
  animation-duration: 0.8s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
@keyframes logo {
  0.0% {transform: scale(0);}
  100% {transform: scale(1);}
}



div#fix{
  position: fixed;
  width: 100%;
  height: 100vh;
}

.rain-box{
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.rain{
  position: relative;
  left: 0px;
  width: 10px;
  height: 100vh;
  transform: rotate(5deg);
}
/* 雨を 100 本生成 */
.rain span{
  position: absolute;
  top: -300px;
  width: 4px;
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
  animation: fall linear infinite;
}
/* 雨が斜めに落ちる */
@keyframes fall {
  0.0% {transform: translate(0,0)}
  100% {transform: translate(-50px, 1500px)}
}



/* お札が降ってくる */
.money-box1,.money-box2,.money-box3 {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transform: translate(0,0);
}
.money-box2,.money-box3 {
  position: absolute;
  top: 0;
  z-index: -100;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transform: translate(0,0);
}

.bill {
  position: absolute;
  top: -100vh;
  left: -10%;
  width: 120%;
  height: 100vh;
  background-size: cover;
  background-position: 50% 100%;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.money-box3 .bill{
  background-image: url(../images/logo_header3.png);

  animation-name: sway1;
  animation-delay: 0s;
  animation-duration: 2.8s;
}
.money-box2 .bill{
  background-image: url(../images/logo_header2.png);

  animation-name: sway2;
  animation-delay: 1s;
  animation-duration: 2.3s;
}
.money-box1 .bill{
  background-image: url(../images/logo_header1.png);

  animation-name: sway2;
  animation-delay: 1.5s;
  animation-duration: 1.8s;
}
/* 落下 + ゆらゆら */
@keyframes sway1 {
  0% { transform: translate(0px, -5vh) rotate(2deg); }
  25% { transform: translate(800px, 15vh) rotate(-3deg); }
  50% { transform: translate(-600px, 35vh) rotate(0deg); }
  75% { transform: translate(300px, 55vh) rotate(-2deg); }
  100% { transform: translate(0px, 75vh) rotate(0deg); }
}
@keyframes sway2 {
  0% { transform: translate(0px, -5vh) rotate(2deg); }
  25% { transform: translate(-800px, 15vh) rotate(-3deg); }
  50% { transform: translate(600px, 35vh) rotate(0deg); }
  75% { transform: translate(-300px, 55vh) rotate(-2deg); }
  100% { transform: translate(0px, 75vh) rotate(0deg); }
}
@keyframes sway3 {
  0% { transform: translate(0px, -5vh) rotate(2deg); }
  25% { transform: translate(800px, 15vh) rotate(-3deg); }
  50% { transform: translate(-600px, 35vh) rotate(0deg); }
  75% { transform: translate(300px, 55vh) rotate(-2deg); }
  100% { transform: translate(0px, 75vh) rotate(0deg); }
}

/* 雷 */
div#flash{
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: 99;
  background-color: #fff0;

  animation-name: flash;
  animation-duration: 60s;
  animation-iteration-count: infinite;
}
@keyframes flash {
  0%{background-color: #fff0;}
  0%{background-color: #fff0;}
  2%{background-color: #fff0;}
  2.00%{background-color: #fff0;}
  2.01%{background-color: #fff6;}
  2.05%{background-color: #fff0;}
  2.06%{background-color: #fff0;}
  2.50%{background-color: #fff0;}
  2.51%{background-color: #fff6;}
  2.55%{background-color: #fff0;}
  2.56%{background-color: #fff0;}
  8.00%{background-color: #fff0;}
  8.01%{background-color: #fff4;}
  8.05%{background-color: #fff0;}
  8.06%{background-color: #fff0;}
  20.00%{background-color: #fff0;}
  20.01%{background-color: #fff6;}
  20.05%{background-color: #fff0;}
  20.06%{background-color: #fff0;}
  40.00%{background-color: #fff0;}
  40.01%{background-color: #fff4;}
  40.05%{background-color: #fff0;}
  40.06%{background-color: #fff0;}
  40.50%{background-color: #fff0;}
  40.51%{background-color: #fff6;}
  40.55%{background-color: #fff0;}
  40.56%{background-color: #fff0;}
  60.00%{background-color: #fff0;}
  60.01%{background-color: #fff4;}
  60.05%{background-color: #fff0;}
  60.06%{background-color: #fff0;}
  70.00%{background-color: #fff0;}
  70.01%{background-color: #fff6;}
  70.05%{background-color: #fff0;}
  70.06%{background-color: #fff0;}
  85.00%{background-color: #fff0;}
  85.01%{background-color: #fff6;}
  85.05%{background-color: #fff0;}
  85.06%{background-color: #fff0;}
  85.50%{background-color: #fff0;}
  85.51%{background-color: #fff4;}
  85.55%{background-color: #fff0;}
  85.56%{background-color: #fff0;}
  100%{background-color: #fff0;}
}

/* キャラクター */
div#chara{
  position: relative;
}
div#chara div{
  position: absolute;
  top: 50px;
  left: -50%;
  z-index: 99;
  width: 20%;
  height: 80vh;
  transform: translate(-50%);
  transform-origin: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}
div#chara div#chara01{
  animation-name: chara01;
  animation-duration: 1.8s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  background-image: url(../images/chara01.png);
}
@keyframes chara01 {
  0% { left: -50%; }
  100% { left: 70%; }
}
div#chara div#chara02{
  animation-name: chara02;
  animation-duration: 1.8s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  background-image: url(../images/chara02.png);
}
@keyframes chara02 {
  0% { left: -50%; }
  100% { left: 56%; }
}
div#chara div#chara03{
  animation-name: chara03;
  animation-duration: 1.8s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  background-image: url(../images/chara03.png);
}
@keyframes chara03 {
  0% { left: -50%; }
  100% { left: 42.5%; }
}
div#chara div#chara04{
  animation-name: chara04;
  animation-duration: 1.8s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  background-image: url(../images/chara04.png);
}
@keyframes chara04 {
  0% { left: -50%; }
  100% { left: 28%; }
}





/* ########### 599px以下 ########### */
@media (max-width: 599px) {



  div#all::after{
    height: 100%;
    position: fixed;
  }

  main{
    margin: -100px 0 0 0;
  }

  .rain-box{
    left: 5vw;
  }

  div#fix{
    height: 100vh;
  }

  div#chara{
    left: -10vw;
  }

  div#chara div#chara01 , div#chara div#chara02 , div#chara div#chara03 , div#chara div#chara04 {
    transform: scale(2);
  }

}



/* ########### 600px以上～768px以下 ########### */
@media (min-width: 600px) and (max-width: 768px) {}



/* ########### 769px以上 ########### */
@media (min-width: 769px) {}



/* ########### 1000px以上 ########### */
@media (min-width: 1000px) {}