.site-header .brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header .brand .brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(158px, 18vw, 220px);
  height: clamp(44px, 5.2vw, 58px);
  padding: 5px 10px;
  border: 1px solid var(--brand-line, #d8e4ef);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 45, 91, .12);
  overflow: hidden;
}

.site-header .brand .brand-logo-img,
.site-header .brand .brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.site-header .brand .brand-text,
.site-header .brand > span:not(.brand-mark) {
  display: none;
}

.site-header .brand-designplus .brand-mark {
  width: clamp(166px, 18.5vw, 220px);
}

.site-footer .footer-brand img {
  width: 132px !important;
  height: auto !important;
  max-height: 52px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 980px) {
  .site-header .brand .brand-mark,
  .site-header .brand-designplus .brand-mark {
    width: 158px;
    height: 46px;
  }
}

@media (max-width: 420px) {
  .site-header .brand .brand-mark,
  .site-header .brand-designplus .brand-mark {
    width: 136px;
    height: 42px;
    padding: 4px 7px;
  }
}