@charset "UTF-8";

/* ナビアニメーション */
.nav-list a {
    display: inline-block;
    transition: all .3s ease 0s;
    text-decoration: none;
}

.nav-list a:hover {
    cursor: pointer;
}
.heder-fadeIn {
    animation-duration:0.5s;
}
ul.nav-animetion li {
    opacity: 0;
    animation-name: header-fadeIn;
    animation-duration: 2s; 
    animation-fill-mode: forwards; 
}

ul.nav-animetion li:nth-child(1) {
    animation-delay: 0.2s;
}
ul.nav-animetion li:nth-child(2) {
    animation-delay: 0.4s;
}
ul.nav-animetion li:nth-child(3) {
    animation-delay: 0.6s;
}
ul.nav-animetion li:nth-child(4) {
    animation-delay: 0.8s;
}
ul.nav-animetion li:nth-child(5) {
  animation-delay: 1s;
}
ul.nav-animetion li:nth-child(6) {
  animation-delay: 1.2s;
}
ul.nav-animetion li:nth-child(7) {
  animation-delay: 1.4s;
}

    @keyframes header-fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
        }


/* ロゴアニメーション */
.logo{
    animation-name: header-logo-fade;
    animation-duration: 2s;
  }
  
  @keyframes header-logo-fade{
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }

/*その場でふわ */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  .fadein-time1 {
    animation-delay: 1s;
    animation-duration: 2s;
  }

  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  

/* スクロールでふわっと */
.fuwa-fade{
    opacity : 0;
    transition: opacity 3s;
  }
.fuwa-fade.view{
    opacity: 1;
  }



/* フェードアップ */

.fade-up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.fade-up.on {
  transform: translateY(0px);
  opacity: 1.0;
}

.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}
.timing06 {transition-delay: 1s;}



/* トップテキストアニメーション */
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
	@keyframes text_anime_on {
		0% {opacity:0;}
		100% {opacity:1;}
	}


/* ふわふわ */
.fuwafuwa:before {
	animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
	transition: 1.5s ease-in-out;
  }
  
  @keyframes fuwafuwa {
	0% {
	  transform:translate(0, 0) rotate(-7deg);
	}
	50% {
	  transform:translate(0, -7px) rotate(0deg);
	}
	100% {
	  transform:translate(0, 0) rotate(7deg);
	}
  }
  .fuwafuwa2 {
	animation: fuwafuwa2 3s infinite ease-in-out .8s alternate;
	transition: 1.5s ease-in-out;
  }
   

  @keyframes fuwafuwa2 {
	0% {
	  transform:translate(0, 0) rotate(-10deg);
	}
	50% {
	  transform:translate(0, -10px) rotate(0deg);
	}
	100% {
	  transform:translate(0, 0) rotate(10deg);
	}
  }
      
    
/*========= 光りながら出現させるためのCSS ===============*/

.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 3s ease-out forwards; }

@keyframes glow_anime_on{
  0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
  50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
  100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}