#recommend_rank{
	margin-bottom:5.0rem;
}

.panel-radios {
	display: none;
}

ul#tabs-list {
	display: flex;
	margin-bottom:1.0rem;
	margin-top:20px;
}

ul#tabs-list li {
	text-align: center;
	font-size: 15px;
	width: 20%;
	box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
	border-right: 1px solid #dfdfdf;
	position: relative;
	font-weight:bold;
}

ul#tabs-list li:hover {
	-webkit-transition: none;
	transition: none;
	border-right: none;
}

ul#tabs-list li:hover.last {
	border-right: 1px solid transparent;
}

ul#tabs-list li:hover + li {
	border-left: 1px solid #dfdfdf;
}

ul#tabs-list li label.panel-label {
	position: relative;
	padding: 15px 0;
	display: block;
	background-color: #f5f5f5;
}

ul#tabs-list li label.panel-label:hover {
	color: #558048;
}

ul#tabs-list li label.panel-label:hover::after {
	height: 6px;
}

ul#tabs-list li label.panel-label::after {
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 100%;
	background-color: #558048;
	height: 0;
	transition-property: height;
	transition-duration: 200ms;
}

#panel-1-ctrl:checked ~ #panels #panel-1 main, #panel-2-ctrl:checked ~ #panels #panel-2 main, #panel-3-ctrl:checked ~ #panels #panel-3 main, #panel-4-ctrl:checked ~ #panels #panel-4 main, #panel-5-ctrl:checked ~ #panels #panel-5 main{
	max-height: initial;
	opacity: 1;
}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label, #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label, #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label, #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label, #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label{
	background-color: white;
	color: #558048;
}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after, #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after, #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after, #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label::after, #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label::after{
	height: 6px;
}


#panels section main {
	max-height: 0;
	opacity: 0;
	-webkit-transition: opacity 600ms;
	transition: opacity 600ms;
	overflow-y: hidden;
}

.ranking ul li{
	list-style:none;
}

.ranking ul .item_name{
/*
	font-weight:bold;
*/
	display:block;
	padding-top:5px;
/*
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
*/
}


.ranking ul .item_price{
	font-size:11px;
}


/*-- スマホ用ここから --*/
@media screen and (max-width: 767px) {
ul#tabs-list li label.panel-label{
	font-size:1.4rem;
	padding:12px 0;
}

.ranking ul{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
	text-align:center;
}

}
/*-- スマホ用ここまで --*/

/*-- タブレット用ここから --*/
@media screen and (min-width: 768px) {
.ranking ul{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	text-align:center;
}

}
/*-- タブレット用ここまで --*/


/*-- PC用ここから --*/
@media screen and (min-width: 1200px) {

.ranking ul{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	text-align:center;
}

}
/*-- PC用ここまで --*/