/*
 * DRA Form Style — Fluent Forms を DRAMAP のデザイントークンに揃える
 *
 * 読み込みは mu-plugins/dra-form-style.php。
 * 以前は wp_head に <style> で直接出力していたが、HTML に 24KB の
 * インライン CSS が載るため外部ファイルへ切り出した。
 *
 * DRAMAP 由来のトークン:
 *   配色 無彩色ベース (#1f2937 / #4b5563 / #6b7280 / #d1d5db / #e5e7eb / #f9fafb / #f3f4f6 / #111827)
 *   角丸 6px (input/button) / 8px (card / callout)
 *   本文 15px / line-height 1.7
 */

/* 加藤さん指示 2026-08-07: 固定ページの h1 (WP post-title) は EB Garamond */
h1.wp-block-post-title {
  font-family: 'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-weight: 600;
  letter-spacing: 0;
}

/* ─── DRAMAP-aligned form baseline ─── */
/* Fluent Forms CSS 変数 (--fluentform-primary=#1a7efb 青) を DRAMAP 無彩色に上書き
   progress-bar / チェックボックスの accent / 各種アクセント色が一括で変わる */
.fluentform,
.frm-fluent-form,
.fluentform_wrapper_10, .fluentform_wrapper_11 {
  --fluentform-primary: #1f2937 !important;
  --fluentform-secondary: #4b5563 !important;
  --fluentform-danger: #b91c1c !important;
}

.fluent_form_10, .fluent_form_11, .fluent_form_12,
.frm-fluent-form.fluent_form_10, .frm-fluent-form.fluent_form_11, .frm-fluent-form.fluent_form_12 {
  max-width: 720px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #1f2937;
}

/* セクション見出し (HTML カスタム要素 or ff の container) */
.ff-el-section-break {
  margin: 24px 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid #e5e7eb;
}
.ff-el-section-break h3,
.ff-el-section-break .ff-el-section-title,
.ff-el-section-break .ff-section_break_desk {
  margin: 0;
  color: #111827;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
  border: none;
  padding: 0;
}
.ff-el-section-break .ff-section_break_sub {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 13px;
  font-weight: 400;
}

/* フィールドグループ
   加藤さん指示 2026-08-07: FF 標準 .fluentform .ff-el-group { margin-bottom: 20px } は残す */
.ff-el-group {
  margin-bottom: 20px;
}
/* 加藤さん指示 2026-08-07: フォーム内の各コンテナで最後の p 段落は下マージン 0
   (連続する p の最後だけ余白ゼロにして次要素と詰める) */
.fluentform p:last-of-type,
.frm-fluent-form p:last-of-type {
  margin-bottom: 0 !important;
}

/* ラベル */
.ff-el-input--label label,
.ff-el-input--label {
  display: block;
  margin-bottom: 6px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.ff-el-input--label .ff-el-is-required::after,
.ff-el-is-required.asterisk-right label::after {
  color: #b91c1c;
  margin-left: 4px;
}

/* input / textarea / select 共通
   加藤さん指示 2026-08-07: iOS Safari で 16px 未満だと自動ズームされるため入力欄は 16px */
.ff-el-form-control,
.ff-default input[type="text"],
.ff-default input[type="email"],
.ff-default input[type="tel"],
.ff-default input[type="number"],
.ff-default input[type="date"],
.ff-default input[type="url"],
.ff-default textarea,
.ff-default select {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  color: #1f2937;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
/* select だけは矢印を残す */
.ff-default select {
  -webkit-appearance: menulist;
  appearance: menulist;
}
/* 加藤さん指示 2026-08-07: iOS で input[type=date] の内部要素がはみ出す対策
   - min-height 確保して内部ボタンが潰れるのを防ぐ
   - -webkit-appearance: none で iOS 独自 UI を無効化しつつ display:block で幅制御 */
input[type="date"].ff-el-form-control,
.dra-birthdate-group input[type="date"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 42px;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* iOS の date picker アイコン (時計) の右寄せ + はみ出し防止 */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.4em;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
}
.ff-el-form-control::placeholder,
.ff-default input::placeholder,
.ff-default textarea::placeholder {
  color: #9ca3af;
}
.ff-el-form-control:hover,
.ff-default input:hover,
.ff-default textarea:hover,
.ff-default select:hover {
  border-color: #9ca3af;
}
.ff-el-form-control:focus,
.ff-default input:focus,
.ff-default textarea:focus,
.ff-default select:focus {
  outline: none;
  border-color: #6b7280;
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
}
.ff-default textarea { min-height: 96px; }
.ff-default select { appearance: menulist; }

/* 補助テキスト (help) */
.ff-el-help-message {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.6;
}

/* チェックボックス / ラジオ */
.ff-el-form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0;
}
.ff-el-form-check-input,
.ff-default input[type="checkbox"],
.ff-default input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  accent-color: #1f2937;
  cursor: pointer;
}
.ff-el-form-check-label {
  color: #1f2937;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
  font-weight: 400;
}

