/* color */

#ChannelRanking{

	--key-color		: #ca1601;
	--channel-color	: #f7e55a;
	--entry-text	: #eee;
	--black			: #333;

	font-family: "Noto Sans JP", sans-serif;
}

#ChannelRanking .Channel	{background:var(--channel-color);}
#ChannelRanking .Rank		{background:white;border:1px solid var(--black);}
#ChannelRanking .Arrow		{background-color:var(--black);}
#ChannelRanking LI A		{background: #333;}
#ChannelRanking LI A SPAN	{color:var(--entry-text);}
#ChannelRanking .More		{background:var(--channel-color);}

#ChannelRanking .Point text					{fill:white;}
#ChannelRanking .Point tspan:nth-child(2)	{fill:#ffc;}
#ChannelRanking .Point text.s1				{fill:#b61401;		stroke:#b61401;}
#ChannelRanking .Point text.s2				{fill:var(--black);	stroke:var(--black);}
#ChannelRanking .Point text.s3				{fill:white;		stroke:white;}
#ChannelRanking .Point text.s0				{fill:white;		stroke:white;}

/* reset */

#ChannelRanking *{box-sizing: border-box;}
#ChannelRanking IMG{display: block;}
#ChannelRanking svg text,
#ChannelRanking svg text tspan{
	text-anchor:middle;dominant-baseline:central;font-weight:bold;
	stroke-linejoin:round;stroke-linecap:round;
}
#ChannelRanking UL{padding:0;margin:0;}
#ChannelRanking LI{list-style:none;}

#ChannelRanking *[data-type]	{cursor:pointer;}
#ChannelRanking *[data-type] *	{pointer-events:none;}
#ChannelRanking *[data-type] A	{display:block;}


/* screen */

#ChannelRanking							{font-size:3.125vw;}/*100/32*/
#ChannelRanking 		   .Container	{grid-template-columns:29em;}
#ChannelRanking.DEVICE_MIX				{font-size:15px;}
#ChannelRanking.DEVICE_MIX .Container	{grid-template-columns:29em 29em;}

@media(max-width:320px){
	#ChannelRanking				{font-size:10px;}
}
@media(min-width:640px){
	#ChannelRanking				{font-size:1.5625vw;}
	#ChannelRanking .Container	{grid-template-columns:29em 29em;}
}
@media(min-width:960px){
	#ChannelRanking				{font-size:15px;}
}


/* layout */

#ChannelRanking{padding:1em 0;user-select:none;}
#ChannelRanking .Container{display:grid;place-content:center;gap:1em;}
#ChannelRanking .Channel{
	position:relative;min-height:9.5em;
	overflow:hidden;
}
#ChannelRanking .Summary{
	position:relative;height:7em;
}
#ChannelRanking .Rank{
	position:absolute;left:1.5em;top:1.5em;width:5em;height:5em;
	display:grid;place-content:center;place-items:center;
}
#ChannelRanking .Rank SPAN{
	position:absolute;color:var(--black);
	font-size:2.6em;
	//font-weight:bold;
	font-family:"Roboto Condensed",sans-serif;font-feature-settings:"palt"
	transform:translateY(-0.05em);
}
#ChannelRanking .Arrow{
	position:absolute;left:5em;top:5em;width:2.5em;height:2.5em;
	border-radius:0.5em;
}
#ChannelRanking .Arrow.right	{transform:rotate(90deg);}
#ChannelRanking .Arrow.down		{transform:rotate(180deg);}

#ChannelRanking .Banner{
	position:absolute;left:8em;top:0.8em;width:19em;
	display:block;
}
#ChannelRanking .Banner IMG{width:100%;}
#ChannelRanking .Point{
	pointer-events:none;
	position:absolute;left:5em;top:2.1em;width:24em;height:8em;
	transform:scaleX(0.9) skewX(-12deg) rotate(-3deg);
}
#ChannelRanking .Point text{
	font-family:Mogra,sans-serif;font-optical-sizing:auto;letter-spacing:0.05em;
}
#ChannelRanking .Point tspan:nth-child(1){font-size:4.0em;font-weight:normal;}
#ChannelRanking .Point tspan:nth-child(2){font-size:2.5em;font-weight:normal;}
#ChannelRanking .Point text.s1{stroke-width:1em;}
#ChannelRanking .Point text.s2{stroke-width:1em;}
#ChannelRanking .Point text.s3{stroke-width:1.5em;}
#ChannelRanking .Point text.s0{stroke-width:0.1em;}

#ChannelRanking UL{
	font-size:0.93em;
	display:grid;grid-auto-columns:14em;gap:1em;grid-auto-flow:column;place-content:center;
	margin:auto;
	transform:translateY(1.7em);
}
#ChannelRanking LI{position:relative;}
#ChannelRanking LI:nth-child(n+3){display:none;}
#ChannelRanking LI A{
	width:14em;height:14em;
	border-radius:1.5em;overflow:hidden;
	display:block;text-decoration:none;
}
#ChannelRanking LI A IMG{width:14em;height:7.875em}
#ChannelRanking LI A SPAN{
	margin:0.3em 0.6em 2.7em 0.9em;line-height:1.7em;max-height:3.4em;
	display:block;overflow:hidden;
}
#ChannelRanking .Badge{
	position:absolute;top:-1em;right:0em;
	font-family:Nunito,"Noto Sans JP",sans-serif;
}
#ChannelRanking .Badge text{font-size:1.5em;}

#ChannelRanking .More{
	cursor:pointer;
	width:24em;height:4em;
	border-radius:2em;
	font-family:"Noto Sans JP",sans-serif;font-weight:bold;
	display:grid;place-content:center;
	margin:auto;margin-top:1em;
}
#ChannelRanking .More SPAN{font-size: 1.5em;}


