@charset "utf-8";

@media all and (min-width: 768px) {
  .content {
    padding: 50px 0;
  }
}

.area {
  max-width: 1000px;
  margin: 45px auto 65px;
  padding: 0 20px;
}

@media all and (min-width: 1001px) {
  .area {
    padding: 0;
  }
}

.content_list {
  display: grid;
  gap: 40px;
  li {
    counter-increment: cnt;
    display: flex;
    flex-wrap: wrap;
    &::before {
      width: 30px;
      content: counter(cnt)".";
      font-size: 2rem;
      font-weight: bold;
      line-height: normal;
    }
  }
  .title {
    width: calc(100% - 30px);
    font-size: 1.8rem;
  }
  .text {
    margin-top: 15px;
  }
}

.content_date {
  text-align: right;
  margin-top: 50px;
}

@media all and (min-width: 768px) {
  .content_list {
    gap: 60px;
    li {
      counter-increment: cnt;
      display: flex;
      flex-wrap: wrap;
      &::before {
        width: 30px;
        content: counter(cnt)".";
        font-size: 2rem;
        font-weight: bold;
        line-height: normal;
      }
    }
    .title {
      width: calc(100% - 30px);
      font-size: 1.8rem;
    }
    .text {
      padding-left: 30px;
    }
  }
  .content_date {
    margin-top: 70px;
  }
}