/* "fnranking.css" */
@charset "UTF-8";

#fnranking_box {
	align-items:				start;
	background-color:			var(--color-text-inverse);
	display:					flex;
	flex-direction:				column;
	gap:						2rem;
	margin:						0 auto;
	max-width:					var(--main-content-width);
	padding:					1.5rem;
	width:						100%;
}
@media screen and (min-width:1px) and (max-width:600px) {
	#fnranking_box {
		padding:				1rem;
	}
}

/* ページタイトル */
.page_title {
	align-items:				flex-end;
	border-top:					3px solid var(--color-primary-600);
	border-bottom:				1px dotted var(--color-primary-600);
	color:						var(--color-primary-600);
	display:					grid;
	gap:						0.5rem;
	grid-template-columns:		auto 1fr auto;
	height:						auto;
	justify-content:			space-between;
	padding:					1rem;
	min-height:					4.75rem;
	font-weight:				500;
	width:						100%;
}
.page_title h1 {
	background-clip:			text;
	color:						var(--color-primary-600);
	margin:						0;
	line-height:				1;
	width:						fit-content;
}
.page_title .mtime {
	font-size:					1.125rem;
	justify-self:				left;
	line-height:				1;
}
.jumb_link_box {
	display:					flex;
	gap:						1rem;
	justify-self:				right;
}
@media screen and (min-width:1px) and (max-width:600px) {
	.page_title {
		align-items:			center;
		grid-template-areas:	"title title"
								"mtime link";
		grid-template-columns:	auto 1fr;
	}
	.page_title h1 {
		grid-area:				title;
	}
	.page_title .mtime {
		font-size:				1rem;
		grid-area:				mtime;
	}
	.jumb_link_box {
		grid-area:				link;
	}
}

/* 週間ランキング、月間ランキングへのジャンプボタン */
.page_title a {
	background-color:			transparent;
	color:						var(--color-primary-600);
	font-size:					0.875rem;
	text-decoration:			underline;
}

/* セクション */
section {
	width:						100%;
}
#term_cur {
	min-height:					105rem;
}
#term_week, #term_month {
	min-height:					52.5rem;
}

/* セクションタイトル */
.term_ttl {
	align-items:				baseline;
	border-image:				linear-gradient(90deg, var(--color-primary-700) 0%, var(--color-primary-400) 45%, transparent 100%) 1;
	border-bottom:				2.5px solid transparent;
	display:					flex;
	gap:						1rem;
	padding-bottom:				0.75rem;
	margin-bottom:				0;
}
.term_ttl h2 {
	background:					linear-gradient(105deg, var(--color-primary-800) 0%, var(--color-primary-500) 100%);
	background-clip:			text;
	font-size:					clamp(1.6rem, 4vw, 2.25rem);
	font-weight:				600;
	-webkit-background-clip:	text;
	-webkit-text-fill-color:	transparent;
}
.term_ttl h2 .cmt {
	font-size:					1.5rem;
}
@media screen and (min-width:1px) and (max-width:600px) {
	.term_ttl h2 .cmt {
		font-size:				1rem;
	}
}


/* 順位の数字 */
#fnranking_box .rank {
	align-items:				stretch;
	counter-increment:			rank;
	display:					grid;
	gap:						1.5rem;
	grid-template-columns:		4rem 1fr;
	position:					relative;
}
.rank:hover {
	background: var(--color-primary-100);
}
#fnranking_box .rank::before {
	align-items:				center;
	color:						var(--color-primary-200);
	content:					counter(rank);
	display:					flex;
	font-family:				"Georgia", "Times New Roman", serif;
	font-size:					3rem;
	font-style:					italic;
	font-weight:				900;
	justify-content:			flex-end;
	letter-spacing:				-0.05em;
	line-height:				1;
	padding:					1.1rem 0 1.1rem 0.25rem;
	user-select:				none;
}
.news_link {
	display:					flex;
	flex-direction:				column;
	justify-content:			center;
	padding:					0.5rem 0.25rem 0.5rem 0;
	width:						100%;
}
.news_link h3 {
	font-size:					1.125rem;
}
@media screen and (min-width:1px) and (max-width:600px) {
	#fnranking_box .rank {
		gap:					1.25rem;
		grid-template-columns:	2.75rem 1fr;
	}
	#fnranking_box .rank::before {
		font-size:				2.5rem;
		padding:				1.1rem 0;
	}
}

/* １位～３位の数字の色を変更 */
#fnranking_box .rank:nth-child(1)::before {
	background:					linear-gradient(150deg, var(--color-primary-700) 0%, var(--color-primary-500) 60%, var(--color-primary-300) 100%);
	background-clip:			text;
	color:						var(--color-primary-300);
	-webkit-background-clip:	text;
	-webkit-text-fill-color:	transparent;
}
#fnranking_box .rank:nth-child(2)::before,
#fnranking_box .rank:nth-child(3)::before {
	color: var(--color-primary-300);
}