@charset "utf-8";

/* =========================================================
   導入事例（一覧）  style.css → page.css → このファイル の順で読む

   実測の縦位置（1440幅レンダリング / ページ左上原点）
     パン屑      y=100
     和文見出し  y=179   （58px / lh69.6 / ls5.8）
     欧文        y=248   （28px / lh39.2 / ls2.8）
     絞り込みタブ y=327.7 （100×29 / gap14）
     カード1段目 y=466.7 （373×207〜209.4 / 3列 / 横40 縦30）
       2段目 y=834.1 / 3段目 y=1201.5 / 4段目 y=1566.5
     もっと見る  y=1961.4（300×60 / radius64）
     main 下端   y=2161.4
   ========================================================= */

.pg-case { padding-bottom: 138.7px; }

/* ---------- 3列のカード ---------- */
.pg-case__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
  margin-top: 110px;
}
.pg-case__item a { display: block; }

/* サムネ 373×207（写真の縦横比で 206.3〜209.4 に振れる＝--t2 が高いほう） */
.pg-case__thumb {
  position: relative;
  display: block;
  height: 207px;
  border-radius: 12px;
  overflow: hidden;
}
.pg-case__item--t2 .pg-case__thumb { height: 209.4px; }
.pg-case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.pg-case__item a:hover .pg-case__thumb img { transform: scale(1.04); }

/* 日付 + タグ（タグ48×24・日付は中央そろえ） */
.pg-case__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
  margin-top: 19.9px;
}
.pg-case__date {
  font-family: var(--f-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: var(--c-ink-2);
}
.pg-case__tags { display: flex; gap: 7px; }
.pg-case__tags span {
  padding: 5px 10px;
  border-radius: 16px;
  background: var(--c-tag);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: var(--c-ink);
}

/* 見出し（18px / lh25.2 / 2行）と牧場名（14px / lh19.6） */
.pg-case__ttl {
  display: block;
  margin-top: 6.4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px;
  color: var(--c-ink);
}
.pg-case__item a:hover .pg-case__ttl { color: var(--c-blue); }
.pg-case__farm {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
  color: var(--c-ink-2);
}

/* ---------- もっと見る（300×60） ---------- */
.pg-case__more { margin-top: 60px; text-align: center; }
.pg-case__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 60px;
  padding-bottom: 2px;
  border-radius: 64px;
  background: var(--c-blue);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  transition: background .3s var(--ease);
}
.pg-case__btn:hover { background: #0f88bd; }

/* =========================================================
   〜1180px
   ========================================================= */
@media (max-width: 1180px) {
  .pg-case__list { gap: 30px; margin-top: 80px; }
  .pg-case__thumb, .pg-case__item--t2 .pg-case__thumb { height: 0; padding-top: 56%; }
  .pg-case__thumb img { position: absolute; inset: 0; }
  .pg-case__ttl { font-size: 17px; line-height: 23.8px; }
}

/* =========================================================
   スマホ（〜767px）実測
     和文 y147 / 欧文 y191 / タブ y256・300（101×35 / gap 11・10）
     カード1枚目 y401（サムネ126×70）・以降ピッチ232.3
     もっと見る y3215（300×60）/ main 下端 y3414
   ========================================================= */
@media (max-width: 767px) {
  /* ページ見出しだけ左右24px（カード一覧は30px） */
  .av-ph__in { max-width: calc(100% - 48px); }
  .av-tabs { gap: 11px 10px; margin-top: 39.8px; }
  .av-tab {
    width: 101px;
    min-width: 0;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 21px;
  }

  .pg-case { padding-bottom: 140px; }

  .pg-case__list { display: block; margin-top: 64px; }
  .pg-case__item {
    padding-bottom: 18px;
    border-bottom: 1px solid #efefef;
  }
  .pg-case__item + .pg-case__item { margin-top: 34.3px; }

  .pg-case__thumb,
  .pg-case__item--t2 .pg-case__thumb {
    width: 126px;
    height: 70px;
    padding-top: 0;
    border-radius: 8px;
  }
  .pg-case__thumb img { position: static; }

  .pg-case__meta { height: 20px; margin-top: 11px; gap: 9px; }
  .pg-case__date { font-size: 12px; }
  .pg-case__tags span { font-size: 12px; }

  .pg-case__ttl { margin-top: 7px; font-size: 15px; line-height: 21px; }
  .pg-case__farm { margin-top: 8px; font-size: 15px; line-height: 21px; color: var(--c-blue); }

  .pg-case__more { margin-top: 60px; }
  .pg-case__btn { width: 300px; max-width: 100%; }
}