@charset "utf-8";
/* CSS Document */

/*■■■■■■■■　animation　■■■■■■■■*/

body{
  opacity: 0;
  transition-delay: 0.2s;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1); 
}

body.moving{
  opacity: 1;
}

#top .mv:after,
#top .sec01:after{
  width:0;
  transition-delay: 0.4s;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1); 
}

#top .mv.moving:after,
#top .sec01.moving:after{
  width:35.15%;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1); 
}


#top .mv h2 span{
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition:all 0.8s cubic-bezier(0.22, 0.94, 0.44, 1); 
}

#top .mv.moving h2 span:nth-child(1){
  transition-delay: 0.2s;
}
#top .mv.moving h2 span:nth-child(2){
  transition-delay: 0.4s;
}
#top .mv.moving h2 span:nth-child(3){
  transition-delay: 0.6s;
}

#top .mv.moving h2 span{
  opacity: 1;
  transform: scaleX(1.0);
}



#top .mv h2 span img{
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1); 
}

#top .mv.moving h2 span:nth-child(1) img{
  transition-delay: 0.7s;
}
#top .mv.moving h2 span:nth-child(2) img{
  transition-delay: 0.9s;
}
#top .mv.moving h2 span:nth-child(3) img{
  transition-delay: 1.1s;
}

#top .mv.moving h2 span img{
  opacity: 1;
}


#top .sec01 h2{
  transform: translateY(-50px);
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec01.moving h2{
  transition-delay: 1s;
  transform: translateY(0);
  opacity: 1;
}



#top .sec01 .fig01{
  transform-origin: right;
  transform: translateX(500px);
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1); 
}

#top .sec01.moving .fig01{
  transform: translateX(0);
  opacity: 1;
}

#top .sec01 .fig02:after,
#top .sec02:after{
  transform: scaleX(0);
  transform-origin: right;
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}

#top .sec01 .fig02.moving:after,
#top .sec02.moving:after{
  transform: scaleX(1);
  opacity: 1;
}



#top .sec01 .about_text{
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1); 
}
#top .sec01 .about_text.moving{
  transition-delay:0.2s;
  opacity: 1; 
}

#top .sec01 .about_text p{
  opacity: 0;
  transform: translateX(50px);
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1); 
}
#top .sec01 .about_text.moving p{
  transition-delay:0.4s;
  transform: translateX(0);
  opacity: 1; 
}


#top .sec01 .fig02 .left{
  opacity: 0;
  transform: translateX(-100px);
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec01 .fig02.moving .left{
  opacity: 1;
  transform: translateX(0);
}


#top .sec01 .fig02 .right{
  opacity: 0;
  transform: translateX(100px);
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec01 .fig02.moving .right{
  opacity: 1;
  transform: translateX(0);
}

#top .sec01 .fig02 .left h3,
#top .sec01 .fig02 .left_txt h3{
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec01 .fig02.moving .left h3,
#top .sec01 .fig02.moving .left_txt h3{
  transition-delay:0.6s;
  opacity: 1;
}
#top .sec01 .fig02 .right h3,
#top .sec01 .fig02 .right_txt h3{
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec01 .fig02.moving .right h3,
#top .sec01 .fig02.moving .right_txt h3{
  transition-delay:0.6s;
  opacity: 1;
}
#top .sec01 .fig02 .wrap figure{
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);

}
#top .sec01 .fig02.moving .wrap figure{
  transition-delay:0.2s;
  opacity: 1;
}


#top .sec02 h2{
  transform: translateY(-30px);
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec02.moving h2{
  transition-delay: 1s;
  transform: translateY(0);
  opacity: 1;
}


#top .sec02 .about_text{
  opacity: 0;
  transform: translateX(-100px);
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec02.moving .about_text{
  transform: translateX(0);
  transition-delay: 1s;
  opacity: 1;
}


#top .sec02 .about_text h3{
  opacity: 0;
  transition:all 1.2s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec02.moving .about_text h3{
  opacity: 1;
}

#top .sec02 h3 span:first-child:after,
#top .sec02 h3 span:last-child:after{
  opacity: 0;
  transform-origin: left;
  transform: scaleX(0);
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec02.moving h3 span:first-child:after,
#top .sec02.moving h3 span:last-child:after{
  transform: scaleX(1);
  opacity: 1;
}


#top .sec02.moving h3 span:first-child:after{transition-delay: 1s;}
#top .sec02.moving h3 span:last-child:after{transition-delay: 1.2s;}


#top .sec02 .profile{
  opacity: 0;
  transform-origin: right;
  transform: translateX(50px);
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}

#top .sec02 .profile.moving{
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.5s;
}

#top .sec02 .profile .wrap figure{
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}

#top .sec02 .profile.moving .wrap figure{
  opacity: 1;
  transition-delay: 1s;
}

#top .sec02 .btn{
  opacity: 0;
  transition:all 0.8s cubic-bezier(0.22, 0.94, 0.44, 1);
}

#top .sec02 .btn.moving{
  opacity: 1;
  transition-delay: 0.5s;
}


#top .sec03 h2{
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}

#top .sec03.moving h2{
  opacity: 1;
  transition-delay: 0.2s;
}

#top .sec03:after{
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec03.moving:after{
  transform: scaleY(1);
  opacity: 1;
  transition-delay: 0.2s;
}

#top .sec03 .company_text ul li{
  opacity: 0;
  transition:all 1.5s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec03.moving .company_text ul li{
  opacity: 1;
}

#top .sec03.moving .company_text ul li:nth-child(1){transition-delay: 0.5s;}
#top .sec03.moving .company_text ul li:nth-child(2){transition-delay: 0.55s;}
#top .sec03.moving .company_text ul li:nth-child(3){transition-delay: 0.6s;}
#top .sec03.moving .company_text ul li:nth-child(4){transition-delay: 0.65s;}
#top .sec03.moving .company_text ul li:nth-child(5){transition-delay: 0.7s;}
#top .sec03.moving .company_text ul li:nth-child(6){transition-delay: 0.75s;}
#top .sec03.moving .company_text ul li:nth-child(7){transition-delay: 0.8s;}
#top .sec03.moving .company_text ul li:nth-child(8){transition-delay: 0.85s;}

#top .sumai_btn{
  opacity: 0;
  transition:all 1.5s cubic-bezier(0.22, 0.94, 0.44, 1);
}

#top .sumai_btn.moving{
  opacity: 1;
  transition-delay: 0.4s;
}


#top .sec04{
  opacity: 0;
  transition:all 1s cubic-bezier(0.22, 0.94, 0.44, 1);
}
#top .sec04.moving{
  opacity: 1;
  transition-delay: 0.4s;
  
}