@charset "utf-8";

/*-----下記はループしないアニメーション-----*/

/*フェードイン
オブジェクトが徐々に表示されるアニメーション。*/
.fade-in {
  animation: fade-in 3s;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*下から上へのフェードイン*/

.fade-in-element {
  animation: fadeIn linear both;
  animation-timeline: scroll(nearest block);
}

@keyframes fade-in-element {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/* ----------透明度が変化 メインに使ってます---------- */
/* 画面外 */
.fade-block1 {
  opacity: .1;
  transition: all 1.5s;
}
/* 画面に入った時の動き */
.fade-block1.blockIn {
  opacity: 1;
}
/* ----------下からふわっと---------- */
/* 画面外 */
.fade-block2 {
	opacity: .3;
  transform: translateY(100px);
  transition: all .5s ease-in-out;
}
/* 画面に入った時の動き */
.fade-block2.blockIn {
	opacity: 1;
  transform: translateY(0);
}

/* ----------下からふわっと2---------- */
/* 画面外 */
.fade-block7 {
	opacity: .3;
  transform: translateY(100px);
  transition: all .6s ease-in-out;
}
/* 画面に入った時の動き */
.fade-block7.blockIn {
	opacity: 1;
  transform: translateY(0);
}
/* ----------下からふわっと3---------- */
/* 画面外 */
.fade-block8 {
	opacity: .3;
  transform: translateY(100px);
  transition: all .7s ease-in-out;
}
/* 画面に入った時の動き */
.fade-block8.blockIn {
	opacity: 1;
  transform: translateY(0);
}





/* ----------右からふわっと---------- */
/* 画面外 */
.fade-block3 {
  transform: translateX(200px);
  transition: all .5s ease-in;
}
/* 画面に入った時の動き */
.fade-block3.blockIn {
  transform: translateX(0);
}
/* ----------左からふわっと---------- */
/* 画面外 */
.fade-block4 {
  transform: translateX(-200px);
  transition: all .5s ease-in;
}
/* 画面に入った時の動き */
.fade-block4.blockIn {
  transform: translateX(0);
}
/* ----------斜め下からふわっと---------- */
/* 画面外 */
.fade-block5 {
  transform: translate(150px, 150px);
  transition: all .5s ease-in;
}
/* 画面に入った時の動き */
.fade-block5.blockIn {
  transform: translate(0);
}

/* ----------画面外に飛んでいく---------- */
/* 画面外 */
.fade-block6 {
  transform: translate(-100vw);
  transition: all 3s ease;
}
/* 画面に入った時の動き */
.fade-block6.blockIn {
  transform: translate(100vw);
}

@keyframes fade-block1 {
  from { 
    transform: translateX(0%);
    opacity: 0;
  }
  to { 
    transform: translateX(100%);
    opacity: 1; 
	}
}
@keyframes fade-block2 {
  from { 
    transform: translateX(0%);
    opacity: 0;
  }
  to { 
    transform: translateX(100%);
    opacity: 1; 
	}
}
@keyframes fade-block7 {
  from { 
    transform: translateX(0%);
    opacity: 0;
  }
  to { 
    transform: translateX(100%);
    opacity: 1; 
	}
}
@keyframes fade-block7 {
  from { 
    transform: translateX(0%);
    opacity: 0;
  }
  to { 
    transform: translateX(100%);
    opacity: 1; 
	}
}