/*下からアニメーション*/

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.7s;
    animation-delay: 0.7S;
    animation-fill-mode:forwards;
    opacity:0;
    /*見えない部分だけを消す*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(calc((100 / 1920) * 100vw));
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }

    .fadeUpTrigger{
      
    }
    
.fadeUp2{
    animation-name:fadeUpAnime;
    animation-duration:0.7s;
    animation-delay: 0.8s;
    animation-fill-mode:forwards;
    opacity:0;
    /*見えない部分だけを消す*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(calc((100 / 1920) * 100vw));
    }

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

.fadeUp3{
    animation-name:fadeUpAnime;
    animation-duration:0.7s;
    animation-delay: 1.3s;
    animation-fill-mode:forwards;
    opacity:0;
    /*見えない部分だけを消す*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    }
    
    @keyframes fadeUpAnime{
        from {
        opacity: 0;
        transform: translateY(calc((100 / 1920) * 100vw));
        }
    
        to {
        opacity: 1;
        transform: translateY(0);
        }
    }

.fadeUp2Trigger{

}
.fadeUpTrigger{

}
.fadeUp3Trigger{

}

/*-----------------------*/



/*左から右アニメーション*/

.left-to-right-slide {
  animation: left-to-right-slide 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards;
  opacity: 0%;
}
 
@keyframes left-to-right-slide {
  0% {
    transform: translateX(calc((-300 / 1920) * 100vw));
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.left-to-right-slide-Trigger{
}


/*左から右アニメーション*/

.left-to-right-slide2 {
  animation: left-to-right-slide 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.4s forwards;
  opacity: 0%;
}
 
@keyframes left-to-right-slide {
  0% {
    transform: translateX(calc((-300 / 1920) * 100vw));
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.left-to-right-slide2-Trigger{
}

/*中央から横に広げる*/


.center-side {
  animation: center-side 1s cubic-bezier(.4, 0, .2, 1) 0.9s forwards;
    opacity: 0%;
}
@keyframes center-side {
    0% {
        opacity: 100%;
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
      -webkit-clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    }
  
    100% {
        opacity: 100%;
      clip-path: polygon(0% 0%, 120% 0%, 120% 120%, 0% 120%);
      -webkit-clip-path:(0% 0%, 120% 0%, 120% 120%, 0% 120%);
    }
  }

  .center-side-trigger{

  }
/*交差してアニメーション*/

.cross-anim {
    overflow: hidden;
    position: relative;
  }
  
  .cross-anim:before,
  .cross-anim:after {
    animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
    background: #fff;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 1;
    overflow:hidden;
  }
  
  .cross-anim:before {
    animation-name: img-wrap-before;
    top: 0;
    bottom: 50%;
    overflow:hidden;
  }
  
  .cross-anim:after {
    animation-name: img-wrap-after;
    top: 50%;
    bottom: 0;
    overflow:hidden;
  }
  
  @keyframes img-wrap-before {
    100% {
      transform: translateX(100%);
    }
  }
  
  @keyframes img-wrap-after {
    100% {
      transform: translateX(-100%);
    }
  }
  .cross-anim-trigger{

  }


/*大きい→小さいアニメーション*/
.large-to-small {
    animation: large-to-small 1s cubic-bezier(.4, 0, .2, 1) 1.5s forwards;
      opacity: 0%;
  }
  @keyframes large-to-small {
      0% {
        
    opacity: 0;
        transform:scale(1.1);
      }
    
      100% {
        opacity: 1;
        transform:scale(1);
      }
    }
  .large-to-small-trigger{
    
  }


/*シンプルフェードインアニメーション*/
.simple-fadein {
    animation: simple-fadein 1s cubic-bezier(.4, 0, .2, 1) 0.6s forwards;
      opacity: 0%;
  }
  @keyframes simple-fadein{
      0% {
        
      transform: translateY(-5%);
    opacity: 0;
      }
    
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  
    .simple-fadein-trigger{

    }

/*-------------------------------------*/

/*右から左アニメーション*/
.right-to-left-slide {
    animation: right-to-left-slide 1s cubic-bezier(.4, 0, .2, 1) 0.9s forwards;
    opacity: 0%;
  }

@keyframes right-to-left-slide {
  0% {
    
    transform: translateX(30%);
    opacity: 0%;
  }
  100% {
    
    transform: translateX(0);
    opacity: 100%;
  }
}

.right-to-left-slide-trigger{
  
}

/*----------------*/