/* #document  */

#document {
  .item-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
  }

  /* カードは高さを揃え、タイトルが2行になってもボタン位置がずれないようにする */
  .item {
    display: flex;
    flex-direction: column;
    /* 各カードの幅を揃える（折り返しても幅は変わらない） */
    flex: 0 1 11rem;
    min-width: 0;
  }

  .item > a {
    display: block;
  }

  .item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .item h3 {
    margin: 1rem 0 1.5rem;
    line-height: 1.6;
  }

  .item > .btn {
    margin-top: auto;
    align-self: center;
    max-width: 100%;
    padding-inline: 1.5rem;
  }

  .copy {
    text-align: center;
    margin-bottom: 2rem;
  }

  .copy h2 {
    display: inline;
    font-weight: 600;
    line-height: 1.2;
    background: linear-gradient(transparent 60%, var(--sand) 0%);
    padding: 0 1px 0px;
  }

  .checklist {
    margin-bottom: 2rem;
  }

  .checklist-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--orange);
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    margin-bottom: 0.5rem;
  }

  .checklist li {
    text-indent: -2rem;
    padding: 0 0 0 2rem;
  }

  .checklist li:before {
    margin-right: .5rem;
    font-family: "Font Awesome 5 Free";
    content: " \f00c";
    color: var(--orange);
    font-weight: 900;
  }

  .border-box-list {
    border: 1px solid #ddd;
    border-radius: .5rem;
    padding: 1rem;
  }

  .border-box-list-title {
    font-size: 1.25rem;
    margin: 0 0 1rem;
  }

  .border-box-list li:before {
    margin-right: .5rem;
    font-family: "Font Awesome 5 Free";
    content: " \f0da";
    color: #ddd;
    font-weight: 900;
  }

  .document-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    border-radius: 0.375rem;
    background: var(--dark);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 400;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .document-download-btn:hover {
    opacity: 0.92;
    transform: translateY(-0.0625rem);
  }

  .document-download-btn:active {
    transform: translateY(0);
  }

}

@media (max-width: 768px) {
  #document {
    .item-list {
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 6rem;
    }

    .item {
      flex: 0 0 auto;
      width: 100%;
      max-width: 22rem;
    }
  }
}