.re_cata-area {
      background-color: #f0f0f0;
      display: flex;
      flex-direction: column; /* 要素を上から下に縦並びにする */
      justify-content: center;
      align-items: center;    /* 左右中央に配置 */
      min-height: 100vh;
      margin: 0;
      font-family: sans-serif;
      perspective: 1500px;
      box-sizing: border-box;
      padding: 20px;
                  overflow: hidden;
    }

    /* 本のコンテナ */
    .book {
      position: relative;
      /* width: 600px;
      height: 400px; */
      width: 930px;
    height: 770px;
      box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
      transform-style: preserve-3d;
      margin-bottom: 20px; /* 本と下部ボタンの間隔 */
    }

    /* 隠しチェックボックス */
    input[type="checkbox"] {
      display: none;
    }
    
    /* ページの基本設定 */
    .page {
      position: absolute;
      width: 455px;
      height: 100%;
      top: 0;
      left: 455px;
      background-color: #fff;
      transform-origin: left center;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), z-index 0.6s;
      transform-style: preserve-3d;
      box-sizing: border-box;
      cursor: pointer;
    }

    /* ページの表と裏の共通設定 */
    .front, .back {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding: 30px;
      box-sizing: border-box;
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .back {
      transform: rotateY(180deg);
      background-color: #f9f9f9;
    }

    /* 初期状態の重なり順 */
    #p1 { z-index: 10; }
    #p2 { z-index: 9; }
    #p3 { z-index: 8; }
    #p4 { z-index: 7; }
    #p5 { z-index: 6; }
    #p6 { z-index: 5; }
    #p7 { z-index: 4; }
    #p8 { z-index: 3; }
    #p9 { z-index: 2; }
    #p10 { z-index: 1; }

    /* チェックボックスが入った時の動き */
    #c1:checked ~ .book #p1 { transform: rotateY(-180deg); z-index: 1; }
    #c2:checked ~ .book #p2 { transform: rotateY(-180deg); z-index: 2; }
    #c3:checked ~ .book #p3 { transform: rotateY(-180deg); z-index: 3; }

    #c4:checked ~ .book #p4 { transform: rotateY(-180deg); z-index: 4; }
    #c5:checked ~ .book #p5 { transform: rotateY(-180deg); z-index: 5; }
    #c6:checked ~ .book #p6 { transform: rotateY(-180deg); z-index: 6; }   
    #c7:checked ~ .book #p7 { transform: rotateY(-180deg); z-index: 7; }
    #c8:checked ~ .book #p8 { transform: rotateY(-180deg); z-index: 8; }   
    #c9:checked ~ .book #p9 { transform: rotateY(-180deg); z-index: 9; }
    #c10:checked ~ .book #p10 { transform: rotateY(-180deg); z-index: 10; }








    /* ==========================================
       ページ下部のナビゲーションボタンのスタイル
       ========================================== */

    .book-nav {
      display: flex;
      gap: 20px; /* 「前へ」と「次へ」の間隔 */
      height: 40px;
      align-items: center;
    }

    .nav-btn {
      padding: 10px 24px;
      background-color: #333;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      user-select: none;
      transition: background-color 0.2s;
    }

    .nav-btn:hover {
      background-color: #555;
    }

    /* デフォルトではすべてのボタンを非表示に */
    .book-nav .nav-btn {
      display: none;
    }

    /* --- 状態別のボタン表示切り替え --- */

    /* 1. 【表紙（最初のページ）】のとき：次へボタンのみ表示 */
    .re_cata-area:not(:has(#c1:checked)) #next-from-p1 {
      display: block;
    }

    /* 2. 【1ページめくった状態】のとき：前へ、次へ両方表示 */
    #c1:checked ~ :not(:has(#c2:checked)) #prev-from-p2,
    #c1:checked ~ :not(:has(#c2:checked)) #next-from-p2,
    #c3:checked ~ :not(:has(#c4:checked)) #prev-from-p4,
    #c3:checked ~ :not(:has(#c4:checked)) #next-from-p4,
    #c5:checked ~ :not(:has(#c6:checked)) #prev-from-p6,
    #c5:checked ~ :not(:has(#c6:checked)) #next-from-p6,
    #c7:checked ~ :not(:has(#c8:checked)) #prev-from-p8,
    #c7:checked ~ :not(:has(#c8,:checked)) #next-from-p8,
    #c9:checked ~ :not(:has(#c10:checked)) #prev-from-p10,
    #c9:checked ~ :not(:has(#c10:checked)) #next-from-p10
    {
      display: block;
    }

    /* 3. 【2ページめくった状態（最後のページ付近）】のとき：前へボタンのみ表示 */
    #c8:checked ~ #c9:checked ~ :not(:has(#c10:checked)) #prev-from-p10 {
      display: block;
    }



    /*------- モーダルウインドウ ここから ------*/

.pdf-modal {
  margin: 2rem auto 0;
}


    .modal-content {
      display: flex;
    /* justify-content: right; */
    flex-direction: column;
    }
    .move-button {
    padding: .5rem .7rem;
    border-radius: 10px;
    color: #fff;
    font-size: .7rem;
    font-weight: bold;
    background-color: #777;
        margin: 1rem 0 1.5rem;
    }


.close-btn {
  font-size: 1.4rem;
    text-align: right;
    /* display: flex; */
    border: none;
    padding: 0 .7rem;
}


/* モーダル全体のデザインと最大サイズの固定 */
dialog.pdf-modal {
  width: 90%;
  max-width: 800px;
  height: 80vh; /* 画面の高さの80%に固定 */
  max-height: 700px;
  border: none;
  border-radius: 8px;
  padding: 0; /* 余白をなくしてスッキリさせる */
  overflow: hidden; /* モーダル本体からはみ出た部分を隠す */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* モーダルの中身（レイアウト基準） */
dialog.pdf-modal .modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 閉じるボタンの位置調整 */
dialog.pdf-modal .close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 27px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
      cursor: pointer;
}

/* iframe（PDFビューア）をぴったり固定 */
dialog.pdf-modal iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* スクロールバーの動きや意図しないドラッグを軽減 */
  touch-action: pan-y; 
}


