.listTypeJ{
margin-bottom:30px;
}
.listTypeJ ul{
	list-style-type:none;
}
.listTypeJ ul li{
float:left;
margin:2px 2px 20px;
overflow:hidden;
position:relative;
border-radius:3px;
overflow:hidden;

width:288px;
height:297px;

}

.listTypeJ ul li a{
}
.listTypeJ ul li a span{
}

.listTypeJ ul li a span img{
	display:block;
}

.listTypeJ ul li.tatenaga a span img{
	width:100%;
	height:auto;
}
.listTypeJ ul li.yokonaga a span img{
	width:auto;
	height:100%;
}
.listTypeJ ul li.square a span img{
    height: 100%;
    width: auto;
}



.listTypeJ ul li .topBox{
width:100%;
color:#ffffff;
background-color:transparent;
position:absolute;
top:0;
left:0;
text-align:left;
}
.listTypeJ ul li .topBox img{
	display:block;
	float:right;
	margin:3px;
}
.listTypeJ ul li a:hover .topBox{
	display:none;
}
.listTypeJ ul li .topBox img.today{
	float:left;
}
.listTypeJ ul li .bottomBox{
max-width:100%;
color:#d1d1d1;
background-color:rgba(7,23,56,.8);
position:absolute;
bottom:0;
left:0;
display:inline-block;
border-top-right-radius:3px;
/*
text-shadow:1px 1px 0px rgba(0,0,0,.7);
*/
}

.listTypeJ ul li .iconBox{
width:100%;
color:#ffffff;
background-color:rgba(255,255,255,.8);
position:absolute;
top:0;
left:0;
display:none;
text-align:left;
}
.listTypeJ ul li a:hover span img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter:grayscale();
}
.listTypeJ ul li a:hover .iconBox{
background-color:rgba(7,27,56,.4);
display:block;
}
.listTypeJ ul li .iconBox{
}
.listTypeJ ul li .iconBox .type,
.listTypeJ ul li .iconBox .content{
	display:block;
padding:2px 4px;
}
.listTypeJ ul li .iconBox .type{
position:absolute;
bottom:0;
width:95%;
width:calc(100% - 8px);
}

.listTypeJ ul li .iconBox .content > span{
	display:inline-block;
	width:45%;
	width:calc(50% - 3px);
}

#ranking .listTypeJ ul#ranking li.rankbox1{
border:1px solid rgba(142,130,82,1);
}
#ranking .listTypeJ ul#ranking li.rankbox2{
border:1px solid rgba(146,145,141,1);
}
#ranking .listTypeJ ul#ranking li.rankbox3{
border:1px solid rgba(140,98,80,1);
}
#ranking .listTypeJ ul#ranking li.rankbox1 .iconBox,
#ranking .listTypeJ ul#ranking li.rankbox1 .bottomBox{
background-color:rgba(142,130,82,.8);
}
#ranking .listTypeJ ul#ranking li.rankbox2 .iconBox,
#ranking .listTypeJ ul#ranking li.rankbox2 .bottomBox{
background-color:rgba(146,145,141,.8);
}
#ranking .listTypeJ ul#ranking li.rankbox3 .iconBox,
#ranking .listTypeJ ul#ranking li.rankbox3 .bottomBox{
background-color:rgba(140,98,80,.8);
}
#ranking .listTypeJ ul#ranking li.rankbox1 .bottomBox p,
#ranking .listTypeJ ul#ranking li.rankbox1 .bottomBox h3{
color:#ffffff;
text-shadow:1px 1px 1px #423407;
font-size:90%;
}
#ranking .listTypeJ ul#ranking li.rankbox2 .bottomBox p,
#ranking .listTypeJ ul#ranking li.rankbox2 .bottomBox h3{
color:#ffffff;
text-shadow:1px 1px 1px #333333;
font-size:90%;
}
#ranking .listTypeJ ul#ranking li.rankbox3 .bottomBox p,
#ranking .listTypeJ ul#ranking li.rankbox3 .bottomBox h3{
color:#ffffff;
text-shadow:1px 1px 1px #442C22;
font-size:90%;
}

.listTypeJ ul li a:hover .bottomBox{
display:none;
}
.listTypeJ ul li .bottomBox h3{
padding:4px;
padding-bottom:0px;
font-size:12px;
font-weight:normal;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.listTypeJ ul li .bottomBox h3 img{
display:inline-block;
margin:0px 2px;
}
.listTypeJ ul li .bottomBox p{
padding:4px;
padding-top:0px;
font-size:11px;
font-weight:normal;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.listTypeJ ul li .bottomBox h4{
padding:4px;
padding-top:0px;
font-size:14px;
font-weight:bold;
text-align:center;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:#ffffff;
}
.listTypeJ ul li .bottomBox .selfComments{
display:none;
}
.listTypeJ ul li .bottomBox span{
display:none;
}
.listTypeJ ul li .bottomBox i{
    font-size: 150%;
    opacity: 0.5;
    position: absolute;
    right: 5px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    top: -30px;
}


#schedule .listTypeJ ul li .bottomBox p{
padding:0px;
}

#schedule .listTypeJ ul li .bottomBox,
#realtime .listTypeJ ul li .bottomBox{
background-color:transparent;
display:block;
}
#schedule .listTypeJ ul li .bottomBox h4{
color:#000000;
font-size:16px;
font-weight:bold;
}
#schedule .listTypeJ ul li .bottomBox .icon2 p,
#realtime .listTypeJ ul li .bottomBox .icon2 p{
display:block;
text-align:center;
font-size:14px;
font-weight:bold;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#schedule .listTypeJ ul li a .bottomBox,
#realtime .listTypeJ ul li a .bottomBox{
    background-color: rgba(7, 23, 56, 0.8);
    color: #d1d1d1;
}
#schedule .listTypeJ ul li a:hover .bottomBox,
#realtime .listTypeJ ul li a:hover .bottomBox{
display:none;
}
#schedule .listTypeJ ul li a:hover .bottomBox h3,
#realtime .listTypeJ ul li a:hover .bottomBox h3{
display:block;
}
#schedule .listTypeJ ul li a:hover .bottomBox h4{
display:block;
font-size:11px;
font-weight:normal;
text-shadow:none;
color:rgba(255,255,255,1);
}

