/* =========================================================
   sections/form.css — 無料相談フォーム（Figma フレーム "form" / 1440×1591）
   【C-2：重なり構図の absolute 解体 → 通常フロー(縦積み)／2層構造＋背景PC/SP出し分け】
   - 旧構造は全要素が absolute+% の重なり（aspect-ratio で高さ固定）。
     これを解体し、内側 .form__inner の縦積み(flex column)へ。top/left/% と aspect-ratio は撤去。
     重なりヒーロー（コピー左・イラスト右）は、absolute を残さない方針に従い
     「コピー→アピール帯→イラスト→フォーム」の素直な縦積み＋トークン余白に寄せた。
   - 背景は「外側に全幅で敷く」方式。PC/SP でファイルを出し分け（HTML の <picture>）：
       PC/タブレット(≥768)=form-bg.png / SP(≤767)=form-bg-sp.png。
       ※背景ファイルの出し分けのみ。絵柄img（__appeal/__img）は本文フローに残す（SPでも保持）。
   - 2層：外側 .form=全幅背景 / 内側 .form__inner=max1440中央寄せ＋cqw基準。
   - BP：PC ≥1024 / タブレット 768–1023 / SP ≤767（最小375）。生px禁止・トークン/%参照。
     @media / <picture> の条件式は var() 不可のため px 直書き＋トークン名（--bp-*）をコメント併記。
   ========================================================= */

/* ---- 外側：全幅の背景レイヤー ---- */
.form {
  position: relative;               /* .form__bg の配置基準 */
  background: var(--color-cream-2); /* 画像外・読込前の地色 */
  overflow: hidden;
}
/* 背景（form_bg：左下の黄三角つきクリーム）を全幅で敷く。高さは内側コンテンツ依存 */
.form__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;     /* 左下の黄三角を優先的に残す（クロップ緩和） */
  z-index: 0;
}

/* ---- 内側：中央寄せコンテンツ（bg より前面・cqw の基準） ----
   PC/タブレット：上部を2カラム（コピー左・イラスト右）にし、アピール帯を上段に
   重ねる Grid。フォームは下段フル幅。DOM順（lead→appeal→img→panel）は保持。
   SP は @media で flex column（素直な縦積み）に戻す。 */
.form__inner {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: 100%;
  max-width: var(--container-max);  /* 1440px */
  margin-inline: auto;
  padding-block: var(--space-72);
  padding-inline: var(--space-56);  /* PC 左右ガター */
  display: grid;
  grid-template-columns: 1fr;       /* イラストは absolute で抜くため1カラム */
  grid-template-areas:
    "lead"
    "appeal"
    "panel";
  row-gap: var(--space-56);
  align-items: start;               /* 上から詰めて並べる（縦中央寄せを回避） */
}
/* appeal は <picture> 包み。ラッパーを透過させ img を直接グリッド項目に */
.form__inner picture { display: contents; }

/* 上部コピー（左カラム・左寄せ） */
.form__lead {
  grid-area: lead;
  justify-self: start;
  margin: 0;
  margin-top: var(--space-88);      /* ≈88px：コピーを下げて absolute イラストと高さを揃える（完成図） */
  max-width: 60cqw;                 /* ≈797px：56px の1行目(≈779px)を1行に収める（右のイラストとは干渉しない幅） */
  font-weight: 700;
  font-size: var(--fs-2xl);         /* 56px */
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-align: left;
  color: var(--color-text);
}
/* コピーの強調色（黄）：「まずは」「を」「1つだけ相談してください。」。旧インラインstyleをクラス化 */
.form__lead-em { color: var(--color-primary); }

/* アピール帯：コピー(lead)の直下・独立行。イラストより前面（帯が手前・イラストが奥） */
.form__appeal {
  grid-area: appeal;
  justify-self: start;
  align-self: start;
  position: relative;               /* grid項目でも z-index を効かせるため */
  z-index: 2;                       /* イラスト(z-index:1)より前面 */
  width: 69.743cqw;                 /* 913px×1.1＝1004px 相当（帯のみ1.1倍） */
  max-width: none;                  /* base の max-width:100% で縮めない */
  height: auto;
}

