@charset "utf-8";

/* アニメーション定義 */

/*-----------------------------------------------------	*/
/*  個別指定 for PC	*/
/*-----------------------------------------------------	*/


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

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

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

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

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

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

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

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



@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}


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

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

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

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



@keyframes time {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

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

@-webkit-keyframes time {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

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






/*---------------------------------------------
 ** フェードインアニメーション
---------------------------------------------*/


.service_itme:nth-of-type(1) {
  -webkit-animation: header 1s ease 0.8s;
  -moz-animation: header 1s ease 0.8s;
  animation: header 1s ease 0.8s;
  ;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;

}

.service_itme:nth-of-type(2) {
  -webkit-animation: header 1.3s ease 1.3s;
  -moz-animation: header 1.3s ease 1.3s;
  animation: header 1.3s ease 1.3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;

}

.service_itme:nth-of-type(3) {
  -webkit-animation: header 1s ease 1.8s;
  -moz-animation: header 1s ease 1.8s;
  animation: header 1s ease 1.8s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.igi {
  -webkit-animation: time 1s ease 2.6s;
  -moz-animation: time 1s ease 2.6s;
  animation: time 1s ease 2.6s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;

}

.double_line {
  -webkit-animation: up 1s ease 3.2s;
  -moz-animation: up 1s ease 3.2s;
  animation: up 1s ease 3.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;

}

.main_h2_01 {
  -webkit-animation: up 3s ease 3.4s;
  -moz-animation: up 3s ease 3.4s;
  animation: up 3s ease 3.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.main_h2_01_p {
  -webkit-animation: up 3s ease 3.6s;
  -moz-animation: up 3s ease 3.6s;
  animation: up 3s ease 3.6s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;

}







body#top {
  animation: none;
}

body {
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}



/*---------------------------------------------
 **  アニメーション
---------------------------------------------*/

.fadeUpTrigger {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

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


.box {
  opacity: 0;
}