部分を貼る 3. 同じく entoro-logo-3d.html 内のを貼るサイズ・アスペクト比: #logo (SMIL版) と同じ縦横比 (約 3.08:1) に揃える。粒子が右上に拡散していく分の余白はキャンバス内で吸収する。 170 / 55 ≈ 3.09:1 で本体ロゴと同じサイズ感に。 */ #logo-3d { position: relative; display: block; width: 100%; /* 通常表示: 横長 (粒子拡散用の余白あり) */ aspect-ratio: 170 / 55; overflow: visible; /* モバイル (≤740px): container は #logo (SMIL版) と同じ形状で、 canvas は container を超えて右と上に拡張し粒子拡散スペースを確保する。 (container 自体は overflow visible なので canvas のはみ出しは見える) */ } #logo-3d canvas { display: block; width: 100% !important; height: 100% !important; } @media (max-width: 740px) { #logo-3d { aspect-ratio: 123.307 / 40; } #logo-3d canvas { position: absolute !important; left: -2.6% !important; top: -25% !important; width: 117.5% !important; height: 130% !important; } } /* ページ全体の背景色を 3D粒子ロゴの風化シーケンスに同期させる。 #logo (SMIL版) の entoroBgShift と同じキーフレームを使用 (entoro-logo.css で定義)。 duration は 3D版のデフォルト 45秒に合わせる。 */ body:has(#logo-3d) { background: #FFFFFF; animation: entoroBgShift 45s linear forwards; }