/* 上部イラスト：absolute で帯の右端に重ねる（装飾扱い）。帯より奥（z-index下） */
.form__img {
  position: absolute;
  top: var(--space-72);             /* ≈72px：コピー上端に合わせる（微調整対象） */
  right: var(--space-56);           /* ≈56px：コンテンツ右端へ（微調整対象） */
  width: 35.138cqw;                 /* 460px×1.1＝506px 相当（1.1倍） */
  height: auto;
  z-index: 1;                       /* 帯(z-index:2)より奥＝帯が手前に重なる */
}

/* ---- CONTACT フォームブロック（下段フル幅・中央） ---- */
.form__panel {
  grid-area: panel;
  justify-self: center;
  width: 66.111cqw;                 /* 952px 相当 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);             /* 40px */
}

/* 見出し群（CONTACT 装飾＋無料相談フォーム）。deco は装飾 absolute を維持 */
.form__head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 7.778cqw;                 /* 112px（deco を上に逃がす余白） */
}
.form__deco {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-5xl);         /* 80px */
  line-height: 1;
  color: rgba(252, 203, 12, 0.2);
  white-space: nowrap;
  pointer-events: none;
}
.form__title {
  position: relative;
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-xl);          /* 42px */
  line-height: 1;
  text-align: center;
  color: var(--color-gray-dark);    /* rgb(53,53,53) */
  white-space: nowrap;
}

/* ---- 白カード（1px 枠 rgb53,53,53） ---- */
.form__card {
  align-self: stretch;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-gray-dark); /* rgb(53,53,53) */
  padding: var(--space-48) var(--space-48);   /* 50 / 51px */
  display: flex;
  flex-direction: column;
}

/* ハニーポット（botよけ）：画面外に退避して人間には見えなくする。
   display:none だと一部botに見抜かれるため、位置で隠す。 */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__field { display: flex; flex-direction: column; }
.form__label {
  display: flex;                    /* ラベル文言＋バッジを横並び */
  align-items: center;
  gap: var(--space-8);              /* ラベル↔バッジ間 */
  font-weight: 700;
  font-size: var(--fs-sm);          /* 16px */
  line-height: 1.7;
  color: var(--color-gray-dark);    /* rgb(53,53,53) */
  margin-bottom: var(--space-8);    /* Label→Input ≈10px */
}

/* 必須/任意バッジ（ラベル右・角丸・白文字・小さめ） */
.form__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--space-4);
  font-weight: 700;
  font-size: var(--fs-xs);          /* 12px（小さめ） */
  line-height: 1;
  color: var(--color-white);
}
.form__badge--required { background: var(--color-required); } /* オレンジ */
.form__badge--optional { background: var(--color-optional); } /* グレー */
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  background: var(--color-field);   /* rgb(250,250,250) */
  box-shadow: inset 0 0 0 1px var(--color-gray-line); /* rgb(207,207,207) */
  border: none;
  outline: none;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: var(--fs-sm);          /* 14px */
  color: var(--color-text);
  padding: 0 var(--space-16);       /* 左18px 相当 */
}
.form__input {
  height: 3.611cqw;                 /* 52px */
}

/* プルダウン（select）：既存 input と同体裁＋右端に下向き矢印（データURI・グレー） */
.form__select {
  height: 3.611cqw;                 /* input と同じ 52px */
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-40);   /* 右矢印と文字の重なり回避 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23858585' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  cursor: pointer;
}
/* 未選択（プレースホルダ「選択してください」）はグレー、選択後は通常テキスト色 */
.form__select:has(option[value=""]:checked) { color: var(--color-gray-ph); }
.form__textarea {
  height: 9.722cqw;                 /* 140px */
  padding-top: var(--space-16);
  resize: none;
  line-height: 1.6;
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--color-gray-ph); } /* rgb(133,133,133) */

/* フィールド間隔（Input下端→次Label ≈23px） */
.form__field + .form__field { margin-top: var(--space-24); }

/* フリーメール拒否エラーメッセージ（メール欄直下・赤字） */
.form__error {
  margin-top: var(--space-8);   /* 入力欄との間隔（トークン活用） */
  color: #e53e3e;               /* エラー赤 */
  font-size: 14px;              /* 14px程度（既存トークンに14pxは無いため実px） */
}

