/* InQross custom header — 統合版 2026-09-23（先方パッケージ＋必須修正＋確定仕様） All dimensions are subject to staging measurements. [DOM前提・SWELL]

← wp_body_open で出力（#body_wrap の外）

… / .l-fixHeader / .c-infoBar / .p-spMenu … → 独自ヘッダーと #body_wrap は「兄弟」。SWELL要素はすべて #body_wrap の「子孫」。 */ .inq-header, .inq-header * { box-sizing: border-box; } /* [修正1] SWELL標準ヘッダー本体と追従ヘッダーだけを隠す。旧 `.inq-header ~ .l-header` は兄弟関係が成立せず一致しなかった（＝二重表示）。独自ヘッダーが出力されなかった場合はこの規則も一致しない＝SWELL標準ヘッダーが残る（フェイルセーフ）。ドロワー .p-spMenu とお知らせバー .c-infoBar には触れない。 */ .inq-header ~ #body_wrap .l-header, .inq-header ~ #body_wrap .l-fixHeader { display: none !important; } /* [修正4・ステージング実測 2026-09-23] SWELLの #body_wrap は position:relative; z-index:1 で重ね合わせの文脈を作る。そのままだとドロワー（.p-spMenu z-index:101）が #body_wrap の中に閉じ込められ、外にある独自ヘッダー（z-index:100）がドロワーの上に描かれる。 z-index を auto にすると SWELL 内部の重なり順はそのままで、ヘッダーを #body_wrap の中に置いた場合と同じ比較になる。 */ .inq-header ~ #body_wrap { z-index: auto; } /* [修正2] お知らせバーの absolute 移動と --inq-infobar-height 補正は削除。バーはSWELL標準のまま（ヘッダーの下・非固定・position:relative）。 */ .inq-header { /* [確定仕様] CTA配色。#729DCC は白背景で 2.83:1（WCAG AA不合格）のため文字・枠・塗りには使わない。清水さん判断で変更する場合はこの2行だけ差し替える。 */ --inq-cta: #4a76a4; /* 白背景 4.75:1 */ --inq-cta-hover: #3b5f86; position: sticky; top: 0; z-index: 100; width: 100%; height: 80px; background: #fff; border-bottom: 1px solid #e5e9ed; box-shadow: 0 2px 12px rgba(24, 48, 74, .06); /* グループ規定（_GROUP/フォント指定ルール.md）。ヘッダー内のみ先行適用。サイト全体は MC-297 で是正。 */ font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif; } .inq-header__inner { display: flex; align-items: center; width: min(100%, 1560px); height: 100%; padding: 0 clamp(14px, 2vw, 32px); margin: 0 auto; gap: clamp(12px, 1.8vw, 30px); } .inq-header__brand { display: flex; align-items: center; flex: 0 0 auto; gap: 12px; min-width: 0; } /* [統合版] トップページではロゴを h1 で包む。見た目に影響させない。 */ .inq-header__logoWrap { margin: 0; padding: 0; font-size: inherit; line-height: 0; font-weight: normal; } .inq-header__logo { display: block; flex: 0 0 auto; width: clamp(116px, 11vw, 145px); line-height: 0; } .inq-header__logo img { display: block; width: 100%; height: auto; } .inq-header__descriptor { max-width: 5em; /* 「位置・動作／分析ツール」で折る（6emだと「動作分／析」で折れる） */ font-size: 11px; line-height: 1.35; color: #51606d; font-weight: 600; } .inq-header__nav { min-width: 0; margin-left: auto; } .inq-header__list { display: flex; align-items: center; justify-content: flex-end; gap: clamp(9px, 1.05vw, 18px); padding: 0; margin: 0; list-style: none; } .inq-header__list li { padding: 0; margin: 0; list-style: none; } .inq-header__list a { display: inline-flex; align-items: center; min-height: 44px; color: #263645; font-size: clamp(12px, 1vw, 14px); font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; } .inq-header__list a:hover, .inq-header__list a:focus-visible, .inq-header__list a[aria-current="page"] { color: var(--inq-cta); } .inq-header__actions { display: flex; flex: 0 0 auto; gap: 8px; } /* [確定仕様] CTAはピル形（既存CF7送信ボタン・最終提案書p6・デモv1と統一）。 */ .inq-header__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 12px; border: 1px solid var(--inq-cta); border-radius: 50px; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; } .inq-header__cta--secondary { color: var(--inq-cta); background: #fff; } .inq-header__cta--secondary:hover { color: #fff; background: var(--inq-cta); } .inq-header__cta--primary { color: #fff; background: var(--inq-cta); } .inq-header__cta--primary:hover { color: #fff; background: var(--inq-cta-hover); border-color: var(--inq-cta-hover); } .inq-header a:focus-visible, .inq-header button:focus-visible { outline: 3px solid #fcc800; /* MCイエロー正値 */ outline-offset: 3px; } .inq-header__mobile-actions { display: none; } /* [確定仕様] 960〜1219px は PC表示のまま詰める（補足文を隠す）。旧パッケージは 1219px でモバイル化していたが、SWELLのPC/SP境界は 960px（.pc_/.sp_）。境界をずらすと 960〜1219px で「SWELL側はPC扱い／独自ヘッダーはSP扱い」の不整合が起きる。 */ @media (max-width: 1199px) { .inq-header__descriptor { display: none; } } /* [確定仕様] SWELL準拠の 960px 境界。959px 以下でモバイル表示（SWELL標準ドロワーを使用）。 */ @media (max-width: 959px) { .inq-header { height: 60px; } .inq-header__inner { justify-content: space-between; gap: 8px; padding: 0 14px; } .inq-header__logo { width: clamp(105px, 29vw, 138px); } .inq-header__descriptor, .inq-header__nav, .inq-header__actions { display: none; } .inq-header__mobile-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; } .inq-header__mobile-cta { min-height: 38px; padding: 0 11px; font-size: 12px; } .inq-header__menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; font-size: 21px; } /* Menu links are edited in SWELL's standard menu screen. */ .p-spMenu .inq-menu-download > a { color: var(--inq-cta, #4a76a4); font-weight: 700; } .p-spMenu .inq-menu-contact > a { color: var(--inq-cta, #4a76a4); font-weight: 700; } } @media (max-width: 359px) { .inq-header__inner { padding: 0 8px; } .inq-header__logo { width: 100px; } .inq-header__mobile-actions { gap: 2px; } } @media (prefers-reduced-motion: reduce) { .inq-header__cta { transition: none; } } /* [修正3] 管理バー表示時の sticky 位置補正。旧 `body.admin-bar …` は SWELL では一致しない（admin-bar クラスは #body_wrap 側に付く）。 PHP の is_admin_bar_showing() で独自ヘッダー自身に .inq-header--adminbar を付ける。 WordPress の管理バーは 782px 以下で 46px。 ※600px 以下で absolute になる前提は誤り（ステージング実測 375px で fixed・46px）→ 600px の規則は削除（2026-09-23）。 */ .inq-header--adminbar { top: 32px; } @media (max-width: 782px) { .inq-header--adminbar { top: 46px; } }