/*
 * 事例ページ（/works/tamayui/・/works/grandtrading/）だけの組み — 編集の手仕事（DESIGN.md）。読み込みは site.css の後（層の外）。
 * 1画面目：.hero__grid の中に 3 つ。
 *   .hero__head（現在地 → ラベル → 名前（明朝）→ 本文）／.hero__visual（紙の台 .plate に 1 画面目の図版）／.hero__spec（仕様表 → 掲載許可の注記 → 名前）
 *   SP は上から 頭 → 台 → 仕様。1024px〜 は左に頭と仕様、右に台（たま結）。Grand Trading（.hero--stage）は下の段に全幅の台。
 * 本文の節は site.css の .section（左に見出し 5 列・右に中身 7 列）。全幅の物（台・比較・表）には .section__wide。
 * 墨：表紙・最後の帯のほかに、章の扉を 1 つずつ（たま結「公開後に確認できたこと」の頭と月ごとのアクセス報告の枠、
 *   Grand Trading「デザインのこだわり」の頭＝設計の 3 節の始まり）。.section__band（about の機関室と同じ部品）で、続きは同じ節の紙に戻す。
 * ほかの制作事例は行一覧（.row-list）。カードにしない（2026-09-28 第 2 回）。
 */

/* ------------------------------------------------------------ 1画面目 */

.hero--case .hero__grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-block);
}

.hero--case .hero__head,
.hero--case .hero__spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-content: start;
}

.hero--case .crumbs + .eyebrow {
  margin-top: 0;
}

.hero--case .eyebrow + .hero__title {
  margin-top: calc(-1 * var(--sp-3));
}

/* 「たま結／タティングレース教室」「株式会社／Grand Trading」を 2 行に */
.hero--case .hero__title > span {
  display: block;
}

.hero--case .hero__title > span + span {
  font-size: 0.72em;
}

.hero--case .lead {
  max-inline-size: 30em;
}

.hero--case .hero__spec .maker {
  margin-top: 0;
}

/* 台：1 台（たま結）は中央に。図版は 1px の罫、影なし */
.plate--single {
  display: grid;
  justify-items: center;
}

.plate--single > img {
  width: min(72%, 320px);
}

.plate--single .plate__caption {
  justify-self: stretch;
}

/* 台：パソコン＋スマホ（Grand Trading）を同じ台に並べる。SP はパソコンの下にスマホ（幅 60%） */
.plate__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  justify-items: center;
}

.plate__stage img {
  width: 100%;
}

.plate__stage img + img {
  width: 60%;
}

@media (min-width: 768px) {
  .plate__stage {
    grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
    gap: var(--sp-3);
    align-items: end;
  }

  .plate__stage img + img {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .hero--case .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "head visual"
      "spec visual";
    column-gap: var(--col-gap);
    row-gap: var(--space-block);
    align-items: start;
  }

  .hero--case .hero__head {
    grid-area: head;
  }

  .hero--case .hero__visual {
    grid-area: visual;
  }

  .hero--case .hero__spec {
    grid-area: spec;
  }

  .hero--stage .hero__grid {
    grid-template-areas:
      "head spec"
      "visual visual";
    align-items: end;
  }

  .plate--stage {
    padding: var(--space-block);
  }

  .plate__stage {
    gap: var(--col-gap);
  }
}

/* ------------------------------------------------------------ 本文 */

.case-where {
  margin-top: var(--sp-1);
}

/* 数字の枠：説明文が 16px になったので、768px〜 も 2 列（4 列では 1 列の文字の幅が 130px に満たず、説明が 4 行になる。
   採点の枠は 1 段目にパソコン設定とスマホ設定の表示の速さを並べる。2026-09-28 第 2 回） */
@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats__grid > .stat:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .stats__grid > .stat:nth-child(even) {
    padding-left: var(--sp-4);
    border-left: var(--rule) solid var(--line);
  }

  .stats__grid > .stat:nth-child(n + 3) {
    border-top: var(--rule) solid var(--line);
  }
}

/* 「作ったもの」の台の中のキャプション */
.device-strip--tile figcaption {
  max-inline-size: 22em;
}

/* ------------------------------------------------------------ 比べる表（Grand Trading）：横罫だけ。見出し行は一段暗い紙、ゼブラは台の色 */

.spec-table table {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--rule) solid var(--line-strong);
  font-size: var(--fs-small);
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}

.spec-table th {
  font-weight: 500;
  text-align: left;
}

.spec-table thead th {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  background: var(--surface-raise);
  color: var(--ink-2);
  font-size: var(--fs-label);
  line-height: 1.6;
  vertical-align: bottom;
}

.spec-table thead th:first-child {
  padding-left: var(--sp-3);
}

.spec-table tbody th,
.spec-table td {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: var(--rule) solid var(--line);
  vertical-align: top;
}

.spec-table tbody th {
  padding-left: var(--sp-3);
  color: var(--ink);
}

.spec-table tbody tr:nth-child(even) {
  background: var(--surface);
}

.spec-table td {
  color: var(--ink-body);
}

.spec-table__en {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .spec-table table {
    table-layout: fixed;
  }

  .spec-table th:first-child {
    width: 24%;
  }

  .spec-table td:last-child,
  .spec-table thead th:last-child {
    padding-right: var(--sp-3);
  }
}

/* SP：1 行ずつの札に。項目名を上に、2 つのサイトを左の罫つきで下に */
@media (max-width: 767px) {
  .spec-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .spec-table table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table tbody th,
  .spec-table td {
    display: block;
  }

  .spec-table tbody tr {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-4) 0;
    border-bottom: var(--rule) solid var(--line);
  }

  .spec-table tbody tr:nth-child(even) {
    background: transparent;
  }

  .spec-table tbody th,
  .spec-table td {
    padding: 0;
    border-bottom: 0;
  }

  .spec-table tbody th {
    font-size: var(--fs-body);
  }

  .spec-table td {
    padding-left: var(--sp-3);
    border-left: var(--rule) solid var(--line-strong);
  }

  .spec-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-3);
    font-size: var(--fs-label);
    line-height: 1.7;
  }
}

/* ------------------------------------------------------------ 導線（スマホ 1 台）：紙の台の中央に。
   ヘッダーの 2 枚組は、試作サイトのヘッダーが直るまで外している（HTML の注記。2026-09-28 第 2 回）。.strip は戻す時のために残す */

.flow-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-block);
  padding: var(--sp-4);
  border: var(--rule) solid var(--line);
  background: var(--surface);
}

.flow-sheet__phone {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
}

.flow-sheet__phone .phone {
  width: min(72%, 280px);
}

.flow-sheet__phone figcaption {
  max-inline-size: 22em;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.7;
}

.flow-sheet__headers {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.flow-sheet__title {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
}

.strip {
  display: grid;
  gap: var(--sp-2);
}

.strip__frame {
  max-width: 420px;
}

.strip__desc {
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .flow-sheet {
    padding: var(--space-block);
  }
}

/* ------------------------------------------------------------ ほかの制作事例 */

.case-next {
  padding-top: var(--space-section);
}

.case-next__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--rule) solid var(--line-strong);
}

.case-next__head {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

/* 行一覧は帯の行一覧と同じく全幅（一文の左端は 5:7 の線。site.css の .row-list） */
@media (min-width: 1024px) {
  .case-next__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--col-gap);
  }

  .case-next__inner > .row-list {
    grid-column: 1 / -1;
  }
}