@charset "utf-8";

/* -----------------------------------------------------------
	Site Name: Tochigi TV
	Author: Yamazen Communications co.,ltd.
	Comment: top
	Since2012.3
----------------------------------------------------------- */
	
/*Index
	1.structure
	2.mainvisual
	3.banner
	4.program and news
	5.infoarea
	6.rightarea
	
----------------------------------------------------------- */


*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}


/*1.structure
----------------------------------------------------------------------------------*/
#contents{
	clear:both;
	margin:10px auto 0;
}

.box{
	margin: 0 0 30px;
	border: 3px solid #0096ff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 5px 5px 10px -5px #333;
	box-shadow: 5px 5px 10px -5px #333;
	overflow: hidden;
}
.box h2{
	height: 35px;
	padding: 8px 0 0 10px;
	background: #0096ff url(../images_new/top/bg-boxttl.png) no-repeat left top;
}
.box h2 a{
	float: right;
	margin: -5px 0 0;
}
@media only screen and (max-width: 640px){
	.box h2 a{display: none;}
}

/*2.mainvisual
----------------------------------------------------------------------------------*/
#mainvisual{
	position: relative;
	clear:both;
	padding-bottom:30px;
	background:url(../images_new/top/mainvisual_bk.gif) no-repeat left bottom #000000;
	overflow: hidden;
}
#headline{
	height:40px;
	background:url(../images_new/top/headline_bk.gif) no-repeat left top;
}
#headline p{
	width:615px;
	margin-left:100px;
	line-height:40px;
}
#headline p a,
#headline p a:link {color:#ffffff;}
#headline p a:hover{color:#ff0099;}
#slider {
	position:relative;
	float:left;
	width:700px;
	height: 390px;
	margin-left:15px;
	overflow: hidden;
}

@media only screen and (max-width: 640px){
	#mainvisual{
		overflow:hidden;
		margin:0 auto;
		max-width:640px;
		padding:0 0 30px;
		background:#000000;
		border-radius:30px;
	}
	#headline{
		height:40px;
		background:url(../../../common/images_new/top/headline_bk.gif) no-repeat left top;
	}
	#headline p{
		width: 100%;
		margin: 0;
		padding:0 10px 0 100px;
		line-height:40px;
	}
	#headline p a,
	#headline p a:link {color:#ffffff;}
	#headline p a:hover{color:#ff0099;}
	#slider {
		width: 100%;
		height: inherit;
		margin-left: 0;
		padding: 0 10px;
	}
}



/* gloss */
#gloss{
	display: none;
	position:absolute;
	left:15px;
	top:40px;
	width:700px;
	height:390px;
	background:url(../images_new/top/gloss.png) no-repeat top right;
	z-index:50;
}



/* carousel */
h2.carousel_ttl{
	float:right;
	width:180px;
	height:23px;
	margin:0 15px 0 0;
	*margin-right:7px;
	padding-top:7px;
	text-indent:-999999px;
	text-align:center;
	background:url(../images_new/top/carousel_ttl.gif) no-repeat center top;
}

div.carousel{
	width:220px;
	height:390px!important;
	float:right;
	margin-right:12px;
}
div.carousel .bx-wrapper{height: 390px !important;}
div.carousel .bx-wrapper .bx-viewport{height: 390px !important;overflow: hidden;}
div.carousel .bx-wrapper .bx-controls-direction a{
	width: 32px;
	height: 19px;
	top: inherit;
	left: 50%;
	margin-top: 0;
	margin-left: -16px;
	background:url(../images_new/top/carousel-arrows.png) no-repeat center top;
	z-index: 500;
}
div.carousel .bx-wrapper .bx-controls-direction a:hover{opacity: 0.5;}
div.carousel .bx-wrapper .bx-controls-direction .bx-prev{
	top: -24px;
	background-position: 0 0;
}
div.carousel .bx-wrapper .bx-controls-direction .bx-next{
	bottom: -24px;
	background-position: 0 -19px;
}
@media only screen and (max-width: 640px){
	#gloss,
	.carousel{display: none;}
}



/*3.banner
----------------------------------------------------------------------------------*/
.banner{clear:both;width: 100%;margin:20px 0;background: #0096ff;}
.banner ul{width:960px;margin: 0 auto;overflow:hidden;}
.banner ul li{float:left;margin:10px 0 10px 15px;line-height: 1;}
.banner ul li:first-child{margin:10px 0;}
@media only screen and (max-width: 640px){
	.banner{padding: 10px 0 0;}
	.banner ul{width:auto;padding: 0 8px;}
	.banner ul li{width: 33.333%;margin:0 0 5px;padding: 0 2px;text-align: center;}
	.banner ul li:first-child{margin:0 0 5px;}
}

/* movie
----------------------------------------------------------------------------------*/
#movie ul{
	padding: 20px 0;
	overflow: hidden;
	letter-spacing:-0.4em;
}
#movie ul li{
	display:inline-block;
	*display:inline;
	width: 25%;
	padding: 0 20px;
	vertical-align:top;
	letter-spacing:normal;
	zoom:1;
}
#movie ul li span{
	display: block;
	padding-left: 10px;
	background: url(../images_new/common/arrow02.gif) 0 8px no-repeat;
}
@media only screen and (max-width: 640px){
	#movie ul li{
		width: 50%;
		padding: 0 5px;
	}
}

