/* ==========================================================================
   ww-pz-form.css — writewired.jp 向け Plain フォームテーマ v2 (2026-08-27)
   v2: 色・ボタン形をサイトの feature-block.css（--ww-accent 等）に合わせた
   --------------------------------------------------------------------------
   pz-form.css の後に読み込む。構造（クラス名）は触らず、
   変数の上書きと、サイトの意匠に合わせる数行だけを書く。
   同じセレクタは後勝ちで上書きされるので !important は使わない。

   合わせた先（writewired.jp 現行）
   - 本文 15px / Noto Sans JP
   - ブランドのオレンジ（ナビ・帯・リンク）
   - 見出しの左オレンジ罫（機能リファレンスの「〜とは？」と同じ）
   - 角丸はほぼ無し・罫線は薄いグレー
   ========================================================================== */

.pz-form {
  /* 色 */
  --pz-accent:         #F28C00;   /* = feature-block.css の --ww-accent */
  --pz-accent-text:    #ffffff;
  --pz-text:           #1f2937;   /* = --ww-text */
  --pz-muted:          #6b7280;   /* = --ww-muted */
  --pz-border:         #e5e7eb;   /* = --ww-border（入力欄は少し濃く下で上書き） */
  --pz-border-focus:   #F28C00;
  --pz-bg:             #ffffff;
  --pz-bg-confirm:     #f5f5f5;
  --pz-required:       #d35400;   /* サイトのボタンhover色。赤でなく濃いオレンジで統一 */
  --pz-error-bg:       #fff6ec;   /* サイトの btn-outline hover と同じ薄橙 */
  --pz-error-border:   #f3c892;   /* サイトの kpi 枠の破線色 */
  --pz-success-bg:     #f3f8ee;
  --pz-success-border: #bfd9a8;

  /* 寸法・書体 */
  --pz-font:           "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --pz-font-size:      15px;      /* サイトの body と同じ。html{font-size:62.5%} に影響されない */
  --pz-line:           1.7;
  --pz-radius:         6px;
  --pz-gap:            1.4em;
  --pz-input-height:   2.7em;
  --pz-label-weight:   700;
  --pz-max-width:      100%;
}

/* --------------------------------------------------------------------------
   見出し: サイトの h2 と同じ、左にオレンジの縦罫
   -------------------------------------------------------------------------- */
.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: #fff3e6;               /* サイトの Q バッジと同じ */
  color: #b45309;
  border-radius: 999px;
  font-size: .72em;
  padding: .3em .6em;
}
.pz-hint, .pz-help { color: var(--pz-muted); }

/* --------------------------------------------------------------------------
   入力欄: 罫線は薄く、フォーカスだけオレンジ
   -------------------------------------------------------------------------- */
.pz-input {
  border-color: #d1d5db;             /* 本文罫(#e5e7eb)より一段濃く。薄背景の上でも輪郭が残る */
  border-radius: var(--pz-radius);
}
.pz-input:focus {
  border-color: var(--pz-accent);
  box-shadow: 0 0 0 3px rgba(242, 140, 0, .18);
}
.pz-choice__item input { accent-color: var(--pz-accent); }
.pz-choice { gap: .5em 1.5em; }

/* エラー時: 赤を使わない。サイトの橙〜焦げ茶の範囲で「未入力」を示す */
.pz-field.has-error .pz-label { color: #b45309; }
.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(211, 84, 0, .18); }
.pz-messages {
  background: #fff3e6; border: 0; border-left: 4px solid var(--pz-accent);
  border-radius: 0 var(--pz-radius) var(--pz-radius) 0; color: #7a3f00;
}
.pz-messages p, .pz-messages li { margin: .15em 0; }
.pz-complete { background: #fff6ec; border: 0; border-left: 4px solid var(--pz-accent);
  border-radius: 0 var(--pz-radius) var(--pz-radius) 0; }

/* --------------------------------------------------------------------------
   ボタン: サイトの帯のボタンと同じ、オレンジ地・白文字・角はほぼ直角
   -------------------------------------------------------------------------- */
.pz-btn {
  border-radius: 999px;              /* サイトの .btn と同じピル型 */
  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: #d35400; border-color: #d35400; filter: none; }  /* = サイトの .btn-primary:hover */
.pz-btn:not(.pz-btn--primary) { color: #000; border-color: #ffe0bf; background: #fff; }   /* = サイトの .btn-outline */
.pz-btn:not(.pz-btn--primary):hover { background: #fff6eb; }
.pz-btn:focus-visible { outline: 3px solid rgba(242, 140, 0, .35); }

/* --------------------------------------------------------------------------
   確認画面: 見出し列を薄灰にして、サイトの FAQ 枠と同じ質感に
   -------------------------------------------------------------------------- */
.pz-confirm { border-radius: 0; }
.pz-confirm__list dt { background: var(--pz-bg-confirm); color: var(--pz-text); }

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