.consultant-phase2 {
  /* デザイナーレビュー(2026-08-31)反映: 旧主色#cc0022はエラー色(#e64b4b)と色相がH10°しか
     離れておらず「選択中」と「エラー」が紛らわしいため、TOPページ実物のオレンジ
     (#insurance-list h3 の#ed8b00)へ変更。エラー系(--phase2-required*)は不変。
     明るいオレンジ上の白文字は2.53:1でAA未達のため、乗せる文字は#222(6.28:1)に統一する（下部参照） */
  --phase2-primary: #ed8b00;
  /* deepは影と「白地・薄地(soft)に載る文字色」を兼ねる変数。レビュー案の#c97400は通常サイズ文字で
     4.5:1未達（白地3.51:1・soft地3.15:1）のため、同色相のまま#9c5a00（白地5.4:1・soft地4.9:1）へ濃くする。
     hover背景だけはデザイナー指定どおり#c97400をハードコードで維持（下のCTA節参照） */
  --phase2-primary-deep: #9c5a00;
  --phase2-primary-soft: #fdf1e0; /* 選択中カードの薄い背景 */
  --phase2-primary-line: #f7cf90; /* 選択できるカードの通常時の枠 */
  --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: #f7f5f2;
  --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: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* Orix/naでは中央寄せをサイト共通の .inner { margin: 0 auto } に依存しているが、
   himawariのCSSには .inner 定義が無いため、phase2コンテナの中央寄せをここで供給する */
html.consultant-form-page .consultant-phase2 > .inner {
  margin-left: auto;
  margin-right: auto;
}

/* himawariサイトの共通ヘッダーはfixedのため、phase2ページでは通常フローに戻す */
html.consultant-form-page #header {
  position: relative;
}

/* フッターは document.php と同じサイト共通スタイル（common.cssのfooter系）を基本とし、
   相談フォームのみ住所を代理店/引受保険会社の2ブロックに分割して
   PC/SPともPマークを＜募集代理店＞の左隣へ置く（Orix/na/anshinと同じ作法） */
html.consultant-form-page footer {
  margin-top: 0;
}

html.consultant-form-page footer .footer-inner {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 12px;
}

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

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

html.consultant-form-page footer .footer-address__underwriter {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 16px 0 0;
}

/* Pマークは募集代理店ブロックの縦中央に68pxロゴのみ表示
   （common.cssの height:120px / width:auto !important / SPのwidth:50%を上書き） */
html.consultant-form-page footer .footer-right {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}

html.consultant-form-page footer .footer-right img {
  width: 68px !important;
  height: auto;
  margin: 0;
}

/* 共通phase2 CSSにはSTEPバーactive・主要ボタンのホバー色として #2b75c8（青）が
   ハードコードされているため、ひまわりのオレンジへ上書きする。
   明るいオレンジ上の白文字は2.53:1のため文字は濃色#222（6.28:1）にする */
html.consultant-form-page .consultant-phase2 .l-progressbar__item.active {
  background: #ed8b00;
  color: #222;
}

html.consultant-form-page .consultant-phase2 .l-progressbar__item.active:not(:last-child)::after {
  border-left-color: #ed8b00;
}

/* デザイナーレビュー反映: 旧CTAグラデ(#fc7e7e→#ffc267)は終端で白文字1.60:1とほぼ読めないため廃止し、
   単色オレンジ（共通CSSの var(--phase2-primary)=#ed8b00・立体影も共通の作法に戻す）＋濃色文字#222（6.28:1）へ。
   共通CSSのhover(#2b75c8 青ハードコード)は深色#c97400で上書きする（#222と4.53:1でAA充足） */
html.consultant-form-page .consultant-phase2 #submit-btn.is-ready {
  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: #c97400;
}

html.consultant-form-page .consultant-phase2 #confirm-send-button:not(:disabled) {
  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: #c97400;
}

/* SP追尾バーの電話ボタンを、SPヘッダーの電話アイコン(a.nav-tel=SOMPO赤#c02・角丸0.4rem・影なし)に統一 */
html.consultant-form-page .consultant-phase2 .phase2-cta-tel {
  border-color: #cc0022;
  border-radius: 4px;
  color: #cc0022;
}

html.consultant-form-page .consultant-phase2 .phase2-cta-bar:not(.is-ready) .phase2-cta-tel {
  background: #cc0022;
  box-shadow: none;
  color: #fff;
}

@media (hover: hover) {
  html.consultant-form-page .consultant-phase2 .reserve-arrow:not(.is-selected):not(.is-active):not(
      [aria-pressed="true"]
    ):not(:disabled):not(:has(input:checked)):not(:has(input:disabled)):hover {
    background: #c97400;
  }
}

/* 見出し下の✓チップも共通CSSに#3281dd(青)がハードコードされているためオレンジに上書き
   （白✓は2.53:1のため濃色#222へ） */