/* エラー表示 */
.error.text-danger,
.ff-el-is-error .ff-el-form-control,
.ff-el-is-error input,
.ff-el-is-error textarea,
.ff-el-is-error select {
  border-color: #b91c1c;
}
.error.text-danger { color: #b91c1c; font-size: 12px; margin-top: 4px; }

/* ─── Repeater ─── */
.ff-el-repeater-field .ff-el-repeat-buttton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  background: #f9fafb;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ff-el-repeater-field .ff-el-repeat-buttton:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.ff-el-repeater-field table.ff_repeater_table {
  border-collapse: separate;
  border-spacing: 0 12px;
  width: 100%;
}
.ff-el-repeater-field table.ff_repeater_table th {
  color: #6b7280;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 0 8px 4px;
  border: none;
}
.ff-el-repeater-field table.ff_repeater_table td {
  padding: 4px;
  vertical-align: top;
  border: none;
}
.ff-el-repeater-field table.ff_repeater_table tr {
  background: #f9fafb;
  border-radius: 8px;
}
.ff-el-repeater-field table.ff_repeater_table tr td:first-child { border-radius: 8px 0 0 8px; }
.ff-el-repeater-field table.ff_repeater_table tr td:last-child { border-radius: 0 8px 8px 0; }

/* ─── ボタン ─── */
/* FF は .ff-btn-submit にデフォで visibility:hidden や独自 background を当てるので !important 補強 */
.ff-btn,
.ff-btn-submit,
.ff-btn-primary,
.ff-btn.ff-btn-submit,
.ff-btn.ff-btn-submit.ff_btn_style {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  background: #1f2937 !important;
  color: #fff !important;
  border: 1px solid #1f2937 !important;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ff-btn:hover,
.ff-btn-submit:hover,
.ff-btn-primary:hover,
.ff-btn.ff-btn-submit:hover {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
}
.ff-btn-secondary {
  background: #fff;
  color: #1f2937;
  border-color: #d1d5db;
}
.ff-btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #1f2937;
}

/* progress bar (multi-step の場合) */
.ff-el-progress {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 16px;
}
.ff-el-progress-bar {
  background: #1f2937;
  transition: width 0.3s;
}

/* 成功メッセージ */
.ff-message-success,
.ff_form_success {
  padding: 16px 18px;
  background: #f9fafb;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
}

/* GDPR 同意など長文チェックの読みやすさ */
.ff-el-form-check + .ff-el-help-message {
  margin-left: 24px;
}

/* ─── ff-custom_html 内の callout (紫系インラインスタイル) を無彩色 + 角丸に上書き ─── */
/*   Fluent Forms の Custom HTML フィールドに直書きされた purple 系スタイルを、
       DRAMAP と同じ無彩色 + 角丸 + border-left なしのカード風に統一する。 */
