@charset "utf-8";
/* 配達キャラクター・メッセージ */
.object {position:absolute;width:1.8em;height:1.8em;left:150%;transition:2s;}

/* 配達キャラクター・手紙アイコン */
.object img {width:100%;z-index:0;}

/* 登場人物・描写 */
.object > span {position:absolute;display:block;content:"";z-index:0;}

/* 登場人物・出現 */
.object.display {}

/* 登場人物・去っていく */
.object.away {left:-50%;transition:5s;}

/* 配達キャラクター・メッセージ読み終わりで非表示 */
.object.away > img {display:none;}

/* 犬 */
@keyframes dog_in {
  0% {left:120%;}
  100% {left:35%;}
}
@keyframes dog_out {
  0% {left:35%;}
  100% {left:-50%;}
}

.object.dog  {left:120%;bottom:15%;z-index:5;}
.object.dog.display {animation:dog_in 4s linear forwards;}
.object.dog.away {animation:dog_out 4s linear forwards;}
.object.dog > span {
  width:5em;
  height:3em;
  background:url(../img/animation/dog_in.gif) no-repeat center /100% auto;
}
.object.dog.away > span {background:url(../img/animation/dog_out.gif) no-repeat center /100% auto;}

/* 猫 */
@keyframes cat_in {
  0% {left:120%;}
  100% {left:50%;}
}
@keyframes cat_out {
  0% {left:50%;}
  100% {left:150%;}
}

.object.cat  {bottom:15%;z-index:10;}
.object.cat.display {animation:cat_in 4s linear forwards;}
.object.cat.away {animation:cat_out 3s linear forwards;}
.object.cat > span {
  width:4.5em;
  height:4.5em;
  background:url(../img/animation/cat_in.gif) no-repeat center /100% auto;
}
.object.cat.away > span {transform:rotateY(180deg);background:url(../img/animation/cat_out.gif) no-repeat center /100% auto;}

/* リス */
@keyframes squirrel_in {
  0% {left:150%;}
  40% {left:70%;}
  55% {left:70%;}
  100% {left:27%;}
}
@keyframes squirrel_out {
  0% {left:27%;}
  100% {left:150%;}
}
.object.squirrel  {bottom:12%;z-index:9;}
.object.squirrel.display {animation:squirrel_in 4s linear forwards;}
.object.squirrel.away {animation:squirrel_out 3s linear forwards;}
.object.squirrel > span {
  width:3.5em;
  height:3.5em;
  background:url(../img/animation/squirrel_in.gif) no-repeat center /100% auto;
}
.object.squirrel.away > span {transform:rotateY(180deg);background:url(../img/animation/squirrel_out.gif) no-repeat center /100% auto;}

/* モンスター */
@keyframes monster_in {
  0% {left:110%;}
  20% {left:90%;}
  35% {left:90%;}
  55% {left:70%;}
  70% {left:70%;}
  100% {left:50%;}
}
@keyframes monster_out {
  0% {left:50%;}
  100% {left:150%;}
}
.object.monster  {bottom:30%;z-index:3;}
.object.monster.display {animation:monster_in 8s linear forwards;}
.object.monster.away {animation:monster_out 2s linear forwards;}
.object.monster > span {
  width:3.5em;
  height:6em;
  background:url(../img/animation/monster_in.gif) no-repeat center /100% auto;
}
.object.monster.away > span {transform:rotateY(180deg);background:url(../img/animation/monster_out.gif) no-repeat center /100% auto;}
.flow02 .object.monster.display {animation:monster_in 4s linear forwards;z-index:10;}
.flow02 .object.monster.away {animation:monster_out 4s linear forwards;}

/* フクロウ */
@keyframes updown {
  0% {top:10%;}
  50% {top:15%;}
  100%{top:10%;}
}

@keyframes owl_in {
  0% {left:120%;}
  100% {left:50%;}
}
@keyframes owl_out {
  0% {left:50%;}
  100% {left:-50%;}
}

