html, body { height: 100%; margin: 0; background: #f2f2f2; }

    /* StPageFlipのroot */
    #book { width: 100%; height: 100%; }

    /* ページ（HTMLモード） */
    .page {
      width: 100%;
      height: 100%;
      background: #fff;
      overflow: hidden;
      padding: 0px;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    }
.page img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;   /* はみ出す分はトリミングされる */
}
.page p{
  margin:0;
  height:100%;
}


    /* 矢印ボタン（左右のみ） */
    .nav {
      position: fixed;
      inset: 0;
      pointer-events: none; /* ボタン以外はクリックを邪魔しない */
    }
    .nav button{
      pointer-events: auto;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.15);
      background: rgba(255,255,255,.85);
      font-size: 22px;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .nav .prev { left: 10px; }
    .nav .next { right: 10px; }

    /* スマホで少し小さく */
    @media (max-width: 560px){
      .nav button{ width: 42px; height: 42px; font-size: 20px; }
      .page{ padding: 18px; }
    }
/* ====== Hover Zoom（虫眼鏡） ====== */
.page { position: relative; } /* レンズを絶対配置するため */

.zoom-icon{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  display: none;              /* hoverで表示 */
  place-items: center;
  cursor: zoom-in;
  user-select: none;
  z-index: 30;
  font: 600 18px/1 system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.page:hover .zoom-icon{ display:grid; }

.zoom-lens{
  position:absolute;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  background-repeat: no-repeat;
  background-color: #fff;
  display: none;              /* 有効化時のみ表示 */
  pointer-events: none;       /* ページめくり/ドラッグを邪魔しない */
  z-index: 20;
}

/* 端末/好みでサイズ調整（例） */
@media (max-width: 560px){
  .zoom-lens{ width: 180px; height: 180px; }
  .zoom-icon{ width: 36px; height: 36px; font-size: 16px; }
}