@charset "UTF-8";
/* ============================================================
 * パーツ: ルーム(並べ方はセラピストと同じ)
 *   スマホ … --sp2(2室)/ --sp3(3室・文字を詰める)/ --spslide(横にスライド)
 *   PC     … --pc3 / --pc4 / --pc5
 * ============================================================ */

.hp-room {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-room__item {
  overflow: hidden;
  background: var(--hp-surface);
  border-radius: 0.8rem;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.08);
}

.hp-room__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, 0.05);
}

.hp-room__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-room__status {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.2rem 0.8rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  background: #777777;
  border-radius: 0.4rem;
}

.hp-room__status--available {
  background: #2e9e5b;
}

.hp-room__status--busy {
  background: #d9534f;
}

/* マニアックな修正でバッジの色を指定したとき(空室・使用中の両方がこの色になる) */
.hp-room__status[class] {
  color: var(--sec-tag-color, #ffffff);
  background: var(--sec-tag-bg, var(--hp-room-status-bg, #777777));
}

.hp-room__status--available {
  --hp-room-status-bg: #2e9e5b;
}

.hp-room__status--busy {
  --hp-room-status-bg: #d9534f;
}

.hp-room__body {
  padding: 1.2rem 1.4rem 1.4rem;
}

.hp-room__name {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
}

.hp-room__area {
  margin: 0.4rem 0 0;
  font-size: 1.2rem;
  color: var(--hp-text-sub);
}

.hp-room__text {
  margin: 0.8rem 0 0;
  font-size: 1.3rem;
  line-height: 1.7;
}

/* ============================================================
 * PC
 * ============================================================ */
@media (min-width: 900px) {
  .hp-room {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* ---------- 並べ方: スマホ ---------- */
.hp-room--sp3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.hp-room--sp3 .hp-room__body {
  padding: 0.6rem 0.6rem 0.8rem;
}

.hp-room--sp3 .hp-room__name {
  font-size: 1.2rem;
}

.hp-room--sp3 .hp-room__area {
  font-size: 1rem;
}

.hp-room--sp3 .hp-room__text {
  display: none;
}

.hp-room--sp3 .hp-room__status {
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.1rem 0.5rem;
  font-size: 1rem;
}

.hp-room--spslide {
  grid-template-columns: none;
  grid-auto-columns: 46%;
  grid-auto-flow: column;
  margin-right: -1.6rem;
  padding: 0 1.6rem 0.8rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.hp-room--spslide > li {
  scroll-snap-align: start;
}

/* ---------- 並べ方: PC ---------- */
@media (min-width: 900px) {
  .hp-room--spslide {
    grid-auto-columns: auto;
    grid-auto-flow: row;
    margin-right: 0;
    padding: 0;
    overflow: visible;
  }

  .hp-room--sp3 {
    gap: 1.6rem;
  }

  .hp-room--sp3 .hp-room__body {
    padding: 1.2rem;
  }

  .hp-room--sp3 .hp-room__name {
    font-size: 1.5rem;
  }

  .hp-room--sp3 .hp-room__area {
    font-size: 1.2rem;
  }

  .hp-room--sp3 .hp-room__text {
    display: block;
  }

  .hp-room--pc3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hp-room--pc4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hp-room--pc5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .hp-area--narrow .hp-room {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 詳細ページへのリンク(カード全体) */
.hp-room__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.hp-room__link:hover .hp-room__img img {
  opacity: 0.85;
}