:root {
  --story-blue: #19339a;
  --story-pale: #eef7fc;
  --story-green: #94d7aa;
  --story-ink: #333333;
}

.story-page,
.story-page * {
  box-sizing: border-box;
}

.story-page {
  --view-more-accent: #238b20;
  --next-view-more-accent: #2a91bf;
  margin: 0;
  color: var(--story-ink);
  background: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
}

.story-page.cross-talk-page {
  --view-more-accent: #2a91bf;
  --next-view-more-accent: #238b20;
}

.story-hero {
  display: grid;
  min-height: calc(230px + 108px);
  padding: calc(56px + 108px) 24px 42px;
  place-content: center;
  background: var(--story-pale);
  color: var(--story-blue);
  text-align: center;
}

.story-hero p {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.story-hero h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.story-breadcrumb {
  padding: 22px 20px;
  border-bottom: 1px solid #e7eaed;
  background: #ffffff;
}

.story-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--story-blue);
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}

.story-breadcrumb li + li::before {
  margin-right: 8px;
  content: ">";
}

.story-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.story-breadcrumb a:hover,
.story-breadcrumb a:focus-visible {
  text-decoration: underline;
}

.story-intro {
  padding-block: 44px 48px;
}

.experience-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;
}

.experience-content__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1000px);
  margin-inline: auto;
  padding: 58px 0 0;
}

/* TOPページと同じピースを、下層ページ全体の余白へ散らす装飾 */
.lower-page-puzzles {
  /* 中央コンテンツと画面端の間に収まる、安全な装飾帯 */
  --piece-inset: clamp(42px, calc(50% - 700px), 260px);
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lower-page-puzzle {
  --piece-art: url("/recruit/assets/images/talk2027/puzzle-1.png");
  --piece-filter: none;
  position: absolute;
  width: 64px;
  aspect-ratio: 1.32;
  background: transparent var(--piece-art) center / contain no-repeat;
  opacity: 0.16;
  filter: var(--piece-filter);
  mix-blend-mode: multiply;
  scale: 1.12;
}

.lower-page-puzzle:nth-child(4n + 1),
.lower-page-puzzle:nth-child(4n + 4) {
  --piece-filter: hue-rotate(285deg) saturate(1.15) brightness(1.05);
}

.lower-page-puzzle--01 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-2.png"); top: 2%; left: calc(var(--piece-inset) + 10px); width: 76px; transform: rotate(-14deg); }
.lower-page-puzzle--02 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-3.png"); top: 7.5%; right: calc(var(--piece-inset) + 4px); width: 50px; transform: rotate(22deg); }
.lower-page-puzzle--03 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-5.png"); top: 13%; left: calc(var(--piece-inset) + 32px); width: 56px; transform: rotate(72deg); }
.lower-page-puzzle--04 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-6.png"); top: 18.5%; right: calc(var(--piece-inset) + 26px); width: 78px; transform: rotate(-20deg); }
.lower-page-puzzle--05 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-4.png"); top: 24%; left: var(--piece-inset); width: 48px; transform: rotate(35deg); }
.lower-page-puzzle--06 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-6.png"); top: 29.5%; right: calc(var(--piece-inset) + 38px); width: 62px; transform: rotate(95deg); }
.lower-page-puzzle--07 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-3.png"); top: 35%; left: calc(var(--piece-inset) + 22px); width: 72px; transform: rotate(-42deg); }
.lower-page-puzzle--08 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-5.png"); top: 40.5%; right: var(--piece-inset); width: 52px; transform: rotate(15deg); }
.lower-page-puzzle--09 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-1.png"); top: 46%; left: calc(var(--piece-inset) + 36px); width: 60px; transform: rotate(80deg); }
.lower-page-puzzle--10 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-4.png"); top: 51.5%; right: calc(var(--piece-inset) + 18px); width: 78px; transform: rotate(-28deg); }
.lower-page-puzzle--11 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-2.png"); top: 57%; left: var(--piece-inset); width: 50px; transform: rotate(8deg); }
.lower-page-puzzle--12 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-3.png"); top: 62.5%; right: calc(var(--piece-inset) + 38px); width: 64px; transform: rotate(64deg); }
.lower-page-puzzle--13 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-5.png"); top: 68%; left: calc(var(--piece-inset) + 20px); width: 74px; transform: rotate(-24deg); }
.lower-page-puzzle--14 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-1.png"); top: 73.5%; right: var(--piece-inset); width: 52px; transform: rotate(38deg); }
.lower-page-puzzle--15 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-6.png"); top: 79%; left: calc(var(--piece-inset) + 40px); width: 58px; transform: rotate(102deg); }
.lower-page-puzzle--16 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-2.png"); top: 84.5%; right: calc(var(--piece-inset) + 22px); width: 76px; transform: rotate(-36deg); }
.lower-page-puzzle--17 { --piece-art: url("/recruit/assets/images/talk2027/puzzle-4.png"); top: 89.5%; left: var(--piece-inset); width: 50px; transform: rotate(18deg); }
/* セクション下端では中途半端に見切れるため、最下部の装飾は表示しない */
.lower-page-puzzle--18 { display: none; }

@media (max-width: 1100px) {
  .lower-page-puzzles { --piece-inset: 30px; }
  .lower-page-puzzle { opacity: 0.13; scale: 0.76; }
}

@media (max-width: 700px) {
  /* SPは装飾用の安全な左右余白がないため、コンテンツとの重なりを防ぐ。 */
  .lower-page-puzzles { display: none; }
}

.experience-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 260px;
}

