body{
	position: relative;
}
#bancho-scroll-indicator-wrapper,
#bancho-scroll-indicator-wrapper *{
	box-sizing: border-box;
}
#bancho-scroll-indicator-wrapper{
	/* まずは基本の色をとって */
	--bancho-scroll-indicator-color-base: var(--brand-primary, var(--color-primary, #f00));
	/* 補色を作る（PCでヘッダーのナビゲーションにかぶるので） */
	--bancho-scroll-indicator-color: hsl(from var(--bancho-scroll-indicator-color-base) calc(h + 180) s l);
	/* これは補色じゃなくて色反転 */
	/*
	--bancho-scroll-indicator-color: rgb(from var(--bancho-scroll-indicator-color-base) calc(255 - r) calc(255 - g) calc(255 - b));
	*/
	--bancho-scroll-indicator-width: 4px;
	--bancho-scroll-indicator-opacity: .6;

	position: fixed;
	top: var(--drupal-displace-offset-top, 0);
	left: 0;
	padding-top: 0;
	width: 100vw;
	height: var(--bancho-scroll-indicator-width);
	opacity: var(--bancho-scroll-indicator-opacity);
	background: transparent;
	z-index: 999;
	pointer-events: none; /* admin toolbarの挙動を邪魔しないように */
}
#bancho-scroll-indicator{
	background-color: var(--bancho-scroll-indicator-color);
	width:0%;
	height: 100%;
}