@charset "utf-8";

/* ======================================================
(C)フジテレビ CSS Document 
	 ジャンルトップ共通 common_genre.css
====================================================== */

/* mainLeft */
#mainLeft{padding-top: 20px!important;}
#mainLeft h1{
	width:244px; height:39px;
	text-indent: -999em;
	float:left;
}
#mainLeft .fujitele-bin{
	width:auto;
	float:right;
	background:url("/images/bgr_arrow01.gif") no-repeat scroll right 0.2em transparent;
	padding:0 10px 0 0;
	margin:2px 6px 0 0;
}



/* flashMarquee */
#flashMarquee{
	width:550px;
	overflow: hidden;
}

#CoWhatsNew {
	/* height:38px; */
	width:550px;
	margin-bottom:15px;
}

/* menu */
ul#dramaM,
ul#varietyW,
ul#newsM,
ul#animationM,
ul#miniM{
	width:550px;
	margin:20px 0 0 0;
	overflow:hidden;
}

ul#varietyW{ margin:20px 0; }

ul#dramaM li,
ul#varietyW li,
ul#newsM li,
ul#animationM li,
ul#miniM li{
	height:29px;
	text-indent:-999em;
	float:left;
	overflow:hidden;
}
ul#dramaM li a,
ul#varietyW li a,
ul#newsM li a,
ul#animationM li a,
ul#miniM li a{
	display:block;
	height:29px;
	overflow:hidden;
}

/* cateGenre */
.cateGenre{
	margin:10px 0 15px 0;
	clear:both; float:none;
	overflow:visible;
}
.cateGenre .title{
	width:550px;height:2em;
	background:#5E3939 url("/images/1104renew/cf/topfra_titlebg.png") left top no-repeat;
	z-index:0;
	behavior:expression(IEPNGFIX.fix(this));
}
.cateGenre .title h2{
	color:#FFF;	font-size:1.2em; letter-spacing:0.1em;
	width:540px;
	padding:6px; margin:0;
	float:left;
}
.cateGenre .main{
	padding:10px 0 0 0;
	z-index:0;
}
.cateGenre .main ul{
	width:550px;
	padding-left:4px;
}
.cateGenre .main ul li{
	width:118px;
	padding-left:14px;
	float:left;
	overflow:visible;
}
.cateGenre .main ul li.hidden{
	filter: alpha(opacity=30);
	-moz-opacity: 0.30;
	opacity: 0.30;
}
.cateGenre .main ul li.secondLine{
	clear:both; float:none;
}
.cateGenre .main ul li .txtLink.hidden{
	visibility:hidden;
}
.cateGenre .main ul dl{
	width:118px;
	margin:0;
	z-index:1;
	overflow:hidden;
}

/* cateGenre main */
.cateGenre .main ul dl dt{
	width:112px; height:16px;
	line-height:18px;
	background: url("/images/1104renew/cf/timezone_bg.png") left top no-repeat;
	color:#FFF;
	text-align:center;
	padding:3px; margin:0;
	overflow:hidden;
}
* html .cateGenre .main ul dl dt{
	background:#CCC url("/images/1104renew/cf/timezone_bg.gif") left top no-repeat;
	background-color:none;
	height:14px;
}
.cateGenre .main ul dl dd{
	display:block;
	padding:3px 0 5px 0;
	clear:both; float:none;
}
.cateGenre .main ul dl dd.pgmPhoto{
	padding:0;
	height:auto; min-height:80px;
}
.cateGenre .main ul dl dd a{ display:block;}
.cateGenre .main ul dl dd.pgmPhoto a{
	height:80px; width:118px;
}
.cateGenre .main ul dl dd.pgmPhoto a.fordetail{
	width:118px;
	height:21px;
	text-indent:-999em;
	padding-top:7px;
	margin-bottom:2px;
	background: url("/images/1104renew/genre_forlink.jpg") left bottom no-repeat;
	cursor:pointer;
	outline:none;
  overflow: hidden;
}
.cateGenre .main ul dl dd.pgmPhoto a.fordetail:hover{
	background: url("/images/1104renew/genre_forlink_o.jpg") left bottom no-repeat;
}

