/* ===========================================================================
   SolutionsDataHub -- the NAL AI mascot (NAL's own AI, shown as a character).
   - Face (datahub-ai-face.webp, 96px, round): wherever NAL's AI answers inside
     a product picture -- the hero film (.dh-f-aim), the tour (.dh-tour-aim)
     and 特長 02 (.dh-ai-face). Outside AI agents that connect through MCP
     keep the robot icon: they are the customer's tools, not NAL's AI.
   - Three standing poses (datahub-mascot-*.webp, transparent, 360px tall),
     placed in space that is already empty, so the page does not get longer:
     pointing beside the 画面イメージ heading, holding a chart on the 導入効果
     AFTER pane, bowing beside the FAQ heading. From 1024px only; phones keep
     the faces. Decorative: alt="" + aria-hidden, never in the way of a click.
   - Enters once (datahub-motion.js latch); no JS / reduced motion = in place.
   =========================================================================== */

.dh-f-aim, .dh-tour-aim, .dh-ai-face { border-radius: 50%; background: #FFF url("assets/datahub-ai-face.webp") center / cover no-repeat; box-shadow: 0 0 0 1px var(--dh-hair); }
.dh-f-aim::before, .dh-tour-aim::before { content: none; }
.dh-ai-face { flex: none; display: inline-block; width: 26px; height: 26px; }

.dh-mascot { display: none; pointer-events: none; }
.dh-mascot img { display: block; width: auto; height: 100%; }
@media (min-width: 1024px) {
  .dh-has-mascot { position: relative; --dh-mascot-r: 32px; }   /* = .wrap side padding: align with the content edge */
  .dh-mascot { position: absolute; z-index: 1; display: block; }
  .dh-mascot--point { top: -8px; right: var(--dh-mascot-r); height: 168px; }
  .dh-mascot--chart { right: 28px; bottom: calc(100% - 6px); height: 132px; }
  .dh-mascot--bow { top: -8px; right: var(--dh-mascot-r); height: clamp(112px, 10vw, 150px); }   /* clears the first question at 1024 */
}

html.dh-motion [data-dh-latch].dh-mascot:not(.dh-seen) img { opacity: 0; transform: translateY(14px); }
html.dh-motion .dh-mascot.dh-seen img { transition: opacity 0.6s var(--ease-out) 0.2s, transform 0.7s var(--ease-out) 0.2s; }