/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}



/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-50px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(50px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}

/* ぼかしから出現 */
.topblur{
	animation-name:topblurAnime;
	animation-duration:1.3s;
	animation-fill-mode:forwards;
}

@keyframes topblurAnime{
  from {
	filter: blur(15px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}



/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.9);
  }

  to {
      transform: scale(1);
  }
}

/*浮かび上がる*/
.Inview{
  animation-name: InviewAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes InviewAnime{
  from {
    opacity: 0;
    filter: blur(10px);
    transform: scale(1.08);
  }

  to {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
  }
}


/*top　文字の動作
.tx-appear {
  overflow: hidden;
  position: relative;
}

.tx-appear::before {
  animation: tx-appear 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes tx-appear {
  100% {
    transform: translateX(100%);
  }
}*/
.tx_wrap {
  position: relative;
  overflow: hidden;
  height: 95vh; 
}

.tx_wrap img {
  clip-path: inset(0 0 100% 0);
  animation: tx-reveal-down 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes tx-reveal-down {
  to {
    clip-path: inset(0 0 0 0);
  }
}