@charset "utf-8";

/* info_program.css */

/*-----------------------------------------------
 __wrapper
-----------------------------------------------*/

.row-btm {
	width: 100%;
	background-color: #72caf2;
}

.maincolumn {
	width: 90%;
	margin: 0 auto;
}

/*-----------------------------------------------
 __tab
-----------------------------------------------*/

.tabblock {
	overflow:hidden;
	padding: 1em 0 0 0;
}

.tabblock ul {
	margin: 0 0 0 0;
}

.tabblock ul:after {
	content: "."; 
  	display: block; 
  	height: 0; 
  	font-size:0;	
  	clear: both; 
  	visibility:hidden;
}

.tabblock li {
	background:#edecec;
	padding: 5px 25px;
	float: left;
	border-radius: 4px 4px 0px 0px;
	-moz-border-radius: 4px 4px 0px 0px;
	-webkit-border-radius: 4px 4px 0px 0px;
	width: 50%;
	height: 30px;
	text-align: center;
	font-weight: bold;
	font-size: 120%;
	position: relative;
}

.tabblock li:last-child:before {
	content: "";
	display: block;
	position: absolute;
	left: 10px;
	width: 20px;
	height: 20px;
	background: url(../../images/info_program/icon_program.png) no-repeat;
	background-size: contain;
}

.tabblock li.select {
	background: #fff;
	padding: 5px 10px;
}

.tabblock li.select h2 {
	font-weight: bold;
	font-size: 90%;
	background: url(../images/top/icon_nowonair.png) no-repeat left;
	background-size: contain;
	padding-left: 10px;
	text-align: center;
	margin: 2px 0 0 0;
}

.tabblock img {
	width: 70%;
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 10px 0;
}

#content dl {
	background: #fff;
	padding: 0 20px 20px 20px;
	border-radius: 0px 0px 4px 4px;
	-moz-border-radius: 0px 0px 4px 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
}

#content dl dt.current,
#content dl dd.current {
	font-weight: bold;
}

#content dl:after {
	content: "."; 
  	display: block; 
  	height: 0; 
  	font-size:0;	
  	clear: both; 
  	visibility:hidden;
}

#content dl dt {
	font-size: 95%;
	padding: 0.8em 0 0 0;
	color: #656666;
	width: 30%;
}

#content dl dd {
	text-align: left;
	padding: 0 0 0.8em 0;
}

.hides {
	display:none;
}

/*-----------------------------------------------
 __content
-----------------------------------------------*/

.maincolumn h3 {
	border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px 20px 20px 20px;
	-webkit-border-radius: 20px 20px 20px 20px;
	margin: 0 0 0.8em 0;
	//padding: 0.8em;
	text-align: center;
	color: #0074c1;
	//line-height: 1.3em;
	background: #fff;
}

.maincolumn h3:before {
	left: 0;
	width: 0;
	height: 0;
}

.topicsblock {
	background: #fff;
	padding: 20px;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;	
	margin-bottom: 20px;
}

.topicsblock h3 {
	display: block;
	color: #000;
	background: transparent;
	margin: 0 0 1em 0;
	padding: 0 0 0 35px;
	text-align: left;
}

.topicsblock h3:before {
	background: url(../images/info_program/icon_topics.png) no-repeat;
	background-size: contain;
	width: 25px;
	height: 30px;
	left: 0;
	top: -5px;
}

.topicsblock dl {
	margin-bottom: 0;
}

.topicsblock dl dt {
	font-size: 95%;
	color: #656666;
	padding: 0.8em 0 0 0;
}

.topicsblock dl dd {
	border-bottom: 1px dotted #221814;
	padding: 0 0 0.8em 0;
}

.topicsblock dl dd a {
	color: #e30081;
	font-weight: bold;
}

.visualblock ul {
}

.visualblock ul li {
	width: 45%;
	display: inline-block;
	*display: inline
	*zoom: 1;
	vertical-align: top;
}

.visualblock ul li p {
	font-size: 80%;
	color: #221814;
	text-align: center;
	line-height: 1.3em;
	margin: 10px auto 15px 0;
	padding: 0 1em;
}

.visualblock ul li img {
	width: 100%;
	height: auto;
}

.visualblock ul li a {
	display: block;
	background: #fff;
}

.maincolumn h4 {
	text-align: center;
	text-indent: -9999em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 25px;
}

.maincolumn h4.mon {
	background-image: url(../images/info_program/title_mon.png);
}

.maincolumn h4.tue {
	background-image: url(../images/info_program/title_tue.png);
}

.maincolumn h4.wed {
	background-image: url(../images/info_program/title_wed.png);
}

.maincolumn h4.thu {
	background-image: url(../images/info_program/title_thu.png);
}

.maincolumn h4.fri {
	background-image: url(../images/info_program/title_fri.png);
}

.maincolumn h4.sat {
	background-image: url(../images/info_program/title_sat.png);
}

.maincolumn h4.sun {
	background-image: url(../images/info_program/title_sun.png);
}

.sns {
	padding: 0 0 20px 0;
}


/*-----------------------------------------------
 __youtube
-----------------------------------------------*/

.zonewrapper-sp h2 {
	font-size: 20px;
	text-align: left;
	font-weight: bold;
	letter-spacing: 2px;
	padding: 15px 0 15px 50px;
	background: url(/images/top/icon_chan.png) no-repeat left;
	background-size: auto 45px;
}


