/**
 * Breakpoints
 **/
/** 
 * Colors
 **/
.inpage-navi-wrap {
  height: 50px;
}
@media (min-width: 1200px) {
  .inpage-navi-wrap {
    height: 80px;
  }
}
.inpage-navi-wrap .inpage-navi {
  position: relative;
  background: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  width: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.inpage-navi-wrap .inpage-navi::-webkit-scrollbar {
  width: 0;
  height: 0;
}
@media (min-width: 1200px) {
  .inpage-navi-wrap .inpage-navi {
    margin: 0 -40x;
    height: 80px;
    justify-content: center;
  }
}
.inpage-navi-wrap .inpage-navi.sticky {
  position: fixed;
  left: 0;
  z-index: 800;
  border-top: 2px solid #E5E8EB;
  /*
  @media(min-width:$xl){
      top:130px;
  }
  */
}
.inpage-navi-wrap .inpage-navi .inpage-navi-item {
  margin: 0 20px;
  white-space: nowrap;
  position: relative;
}
@media (min-width: 1200px) {
  .inpage-navi-wrap .inpage-navi .inpage-navi-item {
    margin: 0 40px;
  }
}
.inpage-navi-wrap .inpage-navi .inpage-navi-item::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 3px;
  width: 100%;
  opacity: 0;
  background: #FFEB00;
  transform: translate(0, -3px);
  transition: all 0.3s ease-out;
}
@media (min-width: 1200px) {
  .inpage-navi-wrap .inpage-navi .inpage-navi-item::after {
    bottom: -8px;
    transform: translate(0, -8px);
  }
}
.inpage-navi-wrap .inpage-navi .inpage-navi-item.active::after {
  opacity: 1;
  transform: translate(0, 0);
}

/*# sourceMappingURL=inpage_navi.css.map */