/*
 * Contact Form 7 で作り直したフォームの、app.css で足りないぶんだけを補う。
 *
 * 見た目の大半は app.css の .LP-Form 配下（HubSpotテーマ由来＝本番と同じ定義）が
 * 持っている。入力欄・段組・必須バッジ・送信ボタン・同意チェックはそちらで当たるので、
 * ここで再定義すると二重管理になるうえ詳細度の勝ち負けで壊れる。実際、最初に自前で
 * 一式書いたときは .LP-Form .hs-form-field .hs-input (0,3,0) に負けて
 * テキストエリアの高さ指定が効かなかった。
 *
 * したがってここに置くのは「CF7 が出す、HubSpot には無かった要素」だけ。
 */

/* SiteGuardのフォームカード（.LP-Form.overlay）は濃紺背景で、ラベル・選択肢の文言等は
   本番(HubSpotネイティブ埋め込み)実測で白文字（実測: /siteguard/inquiry, /siteguard/product/software-waf）。
   コーポレート側は同じ .LP-Form.overlay でも背景が白系のため、body要素まで遡っても
   個別のcolor指定が無く、htmlの既定文字色(#4a4a4a、コーポレート想定)をそのまま継承していた。
   デザイン判別用の body.design-<名> クラス（functions.php）でSiteGuard限定に上書きする。
   入力欄の文字色は .LP-Form .hs-form-field .hs-input（詳細度0,3,0）が個別に#3e3e3eを
   指定しており、ここでの継承指定より詳細度が高いため白くならず、意図通り読める文字色のまま残る。 */
body.design-siteguard .eg-cf7-form {
  color: #fff;
}

/* app.css の素の fieldset 定義（border 1px + padding .625em + margin 0 2px）が段組の
   fieldset にも当たり、項目が本番より 25px 狭くなる。本番は HubSpot 側の CSS が
   form.hs-form 配下で打ち消していたぶん。 */
