.ckj-pr,
.ckj-pr * {
  box-sizing: border-box;
}

.ckj-pr {
  --pink: #db0053;
  --ink: #17171b;
  --body: #3d3d42;
  --muted: #96928c;
  --line: #d9d7d1;
  --ease: cubic-bezier(.16,1,.3,1);
  --reveal-duration: .8s;
  --photo-gap: 220ms;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  padding: clamp(68px, 7vw, 104px) 24px clamp(78px, 8vw, 118px);
}

.ckj-pr--speed-slow {
  --reveal-duration: 1s;
  --photo-gap: 310ms;
}

.ckj-pr--speed-fast {
  --reveal-duration: .62s;
  --photo-gap: 155ms;
}

.ckj-pr__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.ckj-pr__rule {
  height: 1px;
  width: 100%;
  margin-bottom: clamp(40px, 4.8vw, 62px);
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}

.ckj-pr.is-visible .ckj-pr__rule {
  transform: scaleX(1);
}

.ckj-pr__intro {
  max-width: 760px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

/*
 * Rendered Fonts verified in Chrome DevTools against the existing
 * 「チーム構成」section:
 * heading = Hiragino Kaku Gothic ProN / HiraKakuProN-W6
 * body    = Noto Sans JP Thin / NotoSansJP-Thin_Medium
 */
.ckj-pr__eyebrow,
.ckj-pr__title {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
}

.ckj-pr__eyebrow {
  margin: 0 0 16px;
  color: var(--pink);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .20em;
}

.ckj-pr__title {
  max-width: 720px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(31px, 3.5vw, 47px);
  line-height: 1.16;
  letter-spacing: -.048em;
  font-weight: 600;
}

.ckj-pr__accent {
  color: var(--pink);
}

.ckj-pr__stage {
  display: grid;
  grid-template-columns: minmax(0, 700px) 304px;
  column-gap: 0;
  align-items: start;
  justify-content: space-between;
}

.ckj-pr__main {
  min-width: 0;
}

.ckj-pr__visual {
  position: relative;
  width: min(100%, 540px);
  margin: 0 0 clamp(27px, 3.2vw, 38px) clamp(24px, 3vw, 44px);
  overflow: visible;
}

.ckj-pr__visual-frame {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.ckj-pr__visual-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


.ckj-pr__sparkle {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: translateY(10px) scale(.65) rotate(0deg);
  transition: opacity .45s ease, transform .7s var(--ease);
}

.ckj-pr__sparkle::before,
.ckj-pr__sparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(219,0,83,.72));
  border-radius: 999px;
  filter: drop-shadow(0 0 10px rgba(255,175,204,.48));
}

.ckj-pr__sparkle::before {
  width: 2px;
  height: 18px;
}

.ckj-pr__sparkle::after {
  width: 18px;
  height: 2px;
}

.ckj-pr__sparkle--1 { top: 6%; right: 12%; }
.ckj-pr__sparkle--2 { top: 28%; left: 5%; width: 14px; height: 14px; }
.ckj-pr__sparkle--2::before { height: 14px; }
.ckj-pr__sparkle--2::after { width: 14px; }
.ckj-pr__sparkle--3 { right: 3%; bottom: 20%; width: 16px; height: 16px; }
.ckj-pr__sparkle--3::before { height: 16px; }
.ckj-pr__sparkle--3::after { width: 16px; }
.ckj-pr__sparkle--4 { left: 16%; bottom: 10%; width: 12px; height: 12px; }
.ckj-pr__sparkle--4::before { height: 12px; }
.ckj-pr__sparkle--4::after { width: 12px; }

.ckj-pr.is-settled .ckj-pr__sparkle {
  opacity: 1;
}

.ckj-pr.is-settled .ckj-pr__sparkle--1 {
  animation: ckj-pr-sparkle-twinkle 2.8s ease-in-out .15s infinite;
}
.ckj-pr.is-settled .ckj-pr__sparkle--2 {
  animation: ckj-pr-sparkle-twinkle 2.4s ease-in-out .75s infinite;
}
.ckj-pr.is-settled .ckj-pr__sparkle--3 {
  animation: ckj-pr-sparkle-twinkle 3.1s ease-in-out 1.1s infinite;
}
.ckj-pr.is-settled .ckj-pr__sparkle--4 {
  animation: ckj-pr-sparkle-twinkle 2.6s ease-in-out 1.6s infinite;
}

