main {
  line-height: 1;
}

.timeline {
  width: 100%;
}

.timeline__head {
  display: flex;
  justify-content: center;
}

.timeline__head img {
  width: 120px;
  height: 120px;
}

.timeline__body {
  width: 100%;
  padding-top: 32px;
  position: relative;
}

.timeline__body:before {
  content: "";
  width: 1px;
  height: 100%;
  border: 1px solid var(--border);
  position: absolute;
  top: 0;
  left: 50%;
}

.timeline__item {
  display: flex;
}

.timeline__item:nth-of-type(odd) {
  flex-direction: row-reverse;
}

.timeline__item:nth-of-type(even) {
}

.timeline__item > div {
  width: 50%;
  padding: 8px 28px;
  display: flex;
  gap: 20px;
  position: relative;
}

.timeline__item > div:after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 100%;
  border: 2px solid var(--primary);
  position: absolute;
  top: 30px;
  z-index: 1;
}

.timeline__item:nth-of-type(even) > div {
  text-align: right;
  padding-left: 0;
  flex-direction: row-reverse;
}
.timeline__item:nth-of-type(even) > div:after {
  right: -5px;
}

.timeline__item:nth-of-type(odd) > div {
  padding-right: 0;
}

.timeline__item:nth-of-type(odd) > div:after {
  left: -3px;
}

.timeline__item > div > div {
  color: var(--primary);
  font-family: var(--font-smtown);
  font-size: 36px;
}

.timeline__item > div > dl > dt {
  color: #434867;
  font-size: 15px;
  font-weight: 800;
  padding-bottom: 4px;
}

.timeline__item > div > dl > dt:first-child {
  padding-top: 4px;
}

.timeline__item > div > dl > dd {
  color: #2E2D2D;
  font-size: 15px;
  line-height: 20px;
}

.timeline__item > div > dl > dd + dt {
  padding-top: 20px;
}

.highlight {
  display: inline !important;
  background: #FFE1E9 !important;
  box-decoration-break: clone !important;
  padding: 1px 2px !important;
}