.hero-art { position: relative; min-width: 0; }
.hero-art .concept-figure { margin: 0; }
.cyj-companion {
  position: absolute;
  z-index: 3;
  left: -72px;
  bottom: 52px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  contain: layout style;
}
.cyj-companion svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 900px) {
  .hero.with-image { grid-template-columns: minmax(0, 1fr); }
  .hero-art { width: 100%; }
  .cyj-companion { width: 150px; height: 150px; left: -20px; bottom: 72px; }
}
@media (max-width: 480px) {
  .brand-lockup-link .header-mark { width: 36px; }
  .brand-type strong { font-size: 0.6rem; letter-spacing: 0.14em; }
  .brand-type small { display: none; }
  .site-header nav { font-size: 0.6rem; gap: 10px; }
  .site-header .nav-contact { white-space: nowrap; }
  .site-header .nav-contact span { font-size: 1rem; }
  .hero-art .concept-caption { left: 16px; right: 16px; }
  .cyj-companion { width: 124px; height: 124px; left: -12px; bottom: 72px; }
}
@media (max-width: 380px) {
  .site-header .brand-type { display: none; }
  .brand-lockup-link .header-mark { width: 44px; }
}