/*
  UTAGE 埋込フォーム用 CSS (jinzai-child)
  =============================================================
  配置:  theme/jinzai-child/style.utage.css
         → サーバ /home/jinzai-co/www/test/wp-content/themes/jinzai-child/
  読込:  functions.snippet.php で is_page('contact') 条件 enqueue
         → /contact/ ページのみ適用 (他ページへの影響ゼロ)
  対象:  UTAGE 埋め込み iframe を包む .utage-embed-scope 内の layout
  前提:  iframe HTML 属性は scrolling="no" (投稿 171 本文で設定)

  バージョン: v7.6 (2026-07-19 昼・desktop padding-bottom 70 → 100px にさらに増量・呼吸感強化)
  引き継ぎ元セッション: zaimu_utage
  対応する引き継ぎ仕様書: docs/spec/UTAGE移行/2026-07-19_utage-hp-embed-handoff.md

  絶対条件: 必ず test.jinzai-co.jp で先に反映・Mayu OK 出るまで本番非反映

  ⚠️ !important 使用理由:
    既存 assets/css/contact.css の `.form_style iframe { height: 100%; }` (specificity 0,1,1) が
    同じ specificity で後読み勝ちのため iframe が高さゼロになる (2026-07-19 実測発見)。
    親 #form.form_style 内に .utage-embed-scope が入る構造のため、safest は !important 指定。

  ⚠️ iframe 高さ実測ルール:
    UTAGE は cross-origin なので postMessage 未対応 = 自動リサイズ不可。
    現在の form 内容 (会社名/氏名/フリガナ/メール/電話/分類/内容/同意/reCAPTCHA/submit) に
    ジャストフィットする実測値を固定指定 (500px viewport 実測ベース)。
    UTAGE 側でフィールド増減があった場合は再測定 → 本ファイル更新。
*/


/* --------------------------------------------------------------
   1. iframe wrapper: .utage-embed-scope
   -------------------------------------------------------------- */

.utage-embed-scope {
  max-width: 996px !important;   /* 親 .sec-contact.inner と同じ幅 */
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .utage-embed-scope {
    padding: 0 8px !important;
  }
}


/* --------------------------------------------------------------
   2. iframe 本体: form 実測ジャストフィット高さ (viewport 別)
   ------------------------------------------------------------
   UTAGE の form は viewport 幅で layout が変化するため段階的に指定:
     desktop (>=769px):    form 短い (姓/名 横並び + フィールド全幅小さめ)  → 1050px
     tablet-mobile (base): form 中間 (フィールドは全幅・reCAPTCHA 位置変動) → 1680px
     mobile (<=480px):     姓/名 縦積みで縦長                                → 1880px
     small-mobile (<=375): さらに縦長                                        → 1980px

   前提: iframe 属性 scrolling="no" (投稿 171 で設定済み)
        UTAGE cross-origin のため postMessage 未対応 = 自動リサイズ不可
   -------------------------------------------------------------- */

.utage-embed-scope iframe {
  width: 100% !important;
  height: 1680px !important;          /* tablet-mobile ~500-768px */
  border: 0 !important;
  display: block !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* Desktop: form 短めなので iframe も低く (submit の下に少し余白 → reCAPTCHA → 緑エリア) */
@media (min-width: 769px) {
  .utage-embed-scope iframe {
    height: 1300px !important;
  }
}

/* Mobile: 姓/名 縦積みで縦長 */
@media (max-width: 480px) {
  .utage-embed-scope iframe {
    height: 1880px !important;
  }
}

/* Small mobile */
@media (max-width: 375px) {
  .utage-embed-scope iframe {
    height: 1980px !important;
  }
}


/* --------------------------------------------------------------
   3. .form_style: iframe 直上のマージン (説明文 ↓ フォーム間)
   -------------------------------------------------------------- */

.form_style {
  margin-top: 30px !important;
}

@media (max-width: 480px) {
  .form_style {
    margin-top: 20px !important;
  }
}


/* --------------------------------------------------------------
   4. .sec-contact: セクション全体の上下 padding
   ------------------------------------------------------------
   上=150px は本番相当 (タイトル banner → 説明文)。
   下=30px を基準、desktop のみ 70px に増量 (下記 min-width 769px):
     desktop は iframe 内側空白と合わせて緑エリアとの余白が呼吸感を持つ調整。
     mobile はギャップを詰めて全体をコンパクトに。
   ユーザー要望履歴:
     v6 (07-19 朝): 120px (拡大)
     v7 (07-19 昼): 60px (半減「まだ広い」)
     v7.2 (07-19 昼): 30px (さらに半減「本番相当」)
     v7.5 (07-19 昼): desktop のみ 70px (「PC もう少し広く」)
     v7.6 (07-19 昼): desktop 100px (「70 だと変化感が薄い」)
   -------------------------------------------------------------- */

.sec-contact {
  padding-top: 150px !important;
  padding-bottom: 30px !important;
}

/* Desktop: reCAPTCHA と緑エリアの間に呼吸感 */
@media (min-width: 769px) {
  .sec-contact {
    padding-bottom: 100px !important;
  }
}

@media (max-width: 480px) {
  .sec-contact {
    padding-top: 80px !important;
    padding-bottom: 20px !important;
  }
}