/** * きもイク 白玉アニメ背景 — レイヤー透過・ヘッダーガラス・紙レイアウト * kimo-bg.js が初期化に成功すると に .kimo-bg-on と * .kimo-bg-front(トップ) / .kimo-bg-paper(それ以外) が付く。 * JS無効・失敗時はこのCSSは発火せず従来の見た目のまま（プログレッシブ・エンハンスメント）。 */ #kimo-bg { position: fixed; top: -100px; left: -100px; z-index: -1; pointer-events: none; } /* ===== 面のベタ背景を抜いてcanvasを透かす ===== */ html.kimo-bg-on, html.kimo-bg-on body { background: transparent; } html.kimo-bg-on .l-content, html.kimo-bg-on #content, html.kimo-bg-on .l-container { background: transparent !important; } html.kimo-bg-on #footer, html.kimo-bg-on .l-footer, html.kimo-bg-on .l-footer__nav, html.kimo-bg-on .l-footer__widgetArea, html.kimo-bg-on .l-footer__foot { background: transparent !important; } /* ===== ヘッダー: すりガラス ===== */ html.kimo-bg-on #header, html.kimo-bg-on .l-header { background: linear-gradient(rgba(253, 251, 250, .42), rgba(253, 251, 250, .18)) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* スクロール後の追従ヘッダー: 本文の上に重なるので僅かに濃いガラス */ html.kimo-bg-on .l-fixHeader, html.kimo-bg-on .l-fixHeader__inner { background: rgba(253, 251, 250, .32) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* フッター到達でロゴをフェードアウト（kimo-bg.jsが付け外し） */ html.kimo-bg-on .c-headLogo { transition: opacity .5s ease; } html.kimo-bg-on .c-headLogo.kimo-bg-logo-hide { opacity: 0; } /* ===== トップページ: 背景を主役に ===== */ html.kimo-bg-front #main_content, html.kimo-bg-front .l-mainContent { background: transparent !important; padding-top: 40px; } html.kimo-bg-front .kimo-quote-band, html.kimo-bg-front .kimo-band--rose { background-image: none !important; background-color: transparent !important; } /* ===== 記事・下層: 本文は「浮いた紙」 ===== */ html.kimo-bg-paper #main_content, html.kimo-bg-paper .l-mainContent { background: rgba(255, 253, 252, .86) !important; border-radius: 20px; box-shadow: 0 8px 40px rgba(120, 70, 70, .08); } html.kimo-bg-paper #sidebar, html.kimo-bg-paper .l-sidebar { background: transparent !important; } html.kimo-bg-paper #sidebar .widget, html.kimo-bg-paper .l-sidebar .widget { background: rgba(255, 253, 252, .86); border-radius: 14px; padding: 14px; }