/* 下から */



@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
	transform: translate3d(0, 0, 0);
  }
}
.fadeUp{
    opacity: 0;/* ここを追加 */
    animation-duration: 0.8s;/* アニメーション時間 */
    animation-delay : 0.1s;/* 変化開始の時間 */
    animation-name:fadeUpAnime;
    animation-fill-mode:forwards;

    
    }
/* 左から */

    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
        transform: translate3d(-50px, 100px, 0);
      }
    
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
    .fadeLeft{
      opacity: 0;/* ここを追加 */
      animation-duration: 1.8s;/* アニメーション時間 */
      animation-delay : 0.1s;/* 変化開始の時間 */
      animation-name:fadeLeftAnime;
      animation-fill-mode:forwards;
        }

    /* 右から */

    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
        transform: translate3d(50px, 100px, 0);
      }
    
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
    .fadeRight{
      opacity: 0;/* ここを追加 */
      animation-duration: 3s;/* アニメーション時間 */
      animation-delay : 0.1s;/* 変化開始の時間 */
      animation-name:fadeRightAnime;
      animation-fill-mode:forwards;
        
        }

        .reflection {
          /* width: 370px; */
          /* height: 200px; */
          position: relative;
          overflow: hidden;

        }
        .reflection::after {
          content: "";
          display: block;
          width: 30px;
          height: 100%;
          position: absolute;
          top: -180px;
          left: 0;
          background-color: #FFF;
          opacity: 0;
          transform: rotate(45deg);
          animation: reflect 2s ease-in-out infinite;
          -webkit-transform: rotate(45deg);
          -webkit-animation: reflect 2s ease-in-out infinite;
        }
        @keyframes reflect {
          0% { transform: scale(0) rotate(45deg); opacity: 0; }
          80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
          81% { transform: scale(4) rotate(45deg); opacity: 1; }
          100% { transform: scale(50) rotate(45deg); opacity: 0; }
        }
        @-webkit-keyframes reflect {
          0% { transform: scale(0) rotate(45deg); opacity: 0; }
          80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
          81% { transform: scale(4) rotate(45deg); opacity: 1; }
          100% { transform: scale(50) rotate(45deg); opacity: 0; }
        }