.ff-custom_html div[style*="#f5f3ff"],
.ff-custom_html p[style*="#f5f3ff"] {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-left: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  color: #1f2937 !important;
  padding: 12px 14px !important;
  margin: 12px 0 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.ff-custom_html [style*="#4c1d95"] { color: #1f2937 !important; }
.ff-custom_html a { color: #111827; text-decoration: underline; text-underline-offset: 2px; }
.ff-custom_html a:hover { color: #000; }
/* 加藤さん指示 2026-08-06: FF が custom_html に tabindex="-1" を付けており、
   クリックでフォーカスされて黒枠 (outline) が出るのを抑止 */
.ff-custom_html,
.ff-custom_html:focus,
.ff-custom_html:focus-visible,
.ff-custom_html:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* ─── /subscribe/next/ 中間ページ (2 回連続決済の間のブリッジ) ─── */
/*   フォーム (form 12) と同じ 720px・フォント・角丸・ボタン意匠で統一 */
.dra-subscribe-next-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 4px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #1f2937;
}
.dra-subscribe-next-wrap #dra-subscribe-next-status {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px 22px;
  margin: 8px 0 0;
}
.dra-subscribe-next-wrap #dra-subscribe-next-status p {
  margin: 8px 0;
}
.dra-subscribe-next-wrap #dra-subscribe-next-status p:first-child { margin-top: 0; }
.dra-subscribe-next-wrap #dra-subscribe-next-status p:last-child { margin-bottom: 0; }
.dra-subscribe-next-wrap #dra-subscribe-next-status strong {
  color: #111827;
  font-weight: 700;
}
.dra-subscribe-next-wrap #dra-subscribe-next-status a.dra-next-btn,
.dra-subscribe-next-wrap #dra-subscribe-next-status a.dra-next-btn:visited {
  display: inline-block;
  padding: 10px 22px;
  background: #1f2937;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin-top: 8px;
  transition: background 0.15s ease;
}
.dra-subscribe-next-wrap #dra-subscribe-next-status a.dra-next-btn:hover {
  background: #111827;
}
.dra-subscribe-next-wrap #dra-subscribe-next-status a.dra-back-link,
.dra-subscribe-next-wrap #dra-subscribe-next-status a.dra-back-link:visited {
  color: #4b5563;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── dra-plan-table (form 12 の月額プラン機能差表) ─── */
.dra-plan-table {
  margin: 12px 0 4px;
  overflow-x: auto;
}
.dra-plan-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.6;
  color: #1f2937;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.dra-plan-table thead th {
  background: #f3f4f6;
  color: #4b5563;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.dra-plan-table tbody th {
  background: #f9fafb;
  color: #111827;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  width: 30%;
}
.dra-plan-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.dra-plan-table tbody tr:last-child th,
.dra-plan-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 480px) {
  .dra-plan-table table { font-size: 12px; }
  .dra-plan-table thead th,
  .dra-plan-table tbody th,
  .dra-plan-table tbody td { padding: 8px 10px; }
}

/* ─── dra-form-callout (form 12 の 2 回連続決済 注記など) ─── */
.dra-form-callout {
  background: #fef7ed !important;
  border: 1px solid #f59e0b !important;
  border-radius: 8px !important;
  color: #1f2937 !important;
  padding: 14px 16px !important;
  margin: 14px 0 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}
