/*==================================================
アニメーション
===================================*/
 /* その場で */
 .fadeIn {
   animation-name: fadeInAnime;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeInAnime {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 /* 下から */
 .fadeUp {
   animation-name: fadeUpAnime;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeUpAnime {
   from {
     opacity: 0;
     transform: translateY(50px);
   }

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

 /* 下から2 */
 .fadeUp2 {
   animation-name: fadeUpAnime2;
   animation-duration: 1.5s;
   animation-delay: 1s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeUpAnime2 {
   from {
     opacity: 0;
     transform: translateY(50px);
   }

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

 /* 下から3 */
 .fadeUp3 {
   animation-name: fadeUpAnime2;
   animation-duration: 1.5s;
   animation-delay: 2s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeUpAnime3 {
   from {
     opacity: 0;
     transform: translateY(50px);
   }

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

 /* 上から */
 .fadeDown {
   animation-name: fadeDownAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeDownAnime {
   from {
     opacity: 0;
     transform: translateY(-50px);
   }

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

 /* 左から */
 .fadeLeft {
   animation-name: fadeLeftAnime;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeLeftAnime {
   from {
     opacity: 0;
     transform: translateX(-50px);
   }

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

 /* 右から */
 .fadeRight {
   animation-name: fadeRightAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeRightAnime {
   from {
     opacity: 0;
     transform: translateX(50px);
   }

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

 /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeInTrigger,
 .fadeUpTrigger,
 .fadeUpTrigger2,
 .fadeUpTrigger3,
 .fadeDownTrigger,
 .fadeLeftTrigger,
 .fadeRightTrigger {
   opacity: 0;
 }

 .mfp-bg {
   opacity: 0;
   transition: opacity 1s;
 }

 .mfp-bg.mfp-ready {
   opacity: 0.8;
 }

 .mfp-bg.mfp-removing {
   opacity: 0;
 }

 .mfp-wrap .mfp-content {
   opacity: 0;
   transition: opacity 1s;
 }

 .mfp-wrap.mfp-ready .mfp-content {
   opacity: 1;
 }

 .mfp-wrap.mfp-removing .mfp-content {
   opacity: 0;
 }