/* コンテナ（シンプル&レスポンシブ） */
.rec-scene {
  width: 100%;
  max-width: 640px;
  height: 440px;
  /*margin: 40px auto 0;*/
  margin: 0 auto;
  perspective: 1500px;
  position: relative;
  overflow: visible;
  user-select: none;
}

/* 回転ステージ */
.rec-carousel {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 600ms ease;
}

/* 面（同サイズ。遠近はperspectiveで見た目だけ） */
.rec-cell {
  position: absolute;
  width: 80%;
  height: 60%;
  left: 10%;
  top: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5aaedb;
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  border-radius: 14px;
  box-shadow: 0 12px 25px rgba(0,0,0,.28);
  backface-visibility: hidden;
}

.rec-cell a {
  display: inline-flex;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

/* 矢印ボタン（企画に被らないよう外側へ） */
.rec-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 26px;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
}
.rec-btn--prev { left: -72px; }
.rec-btn--next { right: -72px; }
.rec-btn:focus-visible { outline: 2px solid #fff; }

/* ドット */
.rec-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.rec-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
  cursor: pointer;
}
.rec-dots button[aria-current="true"] { background: #444; }

/* スマホ調整 */
@media (max-width: 600px) {
  .rec-scene { height: 340px; margin: 0; }
  .rec-cell  { font-size: 1.1rem; }
  .rec-btn--prev { left: 6px; }
  .rec-btn--next { right: 6px; }
  .rec-btn { width: 40px; height: 40px; line-height: 40px; font-size: 22px; }
}