/* ═══════════════════════════════════════════════
   審査結果ページ 個別調整
   ═══════════════════════════════════════════════ */


/* ───────────────────────────────────────────────
   1. 余白の基本ルール

   このページの区切り線は「見出しを囲む枠」として使われている。
       線
       見出し      ← 枠の中。詰める
       線
       本文        ← 枠の外。離す

   なので「隣に何が来るか」で余白を決める。
   個別に足していくと必ず抜けが出るので、組み合わせで指定する。
   ─────────────────────────────────────────────── */

/* 見出しの下に本文・画像が来る → 離す */
.el-wrap.fn-el-subhead + .el-wrap.fn-el-text,
.el-wrap.fn-el-subhead + .el-wrap.fn-el-image { padding-top: 26px !important; }

/* 見出しが続けて並ぶ → くっつけない
   UTAGE側の fn-pt-10 などより優先させる（!important が必要） */
.el-wrap.fn-el-subhead + .el-wrap.fn-el-subhead { padding-top: 18px !important; }

/* カウントダウンの上の見出し（「動画視聴期限まであと」）も離す */
.el-wrap.fn-el-subhead + .el-wrap.fn-el-countdown { padding-top: 12px !important; }

/* 線の下に本文・画像が来る（＝枠の外） → 離す */
.el-wrap.fn-el-divider + .el-wrap.fn-el-text,
.el-wrap.fn-el-divider + .el-wrap.fn-el-image { padding-top: 26px !important; }

/* 線の下の見出しが「線で閉じられていない」＝枠ではない → 線から少し離す
   （枠の中の見出しは、上下を線で挟むデザインなので詰めたまま） */
.el-wrap.fn-el-divider + .el-wrap.fn-el-subhead:not(:has(+ .el-wrap.fn-el-divider)) {
  padding-top: 18px !important;
}

/* 本文の下に線が来る（＝次の枠が始まる） → 離す */
.el-wrap.fn-el-text + .el-wrap.fn-el-divider { padding-top: 46px !important; }

/* 画像どうしが続く → くっつけない */
.el-wrap.fn-el-image { padding-bottom: 12px !important; }

/* 画像・本文の下にボタンが来る → しっかり離す */
.el-wrap.fn-el-image + .el-wrap.fn-el-button,
.el-wrap.fn-el-text + .el-wrap.fn-el-button { padding-top: 34px !important; }

/* 見出しの下にボタンが来る → 離す */
.el-wrap.fn-el-subhead + .el-wrap.fn-el-button { padding-top: 20px !important; }

/* ボタンが並ぶ → 間を空ける（[6]） */
.el-wrap.fn-el-button { padding-bottom: 14px !important; }

/* ボタンの下に本文が来る → 離す */
.el-wrap.fn-el-button + .el-wrap.fn-el-subhead { padding-top: 26px !important; }


/* ───────────────────────────────────────────────
   2. 個別の指示
   ─────────────────────────────────────────────── */

/* [1] 動画を開いてから10秒後に表示させる部分 */
.reveal-after-video {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .5s ease;
  pointer-events: none;
}
.reveal-after-video.is-shown {
  opacity: 1;
  max-height: none;
  overflow: visible;
  pointer-events: auto;
}

/* [9] 「審査フォームのご提出／ありがとうございました。」を1段階太く */
.el-wrap.fn-el-subhead:nth-of-type(1) p,
.el-wrap.fn-el-subhead:nth-of-type(1) span { font-weight: 700; }

/* [2] 「※繰り返しになりますが…」を太字に */
.tweak-bold-note p,
.tweak-bold-note span { font-weight: 700; }

/* [4] 「✅AIエージェントを…」を1段階太く */
.tweak-bold-list p,
.tweak-bold-list span { font-weight: 600; }

/* [3] 「▼講座の内容▼」は "下" に余白 */
.tweak-gap-bottom-head { padding-bottom: 34px !important; }

/* [5][7] 見出しを囲む枠の「上の線」に余白（枠ごと下にずらす）
   サポート内容 ／ ▼以下のいずれかをタップしてください ／ 嬉しいご報告 */
.tweak-gap-top { padding-top: 46px !important; }

/* [8] 「▲フォーム提出をする▲」の下に余白 */
.el-wrap.fn-el-button.tweak-gap-bottom { padding-bottom: 70px !important; }


/* ───────────────────────────────────────────────
   3. スマホのとき
   ブレイクポイント 720px は UTAGE本物のCSSに合わせた値
   ─────────────────────────────────────────────── */
.br-sp { display: none; }

@media (max-width: 720px) {
  .br-sp { display: inline !important; }

  .tweak-gap-top { padding-top: 34px !important; }
  .tweak-gap-bottom-head { padding-bottom: 26px !important; }
  .el-wrap.fn-el-button.tweak-gap-bottom { padding-bottom: 50px !important; }

  .el-wrap.fn-el-subhead + .el-wrap.fn-el-text,
  .el-wrap.fn-el-subhead + .el-wrap.fn-el-image,
  .el-wrap.fn-el-divider + .el-wrap.fn-el-text,
  .el-wrap.fn-el-divider + .el-wrap.fn-el-image { padding-top: 20px !important; }

  .el-wrap.fn-el-text + .el-wrap.fn-el-divider { padding-top: 34px !important; }

  .el-wrap.fn-el-image + .el-wrap.fn-el-button,
  .el-wrap.fn-el-text + .el-wrap.fn-el-button { padding-top: 26px !important; }
}