@charset "utf-8";

/* =========================================================
   導入実例のサムネを、スマホで大きく見せる  2026-09-17 追加
   ★指示:「スマホ版で画像が小さくなるので、画像を上にして下に文字が来るように」

   原本（17-desamis）は〜767pxでサムネを126×70に縮めた小さな一覧にしている。
   そこだけを上書きするファイル。**原本の style.css と p-case.css は触らない。**
   読む順番は style.css → page.css → p-case.css → このファイル。

   対象
     .av-case__*  … トップページの「導入実例」
     .pg-case__*  … 導入実例の一覧ページ
   ========================================================= */

@media (max-width: 767px) {

  /* ---------- トップページの導入実例 ---------- */
  .av-case__thumb { width: auto; border-radius: 10px; }
  .av-case__thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;   /* サムネは 1200×750 なので切れない */
    object-fit: cover;
  }
  .av-case__item { padding-bottom: 24px; }
  .av-case__item + .av-case__item { margin-top: 30px; }
  .av-case__meta { margin-top: 14px; }

  /* ---------- 導入実例の一覧 ---------- */
  .pg-case__thumb,
  .pg-case__item--t2 .pg-case__thumb {
    width: auto;
    height: auto;
    padding-top: 0;
    border-radius: 10px;
  }
  .pg-case__thumb img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
  .pg-case__item { padding-bottom: 24px; }
  .pg-case__item + .pg-case__item { margin-top: 30px; }
  .pg-case__meta { margin-top: 14px; }
}