@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

    body {
      position: relative;
      margin: 0;
      padding: 0;
      background: #f9f8f7;
      font-family: "Noto Serif JP", serif;
      font-size: 1.2em;
      font-weight: 400;
      overflow: hidden;
    }

    .wrap {
      position: relative;
    }

    .title {
      width: 100%;
      font-size: 80%;
      padding: 1em 0 0;
      text-align: center;
    }

    .viewer-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slider-wrapper {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    #pages {
      display: flex;
      transition: transform 0.5s ease;
      height: 100%;
    }

    .page {
      width: 95%;
      height: 90vh;
      margin: 0 0 0 5%;
      flex-shrink: 0;
      opacity: 1;
      transition: opacity 0.5s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      font-size: 1.2rem;
      white-space: pre-wrap;
      box-sizing: border-box;
      overflow-wrap: break-word;
      line-height: 1.6;
      padding: 3rem 4rem;
    }

    .vertical .page {
      writing-mode: vertical-rl;
    }

    .horizontal .page {
      writing-mode: horizontal-tb;
    }

    .controls {
      position: absolute;
      width: 100%;
      bottom: 6%;
      right: 0;
      text-align: center;
      z-index: 10;
    }

    .controls button {
      margin-left: 0.5rem;
      padding: 0.3em 0.5em;
      font-size: 100%;
      border: #555 solid 1px;
      border-radius: 4px;
    }

    .controls button span {
      font-size: 80%;
    }

    .nav-left,
    .nav-right {
      position: absolute;
      top: 0;
      width: 20%;
      height: 100%;
      cursor: pointer;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .nav-left {
      left: 0;
    }

    .nav-right {
      right: 0;
    }

    .nav-left.show,
    .nav-right.show {
      opacity: 1;
      background-color: rgba(0, 0, 0, 0.1);
    }

    .nav-label {
      color: #fff;
      font-size: 80%;
      background: rgba(0, 0, 0, 0.5);
      padding: 0.3em 0.7em;
      border-radius: 4px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }

    .nav-left.show .nav-label,
    .nav-right.show .nav-label {
      opacity: 1;
      transform: translateY(0);
    }

    /* モードによるラベル変更 */
    .vertical .nav-left .nav-label::after {
      content: "◀ 次のページ";
    }

    .vertical .nav-right .nav-label::after {
      content: "前のページ ▶";
    }

    .horizontal .nav-left .nav-label::after {
      content: "前のページ ▶";
    }

    .horizontal .nav-right .nav-label::after {
      content: "◀ 次のページ";
    }

    /* 中央表示のための基本スタイルは既存の .nav-label に依存 */

    @media screen and (min-width: 1px) and (max-width: 743px) {

      .title {
        font-size: 70%;
        padding: 1em 0 0;
      }

      .viewer-container {
        height: 90dvh;
      }

      .slider-wrapper {
        height: 90dvh;
      }

      .page {
        height: 88dvh;
        padding: 2rem 1rem;
      }

      .controls {
        bottom: -4%;
      }

      .nav-left,
      .nav-right {
        width: 36%;
      }

      .controls button {
        font-size: 90%;
      }

    }

    @media screen and (min-width: 744px) and (max-width: 1024px) {
      .viewer-container {
        height: 90dvh;
      }

      .slider-wrapper {
        height: 90dvh;
      }

      .page {
        height: 88dvh;
        padding: 2rem 1rem;
      }

      .controls {
        bottom: -2%;
      }
    }

    @media screen and (min-width: 1025px) {

      .nav-left:hover,
      .nav-right:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.1);
      }

      .nav-left:hover .nav-label,
      .nav-right:hover .nav-label,
      .nav-left.show .nav-label,
      .nav-right.show .nav-label {
        opacity: 1;
        transform: translateY(0);
      }

    }