/* =========================================
   P-GALLERY LIST
========================================= */

.p-gallery-list {
  background: #000;
  color: #fff;
  padding-block: clamp(3rem, 6vw, 6rem);
}

.p-gallery-list__group {
  margin-bottom: clamp(3rem, 5vw, 4rem);
}

/* 見出し */

.p-gallery-list__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-bottom: 1.2rem;
}

/* grid */

.p-gallery-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 2rem);
}


/* =========================================
   CARD
========================================= */

.p-gallery-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.p-gallery-card__thumb {
  position: relative;
  background: #e5e5e5;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* サムネ */

.p-gallery-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}


/* =========================================
   PLAY BUTTON
========================================= */

.p-gallery-card__play {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  z-index: 2;
}

.p-gallery-card__play-icon {
  width: 56px;
  height: 56px;
  display: block;

  transition: transform 0.25s ease;

  filter:
    drop-shadow(0 6px 12px rgba(0,0,0,0.35))
    drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* hover */

.p-gallery-card__link:hover .p-gallery-card__play-icon {
  transform: scale(1.12);
}


/* =========================================
   TITLE
========================================= */

.p-gallery-card__title {
  font-size: 0.8rem;
  margin-top: 0.6rem;
  opacity: 0.9;
  transition: color 0.25s ease;
}

.p-gallery-card__link:hover .p-gallery-card__title {
  color: #cccccc;
}


/* =========================================
   HOVER DARK OVERLAY
========================================= */

.p-gallery-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.35);
  opacity: 0;

  transition: opacity 0.25s ease;
  z-index: 1;
}

.p-gallery-card__link:hover .p-gallery-card__thumb::after {
  opacity: 1;
}


/* =========================================
   GALLERY LIST RESPONSIVE
========================================= */

@media (max-width: 767px) {

  /* grid */

  .p-gallery-list__grid {
    gap: clamp(0.6rem, 3vw, 1rem);
  }

  /* group余白 */

  .p-gallery-list__group {
    margin-bottom: clamp(2rem, 5vw, 2.6rem);
  }

  /* サムネradius */

  .p-gallery-card__thumb {
    border-radius: clamp(8px, 2.5vw, 10px);
  }

  /* 再生ボタン */

  .p-gallery-card__play-icon {
    width: clamp(36px, 9vw, 44px);
    height: clamp(36px, 9vw, 44px);
  }

  /* タイトル */

  .p-gallery-card__title {
    font-size: 0.75rem;
  }

}