/* =========================================================== 00-header — 全ページ共通ヘッダー（partials/header.html）実測済み: ロゴ左端 X=42（= --gutter） PROVISIONAL: 高さ・ナビの字送り・ボタン寸法は未実測。カンプ観察ベースの暫定値。実測時にここを直す。 =========================================================== */ /* カンプの `固定` レイヤーどおり、地を持たずコンテンツの上に浮かせる。プロトタイプでもスクロール追従＋背景なしで描画されることを確認済み。 sticky ではなく fixed。sticky だとヘッダーが自分の場所を占有し、その背後には .page の --bg-base が出るため、白いヒーローとの間に境目ができてしまう。fixed で流れから外し、ヒーローを最上部まで伸ばして（padding-top で見出し位置を作る）カンプと同じ重なりにする。 ⚠️ 既知の課題: 暗い CAREERS セクションの上に来るとナビの黒文字がほぼ読めなくなる。カンプ自体が同じ状態なので、意図的にそのまま再現している（A案で合意）。文字色の反転で解決する場合は B案。 */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; /* 実測: Figma の aixeed_logo 1 が Y=37 / H=28。行の高さ（ボタン約36px）の中央にロゴが来るので上余白は 33px。 */ padding-block: 33px 24px; background: transparent; } .site-header__inner { display: flex; align-items: center; gap: 40px; } .site-header__logo { flex: none; } /* 実測: Figma の aixeed_logo 1 が 113×28 */ .site-header__logo-img { width: 113px; height: auto; /* width/height 属性の打ち消し（必須） */ } .site-header__panel { display: contents; } .site-header__nav { margin-inline: auto; } .site-header__list { display: flex; align-items: center; gap: 28px; /* PROVISIONAL */ font-size: 13px; /* PROVISIONAL */ line-height: 1; } .site-header__list a { padding-bottom: 4px; transition: opacity var(--dur) var(--ease); } /* カンプでは「事業概要」に下線が入っている（現在地表示） */ .site-header__list a.is-current { border-bottom: 1px solid currentColor; } .ext-mark { margin-left: 2px; font-size: 0.9em; } .site-header__actions { display: flex; align-items: center; gap: 12px; /* PROVISIONAL */ flex: none; } /* --- ハンバーガー（PCでは出さない） -------------------------- */ .site-header__toggle, .site-header__close { display: none; } /* =========================================================== TB / SP — カンプが無いので変換設計。 1099px 以下でナビをパネルに畳む。js/nav.js がに .is-nav-open を付け外しする（ブレークポイントは nav.js と揃えること）。 =========================================================== */ @media (max-width: 1099px) { .site-header__inner { justify-content: space-between; gap: 16px; } .site-header__toggle { display: grid; place-items: center; position: relative; width: 44px; /* タップ領域 44px 確保 */ height: 44px; margin-left: auto; } /* カンプ実測（2026-08-12 / SPフレーム top_pc の Group 409）: ハンバーガー本体 W40 × H8 線 #000000 / 太さ1 / 位置中央親 Group 424 X12 W344 → 右端356（画面右から19px） Group 409 は X304（親基準）→ 絶対 316、右端 356 で親の右端に接する。 H8 の中に太さ1の線が2本＝上端と下端に1本ずつ。中心からの振り分けは ±3.5px（外寸 1 + 7 = 8）。 ⚠️ 以前は 3本線・幅22px・太さ1.5px だった。いずれも誤り。線の実体は ::before / ::after の2本だけで、本体は当たり判定用の器。開くと本体は透明のまま2本が回転して ✕ になる。ボタンは44×44（タップ領域の確保）。線40pxを中央に置くので線の右端は355となり、カンプの356と1pxずれる。丸めの範囲として許容。 */ .site-header__bars { display: block; width: 40px; height: 1px; background: transparent; } .site-header__bars::before, .site-header__bars::after { content: ''; display: block; position: absolute; width: 40px; height: 1px; background: var(--text); } .site-header__bars::before { transform: translateY(-3.5px); } .site-header__bars::after { transform: translateY(3.5px); } .site-header__panel { display: flex; position: fixed; inset: 0; z-index: 30; flex-direction: column; justify-content: center; gap: 48px; padding: 32px; background: var(--bg-base); visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); } .is-nav-open .site-header__panel { visibility: visible; opacity: 1; } .is-nav-open { overflow: hidden; } .site-header__close { display: grid; place-items: center; position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; } .site-header__close::before, .site-header__close::after { content: ''; position: absolute; width: 22px; height: 1.5px; background: var(--text); } .site-header__close::before { transform: rotate(45deg); } .site-header__close::after { transform: rotate(-45deg); } .site-header__nav { margin-inline: 0; } .site-header__list { flex-direction: column; align-items: flex-start; gap: 24px; font-size: 18px; } .site-header__actions { flex-direction: column; align-items: stretch; gap: 12px; } .site-header__actions .btn-pill { height: 48px; } } /* =========================================================== SPメニュー（カンプ `menu_sp` 375×632）構成: 白帯にロゴ＋✕ → 濃色(#1F1F1F)の本体 → 内部ナビ4つ → 区切り線 → 外部サービス4つ → 最下部に白い全幅の「お問い合わせ」ボタン。重なり: カンプでは開いても白いヘッダー帯（ロゴ）が残る。そこでパネルを **ヘッダーより下**（z-index 10 < 20）に敷き、ヘッダー側に白背景を付けて上から塗らせている。パネル自身に帯を持たせるとロゴの二重定義になるため。 PCヘッダーとは並びもラベルも違うのでリストを分けている（「事業概要」↔「提供サービス」のようにラベルが違う）。 PROVISIONAL: 文字サイズ・余白はカンプ画像からの目測。Figma未実測。 =========================================================== */ /* 既定（PC）ではSP用リストを出さない。 */ .site-header__list--sp { display: none; } @media (max-width: 1099px) { .site-header__list--pc { display: none; } .site-header__list--sp { display: block; } /* 開いている間だけヘッダーを白帯にする（パネルの上に重なる）。 */ .is-nav-open .site-header { background: #fff; } /* ハンバーガーを✕に。パネル内の閉じるボタンはカンプに無いので使わない。 */ .is-nav-open .site-header__bars::before { transform: rotate(45deg); } .is-nav-open .site-header__bars::after { transform: rotate(-45deg); } .site-header__close { display: none; } .site-header__panel { z-index: 10; /* ヘッダー(20)の下 */ justify-content: flex-start; gap: 0; /* 上余白はヘッダーの実高ぶん（実測 101px）。左右 20px。ヘッダーのロゴが x=20 にあり、真上のロゴと文字の頭を揃えるため。本文セクションも 20px に統一済み（2026-08-12）。 */ padding: 101px 20px 0; background: #1f1f1f; } .site-header__nav { flex: 1; /* ボタンを最下部へ押し下げる */ padding-top: 12px; /* PROVISIONAL */ } .site-header__list--sp a { display: block; padding-block: 11px; /* PROVISIONAL */ color: #fff; font-size: 15px; /* PROVISIONAL */ line-height: 1.6; text-decoration: none; } /* 内部ナビと外部サービスの境目に区切り線（カンプにある）。 */ .site-header__list--services { margin-top: 18px; /* PROVISIONAL */ padding-top: 18px; /* PROVISIONAL */ border-top: 1px solid rgb(255 255 255 / 0.3); } /* 最下部の白い全幅ボタン。パネルの左右余白を打ち消して端まで伸ばす。 */ .site-header__actions { margin-inline: -20px; } .site-header__actions .btn-pill--solid { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; /* PROVISIONAL */ border-radius: 0; background: #fff; color: #1a1a1a; font-size: 15px; } }