.ckj-pr__text {
  width: min(100%, 590px);
}

.ckj-pr__text-body,
.ckj-pr__text-body p {
  font-family: "Noto Sans JP Thin", "Noto Sans JP", sans-serif !important;
}

.ckj-pr__text-body {
  color: var(--body);
  font-size: 14px;
  line-height: 2.05;
  font-weight: 500;
  letter-spacing: 0;
}

.ckj-pr__text-body p {
  margin: 0 0 .55em;
}

.ckj-pr__text-body p:last-child {
  margin-bottom: 0;
}

.ckj-pr__gallery {
  min-width: 0;
  padding-top: clamp(126px, 11vw, 168px);
}

.ckj-pr__photos {
  display: grid;
  grid-template-columns: repeat(2, 144px);
  grid-auto-rows: 144px;
  gap: 12px;
  width: 300px;
  align-items: start;
}

.ckj-pr__photo {
  position: relative;
  width: 136px;
  height: 136px;
  margin: 0;
  overflow: hidden;
  background: #f5f4f1;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(18px) scale(.975) rotate(0deg);
  transform-origin: center;
  transition:
    opacity var(--reveal-duration) ease,
    clip-path calc(var(--reveal-duration) * 1.15) var(--ease),
    transform calc(var(--reveal-duration) * 1.15) var(--ease),
    box-shadow .45s ease;
  will-change: opacity, transform, clip-path;
}

.ckj-pr__photo.is-shown {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0) scale(1) rotate(0deg);
}

.ckj-pr__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.018);
  transition: transform 1s var(--ease), filter .6s ease;
}

.ckj-pr__photo.is-current {
  z-index: 2;
  box-shadow: 0 15px 30px rgba(23,23,27,.10);
  animation: ckj-pr-photo-lift 1.7s ease-in-out both;
}

.ckj-pr__photo.is-current img {
  transform: scale(1.055);
}

.ckj-pr__photo:nth-child(odd).is-current {
  animation-duration: 1.9s;
}

.ckj-pr__photo:nth-child(even).is-current {
  animation-duration: 1.55s;
}

/* Brochure composition: 1 → 2 → 2 → 1 */
.ckj-pr__photo:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
  width: 124px;
  height: 124px;
  justify-self: center;
  transform: translate(8px, 18px) scale(.975) rotate(2deg);
}
.ckj-pr__photo:nth-child(1).is-shown { transform: translateX(8px) scale(1) rotate(2deg); }

.ckj-pr__photo:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  width: 130px;
  height: 130px;
  justify-self: start;
  transform: translateY(18px) scale(.975) rotate(-2deg);
}
.ckj-pr__photo:nth-child(2).is-shown { transform: scale(1) rotate(-2deg); }

.ckj-pr__photo:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  width: 148px;
  height: 148px;
  justify-self: end;
  align-self: end;
  transform: translateY(18px) scale(.975) rotate(1.5deg);
}
.ckj-pr__photo:nth-child(3).is-shown { transform: scale(1) rotate(1.5deg); }

.ckj-pr__photo:nth-child(4) {
  grid-column: 1;
  grid-row: 3;
  width: 144px;
  height: 144px;
  justify-self: start;
  transform: translate(16px, 18px) scale(.975) rotate(-1.5deg);
}
.ckj-pr__photo:nth-child(4).is-shown { transform: translateX(16px) scale(1) rotate(-1.5deg); }

.ckj-pr__photo:nth-child(5) {
  grid-column: 2;
  grid-row: 3;
  width: 128px;
  height: 128px;
  justify-self: center;
  transform: translate(10px, 28px) scale(.975) rotate(2.5deg);
}
.ckj-pr__photo:nth-child(5).is-shown { transform: translate(10px, 10px) scale(1) rotate(2.5deg); }

