/*
 * OSTEO Member Service Theme
 * 動画配信サービスページ用のカラーバリエーション
 * =====================================================
 * ※ brand.css / components.css の後に読み込むこと
 */

/* ─── 動画配信サービス専用カラー ─────────────────── */
:root {
  /* ── Personal (個人向け) アクセント色 ── */
  --color-personal-accent:    #a8d5ba;  /* ミント・淡いグリーン */
  --color-personal-light:     #d9ede5;  /* より薄いミント */
  --color-personal-dark:      #5fa085;  /* より濃いグリーン */
  
  /* ── Fitness (フィットネス施設向け) アクセント色 ── */
  --color-fitness-accent:     #4a7c7e;  /* 深緑・ブルーグリーン */
  --color-fitness-light:      #8ab3b8;  /* より薄いブルーグリーン */
  --color-fitness-dark:       #2d4f52;  /* より濃いブルーグリーン */
  
  /* ── Care (介護施設向け) アクセント色 ── */
  --color-care-accent:        #e8d4b0;  /* やわらかいゴールド・ベージュ */
  --color-care-light:         #f2e4d0;  /* より薄いベージュ */
  --color-care-dark:          #d4b591;  /* より濃いベージュ */
}

/* ───────────────────────────────────────────────────── */
/* 動画配信ページ用ヒーロー                                */
/* ───────────────────────────────────────────────────── */

.member-hero {
  position: relative;
  padding-block: clamp(5rem, 15vw, 12rem);
  background: linear-gradient(135deg, var(--color-beige) 0%, var(--color-beige-light) 100%);
  overflow: hidden;
}

.member-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.member-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: 600;
  color: var(--color-deep-green);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}

.member-hero__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--color-text-secondary);
  max-width: 70ch;
  margin-inline: auto;
  line-height: var(--leading-loose);
  font-weight: 400;
}

/* ───────────────────────────────────────────────────── */
/* 3カードレイアウト (総合入口ページ用)                   */
/* ───────────────────────────────────────────────────── */

.member-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.member-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.member-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* カードのタイプ別ラベル */
.member-card__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-beige-light);
  border-bottom: 2px solid var(--color-gold);
}

.member-card__label-number {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: var(--tracking-wider);
}

.member-card__label-type {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
}

/* Personal アクセント */
.member-card--personal .member-card__label {
  border-bottom-color: var(--color-personal-accent);
}

.member-card--personal .member-card__label-number,
.member-card--personal .member-card__label-type {
  color: var(--color-personal-accent);
}

/* Fitness アクセント */
.member-card--fitness .member-card__label {
  border-bottom-color: var(--color-fitness-accent);
}

.member-card--fitness .member-card__label-number,
.member-card--fitness .member-card__label-type {
  color: var(--color-fitness-accent);
}

/* Care アクセント */
.member-card--care .member-card__label {
  border-bottom-color: var(--color-care-accent);
}

.member-card--care .member-card__label-number,
.member-card--care .member-card__label-type {
  color: var(--color-care-accent);
}

/* カード本体 */
.member-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.member-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-deep-green);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-tight);
}

.member-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-lg);
  flex: 1;
}

/* ───────────────────────────────────────────────────── */
/* メンバーページ用カスタムボタン                            */
/* ───────────────────────────────────────────────────── */

.member-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  border: 2px solid var(--color-gold);
  background: var(--color-white);
  color: var(--color-gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  display: inline-block;
}

.member-btn:hover {
  background: var(--color-gold);
  color: var(--color-white);
}

.member-btn--full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-btn--primary {
  background: var(--color-gold);
  color: var(--color-white);
  border-color: var(--color-gold);
}

.member-btn--primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

/* ───────────────────────────────────────────────────── */
/* 各ページのセクション背景                                 */
/* ───────────────────────────────────────────────────── */

.member-section {
  padding-block: var(--space-2xl);
}

.member-section--personal {
  background-color: var(--color-beige);
}

.member-section--personal.alternate {
  background: linear-gradient(135deg, #f5f0e8 0%, #f2ede0 100%);
}

.member-section--fitness {
  background-color: var(--color-beige);
}

.member-section--fitness.alternate {
  background: linear-gradient(135deg, #f5f0e8 0%, #f2ede0 100%);
}

.member-section--care {
  background-color: var(--color-beige);
}

.member-section--care.alternate {
  background: linear-gradient(135deg, #f5f0e8 0%, #f2ede0 100%);
}

/* ───────────────────────────────────────────────────── */
/* 訴求ポイント（フィーチャー）リスト                       */
/* ───────────────────────────────────────────────────── */

.member-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-block: var(--space-xl);
}

.member-feature {
  padding: var(--space-lg);
  background: var(--color-white);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.member-feature--personal {
  border-left-color: var(--color-personal-accent);
}

.member-feature--fitness {
  border-left-color: var(--color-fitness-accent);
}

.member-feature--care {
  border-left-color: var(--color-care-accent);
}

.member-feature__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-deep-green);
  margin-bottom: var(--space-sm);
}

.member-feature__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ───────────────────────────────────────────────────── */
/* CTA セクション                                         */
/* ───────────────────────────────────────────────────── */

.member-cta-section {
  padding-block: var(--space-2xl);
  background: linear-gradient(135deg, var(--color-beige) 0%, var(--color-beige-light) 100%);
  text-align: center;
}

.member-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
  margin-block: var(--space-xl);
}

.member-cta-group__item {
  flex: 0 1 auto;
}

/* ───────────────────────────────────────────────────── */
/* レスポンシブ対応                                         */
/* ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .member-hero {
    padding-block: clamp(3rem, 10vw, 8rem);
  }

  .member-hero__title {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
  }

  .member-cards {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .member-features {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .member-cta-group {
    flex-direction: column;
    gap: var(--space-md);
  }

  .member-btn--full {
    width: 100%;
  }
}