@charset "utf-8";
.content {
  margin: 0 auto;
  width: 1000px;
  margin-bottom: 118px;
}

@media screen and (max-width: 768px) {
  .content {
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
  }
}

.history-content {
  position: relative;
  padding: 165px 19px 0;
}

@media screen and (max-width: 768px) {
  .history-content {
    padding-top: 108px;
  }
}

.history-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: #000;
  left: 50%;
  top: 72px;
}

.history-line::before,.history-line::after{
  position: absolute;
  left: calc(50% - 7px);
  display: block;
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #000;
}

.history-line::after {
  bottom: 0;
}

@media screen and (max-width: 768px) {
  .history-line {
    position: absolute;
    left: 26px;
    top: 55px;
  }
}

.history-col2-wrap {
  display: flex;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  .history-col2-wrap {
    flex-direction: column;
  }
}

.history-col2-wrap:not(:first-child){
  margin-top: 100px;
}

.history-col2-wrap--reverse{
  flex-direction: row-reverse;
}

@media screen and (max-width: 768px) {
  .history-col2-wrap--reverse{
    flex-direction: column;
  }
}

.history-col2-item {
  width: 50%;
}

@media screen and (max-width: 768px) {
  .history-col2-item {
    width: 100%;
  }
}

.history-col2-img {
  margin-left: auto;
  margin-right: -10px;
  display: block;
  z-index: 2;
  position: relative;
}

.history-col2-img--small {
  margin-top: 75px;
}

@media screen and (max-width: 768px) {
  .history-col2-img {
    margin-left: -0.3%;
    width: 75%;
  }

  .history-col2-img--small {
    margin-top: 0;
  }
}

.history-col2-wrap--reverse .history-col2-img {
  margin-right: auto;
  margin-left: -10px;
  display: block;
  z-index: 2;
  position: relative;
}

@media screen and (max-width: 768px) {
  .history-col2-wrap--reverse .history-col2-img {
    margin-right: auto;
    margin-left: -0.3%;
  }
}

.history-col2-wrap .history-col2-text-wrap {
  padding-left: 60px;
}

.history-col2-wrap--reverse .history-col2-text-wrap {
  padding-right: 60px;
  padding-left: 0;
}

@media screen and (max-width: 768px){
  .history-col2-wrap .history-col2-text-wrap {
    padding-left: 49px;
  }

  .history-col2-wrap--reverse .history-col2-text-wrap {
    padding-right: 0;
    padding-left: 49px;
  }
}

.history-col2-title {
  font-size: 3rem;
}

@media screen and (max-width: 768px) {
  .history-col2-title {
    font-size: 2.4rem;
  }
}

.history-col2-year {
  display: block;
  font-size: 7.4rem;
  font-family: "Times New Roman" , serif;
  color: #EC0C0D;
  margin-top: -30px;
  letter-spacing: 0.06em;
}

@media screen and (max-width: 768px) {
  .history-col2-year {
    font-size: 5rem;
    margin-top: 0;
  }
}


.history-col2-year--word{
  font-size: 6rem;
}

@media screen and (max-width: 768px) {
  .history-col2-year--word{
    font-size: 4rem;
  }
}


.history-col2-year span {
  font-size: 4.4rem;
}

@media screen and (max-width: 768px) {
  .history-col2-year span {
    font-size: 3rem;
  }
}

.history-col2-title-detail {
  line-height: 1.46;
  margin-top: -90px;
  display: block;
}

@media screen and (max-width: 768px) {
  .history-col2-title-detail {
    margin-top: -60px;
  }
}

.history-col2-text {
  font-size: 1.6rem;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .history-col2-text {
    font-size: 1.5rem;
  }
}