/* ==========================================================
   Pickupカード：QUALITE（2026-10 見直し）
   トップの Pickup と、導入事例ページ下部の Pickup（カルーセル）で共通に使う。
   カードの枠組み（.p-card-pickup）はサイト共通のまま、QUALITEの写真部分だけを
   正式ロゴ（白抜き）＋明朝の見出しにする。
   画像に文字を焼き込まず、写真の上にHTMLで重ねる（トップの .p-pickupImg と同じ考え方）。
   変更したら読み込み側の ?v= を上げること（1年キャッシュ）。
   ========================================================== */

/* 縦横比は枠ではなく写真に持たせ、枠に overflow:hidden も付けない。
   subgrid が効かないカルーセル内（事例ページのスマホ）では、枠の aspect-ratio や
   overflow:hidden があると行の高さが0になり、写真が説明文の上に重なる。
   角丸は写真と上下のグラデーションに個別に付ける */
.p-pickupQualite {
  position: relative;
  width: 100%;
}

.p-pickupQualite > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 62% 50%;
  display: block;
  border-radius: 4px;
}
/* 事例ページのカードは画像が 379×309。ほかの2枚と高さを揃える */
.p-pickupQualite.-case > img { aspect-ratio: 379 / 309; }

/* 見出し：左上に明朝で。暗いグラデーションで読みやすさを確保 */
.p-pickupQualite__lead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 22px 22px 56px;
  color: #fff;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .06em;
  text-align: left;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to bottom, rgba(20, 18, 15, .72), rgba(20, 18, 15, 0));
}

/* 下部：正式ロゴ（白抜き）＋ラベル */
.p-pickupQualite__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 20px 18px;
  color: #fff;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to top, rgba(20, 18, 15, .85), rgba(20, 18, 15, 0));
}
.p-pickupQualite__logo { display: block; width: 150px; height: auto; margin-left: -4px; }
.p-pickupQualite__sub {
  display: block;
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.p-pickupQualite__sub::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: #c4a46a;   /* 金（ダーク地で読める明るさ） */
}

@media screen and (min-width: 768px) {
  .p-pickupQualite__lead { font-size: 2.1rem; padding: 24px 24px 60px; }
  .p-pickupQualite__logo { width: 170px; }
  .p-pickupQualite__sub { font-size: 1.5rem; }
}
/* 事例ページのカードは小さめなので一段控えめに */
.p-pickupQualite.-case .p-pickupQualite__lead { font-size: 1.7rem; padding: 18px 18px 48px; }
.p-pickupQualite.-case .p-pickupQualite__foot { padding: 52px 18px 14px; }
.p-pickupQualite.-case .p-pickupQualite__logo { width: 136px; }
.p-pickupQualite.-case .p-pickupQualite__sub { font-size: 1.3rem; margin-top: 6px; }