@charset "utf-8";

/*
.blogMenu {
	position:block;
	inset:calc(5em + 4px) 2px auto auto;
	display:block;
	z-index:5;
}
.blogMenu .item {
	display:inline-block;
	background-color:#fff;
	border:1px solid #bbb;
}
.blogMenu .item:not(:last-child) {
	margin-bottom:-1px;
}
*/
.blogMenu {
	position:block;
	overflow:auto;
	white-space:nowrap;
	padding:0;
	margin:0 0 1em;
}
.blogMenu:empty {
	display:none;
}
.blogMenu:before,
.blogMenu:after {
	position:sticky;
	display:inline-block;
	inset:0;
	color:#00000066;
	background-color:#ffffff;
}
.blogMenu:before {
	content:'◀';
	margin-right:1em;
	left:-1px;
}
.blogMenu:after {
	content:'▶';
	margin-left:1em;
	right:-1px;
}
.blogMenu .item {
	position:relative;
	display:inline-block;
}
.blogMenu .item:not(:last-child) {
	#margin-bottom:-1px;
}
.blogMenu .item .cou {
	position:absolute;
	display:block;
	inset:0 .2em auto auto;
	background-color:#a22;
	width:.8em;
	height:.8em;
	border-radius:.4em;
	color:#fff;
	line-height:1;
}
.blogMenu .item .co2 {
	position:absolute;
	display:block;
	font-size:40%;
	width:fit-content;
	height:fit-content;
	inset:0;
	margin:auto;
}
@media screen and (min-width:700px) {
	.bMenus {
		#position:sticky;
		#inset:0 0 auto auto;
		float:right;
		width:200px;
	}
	.blogMenu {
		overflow:visible;
		white-space:normal;
	}
	.blogMenu:before,
	.blogMenu:after {
		content:none;
	}
	.blogMenu .item {
		display:block;
	}
	.blogList {
		width:calc(100% - 200px);
	}
}