.experience-lead .cube,
.next-content .cube {
  flex: 0 0 352px;
}

.experience-lead__copy {
  max-width: 360px;
  font-size: 20px;
  line-height: 1.75;
}

.experience-lead__no-break {
  white-space: nowrap;
}

.content-kicker {
  display: block;
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.12em;
}

.content-kicker--story { color: #238b20; }
.content-kicker--cross { color: #092d9e; }

.experience-guide {
  margin: 18px 0 28px;
  color: #687178;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.experience-guide__sp-break {
  display: none;
}

.experience-pieces {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 980px;
  margin: 0 auto 42px;
}

.experience-piece {
  position: relative;
  display: grid;
  aspect-ratio: 1 / .84;
  min-height: 0;
  padding: 24px 28px 18px;
  border: 0;
  background: transparent;
  color: #292929;
  font: inherit;
  cursor: pointer;
  place-content: center;
  isolation: isolate;
}

.experience-piece__shape {
  position: absolute;
  z-index: -1;
  inset: -13%;
  width: 126%;
  height: 126%;
  overflow: visible;
  opacity: .76;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.experience-piece__shape path {
  fill: #58c76a;
}

.experience-piece strong {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}

.experience-piece small {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: #737b82;
  font-size: 12px;
}

.experience-piece:hover .experience-piece__shape,
.experience-piece:focus-visible .experience-piece__shape {
  opacity: .86;
  filter: brightness(1.03) drop-shadow(0 10px 12px rgba(42, 103, 65, 0.15));
  transform: translateY(-4px);
}

.experience-piece:focus-visible {
  outline: 3px solid rgba(25, 51, 154, 0.28);
  outline-offset: 5px;
}

.experience-piece.is-read {
  color: #5f7867;
}

.experience-piece.is-read .experience-piece__shape {
  opacity: .42;
  filter: saturate(.68);
  transform: none;
}

.experience-piece.is-read small {
  color: #8a9690;
}

.puzzle-board {
  position: relative;
  display: grid;
  min-height: 650px;
  margin: 0 auto 36px;
  overflow: hidden;
  border: 1px solid #e5edf0;
  background: #fbfdfe;
  place-items: center;
  perspective: 1400px;
}

.puzzle-board::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #ffffff 0, rgba(255,255,255,.2) 58%, rgba(238,247,252,.5) 100%);
  content: "";
}

.puzzle-board__flipper {
  position: absolute;
  z-index: 2;
  inset: 18px;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.2, .72, .22, 1);
}

.puzzle-board.is-complete .puzzle-board__flipper {
  transform: rotateY(180deg);
}

.puzzle-board__face {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: #fbfdfe;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  place-items: center;
}

.puzzle-board__face--front {
  transform: translateZ(1px);
}

.puzzle-board__face--back {
  background: radial-gradient(circle at 50% 45%, #fff 0, #f7fbfd 72%, #eef7fc 100%);
  transform: rotateY(180deg) translateZ(1px);
}

.puzzle-board__face--back img {
  width: min(60%, 420px);
  height: min(82%, 520px);
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(35, 70, 82, .14));
}

.puzzle-board__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.puzzle-board__tile {
  fill: #58c76a;
  stroke: rgba(255, 255, 255, .38);
  stroke-width: 2;
  opacity: .78;
}

.puzzle-board__slot {
  fill: #dce4e7;
  stroke: rgba(166, 181, 187, .38);
  opacity: .12;
  transition: opacity 260ms ease, filter 260ms ease, fill 260ms ease;
}

.puzzle-board__slot.is-filled {
  fill: #58c76a;
  stroke: rgba(255, 255, 255, .38);
  opacity: .78;
  filter: drop-shadow(0 5px 7px rgba(38, 98, 58, 0.12));
}

.puzzle-board.is-complete .puzzle-board__tile {
  fill: url(#puzzle-complete-gradient);
  stroke: rgba(255, 255, 255, .48);
  opacity: .94;
}

.puzzle-board.is-complete::after {
  position: absolute;
  z-index: 4;
  top: -20%;
  bottom: -20%;
  left: -34%;
  width: 24%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .52), rgba(255, 255, 255, 0));
  content: "";
  pointer-events: none;
  transform: skewX(-18deg);
  animation: board-shine 1.15s ease-out 1 both;
}

