/**
 * family.css — 声日記フリー（家族成長フィード）共通スタイルシート
 * 対象: public/family/index.html / setup.html / movie.html / voice_diary.html / voice_diary_album.html
 * 使い方: <link rel="stylesheet" href="/assets/family.css"> を head に1行追加（inline CSS の上書き用）
 *
 * ブランドカラー canonical (CLAUDE.md §1):
 *   navy: #13234a / navy-dark: #0c1a39 / gold: #b89455 / gold-light: #d9b97a / gold-dark: #9a7a3e
 *   bg: #f6f2e9 / bg-soft: #f9f5ee / line: #e2dccd / text: #1a1814 / muted: #5a554c
 *
 * 禁止値: #1a2a4a / #c9a45c / #fafaf7 / #2a3d55（旧系）
 *
 * 設計方針:
 *   - 主ユーザーに祖父母を含む。本文18px以上・タップ領域44px以上を全箇所で守る
 *   - 立場B: 煽らない・責めない・絵文字は強調1つまで・「消えます」型禁止
 *   - CSS変数化（--family-*）で上書き可能にする
 *
 * docs/voice-diary-brand-system.md が仕様の真値。
 */

/* ============================================================
   1. CSS カスタムプロパティ（ブランドトークン）
   ============================================================ */

:root {
  /* ブランドカラー canonical */
  --family-navy:       #13234a;
  --family-navy-dark:  #0c1a39;
  --family-gold:       #b89455;
  --family-gold-light: #d9b97a;
  --family-gold-dark:  #9a7a3e;
  --family-bg:         #f6f2e9;
  --family-bg-soft:    #f9f5ee;
  --family-line:       #e2dccd;
  --family-text:       #1a1814;
  --family-muted:      #5a554c;

  /* 章テーマ色（フィードカードの左ボーダーのみに使う）
     種明かしはDay14のみ。名前はUIに出さない */
  --family-day1-accent:      #13234a; /* Day1 立ち上げ: navy */
  --family-linking-accent:   #3a6ea8; /* Day2-5 Linking: 青 */
  --family-flapt-accent:     #3a8a5c; /* Day6-9 Flap T: 緑 */
  --family-reduction-accent: #7a5ca8; /* Day10-13 Reduction: 紫 */
  --family-day14-accent:     #b89455; /* Day14 卒業: gold */

  /* レイアウト */
  --family-radius:     6px;
  --family-radius-lg:  8px;
  --family-max-width:  560px;

  /* タイポグラフィ */
  --family-font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --family-font-sans:  -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --family-font-base:  18px; /* 祖父母配慮の最小フォントサイズ */
}


/* ============================================================
   2. リセット / ベース（family/ ページ専用スコープ）
   ============================================================ */

.family-page,
.family-page *,
.family-page *::before,
.family-page *::after {
  box-sizing: border-box;
}

.family-page {
  font-family: var(--family-font-serif);
  font-size:   var(--family-font-base);
  line-height: 1.85;
  color:       var(--family-text);
  background:  var(--family-bg);
  -webkit-font-smoothing: antialiased;
}

/* ラッパー（既存 .wrap と同等・共通化） */
.family-wrap {
  max-width: var(--family-max-width);
  margin:    0 auto;
  padding:   0 16px 56px;
}


/* ============================================================
   3. ヘッダー（navy グラデーション・全family/ページ共通）
   ============================================================ */

.family-head {
  background:  linear-gradient(160deg, var(--family-navy) 0%, var(--family-navy-dark) 100%);
  color:       #fff;
  text-align:  center;
  padding:     40px 16px 30px;
}

.family-head__kicker {
  font-size:      11px;
  letter-spacing: .4em;
  color:          var(--family-gold);
  font-family:    var(--family-font-sans);
  margin-bottom:  10px;
  /* 11px はヘッダー装飾のみ許容。本文には使わない */
}

.family-head__title {
  font-size:      21px;
  font-weight:    400;
  letter-spacing: .04em;
}

.family-head__name {
  color: var(--family-gold-light);
}

.family-head__sub {
  font-size:   13px;
  opacity:     .85;
  margin-top:  8px;
  font-weight: 300;
}

.family-head__deco {
  width:      38px;
  height:     1px;
  background: var(--family-gold);
  margin:     16px auto 0;
}


