body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.image-stack-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  overflow-x: clip; /* はみ出しを考慮 */
}

.phone-mockup {
  width: 300px;
  height: 600px;
  background-color: #333;
  border-radius: 40px;
  border: 10px solid #222;
  padding: 0;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  /* 左に少しずらす */
  transform: translateX(-10%);
  margin: 0;
  z-index: 5; /* 重なりの順序を明確に */
}

.phone-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

.secondary-screenshot {
  position: relative;
  /* サイズを大きくする */
  width: 200px;
  height: 400px;
  border-radius: 25px;
  border: 5px solid #222;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background-color: #333;
  transition: all 0.3s ease;
  /* 右下に重なるように配置 */
  transform: translate(-35%, 30%);
  z-index: 10; /* こちらを上にする */
  margin: 0;
}

.secondary-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 小さい画面では、重なりを浅くし、全体を少し縮小 */
@media (max-width: 576px) {
  .image-stack-container {
    min-height: 450px; /* 高さを調整 */
  }
  .phone-mockup {
    transform: scale(0.8) translateX(-5%);
  }
  .secondary-screenshot {
    transform: scale(0.8) translate(-25%, 25%);
  }
}