@charset "UTF-8";
/* CSS Document */

.font_large{
	font-size:3.125rem;
}

header{
	margin-bottom: 95px;
}

#ex{
	margin-bottom: 95px;
	font-size: 0.75rem;
}

#main{
	width: 850px;
	margin: 0 auto;
}

#main #mv{
	margin-bottom: 10px;
}

#main #mv img{
	display: block;
	width: 100%;
}

#main #inner{
	width: 100%;
}

.rank_gold,
.rank_silver,
.rank_bronze{
	display: flex;
	align-items: center;
	gap: 1rem;
	font-weight: 700;
	margin-bottom: 30px;
}

.rank_gold{
	color: #f7931e;
}

.rank_silver{
	color: #707070;
}

.rank_bronze{
	color: #8c6239;
}

.rank_gold::before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	background: url("../img/common/gold.svg") no-repeat center / contain;
	flex-shrink: 0;
	position: relative;
	top: -5px; 
}

.rank_silver::before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	background: url("../img/common/silver.svg") no-repeat center / contain;
	flex-shrink: 0;
	position: relative;
	top: -5px; 
}

.rank_bronze::before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	background: url("../img/common/bronze.svg") no-repeat center / contain;
	flex-shrink: 0;
	position: relative;
	top: -5px;
}

.rank_gold,
.rank_silver,
.rank_bronze{
	font-weight: 700;
	font-size:1.875rem;
}

#main #inner .ranking_box{
	margin-bottom: 100px;
}

.desc{
	line-height: 2.5em;
}

.star{
	display: inline-block;
	width: 130px;
	margin-right: 0.5rem
}

.rank_list{
	margin-bottom: 60px;
}

.rank_list p{
	margin-bottom: 30px;
}

.rank_list p:last-child{
	margin-bottom: 0;
}

#source{
	margin-bottom: 60px;
}

#source img{
	display: block;
	margin-bottom: 30px;
}

#source img:last-child{
	margin-bottom: 0;
}

.reason_gold,
.reason_silver,
.reason_bronze{
	display: inline-block;
	font-size: 1.5rem;
	padding: 15px;
}

.reason_gold{
	color: #f7931e;
	border: solid 2px #f7931e;
}

.reason_silver{
	color: #707070;
	border: solid 2px #707070;
}

.reason_bronze{
	color: #8c6239;
	border: solid 2px #8c6239;
}

.check{
	display: flex;
	align-items: center;
	gap: 1rem;
	font-weight: 700;
	margin-bottom: 30px;
}

.check::before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	background: url("../img/common/check.svg") no-repeat center / contain;
	flex-shrink: 0;
}

@media screen and (max-width: 1024px) {
	
	.font_large{
		font-size:2rem;
	}
	
	header{
		margin-bottom: 35px;
	}

	#ex{
		margin-bottom: 60px;
		font-size: 0.75rem;
	}

	#main{
		width: 90%;
		margin: 0 auto;
	}

	.rank_gold,
	.rank_silver,
	.rank_bronze{
		font-weight: 700;
		font-size:1.25rem;
	}
	
	.desc{
		font-size: 1rem;
	}
	
	.reason_gold,
	.reason_silver,
	.reason_bronze{
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 1.25rem;
		width: 75%;
	}
	
}