.eg-cf7-form fieldset {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.eg-cf7-form fieldset::after {
  content: "";
  display: block;
  clear: both;
}

/* HubSpot は form-columns-3 の各項目を3等分する。元テーマには
   モバイル時の解除ルールだけが残り、デスクトップの幅指定が欠けていた。
   /contact-form-press の取材希望日①〜③を本番同様の3列に戻す。 */
@media (min-width: 640px) {
  .eg-cf7-form .form-columns-3 .hs-form-field {
    float: left;
    width: 33.333333%;
  }

  .eg-cf7-form .form-columns-3 .hs-form-field .input {
    margin-right: 8px;
  }

  .eg-cf7-form .form-columns-3 .hs-form-field:last-child .input {
    margin-right: 0;
  }
}

/* CF7 は入力欄を <span class="wpcf7-form-control-wrap"> で包む。インライン要素のままだと
   app.css の .hs-input { width:100% } が包み側の幅（内容幅）を基準にしてしまい、
   入力欄が本番より細くなる。同意チェックの中にも同じ span が出るので .input の直下だけに限定する。 */
.eg-cf7-form .hs-form-field > .input > .wpcf7-form-control-wrap {
  display: block;
}


/* ラベルの太字（issue #173で撤回）。
   これまで「app.css の `.LP-Form.overlay .form_inbound .hs-form label span` は
   入れ子構造がその形の時だけ効くため太字の有無がフォームごとにまちまちになっていた」
   という理解で全フォーム一律で太字にしていたが、本番を再実測すると事情が逆だった。
   本番のCF7フォーム(=移行対象)は例外なく `.LP-Form.overlay .form_inbound .hs-form`
   の入れ子構造で描画されており（実測: /siteguard/inquiry, /siteguard/product/software-waf,
   /contact, /eccube_securitycheck, /estimate-simple 他）、その場合は
   `.LP-Form.overlay .form_inbound .hs-form label span{font-weight:400}` が
   ベースの太字指定(.hs-form-field label span{font-weight:bold})を詳細度で
   打ち消しており、本番のラベル文字は常に通常の太さ(400)。
   ここで太字を追加していたぶんだけローカルの方が本番より太く・大きく見えていた
   （issue #173「ラベルの文字が大きい」の実体）。よって撤回する。 */

/* 同意チェックの選択肢を包む <ul class="inputs-list"> のブラウザ既定黒丸。
   コーポレート(app.css)は `.LP-Form .hs-fieldtype-booleancheckbox .inputs-list{list-style:none}`
   で消しているが、SiteGuard は別バンドル(designs/siteguard/css/template_main*.min.css)を
   使っており同等のルールが無い（実測・issue報告 2026-08-14）。デザイン問わず適用する。 */
.eg-cf7-form .hs-fieldtype-booleancheckbox .inputs-list {
  list-style: none;
  padding-left: 0;
}

/* 同意チェック。CF7 は <span class="wpcf7-list-item"> を挟み、既定で左マージン 0.5em を
   付けるためチェックボックスと文言の間隔が本番とずれる。 */
.eg-cf7-form .hs-fieldtype-booleancheckbox .wpcf7-list-item {
  margin: 0;
}

.eg-cf7-form .hs-fieldtype-booleancheckbox .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* CF7 は送信ボタンの直後に送信中スピナーを置く。既定では場所を取るため .actions の幅が
   208px → 280px に広がり、ボタンが中央からずれる。さらに app.css の .LP-Form .actions:after
   （ボタン右端の矢印アイコン、right:15px）がスピナーの上に乗って見えなくなる。
   送信中の表示は残したいので、非表示にはせず流れから外してボタンの右隣に置く。 */
.eg-cf7-form .hs_submit .wpcf7-spinner {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 0 0 12px;
}

/* 資料ページのボタンから来たときの「ご希望の資料」。値は hidden で送るので行ごと隠す。 */
.eg-cf7-form .eg-field-hidden {
  display: none;
}

/* --- 複数選択（目的）のチェックボックス ---
 *
 * app.css はこの見た目を
 *   input[type="checkbox"].hs-input + span::before / ::after
 * で作っているが、CF7 の [checkbox] は class を個々の input ではなく囲みの span に
 * 付けるため当たらず、素のチェックボックスのまま出ていた。
 * 同じ設計（19×19 の枠 2px #088A97 / チェックは回転させたボーダー / ラベルは
 * 左 24px 空け）を CF7 の構造に当て直す。
 *
 * 同意チェック(booleancheckbox)は [acceptance ... class:hs-input] で input 自身に
 * class が付き app.css 側が効いているので、ここでは触らない（二重指定を避ける）。 */
/* 生成側では [checkbox] に class:hs-input を付けていないが、既存フォームや手直しで
   付いた場合に高さ40px・枠線の入力欄として描かれ選択肢がはみ出すため打ち消す。
   app.css の `.LP-Form.overlay .form_inbound .hs-form .hs-input`（詳細度 0,5,0。資料請求
   フォーム等の overlay 内で有効）に負けて枠線が残っていたため、実際のDOM階層
   （form.hs-form > .hs-form-field.hs-fieldtype-checkbox）まで含めて詳細度を上げる。
   本番は複数選択チェックボックスの周りに枠は無い。 */
.eg-cf7-form .wpcf7-form.hs-form .hs-form-field.hs-fieldtype-checkbox .wpcf7-checkbox {
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
}

.eg-cf7-form .hs-fieldtype-checkbox .wpcf7-list-item {
  display: block;
  margin: 0 0 8px;
}


.eg-cf7-form .hs-fieldtype-checkbox .wpcf7-list-item:last-child {
  margin-bottom: 0;
}

/* CF7 の radio は既定で選択肢をインラインに並べるが、HubSpot本番の
   /contact-form-press は1行1選択肢。同じ垂直リズム（8px）を使う。 */
.eg-cf7-form .hs-fieldtype-radio .wpcf7-list-item {
  display: block;
  margin: 0 0 8px;
}

.eg-cf7-form .hs-fieldtype-radio .wpcf7-list-item:last-child {
  margin-bottom: 0;
}

/* `.hs-input` が radio の囲み span に付くため、旧 HubSpot 向けの入力欄（40px・
   グレー枠線）指定が当たる。選択肢コンテナには枠も固定高も無いので解除する。 */
.eg-cf7-form .wpcf7-form.hs-form .hs-form-field.hs-fieldtype-radio .wpcf7-radio {
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* CF7 の radio も checkbox と同じく、class が input 本体ではなく親要素に
   付与される。そのままではブラウザ標準の 13px コントロールになるため、旧サイトの
   HubSpot 表示（19px の #088A97 円・ラベル左24px・24px行高）を再現する。 */
.eg-cf7-form .hs-fieldtype-radio .wpcf7-list-item label {
  position: relative;
  display: block;
  font-size: 15px;
  line-height: 24px;
  color: #4a4a4a;
  cursor: pointer;
}

.eg-cf7-form .hs-fieldtype-radio input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  appearance: none;
}

.eg-cf7-form form.hs-form .hs-fieldtype-radio input[type="radio"] + .wpcf7-list-item-label {
  position: relative;
  display: block;
  padding-left: 24px;
  /* app.css の label span を太字にする指定より優先し、旧サイトと同じ通常の文字重量にする。 */
  font-weight: 400;
}

.eg-cf7-form form.hs-form .hs-fieldtype-radio input[type="radio"] + .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  box-sizing: border-box;
  width: 19px;
  height: 19px;
  border: 2px solid #088a97;
  border-radius: 50%;
  background: transparent;
}

