/* ==========================================================================
   クオリアダイブ｜family.css
   ファミリー向けページ専用スタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページヒーロー：ファミリーバリアント
   -------------------------------------------------------------------------- */
.page-hero--family {
  background: linear-gradient(
    150deg,
    #0a2535 0%,
    #0d4a6e 30%,
    #0077b6 65%,
    #00b4d8 100%
  );
}

/* --------------------------------------------------------------------------
   1. 感情リードセクション
   -------------------------------------------------------------------------- */
.family-lead-section {
  background: var(--color-white);
  padding: var(--spacing-2xl) 0;
}

.family-lead-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.family-lead-text {
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text);
  margin-bottom: var(--spacing-xl);
}

.family-lead-text strong {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   2. 年齢別参加ガイド
   -------------------------------------------------------------------------- */
.family-age-section {
  background: var(--color-bg-light);
  padding: var(--spacing-2xl) 0;
}

.family-age-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

@media (min-width: 560px) {
  .family-age-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .family-age-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.family-age-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

.family-age-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.family-age-card-header {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  color: var(--color-white);
}

.family-age-card--infant .family-age-card-header {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.family-age-card--child .family-age-card-header {
  background: linear-gradient(135deg, var(--color-accent), #48cae4);
}

.family-age-card--teen .family-age-card-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.family-age-card--adult .family-age-card-header {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.family-age-card--senior .family-age-card-header {
  background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

.family-age-card-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.family-age-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.85;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.family-age-card-age {
  font-size: 1.1rem;
  font-weight: 700;
}

.family-age-card-body {
  padding: var(--spacing-md) var(--spacing-lg);
}

.family-age-card-activity {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.4rem 0;
  font-size: 0.875rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-bg-light);
}

.family-age-card-activity:last-child {
  border-bottom: none;
}

.family-age-card-activity i {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.family-age-card-activity--ok i { color: var(--color-primary); }
.family-age-card-activity--ng i { color: #e74c3c; }
.family-age-card-activity--note i { color: #e67e22; }

/* --------------------------------------------------------------------------
   3. ファミリー安心ポイント
   -------------------------------------------------------------------------- */
.family-points-section {
  background: var(--color-white);
  padding: var(--spacing-2xl) 0;
}

.family-points-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

@media (min-width: 640px) {
  .family-points-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.family-point-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  padding: var(--spacing-lg);
  background: var(--color-bg-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

.family-point-item:hover {
  border-color: var(--color-primary);
  background: var(--color-sky, #e8f4fd);
}

.family-point-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.family-point-icon i {
  font-size: 1.4rem;
  color: var(--color-white);
}

.family-point-body {
  flex: 1;
}

.family-point-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.family-point-text {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   4. 三世代イメージセクション
   -------------------------------------------------------------------------- */
.family-3gen-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent) 100%);
  padding: var(--spacing-2xl) 0;
  color: var(--color-white);
}

.family-3gen-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.family-3gen-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
}

.family-3gen-title {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  font-family: var(--font-serif);
  line-height: 1.5;
}

.family-3gen-text {
  font-size: 0.95rem;
  line-height: 2;
  opacity: 0.9;
  margin-bottom: var(--spacing-xl);
}

.family-3gen-members {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);
}

.family-3gen-member {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  min-width: 100px;
}

.family-3gen-member-icon {
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
}

.family-3gen-member-label {
  font-size: 0.85rem;
  font-weight: 700;
}

.family-3gen-member-activity {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   5. コース選択
   -------------------------------------------------------------------------- */
.family-course-section {
  background: var(--color-bg-light);
  padding: var(--spacing-2xl) 0;
}

.family-course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

@media (min-width: 640px) {
  .family-course-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.family-course-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  transition: var(--transition);
}

.family-course-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.family-course-card--diving .family-course-header {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
}

.family-course-card--snorkeling .family-course-header {
  background: linear-gradient(120deg, var(--color-accent), #48cae4);
}

.family-course-header {
  padding: var(--spacing-lg) var(--spacing-xl);
  color: var(--color-white);
}

.family-course-header-icon { font-size: 2rem; margin-bottom: var(--spacing-sm); }
.family-course-header-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; }
.family-course-header-sub { font-size: 0.8rem; opacity: 0.85; }

.family-course-body {
  padding: var(--spacing-lg) var(--spacing-xl);
}

.family-course-price {
  font-size: 1rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.family-course-price span { font-size: 1.6rem; }

.family-course-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md);
}

.family-course-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  line-height: 1.7;
  padding: 0.3rem 0;
  color: var(--color-text);
}

.family-course-list li i {
  color: var(--color-primary);
  font-size: 0.8rem;
  margin-top: 4px;
  flex-shrink: 0;
}

.family-course-tag {
  display: inline-block;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin: 0.15rem;
}

/* 北谷滞在ファミリーの予約前チェック */
.family-chatan-stay-check {
  padding: var(--spacing-3xl) 0;
  background: linear-gradient(180deg, #f2fbff 0%, #ffffff 100%);
}

.family-chatan-stay-check-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(55, 174, 226, 0.28);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(24, 85, 120, 0.10);
}

.family-chatan-stay-check-heading { max-width: 760px; }
.family-chatan-stay-check-kicker {
  margin: 0 0 .55rem;
  color: #168dc3;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.family-chatan-stay-check h2 {
  margin: 0 0 .85rem;
  color: #16384d;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.45;
}
.family-chatan-stay-check-heading > p:last-child {
  margin: 0;
  color: #436073;
  line-height: 1.9;
}
.family-chatan-stay-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
  counter-reset: family-check;
}
.family-chatan-stay-check-list li {
  position: relative;
  min-height: 120px;
  padding: 1rem 1rem 1rem 3.4rem;
  border: 1px solid #dceef6;
  border-radius: 16px;
  background: #f9fdff;
  counter-increment: family-check;
}
.family-chatan-stay-check-list li::before {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 50%;
  background: #168dc3;
  color: #fff;
  content: counter(family-check);
  font-size: .8rem;
  font-weight: 700;
}
.family-chatan-stay-check-list strong { display: block; margin-bottom: .35rem; color: #16384d; }
.family-chatan-stay-check-list span { color: #587082; font-size: .92rem; line-height: 1.75; }
.family-chatan-stay-check-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 699px) {
  .family-chatan-stay-check-list { grid-template-columns: 1fr; }
  .family-chatan-stay-check-list li { min-height: 0; }
  .family-chatan-stay-check-actions .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   モバイル調整
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .family-3gen-members {
    gap: var(--spacing-sm);
  }

  .family-3gen-member {
    min-width: 80px;
    padding: var(--spacing-sm) var(--spacing-md);
  }
}