@charset "utf-8";
/* ---------------
  スクロールフェードイン
  ---------------*/
.scrollanime {
  opacity: 0;
}
.fadeInDown {
  animation-name: fadeInDown;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.14, 0.92, 0.45, 1);
}
@keyframes fadeInDown {
  0% {
      opacity: 0;         
  }
  100% {
  opacity: 1;
  transform: translate(0);
  }
}
.downup {
  transform: translateY(60px);
}

/* ---------------
トップページファーストビュー
  ---------------*/
.p-top_mv__main-copy img {
  animation-name: img-blur;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(.87,0,.3,.99);
  transition-delay: 3s;
  transition: all 1s cubic-bezier(.87,0,.3,.99);
}
@keyframes img-blur {
  0% {
    opacity: 0;
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}
.p-top_mv__img:before {
  animation-name: img-wrap;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.74,.03,.17,.97);
  background: #F7F5F0;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@keyframes img-wrap {
  100% {
    transform: translateX(-100%);
  }
}
.p-top_mv__img__inner img {
  object-fit: cover;
  animation-name: img-zoomout;
  animation-fill-mode: forwards;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(.58, .28, .38, .93);
}
@keyframes img-zoomout {
  0% {
    width: 102%;
    height: 102%;
  }
  100% {
    width: 100%;
    height: 100%;;
  }
}

/* ---------------
  ヘッダーフェードイン
  ---------------*/
@media (min-width: 1366px) {
  .header_wrap.fadeIn {
    animation-name: fadeIn;
    animation-fill-mode: forwards;
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(0.14, 0.92, 0.45, 1);
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateX(-100px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }

/* ---------------
ヘッダーフェードアウト
---------------*/
  .header_wrap.fadeOut {
    animation-name: fadeOut;
    animation-fill-mode: forwards;
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(0.14, 0.92, 0.45, 1);
    pointer-events: none;
  }
  @keyframes fadeOut {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-100px);
    }
  }
}