/* プライバシーポリシー同意（チェックボックス＋ラベル。ボタン前に配置） */
.form__agree {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
}
.form__agree-check {
  width: var(--space-16);
  height: var(--space-16);
  flex: none;
  cursor: pointer;
}
.form__agree-label {
  font-weight: 400;
  font-size: var(--fs-sm);          /* 16px */
  line-height: 1.7;
  color: var(--color-gray-dark);    /* rgb(53,53,53) */
  cursor: pointer;
}
/* 「プライバシーポリシー」部分（リンク・下線＋オレンジ） */
.form__policy-link {
  color: var(--color-link);
  text-decoration: underline;
}

/* CTA ボタン（radius47.706） */
.form__btn {
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 5.972cqw;                 /* 86px */
  margin-top: var(--space-40);      /* 43px */
  border-radius: 3.313cqw;          /* 47.706px */
  background: var(--color-primary);
  box-shadow:
    inset -0.110cqw -0.147cqw 0.226cqw 0 rgb(141,54,22),
    0.113cqw 0.113cqw 0.758cqw 0 rgba(255,255,255,0.19);
  font-weight: 600;
  font-size: var(--fs-lg);          /* 32px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
}
.form__btn-arrow {
  width: 1.7cqw;
  height: auto;
  fill: currentColor;
  flex: none;
}

/* =========================================================
   レスポンシブ（solution / price / problem / after / example / question と同じ型）
   ※ @media は var() 不可のため px 直書き＋トークン名をコメント併記。
   ========================================================= */

/* ---- タブレット以下（<1024＝--bp-tablet 未満）：nowrap 見出し・ボタンの折返し
       ＋ absolute 重ねを解除して縦積み（タブレットは重ねが窮屈なため SP 同様に落とす） ---- */
@media (max-width: 1023px) {
  .form__title { white-space: normal; }
  /* ボタン文言が長く、狭幅で1行に収まらないため高さ auto＋padding＋折返し */
  .form__btn {
    height: auto;
    padding-block: var(--space-16);
    white-space: normal;
  }

  /* Grid を解除して素直な縦積み（DOM順 lead→appeal→img→panel） */
  .form__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
  }
  /* イラストの absolute（PCの重ね）を解除してフローに戻す */
  .form__img {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    width: 70%;
  }
  /* 上部要素：全幅寄り（Grid配置は flex では無効化される） */
  .form__lead   { max-width: 100%; margin-top: 0; } /* 縦積みでは下げ不要 */
  .form__appeal { width: 100%; }
  .form__panel  { width: 100%; }
}

/* ---- タブレット（768–1023）：縦積みは上の <1024 で対応済み。追加調整は必要時のみ ---- */

/* SP専用の表示制御：" はSPのみ表示（PCでは非表示）。改行の .sp-only／句点非表示の .sp-hide は
   他セクションのグローバル定義を流用。pc-only はPC用改行（SPで無効化）。 */
.sp-show { display: none; }

