/*==================================================
ふわっ
===================================*/

/* fadeUp */

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadeUp2 {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.line-fukidashi.fadeUp2 {
  animation-name: fadeUpAnimePaused;
  animation-duration: 8s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;
  opacity: 0;
}
.fadeUp3 {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.line-fukidashi.fadeUp3 {
  animation-name: fadeUpAnimePaused;
  animation-duration: 8s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;
  opacity: 0;
}
.fadeUp4 {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-delay: 1.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.line-fukidashi.fadeUp4 {
  animation-name: fadeUpAnimePaused;
  animation-duration: 8s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;
  opacity: 0;
}
.fadeUp5 {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-delay: 1.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadeUpX {
  animation-name: fadeUpAnimeX;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUpAnimePaused {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeUpAnimeX {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes fadeUpAnimeXY {
  from {
    opacity: 0;
    top: calc(50% + 15px);
  }

  to {
    opacity: 1;
    top: calc(50% - 15px);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger,
.fadeUpTrigger2,
.fadeUpTrigger3,
.fadeUpTrigger4,
.fadeUpTrigger5 {
  opacity: 0;
  will-change: opacity;
}

/* =================================
MV吹き出しの表示・非表示
================================= */
.fukidashi-box > div {
}
.fukidashi-01 {
  animation: fukidashiYurayura5 33s linear infinite;
}
.fukidashi-02 {
  animation: fukidashiYurayura 33s linear infinite;
}
.fukidashi-03 {
  animation: fukidashiYurayura3 33s linear infinite;
}
.fukidashi-04 {
  animation: fukidashiYurayura7 33s linear infinite;
}
.fukidashi-05 {
  animation: fukidashiYurayura6 33s linear infinite;
}
.fukidashi-06 {
  animation: fukidashiYurayura2 33s linear infinite;
}
.fukidashi-07 {
  animation: fukidashiYurayura4 33s linear infinite;
}
/*
.fukidashi-03 {
  animation: fadeInOut3 30s infinite;  
}
.fukidashi-04 {
  animation: fadeInOut4 20s infinite;  
}
.fukidashi-06 {
  animation: fadeInOut6 30s infinite;  
}
.fukidashi-07 {
  animation: fadeInOut7 15s infinite;  
}
*/
@keyframes fukidashiYurayura {
  0% {
    transform: translateY(0);
  }
  12%{
    transform: translateY(-20px);
  }
  19%{
    transform: translateY(0);
  }
}
@keyframes fukidashiYurayura2 {
  15%{
    transform: translateY(0);
  }
  22%{
    transform: translateY(-20px);
  }
  30% {
    transform: translateY(0);
  }
}
@keyframes fukidashiYurayura3 {
  25% {
    transform: translateY(0);
  }
  32%{
    transform: translateY(-20px);
  }
  40% {
    transform: translateY(0);
  }
}
@keyframes fukidashiYurayura4 {
  34% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
}
@keyframes fukidashiYurayura5 {
  44% {
    transform: translateY(0);
  }
  58%{
    transform: translateY(-20px);
  }
  70%{
    transform: translateY(0);
  }
}
@keyframes fukidashiYurayura6 {
  65% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-20px);
  }
  85%{
    transform: translateY(0);
  }

}
@keyframes fukidashiYurayura7 {
  80% {
    transform: translateY(0);
  }
  93%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(0);
  }
}
/*
.fukidashi-01 {
  animation: fadeInOut1 5s infinite;  
}
.fukidashi-02 {
  animation: fadeInOut2 5s infinite;  
}
.fukidashi-03 {
  animation: fadeInOut3 5s infinite;  
}
.fukidashi-04 {
  animation: fadeInOut4 8s infinite;  
}
.fukidashi-05 {
  animation: fadeInOut5 3s infinite;  
}
.fukidashi-06 {
  animation: fadeInOut6 10s infinite;  
}
.fukidashi-07 {
  animation: fadeInOut7 6s infinite;  
}
@keyframes fadeInOut1 {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes fadeInOut2 {
  30% {
    opacity: 0;
    transform: translateY(20%); 
  }
  40% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {opacity: 1;}
  90% {opacity: 0;}
}
@keyframes fadeInOut3 {
  10% {
    opacity: 0;
    transform: translateY(20%); 
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {opacity: 1;}
  80% {opacity: 0;}
}
@keyframes fadeInOut4 {
  40% {
    opacity: 0;
    transform: translateY(20%); 
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  60% {opacity: 1;}
  70% {opacity: 0;}
}
@keyframes fadeInOut5 {
  20% {
    opacity: 0;
    transform: translateY(20%); 
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {opacity: 1;}
  60% {opacity: 0;}
}
@keyframes fadeInOut6 {
  50% {
    opacity: 0;
    transform: translateY(20%); 
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {opacity: 1;}
  80% {opacity: 0;}
}
@keyframes fadeInOut7 {
  60% {
    opacity: 0;
    transform: translateY(20%); 
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {opacity: 1;}
  90% {opacity: 0;}
}
*/
/* =================================
リスの動き
================================= */
.squirrel-grant-img span {
  display: block;
  animation: yryr 2s linear infinite;  
}

@keyframes yryr {
  0% {
      transform: rotate(0deg);
  }

  4.15% {
      transform: rotate(-15deg);
  }

  8.3% {
      transform: rotate(15deg);
  }

  12.45% {
      transform: rotate(-15deg);
  }
  16.675% {
      transform: rotate(15deg);
  }
  20.825% {
      transform: rotate(-15deg);
  }
  25% {
      transform: rotate(0deg);
  }
}
@keyframes yryr2 {
  0% {
      transform: rotate(0deg);
  }

  16.6% {
      transform: rotate(-15deg);
  }

  33.2% {
      transform: rotate(15deg);
  }

  49.8% {
      transform: rotate(-15deg);
  }

  66.7% {
      transform: rotate(15deg);
  }

  83.3% {
      transform: rotate(-15deg);
  }

  100% {
      transform: rotate(0deg);
  }
}

/* =================================
吹き出しふわふわ
================================= */
/* Animation */
.fuwafuwa-target {
  animation: floating-y 1s ease-in-out;
}
/* Animation */
.fuwafuwa-target2 {
  animation: floating-y 1s ease-in-out;
}
.fuwafuwa-target3 {
  animation: floating-y 1s ease-in-out;
}
@keyframes floating-y {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15%);
  }
}

@keyframes floating-y2 {
  0% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(0);
  }
}
.fuwafuwa-target {
  animation: fuwafuwa 1s ease-in-out;
}