@charset "utf-8";

/*
  progressbar
====================================*/

.progressbar {display: flex; flex-wrap: wrap;}
/*.progressbar {display: none; flex-wrap: wrap;}*/
.progressbar .item {position: relative; width: 25%; text-align: center; align-items: center; justify-content: center; padding: 10px 0; background: #eceeef; color: #494949}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {position: absolute; z-index: 2; top: 0; bottom: 0;
 left: 100%; content: ''; border: 23px solid transparent; border-left: 15px solid #eceeef; margin: auto;}
.progressbar .item:not(:last-child)::before {margin-left: 1px;border-left-color: #BABABA;}

@media screen and (max-width: 768px) {
 .progressbar .item {font-size: 11px; line-height: 1.4; padding: 8px 0;}
 .progressbar .item:not(:last-child)::before,
 .progressbar .item:not(:last-child)::after {border-width: 15px; border-left-width: 12px;}
	/*max-width:768px*/
}

/* active */

.progressbar .item.active {z-index: 1; background: #585858; color: #FFF;}
.progressbar .item.active:not(:last-child)::after {border-left-color: #585858}
.progressbar .item.active:not(:last-child)::before {border-left: none;}