/* ── building.html 専用スタイル ── */

/* キャッチ導入 */
.building-intro {
  background: #fff;
  padding: 80px 32px 64px;
  text-align: center;
}
.building-intro .ip-section-lead {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.building-badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.building-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: #EFF7FD;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  color: #0874C7;
}
.building-badge .material-symbols-outlined {
  font-size: 18px;
}

/* 特徴セクション共通 */
.building-feature {
  padding: 80px 32px;
}
.building-feature.pale { background: #EFF7FD; }
.building-feature.white { background: #fff; }

.building-feature-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.building-feature-inner.reverse { direction: rtl; }
.building-feature-inner.reverse > * { direction: ltr; }

/* 画像ブロック */
.building-img-main {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.building-img-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.building-img-grid2 img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
/* 画像が1枚だけのときは横幅いっぱいに使う */
.building-img-grid2 img:only-child {
  grid-column: span 2;
}
.building-img-stacked {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
}
.building-img-stacked img:first-child {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.building-img-stacked .building-img-sub2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.building-img-stacked .building-img-sub2 img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ピロティ専用：フル幅 */
.building-piloti {
  background: #fff;
  padding: 80px 32px;
}
.building-piloti-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.building-piloti-head {
  margin-bottom: 40px;
}
.building-piloti-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.building-piloti-photos img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* 写真ギャラリー */
.building-gallery {
  background: #1A1A1A;
  padding: 72px 32px;
}
.building-gallery-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.building-gallery-title {
  font-size: var(--font-subsection-title);
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}
.building-gallery-sub {
  font-size: var(--font-note);
  color: var(--color-muted);
  margin-bottom: 32px;
}
.building-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.building-gallery-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.building-gallery-grid img:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1;
}

/* 施設グリッド */
.building-facilities {
  background: #fff;
  padding: 72px 32px;
}
.building-facilities-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.building-facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.building-facility-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 16px 24px;
  text-align: center;
  border: 1px solid #D1D1D1;
}
.building-facility-card .material-symbols-outlined {
  font-size: 40px;
  color: #0874C7;
  display: block;
  margin-bottom: 14px;
}
.building-facility-name {
  font-size: var(--font-minor-title);
  font-weight: 900;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.building-facility-desc {
  font-size: var(--font-body);
  color: var(--color-muted);
  line-height: 1.7;
}

/* pool highlight badge */
.building-pool-tag {
  display: inline-block;
  background: #0874C7;
  color: #fff;
  font-size: var(--font-ui);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .building-intro { padding: 56px 20px 48px; }
  .building-intro-title { font-size: 24px; }
  .building-feature { padding: 56px 20px; }
  .building-feature-inner { grid-template-columns: 1fr; gap: 32px; }
  .building-feature-inner.reverse { direction: ltr; }
  .building-piloti { padding: 56px 20px; }
  .building-piloti-photos { grid-template-columns: 1fr; }
  .building-gallery { padding: 56px 20px; }
  .building-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .building-gallery-grid img:first-child { grid-column: span 2; }
  .building-facilities { padding: 56px 20px; }
  .building-facilities-grid { grid-template-columns: repeat(2, 1fr); }
  .building-feature-title { font-size: var(--font-section-title); }
}