/* =====================================================================
   bySENSE OFFICIAL WEBSITE — components.css
   越境共通部品: header / footer / read-more / band / section helpers /
   vertical deco / hairlines / loading
   全ページ(5枚)がこれを使う。値は Figma (1:27 系) 実測準拠。
   ===================================================================== */

/* ============ HEADER (全ページ同一・越境) ============ */
/* hero 上は透過オーバーレイ・白ナビ。スクロールで明背景(#d0d0d0系)へ。 */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  color: var(--white);              /* 常に白文字（メモ準拠）[Figma実測] */
  --logo-ink: var(--white);
  /* 帯なしでも明背景で視認できるよう微シャドウ（帯ではない） */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .30);
  transition: color .4s var(--ease);
}
.site-header .logo-mark { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); }
.site-header__inner {
  position: relative;
  /* [Phase2.5] stage と同じ流体化+フロア（width:100%+max-width:1536+min-width:1200+margin:auto）で
     ロゴ/ナビをコンテンツの中央寄せ・フロアに一致（旧 固定1536+負マージン中央クリップを置換・1536描画は不変）。 */
  width: clamp(var(--floor), 100vw, var(--frame));
  margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2);
  margin-right: 0;
  height: 100%;
}
/* ロゴ: x=64, ナビ群右端=1440+48 → 1536-64=1472 まで [1:84 / 1:94] */
.logo {
  position: absolute; left: calc(64 / 1536 * 100%); top: 51px;   /* [Phase2.5] content と同じ比例化（旧 var(--margin)=64固定 はcontentとドリフト） */
  display: inline-flex; align-items: flex-end; gap: 7px; color: inherit;
}
/* ロゴ: 支給ワードマーク bysense-logo.svg を currentColor マスクで描画（白/濃を継承） */
/* インラインSVG ワードマーク容器。外部SVGの CSS mask は描画されない環境があるため、
   site.js が <svg fill="currentColor"> を内側へ注入(再着色は currentColor で継承) [§1 ロゴ崩れ修正]。 */
.logo-mark {
  display: inline-block; line-height: 0; color: inherit;
  width: 112px; height: 28px;
}
.logo-mark svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* global nav: 右寄せクラスタ。ナビ末端 x≈1324, 右端アイコン x=1440(w48) */
.gnav {
  position: absolute; right: calc(64 / 1536 * 100%); top: 56px;   /* [Phase2.5] 比例化（旧 var(--margin)固定） */
  display: flex; align-items: center; gap: 42px;
}
.gnav__link {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-nav);
  line-height: 16px; letter-spacing: 0; position: relative;
  white-space: nowrap; transition: opacity .3s var(--ease);
}
.gnav__link:hover { opacity: .7; }
/* 現在地: 下線表現 [feedback3]。underline-offsetで下線をテキストから少し離す [feedback4] */
.gnav__link--current { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* スマホのハンバーガーメニュー限定の追加項目(FAQ/お問い合わせ/SNS)。デスクトップでは非表示 [feedback4] */
.gnav__link--mobile-only { display: none; }

/* 右端アイコン枠 (x=1440, w48) [1:95] — 用途未確定[FLAG]。2本線マーク代替 */
.header-mark { width: 48px; height: 16px; position: relative; opacity: .9; }
.header-mark::before, .header-mark::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; }
.header-mark::before { top: 3px; } .header-mark::after { bottom: 3px; }

/* メモ準拠: スクロール後も「白文字・帯なし」のまま。地色・色・高さは不変。 */
.site-header.is-scrolled { background: transparent; border-bottom: 0; }

/* hamburger (mobile, responsive後回し: <860 のみ) */
.nav-toggle { display: none; }

/* ============ READ MORE (越境) ============ */
/* テキスト16px Kaku Regular + 矢印 + 下線112px。total幅112px [1:158/202実測]。
   2バリアント: 既定=dark(明地 #393c41) / --light(写真上 #fff)。 */
.read-more {
  display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 14px;
  width: var(--readmore-w); justify-content: flex-end;
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-body);
  line-height: 1; letter-spacing: 0;
  padding-bottom: 9px; position: relative; color: var(--ink);
}
.read-more::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: var(--readmore-w); height: 1px;
  background: currentColor; transition: width .4s var(--ease);
}
.read-more:hover::after { width: 100%; }
/* read-more 矢印: site.js が <svg fill="currentColor"> を注入(外部SVG mask 不描画の回避) [§1] */
.read-more .arrow { width: 16px; height: 12px; flex: none; display: inline-block; line-height: 0; }
.read-more .arrow svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.read-more--light { color: var(--white); }   /* 写真上 = 白文字・白矢印 */

