@media screen and (min-width: 501px) {
  .archive-school {
    padding: 80px 0 120px;
  }
}
@media screen and (max-width: 500px) {
  .archive-school {
    padding: 50px 0 100px;
  }
}

.archive-school__wrap {
  position: relative;
  margin: 0 auto 80px;
}
@media screen and (min-width: 1025px) {
  .archive-school__wrap {
    height: 1020px;
  }
}

.archive-school__map {
  max-width: 840px;
  margin: 0 auto;
}

.archive-school__areaList {
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .archive-school__areaList {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media screen and (max-width: 1024px) {
  .archive-school__areaList {
    max-width: 540px;
    margin: 0 auto;
  }
}

.archive-school__areaItem {
  background-color: #F2DCE3;
  border-radius: 10px;
}
@media screen and (min-width: 1025px) {
  .archive-school__areaItem {
    padding: 40px;
    padding: clamp(20px, 2.083vw, 40px);
    font-size: 20px;
    width: clamp(300px, 23.17vw, 445px);
    position: absolute;
  }
  .archive-school__areaItem.--tohoku {
    top: 0;
    right: 0;
  }
  .archive-school__areaItem.--kanto {
    right: 0;
    bottom: 0;
  }
  .archive-school__areaItem.--hokuriku {
    left: 6%;
    top: 0;
  }
  .archive-school__areaItem.--tokai-kinki {
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }
  .archive-school__areaItem.--kyushu {
    left: 0;
    bottom: 0;
  }
  .archive-school__areaItem.--shikoku {
    position: inherit;
  }
}
@media screen and (max-width: 1024px) {
  .archive-school__areaItem {
    padding: 20px;
  }
  .archive-school__areaItem:nth-child(n+2) {
    margin-top: 20px;
  }
}

.archive-school__areaLink {
  position: relative;
  display: block;
  text-align: center;
  border-radius: 50px;
  background-color: #fff;
  -webkit-box-shadow: 3px 3px 6px 0 rgba(51, 51, 51, 0.3);
          box-shadow: 3px 3px 6px 0 rgba(51, 51, 51, 0.3);
}
@media screen and (min-width: 1025px) {
  .archive-school__areaLink {
    padding: 10px;
    font-size: clamp(18px, 1.27vw, 20px);
  }
}
@media screen and (max-width: 1024px) {
  .archive-school__areaLink {
    padding: 5px 10px;
    font-size: 18px;
  }
}
.archive-school__areaLink:hover {
  background-color: #8E2247;
  color: #fff;
}
.archive-school__areaLink:hover:after {
  background-color: #fff;
}
.archive-school__areaLink:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translate(-10px, -50%);
          transform: translate(-10px, -50%);
  display: inline-block;
  background-color: #8E2247;
  -webkit-mask: url("../img/common/arrow02.svg") no-repeat center/contain;
          mask: url("../img/common/arrow02.svg") no-repeat center/contain;
  width: 16px;
  height: 12px;
}

.archive-school__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
}
@media screen and (min-width: 1025px) {
  .archive-school__list {
    gap: 20px;
  }
}
@media screen and (max-width: 1024px) {
  .archive-school__list {
    gap: 15px;
  }
}

.archive-school__link {
  position: relative;
  display: block;
  text-align: center;
  border-radius: 50px;
  background-color: #fff;
  border: 1px solid #707070;
  line-height: 1.4;
}
@media screen and (min-width: 1025px) {
  .archive-school__link {
    padding: 10px;
    padding-right: 16px;
    font-size: clamp(18px, 1.27vw, 20px);
  }
}
@media screen and (max-width: 1024px) {
  .archive-school__link {
    padding: 5px 10px;
    font-size: 16px;
  }
}
.archive-school__link:hover {
  border: 1px solid #8E2247;
  background-color: #8E2247;
  color: #fff;
}
.archive-school__link:hover:after {
  background-color: #fff;
}
.archive-school__link:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translate(-5px, -50%);
          transform: translate(-5px, -50%);
  display: inline-block;
  background-color: #8E2247;
  -webkit-mask: url("../img/common/arrow02.svg") no-repeat center/contain;
          mask: url("../img/common/arrow02.svg") no-repeat center/contain;
  width: 16px;
  height: 12px;
}

.archive-school__text {
  text-align: center;
}