@charset "utf-8";

/* ==========================
	ranking style
============================= */

.ranking {
	margin: 5.5rem auto 0;
	max-width: 125.6rem;
	padding: 0 1rem 15rem;
}
.ranking .ttl {
	font-size: 4.6rem;
	font-weight: bold;
	text-align: center;
}
.ranking .rankingList {
	padding: 6rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 1.7rem;
}
.ranking .rankingBox {
	width: 15.454%;
	position: relative;
}
.ranking .rankingBox.num01::before ,
.ranking .rankingBox.num02::before ,
.ranking .rankingBox.num03::before {
	content: "";
	width: 3.7rem;
	height: 3.3rem;
	position: absolute;
	top: 0.5rem;
	left: 1rem;;
}
.ranking .rankingBox.num01::before {
	background: url(/ranking/img/num01.png) no-repeat;
	background-size: contain;
}
.ranking .rankingBox.num02::before {
	background: url(/ranking/img/num02.png) no-repeat;
	background-size: contain;
}
.ranking .rankingBox.num03::before {
	background: url(/ranking/img/num03.png) no-repeat;
	background-size: contain;
}
.ranking .rankingBox:nth-child(n+4)::before {
	content: "";
	width: 2.6rem;
	height: 2.6rem;
	background: var(--whiteColor);
	border-radius: 50%;
	position: absolute;
	top: 0.5rem;
	left: 1rem;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	color: #5e5d5c;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ranking .rankingBox.num04::before {
	content: "4";
}
.ranking .rankingBox.num05::before {
	content: "5";
}
.ranking .rankingBox.num06::before {
	content: "6";
}
.ranking .rankingBox.num07::before {
	content: "7";
}
.ranking .rankingBox.num08::before {
	content: "8";
}
.ranking .rankingBox.num09::before {
	content: "9";
}
.ranking .rankingBox.num10::before {
	content: "10";
}
.ranking .rankingBox.num11::before {
	content: "11";
}
.ranking .rankingBox.num12::before {
	content: "12";
}
.ranking .rankingBox.num13::before {
	content: "13";
}
.ranking .rankingBox.num14::before {
	content: "14";
}
.ranking .rankingBox.num15::before {
	content: "15";
}
.ranking .rankingBox.num16::before {
	content: "16";
}
.ranking .rankingBox.num17::before {
	content: "17";
}
.ranking .rankingBox.num18::before {
	content: "18";
}
.ranking .rankingBox.num19::before {
	content: "19";
}
.ranking .rankingBox.num20::before {
	content: "20";
}
.ranking .rankingBox.num21::before {
	content: "21";
}
.ranking .rankingBox.num22::before {
	content: "22";
}
.ranking .rankingBox.num23::before {
	content: "23";
}
.ranking .rankingBox.num24::before {
	content: "24";
}
.ranking .rankingBox.num25::before {
	content: "25";
}
.ranking .rankingBox.num26::before {
	content: "26";
}
.ranking .rankingBox.num27::before {
	content: "27";
}
.ranking .rankingBox.num28::before {
	content: "28";
}
.ranking .rankingBox.num29::before {
	content: "29";
}
.ranking .rankingBox.num30::before {
	content: "30";
}
.ranking .rankingBox.num31::before {
	content: "31";
}
.ranking .rankingBox.num32::before {
	content: "32";
}
.ranking .rankingBox a {
	display: block;
}
.ranking .rankingBox .detail {
	margin-top: 1rem;
	font-size: 1.2rem;
	line-height: 1.6rem;
}
.ranking .rankingBox .detail .areaName {
	font-weight: 600;
}
.ranking .amount {
	margin-top: 0.5rem;
	font-size: 1.8rem;
	font-weight: 600;
}
@media (max-width: 768px) {
	.ranking {
		margin: 8rem auto 0;
		max-width: 100%;
		padding: 0 0 30rem;
	}
	.ranking .rankingList {
		padding: 8rem 2.5rem 0;
		justify-content: space-between;
		gap: 5rem 0;
	}
	.ranking .rankingBox {
		width: 48%;
	}
	.ranking .rankingBox.num01::before ,
	.ranking .rankingBox.num02::before ,
	.ranking .rankingBox.num03::before {
		width: 6.7rem;
		height: 6rem;
		top: 1rem;
		left: 1.5rem;
	}
	.ranking .rankingBox:nth-child(n+4)::before {
		width: 6rem;
		height: 6rem;
		font-size: 3.6rem;
		top: 1rem;
		left: 1.5rem;
	}
	.ranking .rankingBox .detail {
		font-size: 2.4rem;
		line-height: 3.6rem;
	}
	.ranking .amount {
		font-size: 3.2rem;
	}
}