.logo .mark{position:relative;display:inline-block;width:42px;height:34px;flex:0 0 auto;background:none;border:none;border-radius:0}
.logo .mark .mk{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.logo .mark .mk-dark{opacity:0}
.header.scrolled .logo .mark .mk-light{opacity:0}
.header.scrolled .logo .mark .mk-dark{opacity:1}

.logo>span:last-child{line-height:1.15;text-align:justify;text-align-last:justify}
.logo small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:inherit;opacity:.78;line-height:1.15;margin-top:4px;margin-right:-.14em;text-align:left;text-align-last:auto}

.header.scrolled .logo{color:var(--blue-600)}
.header.scrolled .logo small{opacity:.9}

.footer .logo{color:#fff}
.footer .logo small{color:#fff;opacity:1}
.footer .logo .mark{width:44px;height:36px}
.footer .logo .mark img{width:100%;height:100%;object-fit:contain;display:block}