.consultant-phase2 {
  --phase2-primary: #004ea2;
  --phase2-primary-deep: #00396f;
  --phase2-primary-soft: #eef4fb;
  --phase2-primary-line: #bcd3ec;
  --phase2-accent: #ffd36a;
  --phase2-accent-deep: #ffc341;
  --phase2-required: #e64b4b;
  --phase2-required-soft: #fff1f1;
  /* 必須バッジ専用の濃い赤（白地・白文字と4.55:1でWCAG AAを満たす） */
  --phase2-required-badge: #d93a3a;
  --phase2-ink: #222;
  --phase2-muted: #626b75;
  --phase2-bg: #f3f7fb;
  --phase2-card: #fff;
  --phase2-line: #dadada;
  --phase2-input-line: #8593a6; /* 入力欄枠のWCAG 1.4.11対応（白地と3.12:1・es-g式と同値） */
  --phase2-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
}

/* naサイトのheader要素は.headerクラスを持たないため、phase2ページでは通常フローに戻す */
html.consultant-form-page body > header {
  position: relative;
}

/* fixedヘッダー用の既存余白をphase2ページでは解除する */
html.consultant-form-page .content {
  margin-top: 0;
}

/* Orix consultant.html と同構成のフッター帯（Pマークの表示切替や文字サイズは共通phase2 CSSが担当。
   帯の背景・幅・余白はOrixサイトのユーティリティCSS由来のため、naではここで供給する） */
html.consultant-form-page .consultant-form-footer {
  margin-top: 0;
}

html.consultant-form-page .consultant-form-footer .footer-wrapper {
  padding: 28px 0 30px;
  background: var(--na-footer-band, #004ea2);
  color: #fff;
}

html.consultant-form-page .consultant-form-footer .inner {
  width: min(1088px, 92%);
  margin: 0 auto;
}

html.consultant-form-page .consultant-form-footer dl {
  margin: 0;
}

html.consultant-form-page .consultant-form-footer .footer-info__cont dt {
  font-weight: 700;
}

html.consultant-form-page .consultant-form-footer .consultant-form-footer__agency dd {
  margin: 0 0 15px;
}

html.consultant-form-page .consultant-form-footer .consultant-form-footer__underwriter dd {
  margin: 0;
}

html.consultant-form-page .consultant-form-footer .copyright {
  padding: 15px 0;
  color: #333;
  font-size: 1.2rem;
  text-align: center;
}

/* キャンペーンバナーをOrix無料相談フォームと同じ幅(PC 637px)に統一（入力・確認共通）。
   naの #form .bnr_img (490px) より優先させるため詳細度を上げ、
   bodyにidが無い確認画面（現状は全幅表示）も同じ幅に揃える */
@media screen and (min-width: 769px) {
  html.consultant-form-page .bnr_img,
  html.consultant-form-page #form .bnr_img {
    max-width: 637px;
    margin-left: auto;
    margin-right: auto;
  }

  html.consultant-form-page .bnr_img img {
    width: 100%;
    height: auto;
  }
}

/* iPhone SE等の狭幅では「相談のきっかけは何ですか？」等のラベル行が
   文字単位で折り返してしまうため、ラベル・補足を単位ごと改行させる（メイリオはYu Gothicより広く1行に収まらない） */
@media screen and (max-width: 480px) {
  .consultant-phase2 .phase2-label-row {
    flex-wrap: wrap;
  }

  .consultant-phase2 .phase2-label-row .phase2-label,
  .consultant-phase2 .phase2-label-row .phase2-hint {
    white-space: nowrap;
  }
}

/* SPでは引受保険会社の前を1行分（本文1.2rem×1.65≒20px）空ける（共通CSSの16pxを上書きするため詳細度を1段上げる） */
@media screen and (max-width: 768.98px) {
  html.consultant-form-page .consultant-form-footer .footer-info .consultant-form-footer__underwriter {
    margin-top: 20px;
  }
}

/* PCフッターもSPと同じくPマークロゴを＜募集代理店＞の左隣に置く（共通phase2 CSSのSP作法をPCへ適用）。
   共通CSSはtheme→本体の順で後読みされるため、PC規則（Pマーク非表示・1カラムgrid）に勝てるよう
   footer要素を足して詳細度を1段上げる */
@media screen and (min-width: 769px) {
  html.consultant-form-page footer.consultant-form-footer .footer-info {
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
  }

  html.consultant-form-page footer.consultant-form-footer .footer-info__cont {
    display: contents;
  }

  html.consultant-form-page footer.consultant-form-footer .consultant-form-footer__agency {
    grid-row: 1;
    grid-column: 2;
  }

  html.consultant-form-page footer.consultant-form-footer .consultant-form-footer__agency dd {
    margin-bottom: 0 !important;
  }

  html.consultant-form-page footer.consultant-form-footer .consultant-form-footer__underwriter {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 20px; /* SPと同じく1行分空ける */
  }

  html.consultant-form-page footer.consultant-form-footer .consultant-form-footer__privacy {
    display: block;
    grid-row: 1;
    grid-column: 1;
    width: 68px;
    max-width: none;
    margin: 0;
    align-self: center;
  }

  html.consultant-form-page footer.consultant-form-footer .consultant-form-footer__privacy > p {
    display: none;
  }

  html.consultant-form-page footer.consultant-form-footer .consultant-form-footer__privacy img {
    width: 68px;
    max-width: none;
  }
}

