@charset "euc-jp";

/* -----------------------------------------------------------
	Site Name: Tochigi TV
	Author: Yamazen Communications co.,ltd.
	Comment: program-pages structure
	Since2012

Index
	01.structure
	02.pageheader 
	03.topics list
	04.message
	05.related contents
	06.list

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


/*　01.structure  
----------------------------------------------------------- */
dl#article dt#pageheader                 {width:550px;}
dl#article dt#pageheader p#headline      {width:430px;}/*pageheader-85px-35px*/
dl#article dt#pageheader h3#topicsbtn,
dl#article dt#pageheader ul#topicslist   {width:515px;}
dl#article dt#pageheader ul#topicslist li{width:212px;}
@media only screen and (max-width: 640px){
	dl#article dt#pageheader,
	dl#article dt#pageheader p#headline,
	dl#article dt#pageheader h3#topicsbtn,
	dl#article dt#pageheader ul#topicslist,
	dl#article dt#pageheader ul#topicslist li{width:auto;}
}


/*　02.pageheader  
----------------------------------------------------------- */
dl#article dt#pageheader{
	float:none;
	margin:0 0 10px;
	padding:0 0 20px;
	text-align:center;
}




/*　03.topics list 
----------------------------------------------------------- */
/*headline*/
p#headline{
	height:1.5em;
	margin:0 auto 5px;
	padding:0 0 0 85px;
	line-height:1.8;
	background:url(../../topics/images/ttl_headline.png) no-repeat left 0.4em;
}


/*topicsbtn*/
dl#article dt#pageheader h3#topicsbtn{
	height:42px;
	margin:0 auto;
	line-height:1.8;
	text-indent:-999999px;
	background:url(../../program/images/btn_topicslist.png) no-repeat left top;
}

dl#article dt#pageheader h3#topicsbtn.shutout{
	background:url(../../program/images/btn_topicslist.png) no-repeat left top;
}
dl#article dt#pageheader h3#topicsbtn:hover,
dl#article dt#pageheader h3#topicsbtn.shut{
	background:url(../../program/images/btn_topicslist_on.png) no-repeat left top;
}

@media only screen and (max-width: 640px){
	dl#article dt#pageheader h3#topicsbtn{
		background:url(../../program/images/btn_topicslist_sp.png) no-repeat left top;
	}

	dl#article dt#pageheader h3#topicsbtn.shutout{
		background:url(../../program/images/btn_topicslist_sp.png) no-repeat left top;
	}
	dl#article dt#pageheader h3#topicsbtn:hover,
	dl#article dt#pageheader h3#topicsbtn.shut{
		background:url(../../program/images/btn_topicslist_on_sp.png) no-repeat left top;
	}	
}


/*topicslist*/
dl#article dt#pageheader ul#topicslist{
	margin:0 auto;
	text-align:left;
	line-height:1.8;
	letter-spacing:-0.4em;
}

dl#article dt#pageheader ul#topicslist li{
	display:inline-block;
	*display:inline;
	padding:5px 15px 5px 30px;
	text-align:left;
	vertical-align:top;
	letter-spacing:normal;
	border-top:1px #cccccc dotted;
	background:url(../images_new/common/arrow01.gif) no-repeat 15px 0.75em;
	zoom:1;
}
dl#article dt#pageheader ul#topicslist li img{
	float:right;
	margin-left:10px;
}




/* 04.message
----------------------------------------------------------- */
/*title*/
div#contents h3.subTitle {
	clear:both;
	width:537px;
	margin:5px 0px 10px 0px;
	padding:10px 0 10px 10px;
	border:1px #999999 solid;
	border-left:3px #999999 solid;
}
@media only screen and (max-width: 640px){
	div#contents h3.subTitle {width: auto;}
}

/*message*/
div#contents div#message {
	clear:both;
	width:550px;
	margin:20px 0 0 0;
	padding:0;
}
div#contents div#message ul {
	width:550px;
	margin:0 0 10px 0;
	padding:0;
}
div#contents div#message ul li {
	width:505px;
	margin:0;
	padding:0 0 5px 45px;
	background:url(../../program/images/icon_message.gif) no-repeat left 5px;
	border-bottom:1px #cccccc dotted;
}

div#contents div#message p {
	margin:20px 0 0 0;
	padding:0;
	text-align:center;
}
@media only screen and (max-width: 640px){
	div#contents div#message,
	div#contents div#message ul,
	div#contents div#message ul li {
		width:auto;
	}
}

/* Navi Link */
div#contents div#message ul.naviLink {
	width:95%;
}
div#contents div#message ul.naviLink li {
	display:inline;
	margin: 0 5px 0 0;
	padding:3px 5px 3px 0;
	border-right:1px #cccccc solid;
	background:none;
	border-bottom:none;
}
div#contents div#message ul.naviLink li.lastchild {
	display:block;
	margin:0;
	padding:0 0 0 10px;
	border:none;
	background:url(../images/arrow.gif) no-repeat left 0.5em;
}


