.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 32px;
  gap: 24px;

  .card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    max-width: 360px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #FFF;
    box-shadow: 2px 2px 6px 0px rgba(255, 255, 255, 0.10);
    margin-bottom: 24px;
    overflow: hidden;

    .image {
      text-align: center;
      padding: 27px 0 26px;
      line-height: 0;
      width: 100%;
      max-width: 358px;
      height: 159px;
      flex-shrink: 0;
      border-radius: 8px 8px 0px 0px;
      background: url(../images/service/function-bg.svg);

      img {
        width: 100%;
      }
    }

    .summary {
      padding: 24px 24px 32px 24px;
      min-height: 240px;
      position: relative;

      .title {
        color: #1a1a1a;
        font-size: var(--wa-font-size-base);
        font-variation-settings: "wght" 700;
        line-height: 160%;
        margin-bottom: 16px;

        span {
          color: #1a1a1a;
          font-size: var(--wa-font-size-xs);
          font-style: normal;
          font-weight: 400;
          line-height: 160%;
        }
      }

      .text {
        color: #333;
      }

      .link-btn {
        gap: 4px;
        padding: 6px 24px;
        align-items: center;
        border-radius: 4px;
        margin-top: 24px;
        position: absolute;
        bottom: 32px;

        &::after {
          width: 16px;
          height: 16px;
          position: relative;
          top: 1px;
        }
      }
    }
  }
}



.main {
  .lower-section {
    padding: 6.5rem 2.5rem;
  }


  /* service-specification */
  .service-specification {
    background-color: #fff;

    .service-specification-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 16px;

      .text {
        color: #333;
      }

      .service-summary {
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: #fff;
        margin-top: 16px;

        .table {
          border-spacing: 0;
          width: 100%;

          thead {
            th {
              background: #f2f2f2;
              padding: 12px 8px;
              text-align: center;
              color: #333;
              font-size: var(--wa-font-size-base);
              font-weight: 500;
              line-height: 160%;
              border: 1px solid #ccc;

              &:first-child {
                width: 200px;
              }

              &:nth-child(3) {
                width: 400px;
              }

              &:nth-child(3) {
                width: 528px;
              }
            }
          }

          tbody {
            th, td {
              padding: 16px;
              text-align: center;
              border: 1px solid #ccc;
              color: #333;
              font-size: var(--wa-font-size-base);
              font-weight: 400;
              line-height: 160%;
            }

            td {
              text-align: left;
            }
          }
        }

        .notes {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .external-link {

          &::after {
            margin: 0 0 -2px 5px;
          }
        }
      }
    }
  }

  /* service-support */
  .service-support {
    background-color: #f1f4ff;
    scroll-margin-top: 104px;

    .support-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 16px;

      .text {
        color: #333;
      }

      .text-bottom {
        color: #666;
        margin-top: 9px;
      }

      .support-summary {
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: #f1f4ff;
        margin-top: 16px;
        width: 100%;

        .table {
          border-spacing: 0;
          width: 100%;

          thead {
            th {
              background: #f2f2f2;
              padding: 12px 8px;
              text-align: center;
              color: #333;
              font-size: var(--wa-font-size-base);
              font-weight: 700;
              font-variation-settings: "wght" 700;
              line-height: 160%;
              border: 1px solid #ccc;

              &:first-child {
                width: 200px;
              }

              &:nth-child(2) {
                width: 400px;
              }

              &:nth-child(3) {
                width: 528px;
              }
            }
          }

          tbody {
            th, td {
              background: #fff;
              padding: 16px;
              text-align: center;
              border: 1px solid #ccc;
              color: #333;
              font-size: var(--wa-font-size-base);
              font-weight: 400;
              line-height: 160%;
            }

            td {
              text-align: left;
            }
          }
        }

        .external-link {

          &::after {
            margin: 0 0 -2px 5px;
          }
        }
      }
    }
  }

  /* service-feature */
  .service-feature {
    background: #fff;
  }

    /* service-tools */
    .lower-section {
      padding: 6.5rem 2.5rem 10rem;
    }
    .service-tools {
      background: #f1f4ff;

      .tools-inner {

        .text {
          margin-top: 16px;
          color: #333;
        }

        .card {
          justify-content: flex-start;
          align-items: flex-start;

          .card-item {
            .summary {
              min-height: 320px;
            }
          }
        }
      }
    }
}

