.c-slider {
  position: relative;
  width: 100%;
  /* PHPから渡された高さを適用。未指定なら100vh */
  height: var(--slider-height, 100vh); 
  overflow: hidden;
  background-color: #000;
}

/* モバイル時のみ高さを自動調整したい場合などはここで上書き可能 */
@media (max-width: 767px) {
  .c-slider {
    height: var(--slider-height-sp, 100vh); 
  }
}

.c-slider__inner,
.c-slider__item,
.c-slider__picture {
  width: 100%;
  height: 100%;
  display: block;
}

.c-slider__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 2s ease-in-out;
}

.c-slider__item.is-active {
  opacity: 1;
  z-index: 2;
}

.c-slider__img {
  width: 100%;
  height: 100%;
  /* 指定された高さ（700px等）に合わせて画像を自動トリミング */
  object-fit: cover; 
  object-position: center;
  transform: scale(1);
  transition: transform 10s linear;
}

/* .c-slider__item.is-active .c-slider__img {
  transform: scale(1.1);
} */

.c-slider__content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}