/* =====================================================
   無料登録ページ（form.html）固有スタイル
   共通トークン/ヘッダー/フッター/closing-cta は style.css + home.css を継承。
   ライブ offeeer.jp/form の構成に準拠：
     ヒーロー（緑見出し「まずは30秒で無料登録」＋白背景フォーム）→ closing-cta → フッター
   ※ヒーローの緑パネル型（index.html）とは別物。白背景＋枠線入力＋ゴールド送信ボタン。
   ===================================================== */

/* 短いページのため、ビューポートが高くてもフッターを最下部に固定し
   html の緑背景（#32b470）がフッター下に覗くのを防ぐ（stickyフッター）。
   register.css は form.html と thanks.html でのみ読み込まれる。どちらも短いページなので
   このstickyフッターが要る。他ページには影響しない。 */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

.rf { background: var(--white); padding: 150px 0 64px; }
.rf-inner { max-width: 460px; margin: 0 auto; }

/* 見出しはライブ /form に忠実化。実測: P fs=40px / weight=400 / color=rgb(50,180,112)=#32b470。
   （当初は白背景AA確保で #1e784a にしていたが、小池さんフィードバックでライブ準拠の明るい緑に戻した） */
.rf-title { font-size: 2.5rem; font-weight: 400; text-align: center; color: #32b470; letter-spacing: 0.01em; margin: 0 0 44px; }

/* フォーム */
.rf-form .form-group { margin-bottom: 18px; display: flex; flex-direction: column; }
.rf-form label { font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--text-color); }
.rf-form .req { color: #e53935; margin-left: 3px; }
/* 任意項目の注記。必須の * より目立たせない */
.rf-form .opt { font-size: 0.72rem; font-weight: 500; color: #8a8f8c; margin-left: 4px; }
.rf-form input[type="text"],
.rf-form input[type="email"],
.rf-form input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  background: #fff;
  font-family: inherit;
  transition: border-color 0.2s ease;
}
.rf-form input:focus { outline: none; border-color: #32b470; }

/* 同意文はライブ準拠でグレー。実測: リンク「プライバシーポリシー」も本文も #333333（緑ではない）。 */
.rf-consent { text-align: center; font-size: 0.82rem; line-height: 1.7; margin: 22px 0 20px; color: #333; }
.rf-consent a { color: #333; text-decoration: underline; margin-right: 2px; }

.rf-form .btn-submit {
  width: 100%;
  padding: 14px;
  background: var(--accent-color);
  color: #fff;
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease-in-out;
}
.rf-form .btn-submit:hover { background: #fff; color: var(--accent-color); border-color: var(--accent-color); }

/* ハニーポット（bot判別用の囮入力）。
   display:none / visibility:hidden を避けるボットがいるので、画面外へ飛ばして隠す。
   top を指定しないので縦位置は本来の位置のまま。左に飛ばすだけでは横スクロールバーは出ない。 */
.rf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* エラー表示。赤は既存の必須マーク（.req）と同じ #e53935 に合わせる。 */
.rf-form .rf-field-error {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #e53935;
}
.rf-form .rf-error-summary {
  display: block;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #e53935;
  border-radius: var(--radius-md);
  background: #fdecea;
  font-size: 0.83rem;
  line-height: 1.7;
  color: #b3261e;
}
/* hidden 属性を確実に効かせる（上の display 指定に負けないよう後ろに置く） */
.rf-form .rf-field-error[hidden],
.rf-form .rf-error-summary[hidden] { display: none; }

.rf-form input[aria-invalid="true"] { border-color: #e53935; }

/* 送信中はボタンを押せなくする。押せないことが見た目でも分かるようにする。 */
.rf-form .btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.rf-form .btn-submit:disabled:hover {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

/* =====================================================
   登録完了ページ（thanks.html）
   .rf の白背景・stickyフッターをそのまま流用する。
   Studioプレビュー版Contactformの構成に準拠：握手イラスト→見出し→説明文→詳細ヒアリングフォーム（Notion埋め込み）。
   ===================================================== */
.rf-thanks { max-width: 640px; margin: 0 auto; text-align: center; }
.rf-thanks-illust { display: block; width: 90px; height: auto; margin: 0 auto 24px; }
.rf-thanks-title { font-size: 1.7rem; font-weight: 700; color: var(--text-color); letter-spacing: 0.01em; margin: 0 0 28px; }
.rf-thanks-text { font-size: 0.95rem; line-height: 2; color: var(--text-color); margin: 0 0 16px; text-align: left; }

/* 詳細ヒアリングフォーム（Notion埋め込み）。フォーム全項目が概ね見える高さに固定。 */
.rf-thanks-form { margin-top: 36px; }
.rf-thanks-iframe {
  width: 100%;
  height: 1400px;
  border: none;
  border-radius: var(--radius-md);
  display: block;
}
.rf-thanks-fallback { font-size: 0.8rem; margin: 10px 0 0; }
.rf-thanks-fallback a { color: #333; text-decoration: underline; }

/* レスポンシブ */
@media (max-width: 768px) {
  .rf { padding: 116px 0 48px; }
  .rf-title { font-size: 1.9rem; margin-bottom: 34px; }
  .rf-inner { max-width: 100%; }
  .rf-thanks-title { font-size: 1.3rem; }
  .rf-thanks-iframe { height: 1700px; }
}