/* ===========================================================================
   SolutionsChatops -- 仕組み diagram, own wrapper (not .dc-fig/.dc-panel): the
   shared .dc-fig > svg { min-width: 1080px } rule in home-prototype.css forced
   this one to scroll sideways below ~1200px (laptop 1100, iPad). Two SVGs of
   one dataset instead (DataHub's .dh-map-h/.dh-map-v technique, decisions.md
   D-2026-10-10): .co-mech-h keeps the current layout from 1199px; .co-mech-v
   is a new top-to-bottom layout below that, so neither ever needs to scroll.
   Motion (.co-seq, solutions-chatops-sections.js via data-co-feat-latch="view")
   is unchanged -- both SVGs share the same class names, and only the visible
   one plays (the hidden one is display:none, so nothing double-fires).
   =========================================================================== */
.co-mech { margin-top: clamp(24px, 2.6vw, 36px); padding: clamp(20px, 2.6vw, 36px); border-radius: 24px; background: #F4F7F5; }
.co-mech svg { display: block; width: 100%; height: auto; overflow: visible; }
svg.co-mech-v { display: none; max-width: 400px; margin: 0 auto; }
@media (max-width: 1199.98px) {
  svg.co-mech-h { display: none; }
  svg.co-mech-v { display: block; }
}
@media (max-width: 759.98px) { .co-mech { padding: 10px; border-radius: 18px; } }

.co-seq-axis, .co-seq__dot { transform-box: fill-box; }
.co-seq-axis { transform-origin: top; }
.co-seq__dot { transform-origin: center; }
html.co-feat-motion .co-seq__line { stroke-dasharray: 1; }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-seq-axis { transform: scaleY(0); }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-seq__dot { opacity: 0; transform: scale(0.4); }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-seq__line { stroke-dashoffset: 1; }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) :is(.co-seq__head, .co-seq__label, .co-seq__card) { opacity: 0; }
.co-feat-seen .co-seq-axis { transition: transform var(--dur-2) var(--ease-out); }
.co-feat-seen .co-seq { --t: calc(200ms + var(--s, 0) * 200ms); }
.co-feat-seen .co-seq__dot { transition: opacity 0.15s var(--ease-out) var(--t), transform 0.15s var(--ease-out) var(--t); }
.co-feat-seen .co-seq__line { transition: stroke-dashoffset 0.4s var(--ease-out) var(--t); }
.co-feat-seen .co-seq__label { transition: opacity 0.25s var(--ease-soft) calc(var(--t) + 120ms); }
.co-feat-seen .co-seq__head { transition: opacity 0.12s linear calc(var(--t) + 380ms); }
.co-feat-seen .co-seq__card { transition: opacity 0.3s var(--ease-soft) calc(var(--t) + 400ms); }

/* 導入効果: BEFORE stays still. The arrow draws, AFTER fades in, its green
   bar grows from the left (top, in the vertical layout), then the 3 points
   slide in along the arrow. */
.co-ba__bar { transform-box: fill-box; transform-origin: left; }
html.co-feat-motion .co-ba__arrow { stroke-dasharray: 1; }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-ba__arrow { stroke-dashoffset: 1; }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) :is(.co-ba__head, .co-ba__frame) { opacity: 0; }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-ba__bar { transform: scaleX(0); }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-ba__item { opacity: 0; transform: translateX(-8px); }
.co-feat-seen .co-ba__arrow { transition: stroke-dashoffset 0.4s var(--ease-out); }
.co-feat-seen .co-ba__head { transition: opacity 0.12s linear 0.36s; }
.co-feat-seen .co-ba__frame { transition: opacity 0.35s var(--ease-soft) 0.25s; }
.co-feat-seen .co-ba__bar { transition: transform var(--dur-1) var(--ease-out) 0.35s; }
.co-feat-seen .co-ba__item {
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  transition-delay: calc(650ms + var(--s, 0) * 90ms);
}