/* ---- SP（≤767＝--bp-sp 未満）：見出し1〜2段下げ・余白圧縮（最小375） ---- */
@media (max-width: 767px) {
  .form__inner { padding-inline: var(--container-pad); padding-block: var(--space-64); } /* 画面端ガター16px＋SP標準 上下64px */

  .sp-show { display: inline; }  /* SPのみ " を表示 */
  .pc-only { display: none; }    /* SPではPC用改行を無効化 */

  /* 縦の順序を完成版へ：コピー→イラスト→バッジ→フォーム（DOM順は変えず order のみ） */
  /* gap 依存をやめ margin 化：order 解決の結果や0高さ幽霊項目に関わらず、コピー上に余白を出さない。
     項目間はコピー後ろの各項目の margin-top で作る（コピー自身は margin-top:0＝padding直下）。 */
  .form__inner { justify-content: flex-start; gap: 0; } /* 上詰め＋gapを0に（<1024の40を上書き） */
  .form__lead   { order: 1; }
  .form__img    { order: 2; }  /* イラストをバッジより先に */
  /* 菱形バッジ：img（display:contents 有効時）と picture（無効時＝flex項目）両方に order を付け、
     picture が order 0 のままコピー上へ回り込むのを防ぐ */
  .form__appeal,
  .form__inner > picture { order: 3; }
  .form__panel  { order: 4; }

  /* 項目間の余白（gap の代わり）：
     コピー↔イラスト 40 / イラスト↔バッジ 0（近接） / バッジ↔パネル 40 */
  .form__img    { margin-top: var(--space-40); }
  .form__appeal { margin-top: 0; }              /* gap:0 のため負マージン不要（近接＝0） */
  .form__panel  { margin-top: var(--space-40); }

  /* コピーは SP のみ縮小＋中央寄せ */
  .form__lead { font-size: var(--fs-28); text-align: center; } /* SP標準タイトル 28（黄色部分は維持） */

  /* イラストを拡大＋中央寄せ（完成版：画面幅いっぱい近く。<1024 の70%を上書き） */
  .form__img { width: 85%; margin-inline: auto; }
  /* ※イラスト↔バッジ間の余白は上の margin 化ブロックで 0（近接）に設定済み（gap:0 のため負マージン不要） */

  /* 見出し群：deco/title を下げ、head の予約高さも圧縮 */
  .form__head  { height: var(--space-72); }
  .form__deco  { font-size: var(--fs-3xl); }   /* 80→64 */
  .form__title { font-size: var(--fs-lg); }    /* 42→32 */

  /* フォームカード：内側 padding 圧縮 */
  .form__card { padding: var(--space-24); }

  /* 入力欄・ボタン：cqw高さだとSPで極小化するためトークン/autoで実用値に */
  .form__input,
  .form__select   { height: var(--space-48); }
  .form__textarea { height: auto; min-height: var(--space-96); }
  .form__btn      { font-size: var(--fs-base); } /* 32→24（高さautoは<1024で適用済み） */
  .form__btn-arrow { width: 14px; } /* SP矢印を中サイズ14pxに統一（基底1.7cqw≈5.6pxを上書き。全ボタン共通） */
}

/* ---- 狭いPC（1024–1370）：form 専用ブロック【新規追加：1440デザインの比例縮小】 ----
   固定px を cqw（.form__inner=container-type:inline-size／inner padding-inline=56px→1370時 content-box W=1258px, 1cqw=12.58px, ÷12.58）に換算。
   1370で現行px一致（段差なし）→1024へ比例縮小。white-space未指定＝基底nowrap維持＝折返しゼロ。
   ★min-1024〜max-1370 のため ≥1371/タブレット/SP には非適用。既存cqw/%（lead max-width・appeal/img/panel幅・input/textarea/btn高さ・btn radius 等のcqw）は基底のまま比例追従。
   ★.form__inner 自身（padding/row-gap）はコンテナのため据え置き。font は token 実値で換算（--fs-2xl=56/--fs-5xl=80/--fs-xl=42/--fs-sm=16/--fs-xs=12/--fs-lg=32）。 */
@media (min-width: 1024px) and (max-width: 1370px) {
  .form__lead   { font-size: 4.452cqw; margin-top: 6.995cqw; }  /* 56 / 88 */
  .form__img    { top: 5.723cqw; right: 4.452cqw; }             /* 72 / 56 */
  .form__panel  { gap: 3.180cqw; }                              /* 40 */
  .form__deco   { font-size: 6.359cqw; }                        /* 80 */
  .form__title  { font-size: 3.339cqw; }                        /* 42 */
  .form__card   { padding: 3.815cqw; }                          /* 48 */
  .form__label  { font-size: 1.272cqw; gap: 0.636cqw; margin-bottom: 0.636cqw; } /* 16 / 8 / 8 */
  .form__badge  { font-size: 0.954cqw; padding: 0.318cqw 0.636cqw; border-radius: 0.318cqw; } /* 12 / 4 8 / 4 */
  .form__input,
  .form__textarea,
  .form__select { font-size: 1.272cqw; padding: 0 1.272cqw; }   /* 16 / 左右16 */
  .form__select { padding-right: 3.180cqw; background-position: right 1.272cqw center; } /* 40 / 16 */
  .form__textarea { padding-top: 1.272cqw; }                    /* 16 */
  .form__field + .form__field { margin-top: 1.908cqw; }         /* 24 */
  .form__agree  { gap: 0.636cqw; margin-top: 1.908cqw; }        /* 8 / 24 */
  .form__agree-check { width: 1.272cqw; height: 1.272cqw; }     /* 16 */
  .form__agree-label { font-size: 1.272cqw; }                   /* 16 */
  .form__btn    { font-size: 2.544cqw; gap: 0.636cqw; margin-top: 3.180cqw; } /* 32 / 8 / 40 */
}