/* Default フェードイン */
.delighter {
   transition: all 2s ease-out;
   opacity: 0;
}

.delighter.started {
   -webkit-transform: none;
   transform: none;
   opacity: 0;
}

.delighter.started.ended {
   -webkit-transform: none;
   transform: none;
   opacity: 1;
}

/* photo */

.about-photo.delighter {
   transition: all 1s ease-out;
   opacity: 0;
}

.about-photo.delighter.started {
   opacity: 0;
}

.about-photo.delighter.started.ended {
   opacity: 1;
}

.message-photo.delighter {
   transition: all 1s ease-out;
   opacity: 0;
}

.message-photo.delighter.started {
   opacity: 0;
}

.message-photo.delighter.started.ended {
   opacity: 1;
}




/* photo-txt */
@media screen and (min-width: 1300px) {
   .about-txt.delighter {
      transition: all 1s ease-out;
      -webkit-transform: translate(50px, -50%) skew(-10deg);
      transform: translate(50px, -50%) skew(-10deg);
      opacity: 0;
   }

   .about-txt.delighter.started {
      -webkit-transform: translate(0, -50%) skew(-10deg);
      transform: translate(0, -50%) skew(-10deg);
      opacity: 0;
   }

   .about-txt.delighter.started.ended {
      -webkit-transform: translate(0, -50%) skew(-10deg);
      transform: translate(0, -50%) skew(-10deg);
      opacity: 1;
   }

   .message-txt.delighter {
      transition: all 1s ease-out;
      -webkit-transform: translate(-110%, -50%) skew(-10deg);
      transform: translate(-110%, -50%) skew(-10deg);
      opacity: 0;
   }

   .message-txt.delighter.started {
      -webkit-transform: translate(-100%, -50%) skew(-10deg);
      transform: translate(-100%, -50%) skew(-10deg);
      opacity: 0;
   }

   .message-txt.delighter.started.ended {
      -webkit-transform: translate(-100%, -50%) skew(-10deg);
      transform: translate(-100%, -50%) skew(-10deg);
      opacity: 1;
   }

   /* photo */

   .about-photo.delighter {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .about-photo.delighter.started {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .about-photo.delighter.started.ended {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .message-photo.delighter {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .message-photo.delighter.started {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .message-photo.delighter.started.ended {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   /* voicelist */
   .voicelist li.delighter {
      transition: all 2s ease-out .1s;
      transform: none;
      opacity: 0;
   }

   .voicelist li.delighter.started {
      -webkit-transform: none;
      transform: none;
      opacity: 0;
   }

   .voicelist li.delighter.started.ended {
      -webkit-transform: none;
      transform: none;
      opacity: 1;
   }
}

@media screen and (min-width: 768px) and (max-width: 1299px) {
   .about-txt.delighter {
      transition: all 1s ease-out;
      -webkit-transform: translateX(50px) skew(-10deg);
      transform: translateX(50px) skew(-10deg);
      opacity: 0;
   }

   .about-txt.delighter.started {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
      opacity: 0;
   }

   .about-txt.delighter.started.ended {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
      opacity: 1;
   }

   .message-txt.delighter {
      transition: all 1s ease-out;
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
      opacity: 0;
   }

   .message-txt.delighter.started {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
      opacity: 0;
   }

   .message-txt.delighter.started.ended {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
      opacity: 1;
   }

   /* photo */

   .about-photo.delighter {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .about-photo.delighter.started {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .about-photo.delighter.started.ended {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .message-photo.delighter {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .message-photo.delighter.started {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }

   .message-photo.delighter.started.ended {
      -webkit-transform: skew(-10deg);
      transform: skew(-10deg);
   }
}


@media screen and (max-width: 767px) {
   .about-txt.delighter {
      transition: all 1s ease-out;
      -webkit-transform: translateX(50px) skew(-5deg)scale(0.9);
      transform: translateX(50px) skew(-5deg)scale(0.9);
      opacity: 0;
   }

   .about-txt.delighter.started {
      -webkit-transform: skew(-5deg)scale(0.9);
      transform: skew(-5deg)scale(0.9);
      opacity: 0;
   }

   .about-txt.delighter.started.ended {
      -webkit-transform: skew(-5deg)scale(0.9);
      transform: skew(-5deg)scale(0.9);
      opacity: 1;
   }

   .message-txt.delighter {
      transition: all 1s ease-out;
      -webkit-transform: translateX(-50px) skew(-5deg)scale(0.9);
      transform: translateX(-50px) skew(-5deg)scale(0.9);
      opacity: 0;
   }

   .message-txt.delighter.started {
      -webkit-transform: skew(-5deg)scale(0.9);
      transform: skew(-5deg)scale(0.9);
      opacity: 0;
   }

   .message-txt.delighter.started.ended {
      -webkit-transform: skew(-5deg)scale(0.9);
      transform: skew(-5deg)scale(0.9);
      opacity: 1;
   }
}