/* DX service: scoped to the dev review page content. */ #op-main .opdx {--dx-navy:#0C447C;--dx-deep:#082F57;--dx-blue:#378ADD;--dx-soft:#F3F6FA;--dx-line:#D9E0E8;color:#1F2A37;background:#fff;font:500 17px/1.9 'Zen Kaku Gothic New','Yu Gothic',sans-serif;width:100%;} #op-main .opdx *,#op-main .opdx *::before,#op-main .opdx *::after {box-sizing:border-box;} #op-main .opdx :is(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,dl,dd) {margin:0;padding:0;} #op-main .opdx :is(h1,h2,h3) {color:var(--dx-navy);font-family:'Shippori Mincho','Yu Mincho',serif;font-weight:600;letter-spacing:.02em;line-height:1.5;border:0;background:none;box-shadow:none;} #op-main .opdx :is(h1,h2,h3,h4,h5,h6)::before,#op-main .opdx :is(h1,h2,h3,h4,h5,h6)::after {display:none;} #op-main .opdx h1 {font-size:clamp(32px,3.9vw,56px);} #op-main .opdx h2 {font-size:38px;} #op-main .opdx h3 {font-size:32px;} #op-main .opdx :is(h4,h5,h6) {font:700 16px/1.65 'Zen Kaku Gothic New',sans-serif;color:var(--dx-navy);border:0;background:none;} #op-main .opdx p {font-size:17px;line-height:1.9;} #op-main .opdx a {color:var(--dx-navy);text-decoration:underline;text-underline-offset:5px;} #op-main .opdx a:focus-visible {outline:3px solid var(--dx-blue);outline-offset:5px;} #op-main .opdx .dx-wrap {width:calc(100% - 96px);max-width:1200px;margin-inline:auto;} #op-main .opdx .dx-section {padding:96px 0;} #op-main .opdx .dx-soft {background:var(--dx-soft);} #op-main .opdx [id] {scroll-margin-top:150px;} #op-main .opdx .dx-breadcrumb {display:flex;flex-wrap:wrap;gap:10px;padding:28px 0;color:#4A5563;font-size:13px;} #op-main .opdx .dx-breadcrumb a {text-decoration:none;} #op-main .opdx .dx-hero {display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:center;padding:40px 0 56px;} #op-main .opdx .dx-eyebrow {font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--dx-navy);margin:0 0 18px;} #op-main .opdx .dx-lead {font-size:20px;margin-top:22px;} #op-main .opdx .dx-hero img {display:block;width:100%;height:auto;aspect-ratio:2.1;object-fit:cover;border-radius:4px;} #op-main .opdx figcaption {font-size:14px;line-height:1.7;color:#4A5563;margin-top:16px;} #op-main .opdx .dx-hero figcaption {text-align:right;margin-top:8px;} #op-main .opdx .dx-anchor {display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--dx-line);margin-bottom:48px;} #op-main .opdx .dx-anchor a {display:flex;justify-content:space-between;gap:12px;font-size:15px;text-decoration:none;padding:20px 16px;} #op-main .opdx .dx-anchor a:hover {background:var(--dx-soft);} #op-main .opdx .dx-issues {display:grid;grid-template-columns:1fr 1fr;gap:32px 64px;margin-top:40px;} #op-main .opdx .dx-issues>div {border-top:1px solid var(--dx-line);padding-top:24px;} #op-main .opdx .dx-issues h3 {font:700 20px/1.7 'Zen Kaku Gothic New',sans-serif;} #op-main .opdx .dx-issues p {margin-top:12px;} #op-main .opdx .dx-support-heading {padding-top:96px;} #op-main .opdx .dx-support-heading>p:last-child {margin-top:20px;} #op-main .opdx .dx-support-heading+.dx-service {padding-top:64px;} #op-main .opdx .dx-split {display:grid;grid-template-columns:minmax(0, .88fr) minmax(0, 1.12fr);gap:64px;align-items:center;} #op-main .opdx .dx-title {display:flex;gap:20px;align-items:baseline;} #op-main .opdx .dx-title h3 {font-size:clamp(26px,2.35vw,34px);} #op-main .opdx .dx-number {color:var(--dx-navy);font-size:18px;white-space:nowrap;} #op-main .opdx .dx-gold {width:40px;height:2px;background:#BA7517;margin:24px 0 30px;} #op-main .opdx .dx-copy>p+p {margin-top:24px;} #op-main .opdx .dx-copy strong {color:var(--dx-navy);} #op-main .opdx .dx-note {border-top:1px solid var(--dx-line);padding-top:20px;color:#4A5563;font-size:15px;} #op-main .opdx .dx-figure {min-width:0;padding:28px;background:var(--dx-soft);border-radius:4px;} #op-main .opdx .dx-soft .dx-figure {background:#fff;} #op-main .opdx .dx-fighead {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;} #op-main .opdx .dx-fighead h4 {font-size:18px;} #op-main .opdx .dx-sample {font-size:12px;white-space:nowrap;border:1px solid var(--dx-line);padding:2px 7px;color:#4A5563;background:#fff;} #op-main .opdx .dx-icon {display:block;flex-shrink:0;width:28px;height:30px;color:var(--dx-navy);} #op-main .opdx .dx-dataflow {display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;} #op-main .opdx .dx-sources {display:grid;gap:8px;} #op-main .opdx .dx-source {display:flex;align-items:center;gap:14px;border:1px solid var(--dx-line);background:#fff;padding:10px 14px;font-size:15px;line-height:1.6;} #op-main .opdx .dx-source span {display:block;font-size:14px;color:#4A5563;} #op-main .opdx .dx-process {display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;color:var(--dx-navy);font-size:16px;} #op-main .opdx .dx-process .dx-icon {width:48px;height:52px;} #op-main .opdx .dx-process>span:not(.dx-arrow) {font-size:14px;} #op-main .opdx .dx-arrow {font-size:26px;line-height:1;} #op-main .opdx .dx-dashboard {margin-top:20px;padding:20px;background:#fff;border:1px solid var(--dx-line);} #op-main .opdx .dx-dashboard-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px;} #op-main .opdx .dx-chart {min-width:0;} #op-main .opdx .dx-chart p {font-size:14px;line-height:1.6;margin-top:12px;color:#4A5563;} #op-main .opdx .dx-bars {display:flex;gap:16px;align-items:end;border-bottom:1px solid var(--dx-line);padding:12px 12px 0;height:112px;} #op-main .opdx .dx-bars>div {flex:1;text-align:center;font-size:13px;color:#4A5563;} #op-main .opdx .dx-bars i {display:block;background:var(--dx-blue);max-width:36px;margin:auto;} #op-main .opdx .dx-bars>div:last-child i {background:var(--dx-navy);} #op-main .opdx .dx-metric {display:grid;border-bottom:1px solid var(--dx-line);font-size:14px;padding:10px 0;line-height:1.7;} #op-main .opdx .dx-metric b {color:var(--dx-navy);font-weight:500;} #op-main .opdx .dx-criteria {display:grid;grid-template-columns:1fr 1fr;gap:16px;list-style:none;} #op-main .opdx .dx-criteria li {display:flex;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--dx-line);font-size:15px;line-height:1.7;} #op-main .opdx .dx-criteria li:last-child {grid-column:1/-1;} #op-main .opdx .dx-criteria b {color:var(--dx-navy);} #op-main .opdx .dx-criteria span {display:block;font-size:14px;margin-top:5px;color:#4A5563;} #op-main .opdx .dx-flow-heading {margin:24px 0 16px;} #op-main .opdx .dx-cloudsteps {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;} #op-main .opdx .dx-cloudsteps li {border-top:3px solid var(--dx-blue);padding-top:12px;position:relative;} #op-main .opdx .dx-cloudsteps li+li::before {content:'→';position:absolute;top:12px;left:-14px;color:var(--dx-navy);font-size:16px;} #op-main .opdx .dx-cloudsteps li>span {font-size:12px;color:#4A5563;margin-right:10px;} #op-main .opdx .dx-cloudsteps b {font-size:20px;color:var(--dx-navy);} #op-main .opdx .dx-cloudsteps strong {display:block;font-size:14px;margin-top:12px;} #op-main .opdx .dx-cloudsteps p {font-size:14px;line-height:1.8;margin-top:6px;} #op-main .opdx .dx-auto-legend {display:flex;gap:20px;font-size:14px;color:#4A5563;margin-bottom:16px;} #op-main .opdx .dx-auto-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} #op-main .opdx .dx-auto-column h5 {min-height:48px;font-size:14px;text-align:center;display:flex;justify-content:center;align-items:center;} #op-main .opdx .dx-auto-man,#op-main .opdx .dx-auto-after {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid var(--dx-line);background:#fff;padding:16px 4px;font-size:14px;text-align:center;} #op-main .opdx .dx-auto-man .dx-icon {color:#4A5563;} #op-main .opdx .dx-auto-after {background:#E4EEF8;border-color:#9ECBF2;color:var(--dx-navy);} #op-main .opdx .dx-auto-after.dx-human {background:#fff;border:2px solid var(--dx-navy);padding:15px 3px;} #op-main .opdx .dx-auto-down {display:block;text-align:center;color:var(--dx-navy);margin:6px 0;} #op-main .opdx .dx-callout {margin-top:24px;padding:16px;background:#E4EEF8;font-size:15px;color:var(--dx-navy);} #op-main .opdx .dx-effects {display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;font-size:14px;} #op-main .opdx .dx-effects b {flex-basis:100%;color:var(--dx-navy);} #op-main .opdx .dx-effects span::before {content:'✓';color:var(--dx-navy);margin-right:5px;} #op-main .opdx .dx-app-input {display:grid;grid-template-columns:1.4fr 1fr;gap:24px;} #op-main .opdx .dx-step-label {display:block;font-size:14px;font-weight:700;color:var(--dx-navy);margin-bottom:10px;} #op-main .opdx .dx-mock-fields {display:grid;gap:10px;margin:16px 0;} #op-main .opdx .dx-mock-fields>div {display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;font-size:14px;} #op-main .opdx .dx-mock-fields dd {border:1px solid var(--dx-line);padding:5px 8px;background:#fff;} #op-main .opdx .dx-mock-button {display:block;background:var(--dx-navy);color:#fff;text-align:center;font-size:14px;padding:6px;} #op-main .opdx .dx-app-save {display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--dx-soft);padding:16px;font-size:14px;text-align:center;} #op-main .opdx .dx-app-save .dx-icon {width:56px;height:60px;margin:12px 0;color:#1E66B0;} #op-main .opdx .dx-app-save b {font-size:16px;color:var(--dx-navy);} #op-main .opdx .dx-app-list {margin-top:24px;border-top:1px solid var(--dx-line);padding-top:20px;} #op-main .opdx table {width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;margin:0;table-layout:fixed;} #op-main .opdx table caption {text-align:left;font-weight:700;color:var(--dx-navy);padding-bottom:10px;} #op-main .opdx :is(th,td) {padding:10px 8px;border:1px solid var(--dx-line);background:#fff;color:#1F2A37;text-align:left;vertical-align:middle;} #op-main .opdx th {font-weight:700;} #op-main .opdx th:first-child {width:44%;} #op-main .opdx .dx-status {display:inline-block;border-radius:3px;padding:1px 6px;background:#E4EEF8;color:var(--dx-navy);} #op-main .opdx .dx-status-muted {background:#F3F6FA;color:#4A5563;} #op-main .opdx .dx-related {display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:32px;border-bottom:1px solid var(--dx-line);} #op-main .opdx .dx-related p,#op-main .opdx .dx-related a {font-size:15px;} #op-main .opdx .dx-related a {white-space:nowrap;font-weight:700;} #op-main .opdx .dx-flow {list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:40px;} #op-main .opdx .dx-flow li {border-top:1px solid var(--dx-line);padding-top:20px;} #op-main .opdx .dx-flow h3 {font:700 20px/1.6 'Zen Kaku Gothic New',sans-serif;margin-top:16px;} #op-main .opdx .dx-duration {display:inline-block;background:var(--dx-soft);color:var(--dx-navy);font-size:13px;padding:2px 10px;margin-top:12px;} #op-main .opdx .dx-flow p {font-size:16px;margin-top:16px;} #op-main .opdx .dx-pricing {display:grid;grid-template-columns:340px 1fr;margin-top:40px;background:#fff;} #op-main .opdx .dx-price {padding:40px;background:var(--dx-deep);color:#fff;} #op-main .opdx .dx-price :is(h3,p) {color:#fff;} #op-main .opdx .dx-price h3 {font-size:28px;} #op-main .opdx .dx-amount {font:600 44px/1.6 'Shippori Mincho',serif;margin-top:16px;} #op-main .opdx .dx-amount span {font-size:20px;} #op-main .opdx .dx-price-note {font-size:15px;border-top:1px solid #58738D;padding-top:24px;margin-top:24px;} #op-main .opdx .dx-price-detail {padding:40px;align-self:center;} #op-main .opdx .dx-price-detail ul {list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:24px 0;} #op-main .opdx .dx-price-detail li {font-size:16px;} #op-main .opdx .dx-price-detail li::before {content:'✓';margin-right:10px;color:var(--dx-navy);} #op-main .opdx .dx-cta {padding:64px 0;background:var(--dx-deep);color:#fff;} #op-main .opdx .dx-cta>.dx-wrap {display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center;} #op-main .opdx .dx-cta h2 {color:#fff;font-size:34px;} #op-main .opdx .dx-cta p {font-size:15px;margin-top:16px;color:#DCE6F2;} #op-main .opdx .dx-cta>.dx-wrap>div:last-child p {font-size:14px;} #op-main .opdx .dx-button {display:flex;align-items:center;justify-content:center;min-height:60px;padding:14px 24px;background:#fff;color:var(--dx-navy);text-decoration:none;font-size:18px;font-weight:700;border-radius:4px;} #op-main .opdx .dx-button:hover {background:#E4EEF8;} @media(max-width:1100px){ #op-main .opdx .dx-wrap {width:calc(100% - 64px);} #op-main .opdx .dx-split {gap:32px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);} #op-main .opdx .dx-figure {padding:24px;} #op-main .opdx .dx-hero {gap:32px;} #op-main .opdx .dx-cloudsteps {gap:12px;} #op-main .opdx .dx-auto-grid {gap:8px;} #op-main .opdx .dx-flow {gap:24px;} #op-main .opdx .dx-pricing {grid-template-columns:300px 1fr;} #op-main .opdx .dx-price-detail {padding:32px;} } @media(max-width:900px){ #op-main .opdx .dx-split {grid-template-columns:1fr;gap:36px;} #op-main .opdx .dx-copy {max-width:720px;} #op-main .opdx .dx-figure {padding:28px;} #op-main .opdx .dx-title h3 {font-size:30px;} #op-main .opdx .dx-hero {grid-template-columns:1fr 260px;gap:24px;} #op-main .opdx h1 {font-size:36px;} #op-main .opdx .dx-lead {font-size:18px;} #op-main .opdx .dx-hero .dx-pc-break {display:none;} #op-main .opdx .dx-anchor a {padding:16px 10px;font-size:14px;} #op-main .opdx .dx-issues {gap:24px 32px;} #op-main .opdx .dx-flow {grid-template-columns:1fr 1fr;gap:32px;} #op-main .opdx .dx-pricing {grid-template-columns:260px 1fr;} #op-main .opdx .dx-price {padding:28px;} #op-main .opdx .dx-price-detail {padding:28px;} #op-main .opdx .dx-price-detail ul {grid-template-columns:1fr;} #op-main .opdx .dx-cta>.dx-wrap {grid-template-columns:1fr;gap:32px;} #op-main .opdx .dx-cta .dx-button {max-width:480px;} } @media(max-width:600px){ #op-main .opdx {font-size:16px;} #op-main .opdx p {font-size:16px;} #op-main .opdx .dx-wrap {width:calc(100% - 40px);} #op-main .opdx .dx-section {padding:72px 0;} #op-main .opdx .dx-breadcrumb {font-size:12px;gap:6px;padding:24px 0;} #op-main .opdx .dx-hero {grid-template-columns:1fr;gap:24px;padding:24px 0 32px;} #op-main .opdx h1 {font-size:32px;} #op-main .opdx h2 {font-size:28px;} #op-main .opdx .dx-lead {font-size:18px;margin-top:20px;} #op-main .opdx .dx-hero img {aspect-ratio:2.5;} #op-main .opdx .dx-anchor {grid-template-columns:1fr 1fr;margin-bottom:36px;} #op-main .opdx .dx-anchor a:nth-child(-n+2) {border-bottom:1px solid var(--dx-line);} #op-main .opdx .dx-anchor a {font-size:14px;gap:4px;min-height:54px;align-items:center;padding:12px 8px;} #op-main .opdx .dx-issues {grid-template-columns:1fr;gap:28px;margin-top:28px;} #op-main .opdx .dx-issues h3 {font-size:19px;} #op-main .opdx .dx-support-heading {padding-top:72px;} #op-main .opdx .dx-support-heading+.dx-service {padding-top:40px;} #op-main .opdx .dx-title {gap:12px;} #op-main .opdx .dx-title h3 {font-size:26px;} #op-main .opdx .dx-gold {margin:20px 0 24px;} #op-main .opdx .dx-figure {padding:20px 16px;} #op-main .opdx .dx-fighead {display:block;margin-bottom:20px;} #op-main .opdx .dx-fighead h4 {font-size:17px;} #op-main .opdx .dx-sample {display:inline-block;margin-top:8px;} #op-main .opdx .dx-dataflow {grid-template-columns:1fr;gap:16px;} #op-main .opdx .dx-sources {grid-template-columns:1fr 1fr;gap:8px;} #op-main .opdx .dx-source {display:block;padding:12px 10px;font-size:14px;} #op-main .opdx .dx-source .dx-icon {width:24px;height:26px;margin-bottom:8px;} #op-main .opdx .dx-source span {font-size:14px;} #op-main .opdx .dx-process {gap:8px;} #op-main .opdx .dx-process .dx-arrow:first-child {font-size:0;} #op-main .opdx .dx-process .dx-arrow:first-child::before {content:'↓';font-size:26px;} #op-main .opdx .dx-process .dx-icon {display:none;} #op-main .opdx .dx-dashboard {padding:16px;} #op-main .opdx .dx-dashboard-grid {grid-template-columns:1fr;gap:24px;} #op-main .opdx .dx-bars {gap:24px;} #op-main .opdx .dx-criteria {grid-template-columns:1fr;} #op-main .opdx .dx-cloudsteps {grid-template-columns:1fr;gap:24px;} #op-main .opdx .dx-cloudsteps li+li::before {content:'↓';top:-28px;left:auto;right:12px;} #op-main .opdx .dx-cloudsteps strong {margin-top:6px;} #op-main .opdx .dx-auto-grid {grid-template-columns:1fr;gap:20px;} #op-main .opdx .dx-auto-column {display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center;} #op-main .opdx .dx-auto-column h5 {grid-column:1/-1;min-height:0;text-align:left;justify-content:start;font-size:15px;} #op-main .opdx .dx-auto-down {font-size:0;} #op-main .opdx .dx-auto-down::before {content:'→';font-size:20px;} #op-main .opdx .dx-auto-legend {font-size:0;justify-content:space-between;} #op-main .opdx .dx-auto-legend span:first-child::before {content:'左：手作業';font-size:14px;} #op-main .opdx .dx-auto-legend span:last-child::before {content:'右：自動化後';font-size:14px;} #op-main .opdx .dx-callout {font-size:15px;padding:12px;} #op-main .opdx .dx-effects {font-size:14px;} #op-main .opdx .dx-app-input {grid-template-columns:1fr;gap:16px;} #op-main .opdx .dx-app-save {flex-direction:row;flex-wrap:wrap;gap:12px;} #op-main .opdx .dx-app-save .dx-step-label {width:100%;margin:0;} #op-main .opdx .dx-app-save .dx-icon {width:30px;height:32px;margin:0;} #op-main .opdx .dx-app-save>span:last-child {width:100%;} #op-main .opdx :is(th,td) {padding:8px 5px;font-size:14px;} #op-main .opdx th:first-child {width:42%;} #op-main .opdx .dx-status {padding:0 3px;} #op-main .opdx figcaption {font-size:14px;} #op-main .opdx .dx-related {display:block;padding-block:28px;} #op-main .opdx .dx-related a {display:inline-block;margin-top:16px;} #op-main .opdx .dx-flow {grid-template-columns:1fr;gap:28px;margin-top:28px;} #op-main .opdx .dx-flow h3 {margin-top:8px;} #op-main .opdx .dx-pricing {grid-template-columns:1fr;margin-top:28px;} #op-main .opdx .dx-price,#op-main .opdx .dx-price-detail {padding:28px 24px;} #op-main .opdx .dx-cta {padding:48px 0;} #op-main .opdx .dx-cta h2 {font-size:28px;} #op-main .opdx .dx-cta p {font-size:15px;} #op-main .opdx .dx-button {font-size:17px;} } /* Final figure balance and explicit connections. */ #op-main .opdx .dx-dataflow {display:block;} #op-main .opdx .dx-sources {grid-template-columns:1fr 1fr;} #op-main .opdx .dx-process {position:relative;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 16px;background:#fff;border:1px solid var(--dx-line);padding:14px;margin:18px 0 36px;} #op-main .opdx .dx-process .dx-icon {width:28px;height:30px;} #op-main .opdx .dx-process .dx-arrow:first-child {display:none;} #op-main .opdx .dx-process .dx-arrow:last-child {position:absolute;bottom:-30px;left:calc(50% - 10px);} #op-main .opdx .dx-process>span:not(.dx-arrow) {flex-basis:100%;} #op-main .opdx .dx-app-input {gap:32px;} #op-main .opdx .dx-app-save {position:relative;} #op-main .opdx .dx-app-save::before {content:'→';position:absolute;left:-26px;top:calc(50% - 18px);font-size:22px;color:var(--dx-navy);} #op-main .opdx .dx-app-list {position:relative;margin-top:38px;} #op-main .opdx .dx-app-list::before {content:'↓';position:absolute;top:-34px;left:calc(50% - 8px);font-size:22px;color:var(--dx-navy);} @media(max-width:600px){ #op-main .opdx .dx-process .dx-icon {display:block;} #op-main .opdx .dx-app-input {gap:36px;} #op-main .opdx .dx-app-save::before {content:'↓';top:-34px;left:calc(50% - 8px);} } /* Rich diagram revision: keep the workflow visible and balance the two columns. */ #op-main .opdx .dx-service {padding:80px 0;} #op-main .opdx .dx-split {grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:48px;align-items:start;} #op-main .opdx .dx-title {gap:16px;} #op-main .opdx .dx-title h3 {font-size:clamp(28px,2.8vw,40px);line-height:1.5;} #op-main .opdx .dx-title .dx-number {font-size:16px;} #op-main .opdx .dx-copy .dx-gold {margin:20px 0 28px;} #op-main .opdx .dx-copy>p+p {margin-top:20px;} #op-main .opdx .dx-rich-figure {padding:0;border:0;border-radius:0;background:transparent;} #op-main .opdx .dx-soft .dx-rich-figure {background:transparent;} #op-main .opdx .dx-rich-figure .dx-fighead {margin-bottom:14px;} #op-main .opdx .dx-rich-image {display:block;width:100%;height:auto;border:1px solid var(--dx-line);border-radius:4px;background:#fff;} #op-main .opdx .dx-diagram-link {display:block;position:relative;line-height:0;} #op-main .opdx .dx-diagram-link:focus-visible {outline:3px solid var(--dx-blue);outline-offset:4px;} #op-main .opdx .dx-rich-figure figcaption {display:flex;align-items:start;justify-content:space-between;gap:20px;margin-top:12px;font-size:14px;line-height:1.7;} #op-main .opdx .dx-rich-caption {flex:1;} #op-main .opdx .dx-enlarge {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;white-space:nowrap;border:1px solid var(--dx-line);border-radius:4px;background:#fff;color:var(--dx-navy);font-size:14px;line-height:1.6;} #op-main .opdx .dx-diagram-summary {display:none;} @media(max-width:1100px){ #op-main .opdx .dx-split {gap:32px;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);} #op-main .opdx .dx-title h3 {font-size:30px;} } @media(max-width:900px){ #op-main .opdx .dx-split {grid-template-columns:1fr;gap:32px;} #op-main .opdx .dx-copy {max-width:none;} #op-main .opdx .dx-title h3 {font-size:34px;} #op-main .opdx .dx-diagram-summary {display:block;margin-top:16px;padding:16px 20px;background:#EAF1F8;border-left:3px solid var(--dx-blue);font-size:16px;line-height:1.9;color:var(--dx-navy);} } @media(max-width:600px){ #op-main .opdx .dx-service {padding:64px 0;} #op-main .opdx .dx-title h3 {font-size:28px;} #op-main .opdx .dx-title {gap:12px;} #op-main .opdx .dx-rich-figure .dx-fighead {margin-bottom:12px;} #op-main .opdx .dx-rich-figure figcaption {display:block;margin-top:10px;} #op-main .opdx .dx-enlarge {margin-top:12px;width:100%;} #op-main .opdx .dx-diagram-summary {padding:14px 16px;margin-top:16px;} } #op-main .opdx .dx-service .dx-copy {padding-top:24px;} @media(max-width:900px){#op-main .opdx .dx-service .dx-copy {padding-top:0;}} /* Native diagrams: match site typography and restore original structure. */ /* Common native-diagram reset: scoped, no raster text, no decorative depth. */ #op-main .opdx .dx-native{font-family:inherit;font-size:14px;font-weight:500;line-height:1.6;letter-spacing:normal;color:#0C447C;background:#fff;border:1px solid #D9E0E8;padding:16px;box-sizing:border-box;min-width:0;} #op-main .opdx .dx-native *,#op-main .opdx .dx-native *::before,#op-main .opdx .dx-native *::after{box-sizing:border-box;font-family:inherit;letter-spacing:normal;box-shadow:none;text-shadow:none;} #op-main .opdx .dx-native :is(p,h3,h4,h5,h6,ul,ol,dl,dd){margin:0;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;} #op-main .opdx .dx-native b,#op-main .opdx .dx-native strong{font-weight:700;} #op-main .opdx .dx-native svg{display:block;max-width:100%;} #op-main .opdx .dx-native .dxn-icon{width:30px;height:34px;flex-shrink:0;color:#1E66B0;} #op-main .opdx .dx-native table{width:100%;border-collapse:collapse;table-layout:fixed;margin:0;font:inherit;} #op-main .opdx .dx-native :is(th,td){font:inherit;color:inherit;background:#fff;border:1px solid #D9E0E8;text-align:left;vertical-align:middle;padding:7px 6px;} #op-main .opdx .dx-native th{font-weight:700;} #op-main .opdx .dx-native th:first-child{width:auto;} /* Data: four sources, explicit processing, four useful dashboard panels. */ #op-main .opdx .dxn-data{display:grid;grid-template-columns:150px 90px minmax(0,1fr);gap:12px;align-items:center;} #op-main .opdx .dxn-data-sources{display:grid;gap:12px;} #op-main .opdx .dxn-data-source{display:flex;align-items:center;gap:8px;border:1px solid #D9E0E8;padding:12px 9px;min-height:70px;} #op-main .opdx .dxn-data-source b{font-size:15px;display:block;white-space:nowrap;} #op-main .opdx .dxn-data-source span{display:block;font-size:14px;color:#4A5563;} #op-main .opdx .dxn-data-source .dxn-icon{width:24px;height:30px;} #op-main .opdx .dxn-data-process{display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center;} #op-main .opdx .dxn-data-process>div{display:grid;justify-items:center;gap:8px;padding:16px 5px;background:#EDF4FA;border:1px solid #B9D2E9;width:100%;} #op-main .opdx .dxn-data-process b{font-size:15px;white-space:nowrap;} #op-main .opdx .dxn-data-arrow{font-size:26px;line-height:1;color:#378ADD;} #op-main .opdx .dxn-data-dashboard{min-width:0;border:1px solid #B9D2E9;} #op-main .opdx .dxn-data-barhead{background:#0C447C;color:#fff;font-weight:700;font-size:15px;padding:8px 12px;} #op-main .opdx .dxn-data-panels{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;} #op-main .opdx .dxn-data-panel{border:1px solid #D9E0E8;min-width:0;padding:8px;} #op-main .opdx .dxn-panel-title{display:block;font-size:15px;margin-bottom:8px;} #op-main .opdx .dxn-data-bars{height:108px;display:flex;gap:4px;align-items:end;border-bottom:1px solid #D9E0E8;} #op-main .opdx .dxn-data-bars>div{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:end;gap:5px;} #op-main .opdx .dxn-data-bars i{display:block;width:80%;max-width:19px;background:#378ADD;} #op-main .opdx .dxn-data-bars span{font-size:14px;white-space:nowrap;} #op-main .opdx .dxn-data-pie{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;min-height:108px;} #op-main .opdx .dxn-data-pie>svg{width:70px;height:70px;} #op-main .opdx .dxn-data-pie>div{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;font-size:14px;} #op-main .opdx .dxn-data-pie span{white-space:nowrap;display:flex;align-items:center;gap:4px;} #op-main .opdx .dxn-data-pie i{width:8px;height:8px;display:inline-block;background:#0C447C;} #op-main .opdx .dxn-data-pie span:nth-child(2) i{background:#378ADD;} #op-main .opdx .dxn-data-pie span:nth-child(3) i{background:#88B9E9;} #op-main .opdx .dxn-data-pie span:nth-child(4) i{background:#C4DDF4;} #op-main .opdx .dxn-data-line>svg{width:100%;height:80px;} #op-main .opdx .dxn-data-line>div{display:flex;justify-content:space-between;font-size:14px;} #op-main .opdx .dxn-data-time :is(th,td){padding:2px 4px;font-size:14px;line-height:1.6;} #op-main .opdx .dxn-data-time thead th{background:#EDF4FA;} #op-main .opdx .dxn-data-time tbody th{font-weight:500;} #op-main .opdx .dxn-data-time td{text-align:right;} /* App: static explanatory UI, not a functional form. */ #op-main .opdx .dxn-app{display:grid;grid-template-columns:190px 94px minmax(0,1fr);gap:12px;align-items:stretch;} #op-main .opdx .dxn-app-form,#op-main .opdx .dxn-app-list{border:1px solid #B9D2E9;min-width:0;} #op-main .opdx .dxn-app-head{display:block;background:#0C447C;color:#fff;padding:10px 12px;font-size:16px;text-align:center;} #op-main .opdx .dxn-app-formbody{display:grid;gap:12px;padding:14px;} #op-main .opdx .dxn-app-field>b{display:block;font-size:14px;margin-bottom:4px;} #op-main .opdx .dxn-app-field>span{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:36px;padding:5px 9px;border:1px solid #B9C9D9;font-size:15px;} #op-main .opdx .dxn-app-field i{font-style:normal;font-size:18px;line-height:1;} #op-main .opdx .dxn-app-button{display:block;text-align:center;padding:8px;background:#0C447C;color:#fff;font-size:15px;font-weight:700;} #op-main .opdx .dxn-app-process{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;} #op-main .opdx .dxn-app-process>span{font-size:26px;color:#378ADD;line-height:1;} #op-main .opdx .dxn-app-process>div{display:grid;justify-items:center;gap:10px;background:#EDF4FA;border:1px solid #B9D2E9;padding:20px 4px;width:100%;} #op-main .opdx .dxn-app-process b{font-size:15px;white-space:nowrap;} #op-main .opdx .dxn-app-tablewrap{padding:12px 8px;} #op-main .opdx .dxn-app-tablewrap :is(th,td){font-size:14px;padding:12px 4px;text-align:center;} #op-main .opdx .dxn-app-tablewrap thead th{background:#EDF4FA;} #op-main .opdx .dxn-app-tablewrap tbody th{font-weight:500;} #op-main .opdx .dxn-app-tablewrap tbody tr:first-child :is(th,td){background:#F3F8FC;} #op-main .opdx .dxn-app-state{display:inline-block;padding:2px 5px;border-radius:3px;background:#E1EFFB;white-space:nowrap;font-size:14px;} #op-main .opdx .dxn-app-wait{background:#FFF0CE;} #op-main .opdx .dxn-app-done{background:#E2F1E8;} /* Keep actual text readable on phones: reflow the relationships vertically. */ @media(max-width:600px){ #op-main .opdx .dx-native{padding:12px;} #op-main .opdx .dxn-data{grid-template-columns:1fr;gap:14px;} #op-main .opdx .dxn-data-sources{grid-template-columns:1fr 1fr;gap:8px;} #op-main .opdx .dxn-data-source{padding:10px 8px;} #op-main .opdx .dxn-data-process{flex-direction:column;gap:6px;} #op-main .opdx .dxn-data-process>div{display:flex;justify-content:center;align-items:center;gap:12px;padding:8px;} #op-main .opdx .dxn-data-arrow{font-size:0;} #op-main .opdx .dxn-data-arrow::after{content:'↓';font-size:24px;} #op-main .opdx .dxn-data-pie{min-height:108px;} #op-main .opdx .dxn-app{grid-template-columns:1fr;gap:10px;} #op-main .opdx .dxn-app-formbody{grid-template-columns:1fr 1fr;gap:10px;} #op-main .opdx .dxn-app-field:first-child{grid-column:1/-1;} #op-main .opdx .dxn-app-button{grid-column:1/-1;} #op-main .opdx .dxn-app-process{gap:5px;} #op-main .opdx .dxn-app-process>div{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;} #op-main .opdx .dxn-app-process>span{font-size:0;} #op-main .opdx .dxn-app-process>span::after{content:'↓';font-size:24px;} #op-main .opdx .dxn-app-tablewrap{padding:12px;} #op-main .opdx .dxn-app-tablewrap :is(th,td){padding:12px 5px;} } /* Connect each source side to the process and output on desktop. */ #op-main .opdx .dxn-data-process,#op-main .opdx .dxn-app-process{position:relative;} @media(min-width:601px){ #op-main .opdx .dxn-data-process>.dxn-data-arrow,#op-main .opdx .dxn-app-process>span{position:absolute;top:calc(50% - 12px);font-size:22px;z-index:1;} #op-main .opdx .dxn-data-process>.dxn-data-arrow:first-child,#op-main .opdx .dxn-app-process>span:first-child{left:-17px;} #op-main .opdx .dxn-data-process>.dxn-data-arrow:last-child,#op-main .opdx .dxn-app-process>span:last-child{right:-17px;} } /* Make all four input connections explicit without adding visual depth. */ #op-main .opdx .dxn-data-pie{min-height:100px;} #op-main .opdx .dxn-data-pie>svg{width:60px;height:60px;} #op-main .opdx .dxn-data-pie>div{line-height:1.4;} #op-main .opdx .dx-native table{color:inherit;} @media(min-width:601px){ #op-main .opdx .dxn-data-sources{position:relative;} #op-main .opdx .dxn-data-sources::after{content:'';position:absolute;right:-7px;top:35px;bottom:35px;border-right:1px solid #378ADD;} #op-main .opdx .dxn-data-source{position:relative;} #op-main .opdx .dxn-data-source::after{content:'';position:absolute;right:-8px;top:50%;width:8px;border-top:1px solid #378ADD;} } /* Cloud / automation: native text, inherited body font, flat 2D. */ #op-main .opdx .dx-native.dxn-cloud, #op-main .opdx .dx-native.dxn-auto {container-type:inline-size; font-family:inherit; font-size:14px; line-height:1.55; color:#0C447C; background:#F3F6FA; padding:14px; border:1px solid #E5EDF5; box-shadow:none;} #op-main .opdx .dx-native :is(.dxn-cloud-title,.dxn-auto-title) {font-family:inherit; font-size:16px; font-weight:700; line-height:1.5; margin-bottom:12px;} #op-main .opdx .dx-native .dxn-cloud-icon {display:block; flex:none; width:28px; height:28px; color:#0C447C; margin:0; overflow:visible;} #op-main .opdx .dx-native .dxn-cloud-criteria {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px;} #op-main .opdx .dx-native .dxn-cloud-criterion {display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px; border:1px solid #D9E0E8; background:#fff; min-width:0;} #op-main .opdx .dx-native .dxn-cloud-criterion strong {display:flex; align-items:center; justify-content:center; min-height:44px; font-family:inherit; font-size:14px; line-height:1.5; font-weight:700; text-align:center;} #op-main .opdx .dx-native .dxn-cloud-criterion span {display:block; font-size:14px; line-height:1.55; color:#4A5563; overflow-wrap:anywhere;} #op-main .opdx .dx-native .dxn-cloud-flowtitle {margin-top:18px;} #op-main .opdx .dx-native .dxn-cloud-flow {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;} #op-main .opdx .dx-native .dxn-cloud-stage {min-width:0;} #op-main .opdx .dx-native .dxn-cloud-chevron {font-size:18px; font-weight:700; text-align:center; color:#fff; padding:9px 16px 9px 8px; background:#0C447C; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);} #op-main .opdx .dx-native .dxn-cloud-chevron-1 {clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);} #op-main .opdx .dx-native .dxn-cloud-chevron-2 {background:#1E66B0;} #op-main .opdx .dx-native .dxn-cloud-chevron-3 {background:#256DA8;} #op-main .opdx .dx-native .dxn-cloud-stagebody {margin-top:8px; border:1px solid #D9E0E8; background:#fff; padding:12px; min-height:113px;} #op-main .opdx .dx-native .dxn-cloud-stagebody strong {display:block; margin-bottom:7px; font-size:14px; font-weight:700; line-height:1.5;} #op-main .opdx .dx-native .dxn-cloud-stagebody span {font-size:14px; color:#4A5563; line-height:1.55;} #op-main .opdx .dx-native .dxn-auto-row {display:grid; grid-template-columns:48px minmax(0,1fr) 132px; gap:9px; align-items:stretch; margin-top:12px;} #op-main .opdx .dx-native .dxn-auto-rowlabel {display:flex; align-items:center; font-size:14px; line-height:1.5;} #op-main .opdx .dx-native .dxn-auto-steps {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; align-items:stretch;} #op-main .opdx .dx-native .dxn-auto-step {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:13px 5px; border:1px solid #D9E0E8; background:#fff; text-align:center; min-width:0;} #op-main .opdx .dx-native .dxn-auto-step:not(:last-child)::after {content:'→'; display:block; position:absolute; right:-11px; top:45%; font-size:15px; line-height:1; color:#1E66B0; z-index:1;} #op-main .opdx .dx-native .dxn-auto-step strong {font-size:14px; line-height:1.4; font-weight:700; min-height:40px; display:flex; align-items:center;} #op-main .opdx .dx-native .dxn-auto-step span {font-size:14px; line-height:1.4; color:#4A5563;} #op-main .opdx .dx-native .dxn-auto-after .dxn-auto-step {background:#E4EEF8; border-color:#AFCDE5;} #op-main .opdx .dx-native .dxn-auto-after .dxn-auto-review {background:#fff; border:2px solid #0C447C; padding:12px 4px;} #op-main .opdx .dx-native .dxn-auto-summary {padding:10px; background:#fff; border-top:3px solid #C3D7E9;} #op-main .opdx .dx-native .dxn-auto-summary>strong {font-size:14px; line-height:1.5;} #op-main .opdx .dx-native .dxn-auto-summary ul {list-style:disc; margin:7px 0 0; padding-left:16px; font-size:14px; line-height:1.55; color:#4A5563;} #op-main .opdx .dx-native .dxn-auto-summary li+li {margin-top:5px;} #op-main .opdx .dx-native .dxn-auto-note {display:flex; gap:9px; align-items:center; padding:10px; margin-top:14px; font-size:14px; line-height:1.55; background:#E4EEF8;} #op-main .opdx .dx-native .dxn-auto-note .dxn-cloud-icon {width:20px; height:20px;} @container (max-width:540px) { #op-main .opdx .dx-native .dxn-cloud-criteria {grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;} #op-main .opdx .dx-native .dxn-cloud-criterion {align-items:flex-start; display:grid; grid-template-columns:28px 1fr; gap:8px; padding:12px;} #op-main .opdx .dx-native .dxn-cloud-criterion strong {text-align:left; justify-content:flex-start; min-height:0;} #op-main .opdx .dx-native .dxn-cloud-criterion span {grid-column:1/-1;} #op-main .opdx .dx-native .dxn-cloud-criterion:last-child {grid-column:1/-1;} #op-main .opdx .dx-native .dxn-cloud-flow {grid-template-columns:1fr; gap:12px;} #op-main .opdx .dx-native .dxn-cloud-stagebody {min-height:0;} #op-main .opdx .dx-native .dxn-cloud-chevron {clip-path:none; padding:8px 12px;} #op-main .opdx .dx-native .dxn-auto-row {grid-template-columns:1fr; gap:9px; margin-top:18px;} #op-main .opdx .dx-native .dxn-auto-steps {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;} #op-main .opdx .dx-native .dxn-auto-step {padding:12px;} #op-main .opdx .dx-native .dxn-auto-step strong {min-height:0;} #op-main .opdx .dx-native .dxn-auto-step::after {display:none!important;} #op-main .opdx .dx-native .dxn-auto-summary {padding:10px 12px;} #op-main .opdx .dx-native .dxn-auto-summary ul {display:flex; flex-wrap:wrap; gap:5px 26px; margin-top:6px;} #op-main .opdx .dx-native .dxn-auto-summary li+li {margin-top:0;} } #op-main .opdx .dx-native .dxn-cloud-chevron {display:flex; align-items:center; justify-content:center; gap:10px;} #op-main .opdx .dx-native .dxn-cloud-chevron .dxn-cloud-icon {width:22px; height:22px; color:#fff;} #op-main .opdx .dx-native .dxn-auto-row {grid-template-columns:48px minmax(0,1fr); margin-top:9px;} #op-main .opdx .dx-native .dxn-auto-stageheads {display:grid;grid-template-columns:48px minmax(0,1fr);gap:9px;} #op-main .opdx .dx-native .dxn-auto-stageheads>div {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;} #op-main .opdx .dx-native .dxn-auto-stageheads strong {font-size:14px;font-weight:700;text-align:center;line-height:1.5;} #op-main .opdx .dx-native .dxn-auto-step {padding:10px 5px;gap:8px;} #op-main .opdx .dx-native .dxn-auto-after .dxn-auto-review {padding:9px 4px;} #op-main .opdx .dx-native .dxn-auto-summaries {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;} #op-main .opdx .dx-native .dxn-auto-summary ul {line-height:1.45;} #op-main .opdx .dx-native .dxn-auto-summary li+li {margin-top:3px;} #op-main .opdx .dx-native .dxn-auto-note {margin-top:10px;padding:8px 10px;} @container (max-width:540px) { #op-main .opdx .dx-native .dxn-auto-row {grid-template-columns:1fr;} #op-main .opdx .dx-native .dxn-auto-stageheads {display:none;} #op-main .opdx .dx-native .dxn-auto-step:nth-child(1)::before {content:'データ取得';} #op-main .opdx .dx-native .dxn-auto-step:nth-child(2)::before {content:'集計・加工';} #op-main .opdx .dx-native .dxn-auto-step:nth-child(3)::before {content:'レポート作成';} #op-main .opdx .dx-native .dxn-auto-step:nth-child(4)::before {content:'内容確認';} #op-main .opdx .dx-native .dxn-auto-step::before {font-size:14px;font-weight:700;} #op-main .opdx .dx-native .dxn-auto-summaries {grid-template-columns:1fr;} #op-main .opdx .dx-native .dxn-auto-summary ul {display:block;} } /* Compact desktop rhythm without reducing 14px text. */ #op-main .opdx .dx-native.dxn-cloud, #op-main .opdx .dx-native.dxn-auto {padding:12px;} #op-main .opdx .dx-native .dxn-cloud-flowtitle {margin-top:12px;} #op-main .opdx .dx-native .dxn-cloud-stagebody {min-height:100px;padding:10px;} #op-main .opdx .dx-native .dxn-auto-step {padding:7px 5px;gap:7px;} #op-main .opdx .dx-native .dxn-auto-after .dxn-auto-review {padding:6px 4px;} #op-main .opdx .dx-native .dxn-auto-step .dxn-cloud-icon {width:24px;height:24px;} #op-main .opdx .dx-native .dxn-auto-summary {padding:8px 10px;} #op-main .opdx .dx-native .dxn-auto-summary ul {line-height:1.4;margin-top:5px;} #op-main .opdx .dx-native .dxn-auto-summary li+li {margin-top:1px;} #op-main .opdx .dx-native .dxn-auto-rowlabel {white-space:nowrap;font-size:14px;letter-spacing:-.03em;} #op-main .opdx .dx-native .dxn-auto-row, #op-main .opdx .dx-native .dxn-auto-stageheads {grid-template-columns:60px minmax(0,1fr);} @container (max-width:540px) { #op-main .opdx .dx-native .dxn-auto-row {grid-template-columns:1fr;} #op-main .opdx .dx-native .dxn-auto-step {padding:12px;} #op-main .opdx .dx-native .dxn-auto-after .dxn-auto-review {padding:11px;} } /* Keep readable diagrams and balanced columns at intermediate widths. */ #op-main .opdx .dx-service .dx-copy {align-self:center;padding-top:0;} #op-main .opdx .dx-native-figure figcaption {display:block;} #op-main .opdx .dxn-data-bars {height:84px;} #op-main .opdx .dxn-data-pie {min-height:84px;} #op-main .opdx .dxn-data-pie>svg {width:60px;height:60px;} #op-main .opdx .dxn-data-line>svg {height:60px;} #op-main .opdx .dxn-data-panel {padding:6px;} #op-main .opdx .dxn-data-source {min-height:64px;padding:10px 9px;} #op-main .opdx .dxn-data-sources {gap:10px;} @media(max-width:1200px){ #op-main .opdx .dx-split {grid-template-columns:minmax(0,1fr);gap:32px;} #op-main .opdx .dx-copy {max-width:none;} } #op-main .opdx .dx-native .dxn-cloud-stage {display:flex;flex-direction:column;} #op-main .opdx .dx-native .dxn-cloud-stagebody {flex:1;} #op-main .opdx .dxn-data-line>div {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));text-align:center;} /* Concise diagram labels: preserve the visual structure, remove duplicate prose. */ #op-main .opdx .dx-native .dxn-cloud-criterion {justify-content:center;padding:16px 8px;gap:10px;} #op-main .opdx .dx-native .dxn-cloud-stagebody {min-height:0;text-align:center;padding:16px 8px;} #op-main .opdx .dx-native .dxn-cloud-stagebody strong {margin:0;} #op-main .opdx .dx-native .dxn-auto-summary ul {display:flex;flex-wrap:wrap;gap:6px 12px;list-style:none;padding:0;margin-top:8px;} #op-main .opdx .dx-native .dxn-auto-summary li {padding:3px 7px;background:#F3F6FA;margin:0;} #op-main .opdx .dx-native .dxn-auto-summary li+li {margin-top:0;} @container(max-width:540px){ #op-main .opdx .dx-native .dxn-cloud-criterion {padding:12px;} #op-main .opdx .dx-native .dxn-cloud-stagebody {padding:12px;} }