:root{--cpn-ttl-w: 3rem;--cpn-bdr-pd: 1.167rem;--cpn-bdr-w: 2px;--cpn-bdr-s: dashed;--cpn-act-icn-s: .89rem;--cpn-lg-mx-wd: 188;--cpn-lg-mx-wd-mbl: 170;--cpn-lg-mx-wd-clc: calc((var(--cpn-lg-mx-wd-mbl) * 1px) + (var(--cpn-lg-mx-wd) - var(--cpn-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));--cpn-lg-dsp: flex}*:has(>.cpn-itm){container-type:inline-size}.cpn-itm{padding:var(--cpn-bdr-pd);overflow:visible;&:after{content:"";position:absolute;inset:var(--cpn-bdr-pd);z-index:1;border-width:var(--cpn-bdr-w);border-style:var(--cpn-bdr-s);border-radius:inherit;pointer-events:none}&.no-bg:after{inset:0}.act{justify-content:center;.icn{font-size:var(--cpn-act-icn-s)}@media(width>=700px){>li+li{border-left:1px solid hsl(from var(--bdr-clr) h s l / .3);padding-left:var(--grd-sp-dyn)}}}.lgo{display:var(--cpn-lg-dsp);max-width:var(--cpn-lg-mx-wd-clc);margin-inline:auto;z-index:2;position:relative}.cpn-div{display:flex;justify-content:center;svg{width:100%}}.icn.ft{position:absolute;top:0;left:50%;translate:-50%;font-size:2rem}&.no-bg{padding:var(--cpn-bdr-pd);&:after{inset:0}}}@container (width > 900px){.cpn-itm .pd_v{--pd-v: clamp(calc(var(--sp-vp-min) * .5), var(--sp-vp), calc(var(--sp-vp-max) * .5) )}.cpn-itm div.cpn-lyt{text-align:left;display:grid;column-gap:var(--flx-gap);grid-template-columns:calc(50% - var(--cpn-ttl-w)) 1fr;grid-template-areas:"prc ttl" "prc dsc" "prc dsc" "act dsc" "act dt" "act dis";&:after{content:"";position:absolute;top:50%;height:100%;width:var(--bdr-w);left:calc(50% - var(--cpn-ttl-w) + (var(--flx-gap) * .5));background-color:hsl(from var(--text-color) h s l / .5);transform:translateY(-50%)}.prc{grid-area:prc;text-align:center;align-self:center;&:nth-last-child(6){align-self:flex-end}}.ttl{grid-area:ttl;margin-top:0;text-align:center}.dsc{grid-area:dsc}.dt{grid-area:dt}.dis{grid-area:dis;text-align:center}.act{grid-area:act;justify-content:center}}.cpn-itm > .cpn-lyt .act:nth-child(3) ){grid-template-areas:"prc ttl" "prc act"}.cpn-itm > .cpn-lyt .act:nth-child(4) ):has(.dsc){grid-template-areas:"prc ttl" "prc dsc" "prc act"}.cpn-itm > .cpn-lyt .act:nth-child(4) ):has(.dt){grid-template-areas:"prc ttl" "prc dt" "prc act"}.cpn-itm > .cpn-lyt .act:nth-child(4) ):has(.dis){grid-template-areas:"prc ttl" "prc dis" "prc act"}.cpn-itm > .cpn-lyt .act:nth-child(5) ):has(.dis){grid-template-areas:"prc ttl" "prc dt" "prc dis" "prc act"}.cpn-itm > .cpn-lyt .act:nth-child(5) ):has(.dsc){grid-template-areas:"prc ttl" "prc dsc" "prc dt" "prc act"}.cpn-itm > .cpn-lyt .act:nth-child(5) ):not(:has(.dt)){grid-template-areas:"prc ttl" "prc dsc" "prc dis" "prc act"}}.cpn-sys.v1{.act{justify-content:center;@media(width>=700px){>li+li{border-left:1px solid hsl(from var(--bdr-clr) h s l / .3);padding-left:var(--grd-sp-dyn)}}}.cpn-div{display:flex;justify-content:center;svg{width:100%}}}
