@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ----------------------------------------
   月間PVランキング
---------------------------------------- */
.blog-ranking {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ranking;
}

.blog-ranking__item {
	margin-bottom: 12px;
}

.blog-ranking__link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.blog-ranking__link:hover {
	opacity: .7;
}

.blog-ranking__rank {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #888;
	border-radius: 50%;
}

.blog-ranking__item:nth-child(1) .blog-ranking__rank { background: #daa520; }
.blog-ranking__item:nth-child(2) .blog-ranking__rank { background: #a0a0a0; }
.blog-ranking__item:nth-child(3) .blog-ranking__rank { background: #cd7f32; }

.blog-ranking__thumb {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 4px;
}

.blog-ranking__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-ranking__body {
	flex: 1;
	min-width: 0;
}

.blog-ranking__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.4;
}

.blog-ranking__views {
	display: block;
	font-size: 11px;
	color: #999;
	margin-top: 2px;
}