#schedule .listTypeJ ul li a:hover .bottomBox p,
#realtime .listTypeJ ul li a:hover .bottomBox p{
display:block;
padding:0px;
}
#schedule .listTypeJ ul li a:hover .bottomBox .selfComments,
#realtime .listTypeJ ul li a:hover .bottomBox .selfComments{
display:none;
}
#schedule .listTypeJ ul li a:hover .bottomBox span,
#realtime .listTypeJ ul li a:hover .bottomBox span{
display:none;
}
#schedule .listTypeJ ul li a:hover .bottomBox .icon2 p,
#realtime .listTypeJ ul li a:hover .bottomBox .icon2 p{
display:block;
text-align:center;
padding:4px;
padding-top:0px;
font-size:11px;
font-weight:normal;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:rgba(255,255,255,1);
text-shadow:none;
}

#schedule .listTypeJ ul li .iconBox,
#realtime .listTypeJ ul li .iconBox{
width:100%;
color:#ffffff;
background-color:rgba(255,255,255,.7);
position:absolute;
top:0;
left:0;
display:none;
text-align:left;
}
#schedule .listTypeJ ul li a:hover .iconBox,
#realtime .listTypeJ ul li a:hover .iconBox{
background-color:rgba(7, 23, 56, 0.4);
display:block;
}
#schedule .listTypeJ ul li .iconBox,
#realtime .listTypeJ ul li .iconBox{
}
#schedule .listTypeJ ul li .iconBox .type,
#schedule .listTypeJ ul li .iconBox .content,
#realtime .listTypeJ ul li .iconBox .type,
#realtime .listTypeJ ul li .iconBox .content{
	display:block;
padding-top:2px;
padding-left:4px;
}

#layout ul li div span.type span span{
/*    border: 1px solid rgba(255,255,255,.8);*/

	background-color:#0E3A57;
	background-image: -moz-linear-gradient(#0E3A57, #0E3A57); 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0E3A57), to(#0E3A57));	
	background-image: -webkit-linear-gradient(#0E3A57, #0E3A57);	
	background-image: -o-linear-gradient(#0E3A57, #0E3A57);
	background-image: -ms-linear-gradient(#0E3A57, #0E3A57);
	background-image: linear-gradient(#0E3A57, #0E3A57);
/*
	text-shadow:0px 1px 0px rgba(0,0,0,.5);
*/
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
    margin: 2px 0;

    display: block;
    padding: 3px;
	text-align:center;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

.icontype + .icon2 span span,
span.content span span{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/*
	border: 1px solid rgba(255,255,255,.8);
*/
	background-color:#7D7D7D;
	background-image: -moz-linear-gradient(#7D7D7D, #7D7D7D); 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#7D7D7D), to(#7D7D7D));	
	background-image: -webkit-linear-gradient(#7D7D7D, #7D7D7D);	
	background-image: -o-linear-gradient(#7D7D7D, #7D7D7D);
	background-image: -ms-linear-gradient(#7D7D7D, #7D7D7D);
	background-image: linear-gradient(#7D7D7D, #7D7D7D);
/*
	text-shadow:0px 1px 0px rgba(0,0,0,.5);
*/
    border-radius: 3px;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.5;
    margin:2px 0;
    padding: 3px;
    display: block;
	text-align:center;
}
.listTypeJ ul li .bottomBox p.newface{
	font-size:12px;
	padding:4px;
	font-weight:bold;
}

.jidoriPower{
text-align:right;
padding:3px;
}
.jidoriPower a{
padding:5px;
font-size:10px;
font-family:"arial", sans-serif;
font-weight:bold;
font-style:italic;

box-shadow:0px 1px 1px rgba(0,0,0,.2) inset;
background-color:rgba(0,0,0,.3);
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;

}

@media screen and (max-width: 667px) {
#gravure .listTypeJ ul li ,
#schedule2 .listTypeJ ul li ,
#newface .listTypeJ ul li ,
#ranking .listTypeJ ul li ,
#realtime .listTypeJ ul li ,
#schedule .listTypeJ ul li ,
#gals .listTypeJ ul li {
    height: 69vw;
    width: 46vw;
    width: calc(50% - 6px);
}
#home .listTypeJ ul li {
 /*
    height: 60vw;
    width: 40vw;
    width: calc(40% - 6px);
*/}
.listTypeJ ul li a:hover .iconBox{
background-color:static;
display:none;
}
.listTypeJ ul li a:hover .bottomBox{
	display:block;
}
.listTypeJ ul li a:hover .topBox{
	display:block;
}
#schedule .listTypeJ ul li a .bottomBox, #realtime .listTypeJ ul li a .bottomBox{
	color:#000000;
	}
}