@charset "UTF-8";
/** フェードインアニメーション **/
/* アニメーション前 */
.u-fade-type-up{
    transform: translateY(80px);
    opacity: 0;
}

/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
    transition: 0.8s;
    transform: translateY(0);
    opacity: 1;
}
/** ふわ（その場で） **/
.fadeIn{
    opacity:0;
}
.fadeIn.is-active {
    animation-name:fadeInAnime;
    animation-fill-mode:forwards;
    animation-duration:2.5s;
}
@keyframes fadeInAnime{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/** 順番に表示 **/
.ordering li {
    opacity: 0;
    transform: translateY(40px);
}
.ordering.is-active li {
    transition: 0.5s;
    transform: translateY(0);
    opacity: 1;
}
.ordering.is-active #skillList01 li:nth-of-type(1) {
    transition-delay: 0.3s;
}
.ordering.is-active #skillList01 li:nth-of-type(2) {
    transition-delay: 0.45s;
}
.ordering.is-active #skillList01 li:nth-of-type(3) {
    transition-delay: 0.6s;
}
.ordering.is-active #skillList02 li:nth-of-type(1) {
    transition-delay: 0.75s;
}
.ordering.is-active #skillList02 li:nth-of-type(2) {
    transition-delay: 0.9s;
}
.ordering.is-active #skillList02 li:nth-of-type(3) {
    transition-delay: 1.05s;
}
.ordering.is-active #skillList02 li:nth-of-type(4) {
    transition-delay: 1.2s;
}

/* 光りながら順番に表示するアニメーション */
.glowAnime span{
    opacity: 0;
}
/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{
    animation:glow_anime_on 1s ease-out forwards;
}

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	70% { 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;}
}
.glowAnime span:nth-of-type(1) {
    animation-delay: 0.3s;
}
.glowAnime span:nth-of-type(2) {
    animation-delay: 0.4s;
}
.glowAnime span:nth-of-type(3) {
    animation-delay: 0.5s;
}
.glowAnime span:nth-of-type(4) {
    animation-delay: 0.6s;
}
.glowAnime span:nth-of-type(5) {
    animation-delay: 1s;
    margin-left: 150px;
}
.glowAnime span:nth-of-type(6) {
    animation-delay: 1.1s;
}
.glowAnime span:nth-of-type(7) {
    animation-delay: 1.2s;
}
.glowAnime span:nth-of-type(8) {
    animation-delay: 1.3s;
}
.glowAnime span:nth-of-type(9) {
    animation-delay: 1.4s;
}
.glowAnime span:nth-of-type(10) {
    animation-delay: 1.5s;
}
.glowAnime span:nth-of-type(11) {
    animation-delay: 1.6s;
}
.glowAnime span:nth-of-type(12) {
    animation-delay: 1.7s;
}
.glowAnime span:nth-of-type(13) {
    animation-delay: 1.8s;
}

/* スクロールアニメーション */
header .scroll {
    font-size: 16px;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
}
header .scroll img {
      margin-top: 8px;
}
@keyframes scrollAnimation {
    0% {
    transform: scaleY(0);
    transform-origin: top;
    }
    50% {
    transform: scaleY(1);
    transform-origin: top;
    }
    50.1% {
    transform: scaleY(1);
    transform-origin: bottom;
    }
    100% {
    transform: scaleY(0);
    transform-origin: bottom;
    }
}
header .scroll img {
    animation-name: scrollAnimation;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}  
@media only screen and (max-width:480px) {
    header .scroll {
        font-size: 13px;
          left: 0;
          bottom: 20%;
    }
}