@charset "UTF-8";

.stepbar{
	display: flex;
	width: 100%;
	margin-bottom: 40px;
}
.stepbar__item{
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% / 3);
	height: 40px;
	background: #e4e4e4;
	position: relative;
}
.stepbar__item::before,
.stepbar__item::after{
	content: "";
	border-left: 20px solid #B4B4B4;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	position: absolute;
	top: 0;
	z-index: 1;
}
.stepbar__item::before{
	left: 100%;
}
.stepbar__item::after{
	border-left-color: #e4e4e4;
	left: calc(100% - 1px);
}

/*--------------------------------------
 アクティブ時
 --------------------------------------*/
#active.stepbar__item{
	color: #fff;
	background: #00b6ec;
}
#active.stepbar__item::before{
	border-left-color: #00b6ec;
}
#active.stepbar__item::after{
	display: none;
}

/*--------------------------------------
 最後の矢印を非表示にする
 --------------------------------------*/
.stepbar__item:last-child::before,
.stepbar__item:last-child::after{
	display: none;
}