/* ============ 続きを読む（long-form 展開・ニュースサイト型・越境） ============ */
/* KOJI のインタビュー等ロングコンテンツ用。折りたたみ時は導入までを表示し、
   下端にグラデーションをかけて続きを示唆。[続きを読む] で全文展開する。
   ・折りたたみ高さ      = --lc-collapsed (各ブロックで上書き可)
   ・グラデの溶け込み色 = --lc-fade (各ページ/コンテキストで地色を指定。既定=ページ背景)
   JS無効時(scripting:none)は折りたたみを無効化し全文表示。 */
.lc { position: relative; --lc-fade: var(--bg); --lc-collapsed: 360px; }
.lc__body { position: relative; overflow: hidden; }
.lc:not(.is-open) .lc__body { max-height: var(--lc-collapsed); }
.lc:not(.is-open) .lc__body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(180deg, transparent, var(--lc-fade));
  pointer-events: none;
}
/* トグル: テキストボタン(下線アクセント)＋シェブロン。read-more と同系の最小UI。 */
.lc__toggle {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 500; font-size: var(--fs-body);
  line-height: 1; letter-spacing: .04em; color: inherit;
  padding-bottom: 9px; position: relative;
}
.lc__toggle::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; opacity: .5; transition: opacity .3s var(--ease);
}
.lc__toggle:hover::after { opacity: 1; }
/* シェブロン(CSS): 既定=下向き / open=上向き */
.lc__chev {
  width: 8px; height: 8px; flex: none;
  border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease);
}
.lc.is-open .lc__chev { transform: translateY(1px) rotate(225deg); }
.lc.is-open .lc__toggle .lc__more { display: none; }
.lc:not(.is-open) .lc__toggle .lc__less { display: none; }
@media (scripting: none) {
  .lc__body { max-height: none !important; }
  .lc__body::after { display: none; }
  .lc__toggle { display: none; }
}

/* ============ FOOTER (全ページ同一・越境) ★明背景・濃文字 ============ */
/* 帯高 530px (y9438–9968) / 背景 #d0d0d0 / 文字 #393c41。
   ロゴ x=64 上部 / ブランド文 x=64 / ナビ4列 x769·929·1089·1249 /
   法的 x769 / © x769 下部。[1:223–1:243 実測] */
.site-footer {
  position: relative;
  height: 530px;
  color: var(--ink); background: var(--bg);
  --logo-ink: var(--ink);
}
/* グレー帯を画面端まで全幅(100vw)化。#site-footer は中央寄せステージ内の
   1536幅ブロックのため、暗ページ(KOJI=黒body)ではフッター左右ガターに
   背景(黒)が露出していた。.bleed と同式の擬似要素で帯だけ 100vw へ breakout。
   内容(.site-footer__inner)は 1536 グリッドのまま帯より前面に描画。 */
.site-footer::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0;
  left: 50%; margin-left: -50vw; width: 100vw;   /* [Phase2.5] floor非依存の全幅(旧 (frame-100vw)/2 は固定1536前提) */
  background: var(--bg);
}
/* #site-footer は各ページで中央寄せ済みの .stage 内に left:0/width:1536 で
   絶対配置される（他ブロックと同じ）。よって inner 側で再センタリングしない
   ＝ margin:0。子は Figma フレーム座標(x=64/769…)をそのまま使う。
   ※ 以前は margin-left:(100vw-frame)/2 を二重に掛け、全ページで内容が
     右へ (100vw-1536)/2 ずれていた（二重センタリング）。 */
/* [Phase2.5] inner を流体化: #site-footer は stage 経由でフロア済(width:100%=1200〜1536) → inner も width:100% で追従。
   旧 width:1536固定 が body を1536幅にし、PC左余白/端末右余白/ナビ見切れの根源だった。子の固定left は下で比例化。 */
.site-footer__inner { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; }

/* ロゴ (x=64, y=9504 → 帯内 y=66) [1:231] */
.footer__logo {
  position: absolute; left: calc(64 / 1536 * 100%); top: 66px;
  display: inline-flex; align-items: flex-end; gap: 7px;
}
.footer__logo .logo-mark { width: 120px; height: 30px; }

/* ブランド文 (x=64, y=9593 → 帯内 y=155, w=448) [1:224]
   Kaku Medium 16/32, #393c41。design_context は text-white だが
   合成レンダーは濃文字 = レンダー優先(design-spec §0/②訂正)。 */
.footer__brand {
  position: absolute; left: calc(64 / 1536 * 100%); top: 155px; width: min(448px, calc(448 / 1536 * 100%));
  font-family: var(--sans); font-weight: 500; font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--white);   /* ロゴ下ブランド文=白 [user feedback / Figma design_context] */
}

