@charset "UTF-8";/* CSS Document */



.slideRight{opacity:0;}

.slideRight.isShow{ opacity: 1;animation: slideRightToLeft 0.5s ease 0.4s 1 normal backwards;}
.kv .slideRight{opacity: 1;animation: slideRightToLeft 0.5s ease 1s 1 normal backwards;}
ul.menu.slideRight{opacity: 1;animation: slideRightToLeft 0.5s ease 1s 1 normal backwards;}
@keyframes slideRightToLeft {
    0% {
        transform: translateX(2000px);
    }
    100% {
        transform: translateX(0px);
    }
}










.slideLeft{opacity:0;}

.kv .slideLeft{opacity: 1;animation: slideLeftToRight 0.5s ease 1s 1 normal backwards;}
.kv .slideLeft-cast{opacity: 1;animation: slideLeftToRight 0.5s ease 0.5s 1 normal backwards;}
ul.sns.slideLeft{opacity: 1;animation: slideLeftToRight 0.5s ease 0.5s 1 normal backwards;}
.slideLeft.isShow {  opacity: 1;animation: slideLeftToRight 0.5s ease 0.4s 1 normal backwards;}
.introduction .text.slideLeft.isShow {  opacity: 1;animation: slideLeftToRight 0.5s ease 1s 1 normal backwards;}
@keyframes slideLeftToRight {
    0% {
        transform: translateX(-2000px);
    }
    100% {
        transform: translateX(0px);
    }
}

.slideTop{ opacity: 0;}
.slideTop.isShow {  opacity: 1;animation: slideTopToBottom 0.5s ease 0.4s 1 normal backwards;}
@keyframes slideTopToBottom {
    0% {
        transform: translateY(-2000px);
    }
    100% {
        transform: translateY(0px);
    }
}

.slideBottom{ opacity: 0;}
.slideBottom.isShow {  opacity: 1;animation: slideBottomToTop 0.5s ease 0.4s 1 normal backwards;}
@keyframes slideBottomToTop {
    0% {
        transform: translateY(2000px);
    }
    100% {
        transform: translateY(0px);
    }
}





/*=======  下からフェードアップ  =======*/
.kv-wrap .fadeup { opacity: 1;animation: fadeUp 1.5s ease 2s 1 normal backwards;}
.fadeup.isShow {  opacity: 1;animation: fadeUp 0.5s ease 0.4s 1 normal backwards;}

@keyframes fadeUp {
from {
    opacity: 0;
    transform: translateY(40px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


/*=======  右からポヨヨン  =======*/
.poyoyon{opacity:0;}
.poyoyon.isShow {
  animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 0.3s 1 forwards;
}
 
@keyframes poyoyon {
  0% {
    transform: translateX(2000px);
    opacity: 0;
  }
  50% {
    transform: translateX(-100px);
  }
  60% {
    transform: translateX(100px);
  }
  70% {
    transform: translateX(0px);
  }
  80% {
    transform: translateX(50px);
  }


  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

/*=======  上からポヨヨン  =======*/
.poyoyonTop{opacity:0;}
.poyoyonTop.isShow {
  animation: poyoyonTop 1s cubic-bezier(0.12, 0, 0.39, 0) 0.5s 1 forwards;
}
 
@keyframes poyoyonTop {
  0% {
    transform: translateY(-2000px);
    opacity: 0;
  }
  50% {
    transform: translateY(-100px);
  }
  60% {
    transform: translateY(100px);
  }
  70% {
    transform: translateY(0px);
  }
  80% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
  20%,100% {
    opacity: 1;
  }
}