/* ===========================================================================
   SolutionsDataHub -- 対応データソース・連携 band, under the hero film.
   The AVATAR DATA HUB key visual beside the supported sources and outputs.
   Same place and build as SolutionsCoding .cd-eco (Coding refine decision D3),
   Phong 2026-10-04: keep the product visual on the page.
   Since 2026-10-04 it is Phong's new visual with the NAL AI mascot
   (assets/datahub-key-visual-700/-1400.webp, 4:3, from
   NAL-picture/Solution/Avatar_DATAHUB@2x.png). It keeps its own pale
   background (automatic cut-outs left a blotchy alpha), so it shows as a
   rounded card. Since 2026-10-11 the Home / Solutions cards use this same
   datahub-key-visual-700/-1400.webp too (branch feat/avatar-cards-new-key-visuals).
   Lives INSIDE the hero <section>: no new section. Max 460px wide.
   The rule sits on the inner .dh-eco, so it starts and ends at the text edge.
   Entrance, once (latch: datahub-motion.js): kicker, line, then the rows rise
   in reading order; the picture rises a little later and slower. Quiet on
   purpose: the film right above is the moving part. Delays go through --d so
   no later rule has to out-rank the transition shorthand.
   Contrast: --dh-acc on #FFF 5.29 · --muted on #FFF 5.48 · --navy on #FFF 14.64.
   =========================================================================== */
.dh-eco { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: center; margin-top: clamp(40px, 4.4vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .dh-eco { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: clamp(40px, 5vw, 80px); } }
.dh-eco__k { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--dh-acc); }
.dh-eco__h { margin: 0 0 20px; max-width: 30em; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.dh-eco__dl { margin: 0; max-width: 34em; }
.dh-eco__dl > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); column-gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.dh-eco__dl > div:last-child { border-bottom: 1px solid var(--line); }
.dh-eco__dl dt { font-size: 13px; font-weight: 700; line-height: 1.85; color: var(--muted); white-space: nowrap; }
.dh-eco__dl dd { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.75; color: var(--navy); }
.dh-eco__fig { justify-self: center; width: 100%; max-width: 460px; margin: 0; }
.dh-eco__fig img { display: block; width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 599.98px) {
  .dh-eco__dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* entrance: start state only under html.dh-motion before the latch */
.dh-eco__h { --d: 70ms; }
.dh-eco__dl > div:nth-child(1) { --d: 160ms; }
.dh-eco__dl > div:nth-child(2) { --d: 230ms; }
.dh-eco__dl > div:nth-child(3) { --d: 300ms; }
.dh-eco__dl > div:nth-child(4) { --d: 370ms; }
html.dh-motion .dh-eco :is(.dh-eco__k, .dh-eco__h, .dh-eco__dl > div) { transition: opacity .6s var(--ease-out) var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s); }
html.dh-motion .dh-eco .dh-eco__fig { transition: opacity var(--dur-2) var(--ease-out) .2s, transform var(--dur-2) var(--ease-out) .2s; }
html.dh-motion .dh-eco[data-dh-latch]:not(.dh-seen) :is(.dh-eco__k, .dh-eco__h, .dh-eco__dl > div) { opacity: 0; transform: translateY(12px); }
html.dh-motion .dh-eco[data-dh-latch]:not(.dh-seen) .dh-eco__fig { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  .dh-eco * { transition: none !important; }
}