/* ナビ4列 (y=9504 → 帯内 y=66) [1:226/228/229/230]
   各項目を短ダッシュ(─)で上下に挟む縦並び。Kaku Medium 16/24, #393c41。 */
.footer__nav { position: absolute; top: 66px; }
.footer__nav--c1 { left: calc(769 / 1536 * 100%); }
.footer__nav--c2 { left: calc(929 / 1536 * 100%); }
.footer__nav--c3 { left: calc(1089 / 1536 * 100%); }
.footer__nav--c4 { left: calc(1249 / 1536 * 100%); }
/* メイン(ページナビ c1)以外のリンクはフォント縮小（メモ準拠） */
.footer__nav--c2 li, .footer__nav--c3 li, .footer__nav--c4 li { font-size: var(--fs-small); }
.footer__nav li {
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-foot-nav); line-height: var(--lh-foot-nav);
}
/* 各項目の上に短いダッシュtick(Figma の "─" グリフ相当) */
.footer__nav li::before {
  content: ""; display: block; width: 14px; height: 1px;
  background: currentColor; opacity: .6; margin: 12px 0;
}
.footer__nav a { transition: opacity .3s var(--ease); }
.footer__nav a:hover { opacity: .6; }
/* 列末尾の trailing tick */
.footer__nav::after {
  content: ""; display: block; width: 14px; height: 1px;
  background: currentColor; opacity: .6; margin-top: 12px;
}

/* 法的リンク (x=769, y=9824 → 帯内 y=386) [1:227] 全角スペース区切り */
.footer__legal {
  position: absolute; left: calc(769 / 1536 * 100%); top: 386px;
  font-family: var(--sans); font-weight: 500; font-size: var(--fs-small);
  line-height: var(--lh-body); color: var(--ink);
  display: flex; gap: 32px;
}
.footer__legal a { transition: opacity .3s var(--ease); }
.footer__legal a:hover { opacity: .6; }

/* コピーライト (x=769, y=9872 → 帯内 y=434) [1:225] 小・ミュート */
.footer__copy {
  position: absolute; left: calc(769 / 1536 * 100%); top: 434px;
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-small);
  line-height: var(--lh-body); color: var(--ink-muted); letter-spacing: .02em;
}

/* ============ 画像クレジット (越境) ============ */
/* メモ準拠: 株式会社ビオック提供画像に「画像出典：株式会社ビオック」を
   HTML最小ポイントで表示（画像内焼き込みは全幅クロップで見切れるため）。
   写真上=白・低不透明度。グリッド(left/top)はページ側で指定。 */
.img-credit {
  position: absolute; z-index: 4;
  font-family: var(--sans); font-weight: 400;
  font-size: 11px; line-height: 1; letter-spacing: .04em;
  color: var(--white); opacity: .62;
}
.img-credit--ink { color: var(--ink); opacity: .5; }   /* 明地バンド用 */
/* 配置ルール[feedback3]: 右寄せ画像=右下 / 左寄せ画像=左下 / 中央・その他=右下。
   各ページが left|right + top|bottom を指定(視点が止まりにくい隅へ)。 */

/* ============ 注釈エリア (フッター上・グリッド左寄せ・小ゴシック) [feedback3] ============ */
/* 体裁(左寄せ・小さめゴシック・控えめ)のみ共通化。位置は各ページが指定:
   絶対座標ページ=stage 内 position:absolute で footer 直上に top 指定、
   フロー(KOJI)=通常フロー。グリッド左(left:128 / width:1280)に左揃え。 */
.page-notes { z-index: 1; }
.page-notes ul { list-style: none; margin: 0; padding: 0; }
.page-notes p, .page-notes li {
  margin: 0 0 6px;
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; line-height: 1.85; letter-spacing: .02em;
  color: var(--ink); opacity: .55; text-align: left;
}
.page-notes p:last-child, .page-notes li:last-child { margin-bottom: 0; }
.page-notes--light p, .page-notes--light li { color: var(--white); opacity: .5; }   /* 暗背景(KOJI)用 */

