#indexTop {
  margin-bottom: 9.6rem;
}
#indexTop .Box {
  position: relative;
  width: 100%;
  aspect-ratio: 10/4;
  background: #333;
}
@media (max-width: 500px) {
  #indexTop .Box {
    aspect-ratio: 1/1;
  }
}
#indexTop .Box .Image {
  aspect-ratio: 10/4;
}
@media (max-width: 500px) {
  #indexTop .Box .Image {
    aspect-ratio: 1/1;
  }
}
#indexTop .Box .Polygon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(12, 53, 114, 0.8);
  clip-path: polygon(20% 100%, 100% 100%, 100% 50%);
}
@media (max-width: 500px) {
  #indexTop .Box .Polygon {
    clip-path: polygon(0% 94%, 0% 100%, 100% 100%, 100% 66%);
  }
}
#indexTop .Box .Title {
  position: absolute;
  right: 3%;
  bottom: 6%;
  line-height: 1;
  text-align: right;
  color: white;
}
@media (max-width: 500px) {
  #indexTop .Box .Title {
    right: 4%;
    bottom: 4%;
    font-size: 0.8rem;
  }
}
#indexTop .Box .Title .Catch {
  margin: 0 0.4em 0.6em auto;
  padding: 0.5em 1em 0.45em;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  color: #0C3572;
  background: white;
  border-radius: 9999px;
}
#indexTop .Box .Title .Sub {
  margin-bottom: 0.5em;
  font-size: 2em;
  letter-spacing: 0.4em;
}
#indexTop .Box .Title .Main {
  margin-right: -0.2em;
  font-size: 3.4em;
  font-weight: bold;
  letter-spacing: 0.4em;
}
#indexTop .Summary {
  padding: 2.4rem 3.6rem 0;
}
@media (max-width: 500px) {
  #indexTop .Summary {
    padding: 1.8rem;
  }
}

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

#indexOrder .Image {
  width: 50%;
}
@media (max-width: 500px) {
  #indexOrder .Image {
    width: 100%;
  }
}

#indexSchool .Image {
  width: 50%;
}
@media (max-width: 500px) {
  #indexSchool .Image {
    width: 100%;
  }
}

#indexProfile .Image {
  width: 30%;
}
@media (max-width: 500px) {
  #indexProfile .Image {
    width: 100%;
  }
}/*# sourceMappingURL=index.css.map */