/* cateGenre pgmMore */
.cateGenre .pgmMoreWrap{
	z-index:100;
  position: relative;
}
.cateGenre .pgmMore{
	display:none;
	width:550px;
	margin:0 auto;
  position: absolute;
	overflow:hidden;
}
.cateGenre .pgmMore .arrow{
	height:10px;
  overflow: hidden;
}
#mainLeft .cateGenre .pgmMore dl{width:550px;}
.cateGenre .main ul dl dt.pgmMoreMain{
	width:544px;
	height:20px;
	background:none;
	overflow:hidden;
}
.cateGenre .pgmMoreMain .pgmname{
	height:20px;
	float:left;
}
.cateGenre .pgmMoreMain .pgmname a{
	color:#FFF; line-height:20px; font-size:100%; font-weight:bold;
	margin-left:7px;
}
.cateGenre .pgmMoreMain .tojiru{
	display:block;
	margin: 1px 3px;
	float:right;
}
.cateGenre .pgmMoreMain .tojiru a{
	display:block;
	width:53px; height:18px;
	background: url("/images/btn_close.gif") left top no-repeat;
	text-indent:-999em;
}
.cateGenre .pgmMoreMain .tojiru a:hover{background: url("/images/btn_close_o.gif") left top no-repeat;}
.cateGenre .main ul dl dd.pgmMoredetail {
	background:#FFF;
	width:538px;
	margin: 0 1px 1px 1px; padding:7px 5px;
	overflow:hidden;
}
.cateGenre .pgmMoredetail p{
	padding-bottom:0.7em;
	margin-bottom:0px;
}
.cateGenre .pgmMoredetail .programinfo span{
	background:#FFFABF; font-size:90%; line-height:1.2;
}
.cateGenre .pgmMoredetail .txt{
	font-size:90%;
  padding-bottom:4px;
	line-height:1.3;
}
.cateGenre .pgmMoredetail ul.btnfunction{margin-left:0;}
.cateGenre .pgmMoredetail ul.btnfunction li{
	width:auto;
	padding:0 4px 0 0;
	float:left;
}

/* txtListFra */
#mainLeft .txtListFra{background-color:#333;}
*html #mainLeft .txtListFra {background:#333;}/* IE6 hack */
#mainLeft .txtListFra .title h2{
	margin:0 0 0 10px;
	color:#FFF; font-size:14px; font-weight:bold; line-height:29px; letter-spacing:0.1em;
	float:left;
}
#mainLeft .txtListFra .main{ padding:7px 5px;}

/* txtList */
.cateGenre ol.txtList{margin:15px 10px;}
ol.txtList{
	padding:5px 5px 5px 10px;
	overflow:hidden;
}
ol.txtList li{
	display:block;
	padding:3px 5px 3px 0;
	float:left;
}
ol.txtList li span{
	display:block;
	width:15px; height:15px;
	background:#333 url("/images/1104renew/icon_arrow.png") no-repeat left top;
	text-indent:-999em;
	float:left;
	overflow:hidden;
	behavior:expression(IEPNGFIX.fix(this));
}
ol.noBr li span{
	display:block;
	width:15px; height:12px;
	background:#333 url("/images/1104renew/icon_line1.gif") no-repeat left top;
	text-indent:-999em;
	float:left;
	overflow:hidden;
	behavior:expression(IEPNGFIX.fix(this));
}
ol.txtList li a{
	display:block;
	color:#0066cc;
	white-space: nowrap;
	width:auto;
	float:left;
}
ol.noBr li{
	padding:5px;
	float:none; clear:both;
}
/* pagetop */
.btnpagetop {
	padding-bottom: 15px;
	overflow: hidden;
}
.btnpagetop a{
	display:block;
	width:93px;
	height:12px;
	background: url("/variety/images/btn_common_pagetop.gif") left top no-repeat;
	text-indent:-999em;
	float:right;
	overflow:hidden;
}
.btnpagetop a:hover{background: url("/variety/images/btn_common_pagetop_o.gif") left top no-repeat;}

