@charset "UTF-8";

/******************
アニメーションcss
******************/
@keyframes flowing {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.action {
  opacity: 0;
}

.action.animated.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



.delay-0.fadeUp {
  animation-delay: 0s;
}

.delay-1.fadeUp {
  animation-delay: 0.4s;
}

.delay-2.fadeUp {
  animation-delay: 0.8s;
}

.delay-3.fadeUp {
  animation-delay: 1.2s;
}

.fade_view {
  animation-name: fadeInAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 0.125フェードイン */
.action.animated.fadeIn125ms {
  animation-name: fadeIntittle;
  animation-delay: 125ms;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transform: translateY(50px);
  opacity: 0;
}

@keyframes fadeIntittle {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
    opacity: 1;
  }
}

/* 0.25フェードイン */
.action.animated.fadeIn250ms {
  animation-name: fadeIn1000ms;
  animation-delay: 250ms;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transform: translateY(50px);
  opacity: 0;
}

/* 0.5フェードイン */
.action.animated.fadeIn500ms {
  animation-name: fadeIn1000ms;
  animation-delay: 500ms;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transform: translateY(50px);
  opacity: 0;
}

@keyframes fadeIn1000ms {
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 無限スライダー */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 785px) {
  .scroll-infinity__item {
    width: 83.3333333333vw;
  }
}


/* 帯とテキストのアニメーション*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
}

.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #111;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

  100% {
    opacity: 1;
  }
}

/*上から下*/
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #111;
  /*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }

  50% {
    transform-origin: top;
    transform: scaleY(1);
  }

  50.001% {
    transform-origin: bottom;
  }

  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}

/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #111;
  /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }

  50% {
    transform-origin: left;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: right;
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgappearTrigger,
.bgLRextendTrigger,
.popupTrigger,
.fadeupTrigger,
.faderightTrigger,
.fadeinTrigger {
  opacity: 0;
}

/* 下から大きくなりながら出現アニメーション */
.popup {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }

  100% {
    transform: translateY(0) scale(1);
  }

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

/* 下から上にフェードイン */
.action.animation.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*下から帯*/
@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }

  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }

  50.001% {
    transform-origin: top;
  }

  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}

/* スマホでフリック */
@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50%,
  to {
    transform: translateX(-40px);
    opacity: 0;
  }
}

/* 文字が順番に下から出てくる */
.txt {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.txt p {
  letter-spacing: .03em;
  margin: 0;

  /* ここからアニメーション関係 */
  transform: translateY(2em);
  animation: textanimation 1s forwards;
}

/* 1文字目 */
.txt p:nth-child(1) {
  animation-delay: 0.2s
}

/* 2文字目 */
.txt p:nth-child(2) {
  animation-delay: 0.4s
}

/* 3文字目 */
.txt p:nth-child(3) {
  animation-delay: 0.6s
}

/* 4文字目 */
.txt p:nth-child(4) {
  animation-delay: 0.8s
}

/* 5文字目 */
.txt p:nth-child(5) {
  animation-delay: 1s
}

/* 6文字目 */
.txt p:nth-child(6) {
  animation-delay: 1.2s
}

/* 7文字目 */
.txt p:nth-child(7) {
  animation-delay: 1.4s
}

/* 8文字目 */
.txt p:nth-child(8) {
  animation-delay: 1.6s
}

/* 9文字目 */
.txt p:nth-child(9) {
  animation-delay: 1.8s
}

/* 10文字目 */
.txt p:nth-child(10) {
  animation-delay: 2s
}

/* 11文字目 */
.txt p:nth-child(11) {
  animation-delay: 2.2s
}

/* 12文字目 */
.txt p:nth-child(12) {
  animation-delay: 2.4s
}


@keyframes textanimation {
  0% {
    transform: translateY(2em);
  }

  100% {
    transform: translateY(0);
  }
}

/*# sourceMappingURL=animation.css.map */