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

/* 充電ステーション */
.chargeContainer {
  position: relative;
  top: 0;
  left: 0;
  height: 728px;
}
.chargeContainer .charge_forPC .charger {
  position: absolute;
  bottom: 120px;
  left: 180px;
  z-index: 100;
}
.chargeContainer .charge_forPC .ev {
  position: absolute;
  bottom: 0;
  right: 180px;
  z-index: 100;
}
.chargeContainer .charge_forMobile {
  display: none;
}

/* キャラクター ラスティン */
.Rustin_character {
  position: relative;
  bottom: -620px;
  left: 19%;
  width: 700px;
}
.Rustin_body {
  position: absolute;
  bottom: 209px;
  left: 50px;
  z-index: 500;
  animation: rustin-breathe 3s ease-in-out infinite;
}
.Rustin_arm_left {
  position: absolute;
  bottom: 292px;
  left: 170px;
  z-index: 400;
  transform-origin: 10px 62px; /* 肩の付け根。画像に合わせて要微調整 */
  animation:
    rustin-breathe 3s ease-in-out infinite,
    rustin-lefte 2s ease-in-out infinite;
}
.Rustin_arm_right {
  position: absolute;
  bottom: -16px;
  left: -60px;
  z-index: 400;
  transform-origin: 122px 10px; /* 肩の付け根。画像に合わせて要微調整 */
  animation:
    rustin-breathe 3s ease-in-out infinite,
    rustin-raise 1s ease-in-out infinite;

}
.Rustin_leg_left {
  position: absolute;
  bottom: -66px;
  left: 137px;
  z-index: 400;  
}
.Rustin_leg_right {
  position: absolute;
  bottom: -66px;
  left: 22px;
  z-index: 400;
}

/* 呼吸：body・両腕で共有する上下の揺れ */
@keyframes rustin-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* 右腕の挙手：肩を軸に0deg→60deg→0degの回転 */
@keyframes rustin-raise {
  0%, 100% { transform: rotate(3deg); }
  50%      { transform: rotate(0deg); }
}

/* 左腕の挙手：肩を軸に0deg→60deg→0degの回転 */
@keyframes rustin-lefte {
  0%, 100% { transform: rotate(3deg); }
  50%      { transform: rotate(20deg); }
}



/* テキスト */
.charge_text {
  position: absolute;
  top: 170px;
  right: 50px;
  width: 600px;
  font-size: 18px;
  line-height: 1.8;
  color: #666666;
}

/* モバイル画面 */
@media screen and (max-width: 445px) {
  .chargeContainer {
    height: 600px;
  }
  .chargeContainer .charge_forPC {
    display: none;
  }
  .chargeContainer .charge_forMobile {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
  }
  .chargeContainer .charge_forMobile .charger {
    position: absolute;
    top: 240px;
    left: -46px;
    scale: 0.5;
    z-index: 100;
  }
  .chargeContainer .charge_forMobile .ev {
    position: absolute;
    bottom: 31px;
    right: -212px;
    scale: 0.4;
    z-index: 200;
  }
  .charge_forMobile .charge_text {
    position: absolute;
    top: 21px;
    left: 0px;
    padding: 10px 15px;
    font-size: 18px;
    line-height: 1.8;
    color: #666666;
    width: 100%;
  }
  .charge_forMobile .Rustin_character {
    position: relative;
    bottom: -420px;
    left: -46px;
    scale: 0.5;
    z-index: 300;
    width: 320px;
  }
}