/* naのリセットCSSがbuttonのtext-alignをstartへ倒すため、phase2内はUAデフォルト同様の中央に戻す
   （CTAの「相談方法を選んでください」・確認画面の「送信する」(input型)等。
   phase2 CSS側で明示指定があるボタンはそちらが優先される） */
.consultant-phase2 button,
.consultant-phase2 input[type="submit"],
.consultant-phase2 input[type="button"] {
  text-align: center;
}

/* naサイト共通CSSのグローバル見出しスタイル（h2 { padding: 30px 0; text-align: center }等）が
   phase2領域に漏れて見出しボックスが膨張するため、phase2内では打ち消してOrixと同じ素の状態に戻す */
.consultant-phase2 h1,
.consultant-phase2 h2,
.consultant-phase2 h3,
.consultant-phase2 h4 {
  padding: 0;
  text-align: inherit;
}

/* CTAボタンをnaサイトの相談ボタン（.btn_soudan=コーラル#ee785d・角丸4px）に合わせる。
   立体影・押下/ホバーはphase2の作法を維持し、濃色はコーラルの深色#c3624cで統一。
   デザイナーレビュー(2026-08-31)反映: コーラル#ee785d上の白文字は2.81:1で大文字基準3:1未達のため、
   文字を濃色#222へ（#ee785dと5.7:1・hover #c3624cとも3.9:1=20px太字の大文字基準を充足） */
html.consultant-form-page .consultant-phase2 #submit-btn.is-ready {
  background-color: #ee785d;
  box-shadow: 0 7px 0 #c3624c;
  color: #222;
}

html.consultant-form-page .consultant-phase2 #submit-btn.is-ready:hover,
html.consultant-form-page .consultant-phase2 #submit-btn.is-ready:focus-visible {
  background-color: #c3624c;
}

html.consultant-form-page .consultant-phase2 #submit-btn.is-ready:active {
  box-shadow: 0 2px 0 #c3624c;
}

html.consultant-form-page .consultant-phase2 #confirm-send-button:not(:disabled) {
  background-color: #ee785d;
  box-shadow: 0 7px 0 #c3624c;
  color: #222;
}

html.consultant-form-page .consultant-phase2 #confirm-send-button:not(:disabled):hover,
html.consultant-form-page .consultant-phase2 #confirm-send-button:not(:disabled):focus-visible {
  background-color: #c3624c;
}

html.consultant-form-page .consultant-phase2 #confirm-send-button:not(:disabled):active {
  box-shadow: 0 2px 0 #c3624c;
}

/* ボタン形状もサイトの相談ボタン（角丸4px）に統一（無効/有効共通・確認画面の戻る/送信も） */
html.consultant-form-page .consultant-phase2 #submit-btn,
html.consultant-form-page .consultant-phase2 #confirm-send-button,
html.consultant-form-page .consultant-phase2 .phase2-confirm-back {
  border-radius: 4px;
}

/* SP追尾バーの電話ボタンを、SPヘッダーの電話アイコン(.telicon=赤#e43c3c・角丸3px・影2px 2px 4px)に統一 */
html.consultant-form-page .consultant-phase2 .phase2-cta-tel {
  border-color: #e43c3c;
  border-radius: 3px;
  color: #e43c3c;
}

html.consultant-form-page .consultant-phase2 .phase2-cta-bar:not(.is-ready) .phase2-cta-tel {
  background: #e43c3c;
  box-shadow: 2px 2px 4px #62626296;
  color: #fff;
}

/* naサイトreset.cssの input/select { appearance: none } でネイティブ描画が消え、
   確認画面の同意チェックボックスが不可視・selectの矢印が消えるため復元する
   （参照実装のOrixはresetにappearance指定が無くネイティブ描画前提の設計） */
html.consultant-form-page .consultant-phase2 .phase2-agreement input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: auto;
}

html.consultant-form-page .consultant-phase2 select {
  -webkit-appearance: menulist;
  appearance: auto;
}

/* サイト共通の.teliconはposition:fixed（固定ヘッダー前提）のため、ヘッダーをrelative化した
   フォームでは電話アイコンだけが単独でスクロール追従してしまう。
   ハンバーガー（.menu_btn=absolute）と同様にヘッダー内へ固定する */
html.consultant-form-page .telicon {
  position: absolute;
}