@charset "UTF-8";

 @import url(https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap);

/*==============================================



    points ranking layout



===============================================*/



html { font-size: 100%; }

.points_rank a,

 .points_rank a:visited,

 .points_rank a:link { text-decoration: none; }

.tpl_container.points_rank {

	padding: 1rem;

	display: flex;

	flex-wrap: wrap;

	margin: 0 -1rem;

}

.points_rank .tpl_item {

	width: 20%;

	height: auto;

	position: relative;

	line-height: 1.3;

	margin: 0 0 1rem;

	padding: 1rem .5rem;

	position: relative;

	overflow: visible;

	box-sizing: border-box;

}

.points_rank .tpl_item:before {

	background-color: #7a9408;

	display: block;

	font-size: 1.5rem;

	width: 48px;

	height: 48px;

	line-height: 48px;

	text-align: center;

	color: #fff;

	position: absolute;

	top: 0;

	left: 50%;

	border-radius: 50%;

	transform: translateX(-50%);

}

.points_rank .tpl_item:nth-child(1):before { content: "1"; }

.points_rank .tpl_item:nth-child(2):before { content: "2"; }

.points_rank .tpl_item:nth-child(3):before { content: "3"; }

.points_rank .tpl_item:nth-child(4):before { content: "4"; }

.points_rank .tpl_item:nth-child(5):before { content: "5"; }

.points_rank .tpl_item:nth-child(1):before,

 .points_rank .tpl_item:nth-child(2):before,

 .points_rank .tpl_item:nth-child(3):before { background-color: #e7481d; }

.points_rank .tpl_image { margin: 0 0 .5rem; }

.points_rank .tpl_image img {

	border-radius: 12px;

	border: 1px solid #eee;

	box-sizing: border-box;

}

.points_rank .tpl_name {

	font-size: 1rem;

	height: 2.4em;

	line-height: 1.2em;

	text-align: center;

	margin: 0 0 8px;

	overflow: hidden;

}

.points_rank .tpl_box {

	text-align: center;

	margin: 0 0 .5rem;

}

.points_rank .tpl_itemcode,

 .points_rank .tpl_point {

	font-family: 'M PLUS Rounded 1c', sans-serif;

	display: inline-block;

	vertical-align: middle;

	margin: 0 8px;

}

.points_rank .tpl_itemcode {

	font-size: .75rem;

	line-height: 1.2em;

	padding: 4px 8px;

	background: #7a9408;

	color: #fff;

}

.points_rank .tpl_point {

	text-align: center;

	color: #f00;

	font-size: 1.25rem;

}

.points_rank .tpl_point:after {

	content: "PT";

	font-size: 80%;

}

.points_rank .tpl_text {

	font-size: .75rem;

	line-height: 1.2em;

	height: 2.4em;

	overflow: hidden;

	margin: 0 0 16px;

	display: none;

}

.points_rank .tpl_link_button {

	display: block;

	width: 100%;

	margin: 0;

	text-align: center;

	color: #333;

	text-decoration: none;

	transition: .3s;

	font-size: 1rem;

	border-bottom: 2px solid #333;

	padding: 1rem 0;

	position: relative;

	box-sizing: border-box;

}

.points_rank .tpl_link_button:before {

	content: "";

	display: block;

	width: 0;

	position: absolute;

	left: 0;

	bottom: -2px;

	margin: 0!Important;

	border-bottom: 2px solid #ffd44c;

	transition: .5s;

}

.points_rank a:hover .tpl_link_button:before { width: 100%; }

.points_rank a:hover .tpl_link_button { color: #ffd44c; }

.points_rank .tpl_item .tpl_link_button:after {

	content: "+";

	vertical-align: baseline;

	font-size: 120%;

	margin-left: 8px;

}



@media screen and (max-width:1024px) {

}



@media screen and (min-width:481px) and (max-width : 769px) {

.points_rank .tpl_item { width: 33.33%; }

.points_rank .tpl_item:nth-child(-n +2) { width: 50%; }

}



@media screen and (max-width : 480px) {

.tpl_container.points_rank { padding: .5rem; }

.points_rank .tpl_item {

	width: 50%;

	padding: .5rem;

}

.points_rank .tpl_item:before {

	font-size: 1.25rem;

	width: 40px;

	height: 40px;

	line-height: 40px;

}

.points_rank .tpl_item:nth-child(1) {

	width: 100%;

	padding: 1rem 2rem;

}

.points_rank .tpl_image { margin: 0 0 8px; }

.points_rank .tpl_name { font-size: .75rem; }

.points_rank .tpl_box { margin: 0 0 8px; }

.points_rank .tpl_itemcode,

 .points_rank .tpl_point { margin: 0; }

.points_rank .tpl_itemcode {

	font-size: .65rem;

	padding: 4px;

}

.points_rank .tpl_point { font-size: 1rem; }

.points_rank .tpl_text {

	font-size: 10px;

	margin: 0 0 8px;

}

.points_rank .tpl_link_button {

	padding: .5rem;

	font-size: .75rem;

}

}



@media screen and (max-width : 320px) {

.points_rank .tpl_itemcode { font-size: 10px; }

.points_rank .tpl_point { font-size: 12px; }

}