/* ============================================
   用語集(WORDS)
   ============================================ */

/* 背景メタルはトップMOVIEエリアと同一 */
.p-words__main {
  container-type: inline-size;
  padding: 94px 0 84px;
  background-image:
    linear-gradient(90deg, rgba(15, 24, 57, 0) 0%, rgba(15, 24, 57, 0) 38%, rgba(15, 24, 57, 0.28) 100%),
    url(/sasuke_rising/assets/img/metal.png);
  background-repeat: no-repeat, repeat;
  background-position: center top, center top;
  background-size: 100% 100%, 20px;
}

/* タイルグリッド。SPは左右2列の縦積み、PCは5列グリッドに再配置 */
.p-words__grid {
  display: flex;
  gap: 17px;
  padding: 0 16px;
  margin: 26px auto 0;
}

.p-words__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 17px;
  min-width: 0;
}

.p-words__item {
  overflow: hidden;
  aspect-ratio: var(--ar);
  background: var(--bg);
}

.p-words__item picture,
.p-words__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スクロール到達で中身が枠内を下からせり上がる(words-reveal.js) */
.js .p-words__item img {
  transform: translateY(100%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.js .p-words__item.is-in img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .p-words__item img {
    transform: none;
    transition: none;
  }
}

.p-words__back {
  margin: 82px auto 0;
}


@media (min-width: 991.98px) {
  .p-words__main {
    padding: 84px 0 97px;
  }

  .p-words__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    /* 行高はFigmaの行ユニット77.5px(列幅242px基準)を幅比例で再現 */
    grid-auto-rows: calc((min(100vw - 30px, 1330px) - 120px) / 5 * 77.5 / 242);
    grid-auto-rows: calc((min(100cqw - 30px, 1330px) - 120px) / 5 * 77.5 / 242);
    width: min(100% - 30px, 1330px);
    margin-top: 40px;
  }

  .p-words__col {
    display: contents;
  }

  .p-words__item {
    grid-column: var(--gc);
    grid-row: var(--gr);
    aspect-ratio: auto;
  }

  .p-words__back {
    margin-top: 165px;
  }

  .p-words__scroll {
    left: 0;
    width: 483px;
    max-width: none;
  }

  .p-words__scroll--right {
    display: block;
    left: auto;
    right: 0;
  }
}