#head
{
  background-color: $bg-color;
}

#body
{
  background: $bg-color;
  .main-title
  {
    position: relative;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 2.4px;
    &::after
    {
      position: absolute;
      content:' ';
      width: 21px;
      height: 15px;
      display: block;
      background-color: #9CCCD3;
      border-radius: 100%;
      top:-24px;
      left:calc(50% - 10px);
    }
  }
  .wrap
  {
    &:has(#content)
    {
      background-image:url('<?=userimg($article->bg->data)?>');
      background-repeat: no-repeat;
      background-size:contain;
      background-position: bottom center;
    }
  }
  #content
  {
    max-width: 570px;
    margin-left:auto;
    margin-right:auto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1.6px;
    color:$main-color;
    text-align: center;
    padding-bottom:160px;
    h1
    {
      
      margin-bottom:30px;
    }
    .second-title
    {
      display: block;
      margin-bottom:30px;
      font-size: 20px;
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 2px;
    }
    p
    {
      padding:15px 0;
    }
  }


  #service
  {
    background: $bg-url;
    padding-top:100px;
    padding-bottom:50px;
    font-weight: 400;
    line-height: 150%;
    color:$main-color;
    h2.main-title
    {
      margin-bottom:50px;
    }
    .row-list
    {
      background:url('<?=userimg($service->photo->data)?>') no-repeat bottom right;
      .row
      {
        width: 70%;
        position: relative;
        padding:36px 0;
        border-bottom: 1px solid #C4BCAC;
        &::after
        {
          content:' ';
          width: 3px;
          background-color: $main-color;
          display: block;
          height:50%;
          position: absolute;
          left:26px;
          top:0;
        }
        &::before
        {
          content:' ';
          width: 3px;
          background-color: $main-color;
          display: block;
          height:50%;
          position: absolute;
          left:26px;
          bottom:0;
        }

        &:first-child
        {
          &::after
          {
            display: none;
          }
        }
        
        &:last-child
        {
          &::before
          {
            display: none;
          }
        }
        h3
        {
          display: flex;
          align-items:center;
          font-size: 20px;
          font-weight: 400;
          letter-spacing: 2px;
          span
          {
            position: relative;
            z-index:1;
            text-align: center;
            border-radius: 100%;
            width: 54px;
            height: 54px;
            background-color: $main-color;
            font-size: 24px;
            line-height: 54px;
            letter-spacing: 2.4px;
            color:$bg-color;
          }
        }
        >div
        {
          font-size: 16px;
          letter-spacing: 1.6px;
          ul
          {
            list-style: inside;
          }
        }
      }
    }
    
    @media(min-width:768px)
    {
      .row-list
      {
        .row
        {
          display: flex;
          
          h3
          {
            display: flex;
            width: 50%;
            span
            {
              margin-right:30%;
            }
          }
          >div
          {
            width: 70%;
          }
        }
      }
      
    }
    @media(max-width:767px)
    {

      
      .row-list
      {
        background-position: bottom center;
        background-size: contain;
        padding-bottom:80vw;
        .row
        {
          width: 100%;
          h3
          {
            span
            {
              margin-right:25px;
            }
          }
          >div
          {
            padding-left:80px;
          }
        }
      }
    }
  }
}

#note-list
{
  background: $bg-url;
  padding-top:50px;
  padding-bottom:50px;
  
  h2.main-title
  {
    text-align: left;
    padding-left: 30px;
    margin-bottom:50px;
    &::after
    {
      left:0px;
      top:12px;
    }
  }
  .data-list
  {
    display: flex;
    border-bottom: 1px solid #C4BCAC;
    padding-bottom:50px;
    .row
    {
      width: 270px;
      display: flex;
      flex-direction:column;
      h3
      {
        text-align: center;
        background-color: $main-color;
        padding:18px 0;
        border-radius: 30px 30px 0 0;
        font-size: 20px;
        font-weight: 400;
        line-height: 150%; /* 30px */
        letter-spacing: 2px;
        color:$bg-color;
      }
      .content
      {
        flex:1;
        background-color: $bg-color;
        padding:10px 10px 20px 10px;
        font-size: 16px;
        font-weight: 400;
        line-height: 150%; /* 24px */
        letter-spacing: 1.6px;
        color:$main-color;
        border:1px dashed $main-color;
        border-top:0px;
        border-radius: 0 0 30px 30px;
        ul
        {
          list-style: inside;
        }
      }

      
      
    }
    @media(min-width:1500px)
    {
      flex-wrap:wrap;
      .row
      {
        margin-left:calc((100% - 1350px) / 8);
        margin-right:calc((100% - 1350px) / 8);
        margin-bottom:20px;
        &:nth-child(5n)
        {
          margin-right:0px;
        }
        &:nth-child(5n + 1)
        {
          margin-left:0px;
        }
      }
    }
    @media(max-width:1499px)
    {
      overflow-y: auto;
      .row
      {
        min-width:270px;
        margin-left:10px;
        margin-right:10px;
        &:last-child
        {
          margin-right:0px;
        }
        &:first-child
        {
          margin-left:0px;
        }
      }
    }
  }
}

#info-list
{
  background: $bg-url;
  padding-top:50px;
  padding-bottom:50px;
  h2.main-title
  {
    text-align: left;
    padding-left: 30px;
    margin-bottom:50px;
    &::after
    {
      left:0px;
      top:12px;
    }
  }
  .data-list
  {
    .row
    {
      display: flex;
      margin-bottom:30px;
      color:$main-color;
      i
      {
        width: 78px;
        height: 78px;
        border-radius: 20px;
        background-color: #C4BCAC;
        color:$bg-color;
        display: flex;
        justify-content:center;
        align-items:center;
        font-size:30px;
      }
      div
      {
        width:calc(100% - 78px);
        padding:0 0 0 20px;
        h3
        {
          font-size: 20px;
          font-weight: 400;
          line-height: 150%; /* 30px */
          letter-spacing: 2px;
          margin-bottom:10px;
        }
        p
        {
          font-size: 16px;
          font-weight: 400;
          line-height: 150%; /* 24px */
          letter-spacing: 1.6px;
        }
      }
    }
    @media(min-width:768px)
    {
      display: flex;
      flex-wrap:wrap;
      .row
      {
        width: calc(50% - 10px);
        margin:0 10px 30px 10px;
        &:nth-child(2n)
        {
          margin-right: 0;
        }
        &:nth-child(2n + 1)
        {
          margin-left: 0;
        }
      }
    }
  }
}


#service-detail
{
  background: $bg-url;
  padding-top:50px;
  padding-bottom:50px;
  h2.main-title
  {
    margin-bottom:50px;
  }
  #service-detail-menu
  {
    li
    {
      margin-bottom:30px;
      label
      {
        border-radius: 20px;
        background-color: $bg-color;
        color:$main-color;
        padding:6px;
        display: block;
        cursor: pointer;
        input
        {
          display: none;
        }
        span
        {
          border:1px dashed $main-color;
          border-radius: 20px;
          display: block;
          padding:20px 0;
          text-align: center;
          font-size: 20px;
          font-weight: 400;
          line-height: 150%; /* 30px */
          letter-spacing: 2px;
        }
        &:has(input:checked)
        {
          background-color: $main-color;
          color:$bg-color;
          span
          {
            border-color:$bg-color;
          }
        }
      }
    }
  }

  #service-detail-list
  {
    .service-detail
    {
      border-top: 1px solid #C4BCAC;
      display: none;
      .row
      {
        display: flex;
        padding:40px 0;
        border-bottom: 1px solid #C4BCAC;
        &:has(picture)
        {
          picture
          {
            width: 143px;
            height:143px;
            background-color: #C4BCAC;
            border-radius: 30px;
            img
            {
              display: block;
              height: 100%;
              width: 100%;
              object-fit: contain;
            }
          }
          >div
          {
            width: calc(100% - 143px);
            padding-left:40px;
          }
        }

        >div
        {
          font-weight: 400;
          color:$main-color;
          font-size: 16px;
          font-weight: 400;
          line-height: 150%; /* 24px */
          letter-spacing: 1.6px;
          h3
          {
            font-size: 20px;            
            letter-spacing: 2px;
            margin-bottom:10px;
          }
          ul
          {
            list-style: inside;
          }
        }
      }
    }
  }
  @media(min-width:768px)
  {
    display: flex;
    flex-wrap:wrap;
    h2
    {
      width: 100%;
    }
    #service-detail-menu
    {
      width: 170px;
      margin-right:5%;
    }
    #service-detail-list
    {
      flex:1;
    }
  }
  @media(max-width:767px)
  {
    #service-detail-menu
    {
      display: flex;
      flex-wrap:wrap;
      li
      {
        margin:0 10px 20px 10px;
        width: calc(50% - 10px);
        &:nth-child(2n)
        {
          margin-right: 0;
        }
        &:nth-child(2n + 1)
        {
          margin-left: 0;
        }
      }
    }
  }

  &:has(#service-detail-menu li:nth-child(1) input:checked)
  {
    #service-detail-list .service-detail:nth-child(1)
    {
      display: block;
    }
  }
  &:has(#service-detail-menu li:nth-child(2) input:checked)
  {
    #service-detail-list .service-detail:nth-child(2)
    {
      display: block;
    }
  }
  &:has(#service-detail-menu li:nth-child(3) input:checked)
  {
    #service-detail-list .service-detail:nth-child(3)
    {
      display: block;
    }
  }
  &:has(#service-detail-menu li:nth-child(4) input:checked)
  {
    #service-detail-list .service-detail:nth-child(4)
    {
      display: block;
    }
  }
}