/* -------中身を画像にした場合 --------*/
/* モーダル全体の背景（画面全体を覆う） */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none; /* 初期状態は非表示 */
    justify-content: center; /* 左右中央揃え */
    align-items: center;    /* 上下中央揃え */
    z-index: 9999;
}

/* モーダルの中身（動かないようにサイズとレイアウトを固定） */
.modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* モーダル内の画像が暴れない（縦横無尽に動かない）ための設定 */
.modal-content img {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain; /* 比率を保ったまま枠内に収める */
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}



/* dialog要素自体のデフォルトスタイルをリセットして中央に配置 */
dialog.catalog-modal {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 95vw;
    max-height: 95vh;
    margin: 1rem auto 0;
    overflow: hidden;
}

/* モーダルの背景（暗幕） */
dialog.catalog-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

/* モーダルの中身をまとめるラッパー（位置の基準点になる） */
.modal-content {
    position: relative;
    display: inline-block;
}

/* モーダル内の画像が暴れない（縦横無尽に動かない）ための設定 */
.modal-content img {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    background-color: #fff; /* 画像の背景が透明な場合の対策 */
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
}

/* 閉じるボタンのデザインと配置 */
.modal-close-btn {
    position: absolute;
 top: -8px;
    right: -6px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    font-size: 35px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    z-index: 10;
    transition: background-color 0.2s;
}

.modal-close-btn:hover {
    background-color: #e74c3c; /* ホバー時に赤っぽくする例 */
}

.imgundertext {
  font-size: .7rem;
  margin: 0 0 .3rem;
}

/*------- モーダルウインドウ ここまで ------*/




    /* ========================================
   レスポンシブ調整
   ======================================== */


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

  /* ---------ipad用 ------*/

/* 本のコンテナ */
    .book {
      position: relative;
      /* width: 600px;
      height: 400px; */
        height: 650px;
        width: 640px;
      box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
      transform-style: preserve-3d;
      margin-bottom: 20px; /* 本と下部ボタンの間隔 */
    }


    /* ページの基本設定 */
    .page {
      position: absolute;
      width: 320px;
      height: 100%;
      top: 0;
      left: 320px;
    }


.re_cata-area {
      min-height: fit-content;
}

  }






@media screen and (max-width: 600px) {

/* 本のコンテナ */
    .book {
      position: relative;
      /* width: 600px;
      height: 400px; */
        height: 350px;
        width: 100%;
      box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
      transform-style: preserve-3d;
      margin-bottom: 20px; /* 本と下部ボタンの間隔 */
    }


    /* ページの基本設定 */
    .page {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;
      left: 50%;
      background-color: #fff;
      transform-origin: left center;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), z-index 0.6s;
      transform-style: preserve-3d;
      box-sizing: border-box;
      cursor: pointer;
    }

    .re_cata-area {
        min-height: fit-content;
                padding: 10px;
    }

    .move-button {
    padding: .5rem .7rem;
    border-radius: 5px;
    color: #fff;
    font-size: .7rem;
    font-weight: bold;
    background-color: #777;
            margin: 1rem 0 1.5rem;
}

.front, .back { 
  padding: 12px;
}

.imgundertext {
  font-size: .5rem;
}

}