.cf-stage {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.2rem;
}

/* flexの子は中身の幅まで収縮するため、ここで幅を確保する（PC表示崩れの修正・2026-07-19） */
.cf-wrap {
  width: min(1100px, 100%);
}

.cf-viewport {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(300px, 36vw, 440px);
  margin: 0 auto;
  overflow: hidden;
  perspective: 1250px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(240,143,0,0.12), transparent 60%),
    var(--cl-white);
  box-shadow: 0 2px 20px rgba(49,33,20,0.08);
}

.cf-card {
  position: absolute;
  top: 46%;
  left: 50%;
  width: clamp(180px, 28vw, 340px);
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(49,33,20,0.28);
  cursor: pointer;
  border: none;
  padding: 0;
  transform-style: preserve-3d;
  transition:
    width 850ms cubic-bezier(0.19,1,0.22,1),
    transform 850ms cubic-bezier(0.19,1,0.22,1),
    filter 850ms cubic-bezier(0.19,1,0.22,1),
    opacity 850ms cubic-bezier(0.19,1,0.22,1);
}
.cf-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, transparent 55%, rgba(20,10,4,0.55) 100%);
}
.cf-card-face span {
  color: #fff;
  font-family: var(--lab-font-en);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.cf-card-center { z-index: 5; transform: translate(-50%,-50%) translateZ(110px); }
.cf-card-left   { z-index: 4; opacity: 0.85; filter: brightness(0.82); transform: translate(-96%,-50%) rotateY(44deg) translateZ(-60px) scale(0.86); }
.cf-card-right  { z-index: 4; opacity: 0.85; filter: brightness(0.82); transform: translate(-4%,-50%) rotateY(-44deg) translateZ(-60px) scale(0.86); }
.cf-card-left-far  { z-index: 3; opacity: 0.5; filter: brightness(0.62); transform: translate(-150%,-50%) rotateY(58deg) translateZ(-160px) scale(0.68); }
.cf-card-right-far { z-index: 3; opacity: 0.5; filter: brightness(0.62); transform: translate(50%,-50%) rotateY(-58deg) translateZ(-160px) scale(0.68); }

.cf-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.4rem;
}
.cf-arrow {
  width: 40px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(49,33,20,0.15);
  border-radius: 999px;
  background: var(--cl-white);
  color: var(--cl-accent);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.cf-arrow:hover { transform: translateY(-1px); border-color: var(--cl-accent); }

.cf-dots { display: flex; align-items: center; gap: 0.7rem; }
.cf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(49,33,20,0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease, background 0.18s ease;
}
.cf-dot.is-active { background: var(--cl-accent); transform: scale(1.7); }

@media (max-width: 640px) {
  /* 狭い画面では奥行き表現が窮屈になるため、中央カードのみを大きく見せる形に切り替える */
  .cf-card-center { width: min(78vw, 320px); }
  .cf-card-left-far, .cf-card-right-far,
  .cf-card-left, .cf-card-right {
    opacity: 0;
    visibility: hidden;
  }
}