@import url(lower.css);
@import url("https://unpkg.com/scroll-hint@latest/css/scroll-hint.css");

.service {
  .contents {
    width: min(100%, 740px);
    margin-inline: auto;
  }
  h3 {
    font: 500 1.6em var(--weight-variable);
    margin-bottom: 1em;
  }
  p {
    line-height: 1.8;
    ~ p {
      margin-top: 1em;
    }
  }
}

/* ========== system ========== */

.summary {
  background-color: var(--bg-c);
  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, 400px);
    gap: 3vw;
    justify-content: center;
  }
  li {
    background-color: #fff;
    padding: 2em;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    gap: 10px;
    container-type: inline-size;
    img {
      height: 24cqi;
      align-self: center;
      margin-bottom: 10px;
    }
    h3 {
      font: 500 1.1em var(--weight-variable);
    }
    span {
      margin-top: -10px;
      align-self: end;
    }
  }
  .row {
    display: flex;
    gap: 1em;
    align-items: center;
    ~ .row {
      padding-top: 4px;
    }
  }
  dt {
    padding: 0.2em 1em;
    background-color: var(--bg-c);
    border-radius: 4px;
    font: 500 13px var(--weight-variable);
    color: #666;
  }
  dd {
    flex: 1;
  }
}

.case {
  padding-top: 0;
  background-color: var(--bg-c);
  h2 {
    font-size: 1.5vw;
    color: var(--primary-c);
    font: 500 max(1.5vw, 1.2em) var(--weight-variable);
    margin-bottom: 2em;
    text-align: center;
  }
  .table-area {
    width: 100vw;
    margin-left: -5vw;
    padding-inline: 5vw;
    overflow-y: scroll;
  }
  table {
    background-color: #fff;
    width: max(70%, 755px);
    margin-inline: auto;
    border-radius: 10px;
    border-collapse: separate;
    overflow: hidden;
  }
  th {
    background-color: var(--primary-c);
    color: #fff;
    font: 500 1em var(--weight-variable);
  }
  th,
  td {
    padding: 0.4em 1.2em;
    border-left: 5px solid var(--bg-c);
  }
  .fill {
    td,
    th {
      &:first-child {
        border-left: none;
      }
    }
  }
  tr:last-child td {
    border-bottom: none;
  }

  td {
    border-bottom: 5px solid var(--bg-c);
    &:nth-child(3) {
      text-align: center;
    }
  }
}

/* ========== system-figure ========== */

@media (width < 1024px) {
  .scroll-hint-icon {
    top: 15%;
  }
}

@media (width < 768px) {
  .contents h3 {
    font-size: 1.3em;
  }
  .summary {
    ul {
      display: flex;
      flex-direction: column;
      gap: 1em;
    }
    li {
      width: 100%;
      padding: 1.6em 1em;
    }
  }
  .scroll-hint-icon {
    top: 15%;
  }
}