@charset "utf-8";
/* CSS Document */

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

	閲覧履歴（futureRecommend2）
	
========================================== */

/* 全体
------------------------------------------ */
#historyArea{
	font-family: 'Noto Sans JP', sans-serif;
}
#historyArea *{
	font-weight: 300;
}
#historyArea .historyInner{
	width: 100%;
	padding-top: clamp(40px, 40 * (100vw - 768px) / 1152 + 40px, 80px);
	padding-bottom: clamp(40px, 10 * (100vw - 768px) / 1152 + 40px, 50px);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	background: #EEEEEE;
}
#historyArea .historyInner>h2{
	font-size: clamp(1.2rem, 0.3 * (100vw - 76.8rem) / 115.2 + 1.2rem, 1.5rem);
	text-align: center;
	margin-bottom: clamp(20px, 20 * (100vw - 768px) / 1152 + 20px, 40px);
}
#historyArea .historyInner>h2 span{
	display: block;
}
#historyArea .historyInner>h2 span.sub-title{
	font-size: 1.1rem;
	margin-top: 1.5em;
}
#historyArea #_rcmdjp_display_1 .recent_item{
	width: calc(100% - 40px * 2);
	max-width: 1200px;
	margin: 0 auto;
}
#historyArea #_rcmdjp_display_1 .recent_item h2{
	display: none;
}
#historyArea #_rcmdjp_display_1 .recent_item ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#historyArea #_rcmdjp_display_1 .recent_item ul li{
	position: relative;
	width: calc((100% - clamp(10px, 10 * (100vw - 768px) / 1152 + 10px, 20px) * 9) / 10);
	margin-right: clamp(10px, 10 * (100vw - 768px) / 1152 + 10px, 20px);
	margin-bottom: clamp(10px, 10 * (100vw - 768px) / 1152 + 10px, 20px);
}
#historyArea #_rcmdjp_display_1 .recent_item ul li:last-of-type{
	margin-right: 0;
}
#historyArea #_rcmdjp_display_1 .recent_item ul li:nth-of-type(10n){
	margin-right: 0;
}
#historyArea #_rcmdjp_display_1 .recent_item ul li a{
	display: block;
	padding-top: 120%;
	overflow: hidden;
}
#historyArea #_rcmdjp_display_1 .recent_item ul li img{
	display: block;
	position: absolute;
    top: 0;
    left: 0;
	width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
#historyArea #_rcmdjp_display_1 .recent_item{
	width: calc(100% - 15px * 2);
}
#historyArea .historyInner>h2 span.sub-title{
	font-size: 1rem;
	margin-top: 1em;
}
#historyArea #_rcmdjp_display_1 .recent_item ul li{
	width: calc((100% - 2px * 4) / 5);
	margin-right: 2px;
	margin-bottom: 2px;
}
#historyArea #_rcmdjp_display_1 .recent_item ul li:nth-of-type(10n){
	margin-right: 2px;
}
#historyArea #_rcmdjp_display_1 .recent_item ul li:nth-of-type(5n){
	margin-right: 0;
}
}