/* 全体幅 */
.section.mylike {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 32px);
}

/* カテゴリセクション */
.like-section {
  margin: clamp(28px, 5vw, 56px) 0 100px 0;
}
.like-section__head {
  margin-bottom: 14px;
}
.like-section__title {
  width: 100%;
  color: #2b6cb7;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  display: inline-block;
  margin: 0 0 6px;
  position: relative;
}
.like-section__title::after {
  content: "";
  display: block;
  height: 0;
  border-bottom: 2px dashed #99b5e5;
  margin-top: 8px;
}
.like-section__intro {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.8;
  margin-top: 6px;
}
@media (min-width: 900px) {
  .like-section {
    margin: clamp(28px, 5vw, 56px) 0 150px 0;
  }
}

/* サムネ 3カラム（レスポンシブ） */
.like-thumbs {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: repeat(3, 1fr);
  padding: 20px 0;
}
@media (max-width: 900px) {
  .like-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .like-thumbs {
    grid-template-columns: 1fr;
  }
}
/* =========================
   MY LIKE カードベース
   ========================= */
.like-card {
  max-width: 350px;
  margin-bottom: 0;
  border-radius: 20px;
}
.like-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease;
}

/* =========================
   画像エリア
   ========================= */

.like-thumb__img {
  max-width: 210px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 18px;
}

.like-thumb__img img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}

/* === PC以上（3列） === */
@media (min-width: 1025px) {
  .like-thumb__img {
    max-width: 275px;
  }
}

/* 画像コンテナ */
.like-thumb__img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* ← 正方形に固定 */
}

/* 画像本体 */
.like-thumb__img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← はみ出した部分をトリミングして自然に */
  transition: transform 0.5s ease;
}

/* hover時ズーム */
.like-card:hover .like-thumb__img img {
  transform: scale(1.08);
}

/* =========================
   テキスト部分
   ========================= */

.like-thumb__meta {
  padding: 0 12px 20px;
  text-align: center;
}

.like-date {
  display: block;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 6px;
  transition: color 0.3s ease;
}

.like-title {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-text);
  line-height: 1.4;
  transition: color 0.3s ease;
}

/* ホバー時 */
.like-card:hover {
  background-color: var(--color-bg3);
  opacity: 0.5;
}
.like-card:hover .like-date,
.like-card:hover .like-title {
  background-color: var(--color-bg3);
  color: var(--color-text3);
}

/* =========================
   グリッド表示
   ========================= */

.like-thumbs {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .like-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .like-thumbs {
    grid-template-columns: 1fr;
  }
}