.zoomin {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 1, 1) 1 forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 100% {
    transform: scale(1.4);
  }
  50%, 70% {
    transform: scale(1.2);
  }
}

.fuwa {
  animation: fuwa 3s infinite ease-in-out .10s alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
}

@keyframes fuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

.slidein{
  animation: slideIn 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(70px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.puyon {
  animation: puyon 1.5s linear 0s 1 ;
  animation-iteration-count:infinite;
}


.reflection{
display:inline-block;
position:relative;
overflow:hidden;
z-index: 200;
border-radius: 100px;
}

.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
z-index: 200;
}

@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


/* 拡大・縮小 */

.keyframe5{
	animation-name: anim_sc;
	transform: scale(0.95,0.95);
}
@keyframes anim_sc {
	100% {
		transform: scale(1,1);
	}
}

.animation{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 0.7s;
}





/*点滅*/

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

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

	50% {
		opacity: 0.5;
	}
}




/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
.fuwafuwa {
	-webkit-animation-name: fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function: ease;
	-moz-animation-name: fuwafuwa;
	-moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function: ease;
}
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -5px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -5px);}
	100% {-moz-transform:translate(0, 0);}
}



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

.header_icon {
	transform-origin:center top;
	animation:show 1s both;
}

@keyframes show {
 0% {
   transform:translate(0,2em);
   opacity:0;
   text-shadow:0 0 0 #0f0;
 }
 50% {
   text-shadow:0 0 0.5em #0f0;
 }
 100% {
   transform:translate(0,0);
   opacity:1;
   text-shadow:none;
 }
}


span.header_icon {display:inline-block;}
.img1 {animation-delay:0.5s;}


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

.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}




/*--- 拡大・縮小 ---*/
.keyframe {
	animation-name: anim_sc;
	transform: scale(0.9, 0.9);
}

@keyframes anim_sc {
	100% {
		transform: scale(1, 1);
	}
}

.animation {
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1s;
}



   .btn_animation {
     margin: 0 auto;
     max-width: 100%;
     display: block;
     cursor: pointer;
     border-radius: 500px;
     -webkit-animation: btnwrapanime 11s infinite;
     animation: btnwrapanime 1.5s infinite;
     -webkit-box-shadow: 0 0 0 0 rgba(30, 70, 196, 1);
     box-shadow: 0 0 0 0 rgba(30, 70, 196, 1); }
   @-webkit-keyframes btnwrapanime {
     70% {
       -webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
       box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
     100% {
       -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
       box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
   @keyframes btnwrapanime {
     70% {
       -webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
       box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
     100% {
       -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
       box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
     @media (max-width: 750px) {
       @-webkit-keyframes btnwrapanime {
         70% {
           -webkit-box-shadow: 0 0 0 25px rgba(233, 30, 99, 0);
           box-shadow: 0 0 0 25px rgba(233, 30, 99, 0); }
         100% {
           -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
           box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
       @keyframes btnwrapanime {
         70% {
           -webkit-box-shadow: 0 0 0 25px rgba(233, 30, 99, 0);
           box-shadow: 0 0 0 25px rgba(233, 30, 99, 0); }
         100% {
           -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
           box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } } }


           .puyon {
             animation: puyon 1.5s linear 0s 1 ;
             animation-iteration-count:infinite;
           }

           @keyframes puyon {
             0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
             40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
             50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
             60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
             70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
             80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
             100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
           }