@charset "UTF-8";

/* =============================================================
   Pardot Landing Page（Classic）お問い合わせフォーム用スタイル
   幅バリアント: フル幅（既存ページの枠に埋め込む＝幅100%追従）

   このファイルは Pardot Landing Page（Classic）の Layout Template から
   <link rel="stylesheet" href="https://cloudassist.jp/wp-content/themes/denettm/assets/css/pardot-form-fullwidth.css">
   の形で参照される。

   注意：複数の Pardot LP から共有して参照される可能性があるため、
   変更する際は「どの Pardot LP がこのURLを link しているか」を
   必ず確認してから編集すること（このファイル単体の見た目変更が、
   意図しない別LPの見た目まで変えてしまう恐れがある）。

   URLにバージョンクエリ（?v=...）は付けない運用（Pardotフォーム編集の
   担当者に毎回URL書き換えを依頼しない方針のため）。更新時の反映速度は
   HTTPキャッシュ設定（Cache-Control）側で担保する想定。

   参照：ドキュメント/レビュー/design/20260818_contact-form-pardot-lp-style-handoff_kaneda.md（rev15時点）
   ============================================================= */

/* ---- 行全体のレイアウト（label=自分のborder-top、input側の線は::beforeで浮かせる） ---- */
#pardot-form.form p {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  font-size: 18px;
  line-height: 1.66;
  margin: 0;
  padding: 0 0 20px 0;
  position: relative;
}

#pardot-form.form p::before {
  /* rev14: この線の位置・長さはrev12のまま変えない（275px〜行の右端-15px）。
     inputの箱自体は、この線よりさらに内側に入れる（下記margin参照） */
  content: "";
  position: absolute;
  top: 0;
  left: 275px;
  right: 15px;
  height: 1px;
  background: #707070;
}

@media (max-width: 781px) {
  #pardot-form.form p::before {
    display: none;
  }
}

#pardot-form.form p.submit::before {
  display: none;
}

#pardot-form.form p.privacypolicy::before {
  /* rev16: 他フィールドのグレーの線と同じrightインセット(15px)を効かせるため、
     border-topではなく::beforeに変更（border-topは行の真の右端まで伸びてしまい、
     上のフィールドの線(right:15pxで15px手前で止まる)より長く見えていた） */
  left: 0;
  right: 15px;
  background: #707070;
}

#pardot-form.form p label.field-label {
  flex: 0 0 220px;
  width: auto;
  /* rev17: label自身の占有幅を縮め(40px→25px)、赤とグレーの境目の空きを広げる。
     inputのmargin-leftを15px増やして補うため、input自身の箱の位置は変わらない
     (245+45=290、変更前も260+30=290で同じ) */
  padding: 20px 25px 0 0;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #424242;
  border-top: 1px solid #ab010b;
}

#pardot-form.form p.required label.field-label:before {
  content: none;
}
#pardot-form.form p.required label.field-label:after {
  content: "*";
  background: none !important;
  color: #c9171e;
  font-size: 18px;
  font-weight: bold;
  padding: 0;
  margin-left: 2px;
  border-radius: 0;
}

#pardot-form.form input.text,
#pardot-form.form p textarea {
  flex: 1 1 320px;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  font-family: inherit; /* input/textareaはブラウザ既定でfont-familyを継承しないため明示指定が必須 */
  font-size: 16px;
  height: auto;
  /* rev14: グレーの線(::before)は275px〜行の右端-15pxのまま変えず、
     input自身の箱をその線よりさらに左右15pxずつ内側に入れる。
     左: 15px(labelとの間隔、線の開始位置と同じ) + 15px(線からの新しい内側インセット) = 30px
     右: 15px(線の終了位置=行の右端-15pxと同じ) + 15px(線からの新しい内側インセット) = 30px */
  /* rev17: 左マージンは30px→45pxに変更。labelのpadding-right(40px→25px)の
     縮小分(15px)をそのまま補うため、input自身の箱の左端位置は変わらない */
  margin: 20px 30px 0 45px;
}

#pardot-form.form p textarea {
  height: 140px;
  resize: vertical;
}

#pardot-form.form input.text:focus,
#pardot-form.form p textarea:focus {
  background-color: #fff;
  border-color: #aaa;
  outline: none;
}

@media (max-width: 781px) {
  #pardot-form.form p label.field-label {
    flex-basis: 100%;
    padding: 20px 0 8px 0;
  }
  #pardot-form.form input.text,
  #pardot-form.form p textarea {
    flex-basis: 100%;
    /* rev14: rev13のフォーム全体パディング撤回に伴い、rev12と同じ左右15pxに戻す
       （PC幅の追加インセットはこのモバイル縦積みには適用しない） */
    margin: 0 15px;
    /* 赤はlabel(ラベル強調)専用という位置づけのため、inputは縦積みでも
       通常色(#707070)のまま。以前(rev11)はここを#ab010bにしていた */
    border-top: 1px solid #707070;
  }
}

#pardot-form.form p.privacypolicy {
  display: block;
  text-align: center;
  margin-top: 0;
  padding-top: 20px;
  /* rev16: 線自体は::before(上で定義)が担うため、ここでのborder-topは廃止 */
}
#pardot-form.form p.privacypolicy .value,
#pardot-form.form p.privacypolicy .description {
  display: block;
  text-align: center;
}
#pardot-form.form p.privacypolicy input[type="checkbox"] {
  accent-color: #ab010b;
  width: auto;
  margin-right: 6px;
}

#pardot-form.form p.submit {
  display: block;
  text-align: center;
  margin-top: 0;
  padding-top: 8px;
}
#pardot-form.form input[type="submit"] {
  background-color: #ab010b !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: inherit; /* inputはfont-familyを自動継承しないため明示指定が必須（未指定だとSerifで表示される） */
  font-size: 18px !important;
  font-weight: bold;
  padding: 14px 40px !important;
  width: 100%;
  max-width: 480px;
}

#pardot-form.form p.privacypolicy label.field-label {
  display: none;
}
#pardot-form.form p.privacypolicy label.inline {
  display: inline-block;
  width: auto !important;
  flex: none;
  text-align: left;
  font-size: 18px; /* rev15: 大事な同意ポイントなので他のラベル・本文と同じ18pxに揃える(以前は15pxで小さく見えていた) */
  vertical-align: middle;
}
#pardot-form.form p.privacypolicy input[type="checkbox"] {
  vertical-align: middle;
}

#pardot-form.form {
  font-family: "Noto Sans Japanese", "Noto Sans JP", sans-serif;
  margin: 0;
}

/* ---- 幅バリアント: フル幅 ---- */
#pardot-form.form {
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* rev14: rev13で追加したフォーム全体へのpadding(左右15px)は撤回。
     labelの位置・線の長さ自体は変えず、input自身の箱だけを線の内側に
     さらに寄せる方式に変更した（詳細はinput.textのmarginを参照） */
}