@charset "UTF-8";

/*
	[Layout]
		0. Base Layout
		1. Header
		2. Content
		3. Footer

*/

/*/////////////////////////////////////////////////////////////
[Layout]
//////////////////////////////////////////////////////////////*/

/* ------------------------------------------------------------
	0. Base Layout
------------------------------------------------------------ */


/* ------------------------------------------------------------
	1. Header
------------------------------------------------------------ */


/* ------------------------------------------------------------
	2. Content
------------------------------------------------------------ */
/* 青系ボタン（男性視聴ランキング） */
.btnTypeE {
	display: block;
	position: relative;
	width: 260px;
	height: 30px;
	border: solid 1px #0c8ff5;
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcxOTIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM0RkIyRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0RkIyRkYiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzBDOEZGNSIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjMEM4RkY1IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnMTkyKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4fb2ff), color-stop(0.5, #4fb2ff), color-stop(0.5, #0c8ff5), color-stop(1, #0c8ff5));/* Safari,Google Chrome用 */
	background: -moz-linear-gradient(top, #4fb2ff, #4fb2ff 50%, #0c8ff5 50%, #0c8ff5);/* Firefox用 */
	background: linear-gradient(to bottom, #4fb2ff, #4fb2ff 50%, #0c8ff5 50%, #0c8ff5);/* IE10用 */
	box-shadow: 5px 5px 5px 5px #0c8ff5;		/* CSS3 */
	-webkit-box-shadow: 5px 5px 5px 5px #0c8ff5;/* Safari,Google Chrome用 */
	-moz-box-shadow: 5px 5px 5px 5px 5px #0c8ff5;	/* Firefox用 */
	box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);			/* CSS3 */
	-webkit-box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);	/* Safari,Google Chrome用 */
	-moz-box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);		/* Firefox用 */
	border-radius: 40px;
}

.btnTypeE img {
	display: block;
	position: absolute;
	bottom: 0px;
}


/* ピンク系ボタン（女性視聴ランキング） */
.btnTypeF {
	display: block;
	position: relative;
	width: 260px;
	height: 30px;
	border: solid 1px #ff68a7;
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1ODQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRjkwQkUiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRjkwQkUiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGNjhBNyIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkY2OEE3IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTg0KSIgLz4KPC9zdmc+);/* IE9用 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff90be), color-stop(0.5, #ff90be), color-stop(0.5, #ff68a7), color-stop(1, #ff68a7));/* Safari,Google Chrome用 */
	background: -moz-linear-gradient(top, #ff90be, #ff90be 50%, #ff68a7 50%, #ff68a7);/* Firefox用 */
	background: linear-gradient(to bottom, #ff90be, #ff90be 50%, #ff68a7 50%, #ff68a7);/* IE10用 */
	box-shadow: 5px 5px 5px 5px #ff68a7;		/* CSS3 */
	-webkit-box-shadow: 5px 5px 5px 5px #ff68a7;/* Safari,Google Chrome用 */
	-moz-box-shadow: 5px 5px 5px 5px 5px #ff68a7;	/* Firefox用 */
	box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);			/* CSS3 */
	-webkit-box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);	/* Safari,Google Chrome用 */
	-moz-box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);		/* Firefox用 */
	border-radius: 40px;
}

.btnTypeF img {
	display: block;
	position: absolute;
	bottom: 0px;
}


