@charset "UTF-8";

#history .main {
  background: url("../img/history/img_main_pc.jpg")no-repeat;
  background-size: cover;
  background-position: center;
}

#history .container {
  padding: 170px 0 300px;
  position: relative;
}

#history .container::before {
  position: absolute;
  content: "";
  background: #f5f5f5;
  width: 50%;
  left: 0;
  height: calc(100% - 300px);
  top: 100px;
  pointer-events: none;
  z-index: 0;
}

#history .timeline {
    margin: 50px auto 0;
    width: 100%;
    position: relative;
}

#history .timeline::before {
  position: absolute;
  content: "";
  background: #205a9b;
  width: 1px;
  height: calc(100% - 80px);
  left: 5px;
  top: 14px;
}

#history .timeline th {
  width: 200px;
  text-align: left;
  vertical-align: top;
  color: #c6af6a;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
}

#history .timeline th span {
  display: block;
  position: relative;
  padding: 0 100px 0 30px;
}

#history .timeline th span::before {
  position: absolute;
  content: "";
  background: #004a98;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 0;
  top: 13px;
}

#history .timeline th span::after {
  position: absolute;
  content: "";
  background: #c6af6a;
  width: 80px;
  height: 1px;
  right: 0;
  top: 17px;
}

#history .timeline td {
  text-align: left;
  vertical-align: top;
  padding: 0 0 60px 20px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 2;
}

#history .timeline tr:last-child td {
  padding-bottom: 0;
}

@media screen and (max-width: 1100px){
  #history .container {
    padding: 100px 0 150px;
  }

}


@media screen and (max-width: 767px) {

  #history .main {
    background: url("../img/history/img_main_sp.jpg")no-repeat;
    background-size: cover;
    background-position: center;
  }

  #history .container {
    padding: 100px 0;
  }

  #history .container::before {
    height: calc(100% - 100px);
    top: 50px;
  }

  #history .timeline th {
      font-size: 1.2rem;
      width: 70px;
      line-height: 2;
  }

  #history .timeline th span {
      padding: 0 0 0 15px;
  }

  #history .timeline th span::before {
      width: 5px;
      height: 5px;
      top: 10px;
  }

  #history .timeline th span::after {
      display: none;
  }

  #history .timeline td {
      padding: 0 0 40px;
      font-size: 1.2rem;
  }


  #history .timeline::before {
      left: 2px;
      height: calc(100% - 168px);
  }


}

@media screen and (max-width: 375px){
  #history .timeline::before {
      height: calc(100% - 192px);
  }
}

@media screen and (max-width: 320px){
  #history .timeline::before {
      height: calc(100% - 263px);
  }
}