@import url(./header.css);
@import url(./main.css);
@import url(./footer.css);
*{
    margin: 0;
    padding: 0;
}
.sp{
    display: block;
}
.pc{
    display: none;
}
body{
  background-image: url(../img/img_bg.png);

  background-size:cover;
  background-repeat: no-repeat;

}
a {
text-decoration: none;
}
.view.view-fix,
.view.view-slideup,
.view.view-slidedown,
.view.view-slidein-L,
.view.view-slidein-R {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}


.view.view-slideup.on {
    opacity: 1;
    animation: view-slideup 1s ease both;
  }
  
  @keyframes view-slideup {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .view.view-slidedown.on {
    opacity: 1;
    animation: view-slidedown 1s ease both;
  }
  
  @keyframes view-slidedown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .view.view-slidein-L.on {
    opacity: 1;
    animation: view-slidein-L 1s ease both;
  }
  
  @keyframes view-slidein-L {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .view.view-slidein-R.on {
    opacity: 1;
    animation: view-slidein-R 1s ease both;
  }
  
  @keyframes view-slidein-R {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
@media screen and (min-width: 750px){
    .sp{
        display: none;
    }
    .pc{
        display: block;
    }
}