/* オレンジ（大）系ボタン （総合ランキング）*/
.btnTypeH {
	/*display: table-cell;*/
	display: block;
	position: relative;
    /*vertical-align: middle;*/
    line-height: 35px;
	width: 260px;
	height: 35px;
	border: solid 1px #dc6b00;
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0MwMCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0MwMCIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkY1NzAwIiBvZmZzZXQ9IjAuNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRjU3MDAiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czOSkiIC8+Cjwvc3ZnPg==);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff7c00), color-stop(0.5, #ff7c00), color-stop(0.5, #ff5700), color-stop(1, #ff5700));/* Safari,Google Chrome用 */
	background: -moz-linear-gradient(top, #ff7c00, #ff7c00 50%, #ff5700 50%, #ff5700);/* Firefox用 */
	background: linear-gradient(to bottom, #ff7c00, #ff7c00 50%, #ff5700 50%, #ff5700);/* IE10用 */
	box-shadow: 5px 5px 5px 5px #dc6b00;		/* CSS3 */
	-webkit-box-shadow: 5px 5px 5px 5px #dc6b00;/* Safari,Google Chrome用 */
	-moz-box-shadow: 5px 5px 5px 5px #dc6b00;	/* Firefox用 */
	box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);			/* CSS3 */
	-webkit-box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);	/* Safari,Google Chrome用 */
	-moz-box-shadow: inset 0px 0px 15px rgba(255,255,255,0.6);		/* Firefox用 */
	border-radius: 40px;
}

.btnTypeH img {
	display: block;
	position: absolute;
	bottom: 0px;
}

.btnTypeE a,
.btnTypeF a,
.btnTypeH a {
	display: block;
	width: 100%;
}

div.btnArea a {
	margin-top: 15px;
}

/* iPhone版,Android版のランキング内部ページCSS */
#rankingPageTtl { margin: 10px 0 5px; text-align: center;}
#rankingTermTxt { margin: 0 5px 10px; line-height: 1.3; font-size: 12px; text-align: center;}
.rankingList { margin-bottom: 10px; padding: 0; border-top: solid 1px #cccccc;}
.rankingList li { width: 100%; margin: 0; padding: 0; border-bottom: solid 1px #cccccc; background: url(../html/CF/img/iAppArrow01.png) no-repeat 99% 50%; background-size: 8px 10px;}
.rankingList li a { display: table; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; height: 100%; padding: 5px 0; color: #333333; text-decoration: none;}
.rankingList .innerFrame { display: table-cell; width: 100%; vertical-align: middle;}
.rankingList .innerBox { display: table; width: 100%; vertical-align: middle;}
.rankingList .rank { width: 35px; display: table-cell; margin: 0; padding: 0; line-height: 0.7; font-size: 2px; text-align: center; vertical-align: middle;}
.rankingList .thumPack { width: 149px; display: table-cell; margin: 0; padding: 0; vertical-align: middle;}
.rankingList .thumPack img { width: 144px; height: auto; margin-right: 5px;}
.rankingList .rankingTxt { display: table-cell; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; padding: 0 5% 0 0; text-align: left; vertical-align: middle;}
.rankingList .rankingTxt .rankingTitle { padding: 0; font-size: 14px; line-height: 1.2; text-align: left; word-wrap: break-word; word-break: break-all;}
.rankingList .rankingTxt .mylistIcon { display: inline-block; font-size: 14px; height: 24px; line-height: 0; vertical-align: bottom;}
.rankingList .rankingTxt .mylistCount{ display: inline-block; font-size: 14px; height: 24px; line-height: 14px; vertical-align: bottom;}
.rankingList .rankingTxt2 { display: none; padding: 0;}

.innerIconBox { display: block; margin: 0 10% 0 0; padding: 2px 0 0; line-height: 0; font-size: 0; text-align: left;}
.innerIconBox img { width: 52px; height: auto; margin: 3px 3px 0 0; padding: 0; line-height: 0; font-size: 0; vertical-align: top;}

.mylistArea{ margin-top: -8px !important; margin-bottom: 0 !important;}
.mylistIcon{ display: inline-block; font-size: 12px !important; height: 12px !important; line-height: 0; vertical-align: bottom;}
.mylistIcon img { width: 12px !important; height: 12px !important;}
.mylistCount{ display: inline-block; font-size: 12px !important; height: 12px !important; line-height: 12px !important; vertical-align: bottom;}

@media screen and (min-width: 768px) {
	.rankingList .rankingTxt2 { display: block; padding: 5px 0 0; color: #555555;}
	.rankingList .rankingTxt2 .rankingIntro { padding: 0; line-height: 1.4; font-size: 12px; text-align: left; word-wrap: break-word; word-break: break-all;}
}

/* ------------------------------------------------------------
	3. Footer
------------------------------------------------------------ */