.puzzle-board__sparkles {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.puzzle-board.is-complete .puzzle-board__sparkles::before,
.puzzle-board.is-complete .puzzle-board__sparkles::after,
.puzzle-board.is-complete .puzzle-board__sparkles span {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff7a6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  content: "";
  animation: board-sparkle 1.15s ease-in-out 2;
}

.puzzle-board.is-complete .puzzle-board__sparkles::before { top: 20%; left: 22%; }
.puzzle-board.is-complete .puzzle-board__sparkles::after { top: 34%; right: 20%; animation-delay: 180ms; }
.puzzle-board.is-complete .puzzle-board__sparkles span { bottom: 18%; left: 25%; animation-delay: 360ms; }

.puzzle-reset {
  display: block;
  min-width: 190px;
  margin: -8px auto 52px;
  padding: 13px 30px;
  border: 2px solid #2d9d50;
  border-radius: 999px;
  background: #fff;
  color: #237f40;
  font: 700 16px/1.4 "Noto Sans JP", sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.puzzle-reset[hidden] {
  display: none !important;
}

.puzzle-reset:hover,
.puzzle-reset:focus-visible {
  background: #2d9d50;
  color: #fff;
  box-shadow: 0 8px 20px rgba(35, 127, 64, .2);
  transform: translateY(-2px);
}

.puzzle-reset:focus-visible {
  outline: 3px solid rgba(45, 157, 80, .28);
  outline-offset: 3px;
}

.next-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  min-height: 356px;
  padding: 30px 0 46px;
  background: #f7f7f7;
  box-shadow: 0 0 0 100vmax #f7f7f7;
  clip-path: inset(0 -100vmax);
  color: var(--story-ink);
  text-decoration: none;
}

.next-content__copy {
  font-size: 20px;
  line-height: 1.65;
}

.next-content__copy small {
  display: flex;
  width: max-content;
  align-items: center;
  margin-top: 24px;
  color: #778189;
}

.story-page .profile__more > span:first-child,
.story-page .experience-piece small > span:first-child,
.story-page .cross-talk-member__more > span:first-child,
.story-page .next-content__copy small > span:first-child {
  border-bottom: 1px solid currentColor;
}

.story-page .view-more__arrow {
  display: inline-block;
  margin-left: 2px;
  transition: margin-left 180ms ease;
}

.story-page .profile__more,
.story-page .experience-piece small,
.story-page .cross-talk-member__more,
.story-page .next-content__copy small {
  transition: color 180ms ease;
}

.story-page .cross-talk-member__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin-inline: auto;
  text-decoration: none;
}