/*** Top5 ***/

#ChannelRanking .Channel[data-rank='1']{background: linear-gradient(160deg, #f9ff56 0%, #ffffff 60%);}
#ChannelRanking .Channel[data-rank='2']{background: linear-gradient(160deg, #d6f0ee 0%, #ffffff 60%);}
#ChannelRanking .Channel[data-rank='3']{background: linear-gradient(160deg, #fddabd 0%, #ffffff 60%);}
#ChannelRanking .Channel[data-rank='4'],
#ChannelRanking .Channel[data-rank='5']{background: linear-gradient(160deg, #e1d8bd 0%, #ffffff 60%);}

#ChannelRanking .Channel[data-rank='1'] .Rank,
#ChannelRanking .Channel[data-rank='2'] .Rank,
#ChannelRanking .Channel[data-rank='3'] .Rank,
#ChannelRanking .Channel[data-rank='4'] .Rank,
#ChannelRanking .Channel[data-rank='5'] .Rank{
	background: transparent;
	border:none;
}
#ChannelRanking .Channel[data-rank='1'] .Rank SPAN,
#ChannelRanking .Channel[data-rank='2'] .Rank SPAN,
#ChannelRanking .Channel[data-rank='3'] .Rank SPAN,
#ChannelRanking .Channel[data-rank='4'] .Rank SPAN,
#ChannelRanking .Channel[data-rank='5'] .Rank SPAN{
	display:none;
}
#ChannelRanking .Channel[data-rank='1'] .Rank::after,
#ChannelRanking .Channel[data-rank='2'] .Rank::after,
#ChannelRanking .Channel[data-rank='3'] .Rank::after,
#ChannelRanking .Channel[data-rank='4'] .Rank::after,
#ChannelRanking .Channel[data-rank='5'] .Rank::after{
	content:'';
	position:absolute;
	width:6.5em;height:6.5em;
	background-size:contain;background-position:center;background-repeat:no-repeat;
	transform:translateY(-0.3em);
}
#ChannelRanking .Channel[data-rank='1'] .Rank::after{background-image:
	url("https://local-tv.marketplace.rakuten.co.jp/inc/top/sp/gp/img/ranking_01.png");
}
#ChannelRanking .Channel[data-rank='2'] .Rank::after{background-image: 
	url("https://local-tv.marketplace.rakuten.co.jp/inc/top/sp/gp/img/ranking_02.png");
}
#ChannelRanking .Channel[data-rank='3'] .Rank::after{background-image: 
	url("https://local-tv.marketplace.rakuten.co.jp/inc/top/sp/gp/img/ranking_03.png");
}
#ChannelRanking .Channel[data-rank='4'] .Rank::after{background-image: 
	url("https://local-tv.marketplace.rakuten.co.jp/inc/top/sp/gp/img/ranking_04.png");
}
#ChannelRanking .Channel[data-rank='5'] .Rank::after{background-image: 
	url("https://local-tv.marketplace.rakuten.co.jp/inc/top/sp/gp/img/ranking_05.png");
}


/*** Device ***/

@media(max-width:639px){
	#ChannelRanking .Channel[data-rank='1']					{grid-column:span 1;width:29em;min-height:17em}
	#ChannelRanking .Channel[data-rank='1'] .Summary		{font-size:1em;left:0;height:14em;}
	#ChannelRanking .Channel[data-rank='1'] .Rank			{width:26em;top:6em;}
	#ChannelRanking .Channel[data-rank='1'] .Rank::after	{width:26em;height:9em;}
	#ChannelRanking .Channel[data-rank='1'] .Arrow			{left:1.5em;top:1.5em;}
	#ChannelRanking .Channel[data-rank='1'] .Point{
		left:2.5em;top:9em;width:26em;
		transform: scale(1.1,1.2) skewX(-12deg) rotate(-3deg);
	}
}

#ChannelRanking.DEVICE_MIX .Channel[data-rank='1']					{grid-column:span 2;width:59em;min-height:16em;}
#ChannelRanking.DEVICE_MIX .Channel[data-rank='1'] .Summary			{font-size:1.7em;left:4.5em;height:7em;}
#ChannelRanking.DEVICE_MIX .Channel[data-rank='1'] .Rank			{top:1.5em;width:5em;}
#ChannelRanking.DEVICE_MIX .Channel[data-rank='1'] .Rank::after		{width:15em;}
#ChannelRanking.DEVICE_MIX .Channel[data-rank='1'] .Arrow			{left:-2.5em;top:1.5em;}
#ChannelRanking.DEVICE_MIX .Channel[data-rank='1'] UL				{font-size:1.2em;}
#ChannelRanking.DEVICE_MIX .Channel[data-rank='1'] LI:nth-child(3)	{display: block;}
#ChannelRanking.DEVICE_MIX .Channel[data-rank='1'] .Point{
	left:5em;top:2.1em;width:24em;
	transform:scaleX(0.9) skewX(-12deg) rotate(-3deg);
}

@media(min-width:640px){
	#ChannelRanking .Channel[data-rank='1']					{grid-column:span 2;width:59em;min-height:16em;}
	#ChannelRanking .Channel[data-rank='1'] .Summary		{font-size:1.7em;left:4.5em;}
	#ChannelRanking .Channel[data-rank='1'] .Rank::after	{width:15em;}
	#ChannelRanking .Channel[data-rank='1'] .Arrow			{left:-2.5em;top:1.5em;}
	#ChannelRanking .Channel[data-rank='1'] UL				{font-size:1.2em;}
	#ChannelRanking .Channel[data-rank='1'] LI:nth-child(3)	{display: block;}
}