@charset "UTF-8";

/**
 * CSS Animation
 * sample: http://cssanimate.com/
 */

.anime01 {
  animation: anime01 2s ease-out forwards;
}

@keyframes anime01 {
  from {
    opacity: 0;
    transform: translateX(250px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.anime02 {
  animation: anime02 1s ease-out forwards;
}

@keyframes anime02 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.anime03 {
  animation: anime03 1s ease-out forwards;
}

@keyframes anime03 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.anime04 {
  animation: anime04 2s cubic-bezier(0.680, -0.550, 0.265, 1.550) forwards;
}

@keyframes anime04 {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anime05 {
  animation: anime05 5s linear infinite;
}

@keyframes anime05 {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  25%,
  100% {
    opacity: 0;
  }
}

.anime06 {
  animation: anime06 1s ease-out forwards;
}

@keyframes anime06 {
  from {
    opacity: 0;
    transform: translateY(-25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anime07 {
  animation: anime07 4s linear 1;
}

@keyframes anime07 {

  0%,
  100% {
    opacity: 0;
  }

  20%,
  80% {
    opacity: 1;
  }
}

.anime08 {
  /* このアニメーションは回転の中心がデフォルトではないため transform-origin を指定 */
  transform-origin: 0 100%;
  animation: anime08 4s ease-in-out infinite;
}

@keyframes anime08 {

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

  50% {
    transform: rotate(-5deg);
  }
}

.anime09 {
  animation: anime09 5s linear 1;
}

@keyframes anime09 {

  0%,
  100% {
    opacity: 0;
  }

  20%,
  80% {
    opacity: 1;
  }
}


.anime-stick01 {
  animation: anime-stick01 1.2s ease-out forwards;
}

@keyframes anime-stick01 {
  from {
    opacity: 0;
    /* 左に50px、上に50pxの位置からスタート */
    transform: translate(-8px, -100px);
  }

  to {
    opacity: 1;
    /* 本来の位置へ */
    transform: translate(0, 0);
  }
}

.anime-stick02 {
  animation: anime-stick02 1.2s ease-out forwards;
}

@keyframes anime-stick02 {
  from {
    opacity: 0;
    /* 左に50px、上に50pxの位置からスタート */
    transform: translate(-30px, -100px);
  }

  to {
    opacity: 1;
    /* 本来の位置へ */
    transform: translate(0, 0);
  }
}

.anime-fade-in-out {
  /* アニメーション名、時間、繰り返し回数を設定 */
  animation: anime-fade-in-out 1s forwards;
}

@keyframes anime-fade-in-out {
  0% {
    /* 開始時：透明 */
    opacity: 0;
  }

  50% {
    /* 中間地点：不透明 */
    opacity: 1;
  }

  100% {
    /* 終了時：透明 */
    opacity: 0;
  }
}

/* 画像をクロスフェードでループさせるアニメーション */
.loop-fade-one {
  animation: loop-fade-one 8s linear infinite;
}

.loop-fade-two {
  animation: loop-fade-two 8s linear infinite;
}

/* 画像1用 (表示→非表示) */
@keyframes loop-fade-one {

  0%,
  40% {
    opacity: 1;
  }

  50%,
  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 画像2用 (非表示→表示) */
@keyframes loop-fade-two {

  0%,
  40% {
    opacity: 0;
  }

  50%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}