.pawpadsarea {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 220px;
}

.pad {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.digitals {
  position: absolute;
  width: 120px;
  height: 120px;
  left: 0;
  top: 0;
}

/* 指球単体 */
.digital{
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 100%;
  box-sizing: border-box;
  background: #000;
  cursor: pointer;
}

.digital:nth-child(1){
  top: 30px;
  left: 0;
  transform: rotate(-10deg);
}

.digital:nth-child(2){
  top: 5px;
  left: 30px;
}

.digital:nth-child(3){
  top: 5px;
  left: 60px;
}

.digital:nth-child(4){
  top: 30px;
  left: 90px;
  transform: rotate(10deg);
}

.digital.active {
  background: #ffb6d5;
  border-color: #ff69b4;
  box-shadow: 0 0 10px 2px #ffb6d5;
}

/* 掌球 */
.metacarpal{
  position: absolute;
  top: 50px;
  left: 33px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #000;
  box-shadow:
     12px 15px 0 0 #000,
    -12px 15px 0 0 #000;
  cursor: pointer;
}

.metacarpal.active {
  background: #ffb6d5;
  box-shadow:
     12px 15px 0 0 #ffb6d5,
    -12px 15px 0 0 #ffb6d5,
    0 0 20px 4px #ffb6d5;
  border-color: #ff69b4;
}