.eg-cf7-form form.hs-form .hs-fieldtype-radio input[type="radio"]:checked + .wpcf7-list-item-label::before {
  background: #fff;
}

.eg-cf7-form form.hs-form .hs-fieldtype-radio input[type="radio"]:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #088a97;
}

.eg-cf7-form form.hs-form .hs-fieldtype-radio input[type="radio"]:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid #00707a;
  outline-offset: 2px;
}

/* SiteGuard はコーポレートとフォームテーマが別。問い合わせ項目は本番で
   234px幅 + 23px間隔の3列、白い15px角丸チェックボックス、通常より細い文字を
   使う。コーポレートの青緑19pxコントロールを継承させない。 */
@media (min-width: 640px) {
  body.design-siteguard .eg-cf7-form .hs_inquiry_checkbox .wpcf7-list-item {
    display: inline-block;
    width: 30%;
    margin: 0 23px 0 0;
    vertical-align: top;
  }
}

body.design-siteguard .eg-cf7-form .hs-fieldtype-checkbox .wpcf7-list-item label {
  color: #fff;
  line-height: 28px;
}

body.design-siteguard .eg-cf7-form form.hs-form .hs-fieldtype-checkbox input[type="checkbox"] + .wpcf7-list-item-label {
  display: inline;
  padding-left: 20px;
  font-weight: 200;
}

body.design-siteguard .eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"] + .wpcf7-list-item-label::before {
  top: 5px;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 4px;
}

/* チェック時の背景色（issue #173）。汎用ルール（下の .eg-cf7-form .hs-fieldtype-checkbox
   input:checked + .wpcf7-list-item-label::before）は白背景のままのため、白枠×白背景で
   チェックマーク(白)が見えなくなっていた。本番は SiteGuard 限定でチェック時にピンク背景
   （実測: /siteguard/inquiry の本番CSS `.LP-Form.overlay .form_inbound .hs-form
   input[type=checkbox].hs-input:checked+span:before{background-color:#ec407a}`。
   枠線の色は変わらず白のまま）。 */
body.design-siteguard .eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  background-color: #ec407a;
}

