/* dot character */
/* dot spritesheet */
.dot_01_happy {
    position: absolute;
    width: 5.25%;
    height: 11.425%;
    background-image: url("../img/top/01_mark_1630.svg");
    background-size: 200% 300%;
}

.dot_22_happy_1,
.dot_22_happy_2, .dot_23_happy {
    position: absolute;
    width: 8.65%;
    height: 12.175%;
    background-image: url("../img/top/02_chara_2632.svg");
    background-size: 200% 400%;
}

.dot_10_pen_1,
.dot_10_pen_2,
.dot_10_pen_3,
.dot_10_pen_4, .dot_12_pen, .dot_13_pen, .dot_20_pen {
    position: absolute;
    width: 8%;
    height: 9.125%;
    background-image: url("../img/top/03_pen_2424.svg");
    background-size: 300% 500%;
}

.dot_02_back, .dot_03_walk_right, .dot_04_happy, .dot_05_happy, .dot_07_happy_1,
.dot_07_happy_2, .dot_09_happy, .dot_13_back_1,
.dot_13_back_2, .dot_13_walk_right, .dot_14_happy, .dot_15_jump_front, .dot_16_happy, .dot_17_happy, .dot_20_walk_left {
    position: absolute;
    width: 8%;
    height: 9.145%;
    background-image: url("../img/top/04_chara_2424.svg");
    background-size: 200% 3800%;
}

.dot_18 {
    position: absolute;
    width: 6%;
    height: 12.175%;
    background-image: url("../img/top/05_hills_1832.svg");
    background-size: 100% 100%;
}

/* dot character */
.dot_01_happy {
    bottom: 9%;
    left: 1%;
    background-position: 0 50%;
    animation: dot_01_happy_move 1s steps(2) infinite;
}

@keyframes dot_01_happy_move {
    to {
        background-position: 200% 50%;
    }
}

/*
.dot_01_jump_front {
	@extend %dot_sprite_01;	
  background-position: 0 (-60px * 2);
  animation: dot_01_jump_front_move 1s steps(2) infinite;
}

@keyframes dot_01_jump_front_move {
  to {
    background-position: (-32px * 2) (-60px * 2);
  }
}
*/
.dot_02_back {
    bottom: 14%;
    right: 0.4%;
    background-position: 0 0;
    animation: dot_02_back_move 1s steps(2) infinite;
}

@keyframes dot_02_back_move {
    to {
        background-position: -200% 0;
    }
}

/*
@keyframes dot_02_happy_move {
  to {
    background-position: (-48px * 2) (-24px * 2);
  }
}
*/
.dot_03_walk_right {
    bottom: 11%;
    right: 7%;
    background-position: 0 -399.6%;
    animation: dot_03_walk_right_move 1s steps(2) infinite;
}

@keyframes dot_03_walk_right_move {
    to {
        background-position: -200% -399.6%;
    }
}

/*
@keyframes dot_03_happy_move {
  to {
    background-position: (-48px * 2) (-72px * 2);
  }
}
*/
.dot_04_happy {
    bottom: 29.5%;
    left: 16.5%;
    background-position: 0 -600%;
    animation: dot_04_happy_move 1s steps(2) infinite;
    /*
      &:hover {
          background-position: 0 (-144px * 2);
          animation: dot_04_jump_front_move 1s steps(2) infinite;
      }
    */
}

@keyframes dot_04_happy_move {
    to {
        background-position: -200% -600%;
    }
}

/*
@keyframes dot_04_jump_front_move {
  to {
    background-position: (-48px * 2) (-144px * 2);
  }
}
*/
.dot_05_happy {
    bottom: 19%;
    right: 8%;
    background-position: 0 -800%;
    animation: dot_05_happy_move 1s steps(2) infinite;
    /*
      &:hover {
          background-position: 0 (-168px * 2);
          animation: dot_05_jump_front_move 1s steps(2) infinite;
      }
    */
}

@keyframes dot_05_happy_move {
    to {
        background-position: -200% -800%;
    }
}

