/* ===== 2026-08 再構成用の追加スタイル（style.css は変更しない） ===== */
/* PORTCLUB の既存トークン（--color-ocean 等）にそのまま乗せる */

.bc__nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 24px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--color-text-light);
}
.bc__nav ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.bc__nav li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .5; }
.bc__nav a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.bc__nav a:hover { border-bottom-color: var(--color-ocean); }
@media screen and (max-width: 768px) { .bc__nav { padding: 14px 18px 0; font-size: 12px; } }

/* ===== 2026-08 追加：ファミリー向けの安心ポイント（family-card） ===== */
.family-card__photo { margin: -28px -26px 20px; overflow: hidden; }
.family-card__photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .6s ease;
}
.family-card:hover .family-card__photo img { transform: scale(1.04); }
@media screen and (max-width: 768px) {
  .family-card__photo { margin: -26px -22px 18px; }
}

/* facility-card と同じ質感で、画像を持たない3カラムのカード */
.family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.family-card {
  background: var(--color-warm-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px 28px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.family-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(27, 40, 56, 0.08);
}
.family-card__title {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--color-deep-navy);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.family-card__text {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-light);
}
@media screen and (max-width: 900px) {
  .family-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .family-card { padding: 26px 22px; }
}

/* ===== 2026-08 追加：予約サイト掲載プランのカード（plan-card） ===== */
.plan-block { margin-top: 72px; }
.plan-block__heading {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--color-deep-navy);
  text-align: center;
}
.plan-block__lead {
  margin-top: 14px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-light);
  text-align: center;
}
.plan-card__photo { margin: -28px -26px 22px; overflow: hidden; }
.plan-card__photo img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .6s ease;
}
.plan-card:hover .plan-card__photo img { transform: scale(1.04); }

.plan-grid {
  /* 依頼により4本を対等に「上二つ・下二つ」で見せる（2026-08） */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 36px;
}
@media screen and (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--color-warm-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px 24px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(27, 40, 56, 0.08);
}
.plan-card__label {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--color-ocean);
  border: 1px solid var(--color-ocean);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 16px;
}
.plan-card__title {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-deep-navy);
  margin-bottom: 14px;
}
.plan-card__text {
  font-size: 13.5px;
  line-height: 2;
  color: var(--color-text-light);
  margin-bottom: 20px;
}
.plan-card__meta {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.plan-card__meta li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
/* 狭い幅で「料金」「定員」等のラベルが1文字ずつ折り返すのを防ぐ（2026-08）。
   ラベルは素のテキストノードでセレクタから触れないため、li を nowrap にし、
   値側の span だけ折り返しを許可する。 */
.plan-card__meta li { align-items: baseline; white-space: nowrap; }
.plan-card__meta li span { white-space: normal; }
.plan-card__meta li span {
  text-align: right;
  color: var(--color-text-light);
}
.plan-card__cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--color-ocean);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ocean);
  padding-bottom: 3px;
  transition: opacity var(--transition);
}
.plan-card__cta:hover { opacity: .65; }
@media screen and (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan-block { margin-top: 48px; }
}