/**
 * CF7フォーム共通スタイル
 * トップページ・各シミュレーション結果ページ・LPリース(lp-lease)等の CF7 フォームで共有。
 * コンテナ #zoho-form および #zoho-form-lease にスコープしているため、他ページへは影響しない。
 *   → :is(#zoho-form, #zoho-form-lease) で両idを対象化。:is() は最も詳細度の高い引数(=id)を
 *     採用するため、従来の #zoho-form と詳細度は同一（既存ページのスタイルは不変）。
 * ※ id名 zoho-form は歴史的経緯（Zoho時代）の共通フォームラッパー識別子。9個のCSS資産が
 *    依存しているため CF7 移行後も踏襲している。命名整理は全ページ移行完了後に別途行う想定。
 * セクション背景はティール（.topSimulation 等）を想定。
 */

/* フォーム全体をティールのカードに（ページ背景に依存せず、どこでも同一デザイン） */
:is(#zoho-form, #zoho-form-lease) {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 30px;
  background: #1395a8;
  border-radius: 10px;
  box-sizing: border-box;
}

/* 結果ページ等で <ul><li> 内に設置されるケースのリスト装飾リセット */
:is(#zoho-form, #zoho-form-lease) ul,
:is(#zoho-form, #zoho-form-lease) li {
  list-style: none;
  margin: 0;
  padding: 0;
}

:is(#zoho-form, #zoho-form-lease) .wpcf7 {
  max-width: 960px;
  margin: 0 auto;
}

:is(#zoho-form, #zoho-form-lease) .add__flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
  margin-bottom: 20px;
}

/* ラベル：白・太字。必須バッジと横並び */
:is(#zoho-form, #zoho-form-lease) .cf7-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}

/* 必須バッジ（薄い半透明ピル） */
:is(#zoho-form, #zoho-form-lease) .cf7-req {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
  padding: 5px 10px;
  border-radius: 4px;
}

/* 入力欄：白背景・角丸・余白広め */
:is(#zoho-form, #zoho-form-lease) .wpcf7-form-control-wrap {
  display: block;
}

:is(#zoho-form, #zoho-form-lease) input[type=text],
:is(#zoho-form, #zoho-form-lease) input[type=email],
:is(#zoho-form, #zoho-form-lease) input[type=tel],
:is(#zoho-form, #zoho-form-lease) select,
:is(#zoho-form, #zoho-form-lease) textarea {
  width: 100%;
  background: #fff;
  color: #333;
  border: 1px solid #fff;
  border-radius: 6px;
  padding: 14px 16px;
  box-sizing: border-box;
  font-size: 15px;
}

:is(#zoho-form, #zoho-form-lease) input::placeholder,
:is(#zoho-form, #zoho-form-lease) textarea::placeholder {
  color: #9aa0a6;
}

:is(#zoho-form, #zoho-form-lease) textarea {
  resize: vertical;
  min-height: 120px;
}

:is(#zoho-form, #zoho-form-lease) .cf7-row--full {
  margin-bottom: 20px;
}

/* 送信ボタン：サイト共通の緑ピル */
:is(#zoho-form, #zoho-form-lease) .cf7-submit-wrp {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

:is(#zoho-form, #zoho-form-lease) .cf7-submit-wrp input[type=submit] {
  width: 100%;
  max-width: 33rem;
  color: #fff;
  background: #29ab9f;
  border: 0;
  border-radius: 60px;
  padding: 20px 40px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
}

:is(#zoho-form, #zoho-form-lease) .cf7-submit-wrp input[type=submit]:hover {
  opacity: .9;
}

/* 送信中スピナーは全フォーム共通で非表示
 * （.cf7-submit-wrp のflex中央寄せ内で幅を持ち、送信ボタンの中央配置を崩すため） */
:is(#zoho-form, #zoho-form-lease) .wpcf7-spinner {
  display: none;
}

/* CF7のバリデーションメッセージ */
:is(#zoho-form, #zoho-form-lease) .wpcf7-not-valid-tip {
  font-size: 12px;
  margin-top: 3px;
}

@media all and (max-width: 600px) {
  :is(#zoho-form, #zoho-form-lease) .add__flex {
    display: block;
  }

  :is(#zoho-form, #zoho-form-lease) .add__flex .cf7-row {
    margin-bottom: 20px;
  }
}

/* ============================================================
 * バリエーション: 背景なし・文字黒・入力欄は黒枠
 * <div id="zoho-form" class="cf7-plain"> に付与して使用。
 * 結果ページ（page-result.php）・LPリース（lp-lease）で適用。
 * ============================================================ */

/* フォーム全体のカード背景をなくす */
:is(#zoho-form, #zoho-form-lease).cf7-plain {
  background: none;
  padding: 0;
}

/* ラベルを黒に */
:is(#zoho-form, #zoho-form-lease).cf7-plain .cf7-label {
  color: #000;
}

/* 必須バッジ：白文字＋青背景 */
:is(#zoho-form, #zoho-form-lease).cf7-plain .cf7-req {
  color: #fff;
  background: #1395a8;
  border: 0;
}

/* 入力欄：黒の枠線（背景は白のまま） */
:is(#zoho-form, #zoho-form-lease).cf7-plain input[type=text],
:is(#zoho-form, #zoho-form-lease).cf7-plain input[type=email],
:is(#zoho-form, #zoho-form-lease).cf7-plain input[type=tel],
:is(#zoho-form, #zoho-form-lease).cf7-plain select,
:is(#zoho-form, #zoho-form-lease).cf7-plain textarea {
  background: #fff;
  color: #000;
  border: 1px solid #000;
}

/* select の矢印を表示（style.css で appearance:none されているため独自に付与） */
:is(#zoho-form, #zoho-form-lease) select,
:is(#zoho-form, #zoho-form-lease).cf7-plain select {
  background-image: url(../img/page/simuration-select-arrow.svg);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.5rem 0.7rem;
  padding-right: 2.5rem;
}

/* ============================================================
 * lp-lease専用：送信ボタンをページの赤CTA（.lpCtaBtn）に寄せる
 *   ・表面グラデ = lpCtaBtn__link::after 相当（#F16C7B→#D14252）
 *   ・縁取り     = lpCtaBtn__link::before の外周(#D14252)を box-shadow で近似
 *   ・立体感     = 下方向の軽いドロップシャドウ
 *   ・矢印       = lpCtaBtn__txt::after と同じ icon-arrow-white.svg を右に配置
 *   ・左の丸アイコン(__info)と光沢アニメ(__animation)は input では再現不可のため省略
 * レイアウト（幅・中央寄せ・角丸・余白）は上の共通 .cf7-submit-wrp を流用。
 * ============================================================ */
#zoho-form-lease .cf7-submit-wrp input[type=submit] {
  background-color: #D14252;
  background-image:
    url(../img/lp/icon-arrow-white.svg),
    linear-gradient(to bottom, #F16C7B, #D14252);
  background-repeat: no-repeat, no-repeat;
  background-position: right 2rem center, center;
  padding-right: 5rem;
  box-shadow: 0 0 0 4px #D14252, 0 4px 10px rgba(0, 0, 0, .15);
}

/* lp-lease：ご相談事項（textarea）の枠線を削除 */
#zoho-form-lease.cf7-plain textarea {
  border: 0;
}

/* lp-lease：注意書き(.lpForm__txt)を入力欄(.wpcf7)と同じ 960px幅・中央に揃える
 * （元定義は lp.min.css の #zoho-form-lease .lpForm__txt(1-1-0)。ここは 1-2-0 で確実に上書き） */
#zoho-form-lease.cf7-plain .lpForm__txt {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* reCAPTCHA v2（チェックボックス）を中央寄せ
 * v2プラグインのマークアップには CF7 本体の data-align 属性が付かないため、
 * Google が生成する内側の div（幅304px固定）を margin auto で中央に置く */
:is(#zoho-form, #zoho-form-lease) .wpcf7-recaptcha {
  display: block;
}

:is(#zoho-form, #zoho-form-lease) .wpcf7-recaptcha > div {
  margin: 0 auto;
}

/* 送信中（二重送信防止 cf7-send-lock.js が disabled 化）：押せない見た目にする
 * 各ボタンの通常スタイルはID入りセレクタ（例: :is(#zoho-form, ...) ... input[type=submit] が
 * cursor:pointer、:hover が opacity:.9）で詳細度が高いため、状態スタイルとして !important で上書き */
.wpcf7 .wpcf7-submit:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

/* フォーム直上の案内文（include/solar/cf7-form-*.php で出力）
 * グローバルの p { text-align: justify } に負けないよう p を含めて指定 */
:is(#zoho-form, #zoho-form-lease) p.cf7-lead {
  max-width: 960px;
  margin: 0 auto 30px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  word-break: auto-phrase; /* 対応ブラウザでは文節で折り返す */
}

/* トップ・ソーラープラン・バッテリープランの .topSimulation 内だけ余白を調整
 * 見出し→案内文: 16px(main.css の .topSimulation__txt margin-bottom:3rem を上書き)
 * 案内文→フォーム: PC 50px / SP 46px */
.topSimulation .topSimulation__txt {
  margin-bottom: 16px;
}

.topSimulation__form#zoho-form {
  padding-top: 0;
}

.topSimulation__form#zoho-form p.cf7-lead {
  margin-bottom: 50px;
}

@media all and (max-width: 600px) {
  .topSimulation__form#zoho-form p.cf7-lead {
    margin-bottom: 46px;
  }
}

:is(#zoho-form, #zoho-form-lease).cf7-plain p.cf7-lead {
  color: #000;
}

@media all and (max-width: 600px) {
  :is(#zoho-form, #zoho-form-lease) p.cf7-lead {
    margin-bottom: 20px;
    font-size: 15px;
  }
}