@charset "euc-jp";

/* ==============================================================================
  fadein animation
============================================================================== */

.zoomIn {
  opacity: 0;
}

.allfade01.zoomIn,
.allfade02 .zoomIn,
.allfade03 .zoomIn {
  animation-name:zoomInAnime;
  animation-duration:0.4s;
  animation-fill-mode:forwards;
}
@keyframes zoomInAnime {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/*==================================================================*/

.fadeIn {
  opacity: 0;
}

.allfade01.fadeIn,
.allfade02 .fadeIn,
.allfade03 .fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*==================================================================*/

.fadeUp {
  opacity: 0;
}

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

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    translate: 0 100px;
    scale: 0.6;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/*==================================================================*/

.faderightUp {
  opacity: 0;
}

.allfade01.faderightUp,
.allfade02 .faderightUp,
.allfade03 .faderightUp {
  animation-name: faderightUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes faderightUpAnime {
  from {
    opacity: 0;
    translate: 1000px 1000px;
    scale: 0.4;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/*==================================================================*/

.fadeleftUp {
  opacity: 0;
}

.allfade01.fadeleftUp,
.allfade02 .fadeleftUp,
.allfade03 .fadeleftUp {
  animation-name: fadeleftUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeleftUpAnime {
  from {
    opacity: 0;
    translate: -1000px -1000px;
    scale: 0.4;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/*==================================================================*/

.fadeDown {
  opacity: 0;
}

.allfade01.fadeDown,
.allfade02 .fadeDown,
.allfade03 .fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    translate: 0 -1000px;
    scale: 0.8;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/*==================================================================*/

.fadeLeft {
  opacity: 0;
}

.allfade01.fadeLeft,
.allfade02 .fadeLeft,
.allfade03 .fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*==================================================================*/

.fadeRight {
  opacity: 0;
}

.allfade01.fadeRight,
.allfade02 .fadeRight,
.allfade03 .fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*==================================================================*/

.allfade01.fadeLeftopen {
  animation-name: fadeLeftopen;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  animation-delay: 400ms;
}
@keyframes fadeLeftopen {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-30%);
  }
}

/*==================================================================*/

.allfade01.fadeRightopen {
  animation-name: fadeRightopen;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  animation-delay: 400ms;
}
@keyframes fadeRightopen {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(30%);
  }
}

/*==================================================================*/

.blur {
  opacity: 0;
}

.allfade01.blur,
.allfade02 .blur,
.allfade03 .blur {
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

/*==================================================================*/

.blur02 {
  animation-name:blurAnime02;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes blurAnime02 {
  0% {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  50% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 0;
  }
}

/*==================================================================*/

.blur03 {
  animation: 2s infinite forwards blurAnime03;
  opacity: 0;
}
@keyframes blurAnime03 {
  0% {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  50% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 0;
  }
}

/*==================================================================*/

.yurayura {
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
.yurayura img {
  animation: floating-y 3.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translateX(-1%);
  }
  100% {
    transform: translateX(1%);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}

/*==================================================================*/

.yurayura_02 {
  animation: floating-x_02 8.2s ease-in-out infinite alternate-reverse;
}
.yurayura_02 img {
  animation: floating-y_02 2.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x_02 {
  0% {
    transform: translateX(1%);
  }
  100% {
    transform: translateX(-1%);
  }
}
@keyframes floating-y_02 {
  0% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(-2%);
  }
}

/*==================================================================*/

.allfade01.scroll_none {
  animation: 2s forwards scrollnone !important;
}
@keyframes scrollnone {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*==================================================================*/

.delay-time1 {
  animation-delay: 400ms;
}
.delay-time2 {
  animation-delay: 600ms;
}
.delay-time3 {
  animation-delay: 800ms;
}
.delay-time4 {
  animation-delay: 1000ms;
}
.delay-time5 {
  animation-delay: 1200ms;
}
.delay-time6 {
  animation-delay: 1400ms;
}
.delay-time7 {
  animation-delay: 1600ms;
}
.delay-time8 {
  animation-delay: 1800ms;
}
.delay-time9 {
  animation-delay: 2000ms;
}
.delay-time10 {
  animation-delay: 2200ms;
}
.delay-time11 {
  animation-delay: 2400ms;
}
.delay-time12 {
  animation-delay: 2600ms;
}
.delay-time13 {
  animation-delay: 2800ms;
}
.delay-time14 {
  animation-delay: 3000ms;
}
.delay-time15 {
  animation-delay: 3200ms;
}
.delay-time16 {
  animation-delay: 3400ms;
}
.delay-time17 {
  animation-delay: 3600ms;
}
.delay-time18 {
  animation-delay: 3800ms;
}
.delay-time19 {
  animation-delay: 4000ms;
}
.delay-time20 {
  animation-delay: 4200ms;
}