@charset "utf-8";
/* CSS Document */

body {
/*background-color: #F7F4ED;*/
}
.main {
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.main img{
	width: 100%;
	height: auto;
    vertical-align:middle;	
}

.menu{
	position: absolute;
	top:0;
	left:0;
    z-index: 30;	
}

/*---------------------------*/
#wrap {
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow:hidden;
}

/*　街並み、人　ゆっくり出現---------------------------*/
ul.delay-show li{
    position: absolute;
}

.overlap10{/*犬と男性、親子*/
	z-index: 10;
}

.overlap5{/*少年*/
	z-index: 5;
}

.overlap3{/*奥女性、街並み、コピー*/
	z-index: 3;
}

/*　ドローン---------------------------*/
#drone {
  position : absolute;
  top : 0;
  left : 0;
　z-index: 5;	
	
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-name: anim_v;	
}

@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 20px);
  }
}

/*　自転車の少年---------------------------*/
#boy {
  position : absolute;
  top : 0;
  left : 0;
  z-index: 5;	
	
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-duration: 7s;
  animation-name: anim_boy;	
  animation-delay: 1.5s;	
}

@keyframes anim_boy {
  0% {
    transform: translate(-200px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}


/*　ベビーカー---------------------------*/
#baby {
  position : absolute;
  top : 0;
  left : 0;
　z-index: 20;	
	
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 10s;
  animation-name: anim_baby;
  animation-delay: 2s;
}

@keyframes anim_baby {
  0% {
    transform: translate(0, 0px);
  }
  10% {
    transform: translate(0, 0px);
  }
  20% {
    transform: translate(0, 0px); 	  
  }
  30% {
     transform: translate(0, 0px);
  }	
  40% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(-4px, 0);
  }
  60% {
    transform: translate(0, 0px);
  }
  70% {
     transform: translate(-4px, 0);
  }
  80% {
    transform: translate(0, 0px);
  }	
  90% {
    transform: translate(-4px, 0);
  }	
  100% {
    transform: translate(0, 0px);
  }	
}

/*　親子---------------------------*/
.parent {
  position : absolute;
  top : 0;
  left : 0;
  z-index: 3;	
	
  opacity: 0;
  animation: fadeout-anim 8s linear forwards;
}

@keyframes fadeout-anim {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }	
  100% {
    opacity: 0;
  }	
}

/*　犬---------------------------*/
.dog {
  position : absolute;
  top : 0;
  left : 0;
  z-index: 10;	
	
  opacity: 0;
  animation: fadeout-anim 8s linear forwards;
}

@keyframes fadeout-anim {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }	
  100% {
    opacity: 0;
  }	
}

/*　ふきだし　順番に出現---------------------------*/

ul.loop li{
	position: absolute;
	z-index: 20;
}

#loop1, #loop2/*, #loop3, #loop4*/{
    display:none;
	width: 100%;
	height: auto;
    vertical-align:middle;

}
/*　背景の雲---------------------------*/

#kumo {
	position: absolute;
	
    width: 1300px;
	height: 130px;
	background:url("../img/02.png")repeat-x ;
	margin-top: 70px;
	
    background-position: 0 0;
    -webkit-animation: bgroop 120s linear infinite;
    animation: bgroop 120s linear infinite;	
}

@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1000px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1000px 0;
    }
}