@charset "UTF-8";
/*
ENTORO animated logo — portable, drop-in block.
-----------------------------------------------------------------
Usage:
1. ...
snippet (see entoro-logo.html)
wherever the logo should appear (e.g., site header).
3. Constrain size from the parent if needed:
header #logo { max-width: 240px; }
#logo defaults to 100% of its parent's width.
*/
#logo {
position: relative;
display: block;
width: 100%;
/* 通常表示 (>740px): #logo-3d と同じ container 形状にして上下余白を揃える */
aspect-ratio: 170 / 55;
overflow: visible;
/* デスクトップでは container 内に余白を持たせ、SVG は本体ロゴ部分のみ占める */
/* モバイル (≤740px): 元の SMIL ロゴと同じくシンプルに container を埋める */
}
#logo svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70.6%;
/* 540/765 — ロゴ本体の幅 */
aspect-ratio: 123.307 / 40;
height: auto;
overflow: visible;
}
@media (max-width: 740px) {
#logo {
aspect-ratio: 123.307 / 40;
}
#logo svg {
position: absolute;
left: 0;
top: 0;
transform: none;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
}
}
/*
ページ全体の背景色をロゴの溶解シーケンスに同期させる。
0–3s (O2 が溶け始めるまで) は #FFFFFF を保持
以降90秒で線形に #f4f1ea へ
各文字の溶解 15秒 = 全体の 1/6 ずつ温度が上がる対応関係。
:has(#logo) でロゴが配置されたページのみ発火する。
CSSをリンクしただけでは何も起きないので副作用は最小。
※ 配置先ページが body に独自の背景色を当てていると上書きが発生する。
その場合は body 側の background 指定を外すか transparent にする。
*/
body:has(#logo) {
background: #FFFFFF;
animation: entoroBgShift 60s linear forwards;
}
@keyframes entoroBgShift {
0% {
background: #FFFFFF;
}
100% {
background: #f4f1ea;
}
}
/*
静的ロゴ版 (#logo-static) — 溶けないベクター画像。
-----------------------------------------------------------------
アニメや背景色シフトを伴わない素のロゴ。フッター、サイドバー、
メール署名、印刷物用の書き出しなど、控えめに使いたい場面用。
ヘッダーで動かしたい時は #logo (アニメ版)、それ以外はこちらを推奨。
色は currentColor を継承するので、配置先の color で制御:
#logo-static { color: #2c292a; }
.footer #logo-static { color: #ffffff; }
*/
#logo-static {
display: block;
width: 100%;
color: #2c292a;
}
#logo-static svg {
display: block;
width: 100%;
height: auto;
}