.ckj-pr__photo:nth-child(6) {
  grid-column: 2;
  grid-row: 4;
  width: 140px;
  height: 140px;
  justify-self: center;
  transform: translate(14px, 18px) scale(.975) rotate(-2deg);
}
.ckj-pr__photo:nth-child(6).is-shown { transform: translateX(14px) scale(1) rotate(-2deg); }

.ckj-pr__photo:nth-child(7) {
  grid-column: 1;
  grid-row: 5;
  width: 132px;
  height: 132px;
  justify-self: start;
  transform: translateY(18px) scale(.975) rotate(-1deg);
}
.ckj-pr__photo:nth-child(7).is-shown { transform: scale(1) rotate(-1deg); }

.ckj-pr__photo:nth-child(8) {
  grid-column: 2;
  grid-row: 5;
  width: 138px;
  height: 138px;
  justify-self: end;
  transform: translateY(18px) scale(.975) rotate(1deg);
}
.ckj-pr__photo:nth-child(8).is-shown { transform: scale(1) rotate(1deg); }

.ckj-pr__reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) var(--ease);
}

.ckj-pr__reveal[data-reveal="visual"] {
  transform: translateY(24px) scale(.965);
  filter: blur(7px);
  transition:
    opacity calc(var(--reveal-duration) * 1.05) ease,
    transform calc(var(--reveal-duration) * 1.12) var(--ease),
    filter calc(var(--reveal-duration) * 1.05) ease;
}

.ckj-pr__reveal.is-visible {
  opacity: 1;
  transform: none;
}

.ckj-pr__reveal[data-reveal="visual"].is-visible {
  filter: blur(0);
}

.ckj-pr.is-settled .ckj-pr__visual-frame,
.ckj-pr.is-settled .ckj-pr__fallback-diagram {
  animation: ckj-pr-diagram-drift 7s ease-in-out infinite;
}

/* Fallback diagram only. Uploaded main image never receives an outer frame. */
.ckj-pr__fallback-diagram {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
}

.ckj-pr__fallback-diagram::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1.2px solid rgba(219,0,83,.58);
  background:
    radial-gradient(circle at 28% 28%, rgba(206,184,228,.26), transparent 28%),
    radial-gradient(circle at 74% 30%, rgba(176,216,173,.27), transparent 31%),
    radial-gradient(circle at 68% 72%, rgba(244,195,145,.22), transparent 31%),
    radial-gradient(circle at 29% 73%, rgba(164,213,236,.26), transparent 29%),
    #fff;
}

.ckj-pr__fallback-cross,
.ckj-pr__fallback-tag,
.ckj-pr__fallback-center {
  position: absolute;
}

.ckj-pr__fallback-cross--h {
  left: 12%; right: 12%; top: 50%; height: 1px;
  background: rgba(219,0,83,.35);
}

.ckj-pr__fallback-cross--v {
  top: 12%; bottom: 12%; left: 50%; width: 1px;
  background: rgba(219,0,83,.35);
}

.ckj-pr__fallback-tag {
  min-width: 76px;
  padding: 4px 10px 5px;
  border: 1px solid rgba(219,0,83,.48);
  color: var(--pink);
  background: rgba(255,255,255,.96);
  text-align: center;
  font: 500 12px/1.1 "Noto Sans JP Thin", "Noto Sans JP", sans-serif;
  letter-spacing: .05em;
}

.ckj-pr__fallback-tag--top { top: 8.8%; left: 50%; transform: translate(-50%,-50%); }
.ckj-pr__fallback-tag--left { left: 8.8%; top: 50%; transform: translate(-50%,-50%); }
.ckj-pr__fallback-tag--right { right: 8.8%; top: 50%; transform: translate(50%,-50%); }
.ckj-pr__fallback-tag--bottom { bottom: 8.8%; left: 50%; transform: translate(-50%,50%); }

.ckj-pr__fallback-center {
  inset: 36%;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 5px;
  background: rgba(255,255,255,.88);
}

.ckj-pr__fallback-center strong {
  color: var(--ink);
  font: 600 clamp(24px,2.7vw,39px)/1.1 "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  letter-spacing: -.03em;
}

.ckj-pr__fallback-center span {
  color: #555;
  font: 500 11px/1.4 "Noto Sans JP Thin", "Noto Sans JP", sans-serif;
  letter-spacing: .06em;
}

