@charset "utf-8";

.wb-gallery-lead {
  display: block;
  text-align: center;
  font-size: var(--fs-16);
  margin-bottom: 50px;
}

.wb-collect {
  position: relative;
  z-index: 0; /* ※1-重ね合わせの起点を作る。背景をmainより上の最後方 */
  background-image: url(../image/wb-top/collect-bg.jpg);
  background-size: auto 100%;
  background-position: top left;
  background-repeat: no-repeat;
  overflow: hidden;

  /* ※2-クリックをmainに奪われないよう、スタックを隔離 */
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    inset: 0; /*top: 0;,left: 0;,width: 100%;,height: 100%;を包括*/
    background: linear-gradient(to bottom, #950d0f 0%, rgb(195, 0, 25, 0.9) 20%, rgb(209, 186, 146, 0.6) 60%, #950d0f 100%);
    z-index: 1; /* ※3-背景(0)より上 */
    pointer-events: none;
  }
}

.wb-collect > div {
  width: 85vw;
  position: relative; /* ※4-スモーク(1)よりテキスト達を上にする */
  z-index: 2;
}

.wb-pro-collect,
.wb-fan-collect,
.wb-vam-collect {
  width: 100%;
  max-width: 1640px;
  margin-bottom: clamp(140px, 16vw, 200px);
}

.wb-pro-title,
.wb-fan-title,
.wb-vam-title {
  position: relative;
  width: fit-content;
  padding: 0.3em 1em 0.3em 0.5em;
  line-height: 1.2;
  margin-bottom: max(2em, 50px);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 座標の設定: 左端中央を頂点とした5角形 */
    clip-path: polygon(0% 0%, 94% 0%, 100% 60%, 95% 100%, 0% 100%);
    border-radius: 3px;

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

  & small {
    font-size: 70%;
  }
}

.wb-pro-title::before {
  background: linear-gradient(to right, #3216be, #222222);
}
.wb-fan-title::before {
  background: linear-gradient(to right, #d88100, #222222 70%);
}
.wb-vam-title::before {
  background: linear-gradient(to right, #c51cc5, #222222 65%);
}

.wb-collect-list {
  display: grid;
  /* ★1-重要：minmax(0, 1fr)で最小値を0に固定します */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  row-gap: 50px;
  /* align-items: stretch; */
  padding: 0;
}

.wb-collect-list > li {
  display: flex;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
}

.wb-collect-container {
  flex-direction: column;
  width: fit-content;
  max-width: 100%;

  /* gap: 5px; */
  /* padding: 5px 3px; /*外枠*/
  line-height: 1.2;
  border-radius: 3px;
  box-sizing: border-box;

  border: 2px solid rgb(150, 40, 42);
}

.wb-pro-collect .wb-collect-container {
  background-color: rgba(45, 20, 174, 0.7);
}

.wb-fan-collect .wb-collect-container {
  background-color: rgb(216, 129, 0, 0.5);
}

.wb-vam-collect .wb-collect-container {
  background-color: rgb(184, 27, 184, 0.5);
}

.wb-collect-image {
  /* ★3-画像のコンテナは幅を指定せず、中のimgに任せる */
  width: fit-content;
  margin: 0 auto;
  overflow: hidden;
}

.wb-collect-image img {
  display: block;
  /* ★4-width: 100%をやめ、高さ固定(20vw)による自然な幅を維持させる */
  width: auto;
  max-width: 100%;
  height: 20vw;
  min-height: 120px;
  object-fit: cover;
  border-radius: 2px;
  background: radial-gradient(ellipse, #b0005e 0%, #b0005e 30%, #720c7a 100%);
}

.wb-collect-info {
  /* ★5-重要：親(container)がfit-contentなので、
     width: 0; min-width: 100%; とすることで「画像が作った幅」を上限にします */
  width: 0;
  min-width: 100%;
  box-sizing: border-box;

  padding: 2px 0.5em 5px;
  font-size: var(--fs-14);
  opacity: 0.7;
  word-break: break-all;
}

.wb-info-x a {
  opacity: 0.6;
  /* color: rgb(238, 238, 238, 0.7); */
  font-style: italic;
}

.wb-collect-info.text-btm {
  order: 2;
}

.wb-collect-top {
  align-items: flex-start;
}

.wb-collect-mid {
  align-items: center;
}

.wb-collect-btm {
  align-items: flex-end;
}

.wb-collect-full {
  /* align-items: center; */
  /* height: 100%; */
  flex-grow: 1;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 767px) {
  .wb-collect .model-inner {
    padding-left: 15px;
    padding-right: 15px;
  }

  .wb-pro-title,
  .wb-fan-title,
  .wb-vam-title {
    font-size: var(--fs-24);
  }

  .wb-collect-list {
    gap: 10px;
    row-gap: 30px;
  }

  .wb-collect-info {
    font-size: 12px;
  }
}

@media (max-width: 500px) {
  .wb-pro-title,
  .wb-fan-title,
  .wb-vam-title {
    font-size: clamp(17px, 4vw, 20px);
  }
  .wb-collect-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }

  .wb-collect-image img {
    height: 35vw;
  }
}