.notification {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f1f0ee;
}

.notification__block {
  flex: 0 0 calc(50% - 4px);
  max-width: calc(50% - 4px);
  font-size: 1.8rem;
  line-height: 2.1rem;
  background-color: #fff;
  padding: 8rem 4% 8rem;
}

.notification__block__title {
  font: inherit;
  letter-spacing: 1.5px;
  margin-bottom: 5.6rem;
}

.notification__block__title.text-noti-japan {
  font-size: 18px;
}

.notification-item {
  display: flex;
  margin-bottom: 2.4rem;
}

.notification-item:last-of-type {
  margin-bottom: 3.2rem;
}

.notification-item__time {
  font-size: 1.3rem;
  letter-spacing: 0.4px;
  line-height: 2.1rem;
  flex: 0 0 16%;
  margin-right: 1.8rem;
}

.notification-item__content {
  font-size: 1.3rem;
  line-height: 2.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .notification__block__title.text-noti-japan {
    font-size: 16px;
  }

  .notification__block__title.english {
    font-size: 16px;
  }

  .notification-item {
    display: block;
    margin-bottom: 2.6rem;
  }

  .notification-item:last-of-type {
    margin-bottom: 3.2rem;
  }

  .notification-item__content {
    letter-spacing: 1.35px;
  }
}

/* @media (max-width: 520px) {
  .notification {
    flex-direction: column;
  }

  .notification__block:nth-child(even),
  .notification__block {
    flex: 0 0 100%;
    max-width: 100%;
    background-color: #fff;
    padding: 5.6rem 1.6rem 5.6rem;
  }

  .notification__block + .notification__block {
    margin-top: 8px;
  }

  .notification__block__title {
    margin-bottom: 4rem;
  }

  .notification-item__time {
    margin-right: 0;
    margin-bottom: 1.6rem;
  }
} */

/* new style 4.10.2022 */

@media (max-width: 1023px) {
  .notification {
    flex-direction: column;
  }

  .notification__block:nth-child(even),
  .notification__block {
    flex: 0 0 100%;
    max-width: 100%;
    background-color: #fff;
    padding: 5.6rem 1.6rem 5.6rem;
  }

  .notification__block + .notification__block {
    margin-top: 8px;
  }

  .notification__block__title {
    margin-bottom: 4rem;
  }

  .notification-item__time {
    margin-right: 0;
    margin-bottom: 1.6rem;
  }
}

/* new styles 3.10.2022 */

@media screen and (max-width: 1263px) {
  .notification__block {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

@media screen and (max-width: 519px) {
  .notification__block {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }
}
