/* ==========================================================================
   家族でスタートАИ フォーム系共通スタイル
   - /signin, /inquiry, /user/edit, /settlement/family/* で共通使用
   - .family-form-page クラススコープで詳細度確保
   - LP には影響しない（LP側に .family-form-page が付かない限り当たらない）
   - 配色変更は本ファイル冒頭の "ページローカル変数" を編集するだけで完結
   ========================================================================== */

/* ==========================================================================
   ページローカル変数
   ========================================================================== */
.family-form-page {
  /* タイトル */
  --ff-title-color:        var(--family-primary-dark);
  --ff-title-bar:          var(--family-yellow);
  --ff-title-bar-accent:   var(--family-coral);

  /* ラベル */
  --ff-label-color:        var(--family-text);

  /* インプット */
  --ff-input-bg:           var(--family-white);
  --ff-input-border:       var(--family-border);
  --ff-input-border-focus: var(--family-primary);
  --ff-input-color:        var(--family-text);
  --ff-input-placeholder:  var(--family-text-light);

  /* プライマリボタン */
  --ff-btn-primary-bg:    var(--family-primary);
  --ff-btn-primary-hover: var(--family-primary-dark);
  --ff-btn-primary-color: var(--family-white);

  /* インフォボタン（パスワード再発行など）
     コントラスト確保のためテキストはダーク系 */
  --ff-btn-info-bg:    var(--family-primary-light);
  --ff-btn-info-color: var(--family-text);

  /* サクセスボタン（よくある質問など） */
  --ff-btn-success-bg-from: var(--family-yellow);
  --ff-btn-success-bg-to:   var(--family-coral);
  --ff-btn-success-color:   var(--family-white);

  /* alert */
  --ff-alert-danger-bg:    var(--family-pink-light);
  --ff-alert-danger-color: var(--family-coral-dark);
  --ff-alert-info-bg:      var(--family-primary-light);
  --ff-alert-info-color:   var(--family-primary-dark);

  /* セクションパネル（パスワード忘れ・お困りの方） */
  --ff-panel-bg-1: var(--family-cream);
  --ff-panel-bg-2: var(--family-cream-deep);

  /* FAQ */
  --ff-faq-bg:       var(--family-white);
  --ff-faq-border:   var(--family-border-light);
  --ff-faq-q-color:  var(--family-text);
  --ff-faq-a-color:  var(--family-coral-dark);
}

/* ==========================================================================
   ベース
   ========================================================================== */
.family-form-page {
  font-family: var(--family-font-body);
  color: var(--family-text);
}

/* ==========================================================================
   見出し
   ========================================================================== */
.family-form-page h1,
.family-form-page h2,
.family-form-page h3 {
  font-family: var(--family-font-display);
  color: var(--ff-title-color);
  font-weight: var(--family-fw-black);
  text-align: center;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.family-form-page h1::after,
.family-form-page h2::after,
.family-form-page h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--ff-title-bar);
  border-radius: var(--family-r-pill);
}

/* ==========================================================================
   フォーム要素
   ========================================================================== */
.family-form-page .form-group {
  margin-bottom: 22px;
}
.family-form-page label {
  font-family: var(--family-font-display);
  font-weight: var(--family-fw-medium);
  color: var(--ff-label-color);
  font-size: 16px;
  cursor: pointer;
  line-height: 1.6;
}

/* フィールド見出し用ラベル（form-group の代表ラベル） */
.family-form-page label.control-label,
.family-form-page .form-group > label:not([class]) {
  display: block;
  font-weight: var(--family-fw-bold);
  margin-bottom: 8px;
}

/* 必須バッジ（ラベル内 <small class="label label-danger">必須</small>）統一 */
.family-form-page .control-label .label-danger,
.family-form-page label .label-danger {
  display: inline-block;
  background: var(--family-coral);
  color: var(--family-white);
  border-radius: var(--family-r-pill);
  font-size: 11px;
  font-weight: var(--family-fw-bold);
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.3;
}

/* Bootstrap 3 の .radio / .checkbox 伝統レイアウトを打ち消し
   （input を absolute で -20px に飛ばし、label に padding-left 20px を当てる仕様）
   家族モードでは inline-flex でフラットに並べたいので明示リセット */
.family-form-page .radio label,
.family-form-page .checkbox label,
.family-form-page .radio-inline,
.family-form-page .checkbox-inline {
  padding-left: 0 !important;
  min-height: auto !important;
}
.family-form-page .radio input[type="radio"],
.family-form-page .checkbox input[type="checkbox"],
.family-form-page .radio-inline input[type="radio"],
.family-form-page .checkbox-inline input[type="checkbox"] {
  position: static !important;
  margin-left: 0 !important;
}

