@charset "UTF-8";
/***************************

メインビジュアルアニメーション

****************************/
.kvAnimetion0 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: kvAnime0;
 -ms-animation-name: kvAnime0;
 animation-name: kvAnime0;
 visibility: visible !important;
}
@keyframes kvAnime0 {
 0% { opacity: 0; }
 100% { opacity: 1; }
}

.kvAnimetion1 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:3s;
 -ms-animation-duration:3s;
 animation-duration:3s;
 animation-delay: 1s;
 -webkit-animation-delay: 1s;	
 -ms-animation-delay: 1s;	
 -webkit-animation-name: kvAnime1;
 -ms-animation-name: kvAnime1;
 animation-name: kvAnime1;
 visibility: visible !important;
}
@-webkit-keyframes kvAnime1 {
 0% { opacity: 0; -webkit-transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes kvAnime1 {
 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.kvAnimetion2 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:3.5s;
 -ms-animation-duration:3.5s;
 animation-duration:3.5s;
 animation-delay: 1s;
 -webkit-animation-delay: 1s;	
 -ms-animation-delay: 1s;	
 -webkit-animation-name: kvAnime2;
 -ms-animation-name: kvAnime2;
 animation-name: kvAnime2;
 visibility: visible !important;
}
@-webkit-keyframes kvAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes kvAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/***************************

スクロールアニメーション

****************************/
.scAnimetion1 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:3s;
 -ms-animation-duration:3s;
 animation-duration:3s;
 -webkit-animation-name: scAnime1;
 -ms-animation-name: scAnime1;
 animation-name: scAnime1;
 visibility: visible !important;
}
@-webkit-keyframes scAnime1 {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes scAnime1 {
 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.scAnimetion2 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:3s;
 -ms-animation-duration:3s;
 animation-duration:3s;
 -webkit-animation-name: scAnime2;
 -ms-animation-name: scAnime2;
 animation-name: scAnime2;
 visibility: visible !important;
}
@-webkit-keyframes scAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes scAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.scAnimetion3 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:3s;
 -ms-animation-duration:3s;
 animation-duration:3s;
 -webkit-animation-name: scAnime3;
 -ms-animation-name: scAnime3;
 animation-name: scAnime3;
 visibility: visible !important;
}
@-webkit-keyframes scAnime3 {
 0% { opacity: 0; -webkit-transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes scAnime3 {
 0% { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.scAnimetion4 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:3s;
 -ms-animation-duration:3s;
 animation-duration:3s;
 -webkit-animation-name: scAnime4;
 -ms-animation-name: scAnime4;
 animation-name: scAnime4;
 visibility: visible !important;
}
@-webkit-keyframes scAnime4 {
 0% { opacity: 0; -webkit-transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes scAnime4 {
 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}



@media screen and (min-width: 769px) {

}

@media screen and (max-width: 768px) {

}

.scAnimation5 .scAnime5_step {
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-ms-animation-duration:1.5s;
	animation-duration:1.5s;
	-ms-animation-name: scAnime5;
	animation-name: scAnime5;
	visibility: visible !important;
   }
   @keyframes scAnime5 {
    0% { opacity: 0; }
    20% { opacity: 0;}
    100% { opacity: 1;}
}

.scAnimation5 .scAnime5_step:nth-child(1) {
  animation-delay:0s;
}
.scAnimation5 .scAnime5_step:nth-child(2) {
  animation-delay:0.5s;
}
.scAnimation5 .scAnime5_step:nth-child(3) {
  animation-delay:1.0s;
}
.scAnimation5 .scAnime5_step:nth-child(4) {
  animation-delay:1.5s;
}
.scAnimation5 .scAnime5_step:nth-child(5) {
  animation-delay:2.0s;
}

.scAnimation5.trying_on_3merit_area  .scAnime5_step:nth-child(1) {
  animation-delay:0.5s;
}
.scAnimation5.trying_on_3merit_area  .scAnime5_step:nth-child(2) {
  animation-delay:1.0s;
}
.scAnimation5.trying_on_3merit_area  .scAnime5_step:nth-child(3) {
  animation-delay:1.5s;
}