.techinfo-hero h1 {
  &::before {
    @media (width > 400px) {
      white-space: pre;
    }
  }
}

.techinfo-download {
  background-color: var(--color-gray-50);

  .techinfo-download-inner {
    display: grid;
    row-gap: var(--spacing-2xl);
    justify-items: center;
    padding-block: var(--spacing-3xl);
  }

  .techinfo-download-text {
    text-align: center;
    font-size: var(--text-3xl);
  }
  .techinfo-download-agreement {
    display: grid;
    row-gap: 1em;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary-300);
    padding: var(--spacing-md);
    max-height: 18em;
    width: 100%;
    overflow-y: auto;
    scrollbar-color: var(--color-primary-300) var(--color-white);

    &::-webkit-scrollbar {
      width: 12px;
    }
    &::-webkit-scrollbar-track {
      background: var(--color-gray-50);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--color-primary-300);
      border-radius: 12px; /* つまみの角を丸くする */
    }
    &::-webkit-scrollbar-thumb:hover {
      background: var(--color-primary-200);
    }
  }
  .techinfo-download-confirm {
    display: flex;
    align-items: center;
    padding-inline: 2em;

    input[type="checkbox"] {
      margin-inline-end: 1em;
      accent-color: var(--color-primary-300);
      transform: scale(2);
      @media (width < 640px) {
        transform: scale(1.5);
      }
    }

    > p > a {
      color: var(--color-primary-300);
      text-decoration: underline;
    }
  }
  .techinfo-download-buttons {
    display: grid;
    row-gap: var(--spacing-sm);
    width: 100%;

    > div {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--spacing-md);
      background-color: color-mix(
        in srgb,
        transparent,
        var(--color-gray-100) 30%
      );
      padding: var(--spacing-md) var(--spacing-xl);

      > p {
        font-size: var(--text-xl);
      }

      @media (width < 950px) {
        grid-template-columns: 1fr;
        row-gap: var(--spacing-sm);
      }
    }
  }
  .techinfo-download-note {
    > a {
      color: var(--color-primary-300);
      text-decoration: underline;
    }
  }
}

.techinfo-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: inherit;
  row-gap: var(--spacing-md);
  background-color: var(--color-primary-50);
  padding: var(--spacing-lg);
  color: var(--color-gray-900);
  text-decoration: none;

  ul {
    padding: 0;
    list-style: none;
  }
  
  > h3 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    font-size: var(--text-xl);

    &::after {
      --size: 0.8em;
      content: "";
      width: var(--size);
      height: var(--size);
      background-color: currentColor;
      mask: url("../images/common/icon-arrow-right.svg") center / contain
        no-repeat;
      display: inline-block;
    }
  }
  > ul:nth-of-type(1) {
    display: flex;
    flex-wrap: wrap;
    place-items: start;
    gap: var(--spacing-xs);
    > li {
      flex-shrink: 0;
      font-size: var(--text-xs);
      padding: 0 var(--spacing-xs);
      background-color: var(--color-primary-100);
    }
  }
  > ul:nth-of-type(2) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    place-items: start;
    padding-block-start: var(--spacing-md);
    border-block-start: 1px dashed currentColor;

    > li {
      flex-shrink: 0;
      font-size: var(--text-xs);
      padding: 0 var(--spacing-xs);
      background-color: var(--color-white);
    }
  }

  @media (hover: hover) {
    &:hover {
      background-color: color-mix(
        in srgb,
        var(--color-primary-50),
        var(--color-primary-100)
      );
    }
  }
}

.techinfo-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-md) var(--spacing-lg);
  padding-inline-start: 0;
  > li {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}