/* ul自体も中央揃え */
ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

/* li自体をフレックスで中央揃え */
li.comic-page {
  display: flex;               /* 子要素をフレックスに */
  justify-content: center;     /* 水平方向センター */
  margin: 20px 0;              /* 上下余白 */
}

/* 画像本体 */
li.comic-page img {
  max-width: 90%;              /* 画面幅の90%まで */
  max-height: 80vh;            /* 画面高さの80%まで */
  width: auto;
  height: auto;
  object-fit: contain;         /* 縦横比を維持して画面に収める */
  transition: transform 0.2s ease;
  border: none;                /* 枠を消す */
  box-shadow: none;            /* 影も消す */
}

/* スマホ・タブレット対応 */
@media screen and (max-width: 1024px) {
  li.comic-page img {
    max-width: 95%;
    max-height: 75vh;
  }
}

@media screen and (max-width: 768px) {
  li.comic-page img {
    max-width: 95%;
    max-height: 70vh;
  }
}

@media screen and (max-width: 480px) {
  li.comic-page img {
    max-width: 100%;
    max-height: 65vh;
  }
}

/* figure全体を中央揃え */
li.comic-page figure {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}

/* キャプション（画像下の説明） */
li.comic-page figcaption {
  margin-top: 8px;           /* 画像との間に少し余白 */
  font-size: 0.9em;
  text-align: center;
}