/* ============================================================
   4. 招待ゲート（招待トークンなしでのアクセス時）
   ============================================================ */

.family-gate {
  background:    #fff;
  border:        1px solid var(--family-line);
  border-radius: var(--family-radius);
  padding:       28px 22px;
  margin:        28px 0;
  text-align:    center;
}

.family-gate__title {
  font-size:     17px;
  color:         var(--family-navy);
  font-weight:   500;
  margin-bottom: 10px;
}

.family-gate__body {
  font-size:   13px;
  color:       var(--family-muted);
  line-height: 1.9;
}


/* ============================================================
   5. ヒーロー（Day1↔Day14 before/after 比較。フィード最上部）
   ============================================================ */

.family-hero {
  background:    #fff;
  border:        1.5px solid var(--family-gold);
  border-radius: var(--family-radius-lg);
  padding:       22px 18px 18px;
  margin-top:    24px;
  text-align:    center;
}

/* 子の写真（丸形）またはプレースホルダー ♪ */
.family-hero__photo {
  width:             124px;
  height:            124px;
  border-radius:     50%;
  margin:            0 auto 10px;
  background:        linear-gradient(160deg, var(--family-bg-soft), var(--family-line));
  border:            3px solid var(--family-gold-light);
  background-size:   cover;
  background-position: center;
  position:          relative;
  cursor:            pointer;
  display:           flex;
  align-items:       center;
  justify-content:   center;
}

.family-hero__photo-icon {
  font-size: 44px;
  color:     var(--family-gold-light);
}

