/* natane のロゴ（ひとつのロゴ）。2026-10-23 に翼が確定した形。
   オーブの玉の直径 = natane の字の 1.55 倍。倍率を変えたときは字を小さくする（オーブの大きさは前のまま）。
   玉と natane の字の間 = 玉の直径の 0.51。natane の字の間 0.125em。
   タグライン = natane の字の 0.4 倍、字の間 0.01em、natane の字の下からタグラインの上まで natane の字の 0.36、色 #797E8C。
   上下は、見えている字のかたまりの真ん中を、玉の真ん中にそろえる。
   --nu は natane の字の大きさ。オーブの絵（canvas）は --nu の 2.203 倍で、玉はその 0.7036。
   タグラインが 7.5px より小さくなる幅では、タグラインを出さない。
   このファイルを書きかえるときは、/home/claude/deploy/build_logo.py（作り方）とデザインの決まりの資料をそろえる。 */


/* WebGL が使えないときの簡易の玉も、玉の大きさ（絵の 0.7036）にそろえる */
html body canvas.natane-orb[data-orb-fallback]{clip-path:circle(35.18% at 50% 50%)}


/* オーブの絵 44px：natane 19.9732px、タグライン 7.9893px */
html body .logo{--nu:19.9732px;gap:calc(var(--nu)*0.389)!important;align-items:center!important}
html body .logo canvas.natane-orb{width:calc(var(--nu)*2.203)!important;height:calc(var(--nu)*2.203)!important;flex:none}
html body .logo-txt{gap:0!important;transform:translateY(calc(var(--nu)*-0.1135))}
html body .logo-wm{font-size:var(--nu)!important;letter-spacing:0.125em!important;line-height:1!important;white-space:nowrap}
html body .logo-tg,html body.hero-done .hd .logo-tg{font-size:calc(var(--nu)*0.4)!important;letter-spacing:0.01em!important;line-height:1!important;font-weight:400!important;white-space:nowrap;margin:calc(var(--nu)*0.165) 0 0 calc(var(--nu)*0.057)!important;color:#797E8C!important}
/* オーブの絵 40px：natane 18.1574px、タグライン なし */
@media (max-width:640px){
html body .logo{--nu:18.1574px;gap:calc(var(--nu)*0.389)!important;align-items:center!important}
html body .logo canvas.natane-orb{width:calc(var(--nu)*2.203)!important;height:calc(var(--nu)*2.203)!important;flex:none}
html body .logo-txt{gap:0!important;transform:translateY(calc(var(--nu)*-0.04))}
html body .logo-wm{font-size:var(--nu)!important;letter-spacing:0.125em!important;line-height:1!important;white-space:nowrap}
html body .logo-tg,html body.hero-done .hd .logo-tg{display:none!important}
}

/* いちばん下（.sig）：オーブの絵 56px、natane 25.4204px、2 行目 10.1682px */
html body .ft .sig{--nu:25.4204px;gap:calc(var(--nu)*0.389)!important;align-items:center!important}
html body .ft .sig canvas{width:calc(var(--nu)*2.203)!important;height:calc(var(--nu)*2.203)!important;flex:none}
html body .sig-t{gap:0!important;transform:translateY(calc(var(--nu)*-0.1135))}
html body .sig-wm{font-size:var(--nu)!important;letter-spacing:0.125em!important;line-height:1!important;white-space:nowrap}
html body .sig-tg{font-size:calc(var(--nu)*0.4)!important;letter-spacing:0.01em!important;line-height:1!important;font-weight:400!important;white-space:nowrap;margin:calc(var(--nu)*0.165) 0 0 calc(var(--nu)*0.057)!important;color:#797E8C!important}

html body .hd.inv:not(:hover) .logo-tg{color:rgba(255,255,255,.82)!important}