/*CommentInputArea*/
div#contents div#CommentInputArea{
	width:548px;
	min-height:190px;
	*height:190px;
	margin:10px auto 0px auto;
	padding:5px 0px;
	text-align:center;
	border: 1px solid #cccccc;
	background: url(../../researchboard/images/comment_bg.gif) repeat-x left top;
}
div#contents div#CommentInputArea h4{
	width:520px;
	margin:10px auto 0px auto;
	color:#006600;
	text-align:left;
}

div#contents div#CommentInputArea textarea{
	width:520px;
	height:100px;
	margin:5px auto 0px auto;
}

div#contents div#CommentInputArea p{
	width:520px;
	margin:5px auto 0px auto;
	text-align:left;
}

div#contents div#CommentInputArea ul.txtLink {
	width:520px;
	margin:0 auto 10px;
}
div#contents div#CommentInputArea ul.txtLink li{
	width:518px;
	padding-left:10px;
	text-align:left;
	background:url(../images/arrow.gif) no-repeat left 0.5em;
}

@media only screen and (max-width: 640px){
	div#contents div#CommentInputArea{padding: 10px;}
	div#contents div#CommentInputArea,
	div#contents div#CommentInputArea h4{
		width:auto;
	}

	div#contents div#CommentInputArea textarea{
		width:100%;
	}

	div#contents div#CommentInputArea p,
	div#contents div#CommentInputArea ul.txtLink,
	div#contents div#CommentInputArea ul.txtLink li{
		width:auto;
	}
}


/* 05.sidemenu/relatedcontents
------------------------------------------------------------*/
ul#relatedcontents{
	display:block;
	margin:15px auto;
	padding:50px 0 0 0;
	border:1px #aaaaaa solid;
	background:#ffffff url(/program/images/ttl_relatedcontents.png) no-repeat center top;
	border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;/* Safari,Google Chrome用 */
	-moz-border-radius: 5px;	/* Firefox用 */
	box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.3);　      /* CSS3草案 */ 
	-moz-box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.3);　 /* Firefox用 */  
    -webkit-box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.3);/* Safari,Google Chrome用 */  
}


ul#relatedcontents li{
	margin:6px auto 0;
	padding:0 15px 6px 25px;
	border-bottom:1px #cccccc dotted;
	background:url(../images_new/common/arrow01.gif) no-repeat 10px 0.5em;
}



/* 06.list
------------------------------------------------------------*/
ul#programlink{
	width:100%;
	padding:5px 0;
	text-align:left;
	letter-spacing:-0.4em;
	overflow:hidden;
}
ul#programlink li{
	display:inline-block;
	*display:inline;
	margin:0 10px 10px 0;
	padding:4px 8px 3px;
	vertical-align:top;
	letter-spacing:normal;
	line-height:1.4;
	/*background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#ebebeb 50%,
		#dbdbdb 50%,
		#b5b5b5);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		color-stop(0.50, #ebebeb),
		color-stop(0.50, #dbdbdb),
		to(#b5b5b5));*/
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #cccccc;
	box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.3);
	-moz-box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.3); 
    -webkit-box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.3); 
	zoom:1;
}

/* slideshow
------------------------------------------------------------*/
#mainvisual{
	position: relative;
	clear:both;
	margin: 0 0 30px;
	padding:30px 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	background: #000000;
	overflow: hidden;
}
#headline{
	height:40px;
	background:url(../images_new/top/headline_bk.gif) no-repeat left top;
}
#headline p{
	width:848px;
	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 30px;
		max-width:640px;
		height: inherit;
		padding:30px 0;
		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%;
		padding:0 30px 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;}
}

/* programList
------------------------------------------------------------*/
.programList{
	width: 985px;
	margin: 0 -25px 0 0;
	letter-spacing: -0.4em;
	overflow: hidden;
}
.programList li{
	display: inline-block;
	width:172px;
	text-align:center;
	margin:0 25px 25px 0;
	padding:0;
	letter-spacing: normal;
	vertical-align: top;
}
.programList li div{
	border: 1px #cccccc solid;	
}
.programList li span{
	display:block;
	height:120px;
	margin:5px auto 0 auto;
}

.programList li h4{
	width:160px;
	margin:5px;
	text-align:left;
	font-weight:bold;
}

.programList li p{
	margin:0px 5px 5px;
	text-align:left;
}
.listAll{
	margin: 0 0 30px;
	text-align: right;
}
.listAll a{
	padding: 0 0 0 15px;
	background: url(../images_new/common/arrow01.gif) 0 center no-repeat;
}

@media only screen and (max-width: 640px){
	.programList{
		width: auto;
		margin: 0;
	}
	.programList li{
		display: block;
		width: auto;
		margin:0 0 25px;
	}	
}