@media (width < 1208px) {
  .card {
    justify-content: space-evenly!important;
  }
}

@media (width < 768px) {
  .main .lower-section {
    padding: 4.5rem 0;

    .sub-headline {
      color: #1a1a1a;
      font-size: 1.375rem; /* 22px */
      font-weight: 500;
      line-height: 160%;
      letter-spacing: 0;
      text-align: left;
    }
  }

  .main .service-specification {

    .service-specification-inner {

      .text {
        line-height: 180%;
        letter-spacing: -1px;
      }

      .service-summary {
        margin-top: 24px;

        .table {
          margin-bottom: 16px;

          .category {
            padding: 8px;
            text-align: center;
            border: 1px solid #ccc;
            font-size: var(--wa-font-size-xs); /*14px */
          }

          .category-name {
            background: #fff;
            padding: 12px 8px;
            text-align: center;
            border: 1px solid #fff;
            color: #333;
            font-size: var(--wa-font-size-xs); /*14px */
            border: 1px solid #ccc;
          }

          .items {
            background: #f2f2f2;
            padding: 12px 8px;
            text-align: center;
            color: #333;
            font-size: var(--wa-font-size-xs); /*14px */
            width: 50%;
          }

          .item {
            background: #fff;
            padding: 12px 8px;
            text-align: left;
            font-size: var(--wa-font-size-xs); /*14px */
          }
        }

        ul {
          margin-top: -8px;
        }

        .notes {
          gap: 16px;
        }

      }
    }
  }

  .main .service-support {
    scroll-margin-top: 72px;

    .support-inner {

      .text {
        line-height: 180%;
        letter-spacing: -1px;
      }

      .support-summary {
        margin-top: 24px;

        .table {
          margin-bottom: 16px;

          .category {
            padding: 8px;
            text-align: center;
            border: 1px solid #ccc;
            font-size: var(--wa-font-size-xs); /*14px */
          }

          .category-name {
            background: #fff;
            padding: 12px 8px;
            text-align: center;
            border: 1px solid #fff;
            color: #333;
            font-size: var(--wa-font-size-xs); /*14px */
            border: 1px solid #ccc;
          }

          .items {
            padding: 12px 8px;
            color: #333;
            font-size: var(--wa-font-size-xs); /*14px */
            width: 50%;
          }

          .item {
            background: #fff;
            padding: 12px 8px;
            text-align: left;
            font-size: var(--wa-font-size-xs); /*14px */
          }
        }

      }
    }
  }

  .main .service-feature {

    .feature-inner {

      .sub-headline {
        margin-bottom: 8px;
      }
    }
  }

  .main .card {
    justify-content: center;

    .card-item {
      height: 100%;
      .summary {

        .title {
          font-size: 1.125rem; /* 18px */
        }

        .link-btn {
          position: relative;
          bottom: 0;
          gap: 8px;
          align-items: center;
        }
      }
    }
  }

  .main {
    & .service-tools {
        & .tools-inner {
            & .card {
                & .card-item {
                    .summary {
                        min-height: auto;
                    }
                }
            }
        }
    }
}
  .main .service-tools {
    padding: 4.5rem 0 7.5rem;

    .tools-inner {

      .text {
        line-height: 180%;
      }

      .card {
        justify-content: center;
        margin-top: 40px;
        gap: 48px;

        .card-item {
          margin-top: 0;
          margin-bottom: 0;

          .summary {
            .text {
              line-height: 160%;
            }
          }
        }
      }
    }
  }
}