.dra-form-callout strong { color: #b45309; font-weight: 700; }
.dra-form-callout p { margin: 6px 0 !important; }
.dra-form-callout p:first-of-type { margin-top: 8px !important; }
.dra-form-callout p:last-of-type { margin-bottom: 0 !important; }

/* ─── 必須ラベル (「*」記号を「必須」バッジに置換) ─── */
/*   加藤さん指示 2026-07-31: * ではなく「必須」文字を pill 風に。
       ストーリーの深層タグ (.tn-slot-label) と同じ pill 形状で、視認性のため赤背景 */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before,
.fluentform .ff-el-input--label.ff-el-is-required label::after {
  content: "必須" !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 0 0 6px !important;
  padding: 2px 8px !important;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.05em !important;
  border-radius: 999px !important;
  border: none !important;
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
  margin: 0 6px 0 0 !important;
}
/* 加藤さん指示 2026-08-06: 追加マップ (form_id=11) は再利用者向けなので「必須」バッジ非表示 */
/*   .fluentform は wrapper div のクラス、.fluent_form_11 は form 要素のクラスで別要素にあるため、
     form 側の .fluent_form_11 を prefix にする。specificity を既存 !important ルールと同等以上にするため asterisk-* も含める。 */
.fluent_form_11 .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.fluent_form_11 .ff-el-input--label.ff-el-is-required.asterisk-left label::before,
.fluent_form_11 .ff-el-input--label.ff-el-is-required label::after,
.fluent_form_11 .ff-el-input--label.ff-el-is-required label::before {
  content: "" !important;
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

/* ─── 加藤さん指示 2026-08-06: 姓+名を 1 行に配置 (self / repeater 共通) ─── */
.dra-name-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.dra-name-row .ff-el-group {
  flex: 1 1 0;
  margin-bottom: 0;
}

/* ─── 加藤さん指示 2026-08-06: 生年月日 (type=date) ラッパー ─── */
.dra-birthdate-group input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  color: #1f2937;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dra-birthdate-group input[type="date"]:focus {
  outline: none;
  border-color: #6b7280;
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
}
/* 元の 3 つの数値入力を非表示 (backend には値が保持される)
   ★display: none だと FF の validation/serialize が input を無視して値がクリアされる。
     絶対配置 + サイズ 1px で見た目上は消し、FF からは通常 input として認識させる。 */
.dra-hidden-birthdate {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: visible !important;
}

/* ─── 加藤さん指示 2026-08-06: 関係者 repeater を PC でも 2 行レイアウト ─── */
/*   Row 1: 関係 | 姓 | 名
     Row 2: 生年月日 (span 2) | 配置段
     thead は非表示にし、各セルに data-dra-label で見出しを付ける */
.fluent_form_10 .ff_repeater_table,
.fluent_form_11 .ff_repeater_table {
  border-collapse: separate;
  border-spacing: 0;
  display: block;
  width: 100%;
  margin-top: 8px;
}
.fluent_form_10 .ff_repeater_table thead,
.fluent_form_11 .ff_repeater_table thead { display: none; }
.fluent_form_10 .ff_repeater_table tbody,
.fluent_form_11 .ff_repeater_table tbody { display: block; }
.fluent_form_10 .ff_repeater_table tbody tr,
.fluent_form_11 .ff_repeater_table tbody tr {
  display: grid;
  /* minmax(0, 1fr) で子要素がはみ出しても track が広がらない (overflow 防止) */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 10px;
  padding: 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}
.fluent_form_10 .ff_repeater_table tbody td,
.fluent_form_11 .ff_repeater_table tbody td {
  display: block;
  padding: 0 !important;    /* FF: td { padding: 0 15px 15px 0 } を打ち消し */
  margin: 0 !important;     /* FF mobile: margin-left:8px; margin-right:8px を打ち消し */
  border: none;
  vertical-align: top;
  min-width: 0;             /* grid item のはみ出し防止 */
  max-width: 100%;
  width: auto !important;   /* FF: td { width: 282px } を打ち消し */
  box-sizing: border-box;
}
/* FF: .repeat_btn { width: 30px } / .repeat_btn { align-self: center; display: flex } を打ち消し
   ↑ この width:30px が PC 時に +/- 列を 30px 幅に潰していた */
.fluent_form_10 .ff_repeater_table td.repeat_btn,
.fluent_form_11 .ff_repeater_table td.repeat_btn {
  width: 100% !important;
  align-self: auto !important;
  display: block !important;
  margin-top: 0 !important;
  text-align: right !important;
}
/* 加藤さん指示 2026-08-06: 並び順 (DOM 順 = 視覚順 = Tab フォーカス順)
   行 1: 姓 | 名 (col 1-3 | col 4-6)
   行 2: 関係 | 配置段 | 生年月日 (col 1-2 | 3-4 | 5-6)
   行 3: +/- ボタン (全幅 右寄せ)
   ★ nth-child ではなく class/data 属性ベースで指定して DOM 順を並び替え可能に */
.fluent_form_10 .ff_repeater_table tbody tr > td[data-dra-label="姓"],
.fluent_form_11 .ff_repeater_table tbody tr > td[data-dra-label="姓"] { grid-column: 1 / span 3; grid-row: 1; }
.fluent_form_10 .ff_repeater_table tbody tr > td[data-dra-label="名"],
.fluent_form_11 .ff_repeater_table tbody tr > td[data-dra-label="名"] { grid-column: 4 / span 3; grid-row: 1; }
.fluent_form_10 .ff_repeater_table tbody tr > td[data-dra-label="関係"],
.fluent_form_11 .ff_repeater_table tbody tr > td[data-dra-label="関係"] { grid-column: 1 / span 2; grid-row: 2; }
.fluent_form_10 .ff_repeater_table tbody tr > td[data-dra-label^="配置段"],
.fluent_form_11 .ff_repeater_table tbody tr > td[data-dra-label^="配置段"] { grid-column: 3 / span 2; grid-row: 2; }
.fluent_form_10 .ff_repeater_table tbody tr > td.dra-birthdate-group,
.fluent_form_11 .ff_repeater_table tbody tr > td.dra-birthdate-group { grid-column: 5 / span 2; grid-row: 2; }
/* +/- ボタン td (data-dra-label なし) → 全幅右寄せ */
.fluent_form_10 .ff_repeater_table tbody tr > td:not([data-dra-label]):not(.dra-hidden-birthdate),
.fluent_form_11 .ff_repeater_table tbody tr > td:not([data-dra-label]):not(.dra-hidden-birthdate) {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 4px;
}
/* input/select 幅を td 内で 100% に */
.ff_repeater_table tbody td input,
.ff_repeater_table tbody td select,
.ff_repeater_table tbody td textarea {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* モバイル: 全部縦積み (2 カラム: 姓 名 のみ横並び、他は全幅) */
@media (max-width: 600px) {
  .fluent_form_10 .ff_repeater_table tbody tr,
  .fluent_form_11 .ff_repeater_table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fluent_form_10 .ff_repeater_table tbody tr > td[data-dra-label="姓"],
  .fluent_form_11 .ff_repeater_table tbody tr > td[data-dra-label="姓"] { grid-column: 1; grid-row: 1; }
  .fluent_form_10 .ff_repeater_table tbody tr > td[data-dra-label="名"],
  .fluent_form_11 .ff_repeater_table tbody tr > td[data-dra-label="名"] { grid-column: 2; grid-row: 1; }
  .fluent_form_10 .ff_repeater_table tbody tr > td[data-dra-label="関係"],
  .fluent_form_11 .ff_repeater_table tbody tr > td[data-dra-label="関係"] { grid-column: 1 / -1; grid-row: 2; }
  .fluent_form_10 .ff_repeater_table tbody tr > td[data-dra-label^="配置段"],
  .fluent_form_11 .ff_repeater_table tbody tr > td[data-dra-label^="配置段"] { grid-column: 1 / -1; grid-row: 3; }
  .fluent_form_10 .ff_repeater_table tbody tr > td.dra-birthdate-group,
  .fluent_form_11 .ff_repeater_table tbody tr > td.dra-birthdate-group { grid-column: 1 / -1; grid-row: 4; }
  .fluent_form_10 .ff_repeater_table tbody tr > td:not([data-dra-label]):not(.dra-hidden-birthdate),
  .fluent_form_11 .ff_repeater_table tbody tr > td:not([data-dra-label]):not(.dra-hidden-birthdate) { grid-row: 5; }
}
/* Fluent Forms 標準 .ff-el-repeat-buttons-list (margin-top:34%; justify-content:space-between) を打ち消し */
/*   td.repeat_btn は Fluent Forms が repeater の +/- ボタン用に付与するクラス */
.ff_repeater_table td.repeat_btn { padding: 0 !important; }
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 0 !important;
  gap: 8px;
  width: 100%;
}
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list .repeat-plus,
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list .repeat-minus {
  visibility: visible !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  min-height: 32px;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list .repeat-plus:hover,
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list .repeat-minus:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
/* 加藤さん指示 2026-08-06: SVG を隠しテキストラベルを付ける */
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list .repeat-plus svg,
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list .repeat-minus svg {
  display: none !important;
}
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list .repeat-plus::after {
  content: "+追加";
}
.ff_repeater_table td.repeat_btn .ff-el-repeat-buttons-list .repeat-minus::after {
  content: "−削除";
}

/* 加藤さん指示 2026-08-06: repeater td 内の .ff-el-group の margin を除去 (余白過多解消) */
.ff_repeater_table tbody td .ff-el-group {
  margin: 0 !important;
}

/* 各セルの見出し (JS で data-dra-label 属性を設定) */
.ff_repeater_table tbody td[data-dra-label]:not(.dra-hidden-birthdate)::before {
  content: attr(data-dra-label);
  display: block;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

/* ─── 加藤さん指示 2026-08-06: 送信前 確認ステップ (最終ページ) ─── */
.dra-confirm-placeholder {
  margin: 16px 0 0;
}
.dra-confirm-placeholder .dra-confirm-section-title {
  margin: 18px 0 8px;
  padding: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
}
.dra-confirm-placeholder .dra-confirm-section-title:first-child { margin-top: 0; }
.dra-confirm-placeholder .dra-confirm-dl { margin: 0; }
.dra-confirm-placeholder .dra-confirm-dl dt {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  margin: 12px 0 2px;
  letter-spacing: 0.03em;
}
.dra-confirm-placeholder .dra-confirm-dl dt:first-child { margin-top: 0; }
.dra-confirm-placeholder .dra-confirm-dl dd {
  margin: 0 0 4px;
  padding: 6px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  word-break: break-all;
  font-size: 14px;
  color: #1f2937;
}
.dra-confirm-placeholder .dra-confirm-person {
  margin: 8px 0;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.dra-confirm-placeholder .dra-confirm-person-title {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 4px;
}
.dra-confirm-placeholder .dra-confirm-person-body {
  font-size: 13px;
  color: #1f2937;
  line-height: 1.7;
}

/* モバイル調整 */
@media (max-width: 600px) {
  .fluent_form_10, .fluent_form_11, .fluent_form_12 {
    margin: 1em 0;
    padding: 0;
  }
  /* prev/next/submit は幅 100% にしない (左右並びを維持) */
  .ff-btn:not(.ff-btn-prev):not(.ff-btn-next):not(.ff-btn-submit) {
    width: 100%;
    padding: 14px 22px;
  }
  .dra-name-row { flex-direction: column; gap: 0; }
  .dra-name-row .ff-el-group { margin-bottom: 18px; }
}
/* 加藤さん指示 2026-08-06: 下部ボタン (prev/next/submit) は常に左右配置。
   FF の .ff-t-container / .ff-inner_submit_container はモバイルで縦積みになるので上書き */
@media (max-width: 767px) {
  .fluentform .ff-inner_submit_container,
  .fluentform .ff-step-t-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px;
  }
  .fluentform .ff-inner_submit_container .ff-t-cell,
  .fluentform .ff-step-t-container .ff-t-cell {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .fluentform .step-nav {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px;
  }
  .fluentform .step-nav .ff-btn-prev,
  .fluentform .step-nav .ff-btn-next {
    width: auto !important;
    padding: 10px 18px !important;
  }
  .fluentform .ff_submit_btn_wrapper .ff-btn-submit {
    width: auto !important;
    padding: 10px 18px !important;
  }
}

/* ─── 送信後にトップページへ戻す案内 ─── */
/*   加藤さん指示 2026-09-09: 完了ページ / 完了メッセージから数秒後に移動する。
     読み終える前に飛ばされないよう、その場で止められるようにしている。 */
.dra-redirect-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dra-redirect-stop {
  font: inherit;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
}
.dra-redirect-stop:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}