/* 全部のせ → 外すと下がる 計算の画面（共通の部品・~/lp-kata/parts/zcalc）。色は --zc-* で各LPに合わせる */
.zc{--zc-ink:#202B30;--zc-sub:#55656D;--zc-accent:#B84C1C;--zc-on:#B84C1C;--zc-line:#D9E0E3;--zc-soft:#EEF1F2;--zc-panel:#FDF1EA;--zc-bg:#fff;--zc-alarm:#AA3040;--zc-num:inherit;
  margin:clamp(24px,4vw,48px) 0;background:var(--zc-bg);color:var(--zc-ink);border:1px solid var(--zc-line);border-radius:10px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);overflow:clip;text-align:left;line-height:1.6;box-shadow:0 18px 44px rgba(20,30,36,.08)}
.zc *{box-sizing:border-box}
.zc .zp{display:inline-block}
.zc-l{padding:clamp(18px,3vw,38px);min-width:0}
.zc-r{padding:clamp(18px,3vw,38px);background:var(--zc-panel);min-width:0;display:flex;flex-direction:column;gap:18px}
.zc-rin{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
@media(max-width:860px){.zc-rin{position:static}}
.zc-lab{display:block;font-size:14px;font-weight:800;margin:0 0 8px}
.zc-qty{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zc-qty button{appearance:none;width:48px;height:48px;border:2px solid var(--zc-ink);background:var(--zc-bg);color:var(--zc-ink);font-size:22px;font-weight:700;border-radius:4px;cursor:pointer;line-height:1}
.zc-qty input[type=number]{width:100px;height:48px;border:2px solid var(--zc-ink);border-radius:4px;text-align:center;font-family:var(--zc-num);font-size:24px;font-weight:700;color:var(--zc-ink);background:var(--zc-bg);-moz-appearance:textfield}
.zc-qty input[type=number]::-webkit-outer-spin-button,.zc-qty input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zc-qty .u{font-weight:800;font-size:16px}
.zc input[type=range]{width:100%;margin-top:10px;accent-color:var(--zc-on);height:44px;font-size:16px}
.zc-chips,.zc-seg{display:flex;flex-wrap:wrap;gap:8px}
.zc-chips{margin-top:4px}
.zc-chips button,.zc-seg button{appearance:none;min-height:44px;padding:6px 14px;border:1px solid var(--zc-line);border-radius:4px;background:var(--zc-bg);color:var(--zc-ink);font-size:14px;font-weight:700;cursor:pointer;line-height:1.35;text-align:left;font-family:inherit}
.zc-seg button small{display:block;font-size:11.5px;font-weight:500;color:var(--zc-sub)}
.zc-chips button[aria-pressed=true],.zc-seg button[aria-pressed=true]{background:var(--zc-ink);border-color:var(--zc-ink);color:#fff}
.zc-seg button[aria-pressed=true] small{color:#fff;opacity:.85}
.zc-seg button:disabled{opacity:.45;cursor:not-allowed}
.zc-grp{margin-top:18px}
.zc-quick{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zc-quick .ql{font-size:13px;font-weight:700;color:var(--zc-sub);margin-right:2px}
.zc-quick button{appearance:none;min-height:44px;padding:0 14px;border:2px solid var(--zc-ink);border-radius:4px;background:var(--zc-bg);color:var(--zc-ink);font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.zc-quick button.pri{background:var(--zc-on);border-color:var(--zc-on);color:#fff}
.zc-lines{margin-top:14px;border-top:2px solid var(--zc-ink)}
.zc-ln{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--zc-soft)}
.zc-ln .nm{font-weight:800;font-size:15.5px;line-height:1.5}
.zc-ln .ds{display:block;font-size:13px;font-weight:500;color:var(--zc-sub);line-height:1.65}
.zc-ln .am{font-family:var(--zc-num);font-variant-numeric:tabular-nums;font-weight:700;font-size:17px;white-space:nowrap;text-align:right;line-height:1.35}
.zc-ln .am small{display:block;font-size:11.5px;font-weight:600;color:var(--zc-sub)}
.zc-ln .lost{display:none;grid-column:2/-1;font-size:13px;color:var(--zc-alarm);font-weight:700;line-height:1.6}
.zc-ln.off .nm,.zc-ln.off .am{color:#8A979D}
.zc-ln.off .am .v{text-decoration:line-through}
.zc-ln.off .lost{display:block}
.zc-ln.na{opacity:.55}
.zc-ln.na .lost{display:block;color:var(--zc-sub)}
.zc-incl{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13px;color:var(--zc-sub);margin:2px 0 0;padding:0;list-style:none}
.zc-incl li{padding-left:13px;position:relative}
.zc-incl li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:2px;background:var(--zc-on)}
.zc-sw{position:relative;width:56px;height:44px;flex:none;display:block}
.zc-sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;z-index:1;font-size:16px}
.zc-sw i{position:absolute;left:2px;right:2px;top:6px;height:32px;background:#B9C5CB;border-radius:16px;transition:background .2s}
.zc-sw i::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .2s}
.zc-sw input:checked+i{background:var(--zc-on)}
.zc-sw input:checked+i::after{transform:translateX(20px)}
.zc-sw input:focus-visible+i{outline:3px solid #2f6fd6;outline-offset:3px}
.zc-sw.fix i{background:var(--zc-ink)}
.zc-sw.fix i::after{transform:translateX(20px)}
.zc-sw input:disabled{cursor:not-allowed}
.zc-tl{display:block;font-size:14px;font-weight:800}
.zc-tot{display:block;font-family:var(--zc-num);font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(40px,6vw,68px);line-height:1.05;margin-top:6px;white-space:nowrap}
.zc-tot small{font-size:.26em;font-weight:800;margin-left:4px}
.zc-tot.q{font-size:clamp(26px,3.6vw,38px);white-space:normal}
.zc-sub{margin:8px 0 0;font-size:13.5px;color:var(--zc-sub);font-weight:700}
.zc-base{margin:10px 0 0;font-size:14px;font-weight:800}
.zc-base b,.zc-kv b{font-family:var(--zc-num);font-size:1.25em}
.zc-box{border-top:1px solid rgba(20,30,36,.2);padding-top:14px}
.zc-kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-weight:700;margin:6px 0 0;flex-wrap:wrap}
.zc-kv b{white-space:nowrap}
.zc-note{margin:10px 0 0;font-size:12.5px;color:var(--zc-sub);line-height:1.8;font-weight:500}
.zc-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:4px;background:var(--zc-ink);color:#fff;font-weight:800;font-size:15px;text-decoration:none;margin-top:4px}
@media(max-width:860px){.zc{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.zc-ln{grid-template-columns:auto minmax(0,1fr)}.zc-ln .am{grid-column:2;text-align:left}.zc-ln .am small{display:inline;margin-left:6px}.zc-incl,.zc-ln .lost{grid-column:2}}
@media(prefers-reduced-motion:reduce){.zc-sw i,.zc-sw i::after{transition:none}}