@charset "utf-8";

/*layout*/

.wrapper {
  overflow: hidden;
}


.box-color {
  box-shadow: 0px 2px -5px 5px #000000 inset;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box
}

.box-top {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box
}

/* fadeUp */

.fadeup{
  animation-name:fadeup;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeup{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /* fadeLEFT */
  
  .fadeleft{
    animation-name:fadeleft;
    animation-duration:2s;
    animation-fill-mode: forwards ;
    opacity:0;
    }
    
    @keyframes fadeleft{
      from {
        opacity: 0;
      transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }
  
    /* fadeRight */
  
  .faderight{
    animation-name:faderight;
    animation-duration:2s;
    animation-fill-mode: forwards ;
    opacity:0;
    }
    
    @keyframes faderight{
      from {
        opacity: 0;
      transform: translateX(100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }

        /* fadedown */
  
  .fadedown{
    animation-name:fadedown;
    animation-duration:2s;
    animation-fill-mode: forwards ;
    opacity:0;
    }
    
    @keyframes fadedown{
      from {
        opacity: 0;
      transform: translateY(-100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }
  
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fade-up{
      opacity: 0;
  }
  
  .fade-left{
    opacity: 0;
  }
  
  .fade-right{
    opacity: 0;
  }

  .fade-down{
    opacity: 0;
  }