.object.owl {top:5%;z-index:2;}
.object.owl.display {animation:updown 1s linear infinite,owl_in linear 3s forwards;}
.object.owl.away {animation:updown 1s linear infinite,owl_out linear 6s forwards;}
.object.owl > span {
  width:5em;
  height:5em;
  background:url(../img/animation/owl_in.gif) no-repeat top center /100% auto;
}
.object.owl.away > span {background:url(../img/animation/owl_out.gif) no-repeat center /100% auto;}


/* マラソン */
@keyframes runner_in {
  0% {left:150%;}
  100% {left:25%;}
}
@keyframes runner_out {
  0% {left:25%;}
  100% {left:-90%;}
}

.object.runner {bottom:25%;z-index:8;}
.object.runner.display {animation:runner_in 7s linear forwards;}
.object.runner.away {animation:runner_out 7s linear forwards;}

.flow02 .object.runner.display {animation:runner_in 7s linear forwards;bottom:40%;}
.flow02 .object.runner.away {animation:runner_out 7s linear forwards;bottom:40%;}

.object.runner > span {
  width:3.6em;
  height:6em;
  background:url("../img/animation/runner_in.gif") no-repeat center /100% auto;
}
.object.runner.away > span {background:url("../img/animation/runner_out.gif") no-repeat center /100% auto;}



/* ロボット */
@keyframes robot_in {
  0% {left:120%;}
  100% {left:30%;}
}
@keyframes robot_out {
  0% {bottom:30%;left:30%;}
  100% {bottom:150%;left:30%;}
}

.object.robot {bottom:30%;z-index:4;}
.object.robot.display {animation:robot_in 6s linear forwards;}
.object.robot.away {animation:robot_out 2s linear forwards;}

.flow02 .object.robot.display {animation:robot_in 4s linear forwards;}
.flow02 .object.robot.away {animation:robot_out 2s linear forwards;}

.object.robot > span {
  width:3.6em;
  height:6em;
  background:url("../img/animation/robot_in.gif") no-repeat center /100% auto;
}
.object.robot.away > span {background:url("../img/animation/robot_out.gif") no-repeat center /100% auto;}


@keyframes skate {
  0% {left:120%;}
  70% {left:50%;}
  100% {left:40%;}
}
/*@keyframes skate02 {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(20deg);}
}
@keyframes skate03 {
  0% {transform:rotateY(0deg) ;}
  100% {transform:rotateY(-180deg) ;}
}*/
@keyframes skate04 {
  0% {left:40%;}
  100% {left:-50%;}
}

/* スケボー */
.object.skate {bottom:18%;z-index:11;}
.object.skate.display {animation:skate linear 3s forwards}
.object.skate.away {animation:skate04 linear 3s forwards;}
.object.skate > span {
  width:5.5em;
  height:5.5em;
  background:url(../img/animation/sb_in.gif) no-repeat center /100% auto;
  top:-40%;
  left:10%;
  z-index:-1;
  transform-origin:bottom right;
}
.object.skate.display > span {animation:skate02 0.5s linear 2.5s forwards;}
.object.skate.away > span {background:url(../img/animation/sb_out.gif) no-repeat center /100% auto;}
.flow02 .object.skate.display {animation:skate linear 4s forwards}
.flow02 .object.skate.away {animation:skate04 linear 4s forwards;}

/* バイク */

@keyframes bike {
  0% {left:-50%;}
  90% {left:3%;}
  100% {left:3%;}
}
@keyframes bike02 {
  0% {left:3%;}
  100% {left:150%;}
}

