:root{
    --bg:#f0ebc2;
    --olive:#3a3b13; --green:#43763a; --teal:#1c6b67; --indigo:#5b62b4; --purple:#a58ac0; --beige:#bfa48f; --maroon:#9f565e; --sep:#ffffff;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:#2b2b2b;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial}
  .wrap{max-width:1200px;margin:48px auto;padding:0 24px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:28px;align-items: flex-start;}
  @media (max-width:980px){.wrap{grid-template-columns:1fr}}
  h2{font-family:"Bodoni Moda","Times New Roman",serif;letter-spacing:.05em;font-weight:800;color:var(--olive);text-align:center;margin:0 0 12px}
  .card{background:transparent;border-radius:16px;padding:12px}
  .card:first-child{
      margin-top: 15%;
  }

  /* ドーナツ */
  .donut{display:grid;place-items:center;aspect-ratio:1/1;position:relative}
  .donut svg{width:100%;height:auto}
  .donut .bg{stroke:#d7d4a0}
  .donut .val{stroke:var(--olive);transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
  .donut .label{
      position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--olive);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .donut .label .big{font-family:"Bodoni Moda","Times New Roman",serif;font-weight:900;line-height:1;font-size:clamp(42px,7vw,96px)}
  .donut .label .cap{font-weight:700;letter-spacing:.12em;font-size:clamp(14px,2.2vw,24px);margin-bottom:.15em}

  /* 円グラフ */
  .pie{display:grid;justify-items:center;gap:8px}
  .stage{width:100%;max-width:360px;aspect-ratio:1/1;position:relative}
  .pie svg{width:100%;height:auto}
  .slice{
    stroke:var(--sep);stroke-width:0;stroke-linejoin:round;
    transform:rotate(90deg);transform-origin:50% 50%; /* 12時起点に見える補正 */
  }
  .legend{margin-top:8px;display:grid;gap:6px;justify-items:start}
  .legend li{list-style:none;display:flex;align-items:center;gap:8px;font-size:clamp(12px,1.6vw,16px);white-space:nowrap}
  .legend .dot{width:14px;height:14px;border-radius:4px}