main .basic-visual {
  padding-inline: 5%;
}

main {
  background-color: #F8F8F8;
  overflow-y: hidden;
}
main .circle {
  width: 100vw;
  right: 50%;
  z-index: 0;
  transform: translateY(-10%);
  border-color: #FBD366;
}
@media screen and (max-width: 767px) {
  main .circle {
    width: 200vw;
    transform: translateY(-20%);
  }
}

#visual {
  position: relative;
  z-index: 1;
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  #visual {
    margin-bottom: 2rem;
  }
}
#visual .lead {
  max-width: 790px;
  width: 80%;
  margin-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  #visual .lead {
    width: 100%;
    font-size: 15px;
    margin-bottom: 3rem;
  }
}
#visual .nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 780px;
  width: 620px;
  padding-bottom: 5rem;
}
@media screen and (max-width: 1080px) {
  #visual .nav {
    width: 620px;
  }
}
@media screen and (max-width: 860px) {
  #visual .nav {
    padding-bottom: 9px;
    width: 500px;
  }
}
@media screen and (max-width: 767px) {
  #visual .nav {
    width: 100%;
  }
}
#visual .nav a {
  display: block;
  width: 100px;
}
#visual .nav a.active {
  color: #005BAC;
}
@media screen and (max-width: 860px) {
  #visual .nav a:nth-child(5n+1) {
    width: 100px;
  }
}
@media screen and (max-width: 767px) {
  #visual .nav a:nth-child(5n+1) {
    width: 70px;
  }
}
#visual .nav a.wide {
  width: 216px;
}
@media screen and (max-width: 767px) {
  #visual .nav a.wide {
    width: 160px;
  }
}
@media screen and (max-width: 767px) {
  #visual .nav a {
    width: 70px;
  }
}
#visual .nav a .name {
  display: flex;
  align-items: center;
  font-size: clamp(1.7rem, 1.424rem + 0.4vw, 2rem);
}
@media screen and (max-width: 767px) {
  #visual .nav a .name {
    font-size: 16px;
  }
}
#visual .nav a .name .mark {
  width: 28px;
  height: 28px;
  background-color: transparent;
  border: 1px solid #2D74BB;
  margin-left: 12px;
}
#visual .nav a .name .mark:before {
  background-color: #2D74BB;
}
#visual .nav a .name .mark:after {
  border-color: #2D74BB;
}
@media screen and (max-width: 767px) {
  #visual .nav a .name .mark {
    width: 20px;
    height: 20px;
    margin-left: 8px;
  }
}
#visual .nav a small {
  font-size: clamp(1.1rem, 1.056rem + 0.1vw, 1.2rem);
}
@media screen and (max-width: 767px) {
  #visual .nav a small {
    font-size: 10px;
  }
}
#visual .map-image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
}
@media screen and (max-width: 767px) {
  #visual .map-image {
    position: relative;
    width: 100%;
  }
}
#visual .map-image > img {
  max-width: none;
  width: 100%;
}
#visual .map-image ul li {
  position: absolute;
  width: 3%;
  z-index: 3;
}
#visual .map-image ul li a {
  line-height: 0;
  display: inline-block;
}
#visual .map-image ul li img {
  filter: brightness(1.8) grayscale(0.3);
}
#visual .map-image ul li:hover img, #visual .map-image ul li.active img {
  filter: none;
}
#visual .map-image ul #pin-sic {
  left: 51%;
  top: 59.9%;
}
#visual .map-image ul #pin-tsurumi {
  left: 53%;
  top: 60.9%;
}
#visual .map-image ul #pin-aichi {
  left: 40.6%;
  top: 65.1%;
}
#visual .map-image ul #pin-ibaraki {
  left: 59.2%;
  top: 60.4%;
}
#visual .map-image ul #pin-okayama {
  left: 24%;
  top: 67.7%;
}
#visual .map-image ul #pin-kumamoto {
  left: 8.7%;
  top: 80.6%;
}
#visual .map-image ul #pin-hiroshima {
  left: 17%;
  top: 69.8%;
}
#visual .map-image ul #pin-kagawa {
  left: 25.2%;
  top: 69.2%;
}
#visual .map-image ul #pin-mie {
  left: 36.4%;
  top: 66.5%;
}
#visual .map-image ul #pin-shiga {
  left: 35.2%;
  top: 63.5%;
}
#visual .map-image ul #pin-ogaki {
  left: 39.3%;
  top: 62.6%;
}
#visual .map-image ul #pin-osaka {
  left: 32%;
  top: 67.9%;
}
#visual .map-image ul #pin-tsukuba {
  left: 57%;
  top: 58.7%;
}
#visual .map-image ul #pin-tokyo {
  left: 54.7%;
  top: 59.8%;
}
#visual .map-image ul #pin-toyama {
  left: 41.5%;
  top: 54.2%;
}
#visual .map-image ul #pin-fukuoka {
  left: 9.4%;
  top: 72.6%;
}
#visual .map-image ul #pin-hiratsuka {
  left: 50.4%;
  top: 63.3%;
}

