@charset "UTF-8";
/**** 共通カラー ****/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-image: url(../image/loading_bg.webp);
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 9999;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo p {
  max-width: 193px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  transform: translateY(50%);
  margin: auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #splash_logo p {
    max-width: 156px;
  }
}

.load_animation {
  animation: load_animationAnime 2.5s ease-in forwards;
}

@keyframes load_animationAnime {
  0% {
    opacity: 1;
    width: 100%;
  }
  80% {
    opacity: 1;
    width: 100%;
  }
  100% {
    opacity: 0;
    width: 0;
  }
}
.slideup {
  display: inline-block;
  opacity: 0;
  animation: slideUpAnime 2.5s ease forwards;
}

@keyframes slideUpAnime {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  25% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* ループテキスト */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.Slide_IN_mask {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* 画像を隠すマスク（左→右にスライド） */
.Slide_IN_mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0efe9; /* 背景色：白でも黒でもOK */
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.85s ease-out;
}

/* アニメーション発火 */
.Slide_IN_mask.show::before {
  transform: translateX(100%);
}

.section_about .about_wrap::after {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.5s, transform 0.8s ease-out 0.5s;
  pointer-events: none;
}

/* アニメーション発火時 */
.section_about .about_wrap.show::after {
  opacity: 1;
  transform: translateY(0);
}

.Fade_IN {
  opacity: 0;
  will-change: transform, opacity;
  transform: translateY(40px);
  visibility: hidden;
}

.Fade_IN.show {
  animation: Fade_In 0.5s ease-out 0.2s forwards;
}

@keyframes Fade_In {
  from {
    opacity: 0;
    transform: translateY(40px);
    visibility: visible;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}
.features_list .Fade_IN.show:nth-of-type(1) {
  animation-delay: 0.2s;
}
.features_list .Fade_IN.show:nth-of-type(2) {
  animation-delay: 0.4s;
}
.features_list .Fade_IN.show:nth-of-type(3) {
  animation-delay: 0.6s;
}
.features_list .Fade_IN.show:nth-of-type(4) {
  animation-delay: 0.8s;
}/*# sourceMappingURL=animation.css.map */