/* Babysaurus Custom: フロント用スタイル */
:root {
	--bsc-primary: #f0b200;
}

/* ---- カテゴリ一覧: 並び替えトグル ---- */
/* LION MEDIA の .archive は flex（margin-left:-20px）なので、1 行まるごと占有させる */
.bsc-sort {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 calc(100% - 20px);
	width: calc(100% - 20px);
	margin: -16px 0 25px 20px;
	font-size: 1.3rem;
}
.bsc-sort__label {
	color: #777;
	margin-right: 4px;
}
.bsc-sort__btn {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #ddd;
	border-radius: 999px;
	color: #3f3f3f;
	background: #fff;
	line-height: 1.4;
	transition: .2s;
}
.bsc-sort__btn:hover {
	border-color: var(--bsc-primary);
	color: var(--bsc-primary);
}
.bsc-sort__btn.is-active {
	background: var(--bsc-primary);
	border-color: var(--bsc-primary);
	color: #fff;
	font-weight: bold;
	pointer-events: none;
}

/* ---- 一覧ページ共通: ページ番号横の「<」「>」を枠の上下中央に（テーマは monospace のベースラインで下寄りになる） ---- */
.subPager__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	line-height: 1;
}
.subPager__item .subPager__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	padding-bottom: 2px; /* 「>」の字形が下に重いぶんを補正（実測で字の中心が 0.7px 下がるため） */
}

/* ---- TOP: ランキング見出しのアイコン（総合 = 王冠、年齢別 = 数字の積み木） ---- */
#popular-ranking > .container > .heading.heading-primary::before,
#category-ranking .heading.heading-primary::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	vertical-align: -5px;
	background: no-repeat center / contain;
}
#popular-ranking > .container > .heading.heading-primary::before {
	background-image: url("../img/icon-crown.svg");
}
#category-ranking .heading.heading-primary::before {
	background-image: url("../img/icon-age.svg");
}

/* ---- TOP: カテゴリ別 人気記事ランキング ---- */
/* テーマのランキング (#popular-ranking) の直後に続ける。
   テーマ CSS が後に読まれるため .rankingBox.bsc-catRank で優先度を上げる。
   上のランキングとの間隔 = テーマ側の padding-bottom（PC 60px / スマホ 40px） */
.rankingBox.bsc-catRank {
	padding-top: 0;
	margin-top: -60px;
}
.bsc-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.bsc-tabs__tab {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding: 8px 18px;
	border: 1px solid #ddd;
	border-radius: 999px;
	background: #fff;
	color: #3f3f3f;
	font-size: 1.4rem;
	line-height: 1.4;
	transition: .2s;
}
.bsc-tabs__tab:hover {
	border-color: var(--bsc-primary);
	color: var(--bsc-primary);
}
.bsc-tabs__tab.is-active {
	background: var(--bsc-primary);
	border-color: var(--bsc-primary);
	color: #fff;
	font-weight: bold;
}
.bsc-tabs__tab:focus-visible {
	outline: 2px solid var(--bsc-primary);
	outline-offset: 2px;
}
.bsc-tabs__panel[hidden] {
	display: none;
}

/* 「〜の人気記事をもっと見る」(総合・年齢別共通): テーマの枠線ボタンは灰色帯の上で見づらいので塗りつぶしに */
.bsc-more .btn__link {
	background: var(--bsc-primary);
	border: 0;
	color: #fff;
	font-weight: bold;
	border-radius: 999px;
	padding: 15px 40px; /* 左右対称にして文字をボタンの中央に */
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}
/* hover はフッター「Back to Top」と同じ: メインカラーに白 25% を 0.2s で重ねる
   （グラデーションはアニメーションしないため、重ね色は ::after の opacity で変化させる） */
.bsc-more .btn__link {
	overflow: hidden;
}
.bsc-more .btn__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .25);
	opacity: 0;
	transition: .2s;
	pointer-events: none;
}
.bsc-more .btn__link:hover {
	background: var(--bsc-primary);
	color: #fff !important;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}
.bsc-more .btn__link:hover::after {
	opacity: 1;
}
.bsc-more .btn__link::before {
	color: inherit;
	right: 16px;
}

@media only screen and (max-width: 767px) {
	#popular-ranking > .container > .heading.heading-primary::before,
	#category-ranking .heading.heading-primary::before {
		width: 26px;
		height: 26px;
		margin-right: 8px;
		vertical-align: -5px;
	}
	.rankingBox.bsc-catRank {
		margin-top: -40px;
	}
	.bsc-sort {
		flex-basis: calc(100% - 10px);
		width: calc(100% - 10px);
		margin: -21px 0 20px 10px;
	}
	/* テーマ CSS が後から読み込まれるため、同じ詳細度では負ける。セレクタを強めておく */
	/* テーマの .btn.btn-right{text-align:right} より強くする（テーマ CSS が後に読まれるため） */
	.btn.btn-right.bsc-more {
		text-align: center;
	}
	.bsc-more.btn-right .btn__link {
		display: inline-block;
		width: auto;
		padding: 15px 36px;
	}
	/* タブ列のスクロールバーは隠す（指でスクロール可能） */
	.bsc-tabs__list {
		scrollbar-width: none;
	}
	.bsc-tabs__list::-webkit-scrollbar {
		display: none;
	}
	.bsc-tabs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.bsc-tabs__tab {
		flex: 0 0 auto;
		font-size: 1.3rem;
		padding: 7px 14px;
	}
}