/* ===== IZtech 共通ヘッダー ===== 全ページがこの1ファイルを読み込む。ヘッダーの変更はここだけを直せば全ページに反映される。ページ側の :root 変数に依存しないよう、色は直値で書いている。 */ header{ position:fixed;top:0;left:0;right:0;z-index:50; background:rgba(255,255,255,.8); -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid transparent; transition:.3s; overflow:hidden; /* .hball がヘッダー外へはみ出さないように */ } header.scrolled{border-bottom-color:#dbe3f4;background:rgba(255,255,255,.95)} /* ヘッダー内は全ページ共通の幅（本文の .wrap 幅が狭いページでも揃える） */ header .wrap{max-width:1080px;margin:0 auto;padding:0 24px} header .nav{display:flex;align-items:center;justify-content:space-between;height:68px} header .logo{display:inline-flex;align-items:center;position:relative;z-index:2} header .logo img{height:44px;width:auto;display:block} /* ロゴの黄色いドットから出てヘッダー内を跳ねるボール（site-header.js が制御） */ .hball{ position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFE680,#FFD400 62%,#f2b600); box-shadow:0 3px 7px rgba(240,180,0,.5); pointer-events:none;opacity:0;z-index:1; will-change:transform,opacity;display:none; } @media(prefers-reduced-motion:reduce){.hball{display:none!important}} /* ヘッダーは position:fixed なので、その分の余白をページ先頭で確保する。先頭要素の padding-top で吸収できないページはを付ける。 */ .has-fixed-header{padding-top:68px}