/* what's new [ PC, Smartphone ] */
#whatsnew { clear:both; position:relative; width:546px; min-height:35px; margin: 10px auto; border:2px solid #333; 
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px; }
#whatsnew .title { background-color: #333; color: #fff; position:absolute; top: 3px; left: 3px; font-size: 12px; font-weight: normal; padding: 2px 4px; height: 25px; line-height: 26px; 
	-webkit-border-radius:3px;
	-moz-border-radius:6px;
	border-radius: 3px; }
#newsTicker { height: 30px; line-height: 30px; margin-left: 4px; padding:2px 34px 0 60px; overflow: hidden; float: left; }
#newsTicker ul { float: left; }
#newsTicker li { margin:0; word-wrap:normal; font-size: 12px;  }
#newsTicker li span.date { padding-right: 7px; }
#newsTicker li a { color: #0066CC; text-decoration: none; }
#newsTicker li a:hover { text-decoration: underline; }

#ichiran { height: auto; padding:3px 34px 0 60px; margin-left: 4px; display: none; }
#ichiran ul { float: left; }
#ichiran li { font-size: 12px; line-height: 18px; margin-bottom:6px; padding-top:5px; border-top:1px dotted #999; }
#ichiran li:first-child { border:none; }
#ichiran li span.date { padding-right: 7px; }
#ichiran li a { color: #0066CC; text-decoration: none; }
#ichiran li a:hover { text-decoration: underline; }

#button { float: right; overflow: hidden; text-indent: -10000px; width: 16px; height: 16px;position:absolute; top: 4px; right: 4px; margin: 0; width: 26px; height: 26px; }
#button a.wnClose {background: url("/images/wn_up.png") no-repeat scroll 8px 8px transparent; display: block; height: 26px; width: 26px; cursor: pointer; }
#button a.wnOpen { background: url("/images/wn_down.png") no-repeat scroll 8px 8px transparent;  display: block; height: 26px; width: 26px; cursor: pointer; }

/* ======================================================
	 smartphone view
====================================================== */
.cx_smartphoneview * { margin:0; padding:0;}
.cx_smartphoneview #wrap #wrap2 { width:100%;}
.cx_smartphoneview #wrap #wrap2 #gbheader {}
.cx_smartphoneview #wrap #wrap2 #gbHeader_sp {  border-bottom: 1px solid #999; -webkit-box-shadow: 0px 1px 1px #999; box-shadow:0 1px 1px #999; }
.cx_smartphoneview #wrap #mainLeft { width:100%; float:none; background-color:#ffffff; overflow:hidden; margin-top:2px; padding:12px 0!important; }
.cx_smartphoneview #mainLeft h1 { width: 162px; text-indent: 0; float: left; font-size: 19px; height: 32px; line-height: 17px; padding-left: 10px; /*letter-spacing: -0.1em;*/ margin: 5px 0 12px 0; }
.cx_smartphoneview #mainLeft h1 span { display:block; font-size:12px; line-height:18px; font-weight: normal; letter-spacing:0.1em; text-indent: 0.4em; }
.cx_smartphoneview #mainLeft .fujitele-bin { width: 7em; float: right; text-align: right; padding: 3px 8px 4px 24px; margin: 0 3% 0 0; background: url("/images/gtop_fbin_icon.png") no-repeat 2px 50%;
	-webkit-background-size:21px 21px;
	background-size: 21px 21px;
	-webkit-box-shadow: 1px 1px 1px #666;
	box-shadow: 1px 1px 1px #666;
	-webkit-border-radius: 3px;
	border-radius: 3px; }
.cx_smartphoneview #mainLeft .fujitele-bin a { text-decoration:none; display: block; font-weight:bolder; height:2.4em; overflow:hidden; color: #3DA1CB;}

.cx_smartphoneview #whatsnew { width:94%; margin: 10px auto 10px 3%;}