/* ラジオ・チェックボックス内のラベル（input を内包する label）
   ＝ <label><input>テキスト</label> の構造で改行を最小化
   gap を 10px 確保し input とテキストがくっつかないように
   :has() 対応ブラウザ（モダン）向け */
.family-form-page .radio label,
.family-form-page .checkbox label,
.family-form-page label:has(input[type="radio"]),
.family-form-page label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--family-fw-medium);
  margin: 0 12px 6px 0;
  line-height: 1.6;
}
.family-form-page .form-control,
.family-form-page input[type="text"],
.family-form-page input[type="email"],
.family-form-page input[type="password"],
.family-form-page input[type="tel"],
.family-form-page input[type="number"],
.family-form-page select,
.family-form-page textarea {
  background: var(--ff-input-bg);
  border: 2px solid var(--ff-input-border);
  border-radius: var(--family-r-md);
  font-family: var(--family-font-body);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ff-input-color);
  padding: 14px 18px;
  height: auto;
  min-height: 52px;
  box-shadow: none;
  transition: border-color var(--family-tr-fast), box-shadow var(--family-tr-fast);
  width: 100%;
}
.family-form-page select,
.family-form-page .form-control[size],
.family-form-page select.form-control {
  /* select は appearance ベース */
  min-height: 52px;
}

/* 生年月日（年・月・日）を横並びに */
.family-form-page select[name="birth_year"],
.family-form-page select[name="birth_month"],
.family-form-page select[name="birth_day"] {
  width: auto !important;
  min-width: 100px;
  display: inline-block !important;
  margin-right: 8px;
  vertical-align: middle;
}
.family-form-page select[name="birth_month"],
.family-form-page select[name="birth_day"] {
  min-width: 90px;
}
@media (max-width: 480px) {
  .family-form-page select[name="birth_year"] { min-width: 110px; }
  .family-form-page select[name="birth_month"],
  .family-form-page select[name="birth_day"] { min-width: 80px; }
}
.family-form-page textarea,
.family-form-page textarea.form-control {
  min-height: 120px;
  line-height: 1.7;
}
.family-form-page .form-control:focus,
.family-form-page input:focus,
.family-form-page select:focus,
.family-form-page textarea:focus {
  border-color: var(--ff-input-border-focus);
  box-shadow: 0 0 0 3px var(--family-primary-glow);
  outline: none;
}
.family-form-page .form-control::placeholder,
.family-form-page input::placeholder,
.family-form-page textarea::placeholder {
  color: var(--ff-input-placeholder);
}
.family-form-page .input-lg {
  padding: 16px 20px;
  font-size: 19px;
  min-height: 56px;
}

/* チェックボックス・ラジオ
   Bootstrap の `input[type="radio"] { margin: 4px 0 0 }` shorthand を
   確実に上書きするため !important を使用。
   :has() 未対応ブラウザでも input 側の margin で隙間を確保。 */
.family-form-page input[type="checkbox"],
.family-form-page input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--family-primary);
  vertical-align: middle;
  margin: 0 4px 0 0 !important;
  flex-shrink: 0;
}
.family-form-page .checkbox label,
.family-form-page .radio label {
  font-family: var(--family-font-body);
  font-weight: var(--family-fw-medium);
  font-size: 16px;
  color: var(--family-text);
  cursor: pointer;
}

/* エラーメッセージ */
.family-form-page .err,
.family-form-page .text-danger,
.family-form-page span[style*="color: red"] {
  color: var(--family-coral-dark) !important;
  font-weight: var(--family-fw-bold);
  font-size: 14px;
  margin-top: 6px;
  display: inline-block;
}

/* ==========================================================================
   ボタン
   ========================================================================== */