.story-page .profile__card:hover .profile__more,
.story-page .experience-piece:hover small,
.story-page .cross-talk-member:hover .cross-talk-member__more {
  color: var(--view-more-accent);
}

.story-page .next-content:hover .next-content__copy small {
  color: var(--next-view-more-accent);
}

.story-page .profile__card:hover .view-more__arrow,
.story-page .experience-piece:hover .view-more__arrow,
.story-page .cross-talk-member:hover .view-more__arrow,
.story-page .next-content:hover .view-more__arrow {
  margin-left: 10px;
}

/* Profile links stay visually stable on the lower pages. */
.story-page .profile__card .profile__more,
.story-page .cross-talk-member .cross-talk-member__more {
  color: #6f78a1;
  transition: none;
}

.story-page .profile__card:hover .profile__more,
.story-page .cross-talk-member:hover .cross-talk-member__more {
  color: #6f78a1;
}

.story-page .profile__card:hover .view-more__arrow,
.story-page .cross-talk-member:hover .view-more__arrow {
  margin-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .story-page .view-more__arrow { transition: none; }
}

/* Requested typography, spacing, and mobile puzzle consistency. */
.story-page .intro__lead,
.story-page .profile h2 { color: #0f2794; }
.story-page .experience-guide { margin-top: 58px; }
.story-page .experience-piece strong { font-size: 16px; }
.story-page .experience-piece small { color: #252529; }
.story-page .experience-piece:hover small,
.story-page .experience-piece:focus-visible small,
.story-page .experience-piece small > span,
.story-page .experience-piece small .view-more__arrow { color: #252529; }
.story-page .experience-modal__answer { font-weight: 400; }
.story-page .experience-modal__answer strong { font-weight: 700; }

@media (max-width: 820px) {
  .story-page .experience-guide { margin-top: 28px; }
  .story-page .experience-piece {
    aspect-ratio: 1 / .84;
    min-height: 0;
    padding: 18px 12px 14px;
  }
  .story-page .experience-piece strong { font-size: 13px; line-height: 1.4; }
  .story-page .experience-piece small { font-size: 11px; }
  .story-page .experience-modal__answer { font-weight: 400; }
}

.story-page .next-content__copy small,
.cross-talk-page .next-content__copy small { color: #252529; }

@media (min-width: 821px) {
  .story-page .experience-guide { margin-top: 58px !important; }
}

@media (max-width: 820px) {
  .story-page .experience-guide { margin-top: 34px !important; }
  .story-page .experience-lead .cube,
  .story-page .next-content .cube { flex-basis: 352px; transform: translateX(0) scale(.88); }
}

.experience-modal {
  width: min(1320px, calc(100vw - 24px));
  max-width: 1320px;
  padding: 0;
  border: 0;
  border-radius: 32px;
  background: transparent;
}

.experience-modal::backdrop { background: rgba(18, 22, 24, 0.58); }

.experience-modal__content {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: minmax(170px, auto) auto;
  column-gap: 8px;
  min-height: 480px;
  padding: 46px 36px 50px 20px;
  border: 2px solid #333333;
  border-radius: 32px;
  background: #fffcf4;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.34);
}

.experience-modal__puzzle {
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  width: 320px;
  height: 270px;
  margin-left: 0;
  border: 0;
  background: transparent;
  color: #242424;
  text-align: center;
  isolation: isolate;
}

.experience-modal__puzzle::before,
.experience-modal__puzzle::after {
  content: none;
}

.experience-modal__puzzle-shape {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: .76;
}

@media (min-width: 821px) {
  .experience-modal__puzzle-shape { transform: scale(1.18); }
  .story-page .experience-modal__puzzle-shape { transform: none; }
}

.experience-modal__puzzle-shape path { fill: #58c76a; }

.experience-modal__puzzle strong {
  position: relative;
  z-index: 1;
  max-width: 66%;
  font-size: 22px;
  line-height: 1.45;
}

.experience-modal h2 {
  align-self: center;
  margin: 0 12px 0 0;
  color: #242424;
  font-size: 28px;
  line-height: 1.45;
  font-weight: 800;
  white-space: nowrap;
}

.experience-modal__mobile-break { display: none; }

.experience-modal__avatar {
  align-self: center;
  justify-self: center;
  width: 150px;
  height: 150px;
  margin-left: 0;
  border-radius: 50%;
  object-fit: cover;
}

.experience-modal__answer {
  align-self: center;
}

.experience-modal__answer p {
  margin: 0;
  color: #242424;
  font-size: clamp(17px, 1.28vw, 21px);
  line-height: 1.58;
}

.experience-modal__answer strong {
  font-weight: 800;
}

.experience-modal__close {
  position: absolute;
  top: 34px;
  right: 36px;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: #202124;
  cursor: pointer;
}

.experience-modal__close span::before,
.experience-modal__close span::after {
  position: absolute;
  top: 28px;
  left: 14px;
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: #ffffff;
  content: "";
}

.experience-modal__close span::before { transform: rotate(45deg); }
.experience-modal__close span::after { transform: rotate(-45deg); }

.flying-piece {
  position: fixed;
  z-index: 9999;
  inset: auto;
  margin: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: top left;
  will-change: transform, opacity;
  transition: transform 700ms cubic-bezier(.22,.78,.24,1), opacity 700ms ease;
}

@keyframes board-sparkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  45% { opacity: 1; transform: scale(2.1) rotate(90deg); }
}

@keyframes board-shine {
  0% {
    left: -34%;
    opacity: 0;
  }
  18% {
    opacity: .8;
  }
  100% {
    left: 116%;
    opacity: 0;
  }
}

@media (max-width: 700px) {
  .story-hero {
    min-height: calc(174px + 64px);
    padding: calc(42px + 64px) 20px 34px;
  }

  .story-hero p { font-size: 12px; }
  .story-hero h1 { font-size: 42px; }

  .story-breadcrumb { padding: 20px 16px; }
  .story-breadcrumb ol { gap: 6px; font-size: 12px; }
  .story-breadcrumb li + li::before { margin-right: 6px; }

  .story-intro { padding-block: 32px 36px; }

  .experience-content__inner {
    width: min(100% - 32px, 410px);
    padding: 36px 0 0;
  }

  .experience-lead,
  .next-content {
    flex-direction: column;
    gap: 12px;
  }

  .experience-lead { min-height: 330px; }
  .experience-lead .cube,
  .next-content .cube {
    flex-basis: 260px;
    transform: translateX(-20px) scale(.82);
    transform-origin: center;
  }

  .experience-lead__copy,
  .next-content__copy { margin-top: -40px; text-align: center; }

  .experience-lead__copy {
    width: auto;
    max-width: 310px;
    font-size: 18px;
  }
  .experience-lead__no-break {
    white-space: normal;
  }
  .next-content__copy { font-size: 18px; }

  .content-kicker {
    margin-bottom: 14px;
    font-size: 22px;
  }

  .experience-guide { margin-top: 34px; font-size: 12px; }
  .experience-guide__sp-break { display: initial; }

  .experience-pieces {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
    margin-bottom: 28px;
  }

  .experience-piece { min-height: 0; padding: 22px 14px 16px; }
  .experience-piece strong { font-size: 14px; }

  .puzzle-board {
    min-height: 448px;
    margin-bottom: 28px;
  }

  .puzzle-board__flipper {
    inset: 8px;
  }

  .puzzle-board__grid {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .puzzle-reset {
    min-width: 172px;
    margin: -4px auto 38px;
    padding: 12px 24px;
    font-size: 15px;
  }

  .next-content { min-height: 406px; padding: 20px 0 26px; }
  .next-content__copy small {
    justify-content: center;
    margin: 14px auto 0;
  }

  .experience-modal {
    width: min(430px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    border-radius: 24px;
  }

  .experience-modal__content {
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px 8px;
    min-height: 0;
    max-height: calc(100dvh - 16px);
    padding: 64px 16px 28px;
    border-width: 1px;
    border-radius: 24px;
    overflow-y: auto;
  }

  .experience-modal__puzzle {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    display: grid;
    width: 132px;
    height: 116px;
    margin: 0;
  }
  .experience-modal__puzzle strong {
    max-width: 68%;
    font-size: 11.5px;
    line-height: 1.35;
    white-space: nowrap;
  }
  .experience-modal__avatar {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: 100px;
    height: 100px;
    margin: 0;
  }
  .experience-modal h2 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    white-space: normal;
  }
  .experience-modal__mobile-break { display: initial; }
  .experience-modal__desktop-break { display: none; }
  .experience-modal__answer {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .experience-modal__answer p { font-size: 14px; line-height: 1.7; }
  .experience-modal__close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .experience-modal__close span::before,
  .experience-modal__close span::after { top: 19px; left: 10px; width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-piece__shape,
  .puzzle-board__slot,
  .puzzle-board__flipper,
  .flying-piece { transition: none; }
  .puzzle-board.is-complete::after { display: none; }
  .puzzle-board.is-complete .puzzle-board__sparkles::before,
  .puzzle-board.is-complete .puzzle-board__sparkles::after,
  .puzzle-board.is-complete .puzzle-board__sparkles span { animation: none; opacity: 1; }
}

/* Final responsive overrides must come after the legacy mobile rules above. */
@media (min-width: 821px) {
  .story-page .experience-guide { margin-top: 58px !important; }
}

@media (max-width: 820px) {
  .story-page .experience-guide { margin-top: 34px !important; }
  .story-page .experience-lead .cube,
  .story-page .next-content .cube {
    flex-basis: 194px !important;
    transform: translateX(-18px) scale(.88) !important;
  }
  .story-page .experience-lead__copy,
  .story-page .next-content__copy { margin-top: 0 !important; }
  .story-page .experience-lead,
  .story-page .next-content { gap: 12px !important; }
  .story-page .experience-pieces { row-gap: 52px !important; }
}

/* Keep the lower-page MV aligned with TOP after all legacy responsive rules. */
@media (min-width: 821px) {
  .story-page .story-hero {
    display: flex;
    min-height: 376px;
    margin-top: 108px;
    padding: 80px 20px 60px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    color: #0f2794;
    text-align: center;
  }
  .story-page .story-hero > p:first-child { margin: 0; font-size: 2.4rem; font-weight: 700; letter-spacing: .13em; line-height: 1.5; }
  .story-page .story-hero h1 { margin: 0; font-size: 8rem; font-weight: 800; line-height: 1.1; }
  .story-page .story-hero__lead { margin: 54px auto 0; font-size: clamp(20px, 1.8vw, 34px); font-weight: 700; line-height: 1.5; }
  .story-hero__mobile-break { display: none; }
}

@media (max-width: 820px) {
  .story-page .story-hero {
    display: flex;
    box-sizing: border-box;
    min-height: 227px;
    margin-top: 64px;
    padding: 32px 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0f2794;
  }
  .story-page .story-hero > p:first-child { margin: 0 0 3px; font-size: 1.1rem; font-weight: 700; letter-spacing: .13em; line-height: 1.5; }
  .story-page .story-hero h1 { margin: 0; font-size: 4.8rem; line-height: 1.1; white-space: nowrap; }
  .story-page .story-hero__lead { width: calc(100vw - 40px); margin: 24px 0 0; font-size: 18px; font-weight: 700; line-height: 1.5; text-align: center; }
}

/* Match lower-page SP cuboids to the TOP-page BOX proportions. */
@media (max-width: 500px) {
  .story-page .experience-lead .cube,
  .story-page .next-content .cube,
  .cross-talk-page .experience-lead .cube,
  .cross-talk-page .next-content .cube {
    --cube-sp-depth: calc(24.7vw - 10px);
    --cube-sp-top-height: calc(13.9vw - 5.6px);
    --cube-sp-face-height: calc(55.8vw - 22px);
    --cube-sp-total-height: calc(69.9vw - 28px);
    flex-basis: auto !important;
    width: calc(100% - var(--cube-sp-depth));
    height: var(--cube-sp-total-height);
    transform: translateX(calc(4.4px - 10.868vw)) scale(.88) !important;
  }

  .story-page .cube__face,
  .story-page .cube p,
  .cross-talk-page .cube__face,
  .cross-talk-page .cube p {
    top: var(--cube-sp-top-height);
    width: 100%;
    height: var(--cube-sp-face-height);
  }

  .story-page .cube__top,
  .cross-talk-page .cube__top {
    width: calc(100% + var(--cube-sp-depth));
    height: var(--cube-sp-top-height);
    clip-path: polygon(
      var(--cube-sp-depth) 0,
      100% 0,
      calc(100% - var(--cube-sp-depth)) 100%,
      0 100%
    );
  }

  .story-page .cube__top::after,
  .story-page .cube__inner::before,
  .cross-talk-page .cube__top::after,
  .cross-talk-page .cube__inner::before { left: var(--cube-sp-depth); }

  .story-page .cube__inner,
  .cross-talk-page .cube__inner {
    width: calc(100% + var(--cube-sp-depth) - 4px);
    height: calc(var(--cube-sp-top-height) - 8px);
    clip-path: polygon(
      var(--cube-sp-depth) 0,
      100% 0,
      calc(100% - var(--cube-sp-depth) + 4px) 100%,
      var(--cube-sp-depth) 100%
    );
  }

  .story-page .cube__inner::after,
  .cross-talk-page .cube__inner::after {
    right: calc(var(--cube-sp-depth) - 4px);
    left: var(--cube-sp-depth);
  }

  .story-page .cube__side,
  .cross-talk-page .cube__side {
    left: calc(100% - 1px);
    width: var(--cube-sp-depth);
    height: var(--cube-sp-total-height);
    clip-path: polygon(100% 0, 100% 80.1%, 0 100%, 0 19.9%);
  }

  .story-page .cube p,
  .cross-talk-page .cube p {
    padding-inline: 20px;
    font-size: 23px;
  }
}

/* Match the lower-page Talk wordmark to the TOP page typography. */
.story-page .story-hero h1 {
  color: #003891;
  font-family: Meiryo, "Outfit", sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

/* Keep STORY answer copy regular; only the piece label and modal title are bold. */
.story-page .experience-modal__answer strong {
  font-weight: 400;
}

@media (min-width: 821px) {
  .story-page .story-hero h1 {
    width: 177.61px;
    text-align: center;
  }

  .story-page .story-hero__lead {
    box-sizing: border-box;
    width: 100%;
    min-height: 72px;
    margin: 40px auto 0;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 2;
  }
}


/* Keep SP MV lead-copy sizing consistent across STORY and CROSS TALK. */
@media (max-width: 820px) {
  .story-page .story-hero__lead {
    box-sizing: border-box;
    width: min(321px, calc(100vw - 40px));
    max-width: 321px;
    min-height: 62px;
    margin: 29px auto 0;
    color: #0f2794;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0;
    text-align: center;
  }
}

/* Match the correct TOP subtitle font stack on both lower-page MVs. */
.story-page .story-hero__lead {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Yu Gothic UI", sans-serif;
}

/* Match the desktop TOP MV lead-copy tracking (1.2px at the reference size). */
@media (min-width: 821px) {
  .story-page .story-hero__lead {
    letter-spacing: 1.2px;
  }
}