/* Doors 共通インストールバナー（上からスライドイン） 使い方: install-banner.js を読み込むと自動で挿入される。モバイルのみ表示。 バナー表示中は に .install-banner-active が付き、nav と本文が バナーの高さ分だけ連動して下がる（hero との重なりを防ぐ）。 */ :root { --install-banner-h: 64px; } .install-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(17, 17, 17, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif; /* 初期は画面外（上）に隠す。.install-banner--show でスルッと降りる */ transform: translateY(-110%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .install-banner--show { transform: translateY(0); } /* バナーと連動して nav・本文を下げる（同じイージングで一緒に動く） */ body { transition: padding-top 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .install-banner-active body { padding-top: var(--install-banner-h); } .install-banner-active nav { top: var(--install-banner-h); transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .install-banner__close { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 20px; line-height: 1; padding: 0; } .install-banner__close:hover { color: #fff; } .install-banner__icon { flex-shrink: 0; width: 44px; height: 44px; display: block; object-fit: cover; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.08); } .install-banner__text { flex: 1; min-width: 0; } .install-banner__title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; } .install-banner__sub { font-size: 11px; color: #9ca3af; line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* OS 純正アプリバナー風: iOS システムブルーのコンパクトなピル */ .install-banner__cta { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #0a84ff; color: #fff; padding: 7px 16px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; transition: transform 0.15s, background-color 0.2s; } .install-banner__cta:hover { background: #0a74e0; } .install-banner__cta:active { transform: scale(0.96); }