@charset "utf-8";

/* アニメーション */
/* プルプル */
.purupuru {	animation: purupuru 3s ease 5s infinite;}
@-webkit-keyframes purupuru {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

/* 右からスライドイン */
.slide-right {animation: slide-right 2s 1 ease-in-out;}
@-webkit-keyframes slide-right {
	0%   {opacity: 0; right: -400px;}
	90%  {opacity: 0; right: -400px;}
	95%  {opacity: 0.5; right: 20px;}
	100% {opacity: 1; right: 0px;}
}

/* 左からスライドイン */
.slide-left {animation: slide-left 2s 1 ease-in-out;}
@-webkit-keyframes slide-left {
	0%   {opacity: 0; left: -400px;}
	90%  {opacity: 0; left: -400px;}
	95%  {opacity: 0.5; left: 20px;}
	100% {opacity: 1; left: 0px;}
}

/* 下からスライドイン */
.slide-bottom {animation: slide-bottom 0.5s 1 ease-in-out;}
@-webkit-keyframes slide-bottom {
	0%   {opacity: 0; bottom: -400px;}
	90%  {opacity: 0; bottom: -400px;}
	95%  {opacity: 0.5; bottom: 20px;}
	100% {opacity: 1; bottom: 0px;}
}

/* ズームイン */
.zoomin {animation: zoomin 4s 1 ease-in-out;}
@-webkit-keyframes zoomin {
	0%   {opacity: 0; transform: scale(0);}
	90%  {opacity: 0; transform: scale(0);}
	95%  {opacity: 0.5; transform: scale(1.2);}
	100% {opacity: 1; transform: scale(1);}
}

/* ホバーでキラリ */
.kirari {
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
}
.kirari::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
	transition: cubic-bezier(0.32, 0, 0.67, 0);
	z-index:1000;
}
.kirari:hover::before {
  animation: kirari 0.5s linear 1;
}

@keyframes kirari {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/* パラパラ漫画（6コマ） */
	.parapara6 {
	position: absolute;
	bottom:5px;
	left:10px;
	width: 130px;
	height: 166px;
	margin: 0;
	background: url(images/run/img104_sprite.png) no-repeat;
	z-index:1;
  animation: parapara6 .8s steps(6) infinite;
}
@keyframes parapara6 {
  to {
    background-position: -792px 0;
  }
}

/* パラパラ漫画（2コマ） */
.parapara2 {
	position: absolute;
	bottom:-50px;
	left:100px;
	 width: 100px;
	height: 75px;
	margin: 0;
	background: url(images/click.png) no-repeat;
	z-index:1;
  animation: parapara2 .8s steps(2) infinite;
}
@keyframes parapara2 {
  to {
    background-position: -200px 0;
  }
}

/* 流れる文字 */


/* タイピング */
.typing {
	width: 15.5ch;	/*文字の長さ*/
	border-right: 1px solid #000;	/*点滅バー*/
	overflow: hidden;	/*必須*/
	white-space: nowrap;	/*必須*/
	color:#fff;
	text-shadow: 3px 3px 4px grey, -2px -2px 4px grey;
	font-size:3.5rem;
	line-height:1.4;
	font-weight:700;
	animation: typing 3s steps(11), blink .4s step-end infinite alternate;	/*アニメーション関連*/
}
@keyframes typing {
	from {
		width: 0;
	}
}
@keyframes blink {
	50% {
		border-color: transparent;		/*点滅風に見せる*/
	}
}