@charset "UTF-8";
main {
  padding-block: 50px 100px;
}
@media screen and (max-width: 768px) {
  main {
    padding-block: 50px 50px;
  }
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
Accommodation 宿泊情報
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.about-area p {
  font-size: var(--font-size-xxl);
  margin-block: 0.5em 1em;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .about-area p {
    font-size: 1.6rem;
  }
}
.about-area-content {
  background-color: rgba(172, 158, 198, 0.16);
  border-radius: 20px;
  padding: 25px;
}
@media screen and (min-width: 769px) {
  .about-area-content {
    display: flex;
    flex-wrap: wrap;
    padding: 70px 3.33% 70px 8.33%;
  }
}
.about-area-content .text-block img {
  display: block;
  margin: 25px auto 50px;
}
@media screen and (max-width: 768px) {
  .about-area-content .text-block img {
    max-width: 270px;
  }
}
@media screen and (min-width: 769px) {
  .about-area-content .text-block {
    width: 43%;
  }
}
@media screen and (min-width: 769px) {
  .about-area-content .image-block {
    width: 51%;
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  .about-area-content .image-block {
    text-align: center;
  }
  .about-area-content .image-block img {
    max-width: 300px;
  }
}
.about-area-content p.large {
  font-size: 3.4rem;
  font-size: clamp(2rem, 2.8333333333vw, 3.4rem);
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.about-area-content p {
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.075em;
}

.accommondation-list {
  scroll-margin-top: var(--header-height);
}
.accommondation-list h2 {
  margin-bottom: 1em;
}