@charset "utf-8";
/*////////////////////////////////////////////////////////

animation

////////////////////////////////////////////////////////*/
/* common
------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeStamp {
  0% {
    opacity: 0;
    transform: scale(2.3, 2.3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeStamp2 {
  0% {
    opacity: 0;
    transform: scale(.5, .5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeDecrease {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(20px);
  }
  40% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  52% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(0.5, 0.5) translateY(0);
  }
}
@keyframes fadeFuki {
  0% {
    opacity: 0;
    transform: scale(.3, .3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeFit {
  0% {
    max-height: 300px;
  }
  100% {
    max-height: 140px;
  }
}
@keyframes balloon {
  0% {
    opacity: 0;
    transform: scale(2.3, 2.3);
  }
  50% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(1.08, 1.08);
  }
  70% {
    transform: scale(1, 1);
  }
  80% {
    transform: scale(1.03, 1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes leftLight {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes slideLeftRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideRightLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes moveLeftRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes moveRightLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(.3, .3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes zoom2 {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  17% {
    opacity: 1;
    transform: scale(4, 4.3);
  }
  70% {
    opacity: 1;
    transform: scale(4, 4.3);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}
@keyframes zoom3 {
  0% {
    opacity: 0;
    transform: scale(1, 1);
  }
  70% {
    opacity: 1;
    transform: scale(2.5, 2.5);
  }
  80% {
    opacity: 1;
    transform: scale(3, 3);
  }
  90% {
    opacity: 0;
    transform: scale(3, 3);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
@keyframes buruburu {
  0% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(12deg);
  }
  60% {
    transform: rotateZ(-12deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@keyframes buruburu2 {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg)
  }
  25% {
    transform: translate(2px, 1px) rotateZ(1deg)
  }
  50% {
    transform: translate(0px, 1px) rotateZ(0deg)
  }
  75% {
    transform: translate(1px, 0px) rotateZ(-1deg)
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg)
  }
}
@keyframes uneune {
  0% {
    opacity: 0;
    transform: scale(.2, .2);
  }
  10% {
    opacity: .3;
    transform: scale(.7, .3);
  }
  20% {
    opacity: .5;
    transform: scale(1, 1);
  }
  30% {
    opacity: .7;
    transform: scale(.85, .85);
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(.9, .9);
  }
  60% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes glitch_effect {
  0% {
    opacity: 0;
    transform: scale(.2, .2);
  }
  33% {
    transform: scale(1, 1);
    filter: invert(0%);
  }
  33.3% {
    opacity: 1;
    transform: skewY(20deg) translate(8px, 6px);
    filter: invert(100%);
  }
  33.6% {
    opacity: 0;
    transform: skewY(-10deg) translate(-10px, -10px);
  }
  33.9% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
  41% {
    opacity: 1;
  }
  41.4% {
    opacity: 0;
  }
  41.8% {
    opacity: 1;
  }
  42.2% {
    opacity: 0;
  }
  42.6% {
    opacity: 1;
  }
  66% {
    transform: none;
    filter: invert(0%);
  }
  66.3% {
    opacity: 1;
    transform: skewX(5deg) translate(-4px, 10px);
    filter: invert(100%);
  }
  66.6% {
    opacity: 0;
    transform: skewX(-7deg) translate(4px, -6px);
  }
  66.9% {
    opacity: 1;
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewY(10deg) translate(10px, -6px);
  }
  77.6% {
    transform: skewY(-22deg) translate(-5px, 8px);
    filter: invert(100%);
  }
  77.9% {
    transform: none;
    filter: invert(0%);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
}

@keyframes glitch1 {
  0% {
    filter: invert(0%);
  }
  33.3% {
    opacity: 1;
    filter: invert(100%);
  }
  33.6% {
    opacity: 0;
  }
  33.9% {
    opacity: 1;
    filter: invert(0%);
  }
  41% {
    opacity: 1;
  }
  41.4% {
    opacity: 0;
  }
  41.8% {
    opacity: 1;
  }
  42.2% {
    opacity: 0;
  }
  42.6% {
    opacity: 1;
  }
  66% {
    filter: invert(0%);
  }
  66.3% {
    opacity: 1;
    filter: invert(100%);
  }
  66.6% {
    opacity: 0;
  }
  66.9% {
    opacity: 1;
  }
  77.3% {
  }
  77.6% {
    filter: invert(100%);
  }
  77.9% {
    filter: invert(0%);
  }
  100% {
    opacity: 1;
    filter: invert(0%);
  }
}
@keyframes bom {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  15% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05, 1.05);
  }
}
[class*='fade_'] {
  opacity: 0;
}
[class*='fade_in'].active {
  animation: fadeIn 1.7s forwards;
}
[class*='fade_out'] {
  opacity: 1;
}
[class*='fade_out'].active {
  animation: fadeOut 1.7s forwards;
}
[class*='fade_up'] {
  transform: translateY(30px);
}
[class*='fade_up'].active {
  animation: fadeUp .8s forwards;
}
[class*='fade_down'] {
  transform: translateY(-70px);
}
[class*='fade_down'].active {
  animation: fadeDown 1.5s ease forwards;
}
.fade_down + .fade_down.active {
  animation-delay: .5s;
}
[class*='fade_left'] {
 transform: translateX(30px); 
}
[class*='fade_left'].active {
  animation: fadeLeft 1s forwards;
}
[class*='fade_right'] {
 transform: translateX(-30px); 
}
[class*='fade_right'].active {
  animation: fadeRight 1s forwards;
}
[class*='fade_stamp'] {
  transform: scale(2.3, 2.3);
}
[class*='fade_stamp'].active {
  animation: fadeStamp .5s forwards;
}
[class*='fade_stamp2'].active {
  animation: fadeStamp2 .3s forwards;
}
[class*='fade_decrease'].active {
  animation: fadeDecrease 1.75s forwards;
}
[class*='fade_fuki'].active {
  animation: fadeFuki .7s forwards;
}
[class*='fade_fit'].active {
  animation: fadeFit .9s forwards;
}
[class*='fade_balloon'] {
  transform: scale(2.3, 2.3);
}
[class*='fade_balloon'].active {
  animation: balloon .7s forwards;
}
[class*='slide_RightLeft'] {
  opacity: 0;
  animation: slideRightLeft 1.5s forwards;
}
[class*='slide_LeftRight'] {
  opacity: 0;
  animation: slideLeftRight 1.5s forwards;
}
[class*="shiny"] {
  position: relative;
}
[class*="shiny"]:after {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 60px;
  height: 90%;
  transform: rotate(-10deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .4) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
[class*='flash'].active:after {
  animation: flash 2s ease-out forwards;
}
.moveLeftRight {
  animation: moveLeftRight 3s ease-in-out infinite;
}
.moveRightLeft {
  animation: moveRightLeft 3s ease-in-out infinite;
}
.zoom {
  animation: zoom .7s ease-out forwards;
}
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
.glitch {
  animation: glitch_effect 1s ease-out infinite;
}

/* free
------------------------- */
/*--- 羽 ---*/
.feather_wrap {
  position: relative;
  overflow: hidden;
}
.feather {
  display: none;
}
.feather li {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -50px;
}
.feather li:nth-child(odd) {
  width: 30px;
  height: 30px;
  background-image: url('../images/free/feather/1.png');
  animation: animate-feather 8s linear 3;
}
.feather li:nth-child(even) {
  width: 40px;
  height: 40px;
  background-image: url('../images/free/feather/2.png');
  animation: animate-feather 8s linear 3;
}
.feather li:nth-child(1) {
  left: 10%;
  animation-delay: 5s;
}
.feather li:nth-child(2) {
  left: 15%;
  animation-delay: 6s;
}
.feather li:nth-child(3) {
  left: 30%;
}
.feather li:nth-child(4) {
  left: 35%;
  animation-delay: 4s;
}
.feather li:nth-child(5) {
  left: 80%;
  animation-delay: 7s;
}
.feather li:nth-child(6) {
  left: 100%;
  animation-delay: 8s;
}
.feather li:nth-child(7) {
  left: 20%;
  animation-delay: 3s;
}
.feather li:nth-child(8) {
  left: 70%;
  animation-delay: 2s;
}
@keyframes animate-feather {
  0% {
    opacity: 0;
    top: 0;
    transform: rotate(0);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(500deg);
  }
}