@charset "utf-8";

/* SVGアニメ */
@keyframes lode {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@-webkit-keyframes hello {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }

  50% {
    fill: transparent;
  }

  100% {
    stroke-width: 0;
    fill: #f7b500;
  }
}

@keyframes hello {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }

  50% {
    fill: transparent;
  }

  100% {
    stroke-width: 0;
    fill: #f7b500;
  }
}

@-webkit-keyframes hello2 {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }

  50% {
    fill: transparent;
  }

  100% {
    stroke-width: 0;
    fill: #ec6c0e;
  }
}

@keyframes hello2 {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }

  50% {
    fill: transparent;
  }

  100% {
    stroke-width: 0;
    fill: #ec6c0e;
  }
}

/* フェードイン */
.movement.fade {
  opacity: 0.1;
  transition: all 1s;
}
.movement.fade.on {
  opacity: 1;
}

/*上から下にフェードイン*/
.movement.down {
  opacity: 0.1;
  transform: translateY(-50px);
  transition: all 1s;
}
.movement.down.on {
  opacity: 1;
  transform: translateY(0);
}

/*下から上にフェードイン*/
.movement.up {
  opacity: 0.1;
  transform: translateY(50px);
  transition: all 1s;
}
.movement.up.on {
  opacity: 1;
  transform: translateY(0);
}

/*左移動でフェードイン*/
.movement.left {
  opacity: 0.1;
  transform: translateX(-150px);
  transition: all 1s;
}
.movement.left.on {
  opacity: 1;
  transform: translateX(0);
}

/*右移動でフェードイン*/
.movement.right {
  opacity: 0.1;
  transform: translateX(150px);
  transition: all 1s;
}
.movement.right.on {
  opacity: 1;
  transform: translateX(0);
}