/* =========================
   ■ アバター
   ========================= */
.avatar-box {
  width: 110px;
  height: 180px;
  position: relative;
  overflow: hidden;   /* ←🔥これ重要 */
}

/* アバター画像だけに適用。ペットには効かせない */
.avatar-box img:not(.pet-layer){
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

.avatar {
  position: absolute;
  bottom: 35px;          /* ←足を地面に固定 */
  left: 50%;
  transform: translateX(-50%);
  width: 90px;        /* ←サイズ調整 */
  height: 80%;
}

.avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;   /* 追加 */
  pointer-events: none;   /* 追加 */
}

#avatar-base {
  top: 0;
  left: 0;
}

/* メインアバター */
#avatar-base   { z-index: 1; }
#avatar-bottom { z-index: 2; }
#avatar-top    { z-index: 3; }
#avatar-shoes  { z-index: 4; }

/* 🔥 レイヤー順（超重要） */
#mini-base   { z-index: 1; }
#mini-bottom { z-index: 2; }
#mini-top    { z-index: 3; }
#mini-shoes  { z-index: 4; }

.avatar-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-item {
  cursor: pointer;
}

.avatar-item input {
  display: none;
}

.avatar-item img {
  width: 80px;
  border-radius: 10px;
  border: 2px solid transparent;
}

/* 選択時 */
.avatar-item input:checked + img {
  border: 2px solid #00ffff;
  transform: scale(1.05);
}

/* 設定画面（大） */
#avatar-top.part-top {
  transform: translate(0px, 36px) scaleX(1.29) scaleY(1.40);
}

#avatar-bottom.part-bottom {
  transform: translate(0px, 36px) scaleX(1.29) scaleY(1.40);
}

#avatar-shoes.part-shoes {
  transform: translate(0px, 54px) scaleX(1.22) scaleY(1.07);
}

/* サイド（小） */
#mini-top.part-top {
  transform: translate(0px, 30px) scaleX(1.29) scaleY(1.40);
}

#mini-bottom.part-bottom {
  transform: translate(0px, 30px) scaleX(1.29) scaleY(1.40);
}

#mini-shoes.part-shoes {
  transform: translate(0px, 45px) scaleX(1.22) scaleY(1.07);
}