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

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

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

/* フェードイン LOGO */
#about img,
#studio {
   -webkit-animation: toplogo 1.5s ease-in 0.3s both;
   animation: toplogo 1.5s ease-in 0.3s both;
   ;
}

@-webkit-keyframes toplogo {
   0% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 0;
   }

   100% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1;
   }
}

@keyframes toplogo {
   0% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 0;
   }

   100% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1;
   }
}

/* About our Company */
#about h2 {
   -webkit-animation: aboutti 1s ease-in 1s both;
   animation: aboutti 1s ease-in 1s both;
   ;
}

@-webkit-keyframes aboutti {
   0% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 0;
   }

   100% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1;
   }
}

@keyframes aboutti {
   0% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 0;
   }

   100% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1;
   }
}

/* About text */
#about p {
   -webkit-animation: aboutp 1.2s ease-in-out 1.3s both;
   animation: aboutp 1.2s ease-in-out 1.3s both;
   ;
}

@-webkit-keyframes aboutp {
   0% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
   }

   100% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1;
   }
}

@keyframes aboutp {
   0% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
   }

   100% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1;
   }
}

/* フェードイン */
.btn.delighter,
.contact-wrap.delighter {
   transition: all 0.7s ease-out;
   opacity: 0;
}

.btn.delighter.started,
.contact-wrap.started {
   -webkit-transform: none;
   opacity: 0;
}

.btn.delighter.started.ended,
.contact-wrap.started.ended {
   -webkit-transform: none;
   opacity: 1;
}

/* 下から上に */
.page-title.delighter {
   transition: all 0.7s ease-out;
   -webkit-transform: translateY(20px);
   transform: translateY(20px);
   opacity: 0;
}

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

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

/* 下から上に delay */
#works h3.delighter,
.works-wrap a.delighter,
.contact-st.delighter,
.archive-subnav.delighter,
.archive-wrap div.delighter {
   transition: all 0.7s ease-out 0.1s;
   -webkit-transform: translateY(20px);
   transform: translateY(20px);
   opacity: 0;
}

#works h3.delighter.started,
.works-wrap a.delighter.started,
.contact-st.delighter.started,
.archive-subnav.delighter.started,
.archive-wrap div.delighter.started {
   -webkit-transform: none;
   transform: none;
   opacity: 0;
}

#works h3.delighter.started.ended,
.works-wrap a.delighter.started.ended,
.contact-st.delighter.started.ended,
.archive-subnav.delighter.started.ended,
.archive-wrap div.delighter.started.ended {
   -webkit-transform: none;
   transform: none;
   opacity: 1;
}

/* 下から上に delay0.5 */
.archive-wrap div.delighter {
   transition: all 0.7s ease-out 0.5s;
   -webkit-transform: translateY(20px);
   transform: translateY(20px);
   opacity: 0;
}

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

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