:root {
  --scale-unit: calc(100vw / 640);
}
.section {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
}
.section__img {
  display: block;
  width: 100%;
  height: auto;
}
.section__link {
  position: absolute;
  transition: background-color 0.3s ease;
}
button.section__link {
  border: none;
  background: transparent;
  cursor: pointer;
}
@media (min-width: 641px) {
  .section__link:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.section__link--mv-a-course-1,
.section__link--mv-a-course-2 {
  width: 392px;
  padding-bottom: 5.3%;
  bottom: 7.4%;
  left: 6%;
}
.section__link--mv-a-course-2 {
  left: auto;
  right: 6%;
}
@media (max-width: 640px) {
  .section__link--mv-a-course-1,
  .section__link--mv-a-course-2 {
    width: calc(262 * var(--scale-unit));
  }
}
.section__link--b-course-1,
.section__link--b-course-2 {
  width: 392px;
  padding-bottom: 5.3%;
  bottom: 16%;
  left: 6%;
}
.section__link--b-course-2 {
  left: auto;
  right: 6%;
}
@media (max-width: 640px) {
  .section__link--b-course-1,
  .section__link--b-course-2 {
    width: calc(262 * var(--scale-unit));
  }
}

.section__link--commission-1 {
  width: 656px;
  padding-bottom: 12%;
  bottom: 40.9%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 640px) {
  .section__link--commission-1 {
    width: calc(435 * var(--scale-unit));
  }
}
.section__link--commission-2,
.section__link--commission-3 {
  width: 325px;
  padding-bottom: 10.6%;
  bottom: 21.4%;
  left: 17.4%;
}
.section__link--commission-3 {
  width: 294px;
  left: auto;
  right: 17%;
}
@media (min-width: 641px) {
  .section__link--commission-1:hover,
  .section__link--commission-2:hover,
  .section__link--commission-3:hover {
    background-color: rgb(255 247 208 / 50%);
  }
}
@media (max-width: 640px) {
  .section__link--commission-2 {
    width: calc(214 * var(--scale-unit));
  }
  .section__link--commission-3 {
    width: calc(194 * var(--scale-unit));
  }
}
.innerlink {
  position: absolute;
  width: 100%;
  height: 1px;
}
.innerlink--flowchart-salary-1 {
  top: 26%;
}
.innerlink--flowchart-salary-2 {
  top: 62.6%;
}
.innerlink--flowchart-pension-1 {
  top: 25.4%;
}
.innerlink--flowchart-pension-2 {
  top: 62.4%;
}

.section__link--flowchart-salary,
.section__link--flowchart-pension {
  width: 442px;
  padding-bottom: 7%;
  top: 0.4%;
  left: 4%;
}
.section__link--flowchart-pension {
  left: auto;
  right: 4%;
}
@media (min-width: 641px) {
  .section__link--flowchart-salary:hover,
  .section__link--flowchart-pension:hover {
    /* background-color: rgb(255 187 49 / 50%); */
    background: none;
  }
}
@media (max-width: 640px) {
  .section__link--flowchart-salary,
  .section__link--flowchart-pension {
    width: calc(294 * var(--scale-unit));
  }
}
.section__link--flowchart-salary-1,
.section__link--flowchart-salary-2 {
  width: 240px;
  padding-bottom: 5.8%;
  top: 23%;
  left: 8.6%;
}
.section__link--flowchart-salary-2 {
  width: 240px;
  left: auto;
  right: 7.9%;
}
@media (min-width: 641px) {
  .section__link--flowchart-salary-1:hover,
  .section__link--flowchart-salary-2:hover,
  .section__link--flowchart-pension-1:hover,
  .section__link--flowchart-pension-2:hover {
    background-color: rgb(255 255 255 / 50%);
  }
}
@media (max-width: 640px) {
  .section__link--flowchart-salary-1,
  .section__link--flowchart-salary-2 {
    width: calc(160 * var(--scale-unit));
  }
}
.section__link--flowchart-pension-1,
.section__link--flowchart-pension-2 {
  width: 240px;
  padding-bottom: 5.7%;
  top: 22.5%;
  left: 8.6%;
}
.section__link--flowchart-pension-2 {
  width: 238px;
  left: auto;
  right: 8%;
}
@media (max-width: 640px) {
  .section__link--flowchart-pension-1,
  .section__link--flowchart-pension-2 {
    width: calc(160 * var(--scale-unit));
  }
}

.section__link--content-footer-1 {
  width: 656px;
  padding-bottom: 12%;
  top: 6.3%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 640px) {
  .section__link--content-footer-1 {
    width: calc(438 * var(--scale-unit));
  }
}
.section__link--content-footer-2,
.section__link--content-footer-3 {
  width: 325px;
  padding-bottom: 10.6%;
  bottom: 40.2%;
  left: 17.4%;
}
.section__link--content-footer-3 {
  width: 294px;
  left: auto;
  right: 17%;
}
@media (min-width: 641px) {
  .section__link--content-footer-1:hover,
  .section__link--content-footer-2:hover,
  .section__link--content-footer-3:hover {
    background-color: rgb(255 247 208 / 50%);
  }
}
@media (max-width: 640px) {
  .section__link--content-footer-2 {
    width: calc(214 * var(--scale-unit));
  }
  .section__link--content-footer-3 {
    width: calc(194 * var(--scale-unit));
  }
}