/* flowviz — 概念ページの「動きで見る」共通スタイル（DNSで確立した型を共通化） */
.flowviz{border:1px solid #ccd9ea;border-radius:14px;background:linear-gradient(180deg,#f2f6fc,#e9f0fa);padding:14px 12px 16px;margin:6px 0 8px}
.flowviz .fv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.flowviz .fv-stage{position:relative;margin:0 auto}
.flowviz .fv-zone{position:absolute;top:0;bottom:0;border-radius:10px;border:1px dashed #b9c9e0;background:rgba(255,255,255,.35)}
.flowviz .fv-zone span{position:absolute;top:4px;left:0;right:0;text-align:center;font-family:var(--display);font-weight:900;font-size:10.5px;letter-spacing:.02em;color:#5b74a0}
.flowviz .fv-node{position:absolute;box-sizing:border-box;background:#fff;border:1.5px solid #c2d1e6;border-radius:11px;padding:7px 9px 8px;font-size:21px;box-shadow:0 1px 3px rgba(20,40,80,.12);transition:border-color .25s,box-shadow .25s,opacity .25s,transform .25s;z-index:2}
.flowviz .fv-node b{display:block;font-size:12.5px;font-weight:900;color:#17233a;line-height:1.3;margin-top:1px}
.flowviz .fv-node i{display:block;font-style:normal;font-size:10px;font-weight:600;color:#6b7c93;line-height:1.3}
.flowviz .fv-node .fv-info{display:none;margin-top:4px;font-size:10.5px;font-weight:700;line-height:1.35;color:#123a8f;background:#eef4ff;border-radius:6px;padding:3px 6px}
.flowviz .fv-node .fv-info.show{display:block}
.flowviz .fv-node.on{border-color:#527bac;box-shadow:0 0 0 3px rgba(82,123,172,.28)}
.flowviz .fv-node.dim{opacity:.4}
.flowviz .fv-bubble{position:absolute;max-width:210px;font-size:11.5px;font-weight:700;line-height:1.4;color:#123a8f;background:#fffbe6;border:1.5px solid #ead98b;border-radius:10px;padding:6px 9px;z-index:8;box-shadow:0 2px 6px rgba(0,0,0,.14);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s,left .5s,top .5s;pointer-events:none}
.flowviz .fv-bubble.show{opacity:1;transform:translateY(0)}
.flowviz .fv-packet{position:absolute;font-size:19px;left:0;top:0;transform:translate(-50%,-50%);transition:left .7s cubic-bezier(.4,.1,.3,1),top .7s cubic-bezier(.4,.1,.3,1);pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));z-index:6}
.flowviz .fv-cap{min-height:40px;margin:12px 4px 0;font-size:13.5px;line-height:1.62;color:#1b2a44}
.flowviz .fv-cap b{color:#123a8f}
.flowviz .fv-ctrl{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.flowviz .fv-btn{width:38px;height:36px;border:1.5px solid #c2d1e6;background:#fff;border-radius:9px;font-family:var(--display);font-weight:900;font-size:15px;color:#2b4a7d;cursor:pointer}
.flowviz .fv-btn.on{background:#527bac;color:#fff;border-color:#527bac}
.flowviz .fv-play{margin-left:auto;border:1.5px solid #527bac;background:#fff;color:#527bac;border-radius:9px;padding:8px 12px;font-family:var(--display);font-weight:900;font-size:13px;cursor:pointer}