/* ===========================================================================
   SolutionsChatops -- product key visual, in the hero section, below the
   4-scene film (avatar-key-visual-placement-and-logo-claims: same slot used
   on Sales/Coding/DataHub). Source: NAL-picture/Solution/Avatar ChatOps
   Workspace Mascot.png (Phong, 2026-10-10) -> Real-ESRGAN x4 -> exported
   700w/1400w. The picture keeps its own soft background (not a transparent
   cutout), same as the Coding/DataHub key visuals; this file only frames it
   (rounded corners) and lays out the kicker + heading beside it. No new
   claim: the heading reuses the already-approved 特長 01 line, because the
   picture shows exactly that moment (a channel message becomes a task-board
   card). Unlike Coding/DataHub this page has no dt/dd integration list yet,
   so this strip is copy + image only.
   =========================================================================== */
.co-eco { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: center; padding-top: clamp(28px, 3vw, 40px); padding-bottom: clamp(40px, 4.2vw, 60px); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .co-eco { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: clamp(40px, 5vw, 80px); } }
.co-eco__k { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.2em; color: #237A52; }
.co-eco__h { margin: 0; max-width: 24em; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.co-eco__fig { justify-self: center; width: 100%; max-width: 460px; margin: 0; }
.co-eco__fig img { display: block; width: 100%; height: auto; border-radius: 16px; }

html.co-feat-motion .co-eco[data-co-feat-latch]:not(.co-feat-seen) :is(.co-eco__k, .co-eco__h) { opacity: 0; transform: translateY(12px); }
html.co-feat-motion .co-eco[data-co-feat-latch]:not(.co-feat-seen) .co-eco__fig { opacity: 0; transform: translateY(20px); }
.co-eco.co-feat-seen :is(.co-eco__k, .co-eco__h) { transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.co-eco.co-feat-seen .co-eco__fig { transition: opacity var(--dur-2) var(--ease-out) 150ms, transform var(--dur-2) var(--ease-out) 150ms; }
.co-eco.co-feat-seen .co-eco__h { transition-delay: 70ms; }