/*-------------------------------------------------------------------------------------------timeline----------*/

.timeline{
  width: 100%;
  margin: 0 auto;
}
.timeline li{
  position: relative;
}
.timeline li:not(:last-child){
  padding-bottom: 250px;
}
.timeline li a{
  text-decoration: underline;
}
.timeline li a:hover{
  text-decoration: none;
}
.timeline li p,
.timeline h3{
  margin-left: 70px;
}
.timeline h3{
  display: flex;
}
.timeline h3 span{
  padding-top: 2%;
}
.timeline h3 span.num{
  padding-right: 10px;
  font-size: 65%;
}
.timeline h3 span.between{
  display: block;
  height: 28px;
  line-height: 28px;
  border-radius: 14px;
  margin-left: auto;
  padding: 0 20px;
  color: #fff;
  font-size: 11px;
  letter-spacing: .2em;
  white-space: nowrap;
  background-color: var(--font-black);
}

/*Line*/
.border-line{
  position: absolute;
  left: 0.24em;
  top: 0;
  width: 2px;
  height: 0;/*はじめは高さを0に*/
  background: #eee;
}
/*丸の設定*/
.timeline li::after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: #818384;
  border-radius: 50%;
}

@media screen and (max-width:1100px){
  
  .timeline h3{
    position: relative;
    padding-top: 12%;
  }
  .timeline h3 span.between{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    font-size: 1rem;
  }

}

@media screen and (max-width:650px){
  
  .timeline li:not(:last-child){
    padding-bottom: 150px;
  }
  .timeline li p,
  .timeline h3{
    margin-left: 12%;
  }
  .timeline h3 span{
    padding-top: 2.5%;
  }
  .timeline h3 span.num{
    padding-right: 2px;
  }
  /*Line*/
  .border-line{
    width: 1px;
  }

}