@charset "UTF-8";

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

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



    points layout



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

html { font-size: 100%; }

.points_items a,

.points_items a:visited,

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

.tpl_container.points_items {

	padding: 1rem;

	display: flex;

	flex-wrap: wrap;

	margin: 0 -1rem;

}

.points_items .tpl_item {

	width: 33.333%;

	height: auto;

	position: relative;

	line-height: 1.3;

	margin: 0 0 1rem;

	padding: 1rem;

	position: relative;

	overflow: visible;

	box-sizing: border-box;

}

.points_items .tpl_image { margin: 0 0 16px; }

.points_items .tpl_image img {

	border-radius: 12px;

	border: 1px solid #eee;

	box-sizing: border-box;

}

.points_items .tpl_name {

	font-size: 1.25rem;

	height: 2.4em;

	line-height: 1.2em;

	text-align: center;

	margin: 0 0 8px;

	overflow: hidden;

}

.points_items .tpl_box {

	text-align: center;

	margin: 0 0 16px;

}

.points_items .tpl_itemcode,

.points_items .tpl_point {

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

	display: inline-block;

	vertical-align: middle;

	margin: 0 8px;

}

.points_items .tpl_itemcode {

	font-size: 1rem;

	line-height: 1.2em;

	padding: 4px 8px;

	background: #7a9408;

	color: #fff;

}

.points_items .tpl_point {

	text-align: center;

	color: #f00;

	font-size: 1.5rem;

}

.points_items .tpl_point:after {

	content: "PT";

	font-size: 80%;

}

.points_items .tpl_text {

	font-size: .875rem;

	line-height: 1.2em;

	height: 2.4em;

	overflow: hidden;

	margin: 0 0 16px;

}

.points_items .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_items .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_items a:hover .tpl_link_button:before { width: 100%; }

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

.points_items .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 (max-width : 768px) {

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

.points_items .tpl_item {

	width: 50%;

	padding: .5rem;

}

}



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

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

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

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

.points_items .tpl_itemcode,

.points_items .tpl_point { margin: 0; }

.points_items .tpl_itemcode {

	font-size: .65rem;

	padding: 4px;

}

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

.points_items .tpl_text {

	font-size: 10px;

	margin: 0 0 8px;

}

.points_items .tpl_link_button {

	padding: .5rem;

	font-size: .75rem;

}

}



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

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

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

}