/* ---- サイズを統一しつつ小さめに、端チラ見せ強化 ---- */
:root{
  --gap: 16px;
  --card-radius: 16px;
  --card-shadow: 0 18px 36px rgba(0,0,0,.22);
  --card-shadow-hover: 0 8px 18px rgba(0,0,0,.18);

  /* デスクトップで少し小さめに固定（ここを好みで調整） */
  --card-w: 260px;
  --card-w-tablet: 240px;
  --card-w-sp: 78vw; /* SPは1枚＋左右チラ見せ */
}

/* セクション周りはそのまま */
.pickup-section{ position:relative; margin:48px auto; padding:0 24px; max-width:1120px; }
.pickup-section__title{ font-weight:800; font-size:28px; letter-spacing:.08em; margin:0 0 18px; }
.full-bleed{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }

/* スライダー */
.pickup-wrap{position:relative;overflow: hidden;}
.pickup-slider{ padding:16px 0 48px; }
.pickup-slider .slick-list{
  overflow:visible;          /* 影とクローンを見せる */
  padding: 0 56px;           /* 端チラ見せの量（増減可） */
}

/* 可変幅：ここで幅を統一 */
.pickup-slider .slick-track{ display:block; } /* flexは使わない（幅採寸安定化） */
.pickup-slider .slick-slide{
  width: var(--card-w) !important;
  padding: 0 var(--gap);
  box-sizing: border-box;
}

/* カード（正方形） */
.card{
  display:block; position:relative; border-radius:var(--card-radius); overflow:hidden;
  background:#eee; box-shadow:var(--card-shadow);
  transition: box-shadow .25s, transform .25s; height:100%;
  text-decoration:none;
}
.card__media{ display:block; aspect-ratio:1/1; }
.card img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.card:hover{ box-shadow:var(--card-shadow-hover); transform:translateY(1px); }
.card:hover img{ transform:scale(1.00); }

/* 右上ナビ（丸囲みなし） */
.pickup-nav{
  position:absolute; top:-44px; right:8px; display:flex; gap:18px; z-index:5;
}
.pickup-nav button{ appearance:none; cursor:pointer; border:0; background:transparent; width:52px; height:52px; display:grid; place-items:center; }
.pickup-nav button:hover{ transform:translateY(-1px); }
.pickup-nav svg{ width:28px; height:28px; }

/* レスポンシブ */
@media (max-width:1200px){
  .pickup-slider .slick-slide{ width: var(--card-w-tablet) !important; }
}
@media (max-width:560px){
  .pickup-slider .slick-list{ padding: 0 24px; }
  .pickup-slider .slick-slide{ width: var(--card-w-sp) !important; }
  .pickup-nav{ top:-36px; right:10px; }
  .pickup-nav svg{ width:24px; height:24px; }
}
/* ====== 画像上テキスト（オーバーレイ） ====== */
.card__overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none;              /* クリックは下の<a>に通す */
}
.card__label{
  color:#fff; font-weight:700; letter-spacing:.06em;
  border:2px solid rgba(255,255,255,.95);
  padding:10px 18px; text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  backdrop-filter: blur(.5px);
  max-width:85%;

  line-height:1.4;
  white-space:normal;                 /* ← 1行固定を解除 */
  display:-webkit-box;                /* ↓ 2行で折り返し */
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;               /* 2行まで表示 */
  overflow:hidden;                    /* 3行目以降は隠す */
  /* text-overflow は不要（2行省略は line-clamp が担う） */
}
/* 配置バリエーション（必要なら） */
.card__overlay.-bottom-left{ align-items:end; justify-items:start; padding:14px; }
.card__overlay.-bottom-right{ align-items:end; justify-items:end; padding:14px; }
.card__overlay.-top-left{ align-items:start; justify-items:start; padding:14px; }
.card__overlay.-top-right{ align-items:start; justify-items:end; padding:14px; }

@media (max-width:560px){
  .card__label{ font-size:14px; padding:8px 14px; max-width:92%; }
}