/* pages/case.css
   事例一覧（case.html）固有（p-case-）
   ページ見出し（c-page-head）・写真と文章の2カラム（c-split--media）・写真の枠（c-photo-frame）・絞り込み（c-chip-nav）・
   事例カード（c-case-card）・ページ送り（c-pagination）・CTA帯（c-cta-band）は共通部品。
   ここには、見出しの帯の写真の比率と注記の位置、一覧・ページ送りの余白だけを書く。
   一覧の本文（l-section）の余白は l-section--compact（layout.css）、リード文の行の長さ（text-wrap: balance）は c-page-head__lead（parts.css）で決まる。
   リードは2つの文で、PC（1100px 以上）は <br class="u-br-pc"> で1文ずつ2行にする */

/* 見出しの帯の制作物のコラージュ（事例の画像ではなく、帯の写真。トップのヒーローの壁のサムネイルの切り出し元）。PC は右の列で 16:9、SP は文章の下で 16:9（写真と同じ比率なので、全体が見える）。
   タブレットは横いっぱいに広がるので、一覧を先に見せるために背を低くして 5:2 にする（コラージュは中央を残す。切り抜く位置は既定の中央のまま） */
.p-case-head__media {
  --photo-ratio: 16 / 9;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
  .p-case-head__media {
    --photo-ratio: 5 / 2;
  }
}

/* 非開示の注記（c-note-box--plain の 13px・--c-ink-3）を、リード文の下に置く */
.p-case-head__note {
  margin-top: 12px;
}

.p-case-list__grid {
  margin-top: 40px;
}

.p-case-list__pagination {
  margin-top: 56px;
}

@media (max-width: 767.98px) {
  .p-case-list__grid {
    margin-top: 32px;
  }

  .p-case-list__pagination {
    margin-top: 40px;
  }
}