@charset "utf-8";

.mt10 {
	margin-top:10px;
}

.mt30 {
	margin-top:30px;
}

.fs10 {
	font-size:10px;
}

.fs20 {
	font-size:20px;
}

.fb {
	font-weight:bold;
}

.point_ttl {
	margin-top:40px;
	font-size:20px;
	font-weight: bold;
	color: #FF7800;
}

.info2 {
	margin-top:10px;
	color: #777;
	font-size: small;
}

.rank {
	background:#FFF9DB;
	padding: 0 0 20px;
}

.rank_ttl {
	font-size:20px;
	font-weight: bold;
}
	
.flex_container {
 margin: 10px auto;
 width :96%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

.flex_box, .flex_box3 {
	background:#FFF;
	border-radius: 20px;
	margin: 5px;
	width: calc(50% - 20px);
	padding:5px;
	font-size:10px;
}

.platinum {
	background:#FFF;
	border-radius: 20px;
	margin: 10px 20px;
	padding:20px;
}

.platinum ul {
	display: flex;
	width: 100%;
	margin: 0 auto;
}

.platinum ul li {
	width: 50%;
}

.platinum ul li.text {
	text-align: left;
	margin: 0 20px 0;
	font-size:10px;
}

.rank_note {
	background:#F3F3F3;
	padding: 40px 14px;
	text-align: left;
}

.rank_note_ttl {
	font-weight: bold;
	color: #333333;
	margin-bottom:  20px;
}

.rank_note ul li {
	color: #6F6F6F;
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 10px;
}

#footer {
	margin-top: 0;
}

/*画面幅768px以上の設定
------------------------------------*/
@media screen and (min-width:768px){
	.flex_box {
		width: calc(25% - 20px);
	}
	
	.flex_box3 {
		width: calc(33% - 20px);
	}
	
	.platinum ul {
		width: 50%;
	}

	.platinum ul li.text {
		margin: 60px 20px 0;
	}
	.sp_only {
		display: none !important;
	}
	
	.rank_note {
		padding: 40px;
	}

}