/* AAB Front Preview UI v70 (scoped) */
/* 重要：WPテーマ全体を壊さないように .aab-front-scope 内に限定する */

.aab-front-scope .aabfb-preview { background:#fff; border-radius:12px; padding:12px; box-sizing:border-box; }

.aab-front-scope .aabfb-preview-steps-nav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.aab-front-scope .aabfb-step-btn{
  background:#111; color:#fff; border:0; border-radius:10px;
  padding:8px 10px; cursor:pointer; font-size:12px; line-height:1;
}
.aab-front-scope .aabfb-step-btn.is-active{ background:#444; }
.aab-front-scope .aabfb-step-btn.aabfb-step-complete{ margin-left:auto; }

.aab-front-scope .aabfb-preview-main{ display:flex; gap:14px; align-items:flex-start; }
.aab-front-scope .aabfb-preview-left{ flex: 1 1 auto; min-width: 280px; }
.aab-front-scope .aabfb-preview-right{ width: 320px; max-width: 40%; }
@media (max-width: 860px){
  .aab-front-scope .aabfb-preview-main{ flex-direction:column; }
  .aab-front-scope .aabfb-preview-right{ width: 100%; max-width: 100%; }
}

.aab-front-scope .aabfb-preview-page{ padding:0; box-sizing:border-box; }
.aab-front-scope .aabfb-preview-field{ background:#f6f6f6; border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:10px; margin:6px 0; box-sizing:border-box; }
.aab-front-scope .aabfb-preview-input{ width:100%; background:#fff; border:1px solid rgba(0,0,0,.15); border-radius:10px; padding:10px; box-sizing:border-box; }

.aab-front-scope .aabfb-preview-footer{ margin-top:10px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.aab-front-scope .aabfb-preview-footer-right{ display:flex; align-items:center; gap:10px; }
.aab-front-scope .aabfb-preview-counter{ min-width:50px; text-align:center; }

/* 完了カード */
.aab-front-scope .aabfb-complete-card{ background:#f3f3f3; border-radius:12px; padding:12px; box-sizing:border-box; }
.aab-front-scope .aabfb-complete-title{ font-weight:800; margin-bottom:6px; }
.aab-front-scope .aabfb-complete-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* スマホプレビュー */
.aab-front-scope .aabfb-phone-frame{
  width: 100%;
  /* 仕様（FIXED42CT系で統一）: 少し横幅を広げたスマホ比率（縦） */
  aspect-ratio: 10 / 19.5;
  border-radius: 20px;
  background: #111;
  padding: 7px; /* ベゼルを少し細く */
  box-sizing: border-box;
  overflow:hidden; /* 中身が黒縁からはみ出さないようにする */
}
.aab-front-scope .aabfb-phone-screen{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}
.aab-front-scope .aabfb-phone-note{ margin-top:8px; font-size:12px; color:#666; }
.aab-front-scope .aabfb-preview-pages-phone .aabfb-preview-field{ margin: 8px 0; padding: 8px; }
.aab-front-scope .aabfb-preview-pages-phone .aabfb-preview-input{ padding: 8px; }

/* AAB専用ボタン（WPの .button を使わず侵食しない） */
.aab-front-scope .aab-front-btn{
  display:inline-block;
  background:#111;
  color:#fff;
  text-decoration:none;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  cursor:pointer;
  line-height:1.2;
}
.aab-front-scope .aab-front-btn:hover{ opacity:.9; }
.aab-front-scope .aab-front-btn:disabled{ opacity:.5; cursor:not-allowed; }
.aab-front-scope .aab-front-btn-primary{ background:#111; }

/* v71: phone controls (scoped) */
.aab-front-scope .aabfb-phone-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:8px;
}
.aab-front-scope .aabfb-phone-controls-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.aab-front-scope .aabfb-phone-controls-label{
  font-size:12px;
  color:#666;
  min-width:42px;
}
.aab-front-scope .aab-front-btn-mini{
  padding:6px 10px;
  font-size:12px;
  border-radius:10px;
}
.aab-front-scope .aabfb-phone-orient-btn{ background:#111; }
.aab-front-scope .aabfb-phone-orient-btn.is-active{ background:#444; }

.aab-front-scope .aabfb-phone-scale{ width:160px; }
.aab-front-scope .aabfb-phone-scale-val{ font-size:12px; color:#444; }

.aab-front-scope .aabfb-phone-frame{
  margin: 0 auto;
  width: 100%;
}


/* v71: table layout for front popup */
.aab-front-scope .aabfb-layout-table{
  width:100%;
  border-collapse:collapse;
}

.aab-front-scope .aabfb-layout-col-left{ width:65%; }
.aab-front-scope .aabfb-layout-col-right{ width:35%; }

/* v72: 横向き（landscape）時
 * - フォーム領域は消さない（構造/導線を崩さない）
 * - スマホ枠が横長に見えるよう、左右カラム比率だけ調整
 */
.aab-front-scope.aabfb-phone-landscape .aabfb-layout-col-left{ width:50%; }
.aab-front-scope.aabfb-phone-landscape .aabfb-layout-col-right{ width:50%; }
.aab-front-scope.aabfb-phone-landscape td.aabfb-layout-form{ width:50%; }
.aab-front-scope.aabfb-phone-landscape td.aabfb-layout-phone{ width:50%; }

/* v74: 右カラム内での拡大時クリップを避ける（TD手前で切れないようにする） */
.aab-front-scope td.aabfb-layout-phone{ overflow: visible; }
.aab-front-scope td.aabfb-layout-phone .aabfb-phone-frame,
.aab-front-scope td.aabfb-layout-phone .aabfb-phone-screen,
.aab-front-scope td.aabfb-layout-phone .aabfb-phone-stage{ overflow: visible; }

/* v74: 横向き時はTD横幅いっぱいを優先（見た目が横長にならない問題対策） */
.aab-front-scope.aabfb-phone-landscape .aabfb-phone-frame{ width:100% !important; }

/* 右カラム（スマホプレビュー）は上下中央寄せ */
.aab-front-scope td.aabfb-layout-phone{
  vertical-align: middle;
  text-align: center;
}

/* v73: ズームでプレビューがはみ出しても操作バーが隠れないように前面固定
 * - DOM/構造は変えず、表示だけ調整
 */
.aab-front-scope td.aabfb-layout-controls{
  position: sticky;
  bottom: 0;
  z-index: 9999;
  /* スライダー領域の背景（グレー/白）を消す：前面固定は維持しつつ透明にする */
  background: transparent;
}
.aab-front-scope td.aabfb-layout-controls .aabfb-phone-controls{
  position: relative;
  z-index: 10000;
  padding: 6px 0;
  background: transparent;
}

/* v73: 横向きのフォールバック（JSが間に合わない場合でも見た目を切替） */
.aab-front-scope .aabfb-phone-frame.is-landscape{
  aspect-ratio: 19.5 / 9;
}

.aab-front-scope .aabfb-layout-actions{
  text-align:right;
}

.aab-front-scope .aabfb-header-actions{
  display:inline-flex;
  gap:8px;
}

.aab-front-scope .aabfb-layout-form .aabfb-form-scroll{
  max-height:60vh;
  overflow-y:auto;
  padding-right:6px;
}

/* ===== Modal (front build popup) scroll fix =====
 * - Middle block (form area) must scroll so "ビルド実行" does not disappear
 * - Complete card must also scroll within the same middle area
 * - Keep DOM structure unchanged
 */
.aab-front-modal-body .aab-front-scope .aabfb-layout-form{
  height:100% !important;
  min-height:0 !important;
}
.aab-front-modal-body .aab-front-scope .aabfb-layout-form .aabfb-form-scroll{
  max-height:none !important;
  height:100% !important;
  min-height:0 !important;
  overflow:auto !important;
}
.aab-front-modal-body .aab-front-scope .aabfb-layout-form .aabfb-preview-complete{
  height:100% !important;
  min-height:0 !important;
  overflow:auto !important;
  padding-right:6px;
  box-sizing:border-box;
}
.aab-front-modal-body .aab-front-scope .aabfb-layout-form .aabfb-complete-card{
  min-height:0 !important;
}

/* v73: フロントのプレビューモーダル内では、操作バーを常に見える位置に固定 */
.aab-front-modal-body .aab-front-scope .aabfb-phone-controls{
  position: sticky;
  bottom: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.96);
  padding: 6px 0;
}

.aab-front-scope .aabfb-layout-nav .aabfb-preview-nav{
  text-align:center;
}

.aab-front-scope .aabfb-preview-nav .aab-front-btn,
.aab-front-scope .aabfb-preview-nav .aabfb-preview-counter{
  display:inline-block;
  margin:0 4px;
}

.aab-front-scope .aabfb-layout-controls .aabfb-phone-controls{
  display:flex;
  justify-content:center;
}

.aab-front-scope .aabfb-layout-controls .aabfb-phone-controls-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* 完了ボタンをSTEPボタン群と左詰めにする */
.aab-front-scope .aabfb-preview-steps-nav{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:10px 0;
}

.aab-front-scope .aabfb-step-btn.aabfb-step-complete{
  margin-left:0;
}


/* v71: 余分な余白の削除（管理側プレビューと同様の調整） */
.aab-front-scope .aabfb-preview-field:last-child{
  margin-bottom:0;
}
.aab-front-scope .aabfb-form-scroll{
  padding-bottom:0;
}


/* v71: 入力フォームの下の余白を詰める（管理側と同等） */
.aab-front-scope .aabfb-input-card:last-child{ margin-bottom:0 !important; }
.aab-front-scope .aabfb-preview-field:last-child{ margin-bottom:0 !important; }

/* v71: 余白が消えないケース対策（より強い指定） */
.aab-front-scope .aabfb-input-card{ margin-bottom:0 !important; }
.aab-front-scope .aabfb-preview-field{ margin-bottom:0 !important; }
.aab-front-scope .aabfb-form-scroll{ padding-bottom:0 !important; margin-bottom:0 !important; }


/* v71: 縦/横ボタンとスライダーを横一列に固定（折り返し防止） */
.aab-front-scope .aabfb-layout-controls .aabfb-phone-controls-row{
  flex-wrap:nowrap;
}


/* v71: 管理画面と同様にフォーム直下の余白を完全に消す */
.aab-front-scope .aabfb-preview-field{
  margin:0 !important;
}


/* v71: 管理側 v3/v4 と同等の「フォーム下余白」調整（フロント用） */

/* まず、フォームスクロール内の margin-bottom を根こそぎ 0 にする */
.aab-front-scope .aabfb-form-scroll,
.aab-front-scope .aabfb-form-scroll *{
  margin-bottom:0 !important;
}

/* その上で、カード間だけ最低限の間隔を付ける */
.aab-front-scope .aabfb-preview-field{
  margin-top:0 !important;
  margin-bottom:8px !important;
}

/* 最後のカードだけは下余白を 0 にする */
.aab-front-scope .aabfb-preview-field:last-child{
  margin-bottom:0 !important;
}


/* v71: モーダル内でテーブル縦幅を100%にし、上下段を固定 + 中段のみスクロール */

/* プレビュー本体をモーダル内で100%に伸ばす */
.aab-front-modal-body .aab-front-scope{
  height:100%;
}
.aab-front-modal-body .aab-front-scope .aabfb-preview{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* テーブルを縦方向100%にして、3行目（フォーム＋スマホ）に高さを持たせる */
.aab-front-scope .aabfb-preview-main{
  flex:1 1 auto;
}
.aab-front-scope .aabfb-layout-table{
  height:100%;
}
.aab-front-scope .aabfb-layout-table > tbody > tr:nth-child(3) > td{
  height:100%;
  vertical-align:top;
}


/* v73: スマホプレビューはTD内で上下中央寄せ + 100%時に右カラムを使い切る */
.aab-front-scope .aabfb-layout-table > tbody > tr:nth-child(3) > td.aabfb-layout-phone{
  vertical-align: middle;
  overflow: visible; /* スケール変化時に下端が欠けない */
}
.aab-front-scope .aabfb-layout-phone{
  display:flex;
  align-items:center;   /* 上下中央 */
  justify-content:center;
}
/* 左フォーム欄と右スマホプレビューだけスクロール許可 */
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll{
  height:100%;
  max-height:none;
  overflow-y:auto;
}
.aab-front-scope .aabfb-layout-phone .aabfb-phone-frame{
  /* 右カラムの高さに合わせてスマホ枠を最大化（100%時に黒縁が下端まで届く） */
  height:100%;
  max-height:100%;
  width:auto;
  max-width:100%;
}


/* v71: 右カラム（上・中・下）の背景色をグレーに統一 */
.aab-front-scope .aabfb-layout-actions,
.aab-front-scope .aabfb-layout-html-list,
.aab-front-scope .aabfb-layout-phone,
.aab-front-scope .aabfb-layout-controls{
  background:#f5f5f5;
}


/* v71: スマホ枠スケール用の余白調整（縮小時に上下中央寄せ気味に） */
.aab-front-scope .aabfb-layout-phone{
  text-align:center;
}
.aab-front-scope .aabfb-layout-phone .aabfb-phone-frame{
  display:inline-block;
}


/* v71: プレビュー全体の下に少しだけスペースを付け、4行目の下に1行分の余白を確保 */
.aab-front-modal-body .aab-front-scope .aabfb-preview{
  height:calc(100% - 6px);
  padding-bottom:6px;
  box-sizing:border-box;
}

/* v71: 1行目右セル内のヘッダーアクション背景もグレーにして視認性を上げる */
.aab-front-scope .aabfb-layout-actions .aabfb-header-actions{
  background:#f5f5f5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  border-radius:4px;
}


/* v71: 1行目右セル（保存/再読み込み/閉じる）はグレーにしない */
.aab-front-scope .aabfb-layout-actions{
  background:transparent !important;
}
.aab-front-scope .aabfb-layout-actions .aabfb-header-actions{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}


/* v71: 右カラムの中段（HTML一覧・スマホプレビュー・縦横+スライダー）の背景を少し濃いグレーにし、ボーダーを消す */
.aab-front-scope .aabfb-layout-html-list,
.aab-front-scope .aabfb-layout-phone,
.aab-front-scope .aabfb-layout-controls{
  background:#e0e0e0 !important;
  border:none !important;
}

/* v75: スライダー（縦横/拡大）の背景は不要：グレー/白の面を完全に消す */
.aab-front-scope .aabfb-layout-controls,
.aab-front-scope td.aabfb-layout-controls{
  background: transparent !important;
  border: none !important;
}
.aab-front-scope .aabfb-layout-controls .aabfb-phone-controls,
.aab-front-scope td.aabfb-layout-controls .aabfb-phone-controls{
  background: transparent !important;
}


/* v71: フレックス内で3段目の行が正しく縮むようにする */
.aab-front-scope .aabfb-preview-main{
  flex:1 1 auto;
  min-height:0;
}


/* v71: 3段目（フォーム+スマホプレビュー）のみ縦スクロールさせるための上限高さ */
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll{
  height:auto !important;
  max-height:60vh !important;
  overflow-y:auto !important;
}
.aab-front-scope .aabfb-layout-phone .aabfb-phone-screen{
  height:auto !important;
  max-height:60vh !important;
  overflow-y:auto !important;
}


/* v71: スマホ枠の高さはコンテンツと60vh上限に追従させ、黒枠が飛び出さないようにする */
.aab-front-scope .aabfb-layout-phone .aabfb-phone-screen{
  height:auto !important;
  max-height:60vh !important;
  overflow-y:auto !important;
}


/* v71: スマホプレビュー画面のアスペクト比を一般的な iPhone（縦長）に揃える */
.aab-front-scope .aabfb-layout-phone .aabfb-phone-screen{
  width:100%;
  height:auto;
  aspect-ratio:9 / 19.5;
  max-height:100%;
}


/* v71: スマホプレビュー画面のアスペクト比を一般的な iPhone（縦長）に揃える */
.aab-front-scope .aabfb-layout-phone .aabfb-phone-screen{
  width:100%;
  height:auto;
  aspect-ratio:9 / 19.5;
  max-height:100%;
}


/* v71: 3段目の高さをモーダル基準で抑え、内部のみスクロールさせる */
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll,
.aab-front-scope .aabfb-layout-phone .aabfb-phone-screen{
  /* モーダル高さ(min(86vh, 760px))から上2行+下1行分をざっくり引いた残り */
  max-height:40vh !important;
  overflow-y:auto !important;
}


/* v71: 3段目の高さをモーダル基準で抑え、内部のみスクロールさせる */
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll,
.aab-front-scope .aabfb-layout-phone .aabfb-phone-screen{
  max-height:50vh !important;
  overflow-y:auto !important;
}


/* v71: スマホ枠の見た目サイズを調整（右カラム内で中心寄せ・最大幅を制限） */
.aab-front-scope .aabfb-layout-phone{
  text-align:center;
}
.aab-front-scope .aabfb-phone-frame{
  display:inline-block;
  max-width:260px;
}


/* vFinal: レイアウトの高さをリセットして「ポップアップ内100% + 3段目だけスクロール」を強制する */
.aab-front-modal-body .aab-front-scope{
  height:100%;
}
.aab-front-modal-body .aab-front-scope .aabfb-preview{
  height:100%;
  display:flex;
  flex-direction:column;
  padding-bottom:0;
  box-sizing:border-box;
}
.aab-front-scope .aabfb-preview-main{
  flex:1 1 auto;
  min-height:0;
}
.aab-front-scope .aabfb-layout-table{
  width:100%;
  height:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.aab-front-scope .aabfb-layout-table > tbody > tr:nth-child(3) > td{
  height:100%;
  vertical-align:top;
}
.aab-front-scope .aabfb-layout-form,
.aab-front-scope .aabfb-layout-phone{
  height:100%;
}
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll,
.aab-front-scope .aabfb-layout-phone .aabfb-phone-screen{
  height:100%;
  max-height:none;
  overflow:auto;
}

/* vFinal: スマホ枠は3段目の高さに合わせて収める（比率よりもレイアウト優先） */
.aab-front-scope .aabfb-phone-frame{
  width:auto;
  max-width:260px;
  margin:0 auto;
}


/* v21: 下段スライダーが右に飛び出さないように、行全体をセル内で折り返し+中央寄せにする */
.aab-front-scope .aabfb-layout-controls .aabfb-phone-controls-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.aab-front-scope .aabfb-layout-controls .aabfb-phone-scale{
  flex:1 1 120px;
  max-width:160px;
}
.aab-front-scope .aabfb-layout-controls .aabfb-phone-scale input[type=range]{
  width:100%;
}

/* v21: スマホ画面のコンテンツが黒フチの下にかぶらないように、内側の下パディングを増やす */


/* v22: スマホ下段の「サイズ」「100%」表記を消し、縦/横ボタン + スライダーだけで横幅100%に並べる */
.aab-front-scope .aabfb-phone-controls-label,
.aab-front-scope .aabfb-phone-scale-val{
  display:none !important;
}

.aab-front-scope .aabfb-layout-controls .aabfb-phone-controls-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* 左側：縦/横ボタンのかたまり */
.aab-front-scope .aabfb-layout-controls .aabfb-phone-orientation{
  display:inline-flex;
  flex:0 0 auto;
  gap:6px;
}

/* 右側：スライダーが残り幅すべてを使う */
.aab-front-scope .aabfb-layout-controls .aabfb-phone-scale{
  flex:1 1 auto;
  max-width:none;
}
.aab-front-scope .aabfb-layout-controls .aabfb-phone-scale input[type=range]{
  width:100%;
}


/* v23: スマホ画面の高さをフチ内より少し小さくして、黒い下フチが確実に見えるようにする */
.aab-front-scope .aabfb-phone-screen{
  height:calc(100% - 6px) !important;
  margin-bottom:3px !important;
  padding-bottom:10px !important;
  box-sizing:border-box;
}


/* v24: 最終調整 - スマホ画面をフチより一回り小さくして、下フチがはっきり見えるようにする */
.aab-front-scope .aabfb-phone-frame{
  position:relative;
  margin: 0 auto;
  width:90%;
  max-width:260px;
  border-radius:22px;
  background:#111;
  padding:10px;
  box-sizing:border-box;
  overflow:hidden;
}
.aab-front-scope .aabfb-phone-screen{
  position:relative;
  width:100%;
  height:calc(100% - 14px) !important;  /* フチ内より少し小さく */
  margin:7px 0 0 0 !important;          /* 上下ともフチが見えるように */
  border-radius:16px;
  background:#fff;
  overflow:auto;
  padding:10px 10px 12px !important;
  box-sizing:border-box;
}


/* v25: 3段目セル内の下余白を詰める（フォーム側・スマホ側ともに） */
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
.aab-front-scope .aabfb-layout-phone{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
.aab-front-scope .aabfb-phone-frame{
  margin-bottom:0 !important;
}


/* v-scroll: スマホプレビューとフォーム欄のスクロールバーを細くする */

/* WebKit系ブラウザ（Chrome / Edge / Safari） */
.aab-front-scope .aabfb-phone-screen::-webkit-scrollbar,
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll::-webkit-scrollbar{
  width:6px;
}
.aab-front-scope .aabfb-phone-screen::-webkit-scrollbar-track,
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.aab-front-scope .aabfb-phone-screen::-webkit-scrollbar-thumb,
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll::-webkit-scrollbar-thumb{
  border-radius:3px;
}

/* Firefox 用（幅を細く） */
.aab-front-scope .aabfb-phone-screen,
.aab-front-scope .aabfb-layout-form .aabfb-form-scroll{
  scrollbar-width:thin;
}


/* AAB: WPメディアモーダルがAABポップアップの上に出るようにする */
body.aab-media-open .media-modal{ z-index: 200000 !important; }
body.aab-media-open .media-modal-backdrop{ z-index: 199000 !important; }

.aab-front-scope .aabfb-preview-check-list{ display:flex; flex-direction:column; gap:6px; }
.aab-front-scope .aabfb-preview-check-item{ display:flex; gap:8px; align-items:center; font-size:13px; }
.aab-front-scope .aabfb-preview-image-grid{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; align-items:center; }
.aab-front-scope .aabfb-preview-image-thumb{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }

/* 画像選択（サンプル＋参照ボタン）：すべて同一サイズの正方形 */
.aab-front-scope .aabfb-preview-image-choice,
.aab-front-scope .aabfb-preview-image-add{
  width:72px;
  height:72px;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(0,0,0,0.16);
  cursor:pointer;
}
.aab-front-scope .aabfb-preview-image-choice.is-selected{
  border:2px solid rgba(0,0,0,0.72);
}
.aab-front-scope .aabfb-preview-image-add{
  border:2px dashed rgba(0,0,0,0.28);
  position:relative;
}
.aab-front-scope .aabfb-preview-image-add.has-image{
  border:2px solid rgba(0,0,0,0.72);
}
.aab-front-scope .aabfb-preview-image-add .aabfb-plus{
  font-size:26px;
  line-height:1;
  opacity:0.55;
}
.aab-front-scope .aabfb-preview-image-add.has-image .aabfb-plus{ display:none; }
.aab-front-scope .aabfb-preview-image-selected{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.aab-front-scope .aabfb-preview-media-row{ display:flex; gap:8px; align-items:center; }
.aab-front-scope .aabfb-media-url{ flex:1 1 auto; min-width:0; }
.aab-front-scope .aabfb-preview-note{ margin-top:6px; font-size:12px; opacity:.8; }


/* v3_4: ラベル横に概要（注釈）を極小表示 */
.aab-front-scope .aabfb-preview-field-label{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.aab-front-scope .aabfb-preview-note-inline{
  font-size:10px;
  line-height:1.2;
  opacity:1;
  font-weight:normal;
  color:#0a8f3c;
}


/* v3_5: 概要（注釈）は項目名の横に極小で固定（フロント/管理プレビュー共通） */
.aab-front-scope .aabfb-preview-field-label{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:nowrap;
}
.aab-front-scope .aabfb-preview-note-inline{
  font-size:10px;
  line-height:1.1;
  opacity:0.7;
  white-space:nowrap;
}


/* v3_6: 強制（テーマ/管理CSSに負けない） */
.aab-front-scope .aabfb-preview .aabfb-preview-field-label{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
.aab-front-scope .aabfb-preview .aabfb-preview-note-inline{
  font-size:10px !important;
  line-height:1.1 !important;
  opacity:0.7 !important;
  white-space:nowrap !important;
}


/* v3_7: 実際のHTMLに合わせて強制（フロント/管理プレビュー共通） */
.aab-front-scope .aabfb-preview-field-label{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
.aab-front-scope .aabfb-preview-note-inline{
  font-size:10px !important;
  line-height:1.1 !important;
  opacity:0.7 !important;
  white-space:nowrap !important;
}

/* UNIFY_V1_NOTE: 概要（注釈）を項目名の横に極小表示（フロント/管理共通） */
.aab-front-scope .aabfb-preview-field-label{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:nowrap;
}
.aab-front-scope .aabfb-preview-note-inline{
  font-size:10px;
  line-height:1.1;
  opacity:0.7;
  white-space:nowrap;
}

/* UNIFY_V2_STRONG_FORM: テーマに負けないようにフォーム部分をスコープ内で統一 */
.aab-front-scope .aabfb-preview-field{ margin:0 0 12px 0 !important; padding:12px !important; background:#fff !important; border:1px solid rgba(0,0,0,.12) !important; border-radius:12px !important; box-sizing:border-box !important; }
.aab-front-scope .aabfb-preview-field-label{ font-size:14px !important; font-weight:600 !important; }
.aab-front-scope .aabfb-preview-input{ width:100% !important; background:#fff !important; border:1px solid rgba(0,0,0,.15) !important; border-radius:10px !important; padding:10px !important; box-sizing:border-box !important; font-size:14px !important; }
.aab-front-scope .aabfb-preview-check{ transform:scale(1) !important; }


/* v72: スマホプレビューはHTMLスナップショットをiframeで表示（HTML編集プレビューと統一） */
.aab-front-scope .aabfb-phone-screen.aabfb-has-iframe{
  padding:0 !important;
  overflow:hidden !important;
  /* 重要：過去の v71 系の max-height / height:auto / aspect-ratio 指定が残っていると
     横向き時に内側が黒縁に被る（はみ出す）原因になるため、ここで完全に打ち消す */
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  box-sizing:border-box !important;
}
.aab-front-scope .aabfb-phone-stage{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius: inherit;
}
.aab-front-scope .aabfb-phone-iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  border-radius: inherit;
}

/* v73: スマホプレビューのHTML切り替え（HTML編集と同一の想定） */
.aab-front-scope .aabfb-phone-page-tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  padding:8px 8px 6px;
  border-bottom:1px solid rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.95);
  box-sizing:border-box;
}
.aab-front-scope .aabfb-phone-page-tabs .aabfb-phone-page-btn{
  line-height:1;
}


/* v73: HTML切り替えボタンをSTEP行の右カラムに配置（HTML編集と同じ運用） */
.aab-front-scope .aabfb-step-html-tabs{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.aab-front-scope .aabfb-step-html-tabs .aab-front-btn{
  white-space:nowrap;
}


/* ==========================================================
 * v74: 4段目（戻る/進む + 縦横/スライダー）が消える問題の恒久対策
 * - v71/vFinal で tr:nth-child(3) td に height:100% を付けていた影響で、
 *   3段目がテーブル全高を占有し、4段目が押し出されて見えなくなる。
 * - HTML構造は変更せず、テーブルをflexカラムとして扱い、
 *   3段目だけ可変（flex:1）にする。
 * ========================================================== */
.aab-front-modal-body .aab-front-scope .aabfb-layout-table{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
}
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody > tr{
  display:flex !important;
  width:100% !important;
}
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody > tr:nth-child(1),
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody > tr:nth-child(2),
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody > tr:nth-child(4){
  flex:0 0 auto !important;
}
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody > tr:nth-child(3){
  flex:1 1 auto !important;
  min-height:0 !important;
}

/* 左右カラム比（65/35）を全行で統一（colgroup 依存を避ける） */
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody > tr > td:first-child{
  flex:0 0 65% !important;
  min-width:0 !important;
}
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody > tr > td:last-child{
  flex:0 0 35% !important;
  min-width:0 !important;
}

/* 3段目のセルだけは内部スクロールが効くように縮み許可 */
.aab-front-modal-body .aab-front-scope .aabfb-layout-table > tbody > tr:nth-child(3) > td{
  min-height:0 !important;
}


/* v75: 画像フィールド - サンプル画像選択 + 追加（点線+） */
.aab-front-scope .aabfb-preview-image-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.aab-front-scope .aabfb-preview-image-choice{
  width:72px;
  height:72px;
  padding:0;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
}
.aab-front-scope .aabfb-preview-image-choice img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.aab-front-scope .aabfb-preview-image-choice.is-selected{
  outline:2px solid rgba(0,0,0,0.35);
  outline-offset:0;
}
.aab-front-scope .aabfb-preview-image-add{
  width:72px;
  height:72px;
  border:2px dashed rgba(0,0,0,0.20);
  border-radius:10px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.aab-front-scope .aabfb-preview-image-add .aabfb-plus{
  font-size:26px;
  line-height:1;
  color:rgba(0,0,0,0.45);
  font-weight:700;
}
.aab-front-scope .aabfb-media-url{
  width:100%;
  box-sizing:border-box;
}
.aab-front-scope .aabfb-preview-media-row{
  /*
    NOTE:
    ここを display:none にすると text 等の入力UIまで消えて「タイトルだけ」に見えるため、
    フロント側では常に表示する。
  */
  display:flex;
}

/* v75: チェック項目（行 + チェックボックス） */
.aab-front-scope .aabfb-preview-check-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.aab-front-scope .aabfb-preview-check-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:10px;
}
.aab-front-scope .aabfb-preview-check-item input[type="checkbox"]{
  width:18px;
  height:18px;
}

/* ==========================================================
   FIX(front): Phone preview content vertical centering
   - User report: inside black frame, the screen looks bottom-shifted on FRONT.
   - We force the phone TD to center its contents and ensure the phone frame
     is centered regardless of earlier conflicting rules.
   - Layout structure is NOT changed.
   ========================================================== */
.aab-front-scope td.aabfb-layout-phone{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.aab-front-scope .aabfb-phone-frame{
  /* keep transform scale centered */
  transform-origin:center center !important;
  margin:auto !important;
}

.aab-front-scope .aabfb-phone-frame,
.aab-front-scope .aabfb-phone-screen,
.aab-front-scope .aabfb-phone-stage{
  /* avoid baseline/line-height offset */
  line-height:0 !important;
}

/* iframe mode: make sure inner screen has no extra padding and truly fills */
.aab-front-scope .aabfb-phone-screen.aabfb-has-iframe{
  padding:0 !important;
  overflow:hidden !important;
}

.aab-front-scope .aabfb-phone-iframe{
  display:block !important;
}

/* ==========================================================
   FIX(front): Phone preview vertical/horizontal centering
   - Ensures the phone frame is centered inside the right TD.
   - Ensures the inner screen/iframe is centered within the black frame.
   - Only CSS overrides (no DOM/layout changes).
   ========================================================== */

/* Center the phone frame inside the right cell */
.aab-front-scope td.aabfb-layout-phone{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle !important; /* for table fallback */
}

/* Make the black frame a flex box so the white screen cannot appear bottom-shifted */
.aab-front-scope .aabfb-phone-frame{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* White screen fills available area inside the frame and stays centered */
.aab-front-scope .aabfb-phone-screen{
  margin:auto !important;
}

/* Iframe stage should fill and center */
.aab-front-scope .aabfb-phone-screen.aabfb-has-iframe{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.aab-front-scope .aabfb-phone-stage{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
}
.aab-front-scope .aabfb-phone-iframe{
  width:100% !important;
  height:100% !important;
}

/* ==========================================================
   FIX(front): Phone preview vertical/horizontal centering
   - Ensures the phone frame is centered inside the right TD.
   - Ensures the inner screen/iframe is centered within the black frame.
   - Only CSS overrides (no DOM/layout changes).
   ========================================================== */

/* 1) Right column cell centers the phone frame */
.aab-front-scope td.aabfb-layout-phone{
  display:flex !important;
  align-items:center !important;        /* vertical center */
  justify-content:center !important;    /* horizontal center */
}

/* 2) The black frame itself becomes a centering container */
.aab-front-scope .aabfb-phone-frame{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
}

/* 3) The white screen stretches to available space without drifting */
.aab-front-scope .aabfb-phone-screen{
  margin:0 !important;
}

/* 4) Iframe mode: make sure stage & iframe fill, no padding drift */
.aab-front-scope .aabfb-phone-screen.aabfb-has-iframe{
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.aab-front-scope .aabfb-phone-stage{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.aab-front-scope .aabfb-phone-iframe{
  width:100% !important;
  height:100% !important;
  display:block !important;
}


/* ===== Complete page (no-AJAX HTML) ===== */
.aab-front-scope .aabfb-complete-block{
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.02);
}
.aab-front-scope .aabfb-complete-block-title{
  font-weight: 700;
  margin-bottom: 6px;
}
.aab-front-scope .aabfb-complete-step-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.aab-front-scope .aabfb-complete-step-row:last-child{ border-bottom: none; }
.aab-front-scope .aabfb-complete-step-link{
  text-decoration: none;
}
.aab-front-scope .aabfb-complete-step-check{
  min-width: 18px;
  text-align: right;
  font-weight: 700;
}


/* FIXED42CG: HTML編集モーダルのスマホ枠が右寄りになるケース対策 */
#aab-file-editor-preview-scope .aabfb-layout-phone{ display:flex !important; align-items:center !important; justify-content:center !important; }
#aab-file-editor-preview-scope .aabfb-phone-frame{ display:block !important; margin:0 auto !important; }

/* FIXED42CS+: HTML編集モーダル(#aab-file-editor-preview-scope)
 * - フロント用のvh/aspect-ratio制限で「正方形寄り」にならないようにしつつ
 * - スマホ枠は少し横幅を広げ、縁(ベゼル)を少しだけ細くする
 */
#aab-file-editor-preview-scope{ height:100%; }
#aab-file-editor-preview-scope .aabfb-layout-phone{ display:flex !important; align-items:center !important; justify-content:center !important; }
/* 外枠：高さに合わせ、比率は少しワイドに（横を増やす） */
#aab-file-editor-preview-scope .aabfb-phone-frame,
#aab-file-editor-preview-scope .aabfb-layout-phone .aabfb-phone-frame{
  max-width:none !important;
  max-height:none !important;
  width:auto !important;
  height:100% !important;
  aspect-ratio: 10 / 19.5 !important;
  padding:7px !important; /* 縁を少し細く */
  border-radius:20px !important;
}

#aab-file-editor-preview-scope .aabfb-phone-frame.is-landscape,
#aab-file-editor-preview-scope .aabfb-layout-phone .aabfb-phone-frame.is-landscape{
  aspect-ratio: 19.5 / 9 !important;
}
/* 画面：余白を減らして実表示領域を確保 */
#aab-file-editor-preview-scope .aabfb-phone-screen,
#aab-file-editor-preview-scope .aabfb-layout-phone .aabfb-phone-screen{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:14px !important;
}
/* iframe：必ず画面にフィット */
#aab-file-editor-preview-scope iframe.aabfb-phone-iframe{ width:100% !important; height:100% !important; display:block !important; }


/* =============================================================
 * FIXED42CQ+: プレビュー（ビルドフォーム編集 / フロント）を同一レイアウトに統一
 * - 既存CSSの 40vh/50vh/260px/aspect-ratio などの制限が残ると「正方形寄り」になりやすい
 * - スケール/縦横は JS（aab-front-phone-preview.js）側が担当するため、ここでは制限を解除
 * 対象:
 *  - フロント: .aab-front-build-form-popup
 *  - 管理: #aabfb-preview-modal
 * ============================================================= */

.aab-front-preview-scope .aabfb-layout-phone,
#aabfb-preview-modal .aabfb-layout-phone{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.aab-front-preview-scope .aabfb-phone-frame,
#aabfb-preview-modal .aabfb-phone-frame{
  max-width:none !important;
  max-height:none !important;
}

.aab-front-preview-scope .aabfb-layout-phone .aabfb-phone-screen,
#aabfb-preview-modal .aabfb-layout-phone .aabfb-phone-screen{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
}

/* FIXED42CT_SYNC: HTML編集モーダルのスマホ枠と「全く同じ」見た目/寸法に統一
 * - 対象: ビルドフォーム編集プレビュー(#aabfb-preview-modal) / フロントプレビュー(.aab-front-build-form-popup)
 * - 目的: 正方形寄り/右端クリップ/ベゼル差異を無くし、HTML編集側と同じ枠・同じ出し方にする
 */
.aab-front-preview-scope .aabfb-layout-phone,
#aabfb-preview-modal .aabfb-layout-phone{
  height:62vh !important;
  min-height:360px !important;
}

/* 右カラム幅もHTML編集と同等に（細長くなりすぎないように） */
.aab-front-preview-scope col.aabfb-layout-col-right,
#aabfb-preview-modal col.aabfb-layout-col-right{
  width:40% !important;
}
.aab-front-preview-scope td.aabfb-layout-phone,
#aabfb-preview-modal td.aabfb-layout-phone{
  min-width:420px;
}

.aab-front-preview-scope .aabfb-phone-frame,
#aabfb-preview-modal .aabfb-phone-frame{
  /* Fit-to-width: 横/縦の切替は幅固定で比率を入れ替えて高さを自動算出 */
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio: 10 / 19.5 !important;
  padding:7px !important;
  border-radius:20px !important;
  overflow:hidden !important;
}

.aab-front-preview-scope .aabfb-phone-frame.is-landscape,
#aabfb-preview-modal .aabfb-phone-frame.is-landscape{
  /* portrait(10/19.5) の逆数 */
  aspect-ratio: 19.5 / 10 !important;
}

.aab-front-preview-scope .aabfb-phone-screen,
#aabfb-preview-modal .aabfb-phone-screen{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

.aab-front-preview-scope iframe.aabfb-phone-iframe,
#aabfb-preview-modal iframe.aabfb-phone-iframe{
  width:100% !important;
  height:100% !important;
  display:block !important;
}


/* URL入力（画像） */
.aab-front-scope .aabfb-preview-image-url-row{
  margin-top:10px;
}
.aab-front-scope .aabfb-preview-image-url-input{
  width:100%;
  max-width:520px;
  padding:10px 12px;
  box-sizing:border-box;
  border:1px solid #cfcfcf;
  border-radius:10px;
  background:#f2f2f2;
  color:#111;
  outline:none;
}
.aab-front-scope .aabfb-preview-image-url-input::placeholder{
  color:#777;
}



/* vFIX data field ui */
.aab-front-scope .aabfb-data-row{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.aab-front-scope .aabfb-data-pick{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.aab-front-scope .aabfb-data-browse{
  background:#2f6fed;
  color:#fff;
  border:0;
  border-radius:8px;
  padding:7px 12px;
  font-size:12px;
  line-height:1.2;
  min-width:auto;
  box-shadow:none;
}
.aab-front-scope .aabfb-data-browse:hover{ opacity:.92; }
.aab-front-scope .aabfb-file-name{
  font-size:12px;
  color:#333;
  line-height:1.4;
  word-break:break-all;
}
.aab-front-scope .aabfb-data-folder .aabfb-input-folder{
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  padding:10px;
  box-sizing:border-box;
}
.aab-front-scope .aabfb-current-step-title{
  display:inline-block;
  min-width:120px;
  margin-right:10px;
  font-size:12px;
  color:#444;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
.aab-front-scope .aabfb-preview-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.aab-front-scope .aabfb-preview-nav .aabfb-preview-counter{
  margin:0 4px;
}


/* FIXED74_STEPNAV_LAYOUT: TD余白を復元し、縦中央配置を維持したままタイトル左/ボタン右 */
.aab-front-scope td.aabfb-layout-nav{
  padding:0 2% !important;
  margin:0 !important;
  vertical-align:middle !important;
}
.aab-front-scope .aabfb-layout-nav .aabfb-preview-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
}
.aab-front-scope .aabfb-current-step-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  font-size:12px !important;
  line-height:1.2 !important;
  color:#6b7280 !important;
  font-weight:600 !important;
  align-self:center !important;
}
.aab-front-scope .aabfb-preview-nav #aabfb-preview-prev{
  margin-left:auto !important;
}
.aab-front-scope .aabfb-preview-nav .aab-front-btn,
.aab-front-scope .aabfb-preview-nav .aabfb-preview-counter{
  margin:0 !important;
  align-self:center !important;
}


/* FIXED76_STEPNAV_INNER_TABLE: 4段目を中テーブル化して縦中央/左右配置を安定化 */
.aab-front-scope td.aabfb-layout-nav{padding:0 2% !important;vertical-align:middle !important;}
.aab-front-scope .aabfb-nav-table{width:100%;height:100%;border-collapse:collapse;table-layout:fixed;}
.aab-front-scope .aabfb-nav-title-cell,.aab-front-scope .aabfb-nav-actions-cell{vertical-align:middle;padding:0;}
.aab-front-scope .aabfb-nav-title-cell{text-align:left;}
.aab-front-scope .aabfb-nav-actions-cell{text-align:right;white-space:nowrap;width:1%;}
.aab-front-scope .aabfb-nav-title-cell .aabfb-preview-nav{display:block !important;margin:0 !important;padding:0 !important;}
.aab-front-scope .aabfb-nav-actions-cell .aabfb-preview-nav-actions{display:inline-block;vertical-align:middle;margin:0;padding:0;white-space:nowrap;}
.aab-front-scope .aabfb-current-step-title{display:block;margin:0 !important;padding:0 !important;text-align:left !important;font-size:12px !important;line-height:1.2 !important;color:#6b7280 !important;font-weight:600 !important;}
.aab-front-scope .aabfb-preview-nav-actions .aab-front-btn,.aab-front-scope .aabfb-preview-nav-actions .aabfb-preview-counter{display:inline-block;vertical-align:middle;margin:0 0 0 6px !important;}
.aab-front-scope .aabfb-preview-nav-actions #aabfb-preview-prev{margin-left:0 !important;}


/* FIXED77_STEPNAV_SPEC: 4段目は1行2列テーブル、左右50%、左右余白のみ */
.aab-front-scope td.aabfb-layout-nav{padding:0 2% !important;vertical-align:middle !important;}
.aab-front-scope .aabfb-nav-table{width:100% !important;height:100% !important;border-collapse:collapse !important;table-layout:auto !important;}
.aab-front-scope .aabfb-nav-table tbody,.aab-front-scope .aabfb-nav-table tr{width:100% !important;height:100% !important;}
.aab-front-scope .aabfb-nav-title-cell,.aab-front-scope .aabfb-nav-actions-cell{width:50% !important;vertical-align:middle !important;padding:0 2% !important;}
.aab-front-scope .aabfb-nav-title-cell{text-align:left !important;}
.aab-front-scope .aabfb-nav-actions-cell{text-align:right !important;white-space:nowrap !important;}
.aab-front-scope .aabfb-current-step-title-wrap{width:100% !important;overflow-x:auto !important;overflow-y:hidden !important;margin:0 !important;padding:0 !important;}
.aab-front-scope .aabfb-current-step-title{display:block !important;width:100% !important;margin:0 !important;padding:0 !important;text-align:left !important;font-size:12px !important;line-height:1.2 !important;color:#6b7280 !important;font-weight:600 !important;white-space:nowrap !important;box-sizing:border-box !important;}
.aab-front-scope .aabfb-nav-actions-cell .aabfb-preview-nav-actions{display:inline-block !important;vertical-align:middle !important;margin:0 !important;padding:0 !important;white-space:nowrap !important;}
.aab-front-scope .aabfb-preview-nav-actions .aab-front-btn,.aab-front-scope .aabfb-preview-nav-actions .aabfb-preview-counter{display:inline-block !important;vertical-align:middle !important;margin:0 0 0 6px !important;}
.aab-front-scope .aabfb-preview-nav-actions #aabfb-preview-prev{margin-left:0 !important;}


/* FIXED78_STEPNAV_TEXT_AND_BORDER: タイトル文字の装飾と中テーブルの余計な線を除去 */
.aab-front-scope .aabfb-nav-table,
.aab-front-scope .aabfb-nav-table tbody,
.aab-front-scope .aabfb-nav-table tr,
.aab-front-scope .aabfb-nav-table td,
.aab-front-scope .aabfb-nav-title-cell,
.aab-front-scope .aabfb-nav-actions-cell,
.aab-front-scope .aabfb-current-step-title-wrap{
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
.aab-front-scope .aabfb-current-step-title{
  font-size:13px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  color:#5a3b1f !important;
  letter-spacing:.02em !important;
}

.aabfb-step-title{ color:#7a3b2e; font-weight:700; }