@charset "utf-8";

/* Animation
------------------------------------------ */

/* load-anime */
.first {
  position: fixed;
  top: 0;
  left: 0;
  background: #007FFF;
  width: 100%;
  height: 100%;
  z-index: 100;
  -webkit-animation: load-anime 1000ms cubic-bezier(.77,0,.11,1) 400ms both;
          animation: load-anime 1000ms cubic-bezier(.77,0,.11,1) 400ms both;
}
.second {
  position: fixed;
  top: 0;
  left: 0;
  background: #f3f3f5;
  width: 100%;
  height: 100%;
  z-index: 100;
  -webkit-animation: load-anime 1300ms cubic-bezier(.77,0,.11,1) 0ms both;
          animation: load-anime 1300ms cubic-bezier(.77,0,.11,1) 0ms both;
}

.logo01, #header .lo01 .lo0102, .lead01, .lead02 {
	-webkit-animation: load-parts 600ms ease 1100ms both;
			animation: load-parts 600ms ease 1100ms both;
}
.lead01{
	animation-delay: 1.3s;
}
.lead02{
	animation-delay: 1.5s;
}
@-webkit-keyframes load-anime {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes load-anime {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes load-parts {
  0% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
            opacity:0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity:1;
  }
}

@keyframes load-parts {
  0% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
            opacity:0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity:1;
  }
}