/* 写し元: デモ consult.html の、共通CSSの後にある style タグをそのまま（common.css の後に読む） */
/* スマホ: 案内 → フォーム → 節 の順に1列 */
@media (max-width:767px){
  .contact{width:auto;padding:0 16px;margin-top:8px;grid-template-columns:1fr;grid-template-areas:"intro" "form" "secs";grid-template-rows:none;row-gap:32px}
  .formwrap{position:static}
  .intro h1{font-size:24px;line-height:36px}
  .intro p{margin-top:16px}
  .fbox{padding:24px 16px 28px}
  .fa .range input{width:100%}
  .chk{grid-template-columns:1fr 1fr}
  .sec{margin-top:16px}
  .sec+.sec{margin-top:40px}
  .fig8{width:100%}
  .pc{display:none}
  .sp{display:inline}
  /* 09-29 木村さん: スマホはフォームを一番下に（案内 → 節 → フォーム）。HubSpotのフォームは1画面で長く、途中に置くと下の説明が読まれないため。ヘッダーのボタンでフォームへ飛ぶ。PCは変えない */
  .contact{grid-template-areas:"intro" "secs" "form"}
  /* 09-29 木村さん: 途中に1つ、下のフォームへ飛ぶボタン（編集長の箱の下）。色はヘッダーの相談と同じ白地＋紫の枠線（紫の帯は掲載だけ） */
  .toform{display:flex;width:100%;height:48px;margin-top:20px;align-items:center;justify-content:center;border-radius:8px;background:#fff;color:#8447E1;border:1.5px solid #8447E1;font-size:16px;font-weight:700}
  /* 09-29 HubSpotのフォーム（本番だけ。デモには無い）は枠の中に上下左右40pxの余白を持つ。スマホだけ、枠を外へ広げて打ち消す（はみ出た分は箱で切る）。入力欄の幅 228px → 309px */
  .fbox{overflow:hidden}
  .fbox .hs-form-frame{margin:-24px -40px -40px}
}