@charset "utf-8";


.button-area {
	min-width: 300px;
	text-align: center;
	margin: 0 auto;
}
.button-group {
	max-width: 300px;
}
/*
.button-group > .button {
	width: 31.3333333%;
	margin: 0 1%;
}
*/

.button-area.siblings .button-group > .button {
	padding: 20px 6px;
}


.flavors {
	width: 70%;
	margin: 0 auto;
	margin-bottom: 20px;
}
.flavors.layout-left {
	width: 58%;
	margin: 0;
	margin-right: 2%;
	margin-bottom: 20px;
}

.flavors .flavor {
	width: 100%;	
}
.flavors .flavor .flavor-rank .counter {
	/*max-width: 140px;*/
}
.flavors .flavor .flavor-rank .counter .digit {
	max-width: 20px;
}

.ranking-board {
	width: 70%;
	margin: 0 auto;
	margin-bottom: 20px;
}
.ranking-board.layout-left {
	width: 40%;
}

.ranking-board .button-group {
	max-width: 100%;
}


@media (max-width: 979px) {
	.flavors.layout-left {
		float: none;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.ranking-board.layout-left {
		float: none;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 640px) {
	.button-group {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	#flavor-rank .rank-type {
		width: 86%;
		margin-left : auto;
		margin-right: auto;
	}
	
	.flavors,
	.flavors.layout-left {
		width: 100%;
	}
	
	.ranking-board,
	.ranking-board.layout-left {
		width: 100%;
	}
}