@charset "UTF-8";

.ranking-img{
	max-width: 37%;
	height: auto;
	float: left;
	margin:10px;
}
.ranking01-gold-top-text, .ranking01-silver-top-text, .ranking01-copper-top-text{
	font-size:26px;
	margin-bottom:5px;
	margin-left: 7%;
}
.ranking-img{
	float: left;
}
.g-crown-box{
	height: 0;
}
.ranking01-gold{
	clear: both;
	margin-bottom:25px; 
}
.ranking01-gold-bottom-box{
	border-top: dotted 4px gold;
}
.ranking01-gold-bottom-text{
	margin: 20px 10px 10px 10px;
}

.ranking01-gold-bottom-link{
	clear: both;
	text-align: right;
	font-size: 17px;
}

.s-crown-box{
	height: 0;
}
.ranking01-silver{
	clear: both;
	margin-bottom:25px; 
}
.ranking01-silver-middle-box{
	border-top: dotted 4px silver;
}
.ranking01-silver-bottom-text{
	margin: 20px 10px 10px 10px;
}

.ranking01-silver-bottom-link{
	clear: both;
	text-align: right;
}
.ranking01-silver-bottom-box{
	width: 100%;
	padding: 10px;
	font-size: 17px;
	background: #ccc;
	border-radius: 5px;
	text-align: center;
}

.c-crown-box{
	height: 0;
}
.ranking01-copper{
	clear: both;
	margin-bottom: 20px;
}
.ranking01-copper-middle-box{
	border-top: dotted 4px #B87333;
}
.ranking01-copper-bottom-text{
	margin: 20px 10px 10px 10px;
}

.ranking01-copper-bottom-link{
	clear: both;
	text-align: right;
}
.ranking01-copper-bottom-box-left-button{
	float: left;
	background: #ccc;
	padding: 10px;
	border-radius: 4px;
	width: 48%;
	margin-right: 10px;
	text-align: center;
	margin-bottom: 15px;
}
.ranking01-copper-bottom-box-right-button{
	float: right;
	background: #ccc;
	padding: 10px;
	border-radius: 4px;
	width: 48%;
	text-align: center;
}

@media screen and (max-width:767px){
	.ranking01-copper-bottom-box-left-button, .ranking01-copper-bottom-box-right-button{
		width: 100%;
		clear:left;
	}
	.ranking01-gold-bottom-text, .ranking01-silver-bottom-text, .ranking01-copper-bottom-text{
		clear: left;
		margin-top: 10px;
	}
	.ranking-img{
		max-width: 100%;
		clear: both;
		margin: 0;
		width: 100%;
	}
	.ranking01-gold-bottom-text{
		margin: 15px 0 10px 0;
	}
}
.g-crown {
	width: 0;
	height: 0;
	border-bottom: 35px solid #bfa930;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	position: relative;
	float: left;
}

.g-crown:after {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 20px solid #ffe973;
	border-left: 20px solid #ffe973;
	border-right: 20px solid #ffd700;
	content: "";
	position: absolute;
	top: 0;
	left: -20px;
}

.g-crown-circle {
	background-color: #a68c00;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	position: absolute;
	top: -5px;
	left: -21px;
}

.g-crown-circle:before {
	background-color: #a68c00;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	content: "";
	position: absolute;
	top: 0;
	left: 19px;
}

.g-crown-circle:after {
	background-color: #a68c00;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	content: "";
	position: absolute;
	top: 0;
	left: 38px;
}

.s-crown {
	width: 0;
	height: 0;
	border-bottom: 35px solid #909090;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	position: relative;
	float: left;
}

.s-crown:after {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 20px solid #e0e0e0;
	border-left: 20px solid #e0e0e0;
	border-right: 20px solid silver;
	content: "";
	position: absolute;
	top: 0;
	left: -20px;
}

.s-crown-circle {
	background-color: #909090;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	position: absolute;
	top: -5px;
	left: -21px;
}

.s-crown-circle:before {
	background-color: #909090;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	content: "";
	position: absolute;
	top: 0;
	left: 19px;
}

.s-crown-circle:after {
	background-color: #909090;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	content: "";
	position: absolute;
	top: 0;
	left: 38px;
}

.c-crown {
	width: 0;
	height: 0;
	border-bottom: 35px solid #69433f;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	position: relative;
	float: left;
}

.c-crown:after {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 20px solid #8c4841;
	border-left: 20px solid #8c4841;
	border-right: 20px solid #5b1c15;
	content: "";
	position: absolute;
	top: 0;
	left: -20px;
}

.c-crown-circle {
	background-color: #69433f;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	position: absolute;
	top: -5px;
	left: -21px;
}

.c-crown-circle:before {
	background-color: #69433f;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	content: "";
	position: absolute;
	top: 0;
	left: 19px;
}

.c-crown-circle:after {
	background-color: #69433f;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	content: "";
	position: absolute;
	top: 0;
	left: 38px;
}