html.consultant-form-page .consultant-phase2 .phase2-trust span::before {
  background: #ed8b00;
  color: #222;
}

/* デザイナーレビュー反映: 背景がオレンジ(var(--phase2-primary))になる箇所は白文字だと
   2.53:1でAA未達のため、文字・アイコンを濃色#222（6.28:1）へ上書きする。
   共通CSS内の background: var(--phase2-primary) 全箇所を検索して網羅
   （レビュー指定の7箇所＋検索で見つけたFPカルーセル矢印・aria-pressed系の変化形） */
html.consultant-form-page .consultant-phase2 .reserve-calendar-day.is-active,
html.consultant-form-page .consultant-phase2 .reserve-calendar-day[aria-pressed="true"],
html.consultant-form-page .consultant-phase2 .reserve-calendar-day.is-active .reserve-calendar-weekday,
html.consultant-form-page .consultant-phase2 .reserve-calendar-day[aria-pressed="true"] .reserve-calendar-weekday,
html.consultant-form-page .consultant-phase2 .reserve-time__btn.is-selected,
html.consultant-form-page .consultant-phase2 .reserve-time__btn[aria-pressed="true"],
html.consultant-form-page .consultant-phase2 .reserve-arrow,
html.consultant-form-page .consultant-phase2 :is(.phase2-method-option, .phase2-segment, .phase2-topic-chip).is-selected::after,
html.consultant-form-page .consultant-phase2 :is(.phase2-method-option, .phase2-segment, .phase2-topic-chip, .reserve-fp-card):has(input:checked)::after,
html.consultant-form-page .consultant-phase2 .reserve-fp-card.is-selected::after,
html.consultant-form-page .consultant-phase2 .reserve-fp-card[aria-pressed="true"]::after,
html.consultant-form-page .consultant-phase2 .phase2-complete-icon,
html.consultant-form-page .consultant-phase2 .complete-flow__num {
  color: #222;
}

/* サイドバー電話番号の文字色 primary(#ed8b00) は白地2.53:1で大文字基準3:1も割るため deep へ（5.4:1） */
html.consultant-form-page .consultant-phase2 .phase2-side__tel a {
  color: var(--phase2-primary-deep);
}

/* フォーカスインジケータ（枠色変化・アウトライン）も primary のままだと白地2.53:1で
   3:1を割るため deep へ。共通CSSの青系フォーカスグロー(rgba(50,129,221,.18))もオレンジへ差し替える */
html.consultant-form-page .consultant-phase2 input:focus,
html.consultant-form-page .consultant-phase2 select:focus,
html.consultant-form-page .consultant-phase2 textarea:focus {
  border-color: var(--phase2-primary-deep);
  box-shadow: 0 0 0 3px rgba(237, 139, 0, 0.18);
}

/* 選択肢カードのホバー影も共通CSSの青系(rgba(38,99,171,.08))からアンバー系へ */
@media (hover: hover) {
  html.consultant-form-page .consultant-phase2 :is(
      .phase2-method-option,
      .phase2-segment,
      .phase2-topic-chip,
      .phase2-agreement,
      .reserve-calendar-day,
      .reserve-time__btn,
      .reserve-fp-card,
      .reserve-week__btn,
      .phase2-zip-row button,
      .phase2-reservation-retry
    ):not(.is-selected):not(.is-active):not([aria-pressed="true"]):not(:disabled):not(
      :has(input:checked)
    ):not(:has(input:disabled)):hover {
    box-shadow: 0 2px 6px rgba(156, 90, 0, 0.1);
  }
}

html.consultant-form-page .consultant-phase2 button:focus-visible,
html.consultant-form-page .consultant-phase2 a:focus-visible,
html.consultant-form-page .consultant-phase2 .phase2-method-option:focus-within,
html.consultant-form-page .consultant-phase2 .phase2-segment:focus-within,
html.consultant-form-page .consultant-phase2 .phase2-topic-chip:focus-within,
html.consultant-form-page .consultant-phase2 .phase2-agreement:focus-within {
  outline-color: var(--phase2-primary-deep);
}

/* himawariサイトreset.cssの input { -webkit-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;
}

/* フォームのヘッダーは離脱防止で #header a { pointer-events: none } としているが、
   電話アイコンは電話モーダル起動のため有効へ戻す（完了ページには無効化自体が無く無害） */
html.consultant-form-page #header a.nav-tel {
  pointer-events: auto;
  cursor: pointer;
}

/* 電話アイコンの定位置 right:6.5rem はハンバーガー(right:1rem)の左隣という配置。
   入力・確認(.form)はハンバーガー非表示のため右端が1個分空いて見える→右端へ詰める。
   完了(.complete)はハンバーガーが表示されるため定位置のまま */
@media (max-width: 768px) {
  html.consultant-form-page body.form .nav-1 a.nav-tel {
    right: 1rem;
  }
}