/* ===========================================================================
   ServicesActiveLabo — SVG Figure display rules, media queries, and responsive sizing.
   5 SVG pairs: hero (alhl/alhp), story (alsl/alsp), grow (algl/algp),
   open (alol/alop), compare (alcl/alcp).
   Breakpoint: 600px.
   - Viewport > 600px: landscape visible, portrait display:none.
   - Viewport <= 600px: portrait visible, landscape display:none.
   =========================================================================== */

/* Default / Viewport > 600px */
svg.alhl,
svg.alsl,
svg.algl,
svg.alol,
svg.alcl {
  display: block;
}

svg.alhp,
svg.alsp,
svg.algp,
svg.alop,
svg.alcp {
  display: none !important;
}

@media (min-width: 601px) {
  svg.alhl,
  svg.alsl,
  svg.alcl {
    width: 100%;
    max-width: 640px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  svg.algl,
  svg.alol {
    width: 100%;
    max-width: 360px;
    min-width: 312px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Viewport <= 600px */
@media (max-width: 600px) {
  svg.alhl,
  svg.alsl,
  svg.algl,
  svg.alol,
  svg.alcl {
    display: none !important;
  }

  svg.alhp,
  svg.alsp,
  svg.algp,
  svg.alop,
  svg.alcp {
    display: block !important;
  }

  svg.alhp,
  svg.alsp,
  svg.alcp {
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  svg.algp,
  svg.alop {
    width: 100%;
    max-width: 320px;
    min-width: 278px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Wrapper elements */
.al-hero__fig {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.al-mini {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 16px 0 0;
}

/* Ensure SVG text has proper rendering */
svg.alhl, svg.alhp,
svg.alsl, svg.alsp,
svg.algl, svg.algp,
svg.alol, svg.alop,
svg.alcl, svg.alcp {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}