/* ============ BAND (full-bleed 画像セクション) ============ */
.band { position: relative; width: var(--frame); overflow: hidden; }
.band__bg { position: absolute; inset: 0; z-index: 0; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band--veil::before { content: ""; position: absolute; inset: 0; background: var(--img-veil); z-index: 1; }
.band__inner { position: relative; z-index: 2; width: 100%; height: 100%; }

/* ============ 縦組み装飾テキスト (vector) ============ */
/* Figma は vector アウトライン(_デザイン)。既存 deco-vertical-*.svg を流用。 */
.vdeco { position: absolute; z-index: 3; pointer-events: none; }
.vdeco img { width: 100%; height: 100%; object-fit: contain; }

/* ============ HAIRLINES ============ */
.hline { position: absolute; height: 0; border-top: 1px solid var(--line); }
.vline { position: absolute; width: 0; border-left: 1px solid var(--line); }
.vline--on-dark { border-left-color: var(--line-on-dark); }
.hline--on-dark { border-top-color: var(--line-on-dark); }

/* ============ FV 縦棒スクロール示唆 (全ページ共通) ============ */
/* ページ送りを想起させる「上→下へ送る」動き。各FVの縦ライン(白・写真上)に、
   明るいセグメントが上から下へ繰り返し流れる。reduced-motion では無効。 */
.fv__vline, .p-hero__vline, .c-hero-vline, .ab-hero__vline, .kl-hero__vline, .fq-hero__vline {
  position: absolute;   /* 各ページで指定済だが ::after 基準を明示 */
}
.fv__vline::after, .p-hero__vline::after, .c-hero-vline::after,
.ab-hero__vline::after, .kl-hero__vline::after, .fq-hero__vline::after {
  content: ""; position: absolute; left: -1px; top: 0;
  width: 1px; height: 34px; background: #fff;
  box-shadow: 0 0 5px rgba(255, 255, 255, .7);
  animation: fvScrollHint 2.4s var(--ease) infinite;
}
@keyframes fvScrollHint {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(86px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fv__vline::after, .p-hero__vline::after, .c-hero-vline::after,
  .ab-hero__vline::after, .kl-hero__vline::after, .fq-hero__vline::after { animation: none; display: none; }
}

/* ============ LOADING OVERLAY ============ */
/* §2(改訂): Figma 2画面目 = 麹写真(全面) + 画面中央に「白銀比の白い長方形」(透過65%)。
   この中央ボックスが "ロードバー" = 白フィルが左→右に満ちる。完了まで表示・スクロール禁止。
   (全5ページ共通。markup: .loading > .loading__bg + .loading__bar > .loading__fill) */
.loading {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--bg); overflow: hidden;
  transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
/* 1: 麹写真（全面・株式会社ビオック提供） */
.loading__bg { position: absolute; inset: 0; z-index: 0; }
.loading__bg img { width: 100%; height: 100%; object-fit: cover; }
/* 2: 中央の白銀比ボックス = ロードバー。白フィルが左→右へ満ちる（枠の白線は撤去 [feedback2 ローディング]） */
.loading__bar {
  position: relative; z-index: 1; overflow: hidden;
  width: min(480px, 62vw); aspect-ratio: 1.41421 / 1;   /* 白銀比 √2 : 1 */
}
.loading__fill {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .65);                  /* 透過65%（麹が35%透ける） */
  transform: scaleX(0); transform-origin: left center;
  animation: loadBar 2.4s var(--ease) .3s forwards;
}
.loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* 麹写真(株式会社ビオック提供)の画像出典クレジット — 右下・白(.img-credit 既定)。バー(z1)より上 */
.loading__credit { right: 16px; bottom: 16px; left: auto; top: auto; z-index: 2; }
@keyframes loadBar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .loading__fill { animation: none; transform: scaleX(1); }
}

/* =====================================================================
   [Phase3] スマホ専用 (<768) — 共有ヘッダー/フッターのモバイル化
   viewport=device-width に移行したページでのみ <768 に到達して発火する。
   未移行ページ(viewport=1200)は実効幅1200で発火せず無影響。1536/デスクトップ回帰ゼロ。
   ===================================================================== */
