@charset "utf-8";

._dx-pushforward {
  background-color: #dccb18;
  border-radius: 10px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

.history-list {
  position: relative;
  height: 800px;
}
@media screen and (max-width: 768.98px) {
  .history-list {
    height: 600px;
    height: clamp(600px,160vw,800px);
  }
}
.history-bar {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  display: flex;
  gap: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #aaa 0%, #aaa 10%, #ff9e3d 10%, #ff9e3d 30%, #0fff87 30%, #0fff87 50%, #ffff70 50%, #ffff70 70%, #b7ff70 70%, #b7ff70 90%, #aaa 90%, #aaa 100%);
}
@media screen and (max-width: 768.98px) {
  .history-bar {
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(180deg, #aaa 0%, #aaa 10%, #ff9e3d 10%, #ff9e3d 30%, #0fff87 30%, #0fff87 50%, #ffff70 50%, #ffff70 70%, #b7ff70 70%, #b7ff70 90%, #aaa 90%, #aaa 100%);
  }
}
/*.history-bar-s, .history-bar-e {
  width: 10%;
  background-color: #aaa;
}
.history-bar-2018, .history-bar-2019,
.history-bar-2020, .history-bar-2021 {
  width: 20%;
}
.history-bar-2018 {
  background-color: #ff9e3d;
}
.history-bar-2019 {
  background-color: #0fff87;
}
.history-bar-2020 {
  background-color: #ffff70;
}
.history-bar-2021 {
  background-color: #b7ff70;
}*/

.history-item {
  position: absolute;
  height: 370px;
}
@media screen and (max-width: 768.98px) {
  .history-item {
    z-index: 10;
    width: 48%;
    height: 200px;
  }
}
.history-item._2018 {
  bottom: 0;
  left: 0;
  width: 48%;
}
@media screen and (max-width: 768.98px) {
  .history-item._2018 {
    top: 5%;
    bottom: auto;
    width: 47%;
  }
}
.history-item._2019 {
  top: 0;
  left: 13%;
  width: 50%;
}
@media screen and (max-width: 768.98px) {
  .history-item._2019 {
    top: 25%;
    right: 0;
    left: auto;
    width: 47%;
  }
}
.history-item._2020 {
  bottom: 0;
  left: 48%;
  width: 48%;
}
@media screen and (max-width: 768.98px) {
  .history-item._2020 {
    top: 45%;
    bottom: auto;
    left: 0;
    width: 47%;
  }
}
.history-item._2021 {
  top: 0;
  left: 68%;
  width: 30%;
}
@media screen and (max-width: 768.98px) {
  .history-item._2021 {
    top: 65%;
    right: 0;
    left: auto;
    width: 47%;
  }
}
.history-year {
  position: absolute;
  font-size: 22px;
  font-weight: 700;
}
@media screen and (max-width: 768.98px) {
  .history-year {
    position: static;
    font-size: 20px;
  }
}
.history-item._2018 .history-year._top  {
  top: -24%;
  left: 35%;
}
.history-item._2019 .history-year._bottom {
  bottom: -24%;
  left: 50%;
}
.history-item._2020 .history-year._top {
  top: -24%;
  left: 20%;
}
.history-item._2021 .history-year._bottom {
  bottom: -24%;
  left: 34%;
}
@media screen and (max-width: 768.98px) {
  .history-parts {
    display: none;
  }
}
.history-parts-circle {
  position: absolute;
  display: inline-block;
  background-color: #ddd;
  border-radius: 50%;
  height: 16px;
  width: 16px;
}
.history-item._2018 .history-parts-circle {
  left: 39%;
  top: -8%;
}
.history-item._2019 .history-parts-circle {
  bottom: -8%;
  left: 53%;
}
.history-item._2020 .history-parts-circle {
  left: 24%;
  top: -8%;
}
.history-item._2021 .history-parts-circle {
  bottom: -8%;
  left: 39%;
}
.history-parts-circle::after {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 115px;
  left: 7px;
  border-left: 2px solid #ddd;
}
.history-item._2018 .history-parts-circle::after,
.history-item._2020 .history-parts-circle::after {
  top: 0;
}
.history-item._2019 .history-parts-circle::after,
.history-item._2021 .history-parts-circle::after {
  bottom: 0;
}
.history-circle {
  position: absolute;
  translate: -50% 0;
  z-index: 10;
  width: 200px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}
@media screen and (max-width: 768.98px) {
  .history-circle {
    translate: 0;
    width: 150px;
  }
}
.history-item._2018 .history-circle {
  top: 10%;
  left: 41%;
  background-color: #ff9e3d;
}
@media screen and (max-width: 768.98px) {
  .history-item._2018 .history-circle {
    top: 22%;
    right: 0;
    left: auto;
  }
}
.history-item._2019 .history-circle {
  bottom: 20%;
  left: 54%;
  background-color: #0fff87;
}
@media screen and (max-width: 768.98px) {
  .history-item._2019 .history-circle {
    top: 22%;
    left: 0;
    bottom: auto;
  }
}
.history-item._2020 .history-circle {
  top: 10%;
  left: 26%;
  background-color: #ffff70;
}
@media screen and (max-width: 768.98px) {
  .history-item._2020 .history-circle {
    top: 22%;
    right: 0;
    left: auto;
  }
}
.history-item._2021 .history-circle {
  bottom: 20%;
  left: 41%;
  background-color: #b7ff70;
}
@media screen and (max-width: 768.98px) {
  .history-item._2021 .history-circle {
    top: 22%;
    bottom: auto;
    left: 0;
  }
}
.history-contents {
  position: absolute;
  left: 0;
  z-index: 20;
  display: flex;
  gap: 10px 0;
  padding: 30px;
}
@media screen and (max-width: 768.98px) {
  .history-contents {
    position: relative;
    margin-top: 5px;
    padding: 0;
  }
}
.history-item._2018 .history-contents,
.history-item._2020 .history-contents {
  top: 3%;
  flex-direction: column;
}
@media screen and (max-width: 768.98px) {
  .history-item._2018 .history-contents,
  .history-item._2020 .history-contents {
    top: 0;
  }
}
.history-item._2019 .history-contents,
.history-item._2021 .history-contents {
  bottom: 6%;
  flex-direction: column-reverse;
}
@media screen and (max-width: 768.98px) {
  .history-item._2019 .history-contents,
  .history-item._2021 .history-contents {
    bottom: auto;
    flex-direction: column;
  }
}
@media screen and (max-width: 768.98px) {
  .history-contents .parts-figure {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768.98px) {
  .history-item._2021 .history-contents .parts-figure {
    width: 75%;
  }
}