@charset "UTF-8";
   :root{
      --card-bg:#f8fafc;
      --card-border:#e6ebf2;
      --text:#1f2a37;
      --track:#e8edf5;
      --shadow:0 8px 24px rgba(15,23,42,.08);
      --radius:24px;
      --muted: #6b7280;

      /* 文理 */
      --arts:#F6A26A;
      --sci:#47C1B8;

      /* 事業部門 */
      --dept1:#1177c6;	/* システム開発 */
      --dept2:#f31b9b;	/* ITインフラ */
      --dept3:#47c1b8;	/* システム運用 */
      --dept4:#acf9c1;	/* 地方事業所 */
    }
	.wrap{
		width:90%;
		margin:0 auto;
		display:grid;
		gap:20px;
		grid-template-columns: repeat(2, 1fr);
	}

    /* カード */
    .data-card{
		width:100%;
		background:var(--card-bg);
		border:1px solid var(--card-border);
		border-radius:var(--radius);
		box-shadow:var(--shadow);
		padding:24px 26px;
		min-height:300px;
    }

    .data-card__title{
		font-size:20px;
		font-weight:800;
		margin:0 0 18px;
		color: var(--muted);
    }

    /* 半ドーナツ型グラフ */
    .donut{
		--donut-w: 320px;  /* グラフ幅 */
		--vb: 240;         /* SVG viewBox */
		--cut: calc(var(--donut-w) * (132 / 240));
		display:grid;
		grid-template-columns: var(--donut-w) 1fr;
		gap: 10px;
		align-items:center;
    }

    /* グラフ */
    .donut__chart{
		width: var(--donut-w);
		height: var(--cut);
		overflow:hidden;
		line-height:0;
    }

    .donut__chart svg{
		width:100%;
		height:auto;
		display:block;
    }

    /* SVGの線（角丸）*/
    .donut-track,
    .donut-seg{
		fill:none;
		stroke-width:22;
		stroke-linecap:round;
    }

    /* 半ドーナツ型グラフのベース */
    .donut-track{
		stroke:var(--track);
		transform: rotate(-180deg);
		transform-origin: 120px 120px;
    }

    .donut-seg{
		transform: rotate(-180deg);
		transform-origin: 120px 120px;
		transition: stroke-dasharray 900ms cubic-bezier(.2,.8,.2,1);
		will-change: stroke-dasharray;
    }

    @media (prefers-reduced-motion: reduce){
      .donut-seg{ 
			transition:none !important;
		}
    }

    /* 凡例 */
    .donut__legend{
		display:flex;
		flex-direction:column;
		gap: 5px;
    }

    .legend-row{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap: 18px;
    }

    .legend-left{
		display:flex;
		align-items:center;
		gap:10px;
		font-size:15px;
		font-weight:700;
		color:#3b4655;
		white-space:nowrap;
    }

    .legend-dot{
		width:10px;
		height:10px;
		border-radius:999px;
		flex:0 0 auto;
    }

    .legend-value{
		font-size:48px;
		font-weight:900;
		letter-spacing:.01em;
		color:#2b2f36;
		line-height:1;
    }

    .legend-unit{
		font-size:28px;
		font-weight:900;
		margin-left:4px;
    }
    
@media (max-width: 760px){
  .donut{
		grid-template-columns: 1fr;
		--donut-w: min(320px, 80%);
		display:flex;
		flex-direction: row;
		align-items: center
    }

	.donut__chart{
		height: 132px;
	}

   .wrap{
		grid-template-columns: repeat(1, 1fr);
		width:90%;
    }

	.legend-value{
		font-size: 35px;
	}

	.flexCol{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
    /* カード */
    .data-card{
		padding:18px;
		min-height:200px;
    }
}