.event__h2 {
  background: #50b2f0;
  color: #FFF;
}

.ttl__box {
  border-color: #50b2f0;
}

.ttl__box_h1 {
  background: #50b2f0;
  color: #FFF;
}

.ttl__box_h2 {
  color: #50b2f0;
}

.ttl__img {
  max-width: 563px;
}

@media only screen and (max-width: 640px) {
  .ttl__img {
    max-width: 85%;
  }
}

.event__list {
  margin: 4rem 0 0;
}

.event__list_box {
  display: flex;
  justify-content: space-between;
  padding: 0 0 1rem;
  margin: 0;
}

.event__list_month {
  width: 8rem;
  padding: 0 2rem 0 0;
  box-sizing: border-box;
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  color: #1e72a8;
  text-align: right;
}

@media only screen and (max-width: 640px) {
  .event__list_month {
    width: 6rem;
  }
}

.event__list_month::before, .event__list_month::after {
  content: "";
  position: absolute;
}

.event__list_month::before {
  width: 1.4rem;
  height: 1.4rem;
  border-style: solid;
  border-width: 4px;
  border-radius: 100%;
  position: absolute;
  top: 1.2rem;
  right: -1.1rem;
}

.event__list_month::after {
  width: 4px;
  height: calc(100% - 5rem);
  background: #d4d4d4;
  position: absolute;
  bottom: 0;
  right: -2px;
}

.event__list_num {
  font-size: 2.8rem;
}

@media only screen and (max-width: 640px) {
  .event__list_num {
    font-size: 2rem;
  }
}

.event__list_cont {
  width: calc(100% - 8rem);
  display: flex;
  justify-content: space-between;
  padding: 0 0 2rem 3rem;
  margin: 0;
}

@media only screen and (max-width: 640px) {
  .event__list_cont {
    width: calc(100% - 6rem);
    padding: 0 0 0 2rem;
  }
}

.event__list_img {
  width: 26%;
}

.event__list_desc {
  width: calc(100% - 28%);
  text-align: left;
}

.event__list_ttl {
  display: inline-block;
  width: 263px;
  padding: .5rem 1.4rem;
  box-sizing: border-box;
  margin: 0 0 1.2rem;
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  color: #FFF;
}

@media only screen and (max-width: 640px) {
  .event__list_ttl {
    display: inline-block;
    width: auto;
    padding: .5rem .8rem;
    font-size: 1.4rem;
  }
}

.event__list_ttl::after {
  display: none;
  content: "";
  width: 1.7rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: -1.7rem;
}

.event__list_sub {
  display: inline-block;
  padding: .4rem .8rem;
  background: #FFF;
  line-height: 1;
  font-size: 1.4rem;
}

@media only screen and (max-width: 640px) {
  .event__list_sub {
    font-size: 1.2rem;
  }
}

.event__list_official .event__list_month::before {
  border-color: #50b2f0;
}

.event__list_official .event__list_month.have_month::before {
  background: #50b2f0;
}

.event__list_official .event__list_ttl {
  background: #50b2f0;
}

.event__list_official .event__list_ttl::after {
  background: url(../img/event/event_ribon_01.png) 50% 50% no-repeat/100% 100%;
}

.event__list_official .event__list_ttl.online {
  background: #FF5C5C;
}

.event__list_official .event__list_sub {
  color: #50b2f0;
}

.event__list_unofficial .event__list_month::before {
  border-color: #72A8BA;
}

.event__list_unofficial .event__list_ttl {
  background: #72A8BA;
}

.event__list_unofficial .event__list_ttl::after {
  background: url(../img/event/event_ribon_02.png) 50% 50% no-repeat/100% 100%;
}

.event__list_unofficial .event__list_sub {
  color: #72A8BA;
}