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

.panel_list{
	display:flex;
	flex-wrap:wrap;
	margin-bottom:20px;
}
.panel_list > li{
	position:relative;
	width:280px;
	height:auto;
	padding:9px;
	margin:0 20px 20px 0;
	font-size:14px;
	line-height:18px;
	vertical-align:top;
	border:solid 1px #a2a2a2;
}
.panel_list > li:nth-child(3n){
	margin-right:0;
}
.panel_lead{
	padding:3px 5px 2px 5px;
	position:absolute;
	left:-3px;
	top:5px;
	color:#fff;
	line-height:1.3;
	background-color:#ff0000;
	z-index:10;
}
.panel_tag{
	width:80px;
	height:80px;
	position:absolute;
	right:0;
	top:0;
	z-index:9;
}
.panel_img{
	width:280px;
	height:220px;
	overflow:hidden;
	margin-bottom:6px;
}
.panel_img img{
	width:280px;
	height:auto;
}
.panel_catch{
	margin-bottom:3px;
	font-size:14px;
	color:#ff0000;
}
.panel_title{
	margin-bottom:4px;
	font-size:18px;
	line-height:20px;
	font-weight:bold;
}
.panel_title .small{
	font-size:14px;
	font-weight:normal;
}
.hover_wrap{
	box-sizing:border-box;
	display:flex;
	flex-flow:column wrap;
	width:100%;
	height:100%;
	padding:15px;
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	-webkit-transition:all .3s ease;
	transition:all .3s ease;
	z-index:11;
}
.panel_list > li > *{
	-webkit-filter:blur(0);
	filter:blur(0);
	-webkit-transition:.3s ease-in-out;
	transition:.3s ease-in-out;
}
.panel_list > li:hover > *{
	-webkit-filter:blur(1.5px);
	filter:blur(1.5px);
}
.panel_list > li:hover .hover_wrap{
	-webkit-filter:blur(0);
	filter:blur(0);
	opacity:1;
}
.panel_list > li:hover .hover_wrap{background-color:rgba(0,0,0,0.6);}
.panel_list > li:hover .hover_wrap.gravure{background-color:rgba(208,40,207,0.7);}
.panel_list > li:hover .hover_wrap.comics{background-color:rgba(52,155,239,0.7);}
.panel_list > li:hover .hover_wrap.title{background-color:rgba(0,141,171,0.9);}
.panel_list > li:hover .hover_wrap.media{background-color:rgba(255,102,5,0.7);}
.panel_list > li:hover .hover_wrap.official{background-color:rgba(84,172,68,0.7);}
.hover_wrap > p{
	width:100%;
	color:#fff;
	line-height:1.6;
}
.hover_wrap > ul{
	width:100%;
	text-align:center;
	flex-grow:1;
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	align-content:center;
	justify-content:center;
}
.hover_wrap > p + ul{
	align-items:flex-end;
	align-content:flex-end;
}
.hover_wrap > ul li{
	display:inline-block;
	width:250px;
	height:32px;
	margin:0 8px 8px 8px;
	line-height:32px;
	border:solid 1px #fff;
	background-color:#000;
}
.hover_wrap > p + ul li{
	width:124px;
	margin:0 4px 8px 4px;
}
.hover_wrap > ul li.sp{
	display:none;
}
.hover_wrap > ul li:hover{
	background-color:#fef500;
}
.hover_wrap > ul li a{
	display:block;
}
.hover_wrap > ul li a{
	color:#fff;
}
.hover_wrap > ul li a:hover{
	color:#000;
}



/*-----------------------------------------------------	*/
/*  for - 639px  */
/*-----------------------------------------------------	*/
@media screen and (max-width: 640px){
	
.panel_list{
	margin-bottom:0;
}
.panel_list > li{
	width:calc(50% - 15px);
	padding:8px 4px;
	display:flex;
	flex-flow:column wrap;
	margin:0 5px 10px 0;
}
.panel_list > li:nth-child(3n){
	margin-right:5px;
}
.panel_list > li:nth-child(2n){
	margin:0 0 10px 5px;
}
.panel_lead{
	font-size:11px;
}
.panel_tag{
	width:45px;
	height:45px;
}
.panel_tag img{
	width:100%;
	height:auto;
}
.panel_img{
	width:100%;
	height:auto;
	margin-bottom:3px;
}
.panel_img img{
	width:100%;
}
.panel_catch{
	margin-bottom:2px;
	font-size:11px;
	line-height:14px;
}
.panel_title{
	font-size:12px;
	line-height:16px;
	margin-bottom:3px;
}
.panel_title .small{
	font-size:10px;
	line-height:1;
}
.panel_detail{
	font-size:11px;
	line-height:14px;
}
.hover_wrap{
	height:auto;
	padding:0;
	flex-grow:5;
	position:relative;
	opacity:1;
}
.hover_wrap > ul{
	align-items:flex-end;	
}
.panel_list > li:hover > *{
	-webkit-filter:blur(0);
	filter:blur(0);
}
.panel_list > li:hover .hover_wrap,
.panel_list > li:hover .hover_wrap.gravure,
.panel_list > li:hover .hover_wrap.comics,
.panel_list > li:hover .hover_wrap.title,
.panel_list > li:hover .hover_wrap.media,
.panel_list > li:hover .hover_wrap.official{background-color:transparent;}
.hover_wrap > p{
	display:none;
}
.hover_wrap > ul li{
	display:block;
	width:100%;
	height:28px;
	margin:6px 0 0 0;
	font-size:11px;
	line-height:28px;
	border:none;
	background-color:#000;
}
.hover_wrap > p + ul li{
	width:100%;
	margin:6px 0 0 0;
}
.hover_wrap > ul li.sp{
	display:block;
}



}