/* Culture Stats — 「データで見る」を画像に依存しないHTML/CSS/SVGで再構築 */

/* テーマ全体が box-sizing:content-box のため、この範囲だけ border-box を明示する */
.c-data,
.c-data *,
.c-data *::before,
.c-data *::after {
	box-sizing: border-box;
}

.c-data {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4rem 0;
}
.c-data__col {
	width: 65.462962963%;
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

/* ---- カード共通 ---- */
.c-card {
	position: relative;
	background-color: #f9f7f5;
	border-radius: 2rem;
	padding: 3rem 3.5% 2.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.c-card--w1 { width: 48.1481481481%; }
.c-card--w2 { width: 65.462962963%; }
.c-card--w3 { width: 30.8333333333%; }
.c-card--full { width: 100%; }

.c-card__title {
	width: 88%;
	background-color: #fff;
	border: 1px solid #efedeb;
	border-radius: 9.4rem;
	text-align: center;
	font-size: 2.39vw;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #222;
	padding: 1.1rem 0;
}
@media (min-width: 1281px) {
	.c-card__title { font-size: 3.06rem; }
}
.c-card__note {
	margin-top: auto;
	padding-top: 1.6rem;
	font-size: 0.99vw;
	font-weight: 500;
	color: #333;
	text-align: center;
}
@media (min-width: 1281px) {
	.c-card__note { font-size: 1.27rem; }
}
.c-card__icon {
	display: block;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* 数値（カウントアップ対象） */
.c-num {
	font-family: "Ubuntu", "Noto Sans JP", sans-serif;
	font-weight: 700;
	color: #d1bada;
	line-height: 1;
}
.c-num .color { color: #bd96cc; }
.c-unit {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	color: #222;
	line-height: 1;
	font-size: 2.40vw;
}
@media (min-width: 1281px) {
	.c-unit { font-size: 3.07rem; }
}

/* ---- 単一数値カード（平均年齢・平均昇給率・部活動） ---- */
.c-card__figure {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 3.2rem;
}
.c-card__figure .c-num { font-size: 8.59375vw; }
@media (min-width: 1281px) {
	.c-card__figure .c-num { font-size: 11rem; }
}
.c-card__art {
	/* align-items:center の縦フレックス内では幅指定が無いと中身に合わせて縮み、
	   子の % 指定が意図した基準にならないため width を明示する */
	width: 100%;
	margin-top: 2.4rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6%;
}
/* アイコン幅は元画像の実測サイズ（基準1280pxでのpx値をvw換算し、1281px以上でrem固定）。
   % 指定は親要素の幅に依存し、カードごとにパディング基準が異なって不揃いになるため使わない */
.c-card__icon--people        { width: 9.47vw; }
.c-card__icon--money         { width: 11.08vw; }
.c-card__icon--shoe          { width: 9.42vw; }
.c-card__icon--ball          { width: 7.00vw; }
/* ドーナツ中心のアイコンは、穴の直径に対する線画の比率を元画像に合わせている（約66%） */
.c-donut__icon--laptop       { width: 5.81vw; }
.c-donut__icon--briefcase    { width: 6.32vw; }
.c-ratio__item .c-card__icon { width: 4.35vw; }
.c-card--wide .c-card__icon  { width: 11.33vw; }
@media (min-width: 1281px) {
	.c-card__icon--people        { width: 12.12rem; }
	.c-card__icon--money         { width: 14.19rem; }
	.c-card__icon--shoe          { width: 12.06rem; }
	.c-card__icon--ball          { width: 8.96rem; }
	.c-donut__icon--laptop       { width: 7.44rem; }
	.c-donut__icon--briefcase    { width: 8.09rem; }
	.c-ratio__item .c-card__icon { width: 5.56rem; }
	.c-card--wide .c-card__icon  { width: 14.50rem; }
}

/* ---- 男女比 ---- */
.c-ratio {
	margin-top: 2.4rem;
	width: 100%;
	display: flex;
	justify-content: space-around;
}
.c-ratio__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
}
.c-ratio__label {
	font-size: 2.39vw;
	font-weight: 700;
	color: #222;
}
.c-ratio__figure { display: flex; align-items: baseline; gap: 0.4rem; }
.c-ratio__figure .c-num { font-size: 8.59375vw; }
@media (min-width: 1281px) {
	.c-ratio__label { font-size: 3.06rem; }
	.c-ratio__figure .c-num { font-size: 11rem; }
}

/* ---- 部活動リスト ---- */
.c-club-list {
	margin-top: 2.8rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.c-club-list li {
	position: relative;
	padding-left: 2rem;
	font-size: 1.56vw;
	font-weight: 700;
	color: #222;
	line-height: 1.35;
}
@media (min-width: 1281px) {
	.c-club-list li { font-size: 2rem; }
}
.c-club-list li::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 0.85em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background-color: #222;
}

/* ---- ドーナツグラフ ---- */
.c-donut {
	position: relative;
	width: 100%;
	aspect-ratio: 1000 / 610;
	margin-top: 1.2rem;
}
.c-donut__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-donut__ring { transition: stroke-dasharray 1s ease-out; }
.c-donut__icon {
	position: absolute;
	left: 50%;
	top: 53.6%;
	transform: translate(-50%, -50%);
}
.c-donut__label {
	position: absolute;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #8b8b8b;
	padding-bottom: 0.4rem;
}
.c-donut__label .name {
	font-size: 1.77vw;
	font-weight: 700;
	color: #222;
	white-space: nowrap;
	line-height: 1.2;
}
.c-donut__label .val {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.2rem;
	margin-top: 0.4rem;
}
/* 元CSSは 7.1875vw / 9.2rem だが、それは「27」「43」のような2桁整数向けの幅。
   小数1桁（25.9 等）だとラベル枠に収まらずドーナツに重なるため、収まる大きさにしている。
   整数表示にするなら 5.47vw / 7rem を 7.1875vw / 9.2rem に戻せる。 */
.c-donut__label .val .c-num { font-size: 5.47vw; }
@media (min-width: 1281px) {
	.c-donut__label .name { font-size: 2.27rem; }
	.c-donut__label .val .c-num { font-size: 7rem; }
}
.c-donut__label--l { text-align: left; }
.c-donut__label--l .name { text-align: left; }
.c-donut__label--r { text-align: right; }
.c-donut__label--r .name { text-align: right; }

/* ---- ドーナツ（凡例レイアウト：区分が5つ以上のとき） ---- */
.c-donut--legend {
	aspect-ratio: auto;
	display: flex;
	align-items: center;
	gap: 4%;
	padding: 1.6rem 0 0.8rem;
}
.c-donut--legend .c-donut__chart {
	position: relative;
	width: 42%;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}
.c-donut--legend .c-donut__svg { position: absolute; inset: 0; }
.c-donut--legend .c-donut__icon { top: 50%; width: 26%; }
.c-donut__legend {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.c-donut__legend li {
	display: flex;
	align-items: center;
	gap: 1rem;
	border-bottom: 1px solid #e8e2e4;
	padding-bottom: 0.8rem;
}
.c-donut__legend li:last-child { border-bottom: none; }
.c-donut__legend .dot {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	flex-shrink: 0;
}
.c-donut__legend .name {
	flex: 1;
	font-size: 1.7rem;
	font-weight: 700;
	color: #222;
	line-height: 1.3;
}
.c-donut__legend .pct {
	display: flex;
	align-items: baseline;
	gap: 0.2rem;
	flex-shrink: 0;
}
.c-donut__legend .pct .c-num { font-size: 3rem; }
.c-donut__legend .pct .c-unit { font-size: 1.6rem; }

/* ---- 残業時間（横長カード） ---- */
.c-card--wide { flex-direction: row; align-items: center; padding: 2.6rem 4% 2.6rem 5%; }
.c-card--wide .c-card__main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.c-card--wide .c-card__title { width: 62%; }
.c-card--wide .c-card__figure { margin-top: 2rem; gap: 1.2rem; }
.c-card--wide .c-card__note { margin-top: 1rem; padding-top: 0; text-align: left; }

@media screen and (max-width: 520px) {
	.c-data { gap: 1.5rem 0; }
	.c-data__col { width: 100%; gap: 1.5rem; }
	.c-card { border-radius: 1.2rem; padding: 2rem 5% 1.8rem; }
	.c-card--w1 { width: 48.8304093567%; }
	.c-card--w2 { width: 100%; }
	.c-card--w3 { width: 48.8304093567%; }
	.c-card__title { width: 100%; font-size: 1.6rem; padding: 0.8rem 0; }
	.c-card__note { font-size: 1.1rem; padding-top: 1rem; }
	/* 数字のSPサイズは元CSSの指定値をそのまま使う */
	.c-unit { font-size: 4vw; }
	.c-card__figure .c-num { font-size: 12.5333333333vw; }
	.c-card--w3 .c-card__figure .c-num { font-size: 14.9333333333vw; }
	.c-ratio__label { font-size: 3.4vw; }
	.c-ratio__figure .c-num { font-size: 8.5333333333vw; }
	.c-ratio__item .c-card__icon { width: 3.6rem; }
	.c-club-list li { font-size: 1.3rem; padding-left: 1.4rem; }
	.c-club-list li::before { width: 0.5rem; height: 0.5rem; }
	.c-donut { aspect-ratio: 1000 / 760; }
	.c-donut__label .name { font-size: 1.35rem; }
	.c-donut__label .val .c-num { font-size: 8vw; }
	.c-donut--legend { flex-direction: column; gap: 2rem; }
	.c-donut--legend .c-donut__chart { width: 62%; }
	.c-donut__legend { width: 100%; gap: 0.8rem; }
	.c-donut__legend li { padding-bottom: 0.6rem; gap: 0.7rem; }
	.c-donut__legend .name { font-size: 1.25rem; }
	.c-donut__legend .pct .c-num { font-size: 2.1rem; }
	.c-donut__legend .pct .c-unit { font-size: 1.2rem; }
	.c-donut__label .val .c-unit,
	.c-donut__legend .pct .c-unit { font-size: 3vw; }
	.c-donut__legend .dot { width: 0.9rem; height: 0.9rem; }
	.c-card--wide { flex-direction: row; }
	.c-card--wide .c-card__title { width: 100%; font-size: 1.6rem; }
	.c-card--wide .c-card__figure .c-num { font-size: 14.9333333333vw; }
}