:root {
  --main_event_height: 2886px;
}

main.event {
  overflow: hidden;
}

.upcoming_events {
  padding-top: 128px;
  padding-bottom: 105px;
  background-color: #8aa935;
  position: relative;
}
.upcoming_events::before {
  background-image: url(../../images/module/bg_4circle.svg);
  background-size: contain;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  overflow-y: hidden;
  position: absolute;
  top: -221px;
  left: 50%;
  transform: translateX(calc(-50% + 50px));
  width: 2600px;
  height: calc(var(--main_event_height) + 221px);
  min-height: 3107px;
  background-repeat: repeat-y;
}
@media only screen and (max-width: 768px) {
  .upcoming_events::before {
    top: -117px;
    height: calc(var(--main_event_height) + 117px);
    min-height: 867px;
    background-image: url(../../images/module/bg_4circle_sp.svg);
    width: 666px;
    transform: translateX(calc(-50% - 0px));
  }
}
.upcoming_events .inner {
  padding-left: 20px;
  padding-right: 20px;
  /*
  &::after {
    background-image: url(../../images/module/bg_circle_small.svg);
    background-size: contain;
    bottom: -42px;
    content: "";
    display: block;
    height: 404px;
    mix-blend-mode: multiply;
    position: absolute;
    right: -196px;
    width: 404px;
  }*/
}
.upcoming_events .event_header {
  text-align: center;
}
.upcoming_events h2 {
  color: #fff;
  font-size: 3.6rem;
  /* margin-bottom: 40px; */
  position: relative;
  text-align: center;
  z-index: 1;
  background-color: #8aa935;
  padding-top: 24px;
  padding-bottom: 24px;
  display: inline-block;
}
@media only screen and (max-width: 768px) {
  .upcoming_events h2 {
    font-size: 2.4rem;
  }
}
.upcoming_events h2::after {
  background-image: url(../../images/module/title_bg.svg);
  background-size: contain;
  content: "";
  display: block;
  height: 88px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  z-index: -1;
  mix-blend-mode: multiply;
}
@media only screen and (max-width: 768px) {
  .upcoming_events h2::after {
    width: 60px;
    height: 60px;
  }
}
.upcoming_events .event_cat_list_wrap {
  margin-top: 90px;
  margin-bottom: 62px;
  position: relative;
}
.upcoming_events .event_list_wraps {
  position: relative;
  z-index: 1;
}

.past_events {
  padding-top: 125px;
  padding-bottom: 150px;
  position: relative;
}
.past_events h2 {
  color: #384d00;
  font-size: 3.6rem;
  margin-bottom: 40px;
  position: relative;
  text-align: center;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .past_events h2 {
    font-size: 2.4rem;
  }
}
.past_events h2::after {
  background-image: url(../../images/module/title_bg.svg);
  background-size: contain;
  content: "";
  display: block;
  height: 88px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .past_events h2::after {
    width: 60px;
    height: 60px;
  }
}
.past_events .inner {
  padding-left: 20px;
  padding-right: 20px;
  /*&::before {
    background-image: url(../../images/module/bg_circle_large.svg);
    background-size: contain;
    content: "";
    display: block;
    height: 602px;
    right: -350px;
    mix-blend-mode: multiply;
    overflow-y: hidden;
    position: absolute;
    top: 363px;
    width: 602px;
  }*/
}
.past_events .event_list_wraps {
  padding-top: 40px;
  position: relative;
  z-index: 1;
}