.screen_reel {
  width: 90vw;
  max-width: 1920px;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
  z-index: 20;
}

.screen_reelbody {
  --item-width: 90px;
  --item-height: 160px;
  --radius: 200%;

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  transform-origin: center center;
  transform-box: fill-box;

  /* 初期状態 */
  opacity: 0;
  transform: rotate(-180deg) scale(1.45);
  will-change: transform, opacity;
}

/* アニメーション開始 */
.screen_reel.is-animated .screen_reelbody {
  animation: screenReelIntro 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.screen_reelbody li {
  width: var(--item-width);
  height: var(--item-height);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: calc(var(--item-width) / -2);
  margin-top: calc(var(--item-height) / -2);
  transform-origin: center center;
  overflow: hidden;
  background-color: #ccc;
}

.screen_reelbody li img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 読み込み時に回転しながら縮小してフェードイン */
@keyframes screenReelIntro {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(1.45);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@media screen and (min-width: 1025px) {
  .screen_reel {
    width: 100%;
    max-width: none;
  }

  .screen_reelbody {
    --item-width: 70px;
    --item-height: 125px;
    --radius: 250%;
    bottom: -70%;
  }
}

@media screen and (min-width: 1280px) {
  .screen_reelbody {
    --item-width: 70px;
    --item-height: 125px;
    --radius: 250%;
    bottom: -60%;
  }
}

@media screen and (min-width: 1400px) {
  .screen_reelbody {
    --item-width: 90px;
    --item-height: 160px;
    --radius: 250%;
    bottom: -70%;
  }
}

@media screen and (min-width: 1600px) {
  .screen_reelbody {
    --item-width: 90px;
    --item-height: 160px;
    --radius: 300%;
    bottom: -60%;
  }
}

@media screen and (min-width: 1920px) {
  .screen_reelbody {
    --item-width: 130px;
    --item-height: 231px;
    --radius: 250%;
    bottom: -60%;
  }
}

/* タブレット */
@media screen and (max-width: 1024px) {
  .screen_reelbody {
    --item-width: 90px;
    --item-height: 160px;
    --radius: 200%;
    bottom: -70%;
  }
}
@media screen and (max-width: 768px) {
  .screen_reelbody {
    --item-width: 90px;
    --item-height: 160px;
    --radius: 200%;
    bottom: -60%;
  }
}

/* スマホ */
@media screen and (max-width: 480px) {
  .screen_reelbody {
    --item-width: 40px;
    --item-height: 71px;
    --radius: 200%;
    bottom: -50%;
  }
}