@charset "utf-8";

/*============================
       DMM Style Sheet
==============================*/


/* //////////////////////////////////////////////////////////////////////// [ ▼DMM内汎用  ] */


/* ========================= .rate-ster */

.review-rate {
display: inline-block;
width: 100px;
height: 20px;
margin: 0 6px 0 0;
background: url(http://p.dmm.co.jp/p/sp/common/sprite-review.png) no-repeat scroll 0 0;
-webkit-background-size:100px 275px;
background-size:100px 275px;
vertical-align: -4px;
background-position: 0 -3px;
}
.review-rate.rate-00 {background-position: 0 -3px;}
.review-rate.rate-05 {background-position: 0 -28px;}
.review-rate.rate-10 {background-position: 0 -53px;}
.review-rate.rate-15 {background-position: 0 -78px;}
.review-rate.rate-20 {background-position: 0 -103px;}
.review-rate.rate-25 {background-position: 0 -128px;}
.review-rate.rate-30 {background-position: 0 -153px;}
.review-rate.rate-35 {background-position: 0 -178px;}
.review-rate.rate-40 {background-position: 0 -203px;}
.review-rate.rate-45 {background-position: 0 -228px;}
.review-rate.rate-50 {background-position: 0 -253px;}


/* //////////////////////////////////////////////////////////////////////// [ ▲DMM内汎用  ] */


/* //////////////////////////////////////////////////////////////////////// [ ▼.litevideo  ] */

/* ========================= .box-movie */
.litevideo .box-movie{
position: relative;
margin: 0;
padding: 0;
text-align: center;
background: #222;
border: 8px solid #212121;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.litevideo .box-movie .parts-thum img{
max-width: 320px;
vertical-align: bottom;
}

.litevideo .box-movie button.btn-play{
display: block;
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
color: rgba(0,0,0,0);
border: none;
background: url(http://p.dmm.co.jp/p/sp/litevideo/common/btn_play.png) no-repeat center center rgba(0,0,0,0.3);
background-size: 83px 83px;
-webkit-background-size: 83px 83px;
}
.litevideo .box-movie button.btn-play:hover{
opacity: 0.8;
}

.litevideo .box-movie .parts-info{
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
background: rgba(0,0,0,0.8);
text-align: left;
}
.litevideo .box-movie .parts-info > div{
position: absolute;
top:50%;
left: 50%;
width: 304px;
height: 175px;
margin: -87px -152px;
padding: 12px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.litevideo .box-movie .parts-info .package{
float: left;
width: 87px;
position: relative;
margin: 0;
text-align: center;
background: #fff;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
border-radius: 3px;
}
.litevideo .box-movie .parts-info .package > a{
display: block;
width: 87px;
height: 150px;
}
.litevideo .box-movie .parts-info .package p{
position: absolute;
margin: 6px 6px 3px;
}
.litevideo .box-movie .parts-info .package span{
display: table-cell;
width: 87px;
height: 102px;
vertical-align: middle;
text-align: center;
}
.litevideo .box-movie .parts-info .package .btn-replay{
display:block;
position: absolute;
bottom: 3px;
}

.litevideo .box-movie .parts-info .overview{
margin-left: 100px;
color: #fff;
}
.litevideo .box-movie .parts-info .overview .ttl{
font-size: 16px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;	
}
.litevideo .box-movie .parts-info .overview .count{
	font-size: 12px;
}
.litevideo .box-movie .parts-info .overview .count span{
	font-size: 14px;
	font-weight: bold;
}
.litevideo .box-movie .parts-info .overview ul{
	margin: 15px 0 0;
}
.litevideo .box-movie .parts-info .overview li{
float: left;
width: 90px;
margin: -1px -1px 0 0;
line-height: 1.3;
background: #fafafa;
font-size: 12px;
border: 1px solid #ddd;
box-shadow: inset 1px 1px #fff;
-webkit-box-shadow: inset 1px 1px #fff;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.litevideo .box-movie .parts-info .overview li a{
display: block;
position: relative;
padding: 6px 6px 4px;
color: #212121;
}
.litevideo .box-movie .parts-info .overview li a:after{
position: absolute;
top:0;
right: 5px;
width: 8px;
height: 100%;
content: "";
background:url(http://p.dmm.co.jp/p/sp/common/ico/top/ico_arrow.png) no-repeat right center;
background-size:8px 10px;
-webkit-background-size:8px 10px;
}
.litevideo .box-movie .parts-info .overview li p{
color: #c00;
font-size: 10px;
}
.litevideo .box-movie .parts-info .overview li p span{
font-size: 14px;
font-weight: bold;
}



/* ========================= .area-tabcontents */

.litevideo .area-tabcontents .box-nav{
background: #646464;
padding: 12px;
}
.litevideo .area-tabcontents .box-nav ul{
border: 1px solid #5a5a5a;
box-shadow: 0px 1px rgba(255,255,255,0.2);
-webkit-box-shadow: 0px 1px rgba(255,255,255,0.2);
}
.litevideo .area-tabcontents .box-nav ul li{
float: left;
width: 33%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: bold;
box-sizing: border-box;
-webkit-box-sizing: border-box;
background: #787878;
border-right: 1px solid #5a5a5a;
box-shadow: inset 0px 1px rgba(255,255,255,0.2);
-webkit-box-shadow: inset 0px 1px rgba(255,255,255,0.2);
}
.litevideo .area-tabcontents .box-nav ul li:last-child{
width: 34%;
border-right: none;
}
.litevideo .area-tabcontents .box-nav ul li.on{
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.7);
-webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.7);
background: linear-gradient(to top, #5a5a5a 0%, #2c2b2b 80%);
background: -webkit-linear-gradient(bottom, #5a5a5a 0%, #2c2b2b 80%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #5a5a5a),  color-stop(80%, #2c2b2b));
}
.litevideo .area-tabcontents .box-nav ul li a{
display: block;
color: #fff;
text-shadow:-1px -1px 0 rgba(0,0,0,0.7);
}
.litevideo .area-tabcontents .box-nav ul:after{
display: block;
content: "";
clear: both;
}



/* ========================= .wrap-item */

.litevideo .wrap-item{
margin: 11px 0;
padding: 0 11px;
}
@media screen and (max-width: 480px){
	.litevideo .wrap-item{
	width: 300px;
	margin: 11px auto;
	padding: 0;
	}
}
.litevideo .wrap-item .box-item ul:after{
display: block;
content: "";
clear: both;
}
.litevideo .wrap-item .box-item li{
float: left;
height: 152px;
margin: 6px 5px;
background: #fff;
border-radius: 4px;
border:1px solid #ddd;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.litevideo .wrap-item .box-item li a{
display: block;
}
.litevideo .wrap-item .box-item li div{
padding: 6px;	
}
.litevideo .wrap-item .box-item li .img{
display: table-cell;
width: 75px;
height: 100px;
vertical-align: middle;
text-align: center;
}
.litevideo .wrap-item .box-item li p{
margin: 6px 0 0;
font-size: 10px;	
}
.litevideo .wrap-item .box-item li a p{
color: #212121;
}
.litevideo .wrap-item .box-item li a p span{
font-weight: bold;
}



/* //////////////////////////////////////////////////////////////////////// [ ▲.litevideo  ] */