/* アニメーションのスタイルシートです */
/* animation: name | duration | function | delay | count | state; */

.fade-in-slow-01 {
  opacity: 0;
  -webkit-animation: fadein 2s ease 0s 1 forwards;
  animation: fadein 2s ease 0s 1 forwards;
 }
 
.fade-in-slow-02 {
  opacity: 0;
  -webkit-animation: fadein 2s ease 0.5s 1 forwards;
  animation: fadein 2s ease 0.5s 1 forwards;
  }
 
.fade-in-01 {
  opacity: 0;
  }
.fade-in-01.blockIn {
  opacity: 0;
  -webkit-animation: fadein 0.5s ease 0s 1 forwards;
  animation: fadein 0.5s ease 0s 1 forwards;
 }

.fade-in-02 {
  opacity: 0;
 }
.fade-in-02.blockIn {
  opacity: 0;
  -webkit-animation: fadein 0.5s ease 0.5s 1 forwards;
  animation: fadein 0.5s ease 0.5s 1 forwards;
 }

.fade-in-03 {
  opacity: 0;
 }
.fade-in-03.blockIn {
  opacity: 0;
  -webkit-animation: fadein 0.5s ease 1s 1 forwards;
  animation: fadein 0.5s ease 1s 1 forwards;
 }

.fade-in-04 {
  opacity: 0;
 }
.fade-in-04.blockIn {
  opacity: 0;
  -webkit-animation: fadein 0.5s ease 1.5s 1 forwards;
  animation: fadein 0.5s ease 1.5s 1 forwards;
 }

 @-webkit-keyframes fadein {
   100% {
     opacity: 1;
   }
 }
 @keyframes fadein {
   100% {
     opacity: 1;
   }
 }

 /* ====== SP Layout ===== */

@media screen and (max-width: 1024px) {

  .fade-in-01 {
    opacity: 0;
    }
  .fade-in-01.blockIn {
    opacity: 0;
    -webkit-animation: fadein 0.5s ease 0s 1 forwards;
    animation: fadein 0.5s ease 0s 1 forwards;
   }
  
  .fade-in-02 {
    opacity: 0;
   }
  .fade-in-02.blockIn {
    opacity: 0;
    -webkit-animation: fadein 0.5s ease 0.2s 1 forwards;
    animation: fadein 0.5s ease 0.2s 1 forwards;
   }
  
  .fade-in-03 {
    opacity: 0;
   }
  .fade-in-03.blockIn {
    opacity: 0;
    -webkit-animation: fadein 0.5s ease 0.4s 1 forwards;
    animation: fadein 0.5s ease 0.4s 1 forwards;
   }
  
  .fade-in-04 {
    opacity: 0;
   }
  .fade-in-04.blockIn {
    opacity: 0;
    -webkit-animation: fadein 0.5s ease 0.6s 1 forwards;
    animation: fadein 0.5s ease 0.6s 1 forwards;
   }








}