/*
@keyframes dot_05_jump_front_move {
  to {
    background-position: (-48px * 2) (-168px * 2);
  }
}
*/
/*

.dot_06_walk_left {
	@extend %dot_sprite_04;	
  background-position: 0 (-216px * 2);
  animation: dot_06_walk_left_move 1s steps(2) infinite;
}
@keyframes dot_06_walk_left_move {
  to {
    background-position: (-48px * 2) (-216px * 2);
  }
}
.dot_06_walk_right {
	@extend %dot_sprite_04;	
  background-position: 0 (-240px * 2);
  animation: dot_06_walk_right_move 1s steps(2) infinite;
}
@keyframes dot_06_walk_right_move {
  to {
    background-position: (-48px * 2) (-240px * 2);
  }
}

.dot_07_pen {
	@extend %dot_sprite_04;	
  background-position: 0 (-312px * 2);
  animation: dot_07_pen_move 1s steps(2) infinite;
  &.happy:hover {
	  background-position: 0 (-264px * 2);
	  animation: dot_07_happy_move 1s steps(2) infinite;	  
  }	
}
@keyframes dot_07_pen_move {
  to {
    background-position: (-48px * 2) (-312px * 2);
  }
}
*/
.dot_07_happy_1,
.dot_07_happy_2 {
    background-position: 0 -1100%;
    animation: dot_07_happy_move 1s steps(2) infinite;
    /*
      &:hover {
          background-position: 0 (-288px * 2);
          animation: dot_07_jump_front_move 1s steps(2) infinite;
      }
    */
}

.dot_07_happy_1 {
    bottom: 13%;
    left: 11%;
}

.dot_07_happy_2 {
    bottom: 21%;
    right: -1%;
}

@keyframes dot_07_happy_move {
    to {
        background-position: -200% -1100%;
    }
}

/*
@keyframes dot_07_jump_front_move {
  to {
    background-position: (-48px * 2) (-288px * 2);
  }
}
*/
/*

.dot_08_happy {
	@extend %dot_sprite_04;	
  background-position: 0 (-336px * 2);
  animation: dot_08_happy_move 1s steps(2) infinite;
  &:hover {
	  background-position: 0 (-360px * 2);
	  animation: dot_08_jump_front_move 1s steps(2) infinite;	  
  }  
}
@keyframes dot_08_happy_move {
  to {
    background-position: (-48px * 2) (-336px * 2);
  }
}
@keyframes dot_08_jump_front_move {
  to {
    background-position: (-48px * 2) (-360px * 2);
  }
}
*/
.dot_09_happy {
    bottom: 13%;
    left: 63%;
    background-position: 0 -1600%;
    animation: dot_09_happy_move 1s steps(2) infinite;
    /*
      &:hover {
          background-position: 0 (-408px * 2);
          animation: dot_09_jump_front_move 1s steps(2) infinite;
      }
    */
}

@keyframes dot_09_happy_move {
    to {
        background-position: -200% -1600%;
    }
}

/*
@keyframes dot_09_jump_front_move {
  to {
    background-position: (-48px * 2) (-408px * 2);
  }
}
*/
.dot_10_pen_1,
.dot_10_pen_2,
.dot_10_pen_3,
.dot_10_pen_4 {
    background-position: 0 0;
    animation: dot_10_pen_move 1s steps(3) infinite;
}

.dot_10_pen_1 {
    bottom: 19%;
    left: 10%;
}

.dot_10_pen_2 {
    bottom: 14%;
    left: 56%;
}

.dot_10_pen_3 {
    bottom: 13%;
    left: 45%;
}

.dot_10_pen_4 {
    bottom: 13%;
    left: 17%;
}

@keyframes dot_10_pen_move {
    to {
        background-position: -300% 0;
    }
}

