article
{
  header
  {
    margin-bottom:40px;
    h1
    {
      font-size: 32px;
      line-height: 40px; /* 125% */
      letter-spacing: 1.28px;
      margin-bottom:40px;
      text-align: center;
    }
    picture
    {
      display: block;
      width: 100%;
      img
      {
        display: block;
        width: 100%;
      }
    }
  }
  #style-a
  {
    .article-list
    {
      margin-bottom:40px;
      h2
      {
        font-size: 18px;
        line-height: 24px; /* 133.333% */
        letter-spacing: 0.72px;
        margin-bottom:40px;
      }
      >div
      {
        
        h3
        {
          display: inline-block;
          border:1px solid $text-color;
          padding:10px 32px;
          border-radius: 100px;
          margin-bottom:40px;
          font-weight: 700;
        }
        .description
        {
          margin-bottom:40px;
          
          p
          {
            margin-bottom:16px;
          }
        }
        .note
        {
          border-top:1px solid #A3A3A3;
          dl
          {
            border-bottom:1px solid #A3A3A3;
            padding:24px 0;
            dt
            {
              font-weight: 700;
              margin-bottom:16px;
            }
          }
        }
      }
    }
    
  }
  #style-b
  {
    >div
    {
      margin-bottom:40px;
      h2
      {
        font-size: 24px;
        font-weight: 700;
        line-height: 30px; /* 125% */
        letter-spacing: 0.96px;
        margin-bottom:40px;
      }
      ol
      {
        li
        {
          margin-bottom:16px;
          span
          {
            display: inline-block;
            font-weight: 700;
            padding:10px 32px;
            border:1px solid $text-color;
            border-radius: 100px;
            margin-bottom:16px;
          }
          
        }
      }
    }
  }
  @media(min-width:768px)
  {
    header
    {
      margin-bottom:88px;
      h1
      {
        margin-bottom:88px;
      }
    }
    
    #style-a
    {
      .article-list
      {
        margin-bottom:56px;
        display: flex;
        h2
        {
          flex:1;
        }
        >div
        {
          width:80%;
          .note
          {
            display: flex;
            flex-wrap:wrap;
            border-bottom:1px solid #A3A3A3;
            padding-top:40px;
            dl
            {
              border-bottom: 0;
              padding:0 40px;
              margin-bottom:40px;
              width: calc(100% / 3);
              border-right:1px solid #A3A3A3;
              &:nth-child(3n)
              {
                padding-right: 0;
                border-right: 0;
              }
              &:nth-child(3n + 1)
              {
                padding-left: 0;
              }
              &:last-child
              {
                border-right: 0;
              }

              
            }
          }
        }
      }
    }

    #style-b
    {
      display: flex;
      flex-wrap:wrap;
      >div
      {        
        width: calc(50% - 20px);
        &:nth-child(2n)
        {
          margin-left: 20px;
        }
        &:nth-child(2n + 1)
        {
          margin-right: 20px;
        }
      }
    }
  }
}