@charset "UTF-8";
/**
 * form.css — フォームを埋め込んだ2ページ共用（お問い合わせ /contact/ ・レンタル申込 /apply/）
 *
 * 読み込み条件は functions.php セクション2の $kennet_under に
 *   'contact' => 'form'
 *   'apply'   => 'form'
 * の2スラッグで登録する（common.css の後）。部品は template-parts/form-embed.php。
 *
 * ■ カンプについて
 *   この2ページはカンプが無い（2026-10-07 ケンネット様のご依頼で追加）。ヒーロー帯・パンくずは
 *   common.css の共通部品を流用し、新しい装飾は増やさない。
 *
 * ■ 枠の高さ（2026-10-07 CEO ご指示「フォームの長さに合わせる」）
 *   フォーム側に中身の高さを親ページへ伝える仕組みが無いため、枠の高さは実測値で決め打ちする。
 *   フォームは枠の幅 722〜724px を境に1列⇔2列が切り替わり、1列では幅が狭いほど長くなる。
 *   実測（1ページ目・2026-10-07・枠の幅：高さ）
 *     レンタル申込 320:6460 400:5773 560:5300 720:5123 ／ 741〜1120:3751〜3874
 *     お問い合わせ 320:4103 400:3715 560:3539 720:3537 ／ 741〜1120:2713〜2906
 *   2列は 2026-10-09 に枠の幅を最大 850px にしたため測り直した（805〜850:レンタル申込 3660・お問い合わせ 2692。
 *   レンタル申込は「次へ」で入力エラーが全部出た時 3792）。
 *   各帯の最大値に少し足した値を置く。確認画面などの短い段では下に余白が出る。
 *   中身が枠より長くなった時（条件で項目が増えた時など）は枠の中でスクロールできる（切れない）。
 *   フォームを差し替えた時は高さを測り直すこと。
 */

/* パンくずの直下にフォームを置くため、このページだけ .section の上余白を外す（2026-10-07 CEO ご指示） */
.form-page.section {
  padding-top: 0;
}

.form-embed__note {
  margin-bottom: 1.6rem;
  font-size: clamp(1.3rem, .9722vw, 1.4rem); /* パンくずと同じ。1440px で 14px */
  line-height: 1.6;
  text-align: center;
}
.form-embed__note a {
  color: var(--color_main);
  text-decoration: underline;
}

/* =============================================================
   枠の幅と位置（2026-10-07 CEO ご指示「SP で form を横いっぱいに」「ドロップダウンの文字のはみ出しを直す」）

   どちらもフォーム（おもてなしSuite・別ドメイン）の中の作りで、こちらの CSS は中に効かない。
   よって枠の幅と位置だけで調整する。実測（2026-10-07・数字はすべて枠＝iframe の幅）
     ・850px 以下：form が全幅で左右に余白 40px（その内側に白い面の余白 14px）。上の帯は無し。
       856px 以上：form が最大 800px で中央寄せ、上に灰色の帯 80px。
     ・722px 以下で1列、724px 以上で2列。
     ・「クリックして直接入力をお願いします」が1行に収まるのは入力欄の幅 306px 以上
       （1列は枠の幅 448px 以上、2列は 約788px 以上。2列の 724〜787px は欄が細く必ずはみ出す）。
     ・856px 以上の作りは中身が枠より必ず 80px 長く（上の帯＋最小の高さ＝画面の高さ）、枠の高さを
       どう決めても枠の中だけが 80px スクロールする。850px 以下は中身どおりの長さでスクロールしない。
   やり方
     ・枠を左右に 40px ずつ広げ、はみ出した分を .form-embed__body で隠す（フォームの左右の余白が
       見えなくなる）。1023px 以下は .form-embed__body を画面の端まで広げる。
     ・枠の幅は最大 850px（2026-10-09 CEO ご指摘「フォームだけが灰色の背景の高さ分スクロールする」）。
       それより広い画面では枠を中央に置き、周りは .form-embed__body の灰色で埋める。
       1024px 以上は上に 80px の灰色を足し、これまでの帯の見た目を残す。
     ・画面幅 740px 以上は2列。
     ・368〜739px は枠を最大 720px にして1列のまま中央に置く（2列の細い幅を避ける）。
     ・隠すのは form の余白 40px まで。白い面の余白 14px は残す（見出しと「次へ」が画面の端に付かないように・
       2026-10-07 CEO ご指示）。367px 以下だけは欄の幅を保つため 44px 隠す（端から 10px）。
   フォームの余白や切り替え幅は先方の作り次第で、フォームを差し替えた時は測り直すこと。
   ============================================================= */
.form-embed__body {
  overflow: hidden;
  background: #f4f4f4; /* フォームの地の色。850px の枠の左右を同じ灰色で埋める */
}
@media (min-width: 1024px) {
  .form-embed__body { padding-top: 80px; } /* フォームの上の帯の代わり */
}
@media (max-width: 1023px) {
  .form-embed__body {
    margin-inline: calc(-1 * clamp(2rem, 2.7778vw, 4rem)); /* .section__inner の左右余白と同じ式 */
  }
}

.form-embed__frame {
  display: block;
  width: min(850px, calc(100% + 80px));
  margin-left: max(-40px, calc((100% - 850px) / 2));
  height: 3800px;
  border: 0;
  background: #f4f4f4; /* フォームの地の色。読み込み中に白い箱が出ないように */
}
.form-embed--contact .form-embed__frame { height: 2820px; }

@media (max-width: 739px) {
  .form-embed__frame {
    width: min(720px, calc(100% + 80px));
    margin-left: calc((100% - min(720px, calc(100% + 80px))) / 2);
    height: 5320px;
  }
  .form-embed--contact .form-embed__frame { height: 3640px; }
}
/* 1列は幅が狭いほど長い。下に出る灰色の余白を減らすため、幅の帯ごとに高さを決める
   （帯のいちばん狭い幅の実測に約100pxを足した値） */
@media (max-width: 559px) {
  .form-embed__frame                      { height: 5440px; }
  .form-embed--contact .form-embed__frame { height: 3670px; }
}
@media (max-width: 459px) {
  .form-embed__frame                      { height: 5560px; }
  .form-embed--contact .form-embed__frame { height: 3750px; }
}
@media (max-width: 399px) {
  .form-embed__frame                      { height: 5690px; }
  .form-embed--contact .form-embed__frame { height: 3780px; }
}
/* 367px 以下は左右 44px ずつ隠す（欄の幅を 306px 以上に保つため。見出しと「次へ」は画面の端から 10px） */
@media (max-width: 367px) {
  .form-embed__frame {
    width: calc(100% + 88px);
    margin-left: -44px;
    height: 5850px;
  }
  .form-embed--contact .form-embed__frame { height: 3810px; }
}