/*
.dot_10_walk_right {
	@extend %dot_sprite_04;	
  background-position: 0 (-432px * 2);
  animation: dot_10_walk_right_move 1s steps(2) infinite;
  &:hover {
	  background-position: 0 (-456px * 2);
	  animation: dot_10_happy_move 1s steps(2) infinite;	  
  }  
}
@keyframes dot_10_walk_right_move {
  to {
    background-position: (-48px * 2) (-432px * 2);
  }
}
@keyframes dot_10_happy_move {
  to {
    background-position: (-48px * 2) (-456px * 2);
  }
}

.dot_11_pen {
	@extend %dot_sprite_04;	
  background-position: 0 (-576px * 2);
  animation: dot_11_pen_move 1s steps(2) infinite;	
}
@keyframes dot_11_pen_move {
  to {
    background-position: (-48px * 2) (-576px * 2);
  }
}

.dot_11_back {
	@extend %dot_sprite_04;	
  background-position: 0 (-480px * 2);
  animation: dot_11_back_move 1s steps(2) infinite;
  &:hover {
	  background-position: 0 (-528px * 2);
	  animation: dot_11_happy_move 1s steps(2) infinite;	  
  }   	
}
@keyframes dot_11_back_move {
  to {
    background-position: (-48px * 2) (-480px * 2);
  }
}
@keyframes dot_11_happy_move {
  to {
    background-position: (-48px * 2) (-528px * 2);
  }
}

.dot_11_walk_left {
	@extend %dot_sprite_04;	
  background-position: 0 (-504px * 2);
  animation: dot_11_walk_left_move 1s steps(2) infinite;
  &:hover {
	  background-position: 0 (-552px * 2);
	  animation: dot_11_jump_front_move 1s steps(2) infinite;	  
  }   	
}
@keyframes dot_11_walk_left_move {
  to {
    background-position: (-48px * 2) (-504px * 2);
  }
}
@keyframes dot_11_jump_front_move {
  to {
    background-position: (-48px * 2) (-552px * 2);
  }
}
*/
.dot_12_pen {
    bottom: 14%;
    left: 50%;
    background-position: 0 -100%;
    animation: dot_12_pen_move 1s steps(3) infinite;
}

@keyframes dot_12_pen_move {
    to {
        background-position: -300% -100%;
    }
}

.dot_13_pen {
    bottom: 13%;
    left: 40%;
    background-position: 0 -200%;
    animation: dot_13_pen_move 1s steps(3) infinite;
}

@keyframes dot_13_pen_move {
    to {
        background-position: -300% -200%;
    }
}

.dot_13_back_1,
.dot_13_back_2 {
    background-position: 0 -2500%;
    animation: dot_13_back_move 1s steps(2) infinite;
}

.dot_13_back_1 {
    bottom: 13%;
    left: 33%;
}

.dot_13_back_2 {
    bottom: 13%;
    left: 68%;
}

@keyframes dot_13_back_move {
    to {
        background-position: -200% -2500%;
    }
}

.dot_13_walk_right {
    bottom: 6%;
    left: 5%;
    background-position: 0 -2600%;
    animation: dot_13_walk_right_move 1s steps(2) infinite;
    /*
      &:hover {
          background-position: 0 (-648px * 2);
          animation: dot_13_jump_front_move 1s steps(2) infinite;
      }
    */
}

@keyframes dot_13_walk_right_move {
    to {
        background-position: -200% -2600%;
    }
}

/*
@keyframes dot_13_jump_front_move {
  to {
    background-position: (-48px * 2) (-648px * 2);
  }
}
*/
.dot_14_happy {
    bottom: 30%;
    left: 7%;
    background-position: 0 -2800%;
    animation: dot_14_happy_move 1s steps(2) infinite;
}

@keyframes dot_14_happy_move {
    to {
        background-position: -200% -2800%;
    }
}

.dot_15_jump_front {
    bottom: 29.5%;
    left: 28%;
    background-position: 0 -3400%;
    animation: dot_15_jump_front_move 1s steps(2) infinite;
}

@keyframes dot_15_jump_front_move {
    to {
        background-position: -200% -3400%;
    }
}

.dot_16_happy {
    bottom: 29.5%;
    right: 27%;
    background-position: 0 -3000%;
    animation: dot_16_happy_move 1s steps(2) infinite;
}

@keyframes dot_16_happy_move {
    to {
        background-position: -200% -3000%;
    }
}

.dot_17_happy {
    bottom: 17%;
    left: 4.8%;
    background-position: 0 -3100%;
    animation: dot_17_happy_move 1s steps(2) infinite;
}

@keyframes dot_17_happy_move {
    to {
        background-position: -200% -3100%;
    }
}

.dot_18 {
    bottom: 0.5%;
    right: 5%;
    background-position: 0 -100%;
    z-index: 200;
}

