.list {
  margin: 0 auto;
  padding: 6.4rem 2rem;
  width: 36rem;
  @media (width >= 961px) {
    padding: 9rem 2rem;
    width: 96rem;
  }

  ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;

    li {
      border-bottom: .1rem solid #c6c6c6;
      margin: 0 0 2.4rem;
      padding: 0 0 2rem;
      position: relative;
      text-align: left;
      
      a {
        color: #1a1a1a;
        text-decoration: none;
        @media (width >= 961px) {
          display: flex;
        }
        time {
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.8;
          margin: 0 0 .5rem;
          @media (width >= 961px) {
            padding: .24rem 0;
            margin: 0;
            width: 12.3rem;
          }
        }

        span {
          display: block;
          font-size: 1.6rem;
          line-height: 2;
        }

        img {
          bottom: 2rem;
          height: 3.2rem;
          position: absolute;
          right: 0;
          width: 3.2rem;
          @media (width >= 961px) {
            bottom: auto;
            top: 0;;
          }
        }
        
        &:hover {
          time, span {
            opacity: .7;
          }

          img {
            transform: rotate(-45deg);
          }
        }
      }

      &:last-of-type {
        margin: 0 0 5rem;
        @media (width >= 961px) {
          margin: 0 0 5.4rem;
        }
      }
    }
  }
}

#main-area {
  font-size: 1.6rem;
  margin: 0 auto;
  padding: 6.4rem 2rem;
  width: 36rem;
  @media (width >= 961px) {
    padding: 9rem 2rem;
    width: 96rem;
  }

  .sub-header {
    padding: 0;
    width: 100%;

    h1 {
      margin: 0 0 2rem;
    }
  }
}