#schoolTop {
  margin-bottom: 96px;
}
#schoolTop .Box {
  position: relative;
  width: 100%;
  aspect-ratio: 10/4;
  font-size: clamp(5px, 1vw, 10px);
  background: #333;
}
@media (max-width: 500px) {
  #schoolTop .Box {
    aspect-ratio: 1/1;
    font-size: 2vw;
  }
}
#schoolTop .Box > .Image {
  aspect-ratio: 10/4;
}
@media (max-width: 500px) {
  #schoolTop .Box > .Image {
    aspect-ratio: 1/1;
  }
}
#schoolTop .Box .Base {
  position: absolute;
  top: 5%;
  right: 2.5%;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2.4em;
  width: 50%;
  line-height: 1;
  color: white;
  background: rgba(12, 53, 114, 0.8);
  border-radius: 4px;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base {
    top: 2.5%;
    bottom: 2.5%;
    padding: 1.5em 0;
  }
}
#schoolTop .Box .Base .Catch {
  position: absolute;
  top: 0;
  left: -5%;
  transform: rotateZ(-24deg);
  padding: 0.5em 0.5em 0.5em 0.7em;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
  color: #0C3572;
  background: white;
  border-radius: 9999px;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Catch {
    top: 0;
    left: -6%;
    font-size: 1.4em;
  }
}
#schoolTop .Box .Base .Upper {
  display: flex;
  gap: 1.2em;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Upper {
    flex-direction: column;
  }
}
#schoolTop .Box .Base .Upper .Title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: -1em;
  text-align: center;
  word-break: keep-all;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Upper .Title {
    justify-content: start;
    gap: 0.5em;
  }
}
#schoolTop .Box .Base .Upper .Title .Sub {
  font-size: 2.4em;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Upper .Title .Sub {
    font-size: 1.8em;
  }
}
#schoolTop .Box .Base .Upper .Title .Main {
  font-size: 3.4em;
  font-weight: bold;
  letter-spacing: 0.3em;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Upper .Title .Main {
    font-size: 3em;
  }
}
#schoolTop .Box .Base .Upper .Title .Add {
  font-size: 1.8em;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Upper .Title .Add {
    font-size: 1.6em;
  }
}
#schoolTop .Box .Base .Upper .Works {
  flex-grow: 1;
  display: flex;
  justify-content: space-around;
  gap: 0.5em;
  width: 25%;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Upper .Works {
    width: 100%;
  }
}
#schoolTop .Box .Base .Upper .Works .Image {
  width: 50%;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Upper .Works .Image {
    width: 40%;
  }
}
#schoolTop .Box .Base .Middle {
  display: flex;
  flex-direction: column;
  gap: 1em;
  letter-spacing: 0.3em;
}
#schoolTop .Box .Base .Middle .Flex {
  display: flex;
  gap: 0.6em;
  font-size: 1.6em;
  line-height: 1.4;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Middle .Flex {
    flex-direction: column;
    gap: 0;
    letter-spacing: 0;
    font-size: 1.7em;
  }
}
#schoolTop .Box .Base .Bottom .btn-Link {
  margin-top: 0;
  font-weight: bold;
  text-align: center;
  color: #0C3572;
  background: white;
}
@media (max-width: 500px) {
  #schoolTop .Box .Base .Bottom .btn-Link {
    padding: 0.8em 1.6em;
    width: 100%;
    font-size: 1.4em;
  }
}
#schoolTop .Summary {
  padding: 24px 36px 0;
}
@media (max-width: 500px) {
  #schoolTop .Summary {
    padding: 12px 12px;
  }
}

#schoolInstructor .card-Section .Image {
  width: 30%;
}
@media (max-width: 500px) {
  #schoolInstructor .card-Section .Image {
    width: 100%;
  }
}

#schoolCurriculum .Title {
  display: flex;
  font-size: clamp(12px, 2.4vw, 24px);
  border: 1px solid #0C3572;
  border-radius: 4px 4px 0 0;
}
@media (max-width: 500px) {
  #schoolCurriculum .Title {
    font-size: 4.2vw;
  }
}
#schoolCurriculum .Title .Left {
  padding: 0.5em 1em;
  font-weight: bold;
  text-align: center;
  word-break: keep-all;
  color: white;
  background: #0C3572;
}
@media (max-width: 500px) {
  #schoolCurriculum .Title .Left {
    padding: 0.2em 0.4em;
  }
}
#schoolCurriculum .Title .Right {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.5em 1em;
  font-weight: bold;
  text-align: right;
  letter-spacing: 0.1em;
  color: #0C3572;
  background: white;
}
@media (max-width: 500px) {
  #schoolCurriculum .Title .Right {
    padding: 0.2em 0.4em;
  }
}
#schoolCurriculum .Sections {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.4vw, 24px);
}
#schoolCurriculum figure {
  padding: clamp(12px, 2.4vw, 24px);
  border: 1px solid #0C3572;
  border-top: none;
  background: white;
  border-radius: 0 0 4px 4px;
}
#schoolCurriculum figure .Caption h4 {
  display: block;
  margin-bottom: 1em;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.4;
  color: #0C3572;
}
#schoolCurriculum figure .Caption small {
  display: block;
  margin-top: 1em;
  font-size: 1.5rem;
  font-weight: bold;
  color: #0C3572;
}
#schoolCurriculum figure .Image {
  width: 30%;
}
@media (max-width: 500px) {
  #schoolCurriculum figure .Image {
    width: 100%;
  }
}

#schoolAccess .Summary {
  margin-bottom: clamp(24px, 4.8vw, 48px);
}
#schoolAccess figure {
  gap: clamp(12px, 2.4vw, 24px);
  margin-bottom: clamp(12px, 2.4vw, 24px);
  color: #666;
}
#schoolAccess figure .Image {
  width: 50%;
}
@media (max-width: 500px) {
  #schoolAccess figure .Image {
    width: 100%;
  }
}
#schoolAccess figure .Caption {
  font-size: clamp(8px, 1.6vw, 16px);
}
@media (max-width: 500px) {
  #schoolAccess figure .Caption {
    font-size: 3.5vw;
  }
}
#schoolAccess figure .Caption address {
  margin-bottom: clamp(8px, 1.6vw, 16px);
}
#schoolAccess figure .Caption ul {
  font-size: 0.9em;
  list-style-type: disc;
}
#schoolAccess figure .Caption ul li {
  word-break: keep-all;
  margin-left: 1em;
}/*# sourceMappingURL=school.css.map */