@charset "UTF-8";
.anim-box.fadein {
  opacity: 0;
}
.anim-box.fadein.is-animated {
  animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.anim-box.fadeout.is-animated {
  animation: fadeOut 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.anim-box.fadeup {
  opacity: 0;
}
.anim-box.fadeup.is-animated {
  animation: fadeUp 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim-box.fadedown.is-animated {
  animation: fadeDown 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeDown {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim-box.slideinRtoL.is-animated {
  animation: slideInRtoL 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInRtoL {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%, 100% {
    opacity: 1;
  }
}
.anim-box.zoomin.is-animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.anim-box.zoomout.is-animated {
  animation: zoomOut 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomOut {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.anim-box.fade-bg {
  background-color: transparent;
  animation: bgFadeIn 2s ease-in-out forwards;
}

@keyframes bgFadeIn {
  from {
    background-color: transparent;
  }
  to {
    background-color: #3eb8ff;
  }
}
.anim-box.fade-bg-1-3 {
  background-color: transparent;
  animation: bgFadeIn-1-3 8s ease-in-out 2s forwards;
}

@keyframes bgFadeIn-1-3 {
  0% {
    background: linear-gradient(to bottom, transparent 100%, rgba(52, 152, 219, 0) 100%);
  }
  100% {
    background: linear-gradient(to bottom, transparent 66.66%, #3498db 66.66%);
  }
}
.anim-box.hover-poyopoyo:hover {
  transform: scale(0.95);
}
.anim-box.hover-poyopoyo:not(:hover) {
  animation: boyoyon 0.5s ease-out;
}

@keyframes boyoyon {
  0% {
    transform: scale(0.95);
  }
  40% {
    transform: scale(1.05);
  } /* 少し大きく（伸びる） */
  60% {
    transform: scale(0.98);
  } /* 少し小さく（縮む） */
  80% {
    transform: scale(1.02);
  } /* また少し大きく */
  100% {
    transform: scale(1);
  } /* 元に戻る */
}
/* ------------------------------
スクロールアイコン　上から下に流れる線
------------------------------ */
/* スクロールダウンの位置 */
.scroll {
  padding-top: 60px;
  position: relative;
}

/* 矢印のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  content: "";
  height: 20px;
  left: 1em;
  margin: auto;
  position: absolute;
  top: 0;
  width: 20px;
}

/* 矢印のアニメーション */
@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-20px, 20px);
  }
  100% {
    opacity: 0;
  }
}/*# sourceMappingURL=css_animation.css.map */