/* =========================================================================
   クラリアホールディングス コーポレートサイト — hero-home.css（2026-09-29）

   日英トップ（slug === ''）だけの写真ベースのヒーロー専用スタイル。
   ・読み込むのは buildHeadForPage が page.slug === '' のときだけ。
   ・透明ヘッダーの見た目は .site-header--home（トップ限定）にだけ当てる。
     他のページのヘッダー・動作は base.css のまま一切変えない。
   ・写真は既存の assets/img/claria-hero-people-20260929.webp をそのまま表示する
     （切り抜きはせず、幅いっぱい・高さ自動＝スマホでも3シーンが欠けない）。
   ・フォント・アニメーションの新規依存はなし。画像の再読み込みも増やさない。
   ========================================================================= */

/* ---- ヒーロー本体（モバイル既定 = コピー帯 → 写真を全幅で） ------------- */
.hero--home {
  position: relative;
  padding-block: 0;
  background: var(--color-accent-deep);
}
.hero--home .hero__head {
  padding-top: calc(var(--header-h) + clamp(26px, 7vw, 44px));
  padding-bottom: clamp(24px, 6vw, 40px);
  background: var(--color-accent-deep);
}
.hero--home .hero__media {
  margin: 0;
  line-height: 0;
}
.hero--home .hero__media img {
  display: block;
  width: 100%;
  height: auto;
}
.hero--home .hero__lead {
  max-width: 22em;
  margin: 0;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.85rem, 6.8vw, 2.7rem);
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(8, 14, 36, 0.4);
}
.hero--home .hero__lead:lang(en) { letter-spacing: 0.03em; }
.hero--home .hero__line { display: block; }

/* ---- 透明ヘッダー＋白ナビ（トップのみ） -------------------------------- */
.site-header--home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
}
/* 写真・暗い帯の上では、紺と水色のロゴを白1色にして載せる */
.site-header--home .brand__logo { filter: brightness(0) invert(1); }
.site-header--home :focus-visible { outline-color: #fff; }
.site-header--home .gnav__link { color: #fff; }
.site-header--home .gnav__link:hover,
.site-header--home .gnav__link[aria-current="page"] {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.85);
}
.site-header--home .lang-toggle a { color: rgba(255, 255, 255, 0.82); }
.site-header--home .lang-toggle a[aria-current="true"] { color: #fff; }
.site-header--home .lang-toggle span { color: rgba(255, 255, 255, 0.5); }
.site-header--home .nav-toggle span,
.site-header--home .nav-toggle span::before,
.site-header--home .nav-toggle span::after { background: #fff; }

/* ---- 直下に移設した既存の紹介文（落ち着いた白セクション） -------------- */
.hero-intro { padding-block: clamp(44px, 6vw, 80px); }
.hero-intro .hero__text { margin-top: 0; }

/* ---- PC：透明ヘッダーの下、写真の空（左上）にコピーを重ねる ----------- */
@media (min-width: 820px) {
  .hero--home { background: var(--color-bg); }
  .hero--home .hero__lead { font-size: clamp(3rem, 5.5vw, 5.75rem); }
  .hero--home .hero__head {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding-top: calc(var(--header-h) + clamp(28px, 7vw, 104px));
    padding-bottom: 0;
    background: linear-gradient(
      180deg,
      rgba(12, 20, 46, 0.68) 0%,
      rgba(12, 20, 46, 0.36) 34%,
      rgba(12, 20, 46, 0) 62%
    );
  }
  .hero--home .hero__media { position: relative; z-index: 1; }
}

/* ---- スマホのメニュー開時：白パネル上でナビ文字が同化しない ----------- */
@media (max-width: 960px) {
  .site-header--home .gnav.is-open .gnav__link,
  .site-header--home .gnav.is-open .gnav__link:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-line);
  }
  .site-header--home .gnav.is-open .gnav__link[aria-current="page"] { color: var(--color-accent); }
  .site-header--home .gnav.is-open .lang-toggle a { color: var(--color-ink-soft); }
  .site-header--home .gnav.is-open .lang-toggle a[aria-current="true"] { color: var(--color-accent); }
  .site-header--home .gnav.is-open .lang-toggle span { color: var(--color-line); }
  .site-header--home .gnav.is-open :focus-visible { outline-color: var(--color-accent); }
}

/* ---- JS 無効時：ヘッダーが本文に重ならないよう地色を戻す -------------- */
html:not(.js) .site-header--home {
  position: static;
  background: var(--color-accent-deep);
  border-bottom: 0;
}