.canon-diagnosis{
    --bg:#F3F1EC; --card:#FFFFFF; --panel:#FAF8F4;
    --ink:#2C2A26; --muted:#8A857C; --hint:#B4AFA4;
    --line:#E4E0D8; --accent:#C77B6B; --accent-bg:#F6E9E4; --accent-ink:#8A4433;
    --radius:14px;
  }.canon-diagnosis *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}.canon-diagnosis{margin:0; background:var(--bg); color:var(--ink);
    font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; line-height:1.6;
    display:flex; flex-direction:column; align-items:center; min-height:100vh; padding:24px 16px 60px;}.canon-diagnosis .head{max-width:760px; width:100%; margin-bottom:20px;}.canon-diagnosis .head h1{font-size:19px; font-weight:700; margin:0 0 4px; letter-spacing:.02em;}.canon-diagnosis .head p{font-size:13px; color:var(--muted); margin:0;}.canon-diagnosis .stage{width:100%; max-width:400px; display:flex; flex-direction:column;}.canon-diagnosis .progress{display:flex; gap:6px; margin-bottom:14px; padding:0 2px;}.canon-diagnosis .dot{flex:1; height:4px; border-radius:2px; background:var(--line); transition:background .2s;}.canon-diagnosis .dot.on{background:var(--accent);}.canon-diagnosis .screen{background:var(--card); border-radius:20px; padding:18px 18px 20px;
    box-shadow:0 1px 3px rgba(60,50,40,.05); min-height:560px; display:flex; flex-direction:column;}.canon-diagnosis .topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; min-height:20px;}.canon-diagnosis .back{border:none; background:none; cursor:pointer; font-size:12.5px; color:var(--muted);
    display:flex; align-items:center; gap:3px; padding:0; font-family:inherit;}.canon-diagnosis .back:hover{color:var(--ink);}.canon-diagnosis .step{font-size:12px; color:var(--hint);}.canon-diagnosis .bubble-row{display:flex; gap:10px; align-items:flex-start; margin-bottom:16px;}.canon-diagnosis .avatar{flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:500;}.canon-diagnosis .bubble{position:relative; flex:1; background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); padding:14px 16px;}.canon-diagnosis .bubble::before{content:""; position:absolute; left:-6px; top:14px; width:11px; height:11px;
    background:var(--panel); border-left:1px solid var(--line); border-bottom:1px solid var(--line);
    transform:rotate(45deg);}.canon-diagnosis .bubble .q{margin:0; font-size:16px; font-weight:500; line-height:1.55;}.canon-diagnosis .bubble .hint{margin:6px 0 0; font-size:12px; color:var(--hint);}.canon-diagnosis .body{flex:1;}.canon-diagnosis .grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start;}.canon-diagnosis .list{display:flex; flex-direction:column; gap:9px;}.canon-diagnosis .opt{cursor:pointer; text-align:left; border:1px solid var(--line); background:var(--card);
    border-radius:12px; font-family:inherit; color:inherit; transition:border-color .12s, background .12s, box-shadow .12s;}.canon-diagnosis .opt:hover{border-color:var(--hint);}.canon-diagnosis .opt.sel{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent); background:var(--accent-bg);}.canon-diagnosis .ic{display:flex; align-items:center; justify-content:center; background:var(--panel); color:var(--ink);}.canon-diagnosis .ic svg{width:60%; height:60%; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;}.canon-diagnosis .opt.sel .ic{background:var(--card);}.canon-diagnosis .opt.card-v{padding:13px 12px; display:flex; flex-direction:column; gap:9px;}.canon-diagnosis .opt.card-v .ic{width:38px; height:38px; border-radius:10px;}.canon-diagnosis .opt.card-v .name{font-size:13.5px; font-weight:500; line-height:1.35;}.canon-diagnosis .opt.card-v .sub{font-size:11px; color:var(--muted); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.canon-diagnosis .tag{display:inline-block; margin-left:5px; font-size:10.5px; color:var(--accent-ink);
    background:var(--accent-bg); border-radius:5px; padding:1px 5px; vertical-align:1px;}.canon-diagnosis .opt.row{padding:13px 15px; display:flex; align-items:center; gap:12px;}.canon-diagnosis .opt.row .ic{width:34px; height:34px; flex-shrink:0; border-radius:9px;}.canon-diagnosis .opt.row .name{font-size:14.5px; font-weight:500;}.canon-diagnosis .opt.row .sub{font-size:11px; color:var(--muted); margin-top:2px; display:block;}.canon-diagnosis .opt.card-t{padding:12px; display:flex; flex-direction:column; gap:8px;}.canon-diagnosis .opt.card-t .ic{width:34px; height:34px; border-radius:9px;}.canon-diagnosis .opt.card-t .name{font-size:12.5px; font-weight:500; line-height:1.35;}.canon-diagnosis .cta{width:100%; margin-top:16px; height:48px; border:none; border-radius:999px;
    background:var(--ink); color:#fff; font-size:15px; font-weight:500; cursor:pointer;
    flex-shrink:0; font-family:inherit; transition:opacity .15s;}.canon-diagnosis .cta[disabled]{opacity:.35; cursor:default;}.canon-diagnosis .done{text-align:center; padding:40px 20px;}.canon-diagnosis .done .dic{width:56px; height:56px; margin:0 auto 12px; color:var(--accent);}.canon-diagnosis .done .dic svg{width:100%; height:100%; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;}.canon-diagnosis .done h2{font-size:18px; margin:0 0 8px;}.canon-diagnosis .done p{font-size:13.5px; color:var(--muted); margin:0 0 6px;}.canon-diagnosis .done .sum{background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; margin:18px 0 0; text-align:left; font-size:13px;}.canon-diagnosis .done .sum div{padding:5px 0; display:flex; justify-content:space-between; gap:12px;}.canon-diagnosis .done .sum .k{color:var(--muted);}.canon-diagnosis .done .sum .v{font-weight:500; text-align:right;}.canon-diagnosis .restart{margin-top:16px; border:1px solid var(--line); background:var(--card); color:var(--ink);
    border-radius:999px; height:44px; width:100%; cursor:pointer; font-family:inherit; font-size:14px;}.canon-diagnosis .restart:hover{border-color:var(--hint);}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}.canon-diagnosis .welcome{justify-content:center; align-items:center; text-align:center; overflow:hidden;}.canon-diagnosis .welcome-inner{display:flex; flex-direction:column; align-items:center; gap:0;}@keyframes fadeUp{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:translateY(0);}}@keyframes ringIn{from{opacity:0; transform:scale(.6);}to{opacity:1; transform:scale(1);}}@keyframes growLine{from{width:0; opacity:0;}to{width:44px; opacity:1;}}.canon-diagnosis .w-avatar{width:64px; height:64px; border-radius:50%; border:1.5px solid var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:500;
    margin-bottom:22px; opacity:0; animation:ringIn .9s cubic-bezier(.2,.7,.2,1) .1s forwards;}.canon-diagnosis .w-title{font-size:25px; font-weight:700; letter-spacing:.03em; color:var(--ink);
    opacity:0; animation:fadeUp 1s ease-out .5s forwards;}.canon-diagnosis .w-sub{font-size:14px; color:var(--muted); margin-top:10px;
    opacity:0; animation:fadeUp 1s ease-out .9s forwards;}.canon-diagnosis .w-line{height:1px; background:var(--accent); margin:22px 0; width:0;
    opacity:0; animation:growLine .8s ease-out 1.4s forwards;}.canon-diagnosis .w-lead{font-size:13px; color:var(--hint);
    opacity:0; animation:fadeUp 1s ease-out 1.7s forwards;}.canon-diagnosis .w-cta{max-width:220px; opacity:0; animation:fadeUp 1s ease-out 2.1s forwards;}
.canon-diagnosis{width:100%}.canon-diagnosis .diagnosis-nav{width:100%;max-width:760px;display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;font-size:.8rem}.canon-diagnosis .diagnosis-logo{font-family:serif;font-size:1.75rem}.canon-diagnosis .diagnosis-intro{max-width:400px;margin-bottom:1rem}.canon-diagnosis .head{text-align:center}.canon-diagnosis .demo-note{font-size:11px;color:#6f675d;line-height:1.6;margin:12px 0 0;text-align:center}.canon-diagnosis #canon-diagnosis-root{scroll-margin-top:130px}@media(prefers-reduced-motion:reduce){.canon-diagnosis *{animation:none!important;transition:none!important}.canon-diagnosis .welcome-inner>*{opacity:1}.canon-diagnosis .w-line{width:44px}}

.canon-diagnosis #canon-diagnosis-root:focus {outline:none}