/* =========================================================
   THE MOUTH — facility.css
   設備紹介ページ（左右交互の大型ビジュアル）
   ========================================================= */
.facility-page { background: var(--bg); }

/* ページヘッダー */
.facility-hero {
  padding: clamp(120px, 14vw, 180px) clamp(24px, 6vw, 80px) clamp(20px, 3vw, 32px);
  text-align: center;
}
.facility-hero__eyebrow {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: 0.42em;
  color: var(--navy-soft);
}
.facility-hero__title {
  margin-top: 14px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: 0.1em;
  color: var(--navy);
}
.facility-hero__lead {
  margin: clamp(20px, 2.6vw, 28px) auto 0;
  max-width: 640px;
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* リスト（左右交互） */
.facility-list {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 80px) clamp(72px, 9vw, 120px);
  display: grid;
  gap: clamp(56px, 8vw, 104px);
}
.facility-item {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.facility-item--reverse .facility-item__media { order: 2; }
.facility-item--reverse .facility-item__body { order: 1; }

.facility-item__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-beige);
}
.facility-item__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.facility-item__no {
  font-family: var(--font-en);
  font-weight: 200;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: 0.1em;
  color: var(--line);
  line-height: 1;
}
.facility-item__role {
  margin-top: 10px;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--navy-soft);
}
.facility-item__title {
  margin-top: 10px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: 0.08em;
  color: var(--navy);
}
.facility-item__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 18px;
  background: var(--navy-soft);
}
.facility-item__desc {
  margin-top: 18px;
  font-size: clamp(13.5px, 1.4vw, 15px);
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--ink);
}

@media (max-width: 860px) {
  .facility-hero { padding-top: 96px; }
  .facility-item {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  /* SPでは常に写真→テキストの順 */
  .facility-item--reverse .facility-item__media { order: 1; }
  .facility-item--reverse .facility-item__body { order: 2; }
  .facility-item__media { margin-inline: -24px; }
}

/* 設備：写真準備中（COMING SOON）プレースホルダ */
.facility-item__media--placeholder {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.facility-item__media--placeholder span {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: 0.28em;
  color: var(--ink-light);
}