/* 写し元: デモ keisai.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}
  .pc{display:none}
  .sp{display:inline}
  /* 掲載LP: 表の折り返しで列が広がらないように */
  .contact{grid-template-columns:minmax(0,1fr)}
  .tbl tbody th,.tbl .pr{white-space:normal}
  /* 09-29 木村さん: スマホはフォームを一番下に（案内 → 節 → フォーム。写し元=プロベル probel.jp/lp/ もフォームはページの下）。フォームへは本文の途中のボタン（.toform）で飛ぶ。ヘッダーは他のページと同じ */
  .contact{grid-template-areas:"intro" "secs" "form"}
  /* 09-29 木村さん: 本文の途中に、下のフォームへ飛ぶボタン（リリース記念の下・料金の下）。形はフォームの送信ボタン .next と同じ値 */
  .toform{display:flex;width:100%;height:48px;margin-top:20px;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(90deg,#CD1CFA 0%,#1E82BE 100%);color:#fff;font-size:16px;font-weight:700}
  /* 09-29 リリース記念: 横並び（flex）のままだと、折り返したときマーカーが箱の下にしか出ない。スマホはバッジを上、文を下にして、マーカーを行ごとに出す */
  .intro p.early{display:block;white-space:normal;line-height:1.7}
  .intro p.early .bdg{display:inline-block;margin:0 0 4px}
  .intro p.early mark{display:inline}
  .intro p.early .bdg+mark:before{content:"";display:block}
  /* 09-29 表: 見出しの列が2文字ずつ折れていたので、見出しの列だけ折らない。横スクロールにはしない（ジツゾウの列が画面の外に出るため） */
  .tbl th,.tbl td{padding:10px 8px}
  .tbl tbody th,.tbl thead th:first-child{white-space:nowrap}
  /* 09-29 HubSpotのフォーム（本番だけ。デモには無い）は枠の中に上下左右40pxの余白を持つ。スマホだけ、枠を外へ広げて打ち消す（はみ出た分は箱で切る）。入力欄の幅 228px → 309px */
  .fbox{overflow:hidden}
  .fbox .hs-form-frame{margin:-24px -40px -40px}
}