/* タップ再生ボタン（写真の右下に重なる） */
.family-hero__photo-play {
  position:      absolute;
  right:         2px;
  bottom:        2px;
  width:         44px;  /* 最小44px */
  height:        44px;
  border-radius: 50%;
  background:    var(--family-navy);
  color:         #fff;
  border:        2px solid #fff;
  font-size:     14px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

/* スコア差（+N のびています） */
.family-hero__delta {
  display:     inline-block;
  margin:      4px 0 14px;
  color:       var(--family-gold-dark);
  font-size:   14px;
  font-family: var(--family-font-sans);
}

.family-hero__delta b {
  font-size: 21px;
}

/* before/after 2列 */
.family-hero__ba {
  display: flex;
  gap:     10px;
}

.family-hero__ba-col {
  flex:          1;
  background:    var(--family-bg-soft);
  border:        1px solid var(--family-line);
  border-radius: var(--family-radius);
  padding:       12px 10px;
}

.family-hero__ba-label {
  font-size:      11px;
  letter-spacing: .08em;
  color:          var(--family-muted);
  font-family:    var(--family-font-sans);
  margin-bottom:  6px;
}

.family-hero__ba-score {
  font-size:   13px;
  color:       var(--family-navy);
  font-family: var(--family-font-sans);
}

.family-hero__ba-score b {
  font-size: 18px;
  color:     var(--family-gold-dark);
}

/* before/after 再生ボタン（タップ領域最大化） */
.family-hero__ba-btn {
  margin-top:    8px;
  width:         100%;
  min-height:    52px;  /* 祖父母配慮: 52px */
  border:        none;
  border-radius: 4px;
  background:    var(--family-navy);
  color:         #fff;
  font-size:     15px;
  cursor:        pointer;
  font-family:   var(--family-font-sans);
}

.family-hero__ba-btn:focus-visible {
  outline:        2px solid var(--family-gold);
  outline-offset: 2px;
}

/* 「はじまり→いまをつづけて聴く」シーケンスボタン */
.family-hero__seq {
  margin-top:    12px;
  width:         100%;
  min-height:    52px;
  border:        1px solid var(--family-gold);
  border-radius: var(--family-radius);
  background:    #fff;
  color:         var(--family-gold-dark);
  font-size:     15px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   var(--family-font-sans);
}

.family-hero__seq.is-playing {
  background: var(--family-gold);
  color:      #fff;
}

.family-hero__seq:focus-visible {
  outline:        2px solid var(--family-gold);
  outline-offset: 2px;
}

/* 記念ムービーへのリンク */
.family-hero__movie-link {
  display:         inline-flex;
  align-items:     center;
  min-height:      44px;  /* 最小44px */
  margin-top:      12px;
  color:           var(--family-gold-dark);
  font-size:       14px;
  font-family:     var(--family-font-sans);
  text-decoration: none;
  border-bottom:   1px solid var(--family-gold-light);
  padding:         0 4px 2px;
}


/* ============================================================
   6. マイルストーンお祝いカード（Day14お披露目・卒業の感動頂点）
   ============================================================ */

.family-celebrate {
  background:    linear-gradient(135deg, #fbf6ea, #f4e9cf);
  border:        1.5px solid var(--family-gold);
  border-radius: var(--family-radius-lg);
  padding:       16px 16px 14px;
  margin-top:    16px;
  text-align:    center;
}

.family-celebrate__kicker {
  font-size:      11px;
  letter-spacing: .15em;
  color:          var(--family-gold-dark);
  font-family:    var(--family-font-sans);
}

.family-celebrate__title {
  font-size:     16px;
  color:         var(--family-navy);
  font-weight:   700;
  margin:        6px 0 2px;
}

.family-celebrate__meta {
  font-size:     12px;
  color:         var(--family-muted);
  font-family:   var(--family-font-sans);
  margin-bottom: 10px;
}

.family-celebrate__play-btn {
  min-height:    46px;
  padding:       0 20px;
  border:        none;
  border-radius: 4px;
  background:    var(--family-gold);
  color:         var(--family-navy); /* gold背景 → 白は不合格。navy を使う */
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   var(--family-font-sans);
}

.family-celebrate__play-btn:focus-visible {
  outline:        2px solid var(--family-navy);
  outline-offset: 2px;
}

.family-celebrate__movie-link {
  display:         inline-flex;
  align-items:     center;
  min-height:      44px;
  margin-top:      8px;
  color:           var(--family-gold-dark);
  font-size:       13px;
  font-family:     var(--family-font-sans);
  text-decoration: none;
  border-bottom:   1px solid var(--family-gold-light);
  padding:         0 4px 2px;
  width:           fit-content;
  margin-left:     auto;
  margin-right:    auto;
}


/* ============================================================
   7. 成長タイムライン（フィードカード）
   ============================================================ */

.family-feed {
  margin-top:     24px;
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.family-day-label {
  font-size:      12px;
  color:          var(--family-muted);
  letter-spacing: .1em;
  font-family:    var(--family-font-sans);
  margin:         8px 2px 0;
}

/* 基本カード */
.family-card {
  background:    #fff;
  border:        1px solid var(--family-line);
  border-radius: var(--family-radius);
  padding:       18px 18px 14px;
  position:      relative;
}

/* マイルストーンカード（Day1・Day7・Day14） */
.family-card--milestone {
  border:     1.5px solid var(--family-gold);
  background: linear-gradient(180deg, #fff 0%, var(--family-bg-soft) 100%);
}

/* MILESTONEバッジ（マイルストーンカードの左上） */
.family-card__milestone-badge {
  position:       absolute;
  top:            -10px;
  left:           16px;
  background:     var(--family-gold);
  color:          var(--family-navy); /* gold背景 → navy テキスト（コントラスト確保） */
  font-size:      10px;
  letter-spacing: .15em;
  padding:        3px 12px;
  border-radius:  2px;
  font-family:    var(--family-font-sans);
}

/* 章テーマ色ボーダー（カード左4px。種明かしはDay14のみ。名前はUIに出さない） */
.family-card--day1      { border-left: 4px solid var(--family-day1-accent); }
.family-card--linking   { border-left: 4px solid var(--family-linking-accent); }
.family-card--flapt     { border-left: 4px solid var(--family-flapt-accent); }
.family-card--reduction { border-left: 4px solid var(--family-reduction-accent); }
.family-card--day14     { border-left: 4px solid var(--family-day14-accent); }

.family-card__title {
  font-size:     15px;
  color:         var(--family-navy);
  font-weight:   600;
  margin-bottom: 4px;
}

.family-card__meta {
  font-size:     12px;
  color:         var(--family-muted);
  margin-bottom: 12px;
}


/* ============================================================
   8. プレーヤー（録音再生。全カード共通）
   ============================================================ */

.family-player {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    var(--family-bg-soft);
  border-radius: 4px;
  padding:       10px 12px;
  margin-bottom: 12px;
}

/* 再生/一時停止ボタン（48px × 48px。祖父母配慮） */
.family-player__btn {
  flex-shrink:   0;
  width:         48px;
  height:        48px;
  border-radius: 50%;
  border:        none;
  background:    var(--family-navy);
  color:         #fff;
  font-size:     16px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.family-player__btn:focus-visible {
  outline:        2px solid var(--family-gold);
  outline-offset: 2px;
}

/* プログレスバー */
.family-player__bar {
  flex:          1;
  height:        4px;
  background:    var(--family-line);
  border-radius: 2px;
  position:      relative;
  overflow:      hidden;
}

.family-player__fill {
  position:      absolute;
  left:          0;
  top:           0;
  height:        100%;
  width:         0;
  background:    var(--family-gold);
  border-radius: 2px;
}

.family-player__label {
  font-size:    11px;
  color:        var(--family-muted);
  font-family:  var(--family-font-sans);
  white-space:  nowrap;
}

/* スコアバッジ */
.family-score {
  display:        inline-block;
  font-size:      12px;
  color:          var(--family-navy);
  background:     var(--family-bg-soft);
  border:         1px solid var(--family-gold-light);
  border-radius:  2px;
  padding:        2px 10px;
  font-family:    var(--family-font-sans);
  margin-bottom:  12px;
}

.family-score b {
  font-size: 14px;
  color:     var(--family-gold-dark);
}


/* ============================================================
   9. 応援スタンプ（タップ領域 44px 以上。祖父母が確実に押せる）
   ============================================================ */

.family-cheers {
  display:    flex;
  gap:        8px;
  flex-wrap:  wrap;
  border-top: 1px solid var(--family-line);
  padding-top: 12px;
}

.family-cheer {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  border:      1px solid var(--family-line);
  background:  #fff;
  border-radius: 22px;
  padding:     9px 15px;
  min-height:  44px;  /* 祖父母配慮: 44px */
  font-size:   15px;
  cursor:      pointer;
  font-family: var(--family-font-sans);
  color:       var(--family-text);
  transition:  border-color .15s, background .15s;
}

.family-cheer:hover {
  border-color: var(--family-gold);
}

.family-cheer:focus-visible {
  outline:        2px solid var(--family-gold);
  outline-offset: 2px;
}

/* アクティブ（押下済み）状態 */
.family-cheer.is-active {
  background:   var(--family-bg-soft);
  border-color: var(--family-gold);
}

.family-cheer__count {
  color:     var(--family-muted);
  font-size: 13px;
}


/* ============================================================
   10. 一言応援コメント（16px 以上でiOSオートズームを防ぐ）
   ============================================================ */

.family-comments {
  margin-top:  12px;
  border-top:  1px solid var(--family-line);
  padding-top: 12px;
}

.family-comment-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  10px;
}

.family-comment {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  font-size:   15px;  /* 本文サイズ：読みやすさ優先 */
  line-height: 1.7;
}

.family-comment.is-hidden {
  opacity: .45;
}

.family-comment__name {
  flex-shrink: 0;
  color:       var(--family-navy);
  font-weight: 600;
  font-size:   13px;
  font-family: var(--family-font-sans);
}

.family-comment__body {
  flex: 1;
  color: var(--family-text);
}

/* 保護者用「非表示/再表示」ボタン */
.family-comment__hide-btn {
  flex-shrink:   0;
  border:        1px solid var(--family-line);
  background:    #fff;
  color:         var(--family-muted);
  border-radius: 4px;
  font-size:     12px;
  padding:       4px 8px;
  min-height:    32px;
  cursor:        pointer;
  font-family:   var(--family-font-sans);
}

/* コメント入力フォーム */
.family-comment-form {
  display:     flex;
  gap:         8px;
  align-items: flex-end;
}

.family-comment-form__textarea {
  flex:          1;
  border:        1px solid var(--family-line);
  border-radius: var(--family-radius);
  padding:       11px 12px;
  font-size:     16px;  /* iOSのオートズームを防ぐ：16px以上 */
  font-family:   inherit;
  resize:        none;
  color:         var(--family-text);
  background:    #fff;
  line-height:   1.6;
}

.family-comment-form__textarea:focus {
  outline:      none;
  border-color: var(--family-gold);
}

.family-comment-form__send-btn {
  flex-shrink:   0;
  min-height:    48px;  /* 祖父母配慮: 48px */
  padding:       0 18px;
  border:        none;
  border-radius: var(--family-radius);
  background:    var(--family-navy);
  color:         #fff;
  font-size:     15px;
  cursor:        pointer;
  font-family:   var(--family-font-sans);
}

.family-comment-form__send-btn:disabled {
  opacity: .5;
}

.family-comment-form__send-btn:focus-visible {
  outline:        2px solid var(--family-gold);
  outline-offset: 2px;
}


/* ============================================================
   11. アーカイブ通知（30日以前。煽らない・脅さない・前向き）
   ============================================================ */

.family-archive {
  background:    var(--family-bg-soft);
  border:        1px dashed var(--family-line);
  border-radius: var(--family-radius);
  padding:       18px;
  margin-top:    22px;
  text-align:    center;
  font-size:     13px;
  color:         var(--family-muted);
  line-height:   1.9;
}

.family-archive b {
  color: var(--family-navy);
}
/* 「あと〇日で消えます」型の文言はこのブロックに絶対に書かない */


/* ============================================================
   12. アップグレード提案（煽らない・柔らかい選択肢として提示）
   ============================================================ */

.family-upsell {
  margin-top:    22px;
  background:    #fff;
  border:        1px solid var(--family-line);
  border-radius: var(--family-radius);
  padding:       20px;
}

.family-upsell__title {
  font-size:     14px;
  color:         var(--family-navy);
  font-weight:   600;
  text-align:    center;
  margin-bottom: 6px;
}

.family-upsell__lead {
  font-size:     12px;
  color:         var(--family-muted);
  text-align:    center;
  margin-bottom: 14px;
}

.family-upsell__opts {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* 個々のアップグレードオプション（リンクボタン） */
.family-upsell-opt {
  display:       block;
  border:        1px solid var(--family-line);
  border-radius: 4px;
  padding:       12px 14px;
  text-decoration: none;
  color:         var(--family-text);
  min-height:    44px; /* タップ領域確保 */
  transition:    border-color .15s;
}

.family-upsell-opt:hover {
  border-color: var(--family-gold);
}

.family-upsell-opt:focus-visible {
  outline:        2px solid var(--family-gold);
  outline-offset: 2px;
}

.family-upsell-opt__title {
  font-size:   13px;
  color:       var(--family-navy);
  font-weight: 600;
}

.family-upsell-opt__sub {
  font-size: 12px;
  color:     var(--family-muted);
}


/* ============================================================
   13. フォーム（setup.html 用：グループ作成・招待）
   ============================================================ */

.family-form-card {
  background:    #fff;
  border:        1px solid var(--family-line);
  border-radius: var(--family-radius);
  padding:       22px 20px;
  margin-top:    22px;
}

.family-form-card__title {
  font-size:     16px;
  color:         var(--family-navy);
  font-weight:   600;
  margin-bottom: 4px;
}

.family-form-card__lead {
  font-size:   13px;
  color:       var(--family-muted);
  margin-bottom: 16px;
  line-height: 1.9;
}

.family-form-label {
  display:     block;
  font-size:   13px;
  color:       var(--family-navy);
  margin:      14px 0 6px;
  font-weight: 500;
}

.family-form-input,
.family-form-select {
  width:       100%;
  padding:     12px 14px;
  border:      1px solid var(--family-line);
  border-radius: 4px;
  font-size:   15px;
  font-family: inherit;
  background:  var(--family-bg-soft);
  color:       var(--family-text);
}

.family-form-input:focus,
.family-form-select:focus {
  outline:      none;
  border-color: var(--family-gold);
}

/* 同意チェックボックス（3段階同意・法務ゲート） */
.family-consent {
  display:     flex;
  gap:         10px;
  align-items: flex-start;
  background:  var(--family-bg-soft);
  border:      1px solid var(--family-line);
  border-radius: 4px;
  padding:     12px 14px;
  margin-top:  16px;
  font-size:   12px;
  color:       var(--family-muted);
  line-height: 1.85;
}

.family-consent__check {
  margin-top:  4px;
  flex-shrink: 0;
  min-width:   20px;
  min-height:  20px; /* タップ領域を確保 */
  cursor:      pointer;
}

/* ボタン（navy 系） */
.family-btn {
  display:        block;
  width:          100%;
  margin-top:     18px;
  padding:        14px;
  border:         none;
  border-radius:  3px;
  background:     var(--family-navy);
  color:          #fff;
  font-size:      14px;
  letter-spacing: .08em;
  font-family:    var(--family-font-sans);
  font-weight:    500;
  cursor:         pointer;
  min-height:     48px; /* 祖父母配慮: 48px */
  text-align:     center;
  text-decoration: none;
}

.family-btn:hover {
  background: var(--family-navy-dark);
}

.family-btn:disabled {
  opacity: .5;
  cursor:  not-allowed;
}

.family-btn:focus-visible {
  outline:        2px solid var(--family-gold);
  outline-offset: 2px;
}

/* ゴーストボタン（白抜き） */
.family-btn--ghost {
  background: #fff;
  color:      var(--family-navy);
  border:     1px solid var(--family-navy);
}

.family-btn--ghost:hover {
  background: var(--family-bg-soft);
}

/* 招待リンクボックス */
.family-link-box {
  background:     var(--family-bg-soft);
  border:         1px dashed var(--family-line);
  border-radius:  4px;
  padding:        10px 12px;
  margin-top:     8px;
  font-size:      12px;
  color:          var(--family-navy);
  word-break:     break-all;
  font-family:    var(--family-font-sans);
}

.family-copy-btn {
  font-size:   12px;
  color:       var(--family-gold-dark);
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--family-font-sans);
  margin-top:  4px;
  min-height:  32px;
  padding:     4px 0;
}

/* メンバー行 */
.family-member {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border:          1px solid var(--family-line);
  border-radius:   4px;
  padding:         10px 12px;
  margin-top:      10px;
  font-size:       13px;
  min-height:      44px; /* タップ領域確保 */
}

.family-member__role {
  font-size:   11px;
  color:       var(--family-muted);
  font-family: var(--family-font-sans);
}

/* 注記テキスト */
.family-note {
  font-size:   12px;
  color:       var(--family-muted);
  text-align:  center;
  margin-top:  14px;
  line-height: 1.9;
}


/* ============================================================
   14. 紹介リワード（縁つなぎ）セクション
   ============================================================ */

.family-referral {
  margin-top:  20px;
  padding-top: 18px;
  border-top:  1px solid var(--family-line);
}

.family-referral__days {
  font-size:   14px;
  color:       var(--family-navy);
  text-align:  center;
  margin-bottom: 8px;
}

.family-referral__bonus {
  color:     var(--family-gold-dark);
  font-size: 12px;
}

.family-referral__lead {
  font-size:   12px;
  color:       var(--family-muted);
  text-align:  center;
  line-height: 1.9;
  margin-bottom: 12px;
}

.family-referral__count {
  font-size:  12px;
  color:      var(--family-gold-dark);
  text-align: center;
  margin-top: 8px;
}


/* ============================================================
   15. フッター（全family/ページ共通）
   ============================================================ */

.family-foot {
  margin-top:  26px;
  font-size:   11px;
  color:       var(--family-muted);
  text-align:  center;
  line-height: 1.9;
  font-family: var(--family-font-sans);
}


/* ============================================================
   16. ユーティリティ
   ============================================================ */

/* 視覚的に隠すがアクセシビリティツリーには残す */
.family-sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0,0,0,0);
  white-space: nowrap;
  border:   0;
}

.family-hide {
  display: none !important;
}


/* ============================================================
   17. アクセシビリティ: フォーカスリング（全体）
   ============================================================ */

/* デフォルトのアウトラインを消してカスタムに置き換える */
.family-page *:focus {
  outline: none;
}

.family-page *:focus-visible {
  outline:        2px solid var(--family-gold);
  outline-offset: 2px;
  border-radius:  2px;
}


/* ============================================================
   18. モーション軽減（movie.html / アニメーション一般）
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .family-page *,
  .family-page *::before,
  .family-page *::after {
    animation-duration:   0.001ms !important;
    transition-duration:  0.001ms !important;
  }
}


/* ============================================================
   19. レスポンシブ（560px 以上は最大幅を保つ。SP First）
   ============================================================ */

@media (min-width: 600px) {
  .family-hero__ba {
    gap: 14px;
  }

  .family-cheers {
    gap: 10px;
  }
}