/*表示しないもの*/
.cx_smartphoneview #spHeaderSocial,
.cx_smartphoneview #flashCoWhatsNew,
.cx_smartphoneview ul#dramaM,
.cx_smartphoneview ul#varietyM,
.cx_smartphoneview .cateGenre .main ul dl dd.pgmPhoto a.fordetail,
.cx_smartphoneview div.btmWn,
.cx_smartphoneview p.btnpagetop,
.cx_smartphoneview div.pageTop
 { display:none; }
 
 /* cateGenre */
.cx_smartphoneview .cateGenre { margin:0; }
.cx_smartphoneview .cateGenre:after { content:''; display:block; clear:both;} 
.cx_smartphoneview .cateGenre .title { width:100%; height:26px; background-image:none; background-color:#FFF5DE; border-bottom: 2px solid #5E3939; border-top: 1px solid #9D998E; margin-bottom:6px; padding-top:10px;
	-webkit-box-shadow: 0px 1px 2px #9D998E inset;
	box-shadow: 0 1px 2px #9D998E inset; }
.cx_smartphoneview .cateGenre .title h2 { height:15px; margin:0 6px; font-size:14px; line-height:17px; text-shadow: 0 -1px 1px #5E3939; padding:6px; background-color:#5E3939; float:none; letter-spacing:0;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;  
	border-radius:6px 6px 0 0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.20, #5E3939), color-stop(0.00, #7C5656));
	background: -webkit-linear-gradient(top, #7C5656 0%, #5E3939 20%);
	background: linear-gradient(to bottom, #7C5656 0%, #5E3939 20%);
	box-shadow: inset 0 -1px 1px #ae9898 , inset 0 1px 0 ##5E3939; }

/* text list [ drama ] [ mini ] */
.cx_smartphoneview ol.txtList { clear: both; /*background-color: #EEE;*/ padding: 0.5em 0 0.5em 1.5%; /*border-top: 1px solid #CCC; margin:0;*/ }
.cx_smartphoneview ol.txtList li { float: left; height: 36px; background-color: #fff; border-bottom: 1px solid #999; border-right: 1px solid #CCC; width: 49%; margin: 0 2px 2px 0; padding: 0 3px 0 0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #eeeeee), color-stop(0.9, #ffffff));
	background: -webkit-linear-gradient(top, #ffffff 90%, #eeeeee 100%);
	background: linear-gradient(to bottom, #ffffff 90%, #eeeeee 100%);
	-webkit-border-radius:6px;
	border-radius: 6px;
	-webkit-box-shadow: 0px 1px 3px #ccc;
	box-shadow: 0 1px 3px #ccc;}
.cx_smartphoneview ol.txtList li span { display: none; }
.cx_smartphoneview ol.txtList li a { display: block; color: #333; font-weight: bolder; width: 90%; line-height: 34px; padding-left: 6%; padding-right: 4%; overflow: hidden; word-break: normal; text-overflow: ellipsis; background: url("/images/gtop_sp_arrow.png") no-repeat 100% 50%; 
	-webkit-background-size:8px 14px;
	background-size: 8px 14px; }

/* cateGenre main */
.cx_smartphoneview .cateGenre .main { padding:0;}
.cx_smartphoneview .cateGenre .main ul li { width: 94px; height: 126px; padding: 0; margin-left: 4px; margin-right: 4px; margin-bottom: 10px;
	-webkit-border-radius:6px;
	border-radius: 6px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #eeeeee), color-stop(0.96, #ffffff));
	background: -webkit-linear-gradient(top, #ffffff 96%, #eeeeee 100%);
	background: linear-gradient(to bottom, #ffffff 96%, #eeeeee 100%);
	-webkit-box-shadow: 0px 1px 2px #666;
	box-shadow: 0 1px 2px #666;}
.cx_smartphoneview .cateGenre .main ul li.secondLine{ clear:none; float:left; display:none; }
.cx_smartphoneview .cateGenre .main ul dl { width: 94px; margin: 0; overflow: hidden; }
.cx_smartphoneview .cateGenre .main ul dl dt{ width:88px; height:16px; line-height:18px; background-image: none; color:#FFF; text-align:center; margin:0; overflow:hidden;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	border-radius:6px 6px 0 0; }
.cx_smartphoneview .cateGenre .main ul dl dd { display: block; clear: both; float: none; overflow: hidden; width: 86px; height: 2em; font-size: 12px; font-weight: bolder; line-height: 1.2em; margin: 0 auto; }
.cx_smartphoneview .cateGenre .main ul dl dd a { color:#333333; }
.cx_smartphoneview .cateGenre .main ul dl dd.pgmPhoto { min-height: 60px; margin-top:6px; 
	-webkit-box-shadow: 0px 1px 1px #ccc;
	box-shadow: 0 1px 1px #ccc; }
.cx_smartphoneview .cateGenre .main ul dl dd.pgmPhoto a  { display: block; background-color: #ffffff; height: 60px; width: 86px; }
.cx_smartphoneview .cateGenre .main ul dl dd.pgmPhoto a img { width:84px; height:58px; border:1px solid #aaaaaa;}

/* Depends on the device size */
@media screen and (max-width: 1920px){
.cx_smartphoneview .cateGenre .title h2 { width: 1000px; margin:0 auto; }
.cx_smartphoneview .cateGenre .main ul,
.cx_smartphoneview #mainLeft .otn .main { width: 1020px; margin:0 auto; }
.cx_smartphoneview ol.txtList li { width: 32%; } 
}
@media screen and (max-width: 1018px){
.cx_smartphoneview .cateGenre .title h2 { width: 900px; margin:0 auto; }
.cx_smartphoneview .cateGenre .main ul,
.cx_smartphoneview #mainLeft .otn .main { width: 918px; margin:0 auto; }
}
@media screen and (max-width: 916px){
.cx_smartphoneview .cateGenre .title h2 { width: 798px; margin:0 auto; }
.cx_smartphoneview .cateGenre .main ul,
.cx_smartphoneview #mainLeft .otn .main { width: 816px; margin:0 auto; }
}
@media screen and (max-width: 814px) {
.cx_smartphoneview .cateGenre .title h2 { width: 698px; margin:0 auto; }
.cx_smartphoneview .cateGenre .main ul,
.cx_smartphoneview #mainLeft .otn .main { width: 718px; margin:0 auto; }
}
@media screen and (max-width: 716px) {
.cx_smartphoneview .cateGenre .title h2 { width: 596px; margin:0 auto; } 
.cx_smartphoneview .cateGenre .main ul,
.cx_smartphoneview #mainLeft .otn .main { width: 616px; margin:0 auto; } 
}
@media screen and (max-width: 614px) {
.cx_smartphoneview .cateGenre .title h2 { width: 494px; margin:0 auto; }
.cx_smartphoneview .cateGenre .main ul,
.cx_smartphoneview #mainLeft .otn .main { width: 514px; margin:0 auto; }
.cx_smartphoneview ol.txtList li { width: 32%; } 
}
@media screen and (max-width: 512px) {
.cx_smartphoneview .cateGenre .title h2 { width: 392px; margin:0 auto; }
.cx_smartphoneview .cateGenre .main ul,
.cx_smartphoneview #mainLeft .otn .main { width: 412px; margin:0 auto; }
.cx_smartphoneview ol.txtList li { width: 48%; } 
}
@media screen and (max-width: 410px) {
.cx_smartphoneview .cateGenre .title h2 { width: 290px; margin:0 auto; }
.cx_smartphoneview .cateGenre .main ul,
.cx_smartphoneview #mainLeft .otn .main { width: 310px; margin:0 auto; } 
}

/*color flame*/
.cx_smartphoneview #mainLeft .colorFrame,
.cx_smartphoneview #mainLeft .colorFrame .title,
.cx_smartphoneview #mainLeft .colorFrame .main { width: 100%; margin:0; padding:0; background:none; }
.cx_smartphoneview #mainLeft .colorFrame .title { width: 100%; height: 30px; background-image: none; background-color: #FFF5DE; border-top: 1px solid #9D998E; 
-webkit-box-shadow: 0px 1px 2px #9D998E inset;
box-shadow: 0 1px 2px #9D998E inset; }
.cx_smartphoneview #mainLeft .colorFrame .title h2 { width: 100%; color:#fff; height: 22px; line-height:24px; font-size:12px; background-color: #5E3939; margin: 8px 0 0 0; text-indent: 1em;}
.cx_smartphoneview select { width:20em; margin-top:10px;}

/* smartphone only - folded contents */
.spFold { 
	display: block; width: 97%; border-top: 1px solid #EEE; text-align: center; height: 26px; line-height: 28px; font-weight: bolder; border-bottom: 1px solid #999; color:#999; margin: 8px 1.5% 6px 1.5%;
	-webkit-box-shadow: 1px 2px 2px #CCC;
	box-shadow: 1px 2px 2px #CCC;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #CCC), color-stop(0.9, #DDD),color-stop(0.06, #FFF));
	background: -webkit-linear-gradient(top, #FFF 6%, #DDD 90%, #CCC 100%);
	background: linear-gradient(to bottom, #FFF 6%, #DDD 90%, #CCC 100%);
	text-shadow: 0 1px 1px #fff;
	-webkit-border-radius:6px;
	border-radius: 6px;
	clear:both;
	}
.listaiueo .spFold { margin: 8px 3% 6px 0; }
a.spFold:hover,
a.spFold:active { color:#999; text-decoration:none; } 
 
/* ---------------------------------
  mainRight  
  --------------------------------- */
.cx_smartphoneview #wrap #mainRight { width: 100%; background-color: #FFF5DE; padding-top:10px; border-top: 1px solid #9D998E;
-webkit-box-shadow: 0px 1px 2px #9D998E inset;
box-shadow: 0 1px 2px #9D998E inset; }

/*.cx_smartphoneview #wrap #mainRight .iframe { -webkit-transform: scale(0.912); }*/
/*.cx_smartphoneview #wrap #mainRight iframe { -webkit-transform: scale(0.912); }*/


/* colorFrame */
.cx_smartphoneview #mainRight .colorFrame { padding: 0 0 6px 0; margin: 0 auto 10px auto; width: 300px; background:none;
	-webkit-border-radius:6px;
	border-radius: 6px; }
.cx_smartphoneview #mainRight .colorFrame .title { width:300px; }
.cx_smartphoneview #mainRight .colorFrame .main { background-color: white; padding: 6px; overflow: hidden; width: 276px; margin-left: 6px;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;  
	border-radius: 0 0 3px 3px;  }

/* recommendNext  */
.cx_smartphoneview #mainRight #recommendNext .main dl { padding:10px 4px 10px 4px; }
.cx_smartphoneview #mainRight #recommendNext .main dl.rank01:after { clear:both; }  
.cx_smartphoneview #mainRight #recommendNext .main dl dd { width: 194px; }

/* zoomRank */
.cx_smartphoneview #mainRight #zoomRank .main dl { padding: 0 4px 0 4px; }
.cx_smartphoneview #mainRight #zoomRank .main dl dd { width: 174px; }
.cx_smartphoneview #mainRight #zoomRank .main dl dd span.oaDate { width: 174px; margin: 4px 0; }

/* watching */
.cx_smartphoneview #mainRight .colorFrame .titleL { width: 300px;}
.cx_smartphoneview #mainRight #watching .main dl { width: 120px; padding: 6px 0 0px 12px; }
.cx_smartphoneview #mainRight #watching .main dl dd { height: 40px; }

/* recommendPgm */
.cx_smartphoneview #mainRight #recommendPgm .main dl { width: 124px; padding: 10px 0 0px 10px; }

/*スマホ版では表示しないもの*/
.cx_smartphoneview .sp_hide { display:none; }