article
{
  h1
  {
    font-size: 32px;
    line-height: 40px; /* 125% */
    letter-spacing: 1.28px;
    text-align: center;
    margin-bottom:88px;
  }
  #main-photo
  {
    display: block;
    img
    {
      display: block;
      width: 100%;
    }
  }
  #note
  {
    padding:48px 56px;
    margin-bottom:48px;
    background-color: #F7F7F7;
  }
  #content
  {
    margin-bottom:40px;
    img
    {
      max-width:100%;
      display: block;
    }
    p
    {
      margin-bottom:16px;
    }
  }
  #product-list
  {
    margin-bottom:40px;
    h2
    {
      display: flex;
      margin-bottom:40px;
      span
      {
        padding:10px 32px;
        border-radius: 100px;
        border:1px solid $text-color;
      }
    }
    ul
    {
      li
      {
        margin-bottom:24px;
        a
        {
          display: flex;
          picture
          {
            width: 110px;
            height:110px;
            overflow: hidden;
            img
            {
              width: 100%;
              height:100%;
              object-fit: cover;
              object-position: center center;
              transition-duration:.5s;
            }
            &:hover
            {
              img
              {
                transform: scale(1.1);
              }
            }
          }
          >div
          {
            padding-left:32px;
            span
            {
              display: block;
              &.t
              {
                margin-bottom:8px;
              }
              &.p
              {
                color:#C30D23;
              }
            }
          }
        }
      }
    }
  }
  #note-photo
  {
    display: block;
    margin-bottom:40px;
    img
    {
      display: block;
      width: 100%;
    }
  }
  #note-list
  {
    dl
    {
      margin-bottom: 40px;
      dt
      {
        display: flex;
        margin-bottom:40px;
        span
        {
          padding:10px 32px;
          border-radius: 100px;
          border:1px solid $text-color;
        }
      }
    }
  }
  @media(min-width:768px)
  {
    #product-list
    {
      ul
      {
        display: flex;
        flex-wrap:wrap;
        li
        {
          margin:0 20px 32px 20px;
          width: calc(50% - 20px);
          &:nth-child(2n)
          {
            margin-right: 0;
          }
          &:nth-child(2n + 1)
          {
            margin-left:0;
          }
        }
      }
    }
    #note-list
    {
      display: flex;
      flex-wrap:wrap;
      dl
      {
        margin:0 20px 40px 20px;
        width: calc(50% - 20px);
        &:nth-child(2n)
        {
          margin-right: 0;
        }
        &:nth-child(2n + 1)
        {
          margin-left:0;
        }
      }
    }
  }
  @media(max-width:767px)
  {
    h1
    {
      margin-bottom:40px;
    }
    #note
    {
      padding:40px 24px;
    }
  }
}