@keyframes ckj-pr-photo-lift {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.025); }
}

@keyframes ckj-pr-diagram-drift {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-4px,0); }
}

@keyframes ckj-pr-sparkle-twinkle {
  0%, 100% { opacity: .18; transform: translateY(6px) scale(.72) rotate(0deg); }
  20% { opacity: .92; transform: translateY(0) scale(1.05) rotate(45deg); }
  50% { opacity: .5; transform: translateY(-3px) scale(.88) rotate(90deg); }
  75% { opacity: 1; transform: translateY(-1px) scale(1.02) rotate(135deg); }
}

@media (max-width: 980px) {
  .ckj-pr__stage {
    grid-template-columns: minmax(0, 1fr) 236px;
    column-gap: 26px;
  }

  .ckj-pr__photos {
    grid-template-columns: repeat(2, 104px);
    grid-auto-rows: 104px;
    width: 224px;
    gap: 10px;
  }

  .ckj-pr__photo {
    width: 104px;
    height: 104px;
  }

  .ckj-pr__gallery {
    padding-top: 122px;
  }
}


@media (max-width: 760px) {
  .ckj-pr {
    padding: 64px 18px 74px;
  }

  .ckj-pr__rule {
    margin-bottom: 32px;
  }

  .ckj-pr__intro {
    margin-bottom: 28px;
  }

  .ckj-pr__eyebrow {
    font-size: 10px;
    margin-bottom: 14px;
  }

  .ckj-pr__title {
    max-width: none;
    font-size: clamp(28px, 8.3vw, 36px);
    line-height: 1.18;
    margin: 0;
  }

  .ckj-pr__stage {
    display: block;
  }

  .ckj-pr__visual {
    width: 100%;
    margin: 0 0 28px;
  }

  .ckj-pr__text {
    width: 100%;
  }

  .ckj-pr__text-body {
    font-size: 13.5px;
    line-height: 1.95;
  }

  .ckj-pr__gallery {
    padding-top: 38px;
  }

  .ckj-pr__photos {
    width: min(100%, 342px);
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 12px;
  }

  .ckj-pr__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    justify-self: stretch !important;
  }

  .ckj-pr__photo:nth-child(1) { grid-column: 2; grid-row: 1; }
  .ckj-pr__photo:nth-child(2) { grid-column: 1; grid-row: 2; }
  .ckj-pr__photo:nth-child(3) { grid-column: 2; grid-row: 2; }
  .ckj-pr__photo:nth-child(4) { grid-column: 1; grid-row: 3; }
  .ckj-pr__photo:nth-child(5) { grid-column: 2; grid-row: 3; }
  .ckj-pr__photo:nth-child(6) { grid-column: 2; grid-row: 4; }
  .ckj-pr__photo:nth-child(7) { grid-column: 1; grid-row: 5; }
  .ckj-pr__photo:nth-child(8) { grid-column: 2; grid-row: 5; }

  .ckj-pr__photo:nth-child(1),
  .ckj-pr__photo:nth-child(2),
  .ckj-pr__photo:nth-child(3),
  .ckj-pr__photo:nth-child(4),
  .ckj-pr__photo:nth-child(5),
  .ckj-pr__photo:nth-child(6),
  .ckj-pr__photo:nth-child(7),
  .ckj-pr__photo:nth-child(8) {
    transform: translateY(18px) scale(.975) rotate(0deg);
  }

  .ckj-pr__photo:nth-child(1).is-shown,
  .ckj-pr__photo:nth-child(2).is-shown,
  .ckj-pr__photo:nth-child(3).is-shown,
  .ckj-pr__photo:nth-child(4).is-shown,
  .ckj-pr__photo:nth-child(5).is-shown,
  .ckj-pr__photo:nth-child(6).is-shown,
  .ckj-pr__photo:nth-child(7).is-shown,
  .ckj-pr__photo:nth-child(8).is-shown {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ckj-pr *,
  .ckj-pr *::before,
  .ckj-pr *::after {
    animation: none !important;
    transition: none !important;
  }

  .ckj-pr__rule {
    transform: none !important;
  }

  .ckj-pr__reveal,
  .ckj-pr__photo {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}