section p:nth-child(3n + 1) { background-color: #fce4ec; }
section p:nth-child(3n + 2) { background-color: #e3f2fd; }
section p:nth-child(3n + 3) { background-color: #e8f5e9; }

/* 画面全体の基本設定（スマホ対策込み） */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
/*   height: 100dvh; */
  overflow: hidden; /* 本体はスクロールさせない */
  overscroll-behavior: none; /* スクロールの「はみ出し」を裏に伝えない（主にAndroid系） */
}

/* 背景部分（ここが通常時のスクロール領域） */
.page-content {
  height: 100vh;
/*   height: 100dvh; */
  overflow-y: auto; /* 普段はここをスクロール */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* ここで止める */
}

/* メニューボタン */
.menu-button {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 10px 16px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  z-index: 1001;
  user-select: none;
}

/* 画面の暗いオーバーレイ（背景） */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;

  /* 裏側にスクロールが伝わらないように */
  overscroll-behavior: contain;
  touch-action: none; /* タップ・スワイプイベントをここで止める */
}

/* サイドパネル */
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  max-width: 80vw; /* スマホでちょっと余白が出るサイズ */
  height: 100dvh;
  background: #fff;
  box-shadow: -4px 0 10px rgba(0,0,0,0.2);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}

/* 中身（ここだけスクロールさせる） */
.side-panel-content {
  margin-top: 10px;
  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto; /* メニュー内だけスクロール */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 閉じるボタン */
.close-button {
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  margin-bottom: 10px;
}

#menu-toggle { display: none; } /* チェックボックス自体は非表示 */
#menu-toggle:checked ~ .overlay { opacity: 1; pointer-events: auto; } /* メニュー ON のとき：オーバーレイを有効化 */
#menu-toggle:checked ~ .side-panel { transform: translateX(0); } /* メニュー ON のとき：サイドパネルを表示 */
#menu-toggle:checked ~ .page-content { overflow: hidden; } /* メニュー ON のとき：背景のスクロールを止める（page-contentを固定） */