@media (max-width: 767px) {
  /* [sp1] ビオック等 画像クレジットをモバイルで一段小さく（11→10px・loading__credit / img-credit 共通） */
  .img-credit { font-size: 10px; }

  /* ---- HEADER: フロア(1200)除去 + ハンバーガー ---- */
  .site-header { height: 60px; }
  .site-header__inner { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
  .logo { left: 20px; top: 50%; transform: translateY(-50%); }
  .logo-mark { width: 96px; height: 24px; }
  .header-mark { display: none; }

  /* ハンバーガー(>767は .nav-toggle{display:none})。タップ領域44px・開で×に変形。 */
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; z-index: 2; color: inherit;
  }
  .nav-toggle__bars { position: relative; width: 22px; height: 1.5px; background: currentColor; transition: background .2s var(--ease); }
  .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease);
  }
  .nav-toggle__bars::before { top: -7px; }
  .nav-toggle__bars::after  { top: 7px; }
  body.nav-open .nav-toggle__bars { background: transparent; }
  body.nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

  /* gnav = 右からのオフキャンバス・ドロワー */
  .gnav {
    position: fixed; top: 0; right: 0; left: auto; bottom: 0;
    width: min(80vw, 300px); height: 100vh; height: 100dvh;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 30px;
    padding: 84px 32px 40px;
    background: rgba(22, 20, 16, .84);   /* [sp1] 黒ベタ→わずかに透過（背景ブラーで可読維持） */
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; text-shadow: none;
    transform: translateX(100%); transition: transform .4s var(--ease); z-index: 1;
  }
  body.nav-open .gnav { transform: translateX(0); }
  .gnav__link { font-size: 18px; line-height: 1.2; }
  .gnav .header-mark { display: none; }

  /* ハンバーガーメニュー限定項目の表示化(FAQ/お問い合わせ=テキスト、Instagram/LINE=アイコン列) [feedback4] */
  .gnav__link--mobile-only { display: block; }
  .gnav__social.gnav__link--mobile-only { display: flex; align-items: center; gap: 22px; }
  .gnav__social-link { color: #fff; opacity: .85; transition: opacity .3s var(--ease); }
  .gnav__social-link:hover { opacity: 1; }
  .gnav__social-link svg { width: 22px; height: 22px; display: block; }

  /* ---- FOOTER: 高さauto + 子を縦積み(絶対座標→static) ---- */
  .site-footer { height: auto; }
  .site-footer__inner { width: 100%; min-width: 0; margin: 0; padding: 56px 24px 40px; }
  .footer__logo { position: static; margin-bottom: 22px; }
  .footer__brand { position: static; left: auto; top: auto; width: auto; max-width: none; margin-bottom: 32px; }
  .footer__nav { position: static; left: auto; top: auto; margin-bottom: 4px; }
  /* [sp2] 縦積み時、列末尾の trailing tick(::after)＋次列先頭 li の leading tick(::before)が隣接して
     罫線が二重化する(KOJILAB|SHOP / 定期便案内|INSTAGRAM / LINE|FAQ の境界)。スマホのみ ::after を消し
     各項目の leading tick だけ残す＝単線化。 */
  .footer__nav::after { display: none; }
  .footer__legal { position: static; left: auto; top: auto; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; margin-bottom: 14px; }
  .footer__copy { position: static; left: auto; top: auto; }
}

/* =====================================================================
   [ec-force統合・build.sh付与] 共通フッター余白 — ブランド各ページの本文は末尾(注釈)で
   終わり、テーマ層(layout)が .site-footer を後置描画する。mockup の `#site-footer{margin-top}`
   は id 依存で class フッター(.site-footer)に当たらないため .site-footer へ移管。
   ===================================================================== */
.site-footer { margin-top: 80px; }
@media (max-width: 767px) { .site-footer { margin-top: 0; } }

/* =====================================================================
   [ec-force統合・build.sh付与] 標準ページの固定ヘッダー回避＋濃色ヘッダー。
   ── mockup には無いラッパ（ec-force 固有）。build/components.css へ手で足すと
      build.sh 再実行(cp)で消えるため、ここ（build.sh の append）で再生成する。
   ・大半の標準ページ（ITEM LIST/マイページ/お問い合わせ/法令ページ等）は <main class="l-container">。
   ・カートだけは <main class="js-main-container">（.l-container 無し）のため l-container 規則が効かず
     「カート」見出しが固定ヘッダーに潜る（フィードバック）→ .js-main-container も対象に含める。
     ただしブランド TOP は <main class="stage … js-main-container"> なので、ヒーローを覆わないよう
     :not(.stage) で除外する（.l-container/.js-main の両方を持つ標準ページは同値指定＝二重余白なし）。
   ・固定 .site-header が先頭を覆うのでヘッダー高ぶんの上余白を確保（SPは 60px）。
   ・淡灰背景の標準ページでは白文字ヘッダーが低コントラスト → :has で標準ページのみ濃色へ反転。
     ブランド TOP(.stage)/サブ(.l-bysense-page) はヒーロー上の白のまま（無影響）。
   ===================================================================== */
.l-container, .js-main-container:not(.stage) { padding-top: var(--header-h); }
body:has(.l-container) .site-header,
body:has(.js-main-container:not(.stage)) .site-header { color: var(--ink); --logo-ink: var(--ink); text-shadow: none; }
body:has(.l-container) .site-header .logo-mark,
body:has(.js-main-container:not(.stage)) .site-header .logo-mark { filter: none; }
@media (max-width: 767px) { .l-container, .js-main-container:not(.stage) { padding-top: 60px; } }