/* ========================================================= xxxxnese — components/header.css --------------------------------------------------------- デフォルトは「白基調ページ」用: 透明背景 + ink色テキスト（通常の白ページで違和感なく使える）が付くと「Hero上モード」にオプトイン: 上部 fade の暗グラデ + 白文字へ切替スクロール / モバイルナビ開は両モード共通で「白半透明バー + ink色テキスト」に収束。 ========================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: transparent; border: none; box-shadow: none; /* 背景に黒 blob が来た時にテキスト・ラインが自動で白に反転する。内部テキストは全部 #fff、blend モードで: 白bg上 → 黒、黒blob上 → 白 nav-open（モバイルドロワー）時のみ blend を切り、白パネルに切替える */ mix-blend-mode: difference; /* background-color はトランジションさせない。 transparent ↔ 白の中間状態で mix-blend-mode の切替と相まって黒っぽいフラッシュが一瞬出るのを防ぐ。 */ } /* デフォルト: blend のために text/line は #fff */ .site-header .logo, .site-header .nav-desktop a { color: #ffffff; transition: color 0.4s var(--ease); } .site-header .nav-desktop a::after { background: #ffffff; } .site-header .nav-toggle span { background: #ffffff; transition: background-color 0.4s var(--ease), transform 0.3s var(--ease); } /* ---------- Dark hero mode (body.has-dark-hero の初期状態のみ) ---------- blend mode は切って、ヘッダー領域に専用の暗グラデを敷く。写真上でナビ・ロゴが場所によって沈むのを防ぐため、 scrim 任せにせずヘッダー側でも視認性を担保する。 */ body.has-dark-hero .site-header:not(.is-scrolled):not(.nav-open) { mix-blend-mode: normal; background-image: linear-gradient( 180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 100% ); border: none; box-shadow: none; } body.has-dark-hero .site-header:not(.is-scrolled):not(.nav-open) .logo, body.has-dark-hero .site-header:not(.is-scrolled):not(.nav-open) .nav-desktop a { color: #ffffff; } body.has-dark-hero .site-header:not(.is-scrolled):not(.nav-open) .nav-desktop a::after { background: #ffffff; } body.has-dark-hero .site-header:not(.is-scrolled):not(.nav-open) .nav-toggle span { background: #ffffff; } /* ---------- Scrolled state ---------- スクロールしたら白ガラスバーに切替、blend を外して通常色に。罫線は出さない（border-bottom-color は transparent のまま） ⚠️ iOS Safari 既知不具合対策: backdrop-filter を position:fixed の親要素に直接付けると、内側のボタン（ハンバーガー）が touch 判定を取れなくなることがある。そのため背景と blur は ::before 疑似要素に逃がし、ヘッダー本体は通常の合成レイヤのままにしておく。 */ .site-header.is-scrolled { mix-blend-mode: normal; background-color: transparent; border: none; box-shadow: none; } .site-header.is-scrolled::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); pointer-events: none; } .site-header.is-scrolled .logo, .site-header.is-scrolled .nav-desktop a { color: var(--color-ink-soft); } .site-header.is-scrolled .nav-desktop a:hover { color: var(--color-ink); } .site-header.is-scrolled .nav-desktop a::after { background: var(--color-ink); } .site-header.is-scrolled .nav-toggle span { background: var(--color-ink); } /* ---------- Nav open state ---------- モバイルドロワーが出ている時は blend を切り、白パネルに切替 */ .site-header.nav-open { mix-blend-mode: normal; background-color: #ffffff; border: none; box-shadow: none; } .site-header.nav-open .logo, .site-header.nav-open .nav-desktop a { color: var(--color-ink); } .site-header.nav-open .nav-desktop a::after { background: var(--color-ink); } .site-header.nav-open .nav-toggle span { background: var(--color-ink); } /* ---------- Header inner ---------- */ .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); /* is-scrolled の ::before 背景レイヤより上に来るよう明示的に積む。これでハンバーガーが iOS Safari でも確実にタップ判定を取れる */ position: relative; z-index: 1; } .logo { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: 0.08em; color: var(--color-ink); font-feature-settings: "lnum" 1; display: inline-flex; align-items: center; } /* ヘッダーのロゴ SVG（fill: currentColor で .logo の color 切替に追従） */ .logo-mark { display: block; height: 17.1px; width: auto; fill: currentColor; } @media (max-width: 640px) { .logo-mark { height: 14.4px; } } /* ---------- Desktop nav ---------- */ .nav-desktop ul { display: flex; gap: 40px; } .nav-desktop a { font-family: var(--font-display); /* 見出しと同じ欧文 */ font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-soft); position: relative; padding: 8px 0; transition: color 0.2s var(--ease); } .nav-desktop a::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 0; height: 1px; background: #ffffff; transition: width 0.3s var(--ease); } /* underline 展開は全状態共通 */ .nav-desktop a:hover::after { width: 100%; } /* hover でも色は変えない（blend で背景に応じて見え方が変わる）。見た目の変化は下線の伸長で表現する。 nav-open（白パネル）時のみ ink */ .site-header .nav-desktop a:hover { color: #ffffff; } .site-header.nav-open .nav-desktop a:hover { color: var(--color-ink); } .site-header.nav-open .nav-desktop a::after { background: var(--color-ink); } /* ---------- Desktop dropdown (Products) ---------- */ .nav-desktop .has-children { position: relative; } .nav-desktop .nav-children { position: absolute; top: 100%; left: -20px; margin: 0; padding: 14px 0; list-style: none; /* 初期は透明（ヘッダーが blend モードの間は背景なし）。 .is-scrolled で白パネル＋シャドウに切替 */ background: transparent; box-shadow: none; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s, background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); display: flex; flex-direction: column; gap: 0; } .site-header.is-scrolled .nav-desktop .nav-children { background: #ffffff; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); } .nav-desktop .has-children:hover .nav-children, .nav-desktop .has-children:focus-within .nav-children { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0s; } /* ドロップダウン内リンク: pre-scroll は header と同じく #fff（blend で背景に応じて反転） .is-scrolled で ink 系（白パネル上の通常色） */ .nav-desktop .nav-children a { display: block; padding: 10px 20px; font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); } .nav-desktop .nav-children a::after { display: none; } .nav-desktop .nav-children a:hover { color: #ffffff; } .site-header.is-scrolled .nav-desktop .nav-children a { color: var(--color-ink-soft); } .site-header.is-scrolled .nav-desktop .nav-children a:hover { color: var(--color-ink); background-color: rgba(0, 0, 0, 0.03); } /* ---------- Mobile hamburger toggle ---------- */ .nav-toggle { display: none; width: 40px; height: 40px; position: relative; } .nav-toggle span { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--color-ink); transition: transform 0.3s var(--ease); } .nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 24px; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } /* ---------- Mobile drawer ---------- */ /* 画面全体を白で覆う（ヘッダー直下〜viewport末端まで）。罫線は使わず、余白と文字サイズで階層を作る。 */ .nav-mobile { display: none; position: fixed; inset: var(--header-height) 0 0 0; /* ヘッダー高の下から画面末端まで */ background: #ffffff; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-mobile.is-open { display: block; } .nav-mobile ul { padding: 32px 32px 48px; display: flex; flex-direction: column; gap: 2px; } .nav-mobile a { display: block; padding: 11px 0; font-family: var(--font-display); /* 見出しと同じ欧文 */ font-size: 22px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); } /* Mobile sub-list（Products 配下）— インデントで階層表示 */ .nav-mobile .nav-children { padding-left: 20px; margin: -2px 0 6px; display: flex; flex-direction: column; gap: 0; } .nav-mobile .nav-children a { font-size: 16px; padding: 7px 0; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-soft); } /* ========================================================= Responsive — header ========================================================= */ /* Mobile */ @media (max-width: 640px) { .nav-desktop { display: none; } .nav-toggle { display: block; } }