/* 実績一覧（2026-10-17 スレッド その8・docs/世界観と決まり.md）
   全部の現場を1つの並び（新しい順・種類で分けない）。写真の下は種類・場所・担当、押すとその現場のページへ。
   一覧の中身は scripts/build_work_pages.py が data/works-detail.json から作る */
.keep-phrase { display: inline-block; white-space: nowrap; }
.phead .body { word-break: auto-phrase; }   /* 頭の文を「スタジ/オ」のような語の途中で折らない（対応するブラウザだけ） */

/* 全部の現場: 3列（狭い画面は2列・スマホは1列）。写真は全部同じ 16:9、文字は写真の下 */
.works-list { padding-top: 0; }   /* 頭の下の余白（64px）は .phead が持つ */
.list-works { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.list-work { scroll-margin-top: 96px; }   /* 詳細の「実績一覧へ戻る」でこの現場の所へ戻った時、メニューの帯に隠れない */
.list-work .cut { --cl: 12px; --cr: 12px; --ct: 16px; }
.list-work .cap { display: grid; gap: 4px; }
.list-work .kind-name { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink); word-break: keep-all; }   /* 「・」の後でだけ折る */
.list-work .meta { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 13px; line-height: 1.6; }
.list-work .place { color: var(--text); }
.list-work .role { color: var(--note); }
@media (max-width: 1000px) { .list-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .list-work { scroll-margin-top: 72px; }
  .list-works { grid-template-columns: 1fr; gap: 48px; }   /* 余白の段（トップの同じ所も48） */
  .list-work .cut { --cl: 5px; --cr: 5px; --ct: 8px; }
}

/* M&Aにつながった事例 */
.cases { list-style: none; margin-top: 32px; border-top: 1px solid var(--rule); }
.cases > li, .cases-more { display: grid; grid-template-columns: 18em minmax(0, 1fr); gap: 8px 48px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }   /* 左の端は本文と同じ線（4px 内へ寄せない・2026-10-17） */
.c-name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.c-link { display: inline-block; padding-block: 8px; color: inherit; text-decoration: none; }   /* 現場名を押すとその現場のページへ（押す所の高さ44px以上） */
@media (hover: hover) { .c-link:hover .keep-phrase { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
.c-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.c-body { min-width: 0; }
.c-body p { font-size: 16px; line-height: 1.9; color: var(--text); word-break: auto-phrase; text-wrap: pretty; }   /* 「工/事」「オー/ナー」のような語の途中で折らない（対応するブラウザだけ） */
.c-body p + p { margin-top: 16px; }
.case-price { white-space: nowrap; }
.amt { font-style: normal; font-family: var(--num); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 .1em; font-feature-settings: "tnum" 1; }
@media (max-width: 860px) { .cases > li, .cases-more { grid-template-columns: 1fr; gap: 16px; } }

/* 4項目は2列×2段。狭い画面では1列。 */
.why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .why-cards { grid-template-columns: 1fr; } }