.fix-area {
  position: fixed;
  top: 52px;
  left: 0;
  z-index: 10;
  width: 100%;
}

.machine-select {
  width: 100%;
  padding: 15px;
  background: #333333;
}

.worker-hours-heading {
  display: flex;
  border-bottom: #cccccc 1px solid;
  margin-top: -20px;
  padding-top: 20px;
  padding-bottom: 5px;
  font-size: 1.0rem;
  background: #eeeeee;
}

.worker-hours-heading__date {
  width: 44px;
  padding: 0 5px;
  text-align: center;
}

.worker-hours-heading__time {
  width: 57px;
  padding: 0 5px;
  text-align: center;
}

.worker-hours-heading__graph {
  flex: 1;
  font-size: 1.0rem;
}

.worker-hours-heading__graph-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: auto;
}

.worker-hours-heading__graph-inner > div {
  position: relative;
  width: 4.166666666666667%;
}

.worker-hours-heading__part > div {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-25%);
          transform: translateX(-25%);
}

.worker-hours {
  padding-bottom: 30px;
  font-size: 1.0rem;
  padding-top: 211px;
}

.worker-hours__item {
  display: flex;
  border-bottom: #cccccc 1px dashed;
  background: #ffffff;
}

.worker-hours__date {
  width: 44px;
  padding: 8px;
}

.worker-hours__time {
  width: 57px;
  padding: 8px 5px;
  text-align: right;
  background: rgba(216, 8, 53, 0.1);
}

.worker-hours__graph {
  position: relative;
  flex: 1;
  background-image: linear-gradient(to right, #ffffff 4.16667%, #eeeeee 4.16667%, #eeeeee 8.33333%, #ffffff 8.33333%, #ffffff 12.5%, #eeeeee 12.5%, #eeeeee 16.66667%, #ffffff 16.66667%, #ffffff 20.83333%, #eeeeee 20.83333%, #eeeeee 25%, #ffffff 25%, #ffffff 29.16667%, #eeeeee 29.16667%, #eeeeee 33.33333%, #ffffff 33.33333%, #ffffff 37.5%, #eeeeee 37.5%, #eeeeee 41.66666%, #ffffff 41.66666%, #ffffff 45.83333%, #eeeeee 45.83333%, #eeeeee 50%, #ffffff 50%, #ffffff 54.16666%, #eeeeee 54.16666%, #eeeeee 58.33333%, #ffffff 58.33333%, #ffffff 62.5%, #eeeeee 62.5%, #eeeeee 66.66667%, #ffffff 66.66667%, #ffffff 70.83333%, #eeeeee 70.83333%, #eeeeee 75%, #ffffff 75%, #ffffff 79.16667%, #eeeeee 79.16667%, #eeeeee 83.33333%, #ffffff 83.33333%, #ffffff 87.5%, #eeeeee 87.5%, #eeeeee 91.66667%, #ffffff 91.66667%, #ffffff 95.83333%, #eeeeee 95.83333%);
}

.worker-hours__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.worker-hours__line > div {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: #cccccc;
}

.worker-hours__line > div:nth-child(1) {
  left: 0%;
}

.worker-hours__line > div:nth-child(2) {
  left: calc(25% - 1px);
}

.worker-hours__line > div:nth-child(3) {
  left: 50%;
}

.worker-hours__line > div:nth-child(4) {
  left: calc(75% - 1px);
}

.worker-hours__graph-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: auto;
}

.worker-hours__gauge {
  position: absolute;
  top: 50%;
  height: 6px;
  background: #76c155;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}