.main {
  width: 83.3vw;
  margin: 0 auto;
}


@media (max-width: 767px) {
  .main {
    width: 89.74vw;
  }

  .content__ttl {
    padding-bottom: 8.9vw;
  }
}

.school__category {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1vw;
  padding-bottom: 3.88vw;
}

.school__category__btn {
  width: 7.98vw;
  height: 2.08vw;
  border: 1px solid #826190;
  border-radius: 2px;
  background: #ffffff;
  color: #826190;
  font-size: calc(0.97vw * var(--text-scale));
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.school__category__btn:hover {
  background: #826190;
  color: #ffffff;
}

.school__category__btn.is-active {
  background: #826190;
  color: #ffffff;
}

.school__download-list {
  gap: 1.1vw;
  padding-bottom: 5vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.school__download-list__item {
  width: 100%;
  height: 5.27vw;
}

.school__download-list__item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 1.1vw 0 1.66vw;
  background-color: #f7f4f9;
  text-decoration: none;
  gap: 0.5vw;
}

.school__download-list__item--text {
  color: #282828;
  font-family: YuGothic, sans-serif;
  font-size: calc(1.1vw * var(--text-scale));
  font-weight: 700;
  /*white-space: nowrap;*/
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.school__download-list__item--text .small {
  font-size: calc(1.11vw * var(--text-scale));
}

.school__download-list__item--arrow {
  z-index: 1;
  width: 1.94vw;
  height: 1.94vw;
}

.school__download-list__item--arrow .arrow-circle {
  fill: #826190;
}

.school__download-list__item--arrow .arrow-path {
  fill: #fff;
}

/* hover */
.school__download-list__item a:hover {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #826190;
}

.school__download-list__item:hover .icon-bg {
  fill: #826190;
}

.school__download-list__item:hover .icon-fill {
  fill: #fff;
}

.school__download-list__item:hover .icon-stroke {
  stroke: #fff;
}

@media (max-width: 768px) and (min-width: 601px) {
  .school__category__btn {
    font-size: 2.6vw;
  }
}

@media (max-width: 767px) {
  .school {
    padding-bottom: 10.25vw;
  }

  .school__category {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.56vw;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .school__category__btn {
    width: 100%;
    height: 7.17vw;
    font-size: 3.33vw;
  }

  .school__download-list {
    display: flex;
    flex-direction: column;
    gap: 4.1vw;
    padding-bottom: 10.25vw;
  }

  .school__download-list__item {
    width: 100%;
    height: 19.48vw;
  }

  .school__download-list__item a {
    padding: 0 4.6vw 0 6.15vw;
    gap: 3vw;
  }

  .school__download-list__item--text {
    font-size: 4.1vw;
  }

  .school__download-list__item--arrow {
    width: 7.17vw;
    height: 7.17vw;
  }
}

.school__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.77vw 2.569vw;
  padding-bottom: 9.93vw;
  margin: 0;
  padding-left: 0;
  list-style: none;
  height: auto;
  flex-wrap: wrap;
  will-change: transform;
  transition: transform 0.4s ease;
}

.school__card {
  border-radius: 5px;
  padding: 1.81vw 1.9vw;
  box-sizing: border-box;
  flex: 0 0 26.04vw;
  border: 1px solid #826190;
}

.school__card-link {
  display: block;
  text-decoration: none;
  -webkit-user-drag: none;
}

.school__card-head {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 0.7vw;
}

.school__card-img {
  width: 22.08vw;
  height: 14.7vw;
  display: block;
  border-radius: 5px;
  object-fit: cover;
  object-position: center;
}

.school__card-status {
  position: absolute;
  top: 0.7vw;
  left: 0.9vw;
  padding: 0.4vw 1.6vw;
  border-radius: 2px;
  font-weight: 700;
  font-size: calc(1.04vw * var(--text-scale));
  color: #ffffff;
  background: #826190;
  border: 1px solid #826190;
  line-height: 1;
}

.school__card-status--close {
  background: #ffffff;
  color: #826190;
}

.school__card-ttl {
  font-size: calc(1.28vw * var(--text-scale));
  font-weight: 700;
  line-height: 1.5;
  color: #826190;
  margin-bottom: 1.04vw;
  min-height: calc(1.28vw * 1.5 * 2);
  letter-spacing: 0.1rem;
}

.school__card-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.45vw;
  min-width: 8.3vw;
  padding: 3px 0;
  border-radius: 40px;
  background: #826190;
  color: #ffffff;
  font-weight: 700;
  font-size: calc(0.97vw * var(--text-scale));
  line-height: 1.5;
  margin-bottom: 0.55vw;
}

.school-card__divider {
  border: none;
  border-top: 1px solid #826190;
  margin-bottom: 1.38vw;
}

.school__card-text {
  font-size: calc(1.1vw * var(--text-scale));
  line-height: 1.5;
  color: #826190;
  font-weight: normal;
  margin-bottom: 1.38vw;
}

.school__card-footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.school__card-date {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.school__date-ttl {
  font-size: calc(1.1vw * var(--text-scale));
  font-weight: 700;
  color: #826190;
  line-height: 1.5;
}

.school__date {
  font-size: calc(1.1vw * var(--text-scale));
  font-weight: normal;
  color: #826190;
  line-height: 1.5;
  display: inline-block;
}

@media (max-width: 767px) {
  .school__cards {
    grid-template-columns: repeat(1, 1fr);
    gap: 6.15vw;
    padding-bottom: 23.3vw;
  }

  .school__card {
    padding: 4vw;
    padding-bottom: 3.5vw;
  }

  .school__card-head {
    margin-bottom: 2.8vw;
  }

  .school__card-img {
    width: 81.55vw;
    height: 54.35vw;
  }

  .school__card-status {
    top: 3vw;
    left: 2vw;
    padding: 1.5vw 5vw;
    font-size: 3.5vw;
  }

  .school__card-ttl {
    font-size: 5.12vw;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: 0;
    min-height: calc(5.12vw * 1.5 * 2);
    margin-bottom: 4vw;
  }

  .school__card-category {
    height: 5vw;
    min-width: 30.76vw;
    padding: 3px 0;
    font-size: 3.68vw;
    line-height: 1.5;
    margin-bottom: 2.05vw;
  }

  .school-card__divider {
    margin-bottom: 5.12vw;
  }

  .school__card-text {
    font-size: 4.1vw;
    margin-bottom: 5.12vw;
  }

  .school__date-ttl {
    font-size: 4.1vw;
    padding-right: 1.5vw;
  }

  .school__date {
    font-size: 4.1vw;
    min-height: calc(4vw * 1.5 * 3);
  }
}