@charset "EUC-JP";

@import'/common/css/special.css';
@import'/common/css/special_recommend2.css';
@import'/etc/drama/common/css/template.css';

#beetv{
	margin: 0 auto;
	background:#ffffff;
}

#beetv img{
	vertical-align:bottom;
}


/*------------------

beetvHead

--------------------*/

#beetvHead{
	padding-bottom:20px;
	background:url("../img/beetv_head.png") no-repeat left top;
	height:270px;
	position:relative;
}

/*------------------

naviArea

--------------------*/

#beetv .naviArea{
	width: 713px;
	margin:0 auto10px;
	overflow:hidden;
	text-align:center;
	background:url("../img/beetv_navi_back.jpg") repeat left top;
	
	border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px; /* Safari,Chrome */
	border: 1px #000 solid;     /* 枠線の装飾 */
}

#beetv .naviArea li{
	display:inline;
	position: relative;
}

#beetv .naviArea li .new{
	position: absolute;
	top: 3px;
	right: 5px;
}

/*------------------

conArea + conBox

--------------------*/

#conArea{
	width:726px;
	margin-right:-11px;
	overflow:hidden;
	_zoom:1;
}

#conArea h1{
	margin:10px 0;
	clear: both;
}

#conArea .conBox{
	width:209px;
	padding:11px;
	float:left;
	margin:0px 11px 11px 0px;
	overflow:hidden;
	background:url("../img/conbox_bottom.png") left bottom no-repeat;
}

#conArea .empty{
	width:231px;
	float:left;
	margin:0px 11px 11px 0px;
	overflow:hidden;
}


#conArea .conBox h2{
	text-align:center;
	margin:-11px;
	margin-bottom:5px;
	padding-top:15px;
}

#conArea .v1 h2{
	background:url("../img/conbox_top_v1.png") left top no-repeat;
}

#conArea .v2 h2{
	background:url("../img/conbox_top_v2.png") left top no-repeat;
}

#conArea .v3 h2{
	background:url("../img/conbox_top_v3.png") left top no-repeat;
}



#conArea .conBox h2 img{
	padding:1px;
	border:1px solid #cccccc;
}

#conArea .conBox h3{
	text-align:center;
	margin-bottom:5px;
	height: 31px;
}

#conArea .conBox h3 a{
	font-weight:bold;
}

#conArea .conBox h3 .icon{
	margin: 0 0 2px 3px;
}

#conArea .leftArea{
	float:left;
	width:120px;
	font-size:11px;
	line-height: 1.4em;
}


#conArea .rightArea{
	float:right;
	width:83px;
}


#conArea .centerArea{
	background:url("../img/conbox_btn_back.png");
	border:1px solid #e7e7e7;
	padding:2px;
	margin: 3px 0 0 0;
}

#conArea .summary{
	margin-bottom:5px;
	font-size:11px;
	line-height: 1.4em;
}

#conArea .summary02{
	margin-bottom:5px;
	font-size:11px;
	line-height: 1.3em;
}

#conArea .centerArea p{
	background:#a6a6a6;
	text-align:center;
	color:#ffffff;
	font-weight:bold;
	font-size:11px;
	line-height: 1.2em;
	padding:2px 0 0 0;
}

#conArea .centerArea p .icon{
	padding: 0 0 2px 2px;
}


#conArea .centerArea ul{
	overflow:hidden;
	padding:2px;
	margin-left:30px;
}

#conArea .centerArea ul li{
	display:inline;
}

#conArea .centerArea .btn{
	padding: 4px 70px 2px;
}


#conArea .button{
	background:url("/genretop/harlequin/btn-base_pack.gif");
	height:59px;
	padding:4px;
	margin-bottom:10px;
}

#conArea .button li{
	margin:0 0 3px 0;
	text-align:center;
}

#conArea .button li:last-child{
	margin-bottom:0px;
}

#conArea .price{
	background:url("/genretop/harlequin/price-base_pack.gif") no-repeat;
	height:20px;
	padding-top:21px;
	font-size:12px;
	text-align:center;
}

#beetv .copy{
	margin: 10px 0 0 0;
	padding:5px;
	border-top:1px solid #cccccc;
	font-size: 10px;
	clear: both;
}

/*------------------

carousel slide設定

------------------*/

#carouselBox{
	background:#000000;
	width:500px;
	height:170px;
	position:absolute;
	left:196px;
	top:21px;
}

#carousel {
	width:500px;
	height:170px;
	background:#000000;
	/* margin:0px auto; */
	overflow:hidden;
	position:relative;
}

#slides {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:470px;
	margin-left:15px; /* button */
	height:170px;
	/*border:1px solid black;*/
}

/* remove the list styles, width : item width * total items */	
#slides ul {
	/*background:pink;*/
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;
	width:705px; /* item width * total items */
	overflow:hidden;
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
	width:235px;
	height:160px;
	float:left;
	background:#0d0d0d;
	/*margin-right:10px;*/
	text-align:center;
	padding: 10px 0 0 0;
}

#slides li img{
	padding: 0 20px;
	background: #000;
}

#slides li p{
	text-align:center;
	padding:3px 0 0 0;
	background:#fff;
	width:200px;
	height:27px;
	margin:5px auto 0;
}

#slides li p a{
	text-align:center;
	line-height: 1.1em;
}



/* Styling for prev and next buttons */
#buttons {
	width:500px;
	height:170px;
	position:absolute;
	top:0px;
	left:0;
	/*z-index:500;*/
}

#buttons a {
	display:block; 
	width:15px; 
	height:170px;
	text-indent:-999em;
	outline:0;
}


#buttons a#prev {
	background:url("../img/carousel_btn.png") 0px 0px no-repeat;
	/*background:red;*/
	position:absolute;
	top:0px;
	left:0px;
}

#buttons a#prev:hover {
	background:url("../img/carousel_btn.png") 0px 0px no-repeat;
}

#buttons a#next {
	background:url("../img/carousel_btn.png") -15px 0px no-repeat;
	/*background:black;*/
	position:absolute;
	top:0px;
	right:0px;
}

#buttons a#next:hover {
	background:url("../img/carousel_btn.png") -15px 0px no-repeat;
}

.clear {clear:both}

/*------------------

cmsList

------------------*/

#cmsList{
	width: 575px;
	padding-top: 5px;
}

/* リセット */
h2,h3,h4{
	margin:0px;
	padding:0px;
}

/* clearfix */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}