/* ==========================================================================
   pp-pz-form.css ― Partner Portal 新LP向け Plain フォームテーマ v1 (2026-09-10)
   --------------------------------------------------------------------------
   pz-form.css の後に読み込む。構造（クラス名）は触らず、
   変数の上書きと、LPの意匠に合わせる数行だけを書く。
   同じセレクタは後勝ちで上書きされるので !important は使わない。
   （ww-pz-form.css v2 と同じ作法。あちらはサイト本体のオレンジ、
   　こちらは PP LP のブルーに合わせる）

   合わせた先（partner-portal 新LP）
   - 本文 16px / Hiragino・Noto Sans JP
   - ブルー #3f5bc0（ボタン・リンク）・濃ブルー #31479a（hover）・紺 #1b2a5c
   - 角丸ほぼ無し（ボタン 3px）・罫線は薄い青グレー #e3e7f2
   - 赤は使わない。エラーは紺〜青の範囲で「未入力」を示す
   ========================================================================== */
.pz-form { text-align: left; }

.pz-form {
  /* 色 */
  --pz-accent:         #3f5bc0;   /* = LP の --blue */
  --pz-accent-text:    #ffffff;
  --pz-text:           #232733;   /* = LP の --ink */
  --pz-muted:          #5a6172;   /* = LP の --sub */
  --pz-border:         #e3e7f2;   /* = LP の --line（入力欄は少し濃く下で上書き） */
  --pz-border-focus:   #3f5bc0;
  --pz-bg:             #ffffff;
  --pz-bg-confirm:     #f4f6fb;   /* = LP の --alt */
  --pz-required:       #31479a;   /* = LP の --blue-dark。赤でなく濃ブルーで統一 */
  --pz-error-bg:       #eef1fa;   /* = LP の .case hover と同じ薄青 */
  --pz-error-border:   #b9c4e8;
  --pz-success-bg:     #f4f6fb;
  --pz-success-border: #b9c4e8;

  /* 寸法・書体 */
  --pz-font:           "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --pz-font-size:      16px;      /* LP の body と同じ */
  --pz-line:           1.9;
  --pz-radius:         3px;       /* LP のボタンと同じ、角はほぼ直角 */
  --pz-gap:            1.4em;
  --pz-input-height:   2.7em;
  --pz-label-weight:   700;
  --pz-max-width:      100%;
}

/* --------------------------------------------------------------------------
   見出し: LP の CASES ブロックと同じ、左にブルーの縦罫
   -------------------------------------------------------------------------- */
.pz-title {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0 0 .5em;
}
.pz-heading {
  border-bottom: 0;
  border-left: 4px solid var(--pz-accent);
  padding: .1em 0 .1em .6em;
  font-size: 1.05em;
}
.pz-guide { color: var(--pz-text); }

/* --------------------------------------------------------------------------
   ラベルと注記: ラベルは黒・太、桁数や型のヒントは小さく灰色
   -------------------------------------------------------------------------- */
.pz-label { color: var(--pz-text); }
.pz-required {
  background: #eef1fa;               /* 薄青地に濃ブルー文字のバッジ */
  color: #31479a;
  border-radius: 999px;
  font-size: .72em;
  padding: .3em .6em;
}
.pz-hint, .pz-help { color: var(--pz-muted); }

/* --------------------------------------------------------------------------
   入力欄: 罫線は薄く、フォーカスだけブルー
   -------------------------------------------------------------------------- */
.pz-input {
  border-color: #c9d1e6;             /* 本文罫(#e3e7f2)より一段濃く。薄背景の上でも輪郭が残る */
  border-radius: var(--pz-radius);
}
.pz-input:focus {
  border-color: var(--pz-accent);
  box-shadow: 0 0 0 3px rgba(63, 91, 192, .16);
}
.pz-choice__item input { accent-color: var(--pz-accent); }
.pz-choice { gap: .5em 1.5em; }

/* エラー時: 赤を使わない。紺〜青の範囲で「未入力」を示す */
.pz-field.has-error .pz-label { color: #31479a; }
.pz-field.has-error .pz-input { border-color: var(--pz-required); background: var(--pz-error-bg); }
.pz-field.has-error .pz-input:focus { box-shadow: 0 0 0 3px rgba(49, 71, 154, .18); }
.pz-messages {
  background: #eef1fa; border: 0; border-left: 4px solid var(--pz-accent);
  border-radius: 0 var(--pz-radius) var(--pz-radius) 0; color: #1b2a5c;
}
.pz-messages p, .pz-messages li { margin: .15em 0; }
.pz-complete { background: #f4f6fb; border: 0; border-left: 4px solid var(--pz-accent);
  border-radius: 0 var(--pz-radius) var(--pz-radius) 0; }

/* --------------------------------------------------------------------------
   ボタン: LP のヒーローCTAと同じ、ブルー地・白文字・角 3px
   -------------------------------------------------------------------------- */
.pz-btn {
  border-radius: var(--pz-radius);   /* ピル型にしない。LP の .cta と同じ */
  min-width: 12em;
  padding: 0 1.6em;
  font-weight: 600;
  letter-spacing: .02em;
}
.pz-btn--primary {
  background: var(--pz-accent);
  border-color: var(--pz-accent);
  color: var(--pz-accent-text);
}
.pz-btn--primary:hover { background: #31479a; border-color: #31479a; filter: none; }  /* = LP の .cta:hover */
.pz-btn:not(.pz-btn--primary) { color: var(--pz-text); border-color: #c9d1e6; background: #fff; }
.pz-btn:not(.pz-btn--primary):hover { background: #eef1fa; }
.pz-btn:focus-visible { outline: 3px solid rgba(63, 91, 192, .35); }

/* --------------------------------------------------------------------------
   確認画面: 見出し列を薄青灰にして、LP の交互背景と同じ質感に
   -------------------------------------------------------------------------- */
.pz-confirm { border-radius: 0; }
.pz-confirm__list dt { background: var(--pz-bg-confirm); color: var(--pz-text); }

/* --------------------------------------------------------------------------
   幅: LP の本文カラム（max-width 860px）に収める。
   単独の半幅項目は 50% のまま、横並びの間隔だけ少し広く
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .pz-row { gap: var(--pz-gap) 2em; }
}