/* -------------------------------------------------- */
/*  パターン１（左から右）
/* -------------------------------------------------- */
.delay.fade-in {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fid;
  animation-name: fid;
  visibility: visible !important;
}
@-webkit-keyframes fid {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fid {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1em);
    -ms-transform: translateX(-1em);
    transform: translateX(-1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

/* -------------------------------------------------- */
/*  パターン２（下から上）
/* -------------------------------------------------- */
.delay2.fade-in {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  -webkit-animation-name: fid2;
  animation-name: fid2;
  visibility: visible !important;
}
@-webkit-keyframes fid2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fid2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1em);
    -ms-transform: translateY(-1em);
    transform: translateY(-1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

/* -------------------------------------------------- */
/*  パターン３（右から左）
/* -------------------------------------------------- */
.delay3.fade-in {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.9s;
  -ms-animation-duration: 1.9s;
  animation-duration: 1.9s;
  -webkit-animation-name: fid3;
  animation-name: fid3;
  visibility: visible !important;
}
@-webkit-keyframes fid3 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fid3 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1em);
    -ms-transform: translateX(1em);
    transform: translateX(1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

/* -------------------------------------------------- */
/*  パターン４（上から下）
/* -------------------------------------------------- */
.delay4.fade-in {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2.1s;
  -ms-animation-duration: 2.1s;
  animation-duration: 2.1s;
  -webkit-animation-name: fid4;
  animation-name: fid4;
  visibility: visible !important;
}
@-webkit-keyframes fid4 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fid4 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1em);
    -ms-transform: translateY(1em);
    transform: translateY(1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}