@charset "UTF-8";
/*****アニメーション*****/
.fadein_up {
  opacity: 0;
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  -webkit-filter: blur(20px);
  filter: blur(20px);
  transition: all 0.75s 0.4s ease-out;
}

.fadein_up.on {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

.fadein_text02 {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transition: all 1s ease-out;
}

.fadein_text02.on {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

.mask_txt {
  position: relative;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}
.mask_txt.on .txt_bg {
  animation: 6.5s ease-out 0s 1 forwards text-loop-200;
}

.txt_bg {
  position: absolute;
  left: -200%;
  top: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  margin: auto;
  background: linear-gradient(45deg, rgb(0, 60, 128) 0%, rgb(0, 105, 191) 12%, rgb(78, 178, 134) 24%, rgb(255, 104, 148) 36%, rgb(255, 182, 193) 48%, rgb(255, 233, 133) 60%, rgb(255, 182, 193) 69%, rgb(255, 104, 148) 78%, rgb(0, 105, 191) 87%, rgb(78, 178, 134) 94%, rgb(0, 60, 128) 100%);
  /*transition: all 3s 0.5s ease-in-out;*/
}

@keyframes text-loop-200 {
  0% {
    opacity: 0;
    left: -200%;
  }
  2% {
    opacity: 1;
    left: -190%;
  }
  80% {
    left: 0;
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}
/* 画像のフェードイン共通スタイル */
/*.area_images {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.area_images.on {
  opacity: 1;
  transform: translateY(0);
}*/
/* リボン要素の基本スタイルと表示アニメーション */
.vertical-ribbon {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100vh;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.vertical-ribbon.is-show {
  opacity: 1;
}
.vertical-ribbon .ribbon-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
  mask: url(#fade-mask);
  -webkit-mask: url(#fade-mask);
  transition: mask 1.3s ease;
}
@media screen and (min-width: 769px) and (max-height: 1000px) {
  .vertical-ribbon .ribbon-bg {
    object-position: 0 center;
  }
}
.vertical-ribbon #ribbon-mask {
  height: 100vh;
}
.vertical-ribbon #ribbon-mask #mask-block {
  transition: width 1.8s ease-out;
}
.vertical-ribbon #ribbon-mask #fade-gradient-rect {
  transition: x 1.8s ease-out;
}

.floating {
  animation: floating 5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.2));
  transition: all 0.5s ease-in-out;
}

@keyframes floating {
  0% {
    transform: translateY(0);
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.2));
  }
  50% {
    transform: translateY(15px);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
  }
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.2));
  }
}/*# sourceMappingURL=top_animations.css.map */