/* ============================================================
   法人 お問い合わせ (houjin-contact.html) — 設計PDF「08-お問い合わせ」完全再現
   設計実測: 1000pt幅ラスタ2084px ÷1.5 = CSS(PC基準幅1389px)
   帯: pale #EBF5F0 一枚 → 波(TOP同形パス・62px沈み) → 白フッター
   実測: badge59x33(必須#A4C2B8/任意#C8E7E9) input h43 border#5C5D5C
         (罫線はラスタ実測 純色#545655・幅0.79css px。1px CSS罫線の見かけ等価=#5C5D5C)
         行x: badge300 / label371 / input573 (幅600, 氏名288x2, 小箱93)
   ============================================================ */

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

/* ---------- 見出し + 点線 (subpage実測: ls.15em / 点線幅1094) ---------- */
.hjc-head{margin:0;letter-spacing:.15em;text-indent:.15em}
.hjc-dots{max-width:1095px;width:79%;margin-top:27px}

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

.hjc-row{display:flex;align-items:center;margin:0 auto 47px;padding-left:300px}
.hjc-row--ta{align-items:flex-start;margin-top:60px}
.hjc-row--ta .hjc-badge{margin-top:5px}
.hjc-row--ta .hjc-lb{margin-top:7px}

.hjc-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;
}
.hjc-badge--must{background:var(--hj-box)}
.hjc-badge--opt{background:#C8E7E9}

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

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

.hjc-in{
  height:43px;background:#fff;border:1px solid #5C5D5C;border-radius:4px;
  padding:0 15px;font-family:var(--font-g);font-size:17px;color:var(--hj-ink);
}
.hjc-in::placeholder,.hjc-ta::placeholder{color:#AAABAB}
.hjc-in:focus,.hjc-ta:focus{outline:2px solid var(--hj-mint);outline-offset:-1px}
.hjc-in--name{width:288px}

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

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

/* ---------- 送信ボタン (実測: 116x33 中央 / textarea下61px) ---------- */
.hjc-submit{
  display:block;width:116px;height:33px;margin:61px 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);
}
.hjc-submit:hover{background:var(--hj-box-h)}

/* ---------- フッター間隔 (contact設計08-2実測。本ページのみ上書き) ---------- */
@media (min-width:860px){
  .hj-foot__nav{padding-top:43px}
  .hj-fnav-row + .hj-fnav-row{margin-top:62px}
}

/* ============================================================
   SP (〜859px): 縦積みリフロー (配色・書体維持 / タップ44px以上)
   ============================================================ */
@media (max-width:859px){
  .hjc-band{padding-top:110px}
  .hjc-head{letter-spacing:.15em}
  .hjc-dots{width:84%;margin-top:14px}

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

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

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

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


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

  .hjc-submit{width:160px;height:48px;margin-top:34px;font-size:17px;border-radius:6px}

  .hjc-tail{padding-bottom:70px}
}