body.design-siteguard .eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  top: 5px;
  left: 5px;
  width: 6px;
  height: 9px;
  border-color: #fff;
}

.eg-cf7-form .hs-fieldtype-checkbox .wpcf7-list-item label {
  position: relative;
  display: block;
  font-size: 15px;
  line-height: 24px;
  color: #4a4a4a;
  cursor: pointer;
}

.eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  appearance: none;
}

.eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"] + .wpcf7-list-item-label {
  position: relative;
  display: block;
  padding-left: 24px;
}

/* app.css の `.LP-Form.overlay .form_inbound .hs-form label span { font-weight: bold }`
   （詳細度 0,4,2）が当たり、4 行ぶんの選択肢が全部太字で読みづらい。本番の複数選択は
   `.inputs-list.multi-container li label span { font-weight: 200 }` だが 200 は細すぎるので、
   項目ラベルと同じ通常のウェイトに揃える。上記に勝つよう form.hs-form まで含める。
   同意チェック(booleancheckbox)は /contact と同じ太字のままにしたいので対象外。 */
.eg-cf7-form form.hs-form .hs-fieldtype-checkbox input[type="checkbox"] + .wpcf7-list-item-label {
  font-weight: 400;
}

.eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"] + .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  box-sizing: border-box;
  width: 19px;
  height: 19px;
  border: 2px solid #088a97;
  background: transparent;
}

.eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  background: #fff;
}

.eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 6px;
  width: 7px;
  height: 10px;
  border: 2px solid #088a97;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* チェックボックス本体は見えないので、キーボード操作の現在位置はラベル側に出す */
.eg-cf7-form .hs-fieldtype-checkbox input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid #00707a;
  outline-offset: 2px;
}

/* --- 資料ページの「資料請求はこちら」ボタン（旧・右側フォームの跡地） ---
   ボタン自体は app.css の .hs-button.primary が本文フォームと同じ見た目にする。
   ここは配置と、どの資料の請求かを示す一行だけ。 */
.eg-download-cta {
  text-align: center;
  padding: 24px 0;
}

.eg-download-cta__lead {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #333;
}

/* コーポレートの資料ページはサイドバーが明るい背景(#333で読める)だが、SiteGuardは
   濃紺のサイドバー(.Resource-form等)のため同じ#333だとほぼ見えない
   （実測: /siteguard/resources/introduction-service-price-list、issue報告 2026-08-14）。 */
body.design-siteguard .eg-download-cta__lead {
  color: #fff;
}

/* a 要素なので app.css の input[type=submit] 前提の指定だけでは高さが出ない。
   本文フォームの送信ボタン（208×48 / padding 0 40px）に合わせる。 */
.eg-download-cta .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 40px;
  text-decoration: none;
}

/* 資料ダウンロードフォーム末尾の「※同業他社様からの申し込みは…」。
   本番はページのモジュールCSS(hub_generated/template_assets/…/template_main.min.css)側に
   `.form-attention` が入っているが、コーポレート(app.css)には `.LP-Form .form-attention` で
   移植済みの一方、SiteGuard側の designs/siteguard/css/template_main*.min.css には同等の
   ルールが無く未装飾のまま出ていた（実測・issue報告 2026-08-14）。値は本番と同一。 */
.eg-cf7-form .form-attention {
  margin-bottom: 20px;
}

.eg-cf7-form .form-attention p {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
  color: #f20;
  text-align: center;
}

/* --- 入力エラー（app.css が知っているのは HubSpot の .hs-error-msgs だけ） --- */

/* 色だけに頼らず記号でも示す（色覚特性への配慮） */
.eg-cf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  color: #b3261e; /* 白背景に 5.9:1 */
  font-size: 13px;
  line-height: 1.6;
}

.eg-cf7-form .wpcf7-not-valid-tip::before {
  content: "⚠ ";
}

.eg-cf7-form .wpcf7-not-valid.hs-input {
  border-color: #b3261e;
  border-width: 2px;
}