.object.bike {width:1.4em;left:-50%;bottom:20%;transition:3s ease-out;z-index:7;}
.object.bike.display {animation:bike linear 3s forwards;}
.object.bike.away {animation:bike02 linear 3s forwards;}
.object.bike > span {
  width:5.5em;
  height:5.5em;
  background:url(../img/animation/bike_in.gif) no-repeat center /100% auto;
  top:-50%;
  left:0%;
  transform-origin:bottom right;
}
.object.bike.away > span {background:url(../img/animation/bike_out.gif) no-repeat center /100% auto;}
.flow02 .object.bike span{width:6em;height:6em;}

/* ワゴン */

@keyframes wagon {
  0% {left:-50%;}
  90% {left:65%;}
  100% {left:65%;}
}
@keyframes wagon02 {
  0% {left:65%;}
  100% {left:150%;}
}

.object.wagon {width:1.4em;left:-50%;bottom:30%;z-index:6;}
.object.wagon.display {animation:wagon linear 4s forwards;}
.object.wagon.away {animation:wagon02 linear 4s forwards;}
.object.wagon > span {
  width:7.5em;
  height:7.5em;
  background:url(../img/animation/wagon_in.gif) no-repeat center /100% auto;
  transform:rotateY(180deg);
}
.object.wagon.away > span {background:url(../img/animation/wagon_out.gif) no-repeat center /100% auto;}
.flow02 .object.wagon span{width:6em;height:5em;}

/* パラシュート */

@keyframes parachute {
  0% {bottom:105%;left:80%;}
  20% {bottom:85%;left:50%;}
  40% {bottom:65%;left:70%;}
  60% {bottom:45%;left:40%;}
  80% {bottom:25%;left:60%;}
  100% {bottom:10%;left:20%;}
}
@keyframes parachute02 {
  0% {bottom:10%;left:30%;}
  100% {bottom:105%;left:80%;}
}

.object.parachute {bottom:20%;z-index:12;}
.object.parachute.display {animation:parachute 8s ease-in-out forwards;}
.flow02 .object.parachute.display {animation:parachute 4s ease-in-out forwards;}
.object.parachute > span {
  width:3.5em;
  height:3.5em;
  background:url(../img/animation/parachute_in.gif) no-repeat center /auto 100%;
  transform-origin:bottom right;
}
.object.parachute.away {animation:parachute02 linear 1s forwards;}
.flow02 .object.parachute.away {animation:parachute02 linear 0.5s forwards;}
.object.parachute.away span {display:none;}


/* 飛行機 */

@keyframes plane {
  0% {top:20%;left:-20%;}
  49% {top:40%;left:80%;}
  50% {top:40%;left:80%;}
  100% {top:50%;left:50%;}
}
@keyframes plane02 {
  0% {top:50%;left:50%;}
  100% {top:60%;left:-30%;}
}
@keyframes plane03 {
  0% {transform:rotateY(180deg);}
  49% {transform:rotateY(180deg);}
  50% {transform:rotateY(0deg);}
  100% {transform:rotateY(0deg);}
}
@keyframes plane04 {
  0% {transform:rotateY(0deg);}
  100% {transform:rotateY(180deg);}
}

.object.plane {width:1.6em;bottom:20%;z-index:3;}
.object.plane.display {animation:plane 8s ease-in-out forwards;}
.object.plane > span {
  width:5em;
  height:5em;
  background:url(../img/animation/airplane_in.gif) no-repeat center /100% auto;
  transform-origin:center;
}
.object.plane.display > span {
  animation:plane03 8s ease-in-out forwards;
}
.object.plane.away {
  animation:plane02 ease-in-out 3s forwards;
}
.object.plane.away > span {
  background:url(../img/animation/airplane_out.gif) no-repeat center /100% auto;
}
.flow02 .object.plane span {height:3em;width:3em;}
.flow02 .object.plane.display {animation:plane 4s ease-in-out forwards;}
.flow02 .object.plane.away {animation:plane02 ease-in-out 1.5s forwards;}
.flow02 .object.plane.display span {animation:plane03 ease-in-out 4s forwards;}
.flow02 .object.plane.away span {animation:plane04 ease-in-out 4s forwards;}