@charset "utf-8";
/* CSS Document */

.timeLine {
  position: relative;
}
.timeLine:before {
  background: #000;
  content: "";
  display: block;
  height: 89.5%;
  width: 6px;
  position: absolute;
  left: 172px;
  top: 10px;
}

.timeLineBox {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 50px;
}

.timeLineBox:before {
  background: #fff;
  border-radius: 50px;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  border: solid 6px #000;
  position: absolute;
  left: 160px;
  top: 8px;  
}


.timeLineDate {
  font-size: 5rem;
  font-family: Arial, Helvetica, "sans-serif";
  width: 140px;
  line-height: 1;
}
.timeLineContet {
  width: 900px;
}

.timeLineContetTitle {
  font-size: 2.6rem;
  margin-bottom: 10px;
  line-height: 1.6;
}

@media only screen and (max-width: 768px) {
  .timeLine {
  }
  .timeLine:before {
    background: #000;
    content: "";
    display: block;
    height: 89%;
    width: 6px;
    position: absolute;
    left: 13px;
    top: 0px;
  }

  .timeLineBox {
    display: inherit;
    position: relative;
    margin: 0 0 50px 50px;
  }

  .timeLineBox:before {
    height: 20px;
    width: 20px;
    border: solid 6px #000;
    left: -50px;
    top: 0px;  
  }
  .timeLineDate {
    font-size: 3.2rem;
    width: auto;
    margin-bottom: 10px;
  }
  .timeLineContet {
    width: auto;
  }

  .timeLineContetTitle {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
}