:root{
--bg:#F5F7FB;--surface:#FFFFFF;--line:#E3E8F2;--line-strong:#D5DDEB;--soft:#F7F9FD;
--ink:#0E1E3A;--ink2:#55627A;--ink3:#5E6B82;--ink-sub:#33415C;
--accent:#1F5BD8;--accent-d:#1647AE;--accent-soft:#EAF1FF;--accent-tint:#F5F8FF;
--ok:#0F7A55;--ok-soft:#E6F6EF;--ok-bar:#0F8A5F;
--warn:#9A4A06;--warn-soft:#FFF1E0;--warn-line:#F2C894;--warn-bg:#FFFBF5;--warn-bar:#C2410C;
--danger:#B42318;--danger-soft:#FDECEA;
--shadow:0 1px 2px rgba(14,30,58,.04);--shadow-btn:0 6px 16px rgba(31,91,216,.28);
--r-card:12px;--r-input:10px;--r-pill:999px;
--font:'Noto Sans JP',system-ui,"Hiragino Sans","Yu Gothic",sans-serif;--num:'Barlow','Noto Sans JP',sans-serif;
--ease-in:cubic-bezier(0,0,.38,.9);
interpolate-size:allow-keywords;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.7;text-wrap:pretty;word-break:auto-phrase}
a{color:var(--accent)} a:hover{color:var(--accent-d)}
h1,h2,h3,p,dl,dd,ul,fieldset{margin:0}
ul{padding:0}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
textarea{width:100%;resize:vertical;font-family:inherit}
:focus-visible{outline:3px solid #9DB4F5;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.right{text-align:right}
.muted,.hint{color:var(--ink2);font-size:13px;line-height:1.7}
.hint strong{color:var(--ink)}
.hint.is-strong{color:var(--ink-sub)}
.hint ul{margin:4px 0 0;padding-left:20px}
.link{font-size:13px;text-decoration:none}

/* ---------- 骨組み ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:248px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:24px}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.main{flex:1;min-width:0;width:100%;max-width:1240px;padding:32px 40px 64px;display:flex;flex-direction:column;gap:24px;animation:sf-rise 240ms var(--ease-in) backwards}
.topbar{display:none}
.brand{display:flex;align-items:baseline;gap:0;padding:4px 10px;text-decoration:none;color:var(--ink);font-family:var(--num);font-weight:800;font-size:26px;letter-spacing:-.01em;line-height:1.3}
.brand span{color:var(--accent)}
.brand:hover{color:var(--ink)}
.navgroup{display:flex;flex-direction:column;gap:4px}
.navlabel{font-size:11px;font-weight:700;color:var(--ink3);padding:0 10px 6px;letter-spacing:.06em}
.navitem{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-input);font-size:14px;font-weight:500;text-decoration:none;color:var(--ink-sub);transition:background-color 110ms,color 110ms}
.navitem:hover{background:var(--soft);color:var(--ink)}
.navitem.is-active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.navicon{width:20px;height:20px;display:inline-flex}
.navbadge{margin-left:auto;font-size:11px;font-weight:700;background:var(--accent);color:#fff;border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap}
.navbadge.is-warn{background:var(--warn-soft);color:var(--warn)}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.quota{border:1px solid var(--line);border-radius:var(--r-card);padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--soft)}
.quota-row{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2)}
.quota-row strong{font-family:var(--num);font-size:16px;color:var(--ink)}
.quota-note{font-size:12px;color:var(--ink2)}
.meter{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.meter.is-lg{height:8px}
.meter-fill{height:100%;background:var(--accent);border-radius:var(--r-pill)}
.sidelinks{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.sidelinks a{font-size:13px;color:var(--ink2);text-decoration:none;padding:6px 0}
.sidelinks a:hover{color:var(--accent)}
.sidemail{font-size:12px;color:var(--ink3);padding-top:6px;overflow-wrap:anywhere}
.app footer{padding:16px 40px 24px;color:var(--ink2);font-size:13px}
.center footer{text-align:center}

/* ---------- 見出し・カード・ボタン ---------- */
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
h1{font-size:26px;font-weight:700;letter-spacing:.01em;line-height:1.4}
.lead{font-size:14px;color:var(--ink2);margin-top:4px}
h2{font-size:17px;font-weight:700;line-height:1.5}
h3{font-size:14px;font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.card.is-attn{border-color:var(--warn-line)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.card-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.step{width:28px;height:28px;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-family:var(--num);font-weight:800;font-size:15px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.btn,.btn-primary,.btn-danger,.btn-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-input);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-sub);padding:9px 16px;line-height:1.5;transition:background-color 110ms,box-shadow 110ms,transform 110ms}
.btn:hover{background:var(--soft);color:var(--ink)}
summary.btn{list-style:none}
summary.btn::-webkit-details-marker{display:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
.btn-primary:active{transform:translateY(1px);box-shadow:none}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:700}
.btn-danger:hover{background:#8E1B12;color:#fff}
.btn-primary.lg,.btn-danger.lg{padding:13px 22px;font-size:15px;border-radius:12px}
.block{width:100%}
.btn-add{border:1px dashed #A9B8D4;color:var(--accent);font-weight:700;padding:10px 16px}
.btn-add:hover{background:var(--accent-tint);color:var(--accent)}
.btn-add[disabled]{opacity:.5;cursor:not-allowed}
.danger-link{display:inline-flex;padding:8px 14px;font-size:13px;color:var(--danger);text-decoration:none}
.danger-link:hover{color:#8E1B12;text-decoration:underline}
.banner{padding:12px 16px;border-radius:var(--r-input);font-size:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.banner.is-warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.banner.is-ok{background:var(--ok-soft);color:var(--ok)}
.banner.is-danger{background:var(--danger-soft);color:var(--danger);justify-content:flex-start}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
.pill.is-ok{color:var(--ok);background:var(--ok-soft)}
.pill.is-info{color:var(--accent);background:var(--accent-soft)}
.pill.is-warn{color:var(--warn);background:var(--warn-soft)}
.pill.is-danger{color:var(--danger);background:var(--danger-soft)}
.pill.is-muted{color:var(--ink2);background:#EEF1F7}
.dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.dot-bizreach{background:#1F5BD8}.dot-dodax{background:#0E7C86}.dot-middle{background:#C2410C}.dot-ambi{background:#6D3FD1}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 12px}
.chip .dot{width:8px;height:8px;border-radius:2px}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;border:1px dashed var(--line-strong);border-radius:var(--r-card);text-align:center;color:var(--ink2);font-size:13px}
.empty svg{color:#8A97AE}
.empty strong{font-size:14px;color:var(--ink)}
.empty.is-card{background:var(--surface);padding:56px 16px}
.spin{animation:sf-spin .9s linear infinite}

/* ---------- フォーム ---------- */
input[type=text],input[type=email],input[type=number],input[type=file]{padding:10px 12px;border:1px solid #C9D3E5;border-radius:var(--r-input);background:#fff;font-size:14px;max-width:100%}
textarea{padding:10px 12px;border:1px solid #C9D3E5;border-radius:var(--r-input);background:#fff;font-size:13px;line-height:1.7}
input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,91,216,.18)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
.field input{font-weight:400}
.field .hint,.quick-fields .hint{font-weight:400}
.w90{width:90px}
.inline-field{font-size:14px;display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.radio-row{display:flex;flex-wrap:wrap;gap:6px 16px}
.radio-inline{font-size:14px}
.upload{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.optfield{border:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.optfield legend{font-size:14px;font-weight:700;padding:0;margin-bottom:10px}
.optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:1fr;gap:12px}
.optgrid.is-three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.opt{position:relative;display:block;cursor:pointer}
.optgrid>.opt,.optstack>.opt,.optpair>.opt{display:flex}
.optgrid>.opt>.opt-body,.optstack>.opt>.opt-body,.optpair>.opt>.opt-body{flex:1;min-width:0}
.opt-body{display:flex;gap:12px;padding:16px;border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--surface);transition:border-color 110ms,background-color 110ms,box-shadow 110ms}
.opt:hover .opt-body{border-color:#8FA4E6}
.opt input:checked+.opt-body{border-color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.opt input:focus-visible+.opt-body{outline:3px solid #9DB4F5;outline-offset:2px}
.opt-dot{flex:none;width:18px;height:18px;margin-top:3px;border-radius:var(--r-pill);border:2px solid #A9B8D4;background:#fff;position:relative;transition:border-color 110ms}
.opt input:checked+.opt-body .opt-dot{border-color:var(--accent)}
.opt input:checked+.opt-body .opt-dot::after{content:"";position:absolute;inset:3px;border-radius:var(--r-pill);background:var(--accent);animation:sf-pop 150ms var(--ease-in)}
.opt-text{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink2);min-width:0}
.opt-text strong{font-size:14px;color:var(--ink)}
.opt-text span{overflow-wrap:anywhere}
.rec{font-style:normal;font-size:12px;font-weight:500;color:var(--accent);margin-left:4px}
.opt.is-compact .opt-body{padding:10px 12px;border-radius:var(--r-input)}
.opt.is-compact .opt-dot{margin-top:2px}

/* ---------- 新しい変換 ---------- */
.convert{display:block}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.col-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.col-side{flex:1 1 300px;max-width:380px;min-width:0;display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}
.mcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mcard{position:relative;display:block;cursor:pointer}
.mcard-body{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;height:100%;border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--surface);transition:border-color 110ms,background-color 110ms,box-shadow 110ms}
.mcard:hover .mcard-body{border-color:#8FA4E6}
.mcard input:checked+.mcard-body{border-color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.mcard input:focus-visible+.mcard-body{outline:3px solid #9DB4F5;outline-offset:2px}
.mcard-top{display:flex;align-items:center;gap:8px}
.mcard-top strong{font-size:15px}
.mcard-fmt{font-size:12px;color:var(--ink2)}
.mcard-state{font-size:12px;font-weight:500}
.mcard-state.is-ok{color:var(--ok)}.mcard-state.is-warn{color:var(--warn)}
.mcard-check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:var(--r-pill);background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity 150ms var(--ease-in),transform 150ms var(--ease-in)}
.mcard input:checked+.mcard-body .mcard-check{opacity:1;transform:none}
.panels:empty{display:none}
.panels .reveal.is-on{margin-top:0}
.panel{margin-top:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-input);background:var(--soft);display:flex;flex-direction:column;gap:8px}
.reveal{display:grid;grid-template-rows:1fr;transition:grid-template-rows 240ms var(--ease-in),opacity 200ms,visibility 0s}
.reveal-in{min-height:0;overflow:hidden}
.reveal-in [hidden]{display:block}
html.js .reveal:not(.is-on){grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 240ms var(--ease-in),opacity 200ms,visibility 0s 240ms}
@supports selector(:has(*)){
html:not(.js) .reveal{grid-template-rows:0fr;opacity:0;visibility:hidden}
html:not(.js) .convert:has(input[name=media][value=bizreach]:checked) .reveal:has(#style-box),
html:not(.js) .convert:has(input[name=media][value=bizreach]:checked) .reveal:has([data-media-show=bizreach]),
html:not(.js) .convert:has(input[name=media][value=middle]:checked) .reveal:has([data-media-show=middle]),
html:not(.js) .convert:has(input[name=media][value=ambi]:checked) .reveal:has([data-media-show=ambi]),
html:not(.js) .convert:has(input[name=media][value=dodax]:checked) .reveal:has([data-media-show=dodax]){grid-template-rows:1fr;opacity:1;visibility:visible}
}
.quick-id p{font-size:13px}
.quick-id .need{color:var(--warn)}
.quick-fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:8px}
.quick-fields label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700}
.quick-fields input{font-weight:400}
.quick-msg{font-size:13px}
.quick-msg.bad{color:var(--danger)}
.quick-id.saved{color:var(--ok)}
.idq{display:none}

.jobs{display:flex;flex-direction:column}
.jobwrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows 240ms var(--ease-in),opacity 240ms var(--ease-in)}
.jobwrap.is-entering,.jobwrap.is-leaving{grid-template-rows:0fr;opacity:0}
.jobcell{min-height:0;overflow:hidden;padding:0 2px}
.jobcard{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:16px;overflow:hidden;background:var(--surface);transition:border-color 150ms}
.jobcard.is-warn{border-color:var(--warn-line)}
.jobhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:var(--soft);border-bottom:1px solid var(--line);transition:background-color 150ms}
.jobcard.is-warn .jobhead{background:var(--warn-bg);border-bottom-color:#F6DDBA}
.jobtitle{font-size:14px;font-weight:700}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;border-radius:var(--r-pill);padding:2px 10px;transition:opacity 150ms}
.badge[hidden]{display:none}
.badge.is-ok{color:var(--ok);background:var(--ok-soft)}
.badge.is-warn{color:var(--warn);background:var(--warn-soft)}
.badge.is-fading{opacity:0}
.counter{margin-left:auto;font-size:12px;color:var(--ink3);font-family:var(--num);font-weight:700}
.counter.is-over{color:var(--danger)}
.jobdel{width:32px;height:32px;border:0;background:transparent;border-radius:8px;color:var(--ink3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.jobs[data-count="1"] .jobdel{visibility:hidden}
.jobdel:hover{background:#EEF1F7;color:var(--danger)}
.jobtext{display:block;width:100%;border:0;border-radius:0;padding:14px;color:var(--ink-sub);min-height:7.5rem}
.jobtext:focus{box-shadow:none}
.cinfo{border-top:1px solid var(--line)}
.cinfo>summary{cursor:pointer;padding:10px 14px;font-size:14px;font-weight:700;list-style-position:inside}
.cinfo[open]>summary{border-bottom:0}
.cinfo-in{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.jobcard.is-warn .cinfo{background:var(--warn-bg);border-top-color:#F6DDBA}
.jobcard.is-warn .cinfo textarea{border-color:#E3C9A6}
.cinfo .counter{margin-left:0;align-self:flex-end}
.addrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
html:not(.js) [data-js-only],html:not(.js) .jobdel,html:not(.js) #add{display:none}
.sumlist{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px}
.sumlist dt{color:var(--ink2)}
.sumlist dd{text-align:right;font-weight:500}
.sumlist dd#sum-media,.sumlist dd#sum-count{font-weight:700}
.sumlist dd[hidden],.sumlist dt[hidden]{display:none}
.outopts{display:flex;flex-direction:column;gap:14px;margin-top:16px;padding:14px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-input)}
.outopts-h{font-size:14px;font-weight:700}
.mopts{display:flex;flex-direction:column;gap:14px}
.mopts.is-settings{margin-top:16px}
.optstack{display:grid;grid-auto-rows:1fr;gap:10px}
.optpair{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
html.js .outopts>.reveal:not(.is-on){display:none}
.opt.is-check .opt-dot{border-radius:5px}
.opt.is-check input:checked+.opt-body .opt-dot{background:var(--accent)}
.opt.is-check input:checked+.opt-body .opt-dot::after{background:#fff;inset:2px;border-radius:2px;clip-path:polygon(14% 52%,0 66%,40% 100%,100% 22%,86% 8%,40% 72%)}
.sel{padding:10px 12px;border:1px solid #C9D3E5;border-radius:var(--r-input);background:#fff;font-size:14px;max-width:100%;font-family:inherit}
.sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,91,216,.18)}
.live-note[data-off]{display:none}
.savedef{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.savedef input{width:16px;height:16px}
.logins{list-style:none;padding:0;margin:8px 0 14px;display:flex;flex-direction:column;gap:8px}
.logins li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-input);background:var(--surface)}
.login-label{font-weight:700;font-size:14px}
.login-id{flex:1;min-width:0;font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.login-add{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.login-add .field input{margin-top:auto}
.login-add .btn{align-self:flex-end}
.login-add .field{flex:1 1 200px}
.sub-h{font-size:14px;font-weight:700;margin-top:18px}
.buy{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line);padding-top:16px}
.price{display:flex;align-items:baseline;justify-content:space-between}
.price>span:first-child{font-size:14px;color:var(--ink2)}
.price-num{font-family:var(--num);font-weight:800;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.price-num b{font-weight:800}
.price-note{font-size:13px;color:var(--ink2)}
.buy-btn{width:100%;padding:14px 16px;border-radius:12px;font-size:16px}
.buy-btn[disabled]{background:#9DB4F5;border-color:#9DB4F5;box-shadow:none;cursor:not-allowed}
.buy-btn.is-busy{background:#6B86D8;border-color:#6B86D8;cursor:progress;box-shadow:none}
.buy-btn.is-busy .cta-label::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:sf-spin .7s linear infinite}
.lock{display:flex;gap:8px;font-size:12px;color:var(--ink2)}
.lock svg{flex:none;margin-top:2px}
.recent{padding:18px 20px;gap:10px}
.recent-row{display:flex;justify-content:space-between;gap:8px;font-size:13px;text-decoration:none;color:var(--ink-sub)}
.recent-row:hover{color:var(--accent)}
.recent-state{font-weight:500;white-space:nowrap}
.recent-state.is-info{color:var(--accent)}.recent-state.is-ok{color:var(--ok)}.recent-state.is-warn{color:var(--warn)}.recent-state.is-muted{color:var(--ink2)}.recent-state.is-danger{color:var(--danger)}

/* ---------- 変換結果 ---------- */
.crumbs{font-size:13px;color:var(--ink3)}
.crumbs a{text-decoration:none}
.reshead{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.chips{display:contents}
.progress-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.progress-text{display:flex;flex-direction:column;gap:2px}
.progress-sub{font-size:14px;color:var(--ink2)}
.progress-main{font-size:22px;font-weight:700}
.progress-main b{font-family:var(--num);font-weight:800;font-size:34px;font-variant-numeric:tabular-nums;margin-right:2px}
.dl{padding:10px 18px;gap:8px}
.dl.is-glow{animation:sf-glow 1.6s ease-out 1}
.bar{height:10px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;display:flex}
.seg{flex:none;height:100%;transition:width 400ms var(--ease-in)}
.seg-ok{background:var(--ok-bar)}
.seg-bad{background:var(--warn-bar)}
.seg-skip{background:#A9B2C3}
.seg-active{background-color:var(--accent);background-image:linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.22) 75%,transparent 75%);background-size:28px 28px;animation:sf-stripe 1s linear infinite}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink2)}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg-dot{width:8px;height:8px;border-radius:var(--r-pill);display:inline-block}
.c-ok{background:var(--ok-bar)}.c-active{background:var(--accent)}.c-bad{background:var(--warn-bar)}.c-skip{background:#A9B2C3}
.rows{padding:0;gap:0;overflow:hidden}
.rowhead,.resrow{display:grid;grid-template-columns:72px 128px minmax(0,1fr) auto;gap:16px;padding:12px 20px}
.rowhead{background:var(--soft);border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink2)}
.resrow{padding:18px 20px;border-bottom:1px solid #EEF1F7;align-items:start}
.resrow:last-child{border-bottom:0}
.resrow.is-needs_fix{background:#FFFCF7}
.rno{font-family:var(--num);font-weight:700;font-size:16px;color:var(--ink2);display:flex;flex-direction:column;line-height:1.4}
.rtag{font-family:var(--font);font-size:11px;font-weight:500}
.rbody{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px}
.rtitle{font-size:14px;overflow-wrap:anywhere}
.rtitle.is-quiet{color:var(--ink-sub)}
.rsub{color:var(--ink2);overflow-wrap:anywhere}
.vlist{padding-left:20px;display:flex;flex-direction:column;gap:2px;color:var(--ink-sub)}
.ract{min-width:0}
.resrow.is-changed .pill{animation:sf-swap 150ms var(--ease-in)}
.report,.refix{margin-top:2px}
.report>summary{cursor:pointer;font-size:13px;color:var(--accent)}
.retry{display:flex;flex-direction:column;gap:10px;margin-top:10px;max-width:640px}
.refix>summary{font-size:13px;font-weight:700}
.refix{position:relative}

/* ---------- 一覧の表・媒体の設定・料金 ---------- */
.tablecard{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.tablecard.is-flat{border-radius:var(--r-input)}
.table{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.table th{background:var(--soft);text-align:left;font-size:12px;font-weight:700;color:var(--ink2);padding:12px;white-space:nowrap}
.table th:first-child,.table td:first-child{padding-left:20px}
.table th:last-child,.table td:last-child{padding-right:20px}
.table td{padding:14px 12px;border-top:1px solid #EEF1F7}
.media-cell{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rowlink{font-weight:500;text-decoration:none;white-space:nowrap}
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:#E9EEF7;border-radius:var(--r-card);align-self:flex-start}
.tab{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink-sub);text-decoration:none;transition:background-color 110ms}
.tab:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.tab.is-active{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(14,30,58,.12)}
.tab-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--warn-bar);display:inline-block}
.settings-form{display:flex;flex-direction:column;gap:24px}
.tplbox{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-card);background:var(--soft)}
.tplicon{color:var(--ok);display:inline-flex}
.tplinfo{display:flex;flex-direction:column;flex:1 1 260px;font-size:13px;color:var(--ink2);min-width:0}
.tplinfo strong{font-size:14px;color:var(--ink)}
.replace-in{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.replace>summary{width:max-content}
.savebar{display:flex;justify-content:flex-end;gap:10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.stat{padding:22px;gap:6px}
.stat h2{font-size:14px;color:var(--ink2)}
.stat-main{font-size:15px;font-weight:700}
.stat-main b{font-family:var(--num);font-weight:800;font-size:34px;margin:0 2px;font-variant-numeric:tabular-nums}
.cardbox{flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px}
.cardicon{width:52px;height:52px;border-radius:var(--r-card);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.cardtext{flex:1 1 320px;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ink-sub)}
.alert-text{color:var(--warn);font-weight:500}
.account{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.account-text{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ink-sub)}
.account-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- 中央寄せの画面 ---------- */
.center{display:flex;flex-direction:column;min-height:100vh}
.authwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 16px}
.authbrand{padding:0}
.authcard{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;animation:sf-rise 240ms var(--ease-in) backwards}
.authcard.is-wide{max-width:560px}
.authcard h1{font-size:22px}
.authcard .lead{margin-top:0}
.authform{display:flex;flex-direction:column;gap:16px}
.center-link{text-align:center;font-size:14px}
.plainlist{padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:14px}

/* ---------- お知らせ（トースト） ---------- */
.toasts{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--r-card);background:var(--ink);color:#fff;font-size:14px;box-shadow:0 8px 24px rgba(14,30,58,.24);animation:sf-toast-in 240ms var(--ease-in);transition:opacity 200ms,transform 200ms}
.toast.is-error{background:#fff;color:var(--danger);border:1px solid #F1B5AE}
.toast.is-hiding{opacity:0;transform:translateY(8px)}
.toast-icon{display:inline-flex;margin-top:4px;color:#7FE0B8}
.toast-msg{flex:1;line-height:1.6}
.toast-close{border:0;background:transparent;color:inherit;width:28px;height:28px;border-radius:8px;display:none;align-items:center;justify-content:center;cursor:pointer;margin:-4px -8px -4px 0}
.toast-close:hover{background:#FDECEA}
html.js .toast-close{display:inline-flex}

/* ---------- 従来の骨組み（管理画面） ---------- */
body.legacy{max-width:960px;margin:0 auto;padding:16px}
body.legacy header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:16px}
body.legacy h1{font-size:20px} body.legacy h1 a{color:inherit;text-decoration:none}
body.legacy h2{margin-top:28px}
body.legacy table{border-collapse:collapse;width:100%}
body.legacy th,body.legacy td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top;font-size:14px}
body.legacy button{padding:6px 14px;cursor:pointer}
body.legacy footer{border-top:1px solid var(--line);margin-top:32px;padding:8px 0 0}
.err{background:#fde8e8;border:1px solid #e99;padding:8px 12px}
.note{background:#fff7e0;border:1px solid #e0c060;padding:8px 12px}
.ok{color:#176f2c}.ng{color:#b42318}
.inline{display:inline}
.tablewrap{overflow-x:auto}
.w260{width:260px}.w280{width:280px}.w320{width:320px}.mt8{margin-top:8px}

/* ---------- 動き ---------- */
@keyframes sf-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sf-fade{from{opacity:0}to{opacity:1}}
@keyframes sf-spin{to{transform:rotate(360deg)}}
@keyframes sf-stripe{from{background-position:0 0}to{background-position:28px 0}}
@keyframes sf-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes sf-swap{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes sf-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sf-glow{0%{box-shadow:var(--shadow-btn),0 0 0 0 rgba(31,91,216,.55)}60%{box-shadow:var(--shadow-btn),0 0 0 14px rgba(31,91,216,0)}100%{box-shadow:var(--shadow-btn),0 0 0 0 rgba(31,91,216,0)}}
@supports selector(::details-content){
.cinfo::details-content,.report::details-content,.refix::details-content,.replace::details-content{height:0;overflow:clip;opacity:0;transition:height 240ms var(--ease-in),opacity 200ms,content-visibility 240ms allow-discrete}
.cinfo[open]::details-content,.report[open]::details-content,.refix[open]::details-content,.replace[open]::details-content{height:auto;opacity:1}
}

/* ---------- スマホ ---------- */
@media (max-width:768px){
.shell{display:block}
.sidebar{display:none}
.topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;padding:8px 8px 8px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .brand{font-size:22px;padding:0}
.mnav>summary{list-style:none;width:44px;height:44px;border-radius:var(--r-input);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary:hover{background:var(--soft)}
.mnav-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(14,30,58,.12);padding:12px 16px 20px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 60px);overflow-y:auto}
.mnav-panel>.brand{display:none}
.main{padding:20px 16px 140px;gap:16px;animation-name:sf-fade}
.app footer{padding:16px 16px 24px}
h1{font-size:22px}
.card{padding:16px}
.card-head h2{font-size:15px}
.step{width:24px;height:24px;font-size:13px}
.cols{gap:16px}
.col-main{flex:1 1 100%}
.col-side{flex:1 1 100%;max-width:none;position:static}
.mcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mcard-body{padding:12px;gap:2px}
.mcard-top strong{font-size:14px}
.mcard-check{top:8px;right:8px;width:18px;height:18px}
.buy{position:fixed;left:0;right:0;bottom:0;z-index:30;flex-direction:row;align-items:center;gap:12px;padding:12px 16px 20px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(14,30,58,.06)}
.buy .price{flex-direction:column;align-items:flex-start;gap:0;line-height:1.3}
.buy .price>span:first-child{font-size:11px}
.price-num{font-size:22px}
.buy .price-note,.buy .lock{display:none}
.buy-btn{flex:1;width:auto;padding:14px;font-size:15px}
.toasts{right:16px;left:16px;bottom:96px;max-width:none}
.rowhead{display:none}
.resrow{grid-template-columns:44px minmax(0,1fr);gap:8px 12px;padding:16px}
.rstate{grid-column:2}
.rbody,.ract{grid-column:2}
.rno{grid-row:1 / span 1}
.progress-main{font-size:18px}
.authcard{padding:24px 20px}
.account{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.pw0{width:0%}.pw1{width:1%}.pw2{width:2%}.pw3{width:3%}.pw4{width:4%}.pw5{width:5%}.pw6{width:6%}.pw7{width:7%}.pw8{width:8%}.pw9{width:9%}.pw10{width:10%}.pw11{width:11%}.pw12{width:12%}.pw13{width:13%}.pw14{width:14%}.pw15{width:15%}.pw16{width:16%}.pw17{width:17%}.pw18{width:18%}.pw19{width:19%}.pw20{width:20%}.pw21{width:21%}.pw22{width:22%}.pw23{width:23%}.pw24{width:24%}.pw25{width:25%}.pw26{width:26%}.pw27{width:27%}.pw28{width:28%}.pw29{width:29%}.pw30{width:30%}.pw31{width:31%}.pw32{width:32%}.pw33{width:33%}.pw34{width:34%}.pw35{width:35%}.pw36{width:36%}.pw37{width:37%}.pw38{width:38%}.pw39{width:39%}.pw40{width:40%}.pw41{width:41%}.pw42{width:42%}.pw43{width:43%}.pw44{width:44%}.pw45{width:45%}.pw46{width:46%}.pw47{width:47%}.pw48{width:48%}.pw49{width:49%}.pw50{width:50%}.pw51{width:51%}.pw52{width:52%}.pw53{width:53%}.pw54{width:54%}.pw55{width:55%}.pw56{width:56%}.pw57{width:57%}.pw58{width:58%}.pw59{width:59%}.pw60{width:60%}.pw61{width:61%}.pw62{width:62%}.pw63{width:63%}.pw64{width:64%}.pw65{width:65%}.pw66{width:66%}.pw67{width:67%}.pw68{width:68%}.pw69{width:69%}.pw70{width:70%}.pw71{width:71%}.pw72{width:72%}.pw73{width:73%}.pw74{width:74%}.pw75{width:75%}.pw76{width:76%}.pw77{width:77%}.pw78{width:78%}.pw79{width:79%}.pw80{width:80%}.pw81{width:81%}.pw82{width:82%}.pw83{width:83%}.pw84{width:84%}.pw85{width:85%}.pw86{width:86%}.pw87{width:87%}.pw88{width:88%}.pw89{width:89%}.pw90{width:90%}.pw91{width:91%}.pw92{width:92%}.pw93{width:93%}.pw94{width:94%}.pw95{width:95%}.pw96{width:96%}.pw97{width:97%}.pw98{width:98%}.pw99{width:99%}.pw100{width:100%}