.slick-dots li button:before {
	font-size: 15px !important;
	content: '●' !important;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #107bb8 !important;
}

/*-----------------------------------------------
 __breakpoint
-----------------------------------------------*/

@media (min-width: 1024px) {

	/* block */

	.row-btm {
		background-image: url(../images/info_program/bg_dots.png);
		background-repeat: repeat-y;
	}

	.maincolumn {
		width: 990px;
		margin: 0 auto;
	}
	
	/* content */
	
	.maincolumn h3 {
		font-size: 23px;
		border-radius: 40px 40px 40px 40px;
		-moz-border-radius: 40px 40px 40px 40px;
		-webkit-border-radius: 40px 40px 40px 40px;		
	}	

	.tabblock,
	.topicsblock {
		letter-spacing: -.40em;
		width: 485px;
		vertical-align: top;
		display: inline-block;
		*display: inline
		*zoom: 1;
		padding: 0;
	}

	.tabblock {
		margin-right: 13px;
		padding: 50px 0 0 0;
		overflow: visible;
	}
	
	.tabblock ul {
		margin: 0 0 0 42px;
		letter-spacing: normal;
		
	}

	.tabblock section {
		overflow-y: scroll;
	}
	
	.tabblock li {
		width: 190px;
		height: 40px;
		font-size: 22px;
		padding: 6px 0;
		cursor: pointer;
		border-radius: 4px 4px 0px 0px;
		-moz-border-radius: 4px 4px 0px 0px;
		-webkit-border-radius: 4px 4px 0px 0px;
	}
	
	.tabblock li.select h2 {
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 0.8em;
		background: url(../images/top/icon_nowonair.png) no-repeat left;
		background-size: contain;
		padding-left: 10px;
		text-align: center;
		margin: 4px 0 0 0;
	}
	
	.tabblock li:first-child {
		margin-right: 20px;
	}
	
	.tabblock li:last-child:before {
		content: "";
		display: block;
		position: absolute;
		left: 10px;
		width: 30px;
		height: 30px;
		background: url(../../images/info_program/icon_program.png) no-repeat;
		background-size: contain;
	}

	.topicsblock {
		padding: 50px 0 0 0;
		background: transparent;
	}

	.topicsblock h3 {
		background: #Fff;
		font-size: 22px;
		width: 300px;
		height: 40px;
		margin: 0 auto;
		padding: 7px 0 6px 15px;
		text-align: center;
		border-radius: 4px 4px 0px 0px;
		-moz-border-radius: 4px 4px 0px 0px;
		-webkit-border-radius: 4px 4px 0px 0px;
	}

	.topicsblock h3:before {
		left: 20px;
		top: 0;
	}

	.topicsblock dl {
		letter-spacing: normal;
		background: #fff;
		padding: 20px;
		border-radius: 4px 4px 4px 4px;
		-moz-border-radius: 4px 4px 4px 4px;
		-webkit-border-radius: 4px 4px 4px 4px;	
		height: 220px;
	}

	#content dl {
		letter-spacing: normal;
		border-radius: 4px 4px 4px 4px;
		-moz-border-radius: 4px 4px 4px 4px;
		-webkit-border-radius: 4px 4px 4px 4px;	
		padding: 20px;
		font-size: 17px;
	}
	
	.topicsblock dl div,
	#content dl div {
		height: 180px;
	}

	.topicsblock dl div {
		overflow-y: scroll;
	}
	
	.topicsblock dl div::-webkit-scrollbar,
	.tabblock section::-webkit-scrollbar,
	#content dl div::-webkit-scrollbar {
	  all:unset;
	  width: 12px;
	  background: transparent;
	}
	 
	.topicsblock dl div::-webkit-scrollbar-track,
	.tabblock section::-webkit-scrollbar-track,
	#content dl div::-webkit-scrollbar-track {
	  all:unset;
	  border: 1px solid #221814;
	  border-radius: 8px;
	  background: transparent;
	}
	 
	.topicsblock dl div::-webkit-scrollbar-thumb,
	.tabblock section::-webkit-scrollbar-thumb,
	#content dl div::-webkit-scrollbar-thumb {
	  all:unset;
	  background: #989898;
	  border-radius: 8px;
	}
	
	.topicsblock dl dt {
		font-size: 14px;
		margin: 0 0 0 0;
		padding: 5px 0 0 0;
	}	

	.topicsblock dl dd {
		font-size: 15px;
		padding: 0 0 5px 0;
	}		
	
	#content dl dt.current,
	#content dl dd.current {
	}
	
	#content dl dt {
		font-size: 14px;
		margin: 0 0 0 0;
		padding: 5px 0 0 0;
	}
	
	#content dl dd {
		font-size: 15px;
		padding: 0 0 5px 0;
	}
	
	div[data-program="番組表示枠"],
	div[data-program="番組表示枠"] div {
		height: auto !important;
	}	
	
	.visualblock ul {
		letter-spacing: -.40em;
	}

	.visualblock ul li {
		width: 240px;
		letter-spacing: normal;
	}

	.visualblock ul li {
		margin-right: 7px;
	}
	
	.visualblock ul li p {
		font-size: 13px;
		margin: 10px 0 25px 0;
	}
	
	.maincolumn h4 {
		height: 30px;
		margin: 30px 0 20px 0;
	}
	
	.sns {
		padding: 25px 0;
	}

	/* zonewrapper */
	
	.zonewrapper h2 {
		padding: 20px 0 20px 55px;
		background-size: auto 55px;
	}
}