:root {
  --book-width: 700px;
  --book-height: 1000px;
  --flip-duration: 1s;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

/* 本のコンテナ */
.book-container {
  width: var(--book-width);
  height: var(--book-height);
  position: relative;
  
  perspective: 1500px;
  transform-style: preserve-3d;
  
  background: transparent;
  box-shadow: none; 
  
  overflow: visible;
  transform: translateX(250px);
}

/* ページ共通設定 */
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform var(--flip-duration) ease-in-out;
  contain: layout paint;
   
  will-change: transform;
}

/* 表面・裏面の共通設定 */
.page-front, .page-back {
  position: absolute; 
  inset: 0;
  
  background: #fff;
  
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  outline: 1px solid transparent; 
}

/* 画像設定 */
.page-front img, .page-back img {
  width: 100%;
  height: 100%;
  object-fit: fill; 
  display: block;
}

/* --- PC専用：本の背（ノド）の影 --- */
.page-front::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(to right, rgba(0,0,0,0.2), transparent);
  z-index: 20;
  pointer-events: none;
}
.page-back::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(to left, rgba(0,0,0,0.2), transparent);
  z-index: 20;
  pointer-events: none;
}

/* ⭐ Page13（最後の左ページ）の影を消す設定 ⭐ */
.page-back.no-shadow::after {
  display: none !important;
  content: none !important;
}

/* --- 挙動 --- */
.page-back {
  transform: rotateY(180deg);
  z-index: 0;
}

.page.flipped {
  transform: rotateY(-180deg);
}

/* --- リンク設定 --- */
.link {
  position: absolute;
  display: block;
  cursor: pointer;
  z-index: 50; 
  background: rgba(0, 0, 0, 0); 
  border: none;
  min-height: initial; 
  min-width: initial; 
  text-indent: -9999px;
  backface-visibility: hidden;
}

/* リンク座標定義 */
.link.page02-1 { left: 62.22%; top: 92.5%; width: 30.12%; height: 1.565%; } 
.link.page02-2 { left: 62.26%; top: 94.545%; width: 30.70%; height: 1.565%; }
.link.page03-1 { left: 58.86%; top: 92.725%; width: 35.01%; height: 1.345%; } 
.link.page05-1 { left: 63.47%; top: 91.610%; width: 25.63%; height: 1.495%; } 
.link.page06-1 { left: 59.88%; top: 91.560%; width: 20.64%; height: 1.315%; } 
.link.page07-1 { left: 62.25%; top: 92.755%; width: 20.08%; height: 1.440%; } 
.link.page08-1 { left: 63.81%; top: 89.995%; width: 26.12%; height: 1.310%; } 
.link.page08-2 { left: 63.61%; top: 91.85%; width: 29.12%; height: 1.310%; } 
.link.page09-1 { left: 60.08%; top: 92.065%; width: 20.86%; height: 1.540%; } 
.link.page10-1 { left: 62.19%; top: 92.00%; width: 28.42%; height: 1.325%; } 
.link.page11-1 { left: 58.81%; top: 91.640%; width: 24.07%; height: 1.245%; } 
.link.page13-1 { left: 57.87%; top: 88.05%; width: 40.12%; height: 1.325%; } 

/* ナビゲーション */
.navigation {
  position: fixed;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  pointer-events: none;
}

button {
  pointer-events: auto;
  padding: 15px 25px;
  font-size: 16px;
  cursor: pointer;
  background: rgba(51, 51, 51, 0.8);
  color: #fff;
  border-radius: 50px;
  transition: opacity 0.3s;
}
button:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.5; 
}

/* スマホ用設定 */
@media(max-width:768px){
  .book-container {
    width: 90vw;
    height: auto;
    aspect-ratio: 1414 / 2000;
    transform: none;
    left: 0;
  }
  
  .navigation {
    display: none !important;
  }

  .page-front::after, .page-back::after {
    display: none !important;
  }
}