@charset "utf-8";
/*
 * Hasegawa global header layer
 * 配置先: believe_tcd122_child/assets/css/hs-global-header.css
 * 状態:   未承認。ユーザー承認前に本番へ転送しない。
 *
 * 目的:
 *   1. PCヘッダーバー右端のCTA「無料お見積もり・ご相談はこちら」を、
 *      ナビ項目ではなくボタンとして認識できる見た目にする。
 *   2. グローバルナビの状態表示（現在地・hover）をブランド青にし、
 *      ナビ段の背景を上段と分ける。ナビの基調は白のまま変えない。
 *
 * 適用範囲:
 *   - 全ページ共通のヘッダーだけを対象とする。本文へは一切作用しない。
 *   - `.hs-ui` 配下の固定ページCSSとは独立した層として扱う。
 *   - CTAは `.p-header-bar_top` 配下へscopeする。親テーマが991px以下で
 *     `.p-header-bar_top` を `display:none` にするため、自動的にPC専用になる。
 *     SPの `.header_button_sp` は対象外。
 *   - ナビは `@media (min-width: 992px)` で囲む。`.p-header-bar` はSPでは
 *     モバイルヘッダー（ロゴ＋ハンバーガー）として使われるため巻き込まない。
 *
 * 詳細度:
 *   親テーマと同等以上のセレクタにし、子テーマCSSが後から読まれる順序で勝たせる。
 *   `!important` は使わない。
 *
 * テーマオプションのアクセント色は変更しない:
 *   `--tcd-accent-color` は `#323232` で、親テーマCSS内で107箇所使われている
 *   （サブメニュー背景、各種見出し、ボタン等）。オプション側で変えると
 *   サイト全体へ波及するため、ここでヘッダーだけを上書きする。
 *
 * 変更しないもの:
 *   ボタンの文言、リンク先、アイコン、メニュー項目はTCDテーマオプションの設定を使う。
 *   5pxバーの移動挙動はテーマJSのまま。ここでは色だけ変える。
 *   親テーマのファイルは変更しない。
 */

.p-header-bar_top .header_button {
  gap: 10px;
  padding-inline: 32px;
  /* 塗り面そのものが境界になるため、親テーマの区切り線は消す */
  border-left: 0;
  color: #fff;
  /* 強み・会社概要・サービス各ページで使用中のブランド青（--hs-blue と同値）。
     白文字とのコントラスト比は12.9:1でWCAG AAAを満たす。 */
  background-color: #005aa0;
  transition: background-color .3s ease;
}

.p-header-bar_top .header_button svg {
  /* 親テーマの34pxは塗り面の中では大きすぎるため、ラベル15pxに合わせる */
  font-size: 26px;
}

.p-header-bar_top .header_button_label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}

@media (any-hover: hover) {
  .p-header-bar_top .header_button:hover {
    /* 親テーマのhoverは文字色を#323232へ変えるだけで、黒文字からの変化が見えない */
    color: #fff;
    background-color: #00477f;
  }
}

.p-header-bar_top .header_button:focus-visible {
  /* 強みページ・会社概要ページの .hs-ui a:focus-visible と同じ黄。
     塗り面の内側へ出すため offset は負値にする。 */
  outline: 3px solid #f6c343;
  outline-offset: -5px;
}

/* --------------------------------------------------------------------------
 * グローバルナビ（PCのみ）
 * 基調は白のまま。状態表示だけをブランド青にする。
 * -------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* ナビ段の背景。上段（ロゴ＋CTA）と役割を分ける。
     値は hs-ui-foundation.css の --hs-gray と同じ。 */
  .p-header-bar {
    background-color: #f8fafc;
  }

  /* 現在地。親テーマは color:var(--tcd-accent-color)=#323232 で、
     通常の #000 との差が実質ゼロになっている。
     セレクタは親テーマJS（main.js）の現在地判定と同じ3条件に揃える。
       a[aria-current="page"] → 固定ページ・アーカイブ
       li.current-menu-item   → 単一記事（/office-ac/ 等。aria-currentは付かない）
       li.current-menu-ancestor → 下層ページ用。サービス詳細はPHP側で付与する
     揃えないと、バーだけ青くて文字が黒いページが出る。 */
  .p-header-nav__list > li > a[aria-current="page"],
  .p-header-nav__list > li.current-menu-item > a,
  .p-header-nav__list > li.current-menu-ancestor > a {
    color: #005aa0;
    font-weight: 700;
  }

  /* 現在地とhoverを示す5pxバー。位置と幅はテーマJSが --bar-w / --bar-x へ入れる。
     ここでは色だけ変え、移動の挙動には触らない。 */
  .p-header-nav__list::after {
    background: #005aa0;
  }

  .p-header-nav__list > li > a:focus-visible {
    outline: 3px solid #f6c343;
    outline-offset: -6px;
  }
}

@media (min-width: 992px) and (any-hover: hover) {
  .p-header-nav__list > li:hover > a {
    color: #005aa0;
  }
}