#content-wrap {
  position: relative;
}

.content-block {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
}
.content-block.active {
  animation: fadeInup 1s ease-out;
  animation-fill-mode: forwards;
}
.content-block .bg-box {
  background-color: #fff;
  padding: 7rem 5%;
}
.content-block h2 {
  text-align: center;
  font-size: clamp(4.1rem, 2.896rem + 1.6vw, 5.2rem);
  font-weight: bold;
  line-height: 1;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .content-block h2 {
    font-size: clamp(2.3rem, 1.792rem + 0.7vw, 2.8rem);
  }
}
.content-block .section-block {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .content-block .section-block {
    margin-bottom: 3rem;
  }
}
.content-block .section-block .en-title {
  text-align: right;
  color: #EBEFF2;
  font-size: clamp(4.325rem, 3.052rem + 1.7vw, 5.5rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .content-block .section-block .en-title {
    font-size: clamp(2.3rem, 1.792rem + 0.7vw, 2.8rem);
  }
}
.content-block .section-block h3 {
  background-color: #33B565;
  color: #fff;
  border-radius: 50px;
  line-height: 1.2;
  text-align: center;
  font-size: clamp(2rem, 1.536rem + 0.6vw, 2.4rem);
  font-weight: 500;
  margin-bottom: 6rem;
  padding: 18px;
}
@media screen and (max-width: 767px) {
  .content-block .section-block h3 {
    font-size: clamp(1.7rem, 1.424rem + 0.4vw, 2rem);
    margin-bottom: 4rem;
  }
}
.content-block .features .layout {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .content-block .features .layout {
    flex-direction: column;
  }
}
.content-block .features .layout .text {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .content-block .features .layout .text {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.content-block .features .layout .text h4 {
  font-size: clamp(2.3rem, 1.792rem + 0.7vw, 2.8rem);
  font-weight: 500;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .content-block .features .layout .text h4 {
    font-size: clamp(1.7rem, 1.424rem + 0.4vw, 2rem);
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .content-block .features .layout .text p {
    font-size: 14px;
  }
}
.content-block .features .layout .image {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .content-block .features .layout .image {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.content-block .features .layout .image figcaption {
  font-size: clamp(1.325rem, 1.068rem + 0.3vw, 1.5rem);
}
.content-block .features .position h4 {
  font-size: clamp(1.7rem, 1.424rem + 0.4vw, 2rem);
  font-weight: 500;
  margin-bottom: 3rem;
}
.content-block .features .position ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.content-block .features .position ul li {
  border-radius: 40px;
  color: #fff;
  background-color: #66C88B;
  line-height: 1;
  padding: 8px 16px;
}
.content-block .features .position ul li.off {
  opacity: 0.3;
}
@media screen and (max-width: 767px) {
  .content-block .features .position ul li {
    font-size: 12px;
    padding: 8px;
  }
}
.content-block .appeal h3 {
  background-color: #D69D00;
}
.content-block .appeal .layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
}
@media screen and (max-width: 767px) {
  .content-block .appeal .layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.content-block .appeal .layout .box {
  border-radius: 10px;
  background-color: rgba(252, 225, 153, 0.1);
  padding: 5rem 8%;
  margin-bottom: 2rem;
}
.content-block .appeal .layout .box:nth-child(2n) {
  background-color: rgba(250, 196, 51, 0.1);
}
@media screen and (max-width: 767px) {
  .content-block .appeal .layout .box {
    padding: 1rem 8% 2rem 8%;
    margin-bottom: 0;
  }
}
.content-block .appeal .layout .box .title {
  display: flex;
  align-items: center;
}
.content-block .appeal .layout .box .title h4 {
  flex: 1;
  font-size: clamp(2.3rem, 1.792rem + 0.7vw, 2.8rem);
  font-weight: 500;
  color: #B08000;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .content-block .appeal .layout .box .title h4 {
    font-size: 2rem;
  }
}
.content-block .appeal .layout .box .title .icon {
  width: 40%;
  text-align: center;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .content-block .appeal .layout .box .title .icon {
    width: 25%;
  }
}
.content-block .appeal .layout .box p {
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .content-block .appeal .layout .box p {
    font-size: 14px;
  }
}
.content-block .spots h3 {
  background-color: #6F92CC;
}
.content-block .spots .layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 8rem;
  gap: 24px;
}
.content-block .spots .layout:nth-child(2n) {
  direction: rtl;
}
.content-block .spots .layout > * {
  direction: ltr;
}
@media screen and (max-width: 767px) {
  .content-block .spots .layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
  }
}
.content-block .spots .layout .text h4 {
  font-size: clamp(2.3rem, 1.792rem + 0.7vw, 2.8rem);
  font-weight: 500;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .content-block .spots .layout .text h4 {
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .content-block .spots .layout .text h4 {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  .content-block .spots .layout .text p {
    font-size: 14px;
  }
}
.content-block .good {
  margin-bottom: 0;
}
.content-block .good h3 {
  background-color: #33B565;
}
.content-block .good .layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 5%;
}
@media screen and (max-width: 767px) {
  .content-block .good .layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.content-block .good .box {
  background-color: #F0F4FA;
  border-radius: 10px;
  padding: 4rem 6%;
}
.content-block .good .box:nth-child(2n) {
  direction: rtl;
}
.content-block .good .box > * {
  direction: ltr;
}
.content-block .good .box .lead {
  margin-top: 2rem;
}
.content-block .good .box .prof {
  display: flex;
  align-items: center;
  gap: 8%;
}
.content-block .good .box .prof .image {
  max-width: 140px;
}
@media screen and (max-width: 767px) {
  .content-block .good .box .prof .image {
    max-width: 100px;
  }
}
.content-block .good .box .prof .text {
  font-weight: 500;
}
.content-block .dormitory {
  margin-bottom: 0;
}
.content-block .dormitory h3 {
  background-color: #D69D00;
}
.content-block .dormitory .layout {
  display: flex;
  flex-direction: row-reverse;
  gap: 0 5%;
}
@media screen and (max-width: 767px) {
  .content-block .dormitory .layout {
    flex-direction: column;
    gap: 2rem;
  }
}
.content-block .dormitory .layout .image {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .content-block .dormitory .layout .image {
    width: 100%;
  }
}
.content-block .dormitory .layout .text {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .content-block .dormitory .layout .text {
    width: 100%;
  }
}
.content-block .dormitory .layout.only-text .text {
  width: 100%;
  text-align: center;
}
.content-block .dormitory .layout.vertical {
  flex-direction: column-reverse;
}
.content-block .dormitory .layout.vertical .image {
  margin-top: 4rem;
  width: 100%;
  display: flex;
  gap: 5%;
}
@media screen and (max-width: 767px) {
  .content-block .dormitory .layout.vertical .image {
    flex-direction: column;
    gap: 2rem;
  }
}
.content-block .dormitory .layout.vertical .image span {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .content-block .dormitory .layout.vertical .image span {
    width: 100%;
  }
}
.content-block .dormitory .layout.vertical .text {
  width: 100%;
}
.content-block .dormitory .layout.vertical.ibaraki span {
  width: auto;
}
.content-block .dormitory .layout.vertical.ibaraki .image {
  margin: 4rem auto 0 auto;
}
@media screen and (max-width: 767px) {
  .content-block .dormitory .layout.vertical.ibaraki .image {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
  }
  .content-block .dormitory .layout.vertical.ibaraki .wide {
    width: 100%;
    margin-bottom: 1rem;
  }
  .content-block .dormitory .layout.vertical.ibaraki .room1 {
    width: 64.5%;
  }
  .content-block .dormitory .layout.vertical.ibaraki .room2 {
    width: 32%;
  }
}

.back {
  text-align: center;
  padding: 10rem 5%;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .back {
    padding: 5rem 5%;
  }
}
.back a {
  display: inline-block;
  background-color: #2D74BB;
  font-size: clamp(1.4rem, 1.168rem + 0.3vw, 1.6rem);
  text-align: center;
  color: #fff;
  border-radius: 50px;
  padding: 20px 24px;
  width: 100%;
  max-width: 425px;
}
.back a:hover {
  opacity: 0.8;
}