/* ============================================================
   法人 後援会申込フォーム 4種 共通ベース (houjin-apply-*.html)
   設計PDF: 09/10/11/12-form-*(領収書 不要/必要 × 個人/法人団体) 完全再現
   設計実測: 1000pt幅ラスタ2084px ÷1.5 = CSS(PC基準幅1389px)
   帯: pale #EBF5F0 一枚 → 波(TOP同形パス) → 白フッター
   実測: badge59x33(必須#A4C2B8/任意#C8E7E9) input h43 border#555(設計=黒ヘアライン)
         行x: badge300 / label371 / input573 (幅600, 2分割288, 小箱93)
         radio23(dot15) checkbox22 select288x43 タイトルピンク#EC78AB
   ページ固有の行間・tail・フッター位置は p-houjin-apply-<variant>.css 側
   ============================================================ */

/* ---------- 帯 (ペール一枚。ヘッダーはabsoluteで上に浮く) ---------- */
.hja-band{background:var(--hj-pale);padding-top:264px}
.hja-wrap{max-width:1389px;margin:0 auto}
.hja-wave-w{background:#fff}

/* ---------- 見出し + 点線 (実測: fs29/設計字送り33px, 点線幅1094)
   注: main.js が .hj-sec-head を1字ずつ inline-block span(.gch) に分割するため
   実効字間は letter-spacing の2倍になる → 33px送り = 29 + 2×.07em ---------- */
.hja-head{margin:0;font-size:29px;letter-spacing:.07em;text-indent:.07em;line-height:1}
.hja-head .hja-pink{color:#EC78AB}
.hja-dots{max-width:1095px;width:79%;margin-top:44px}

/* ---------- フォーム ---------- */
.hja-form{margin:96px 0 0;font-family:var(--font-g)}

.hja-row{display:flex;align-items:center;margin:0 auto 47px;padding-left:300px;min-height:43px}
.hja-row--top{align-items:flex-start}
.hja-row--top .hja-badge{margin-top:5px}
.hja-row--top .hja-lb{margin-top:7px}

.hja-badge{
  flex:none;width:59px;height:33px;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;font-weight:500;letter-spacing:.12em;text-indent:.12em;
}
.hja-badge--must{background:var(--hj-box)}
.hja-badge--opt{background:#C8E7E9}

.hja-lb{
  flex:none;width:202px;margin-left:12px;
  color:var(--hj-ink);font-size:20px;font-weight:300;letter-spacing:.04em;line-height:1.35; /* 設計=GShinMGoPro-Light */
}
.hja-lb-s{font-size:12px;font-weight:500;margin-left:2px;letter-spacing:0}
.hja-lb-note{display:block;font-size:12px;font-weight:500;letter-spacing:.02em;margin-top:2px}

.hja-fields{display:flex;align-items:center;flex:none}

.hja-in{
  height:43px;background:#fff;border:1px solid #555;border-radius:4px;
  padding:0 15px;font-family:var(--font-g);font-size:17px;color:var(--hj-ink);
}
.hja-in::placeholder,.hja-ta::placeholder{color:#AAABAB}
.hja-in:focus,.hja-ta:focus,.hja-select:focus{outline:2px solid var(--hj-mint);outline-offset:-1px}
.hja-in--name{width:288px}
.hja-in--name + .hja-in--name,
.hja-fields .wpcf7-form-control-wrap + .wpcf7-form-control-wrap .hja-in--name{margin-left:23px}
.hja-in--wide{width:600px}
.hja-in--s{width:93px;padding:0 10px}
.hja-hy{width:32px;text-align:center;color:var(--hj-ink);font-size:18px}

.hja-ta{
  width:600px;height:195px;background:#fff;border:1px solid #555;border-radius:4px;
  padding:10px 15px;font-family:var(--font-g);font-size:17px;color:var(--hj-ink);
  resize:none;display:block;
}


/* ---------- Contact Form 7 対応 ----------
   WordPress では入力欄が CF7 の出力に変わり、DOM が静的HTMLと少し違う:
     ・入力欄が <span class="wpcf7-form-control-wrap"> で1つずつ包まれる
       → 隣同士を指定する「+」が効かなくなるので、包み同士でも指定する
     ・ラジオ/チェックは <span class="wpcf7-list-item"><label><input> の入れ子になる
       → 同じ見た目になるようセレクタを足す(値は上の実測値と同一)
   静的HTML(デモ)にはこれらのクラスが存在しないため、デモの表示には影響しない。 */
.hja-fields .wpcf7-list-item{margin:0}

/* ---------- ラジオ (区分) 実測: 径23 / dot16 / 枠=黒ヘアライン / ラベル間14 ---------- */
.hja-radio,
.hja-fields .wpcf7-radio input[type=radio]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:23px;height:23px;margin:0;border:1px solid var(--hj-ink);border-radius:50%;
  background:#fff;cursor:pointer;display:inline-grid;place-content:center;
}
.hja-radio::before,
.hja-fields .wpcf7-radio input[type=radio]::before{content:"";width:16px;height:16px;border-radius:50%;background:transparent}
.hja-radio:checked::before,
.hja-fields .wpcf7-radio input[type=radio]:checked::before{background:var(--hj-ink)}
.hja-rl,
.hja-fields .wpcf7-radio .wpcf7-list-item label,
.hja-fields .wpcf7-checkbox .wpcf7-list-item label{display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  color:var(--hj-ink);font-size:20px;font-weight:500;letter-spacing:.06em}
.hja-rl + .hja-rl,
.hja-fields .wpcf7-radio .wpcf7-list-item + .wpcf7-list-item{margin-left:56px}

/* ---------- チェックボックス 実測: 22角 r3 / 枠=黒ヘアライン ---------- */
.hja-cb,
.hja-fields .wpcf7-checkbox input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:22px;height:22px;margin:0;border:1px solid var(--hj-ink);border-radius:3px;
  background:#fff;cursor:pointer;display:inline-grid;place-content:center;
}
.hja-cb::before,
.hja-fields .wpcf7-checkbox input[type=checkbox]::before{content:"";width:12px;height:12px;
  clip-path:polygon(14% 44%,0 65%,40% 100%,100% 16%,84% 0,38% 72%);
  background:transparent}
.hja-cb:checked::before,
.hja-fields .wpcf7-checkbox input[type=checkbox]:checked::before{background:var(--hj-ink)}
.hja-cl{display:inline-flex;align-items:center;gap:16px;cursor:pointer;
  color:var(--hj-ink);font-size:20px;font-weight:500;letter-spacing:.06em}
.hja-cl + .hja-cl,
.hja-fields .wpcf7-checkbox .wpcf7-list-item + .wpcf7-list-item{margin-left:52px}  /* 設計実測: 2個目チェック左端 x811 (4ページ共通) */

/* ---------- プルダウン (送金予定金融機関) 実測: 288x43 矢印なし ---------- */
.hja-select{
  appearance:none;-webkit-appearance:none;width:288px;height:43px;
  background:#fff;border:1px solid #555;border-radius:4px;
  padding:0 15px;font-family:var(--font-g);font-size:20px;color:var(--hj-ink);
  letter-spacing:.04em;cursor:pointer;
}

/* ---------- 行内注記 (※窓口で振込手数料が…) 実測: x371 fs20 lh28 w400 ---------- */
.hja-note{
  margin:5px 0 29px 371px;color:var(--hj-ink);
  font-size:20px;font-weight:300;letter-spacing:.02em;line-height:28px; /* 設計=GShinMGoPro-Light */
}

/* ---------- 送信ボタン (実測: 116x33 中央 / textarea下60px) ---------- */
.hja-submit{
  display:block;width:116px;height:33px;margin:60px auto 0;
  background:var(--hj-box);color:#fff;border:0;border-radius:4px;cursor:pointer;
  font-family:var(--font-g);font-size:18px;font-weight:500;
  letter-spacing:.55em;text-indent:.55em;line-height:1;
  transition:background .3s var(--ease-soft);
}
.hja-submit:hover{background:var(--hj-box-h)}

/* ---------- 振込口座案内 (実測: fs20 lh30 w400 / ●=CSS円14px) ---------- */
.hja-bank{
  margin-top:127px;font-family:var(--font-g);color:var(--hj-ink);
  font-size:20px;font-weight:300;letter-spacing:.02em;line-height:30px; /* 設計=GShinMGoPro-Light */
}
.hja-bank--l{margin-left:173px;max-width:1120px}   /* 不要ページ: 左173 */
.hja-bank--c{margin-left:301px;max-width:900px}    /* 必要ページ: 左301 */
.hja-bank strong{font-weight:700}
.hja-bank .num{letter-spacing:.238em;white-space:nowrap}  /* 設計実測: 1344844 全幅114.6px (桁広トラッキング) */
.hja-bullet{display:block;font-weight:700;letter-spacing:.04em}
.hja-bullet::before{
  content:"";display:inline-block;width:14px;height:14px;border-radius:50%;
  background:var(--hj-ink);margin-right:14px;
}
.hja-bank-holder{line-height:31px;font-weight:700;letter-spacing:.04em}
.hja-bank > p{margin:0} /* 個別の余白は各ページcssの .hja-bank .hja-bk-* で指定 */
.hja-bank > p.hja-bank-holder{margin-left:28px}  /* 設計実測: 口座名義2行は●リストぶら下げ位置(28px)に字下げ */

/* ---------- メールアドレス(確認)行: 注記を高さ計算から外し、
     必須チップ/入力欄をラベル1行目と天地センター揃え (設計実測: 3者中心y共通=858) ---------- */
@media (min-width:860px){
  .hja-row--email2 .hja-lb{position:relative}
  .hja-row--email2 .hja-lb-note{position:absolute;left:0;top:26px;margin-top:0;white-space:nowrap}
}

/* ---------- フッター間隔 (申込4種の設計実測: 行間99/点線間128/本文間37。ナビ上余白は各ページcss) ---------- */
@media (min-width:860px){
  .hj-fnav-row + .hj-fnav-row{margin-top:59px}
  .hj-foot__dots{margin-top:63px}
  .hj-foot__body{margin-top:33px}
}

/* ============================================================
   SP (〜859px): 縦積みリフロー (配色・書体維持 / タップ44px以上)
   ============================================================ */
@media (max-width:859px){
  .pcbr{display:none}
  .hja-band{padding-top:110px}
  .hja-head{font-size:18px;letter-spacing:.04em;line-height:1.5;padding:0 16px}
  /* SPでタイトルが「…領収書が必要/な方」と泣き別れしないよう
     「／」以降を1塊で折り返す (2026-08-14 QA) */
  .hja-h1b{display:inline-block}
  .hja-dots{width:84%;margin-top:14px}

  .hja-form{margin-top:36px;padding:0 20px}
  .hja-row{flex-wrap:wrap;align-items:center;padding-left:0;margin-bottom:28px;min-height:0}
  .hja-row--top{align-items:center}
  .hja-row--top .hja-badge,.hja-row--top .hja-lb{margin-top:0}

  .hja-badge{width:52px;height:28px;font-size:14px;border-radius:3px}
  /* ラベルが長い行(メール確認)でバッジだけが1行に取り残されないよう、
     ラベルは残り幅に流し込み内部で折り返す (2026-08-14 QA) */
  .hja-lb{width:auto;margin-left:10px;font-size:16px;flex:1;min-width:0}
  .hja-lb-note{display:inline;margin-left:4px}

  .hja-fields{flex:none;width:100%;margin-top:10px;flex-wrap:wrap;gap:10px 0}
  .hja-in{height:44px;font-size:16px;padding:0 12px}
  .hja-in--wide{width:100%}
  .hja-in--name{width:calc((100% - 16px) / 2)}
  .hja-in--name + .hja-in--name{margin-left:16px}   /* CF7時の間隔は下の包み側で指定 */
  .hja-in--s{width:88px}
  .hja-hy{width:24px;font-size:16px}

  /* CF7 対応(スマホ): 入力欄は <span class="wpcf7-form-control-wrap"> で1つずつ包まれる。
     この包みを display:contents で透過させ、入力欄そのものを行の直接の子にする。
     こうすると静的HTML向けの %指定(姓名の半分幅など)がそのまま効く。
     選択肢(ラジオ/チェック)は包みの中にもう1枚 span があるので、行と同じ折り返し規則を与える。 */
  .hja-fields .wpcf7-form-control-wrap{display:contents}
  .hja-fields .wpcf7-form-control-wrap + .wpcf7-form-control-wrap .hja-in--name{margin-left:16px}
  .hja-fields .wpcf7-radio,
  .hja-fields .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:10px 0;width:100%}

  .hja-ta{width:100%;height:180px;font-size:16px}
  .hja-select{width:100%;height:44px;font-size:16px}

  .hja-radio,
.hja-fields .wpcf7-radio input[type=radio]{width:26px;height:26px}
  .hja-rl,
  .hja-fields .wpcf7-radio .wpcf7-list-item label,
  .hja-fields .wpcf7-checkbox .wpcf7-list-item label{font-size:16px;gap:10px;min-height:44px}
  .hja-rl + .hja-rl,
  .hja-fields .wpcf7-radio .wpcf7-list-item + .wpcf7-list-item{margin-left:28px}
  .hja-cb,
.hja-fields .wpcf7-checkbox input[type=checkbox]{width:24px;height:24px}
  .hja-cl{font-size:16px;gap:10px;min-height:44px}
  .hja-cl + .hja-cl,
  .hja-fields .wpcf7-checkbox .wpcf7-list-item + .wpcf7-list-item{margin-left:0}
  .hja-cl{margin-right:24px}

  .hja-note{margin:6px 0 24px;font-size:14px;line-height:1.8}
  .hja-submit{width:160px;height:48px;margin-top:34px;font-size:17px;border-radius:6px}

  .hja-bank{margin-top:56px;font-size:15px;line-height:1.9;padding:0 20px}
  .hja-bank--l,.hja-bank--c{margin-left:0;max-width:none}
  .hja-bank > p.hja-bank-holder{margin-left:20px}  /* SP: ●ぶら下げ位置(11+9px)に合わせる */
  .hja-bank-holder{line-height:1.9}
  .hja-bullet::before{width:11px;height:11px;margin-right:9px}
  /* SPで口座番号が折り返した際、●の真下に落ちず本文位置に揃うぶら下げ (2026-08-14 QA) */
  .hja-bullet{padding-left:20px;text-indent:-20px}
  /* SPで説明3段落(手数料/振込依頼書/持参可)が1塊にならないよう段落間を確保 */
  .hja-bank > p + p{margin-top:14px}
  .hja-bank > p + p.hja-bank-holder{margin-top:4px}
}