.family-form-page .btn {
  border-radius: var(--family-r-pill);
  font-family: var(--family-font-display);
  font-weight: var(--family-fw-bold);
  border: none;
  padding: 12px 28px;
  transition: transform var(--family-tr-base), box-shadow var(--family-tr-base);
  letter-spacing: 0.02em;
}
.family-form-page .btn:hover {
  transform: translateY(-2px);
}
.family-form-page .btn-lg {
  padding: 14px 32px;
  font-size: 17px;
}
.family-form-page .btn-primary,
.family-form-page .btn_customize {
  background: var(--ff-btn-primary-bg);
  color: var(--ff-btn-primary-color);
  box-shadow: var(--family-shadow-glow);
}
.family-form-page .btn-primary:hover,
.family-form-page .btn-primary:focus,
.family-form-page .btn_customize:hover {
  background: var(--ff-btn-primary-hover);
  color: var(--ff-btn-primary-color);
  box-shadow: 0 10px 28px var(--family-primary-glow);
}
.family-form-page .btn-info {
  background: var(--ff-btn-info-bg);
  color: var(--ff-btn-info-color);
}
.family-form-page .btn-info:hover,
.family-form-page .btn-info:focus {
  background: var(--family-primary);
  color: var(--family-white);
}
.family-form-page .btn-success {
  background: linear-gradient(135deg, var(--ff-btn-success-bg-from), var(--ff-btn-success-bg-to));
  color: var(--ff-btn-success-color);
  box-shadow: var(--family-shadow-pop);
}
.family-form-page .btn-success:hover,
.family-form-page .btn-success:focus {
  color: var(--ff-btn-success-color);
}
.family-form-page .btn-danger {
  background: linear-gradient(135deg, var(--family-coral), var(--family-coral-dark));
  color: var(--family-white);
  box-shadow: var(--family-shadow-pop);
}
.family-form-page .btn-default {
  background: var(--family-white);
  color: var(--family-text);
  border: 2px solid var(--family-border);
}
.family-form-page .btn-default:hover,
.family-form-page .btn-default:focus {
  background: var(--family-cream);
  border-color: var(--family-primary-light);
  color: var(--family-primary-dark);
}

/* ==========================================================================
   alert
   ========================================================================== */
.family-form-page .alert {
  border-radius: var(--family-r-md);
  border: 1.5px solid transparent;
  padding: 14px 18px;
  font-family: var(--family-font-body);
  font-weight: var(--family-fw-medium);
}
.family-form-page .alert-danger {
  background: var(--ff-alert-danger-bg) !important;
  color: var(--ff-alert-danger-color) !important;
  border-color: var(--family-pink) !important;
}
.family-form-page .alert-info {
  background: var(--ff-alert-info-bg) !important;
  color: var(--ff-alert-info-color) !important;
  border-color: var(--family-primary) !important;
}
.family-form-page .alert-success {
  background: var(--family-primary-light) !important;
  color: var(--family-primary-dark) !important;
  border-color: var(--family-primary) !important;
}
.family-form-page .alert-warning {
  background: var(--family-yellow-light) !important;
  color: var(--family-text) !important;
  border-color: var(--family-yellow) !important;
}

/* ==========================================================================
   セクションパネル（パスワード忘れ・お困りの方）
   ========================================================================== */
.family-form-page .form-section-panel {
  background: linear-gradient(135deg, var(--ff-panel-bg-1) 0%, var(--ff-panel-bg-2) 100%);
  border-radius: var(--family-r-lg);
  padding: 28px 22px;
  margin-bottom: 24px;
  box-shadow: var(--family-shadow-sm);
}

/* ==========================================================================
   FAQ（panel-group）
   ========================================================================== */
.family-form-page .panel-group .faq-item,
.family-form-page .panel-group > div {
  background: var(--ff-faq-bg);
  border: 1.5px solid var(--ff-faq-border);
  border-radius: var(--family-r-md);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--family-tr-fast), box-shadow var(--family-tr-base);
}
.family-form-page .panel-group > div:hover {
  border-color: var(--family-primary-light);
  box-shadow: var(--family-shadow-sm);
}
.family-form-page .panel-group .glyphicon-chevron-down {
  color: var(--family-primary);
  transition: transform var(--family-tr-base);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 767px) {
  .family-form-page h1,
  .family-form-page h2,
  .family-form-page h3 {
    font-size: 22px;
    padding-bottom: 14px;
    margin-bottom: 22px;
  }
  .family-form-page .form-control,
  .family-form-page input,
  .family-form-page select,
  .family-form-page textarea {
    font-size: 16px;
    padding: 12px 14px;
    min-height: 48px;
  }
  .family-form-page .input-lg { padding: 14px 16px; font-size: 17px; min-height: 52px; }
  .family-form-page textarea,
  .family-form-page textarea.form-control { min-height: 100px; }
  .family-form-page .btn { padding: 11px 22px; }
  .family-form-page .btn-lg { padding: 12px 26px; font-size: 16px; }
  .family-form-page .form-section-panel { padding: 22px 18px; }
}