@charset "UTF-8";

/* -----------------ANIMATION----------------- */
.fuwafuwa {
  -webkit-animation-name: fuwafuwa;
  /* fuwafuwaっていうアニメーションをしてね！ */
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  /*-webkit-animation-direction:alternate;*/
  -webkit-animation-timing-function: ease;
  -moz-animation-name: fuwafuwa;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  /*-moz-animation-direction:alternate;*/
  -moz-animation-timing-function: ease; }

/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -10px); }
  100% {
    -webkit-transform: translate(0, 0); } }
@-moz-keyframes fuwafuwa {
  0% {
    -moz-transform: translate(0, 0); }
  50% {
    -moz-transform: translate(0, -10px); }
  100% {
    -moz-transform: translate(0, 0); } }


/* fadeinアニメーション */
.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s; }

.fadeintop {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 1s; }

.fadeinleft {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1s; }

.fadeinright {
  opacity: 0;
  transform: translateX(50px);
  transition: all 1s; }

  .headfade {
    animation: headfade 3s infinite;
      animation-duration: 2s;
      animation-iteration-count: 1;
  }
  @keyframes headfade {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
  }

  .headfadetop {
    animation: headfadetop 3s 1;
      animation-duration: 2s;
      animation-iteration-count: 1;
  }
  @keyframes headfadetop {
  from {
      opacity: 0;
      transform: translateY(-20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
  }

  .headfadelate {
    animation: headfadelate 3s 1;
      animation-duration: 2s;
      animation-iteration-count: 1;
  }
  @keyframes headfadelate {
    0% {
      opacity: 0;
      transform: translateY(60px);}
    50% {
      opacity: 0.5;
      transform: translateY(25px);}
    100% {
      opacity: 1;
      transform: translateY(0);}
  }


/* バウンド */
.bound {
  animation: bound 3s infinite;
}
@keyframes bound {
  0% {
    transform: translateY(0); }
  5% {
    transform: translateY(0); }
  10% {
    transform: translateY(0); }
  20% {
    transform: translateY(-25px); }
  25% {
    transform: translateY(0); }
  30% {
    transform: translateY(-15px); }
  50% {
    transform: translateY(0); }
  100% {
    transform: translateY(0); }
  }


  .btnbound {
    animation: btnbound 3s infinite;
  }
  @keyframes btnbound {
    0% {
      transform: translateX(0); }
    5% {
      transform: translateX(0); }
    10% {
      transform: translateX(0); }
    20% {
      transform: translateX(-25px); }
    25% {
      transform: translateX(0); }
    30% {
      transform: translateX(-15px); }
    50% {
      transform: translateX(0); }
    100% {
      transform: translateX(0); }
    }


  .buruburu {
  	animation: buruburu 2s infinite;
  }
  @keyframes buruburu {
  	0% {
  		transform: translate(0px, 2px);
  	}
  	5% {
  		transform: translate(0px, -2px);
  	}
  	10% {
  		transform: translate(0px, 2px);
  	}
  	15% {
  		transform: translate(0px, -2px);
  	}
  	20% {
  		transform: translate(0px, 2px);
  	}
  	25% {
  		transform: translate(0px, -2px);
  	}
  	30% {
  		transform: translate(0px, 0px);
  	}
  	}


    .c-marker {
        background: -webkit-linear-gradient(left, rgb(254,214,15) 50%, transparent 50%);
        background: -moz-linear-gradient(left, rgb(254,214,15) 50%, transparent 50%);
        background: linear-gradient(left, rgb(254,214,15) 50%, transparent 50%);
      background-repeat: no-repeat;
      background-size: 200% 9em;
        background-position: 100% .5em;
        transition: 2s;
    }
    .c-marker.is-active{
        background-position: 0% .5em;
    }

    /* 点滅 */

    .flash{
      animation: flash 2s linear infinite;
    }

    @keyframes flash {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }


      100% {
        opacity: 1;
      }
    }


/* pururun */
    .pururun {
    	animation-timing-function: ease-in-out;
    	animation-iteration-count: infinite;
    	animation-direction: alternate;
    	animation-duration: 1s;
      animation: skew 2.3s linear infinite;
    }

    @keyframes skew {
           0% {transform: skew(0deg, 0deg);}
           5% {transform: skew(5deg, 4.2deg);}
           10% {transform: skew(-4deg, -3deg);}
           15% {transform: skew(3deg, 2.2deg);}
           20% {transform: skew(-2deg, -1.5deg);}
           25% {transform: skew(0.9deg, 0.9deg);}
           30% {transform: skew(-0.6deg, -0.6deg);}
           35% {transform: skew(0.3deg, 0.3deg);}
           40% {transform: skew(-0.2deg, -0.2deg);}
           45% {transform: skew(0.1deg, 0.1deg);}
           50% {transform: skew(0deg, 0deg);}
       }

/* mocchiri */
       .mocchiri {
    animation: mocchiri 3s infinite;
}
@keyframes mocchiri {
    0% {
        transform: scale(1, 0.9);
    }
    20% {
        transform: scale(0.9, 1.1);
    }
    95% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 0.9);
    }
}