/* ========================================================= xxxxnese — components/page-hero.css PAGE HERO（中ページ専用）タイトル + リードを画像にオーバーレイする hero 帯。トップ専用 .hero とは別物 — 100vh ではなく固定高さ。に has-dark-hero を付ける前提（header が白に切替）。 ========================================================= */ .page-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 600px; padding-top: var(--header-height); overflow: hidden; background-color: var(--color-placeholder-bg); } .page-hero__media { position: absolute; inset: 0; z-index: -1; margin: 0; } .page-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0; transition: opacity 0.6s ease; } .page-hero__img.is-loaded { opacity: 1; } .page-hero__scrim { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.00) 55%, rgba(0, 0, 0, 0.60) 100% ); } .page-hero__content { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 72px; color: #fff; } .page-hero__eyebrow { display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 500; font-style: normal; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-bottom: 28px; } /* eyebrow と status バッジを横並びにするときのコンテナ */ .page-hero__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .page-hero__meta .page-hero__eyebrow { margin-bottom: 0; } .page-hero__meta .page-hero__status { margin-left: 0; } .page-hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 7vw, 84px); line-height: 1.05; letter-spacing: 0.02em; color: #fff; margin: 0 0 28px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); } .page-hero__logo { /* 自然比 804×112 (≒7.18:1)。狭幅で max-width: 100% が効くと height 固定では width だけ縮んで縦長に潰れるため、両軸 auto + max-* でクランプし、img 側でアスペクト比を保たせる */ display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(56px, 7vw, 88px); } /* ブランド行（ロゴ直下に置く "xxxxnese Inc." 表記）トップの .hero-brand と同じ階層意図。ロゴと lead の間で、運営会社を控えめに示す。 */ .page-hero__brand { font-family: var(--font-display); font-size: clamp(18px, 2vw, 26px); font-weight: 500; letter-spacing: 0.04em; line-height: 1.4; color: rgba(255, 255, 255, 0.92); margin: 0 0 28px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); } .page-hero__status { display: inline-block; margin-left: 16px; vertical-align: middle; font-family: var(--font-display); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 14px; background-color: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; color: #fff; white-space: nowrap; } /* Short pull-quote between title and lead. Used by product detail pages to spotlight the value proposition in one breath. */ .page-hero__tagline { max-width: 600px; font-family: var(--font-display); font-size: 15px; font-weight: 500; line-height: 1.85; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.95); margin: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); word-break: keep-all; text-wrap: pretty; } .page-hero__lead { max-width: 600px; font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, 0.95); margin: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); } /* ========================================================= Responsive — page-hero ========================================================= */ @media (max-width: 960px) { .page-hero { min-height: 520px; } .page-hero__content { padding-top: 88px; padding-bottom: 64px; } } @media (max-width: 640px) { .page-hero { min-height: 440px; } .page-hero__content { padding-top: 72px; padding-bottom: 48px; } .page-hero__eyebrow { margin-bottom: 20px; } .page-hero__title { margin-bottom: 20px; } .page-hero__status { display: inline-block; margin-left: 0; margin-top: 14px; } }