
.p-services .phead .fig { margin: 0; }
.dec-fig { margin: 0; }
.dec { width: 100%; height: auto; display: block; overflow: visible; }
.dec--n { display: none; max-width: 420px; }
@media (max-width: 900px) { .dec--w { display: none; } .dec--n { display: block; } }
.dec .ln { fill: none; stroke: var(--w6a-border); stroke-width: 2; stroke-dasharray: 1; }
.dec__root circle { fill: var(--w6a-brand); }
.dec__root text { fill: var(--w6a-paper); font-size: 17px; font-weight: 600; }
.dec__q rect { fill: var(--w6a-paper); stroke: var(--w6a-border); stroke-width: 1.5; transition: fill .18s, stroke .18s; }
.dec__q text { font-size: 17px; fill: var(--w6a-ink-900); }
.dec--n .dec__q text { font-size: 15px; }
.dec__q circle { fill: var(--w6a-brand); }
.dec__lk { fill: none; stroke: var(--w6a-brand); stroke-width: 2; }
.dec__q .dec__s { fill: var(--w6a-brand-tint); stroke: none; }
.dec__sn { font-family: var(--w6a-font-mono); font-weight: 700; fill: var(--w6a-brand) !important; }
.dec__st { font-weight: 600; }
.dec__q--hot .dec__s { fill: var(--w6a-brand); }
.dec__q--hot .dec__sn, .dec__q--hot .dec__st { fill: var(--w6a-paper) !important; }
.dec a:hover .dec__q rect:first-of-type, .dec a:focus-visible .dec__q rect:first-of-type { stroke: var(--w6a-brand); fill: var(--w6a-brand-tint); }
.svc { display: grid; grid-template-columns: 6fr 6fr; gap: 48px; align-items: start; }
.svc--rev .svc__fig { order: 2; }
.svc__fig > figure, .svc__fig .fig { margin: 0; }
.svc__txt .sec__head { margin-bottom: 18px; }
.q4 { display: grid; gap: 12px; margin-bottom: 12px; }
.q4__io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.q4__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q4__c { background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 12px 14px; min-width: 0; transition: border-color .18s, transform .18s; }
.q4__c:hover { border-color: var(--w6a-brand); transform: translateY(-2px); }
.q4__c--out { background: var(--w6a-brand-tint); }
.q4__c--no { background: var(--w6a-sunk); }
.q4__k { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--w6a-ink-500); margin: 0 0 6px; }
.q4__k b { color: var(--w6a-ink-900); }
.q4__k .ico { color: var(--w6a-brand); }
.q4__c--no .q4__k .ico { color: var(--w6a-danger); }
.q4__l { margin: 0; padding-left: 1.1em; font-size: 15px; line-height: 1.55; }
.q4__t { margin: 0; font-size: 15px; line-height: 1.55; }
.q4__arr { display: grid; place-items: center; color: var(--w6a-brand); }
.q4__arr .i-arrow { width: 22px; height: 22px; }
.cyc { width: 100%; height: auto; display: block; overflow: visible; }
.cyc__ax, .cyc__tk { stroke: var(--w6a-border); stroke-width: 1.5; }
.cyc__grid { stroke: var(--w6a-hairline); stroke-width: 1; }
.cyc__tx, .cyc__lb { font-size: 16px; fill: var(--w6a-ink-500); }
.cyc--mini .cyc__tx, .cyc--mini .cyc__lb { font-size: 22px; }
.cyc .ln.cyc__bar { fill: none; stroke: var(--w6a-brand); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1; }
.cyc--mini .ln.cyc__bar { stroke-width: 20; }
.cyc .ln.cyc__bar--hot { stroke: var(--w6a-accent); }
.cyc__nm { font-size: 17px; font-weight: 600; fill: var(--w6a-ink-900); }
.cyc-fig .cyc--n { display: none; max-width: 420px; }
.cyc--n .cyc__nm { font-size: 15px; }
.cyc--n .cyc__tx { font-size: 14px; }
@media (max-width: 900px) { .cyc-fig .cyc--w { display: none; } .cyc-fig .cyc--n { display: block; } }
.cyc-fig { margin: 0; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 20px; }
.flagsec { border-top: 3px solid var(--w6a-brand); }
.flag { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: start; }
.flag__prot { margin: 0; }
.flag__prot canvas { aspect-ratio: 4 / 3; }
.molcard { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 0 0 14px; padding: 14px 16px; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); text-decoration: none; color: var(--w6a-ink-900); }
.molcard > .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--w6a-brand-tint); color: var(--w6a-brand); }
.molcard__t { display: grid; gap: 4px; justify-items: start; }
.molcard__url { font-family: var(--w6a-font-mono); font-size: 20px; font-weight: 600; color: var(--w6a-brand); }
.molcard__d { font-size: var(--fs-small); color: var(--w6a-ink-500); }
.flag__row { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: center; margin: 28px 0 12px; }
.flag__mols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.smol { margin: 0; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 6px; }
.smol canvas { width: 100%; aspect-ratio: 1 / 1; height: auto; display: block; cursor: grab; }
.smol figcaption { font-size: 13px; padding: 0 4px 4px; }
.flag__row > .fig { margin: 0; }
.shotpair { position: relative; padding-right: 56px; }
.shotpair .vx-phone { position: absolute; right: 0; bottom: -20px; width: 130px; }
.shotpair + .vx-cap { margin-top: 30px; }
.wideline { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; margin-bottom: 8px; }
.wideline > .fig { margin: 0; }
.mx { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: start; margin-bottom: 12px; }
.mx > figure { margin: 0; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 16px; }
.cta__in { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; margin-bottom: 24px; }
@media (max-width: 900px) {
  .svc, .flag, .flag__row, .wideline, .mx { grid-template-columns: 1fr; gap: 24px; }
  .svc--rev .svc__fig { order: 0; }
  .cta__in { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 520px) {
  .q4__io { grid-template-columns: 1fr; }
  .q4__arr { transform: rotate(90deg); }
  .q4__row { grid-template-columns: 1fr; }
  .flag__mols { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .smol figcaption { display: none; }
  .shotpair { padding-right: 40px; }
  .shotpair .vx-phone { width: 96px; }
}
.sp-fig { margin: 0 0 20px; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 20px; }
.sp { width: 100%; height: auto; display: block; overflow: visible; }
.sp .ln { fill: none; stroke: var(--w6a-brand); stroke-width: 2.5; stroke-dasharray: 1; }
.sp .ln.sp__ln--ref { stroke: var(--w6a-border); }
.sp__s rect { fill: var(--w6a-brand-tint); stroke: var(--w6a-brand); stroke-width: 1.5; transition: fill .18s; }
.sp__s--none rect { fill: var(--w6a-sunk); stroke: var(--w6a-border); }
.sp__no { font-family: var(--w6a-font-mono); font-weight: 700; font-size: 17px; fill: var(--w6a-brand); }
.sp__t { font-size: 18px; font-weight: 600; fill: var(--w6a-ink-900); }
.sp__nt { font-size: 15px; fill: var(--w6a-ink-500); }
.sp__p rect { fill: var(--w6a-paper); stroke: var(--w6a-brand); stroke-width: 2; transition: fill .18s; }
.sp__pn { font-size: 18px; font-weight: 600; fill: var(--w6a-ink-900); }
.sp__pa { font-size: 14px; fill: var(--w6a-ink-500); }
.sp a:hover rect, .sp a:focus-visible rect { fill: var(--w6a-brand-tint); }
@media (max-width: 900px) { .sp-fig .sp { display: none; } .sp-fig { padding: 12px 14px; } }
.spl { display: grid; gap: 10px; margin-bottom: 20px; }
.spl__r { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: 12px; align-items: stretch; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 14px 16px; transition: border-color .18s, transform .18s; }
.spl__r:hover { border-color: var(--w6a-brand); }
.spl__r--none { background: var(--w6a-sunk); }
.spl__t { margin: 0; font-size: 17px; line-height: 1.4; align-self: center; }
.spl__t a { color: var(--w6a-ink-900); text-decoration: none; }
.spl__no { font-family: var(--w6a-font-mono); color: var(--w6a-brand); margin-right: 8px; }
.spl__c { min-width: 0; }
.spl__c--us { border-left: var(--hair); padding-left: 12px; }
.spl__k { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--w6a-ink-500); }
.spl__k .ico { color: var(--w6a-brand); }
.spl__d { margin: 0; font-size: 15px; line-height: 1.55; }
.spl__try { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.spl__try a { font-weight: 600; }
.spl__ac { margin-left: 8px; font-size: 13px; color: var(--w6a-ink-500); white-space: nowrap; }
@media (max-width: 900px) { .spl__r { grid-template-columns: 1fr; } .spl__c--us { border-left: 0; padding-left: 0; border-top: var(--hair); padding-top: 10px; } .spl__ac { display: block; margin-left: 0; } }
.smp { margin: 0; background: var(--w6a-paper); border: 1.5px dashed var(--w6a-border); border-radius: var(--radius-l); padding: 16px; }
.smp__tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px; background: var(--w6a-accent); color: var(--w6a-paper); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.smp__tag .ico { width: 14px; height: 14px; }
.smp .vx-browser { margin: 0; }
.smp .vx-cap { margin-top: 12px; }
.smp__scroll { overflow-x: auto; }
.smp__tb { width: 100%; border-collapse: collapse; font-size: 15px; }
.smp__tb th, .smp__tb td { padding: 8px 10px; border-bottom: var(--hair); text-align: left; white-space: nowrap; }
.smp__tb thead th { font-size: 13px; color: var(--w6a-ink-500); font-weight: 600; }
.smp__tb td { font-family: var(--w6a-font-mono); font-size: 14px; }
.smp__tb--grid th, .smp__tb--grid td { text-align: center; }
.smp__tb--grid tbody th { text-align: left; }
.smp__blank { display: inline-block; width: 28px; height: 28px; border: 1.5px dashed var(--w6a-border); border-radius: 6px; vertical-align: middle; transition: border-color .18s, background .18s; }
.smp__tb--grid td:hover .smp__blank { border-color: var(--w6a-brand); background: var(--w6a-brand-tint); }
.smp__steps { list-style: none; counter-reset: st; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.smp__steps li { counter-increment: st; display: flex; gap: 10px; align-items: baseline; }
.smp__steps li::before { content: counter(st); flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--w6a-brand); color: var(--w6a-paper); font-size: 13px; font-family: var(--w6a-font-mono); }
.smp__sum { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--w6a-brand-tint); font-size: 15px; font-weight: 600; }
.smp__ol { margin: 0; padding: 0; list-style: none; counter-reset: ol; display: grid; gap: 10px; }
.smp__ol li { counter-increment: ol; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; font-size: 17px; font-weight: 600; }
.smp__ol li::before { content: counter(ol, cjk-ideographic) '、'; color: var(--w6a-brand); grid-row: span 2; align-self: start; }
.smp__ol li i { display: block; height: 22px; border-radius: 4px; background: repeating-linear-gradient(to bottom, var(--w6a-sunk) 0 6px, transparent 6px 11px); }
.flag__smp { margin: 28px 0 12px; }
.flag__smp .smp { max-width: 880px; }
.svc__fig > .smp__tag { margin-bottom: 12px; }
.smp, .svc__fig, .wideline > * { min-width: 0; }
.smp__steps li { white-space: normal; }
@media (max-width: 900px) { .sp__lg { display: none; } }
.flag__smp .smp { margin-inline: auto; }