.eg-cf7-form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid #808080;
  font-size: 15px;
  line-height: 1.8;
}

.eg-cf7-form form.invalid .wpcf7-response-output,
.eg-cf7-form form.unaccepted .wpcf7-response-output,
.eg-cf7-form form.failed .wpcf7-response-output {
  border-color: #b3261e;
  color: #b3261e;
}

.eg-cf7-form form.sent .wpcf7-response-output {
  border-color: #00707a;
  color: #00707a; /* 白背景に 4.6:1 */
}

/* 上のエラー色(#b3261e)は白背景基準のコントラストで選んでいるが、
   SiteGuardの申込系フォーム(.overlay .form_inbound{background-color:#2c3e50}、
   本番実測ではrgb(255,0,0))は紺の暗い背景の上に乗るため、暗い赤では
   ほぼ読めなくなる（実測・issue報告 2026-08-14）。ダーク背景の文脈だけ
   本番同様の明るい赤に上書きする。 */
.overlay .eg-cf7-form .wpcf7-not-valid-tip {
  color: #ff5449; /* 紺(#2c3e50)背景に約5.3:1 */
}

/* border-color だけの上書きだと、SiteGuardの `.LP-Form.overlay .form_inbound .hs-form
   .hs-input { border: 1px solid rgba(254,254,254,.6); }`（詳細度0,5,0・borderショートハンド）
   に負けて枠線が白いまま変わらない。同じ祖先チェーンまで含めて詳細度を上げる。 */
.LP-Form.overlay .form_inbound .hs-form .wpcf7-not-valid.hs-input {
  border-color: #ff5449;
}

.overlay .eg-cf7-form form.invalid .wpcf7-response-output,
.overlay .eg-cf7-form form.unaccepted .wpcf7-response-output,
.overlay .eg-cf7-form form.failed .wpcf7-response-output {
  border-color: #ff5449;
  color: #ff5449;
}

/* --- キーボード操作時の現在位置。本番のフォームは持っていないが、無いと
       Tab で操作したときにどこにいるか分からなくなるため足す。 --- */
.eg-cf7-form .hs-input:focus-visible,
.eg-cf7-form .hs-button:focus-visible {
  outline: 2px solid #00707a;
  outline-offset: 2px;
}

/* 送信完了（遷移しないフォーム）
 *
 * 本番でも [SITEGUARD] 系 3 件は遷移せずインラインで完了を出す。ただし CF7 の既定は
 * 入力欄を残したままメッセージを足すだけなので、送信できたのか読み取れない。
 * 完了時は入力欄・段組・送信ボタンを隠し、メッセージだけを残す。
 * .eg-sent は wpcf7mailsent で JS が付ける（CF7 の .sent は無効化時にも付くため使わない）。 */
.wpcf7 form.eg-sent fieldset,
.wpcf7 form.eg-sent .hs_submit,
.wpcf7 form.eg-sent .hs-richtext {
  display: none;
}

.wpcf7 form.eg-sent .wpcf7-response-output {
  margin: 0;
  padding: 24px;
  border: 1px solid #2e7d32;
  border-radius: 4px;
  background: #f1f8f2;
  color: #1b4620;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}

/* 色だけに頼らず記号でも成否が分かるようにする */
.wpcf7 form.eg-sent .wpcf7-response-output::before {
  content: "✓";
  display: block;
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1;
}

/* HubSpotの「依存フィールド」（他項目の選択値で表示/非表示が切り替わる項目）。
   js/eg-forms.js が親フィールドの選択状態を見て表示を切り替えるが、JS実行前の
   一瞬だけ表示されてしまう（FOUC）のを避けるため、CSS側でも既定は非表示にする
   （scripts/build-cf7-forms.php が data-eg-depends-field を出す項目が対象）。 */
.eg-cf7-form [data-eg-depends-field] {
  display: none;
}