@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap");
/*-------------------------------------------
px→vw
 * ex)
   width: sp(200)
   width: tab(200)
-------------------------------------------*/
.border-friends .introCol {
  position: relative;
}
.border-friends .introCol .btnTamagotchi {
  display: block;
  position: absolute;
  bottom: 7.08556%;
  left: 5.25%;
  width: 27.41667%;
}
@media (hover: hover) {
  .border-friends .introCol .btnTamagotchi {
    transition: opacity 0.2s;
  }
  .border-friends .introCol .btnTamagotchi:hover {
    opacity: 0.6;
  }
}
.border-friends .introCol .btnGundam {
  display: block;
  position: absolute;
  bottom: 6.95187%;
  right: 4.25%;
  width: 27.41667%;
}
@media (hover: hover) {
  .border-friends .introCol .btnGundam {
    transition: opacity 0.2s;
  }
  .border-friends .introCol .btnGundam:hover {
    opacity: 0.6;
  }
}
.border-friends .lineupCol {
  position: relative;
}
.border-friends .lineupCol .btnDetail {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 40%;
}
@media (hover: hover) {
  .border-friends .lineupCol .btnDetail {
    transition: opacity 0.2s;
  }
  .border-friends .lineupCol .btnDetail:hover {
    opacity: 0.6;
  }
}
.border-friends .lineupCol.-tamagotchi .btnDetail {
  bottom: 2.90167%;
}
.border-friends .lineupCol.-gundam .btnDetail {
  bottom: 2.16333%;
}