/*
 * デザインサンプル（/samples/）だけの組み — 編集の手仕事（DESIGN.md）。読み込みは site.css の後（層の外）。
 * 1画面目：現在地 → ラベル → 題「このようなサイトを制作できます」（明朝）→［本文 → 注記 ／ 業種ごとの目次（行一覧の型）］
 *   1024px〜 は扉の表紙と同じ 7:5。左 7 列に本文と注記、右 5 列に目次（本文の頭にそろえる。右半分を空けない）。
 * 例の列（.sample-gallery。1024px〜 は 5 列 × 2 段・600〜1023px は横スクロールの帯・SP は 2 列）、締めの帯（.section--band の行一覧）は site.css の部品。
 * 墨：表紙と締めの帯のほかに、2 つ目と 3 つ目の節の頭（見出し・一文・注記）を .section__band に（章の扉。格子は紙のまま。
 *   1 つ目の節の頭は表紙の墨と続くので紙。2026-09-28 第 2 回）。
 */

.samples-hero__text > * + * {
  margin-top: var(--sp-5);
}

/* 業種ごとの目次：行の一覧（名前だけ。点数は本文に書き、数字札は置かない）。右端に下向きの山形（同じページの中へ移る印） */
.sample-index {
  max-width: 34em;
  margin-top: var(--space-block);
  border-top: var(--rule) solid var(--line);
}

.sample-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--tap);
  padding: var(--sp-3) 0;
  border-bottom: var(--rule) solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.sample-index a::after {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.3em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

.sample-index a:hover {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
}

@media (min-width: 1024px) {
  .samples-hero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--col-gap);
    align-items: start;
  }

  .samples-hero .sample-index {
    max-width: none;
    margin-top: 0;
  }
}

/* SP は 2 列（横スクロールにしない。5 段でそろう）。600〜1023px は帯、1024px〜 は site.css の 5 列 */
@media (max-width: 599px) {
  .swipe-hint {
    display: none;
  }

  .sample-gallery {
    margin-inline: 0;
    overflow: visible;
  }

  .sample-gallery ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-3);
    width: auto;
    padding: 0;
  }

  .sample-card {
    width: auto;
    max-width: none;
  }

  .sample-card .device__frame {
    padding: var(--sp-2);
  }
}

/* 業種ごとの節：例の列の下の「扉へ」のリンク */
.section > .wrap > .sample-gallery + p {
  margin-top: var(--space-block);
}