/****************************************************************/
.relation {
  position: relative;
  width: 950px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .relation {
    width: 100%;
  }
}

.relation a {
  display: block;
  position: absolute;
  width: 9.7%;
  padding-bottom: 14.6%;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

@media screen and (min-width: 768px) {
  .relation a:hover {
    background: #000;
    opacity: 0.5;
  }
}

.relation a.chara01 {
  width: 12.7%;
  padding-bottom: 17.8%;
  top: 49.9%;
  left: 40.7%;
}

.relation a.chara02 {
  width: 12.7%;
  padding-bottom: 17.8%;
  top: 41.5%;
  left: 57.8%;
}

.relation a.chara03 {
  top: 24.1%;
  left: 28%;
}

.relation a.chara04 {
  top: 22.2%;
  left: 53.5%;
}

.relation a.chara05 {
  top: 83.4%;
  left: 60.8%;
}

.relation a.chara06 {
  top: 64.7%;
  left: 76.4%;
}

.relation a.chara07 {
  top: 1.9%;
  left: 66.2%;
}

.relation a.chara08 {
  top: 43.2%;
  left: 86.8%;
}

.relation a.chara09 {
  top: 43.2%;
  left: 76.5%;
}

.relation a.chara10 {
  top: 83.4%;
  left: 12.2%;
}

.relation a.chara11 {
  top: 83.4%;
  left: 2%;
}

.relation a.chara12 {
  top: 64.6%;
  left: 86.8%;
}

.relation a.chara13 {
  top: 83.3%;
  left: 76%;
}

.relation a.chara14 {
  top: 6.9%;
  left: 2%;
}

.relation a.chara15 {
  top: 25.2%;
  left: 2%;
}

.relation a.chara16 {
  top: 43.3%;
  left: 2%;
}

.relation a.chara17 {
  top: 68.1%;
  left: 2%;
}

.relation a.chara18 {
  top: 83.4%;
  left: 86.8%;
}
.relation a.chara19 {
  top: 2%;
  left: 17.6%;
  width: 9.9%;
  padding-bottom: 14.7%;
}