.dot_18 span {
    position: absolute;
    display: block;
    width: 80px;
    padding: 3px 0;
    top: 36px;
    left: -36px;
    font-size: 0.825rem;
    text-align: center;
    font-weight: bold;
    border-radius: 20px;
    background-color: #fff;
    border: 2px solid #e82389;
    box-shadow: 0 3px rgba(0, 0, 0, 0.7);
}

.dot_18 span:after {
    position: absolute;
    content: ' ';
    display: block;
    width: 8px;
    height: 8px;
    bottom: -7px;
    right: 13px;
    border-left: 2px solid #e82389;
    border-bottom: 2px solid #e82389;
    transform: rotate(-45deg);
    background-color: #fff;
    box-shadow: 0 2px rgba(0, 0, 0, 0.7), -2px 2px rgba(0, 0, 0, 0.7);
}

.dot_20_pen {
    bottom: 13%;
    left: 24%;
    background-position: 0 -300%;
    animation: dot_20_pen_move 1s steps(3) infinite;
    /*
      &.happy:hover {
          @extend %dot_sprite_04;
          background-position: 0 (-816px * 2);
          animation: dot_20_happy_move 1s steps(2) infinite;
      }
    */
}

@keyframes dot_20_pen_move {
    to {
        background-position: -300% -300%;
    }
}

/*
@keyframes dot_20_happy_move {
  to {
    background-position: (-48px * 2) (-816px * 2);
  }
}
*/
.dot_20_walk_left {
    bottom: 12%;
    right: 16%;
    background-position: 0 -3200%;
    animation: dot_20_walk_left_move 1s steps(2) infinite;
    /*
      &:hover {
          @extend %dot_sprite_04;
          background-position: 0 (-840px * 2);
          animation: dot_20_jump_front_move 1s steps(2) infinite;
      }
    */
}

@keyframes dot_20_walk_left_move {
    to {
        background-position: -200% -3200%;
    }
}

@keyframes dot_20_jump_front_move {
    to {
        background-position: -96px -1680px;
    }
}

/*
.dot_21_pen {
	@extend %dot_sprite_03;	
  background-position: 0 (-96px * 2);
  animation: dot_21_pen_move 1s steps(3) infinite;	
}
@keyframes dot_21_pen_move {
  to {
    background-position: (-72px * 2) (-96px * 2);
  }
}

.dot_21_back {
	@extend %dot_sprite_04;	
  background-position: 0 (-864px * 2);
  animation: dot_21_back_move 1s steps(2) infinite;
  &:hover {
	  background-position: 0 (-888px * 2);
	  animation: dot_21_happy_move 1s steps(2) infinite;	  
  }   
}
@keyframes dot_21_back_move {
  to {
    background-position: (-48px * 2) (-864px * 2);
  }
}
@keyframes dot_21_happy_move {
  to {
    background-position: (-48px * 2) (-888px * 2);
  }
}
*/
.dot_22_happy_1,
.dot_22_happy_2 {
    background-position: 0 -200%;
    animation: dot_22_happy_move 1s steps(2) infinite;
    /*
      &:hover {
          background-position: 0 (-96px * 2);
          animation: dot_22_jump_front_move 1s steps(2) infinite;
      }
    */
}

.dot_22_happy_1 {
    bottom: 29.5%;
    left: 11%;
}

.dot_22_happy_2 {
    bottom: 29.5%;
    right: 33%;
}

@keyframes dot_22_happy_move {
    to {
        background-position: -200% -200%;
    }
}

/*
@keyframes dot_22_jump_front_move {
  to {
    background-position: (-52px * 2) (-96px * 2);
  }
}
*/
.dot_23_happy {
    bottom: 29.5%;
    left: 22%;
    background-position: 0 0;
    animation: dot_23_happy_move 1s steps(2) infinite;
    /*
      &:hover {
          background-position: 0 (-32px * 2);
          animation: dot_23_jump_front_move 1s steps(2) infinite;
      }
    */
}

@keyframes dot_23_happy_move {
    to {
        background-position: -200% 0;
        /*     background-position: (-52px * 2) 0; */
    }
}

/*
@keyframes dot_23_jump_front_move {
  to {
    background-position: (-52px * 2) (-32px * 2);
  }
}
*/