/*4.program and news
----------------------------------------------------------------------------------*/

/* TVprograms */
#TVprograms{
	float: left;
	width: 630px;
}
#TVprograms ul{
	padding: 10px;
}
#TVprograms ul li{
	float: left;
	width: 20%;
	padding: 10px;
}
@media only screen and (max-width: 640px){
	#TVprograms{
		float: none;
		width: auto;
	}
	#TVprograms ul{
		letter-spacing: -0.4em;
	}
	#TVprograms ul li{
		float: none;
		display: inline-block;
		width: 33.333%;
		padding: 5px;
		letter-spacing: normal;
		vertical-align: top;
		text-align: center;
	}
}
/* tooltip */
.tip {
	display:none;
	position:absolute;
	width:268px;
	padding-top:37px;
	overflow:hidden;
	z-index:1000;
	background:#fff;}
	
.tipMid {background:#fff; padding: 0 25px 20px 25px;}
.tipBtm {background:#fff; height: 32px;}

/* onAir */
#onAir{
	float:right;
	width: 300px;
}
#onAir ul li{
	margin:0 0 0 16px;
	padding:3px 0;
	border-bottom:1px #c8c8c8 dotted;
}
#onAir ul li.lastchild{border:none;}

@media only screen and (max-width: 640px){
	#onAir{
		float: none;
		width: auto;
	}
}

/* news */
#news{
	float:left;
	width: 300px;
	margin-right: 30px;
}

#news ul#tab{
	
}
#news ul#tab li{
	float:left;
	width:25%;
	text-align:center;
	background:#e1ffff;
}
#news ul#tab li a{
	display:block;
	padding:3px 0;
}

.lists li{
	overflow:hidden;
	margin-left:3px;
	padding:5px 15px;
	border-bottom:1px #c8c8c8 dotted;
}
.lists li span{
	float:right;
	display:block;
	width:100px;
	margin-left:15px;
	text-align:center;
}
.lists li a{
	display:block;
	padding-left:10px;
	background:url(../images_new/common/arrow02.gif) no-repeat left 7px;
}
.lists li.color{background:#f0ffff;}
.lists li.lastchild{border:none;}

@media only screen and (max-width: 640px){
	#news{
		float: none;
		width: auto;
		margin: 0 0 30px;
	}
}

/* info */
#info{
	float:left;
	width: 300px;
	margin-right: 30px;
}
@media only screen and (max-width: 640px){
	#info{
		float: none;
		width: auto;
		margin: 0;
	}
}

/* blog */
#blog{
	float:left;
	width: 300px;
}
@media only screen and (max-width: 640px){
	#blog{
		float: none;
		width: auto;
	}
}

/*blogname*/
#blog #update ul li span.ttl{
	float:none;
	display:block;
	width:auto;
	margin:0 15px 0 0;
	text-align:left;
}


/*link-list*/
.link-list{
	margin: -20px 0 30px;
}
.link-list li{
	padding-left: 10px;
	background:url(../images_new/common/arrow02.gif) no-repeat left 7px;
}



/* widget */
#collect,
#twitter,
#facebook{
	float: left;
	width: 300px;
}
#collect,
#twitter{
	margin-right: 30px;
}
@media only screen and (max-width: 640px){
	#collect,
	#twitter,
	#facebook{
		float: none;
		width: auto;
		margin-right: 0;
	}
}

/* blog-contents
----------------------------------------------------------------------------------*/
#blog-contents{
	margin: 0 -15px;
	letter-spacing: -0.4em;
}
#blog-contents .blog-box{
	display: inline-block;
	width: 33.333%;
	padding: 0 15px;
	letter-spacing: normal;
	vertical-align: top;
}
#blog-contents .blog-box h3{
	padding:0;
	font-size: 116.66%;
	font-weight:bold;
	text-align: center;
}
#blog-contents .blog-box h3 a{
	display:block;
	padding: 10px 0;
	color:white;
	background:#0096ff;
}
#blog-contents .blog-box h3 a:hover{
	background:#ff6600;
}

#blog-contents .lists{
	background: #1e5799;
	background: -moz-linear-gradient(top,  #1e5799 0%, #ebebeb 0%, #ffffff 30%);
	background: -webkit-linear-gradient(top,  #1e5799 0%,#ebebeb 0%,#ffffff 30%);
	background: linear-gradient(to bottom,  #1e5799 0%,#ebebeb 0%,#ffffff 30%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ffffff',GradientType=0 );
}

@media only screen and (max-width: 640px){
	#blog-contents{
		margin: 0;
	}
	#blog-contents .blog-box{
		display: block;
		width: auto;
		padding: 0;
	}
}

/* footer */
/*pagetop*/
#pageTop a{
	margin-right:0;
}