.qiaoqiaokan {
  width: 150px;
  height: 150px;
  background-image: url(images/trio.webp);
  background-size: 120px;
  background-repeat: no-repeat;
  position: absolute;
  top: 15%;
  left: 0px;
}

/* 鼯鼠滑翔动画关键帧 - 优化版 */
@keyframes animation-glider-momonga {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  20% {
    transform: translate(8px, -3px) rotate(-1.5deg) scale(1.02);
    opacity: 0.95;
  }

  40% {
    transform: translate(18px, -6px) rotate(0.5deg) scale(1.05);
    opacity: 0.85;
  }

  60% {
    transform: translate(25px, -10px) rotate(1.8deg) scale(1);
    opacity: 0.75;
  }

  80% {
    transform: translate(15px, -4px) rotate(-0.8deg) scale(0.98);
    opacity: 0.9;
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

.animation-glider-momonga {
  -webkit-animation: animation-glider-momonga 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s infinite normal none;
  animation: animation-glider-momonga 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s infinite normal none;
  will-change: transform, opacity;
  opacity: 1;
}

.bg_sp_chara_momo {
  z-index: 912;
  position: absolute;
  width: 95px;
  height: 75px;
  background: url(images/bg_chara_04.png) no-repeat left top / 95px 75px;
  top: 10%;
  left: 20%;
  opacity: 1;
  /* 性能优化 */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 吉伊卡哇主角晃动动画关键帧 - 优化版 */
@keyframes shake-chiikawa {
  0% {
    transform: translate(-30%, -60%) rotate(0deg);
    transform-origin: 87px 105px;
  }

  10% {
    transform: translate(-30%, -60%) rotate(-1.2deg);
    transform-origin: 87px 105px;
  }

  20% {
    transform: translate(-30%, -60%) rotate(-0.6deg);
    transform-origin: 87px 105px;
  }

  30% {
    transform: translate(-30%, -60%) rotate(0.6deg);
    transform-origin: 87px 105px;
  }

  40% {
    transform: translate(-30%, -60%) rotate(1.2deg);
    transform-origin: 87px 105px;
  }

  50% {
    transform: translate(-30%, -60%) rotate(0.6deg);
    transform-origin: 87px 105px;
  }

  60% {
    transform: translate(-30%, -60%) rotate(-0.6deg);
    transform-origin: 87px 105px;
  }

  70% {
    transform: translate(-30%, -60%) rotate(-1.2deg);
    transform-origin: 87px 105px;
  }

  80% {
    transform: translate(-30%, -60%) rotate(-0.3deg);
    transform-origin: 87px 105px;
  }

  90% {
    transform: translate(-30%, -60%) rotate(0.3deg);
    transform-origin: 87px 105px;
  }

  100% {
    transform: translate(-30%, -60%) rotate(0deg);
    transform-origin: 87px 105px;
  }
}

/* 吉伊卡哇主角出现动画关键帧 - 优化版 */
@keyframes animation-hyokkori-chiikawa {
  0% {
    transform: translate(-30%, -60%) scale(0);
    opacity: 0;
  }

  60% {
    transform: translate(-30%, -60%) scale(1.2);
    opacity: 0.9;
  }

  80% {
    transform: translate(-30%, -60%) scale(0.9);
    opacity: 1;
  }

  100% {
    transform: translate(-30%, -60%) scale(1);
    opacity: 1;
  }
}

.animation-hyokkori-chiikawa {
  -webkit-animation: animation-hyokkori-chiikawa 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, shake-chiikawa 2.8s ease-in-out 1s infinite normal none;
  animation: animation-hyokkori-chiikawa 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, shake-chiikawa 2.8s ease-in-out 1s infinite normal none;
  opacity: 0;
  /* 初始状态为透明，动画会让它显现 */
}

.bg_sp_chara_chiikawa3 {
  z-index: 905;
  position: absolute;
  width: 58px;
  height: 70px;
  background: url(images/bg_chara_01.png) no-repeat left top / 58px 70px;
  top: 9%;
  right: 7%;
  opacity: 0;
  /* 性能优化 */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.tree_sp_right_00 {
  z-index: 910;
  position: absolute;
  width: 224px;
  height: 200px;
  background: url(images/bg_2_tree_sp_right_02.png) no-repeat left top;
  background-size: cover;
  background-position-y: 0px;
  top: 8%;
  right: -16%;
  pointer-events: none;
}

/* 晃动动画关键帧 - 优化版 */
@keyframes shake-hachiware {
  0% {
    transform: translate(36%, -58%) rotate(0deg);
    transform-origin: -18.3px 172.8px;
  }

  10% {
    transform: translate(36%, -58%) rotate(0.8deg);
    transform-origin: -18.3px 172.8px;
  }

  20% {
    transform: translate(36%, -58%) rotate(0.4deg);
    transform-origin: -18.3px 172.8px;
  }

  30% {
    transform: translate(36%, -58%) rotate(-0.4deg);
    transform-origin: -18.3px 172.8px;
  }

  40% {
    transform: translate(36%, -58%) rotate(-0.8deg);
    transform-origin: -18.3px 172.8px;
  }

  50% {
    transform: translate(36%, -58%) rotate(-0.4deg);
    transform-origin: -18.3px 172.8px;
  }

  60% {
    transform: translate(36%, -58%) rotate(0.4deg);
    transform-origin: -18.3px 172.8px;
  }

  70% {
    transform: translate(36%, -58%) rotate(0.8deg);
    transform-origin: -18.3px 172.8px;
  }

  80% {
    transform: translate(36%, -58%) rotate(0.2deg);
    transform-origin: -18.3px 172.8px;
  }

  90% {
    transform: translate(36%, -58%) rotate(-0.2deg);
    transform-origin: -18.3px 172.8px;
  }

  100% {
    transform: translate(36%, -58%) rotate(0deg);
    transform-origin: -18.3px 172.8px;
  }
}

/* 出现动画关键帧 - 优化版 */
@keyframes animation-hyokkori-hachiware {
  0% {
    transform: translate(36%, -58%) scale(0);
    opacity: 0;
  }

  60% {
    transform: translate(36%, -58%) scale(1.15);
    opacity: 0.9;
  }

  80% {
    transform: translate(36%, -58%) scale(0.95);
    opacity: 1;
  }

  100% {
    transform: translate(36%, -58%) scale(1);
    opacity: 1;
  }
}

.animation-hyokkori-hachiware {
  -webkit-animation: animation-hyokkori-hachiware 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    shake-hachiware 2.5s ease-in-out 1s infinite normal none;
  animation: animation-hyokkori-hachiware 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    shake-hachiware 2.5s ease-in-out 1s infinite normal none;
  opacity: 0;
  /* 初始状态为透明，动画会让它显现 */
}

.bg_sp_chara_hachi {
  z-index: 905;
  position: absolute;
  width: 61px;
  height: 72px;
  background: url(images/bg_chara_02.png) no-repeat left top / 61px 72px;
  bottom: 5%;
  left: 13%;
  opacity: 0;
  /* 初始状态为透明，动画会让它显现 */
  /* 性能优化 */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sp {
  display: block;
}

.tree_sp_left_01 {
  z-index: 900;
  position: absolute;
  width: 122px;
  height: 200px;
  background: url(images/bg_2_tree_sp_left_01.png) no-repeat left bottom / 122px 834px;
  bottom: 9%;
  left: 0px;
  pointer-events: none;
}

.tree_sp_left_02 {
  z-index: 910;
  position: absolute;
  width: 220px;
  height: 100px;
  background: url(images/bg_2_tree_sp_left_02.png) no-repeat left top / 220px 5460px;
  bottom: 2%;
  left: 0px;
  pointer-events: none;
}

.tree_sp_right_02 {

  z-index: 910;
  position: absolute;
  width: 224px;
  height: 200px;
  background: url(images/bg_2_tree_sp_right_02.png) no-repeat left top;
  background-size: cover;
  background-position-y: -520px;
  top: 82%;
  right: 0px;
  pointer-events: none;
}