article
{
  #content
  {
    picture
    {
      display: block;
      img
      {
        display: block;
        width: 100%;
      }
    }
    .content
    {
      h2
      {
        font-size: 24px;
        line-height: 35px; /* 145.833% */
        letter-spacing: 0.96px;
        margin-bottom: 24px;
      }
      p
      {
        margin-bottom: 24px;
      }
    }
  }
  #service1
  {
    h2
    {
      font-size: 24px;
      line-height: 35px;
      letter-spacing: 0.96px;
      margin-bottom: 48px;
    }
    dl
    {
      margin-bottom: 32px;
      dt
      {
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 0.72px;
        margin-bottom: 12px;
        &::before
        {
          margin-right:5px;
          content:' ';
          width: 32px;
          height: 32px;
          display: inline-block;
          background:url("/webdata/tplimg/icon.png") no-repeat center center;
        }
        
      }
    }
  }
  #service2
  {
    ul
    {
      position: relative;
      width: 420px;
      height: 400px;
      text-align: center;
      li
      {
        position: absolute;      
        width: 220px;
        height: 220px;
        color:#F3A291;
        border-radius: 100%;
        border:1px dashed $main-color;
        display: flex;
        align-items:center;
        justify-content:center;
        &:nth-child(1)
        {
          top:0;
          left:calc(50% - 110px);
        }
        &:nth-child(2)
        {
          bottom:0;
          left:0;
        }
        &:nth-child(3)
        {
          bottom:0;
          right:0;
        }
      }
    }
  }
  #service3
  {
    h2
    {
      font-size: 24px;
      line-height: 35px; /* 145.833% */
      letter-spacing: 0.96px;
      margin-bottom:64px;
    }
    .data-list
    {
      >div
      {
        h3
        {
          font-weight: 700;
          margin-bottom: 24px;
        }

      }
    }
  }

  @media(min-width:768px)
  {
    #content
    {
      padding-top:98px;
      padding-bottom: 98px;
      display: flex;
      picture
      {
        width: calc(50% - 20px);
        margin-right: 20px;
      }
      .content
      {
        width: calc(50% - 20px);
        margin-left: 20px;
      }
    }
    .service-top
    {
      padding-bottom:120px;
      display: flex;
      justify-content:space-between;
      #service1
      {
        width: 50%;
      }
    }
    #service3
    {
      margin-bottom: 120px;
      .data-list
      {
        display: flex;
        >div
        {
          width: 50%;
          &:nth-child(2n + 1)
          {
            padding-right: 40px;
          }
        }
      }
    }

  }
  @media(max-width:767px)
  {
    #content
    {
      padding-top:48px;
      padding-bottom:48px;
      picture
      {
        margin-bottom: 24px;
      }
    }
    .service-top
    {
      margin-bottom: 60px;
    }
  }
}