/* =========================================================
   hotel Giraffe Nakasu - concept.css (page-concept.php 専用)
   ========================================================= */


#about-concept h3 {
  padding-left: 40px;
}
.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 22px 0;
}
.dots span {
  width: 4px; height: 4px;
  background: var(--color-gold);
  border-radius: 50%;
  display: inline-block;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 860px) {
  .feature--reverse .feature-media { order: 2; }
  .feature--reverse .feature-body { order: 1; }
}
.feature-media.grid-2 { gap: 2px; }

@media screen and (max-width: 768px) {
  #about-concept .section-heading {
    margin-bottom: 60px;
  }
}

#about-concept {
  padding: 80px 0 90px 0;
}
#about-location {
  padding: 110px 0;
  background-color: #FBFAF8;
}
#about-private {
  padding: 110px 0;
  background-color: #fff;
}
#about-design {
  padding: 110px 0;
  background-color: #F1F1E9;
}
#about-sauna {
  padding: 110px 0;
  background-color: #9c8752;
}
#about-sauna h2,
#about-sauna h3,
#about-sauna .label,
#about-sauna p {
  color: #fff;
}
#about-sauna h2 {
  display: flex;
  align-items: flex-end;
}
#about-sauna h2 span {
  color: #9c8752;
  background-color: #fff;
  font-size: 18px;
  padding: 10px;
  margin-left: 20px;
  margin-bottom: 12px;
}
#about-sauna .btn {
  border: 1px solid #fff;
  color: #fff;
  width: 260px;
}
#about-location .feature-media,
#about-sauna .feature-media {
  gap: 2px;
}
#about-location .feature,
#about-private .feature,
#about-design .feature,
#about-sauna .feature {
  align-items: flex-start;
}
#about-location .feature-media img {
  width: 100%;
  aspect-ratio: 30 / 13;
  object-fit: cover;
}
#about-private .feature-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
#about-design .feature-media img {
  width: 100%;
  aspect-ratio: 37 / 100;
  object-fit: cover;
}
#about-sauna .feature-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  #about-concept {
    padding: 80px 0 70px 0;
  }
  #about-location {
    padding: 100px 0;
  }
  #about-private {
    padding: 100px 0 130px;
  }
  #about-location {
    padding: 100px 0;
  }
  #about-sauna {
    padding: 100px 0;
  }
  #about-location .feature,
  #about-design .feature {
    flex-direction: column-reverse;
  }
  #about-sauna .feature-body .label {
    margin-bottom: 30px;
  }
  #about-sauna .feature-body p {
    margin-bottom: 20px;
  }
  #about-sauna .feature-body .btn {
    width: 200px;
  }

  #about-sauna .white-label {
    width: fit-content;
    color: #9c8752;
    background-color: #fff;
    font-size: 15px;
    padding: 10px;
    margin-bottom: 55px;
  }
}

#about-garally {
  padding-top: 40px;
  background-color: #fff;
}
#about-garally img {
  width: 100%;
}