@charset "utf-8";
/* Filename：home.css */

body{
  position:relative;
}

/* ++++++++++++++++++++++++++++
 Anime
++++++++++++++++++++++++++++ */

.hashi {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:url(../images/home/chara/hashi.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:2870px;
  left:53%;
  margin-left:300px;
  /* アニメーション */
  animation: animehashi 0.9s steps(4, start) infinite;
  z-index:1000;
}

@keyframes animehashi {
  to{
    background-position: -400px 0;
   }
}

/* ++++++++++++++++++++++++++++
 Monkey
++++++++++++++++++++++++++++ */

.monkey {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/monkey.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top: 1870px;
  left:50%;
  margin-left:320px;
  /* アニメーション */
  animation: animemonkey 2s steps(4) infinite;
}


@keyframes animemonkey {
  to{
    background-position: -400px 0;
   }
}

/* ++++++++++++++++++++++++++++
 Mogura
++++++++++++++++++++++++++++ */

.mogu {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/mogu.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:1300px;
  right:50%;
  margin-right:482px;
  /* アニメーション */
  animation: animemogu 2s steps(4) infinite;
}

@keyframes animemogu {
  to{
    background-position: -400px 0;
   }
}

/* ++++++++++++++++++++++++++++
 Tori
++++++++++++++++++++++++++++ */

.tori {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/tori.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:970px;
  left:50%;
  margin-left:465px;
  /* アニメーション */
  animation: animetori 2s steps(4, start) infinite;
}

@keyframes animetori {
  to{
    background-position: -400px 0;
   }
}


/* ++++++++++++++++++++++++++++
 kuji
++++++++++++++++++++++++++++ */

.kuji {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/kujya.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:2800px;
  right:50%;
  margin-right:-280px;
  /* アニメーション */
  animation: animekuji 2s steps(4) infinite;
}

@keyframes animekuji {
  to{
    background-position: -400px 0;
   }
}


/* ++++++++++++++++++++++++++++
 fura
++++++++++++++++++++++++++++ */

.fura {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/fura.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:2800px;
  right:50%;
  margin-right:-500px;
  /* アニメーション */
  animation: animefura 2s steps(4) infinite;
}

@keyframes animefura {
  to{
    background-position: -400px 0;
   }
}

/* ++++++++++++++++++++++++++++
 kapibara2
++++++++++++++++++++++++++++ */

.kapi2 {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/kapibara-walk.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:2805px;
  right:50%;
  margin-right:-400px;
  /* アニメーション */
  animation: animekapi2 2s steps(4) infinite;
}

@keyframes animekapi2 {
  to{
    background-position: -400px 0;
   }
}


/* ++++++++++++++++++++++++++++
 kapi
++++++++++++++++++++++++++++ */

.kapi {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/kapi.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:1180px;
  right:50%;
  margin-right:450px;
  /* アニメーション */
  animation: animekapi 2s steps(4) infinite;
}

@keyframes animekapi {
  to{
    background-position: -400px 0;
   }
}

/* ++++++++++++++++++++++++++++
 risu
++++++++++++++++++++++++++++ */

.risu {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/risu.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:1670px;
  left:50%;
  margin-left:600px;
  /* アニメーション */
  animation: sprite1 2s steps(4) infinite;
}

@keyframes animearup {
  to{
    background-position: -400px 0;
   }
}

/* ++++++++++++++++++++++++++++
 arupaka
++++++++++++++++++++++++++++ */

.arup {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/arupaka.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:2800px;
  right:50%;
  margin-right:-100px;
  /* アニメーション */
  animation: animearup 1.5s steps(3) infinite;
}

@keyframes animearup {
  to{
    background-position: -300px 0;
   }
}

/* ++++++++++++++++++++++++++++
 Hage
++++++++++++++++++++++++++++ */

.hage {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/hage.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top: 2805px;
  right:50%;
  margin-right:-770px;
  /* アニメーション */
  animation: animehage 1.5s steps(3) infinite;
}

@keyframes animehage {
  to{
    background-position: -300px 0;
  }
}

/* ++++++++++++++++++++++++++++
 Saru-1
++++++++++++++++++++++++++++ */

.saru1 {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/saru1.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top: 2812px;
  right:50%;
  margin-right:-680px;
  /* アニメーション */
  animation: animesaru1 1.5s steps(2) infinite;
}

@keyframes animesaru1 {
  to{
    background-position: -200px 0;
   }
}

/* ++++++++++++++++++++++++++++
 perikan
++++++++++++++++++++++++++++ */

.perik {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/perikan.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:2820px;
  right:50%;
  margin-right:-580px;
  /* アニメーション */
  animation: animeperik 1.5s steps(2) infinite;
}

@keyframes animeperik {
  to{
    background-position: -200px 0;
  }
}

/* ++++++++++++++++++++++++++++
 risuzaru
++++++++++++++++++++++++++++ */

.risuzaru {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/risuzaru.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top:2826px;
  right:50%;
  margin-right:-190px;
  /* アニメーション */
  animation: animerisuzaru 1.5s steps(2) infinite;
}

@keyframes animerisuzaru {
  to{
    background-position: -200px 0;
  }
}

/* ++++++++++++++++++++++++++++
 INCO
++++++++++++++++++++++++++++ */



.inco {
  /* 画像置換 */
  width:100px;
  height:100px;
  background:  url(../images/home/chara/inco.png) 0 0 no-repeat;
  overflow: hidden;
  /* 初期ポジション */
  position:absolute;
  top: 2730px;
  left:0;
  margin-right:100px;
  /* アニメーション */
  animation: animeinco 1.5s steps(3) infinite;
}

@keyframes animeinco {
  to {
    background-position: -300px 0;
  }
}

/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:950px){

.inco,
.kuji,
.fura,
.hashi,
.tori,
.mogu,
.kapi,
.kapi2,
.arup,
.perik,
.saru1,
.risuzaru,
.hage,
.monkey{
  display:none;
}

}