@charset "UTF-8";
/*
 * Interview detail
 * Reference-led editorial composition rebuilt in the Hokusei palette.
 * The page intentionally relies on photographs, type and large colour fields;
 * ornamental grids and arbitrary decorative shapes are not used.
 */
.p-iv-ref {
  --iv-blue: #1f78d1;
  --iv-blue-light: #5b9fe1;
  --iv-deep: #0754a4;
  --iv-navy: #06386f;
  --iv-pale: #edf5fc;
  --iv-ink: #102844;
  --iv-muted: #65768a;
  --iv-yellow: #ffd746;
  --iv-font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --iv-font-voice: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --iv-font-en: "Manrope", "Helvetica Neue", sans-serif;
  overflow: clip;
  color: var(--iv-ink);
  background: #fff;
  font-family: var(--iv-font-ja);
  font-weight: 500;
  font-feature-settings: "palt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}
.p-iv-ref.--red,
.p-iv-ref.--navy,
.p-iv-ref.--gold,
.p-iv-ref.--sky { --iv-blue: #1f78d1; --iv-deep: #0754a4; }
.p-iv-ref :where(h1, h2, h3, p, figure, dl, dd) { margin-block: 0; }

/* Hero — the photograph owns the first view. */
.p-iv-ref__hero {
  position: relative;
  margin-top: clamp(82px, 7vw, 112px);
  padding: clamp(70px, 7vw, 110px) 0 clamp(92px, 8vw, 132px);
  background: linear-gradient(180deg, #fff 0%, #f5f8fc 100%);
}
.p-iv-ref__back {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 34px 6.25%;
  padding-bottom: 8px;
  border-bottom: 1px solid #9bb1c9;
  color: var(--iv-deep);
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
}
.p-iv-ref__back span { font-size: 16px; line-height: 1; transition: translate .25s ease; }
.p-iv-ref__back:hover span { translate: -5px 0; }
.p-iv-ref__hero-frame {
  position: relative;
  width: 87.5%;
  max-width: 1540px;
  margin-inline: auto;
}
.p-iv-ref__hero-visual {
  position: relative;
  aspect-ratio: 1.73;
  min-height: 560px;
  overflow: hidden;
  border-radius: 42px;
  background: #d9e5ef;
  box-shadow: 0 32px 80px rgb(12 62 112 / .14);
}
.p-iv-ref__hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(6 33 63 / .26) 0%, transparent 44%, transparent 100%);
  pointer-events: none;
}
.p-iv-ref__hero-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 63% center;
  scale: 1.01;
  animation: ivHeroDrift 14s ease-in-out infinite alternate;
}
@keyframes ivHeroDrift { to { scale: 1.055; translate: -1.2% 0; } }
.p-iv-ref__number {
  position: absolute;
  top: 8%;
  right: 4.5%;
  z-index: 3;
  color: #fff;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  line-height: .8;
  text-align: right;
  text-shadow: 0 5px 24px rgb(0 35 73 / .24);
}
.p-iv-ref__number strong { display: block; font-size: clamp(82px, 9vw, 150px); font-weight: 400; letter-spacing: -.075em; }
.p-iv-ref__number span { display: block; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .13em; }
.p-iv-ref__hero-bubble {
  position: absolute;
  top: 50%;
  left: -5.7%;
  z-index: 4;
  width: min(38vw, 500px);
  padding: clamp(36px, 3.8vw, 56px);
  border: 2px solid rgb(255 255 255 / .42);
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(145deg, #2b86da 0%, #1268bd 100%);
  box-shadow: 0 24px 58px rgb(3 60 121 / .22);
  translate: 0 -47%;
}
.p-iv-ref__hero-bubble::after {
  content: "";
  position: absolute;
  left: 42px;
  bottom: -20px;
  width: 34px;
  height: 30px;
  background: #1268bd;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
}
.p-iv-ref__hero-en,
.p-iv-ref__story-en,
.p-iv-ref__future-en,
.p-iv-ref__profile-en,
.p-iv-ref__schedule-en {
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  letter-spacing: .17em;
}
.p-iv-ref__hero-en { margin-bottom: 17px; color: rgb(255 255 255 / .72); font-size: 11px; }
.p-iv-ref__hero-bubble h1 { font-size: clamp(24px, 2.35vw, 38px); font-weight: 800; line-height: 1.58; letter-spacing: .045em; }
.p-iv-ref__hero-info { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 28px; }
.p-iv-ref__hero-info strong { width: 100%; margin-bottom: 3px; font-family: var(--ff-en, sans-serif); font-size: 27px; letter-spacing: .11em; }
.p-iv-ref__hero-info span { padding: 6px 13px; border: 1px solid rgb(255 255 255 / .5); border-radius: 999px; font-size: 11px; font-weight: 700; }
.p-iv-ref__hero-caption {
  display: flex;
  justify-content: space-between;
  width: 87.5%;
  max-width: 1540px;
  margin: 22px auto 0;
  padding-right: 4.5%;
  color: #7590aa;
  font-family: var(--ff-en, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

/* Editorial interview body. */
.p-iv-ref__interviews {
  position: relative;
  padding: clamp(150px, 13vw, 220px) 0 clamp(210px, 17vw, 290px);
  color: #fff;
  background: linear-gradient(180deg, #5a9cdf 0%, #3f88d3 48%, #2b76c8 100%);
}
.p-iv-ref__interviews > .c-wrap,
.p-iv-ref__future > .c-wrap {
  width: min(1120px, calc(100% - 64px));
  margin-inline: auto;
}
.p-iv-ref__interviews > .c-wrap,
.p-iv-ref__future > .c-wrap,
.p-iv-ref__related > .c-wrap { position: relative; z-index: 2; }

/* Photographic accents fill the generous editorial whitespace without
 * competing with the interview content. */
.p-iv-ref__decor {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 18px 24px rgb(2 42 87 / .18));
  animation: ivDecorFloat 7.2s ease-in-out infinite alternate;
  animation-timing-function: step-end;
}
.p-iv-ref__decor img { display: block; width: 100%; height: auto; }
.p-iv-ref__decor.--lifestyle {
  top: 8%;
  right: max(22px, 2.2vw);
  width: clamp(112px, 12vw, 190px);
  rotate: -7deg;
  opacity: 1;
}
.p-iv-ref__decor.--ship {
  bottom: 5.5%;
  left: max(18px, 1.8vw);
  width: clamp(92px, 10vw, 158px);
  opacity: 1;
  animation-delay: -2.8s;
  animation-duration: 8.6s;
}
.p-iv-ref__decor.--metal {
  top: 8%;
  right: max(24px, 3vw);
  width: clamp(78px, 8vw, 126px);
  rotate: 8deg;
  opacity: 1;
  animation-delay: -4.1s;
  animation-duration: 9.4s;
}
@keyframes ivDecorFloat {
  0%, 24%, 100% { transform: translate3d(0, 0, 0); }
  25%, 49% { transform: translate3d(8px, -9px, 0) rotate(-1deg); }
  50%, 74% { transform: translate3d(-5px, -3px, 0) rotate(1deg); }
  75%, 92% { transform: translate3d(3px, 7px, 0); }
}
.p-iv-ref__interviews-heading { max-width: 620px; margin: 0 auto clamp(105px, 10vw, 160px); text-align: center; }
.p-iv-ref__interviews-heading p { color: var(--iv-yellow); font-family: var(--ff-en, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.p-iv-ref__interviews-heading h2 { margin-top: 20px; font-size: clamp(34px, 4.2vw, 58px); font-weight: 800; line-height: 1.45; letter-spacing: .07em; }
.p-iv-ref__story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "en copy" "visual copy";
  gap: 22px clamp(64px, 7vw, 104px);
  align-items: center;
}
.p-iv-ref__story + .p-iv-ref__story { margin-top: clamp(140px, 14vw, 210px); }
.p-iv-ref__story.--reverse { grid-template-areas: "copy en" "copy visual"; }
.p-iv-ref__story-en {
  grid-area: en;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--iv-yellow);
  font-size: 12px;
}
.p-iv-ref__story-en span { color: rgb(255 255 255 / .5); font-size: 24px; font-weight: 400; letter-spacing: .03em; }
.p-iv-ref__story-visual {
  grid-area: visual;
  position: relative;
  aspect-ratio: 1.32;
  overflow: hidden;
  border-radius: 19px;
  background: #dbe8f3;
  box-shadow: 0 28px 60px rgb(4 53 109 / .2);
}
.p-iv-ref__story-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: scale .8s cubic-bezier(.2,.8,.2,1); }
.p-iv-ref__story-visual.--panorama img { width: auto; max-width: none; height: 100%; object-fit: cover; translate: -31% 0; }
.p-iv-ref__story-visual figcaption { position: absolute; right: 17px; bottom: 15px; padding: 7px 10px; border-radius: 999px; color: var(--iv-deep); background: rgb(255 255 255 / .9); font-family: var(--ff-en, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.p-iv-ref__story-copy { grid-area: copy; }
.p-iv-ref__story-question { display: flex; align-items: center; gap: 11px; margin-bottom: 25px; color: rgb(255 255 255 / .78); font-size: 14px; font-weight: 700; letter-spacing: .055em; }
.p-iv-ref__story-question::before { content: "\201C"; color: var(--iv-yellow); font-family: Georgia, serif; font-size: 42px; line-height: .6; }
.p-iv-ref__story-copy h3 { margin-bottom: 31px; font-size: clamp(27px, 2.7vw, 40px); font-weight: 800; line-height: 1.62; letter-spacing: .055em; }
.p-iv-ref__story-copy h3::after { content: ""; display: block; width: 78px; height: 3px; margin-top: 21px; background: var(--iv-yellow); }
.p-iv-ref__story-copy > p:not(.p-iv-ref__story-question) { color: rgb(255 255 255 / .92); font-size: clamp(15px, 1.1vw, 17px); line-height: 2.08; letter-spacing: .035em; }
.p-iv-ref__story-copy > p + p { margin-top: 23px; }

/* Future section — one scene, not a stack of generic cards. */
.p-iv-ref__future {
  position: relative;
  margin-top: -1px;
  padding: clamp(135px, 12vw, 195px) 0 clamp(120px, 10vw, 170px);
  color: #fff;
  background: linear-gradient(180deg, #2b76c8 0%, #0a5bad 20%, #06488f 58%, #063d7b 100%);
}
.p-iv-ref__future-arc {
  display: none;
}
.p-iv-ref__future > .c-wrap { position: relative; }
.p-iv-ref__future-heading { text-align: center; }
.p-iv-ref__future-en { color: #a8d2f7; font-size: 11px; }
.p-iv-ref__future-heading h2 { position: relative; width: max-content; max-width: 100%; margin: 18px auto 0; padding: 0 28px 19px; font-size: clamp(38px, 4.5vw, 66px); font-weight: 800; font-style: italic; letter-spacing: .09em; }
.p-iv-ref__future-heading h2::after { content: ""; position: absolute; right: 4%; bottom: 0; left: 0; height: 4px; background: #fff; rotate: -2deg; }
.p-iv-ref__future-grid { display: grid; grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr); gap: clamp(58px, 8vw, 112px); align-items: end; margin-top: clamp(80px, 9vw, 135px); }
.p-iv-ref__future-person { position: relative; min-height: 650px; overflow: hidden; }
.p-iv-ref__future-person::after { content: none; }
.p-iv-ref__future-person img { position: absolute; inset: auto 0 -38px 50%; width: auto; max-width: 125%; height: calc(100% + 38px); object-fit: contain; object-position: center bottom; translate: -50% 0; animation: ivPortraitStep 6.4s step-end infinite; }
@keyframes ivPortraitStep { 0%,25%,100% { transform: translate3d(0,0,0); } 26%,48% { transform: translate3d(3px,-7px,0) rotate(-.45deg); } 49%,72% { transform: translate3d(-3px,-2px,0) rotate(.45deg); } 73%,91% { transform: translate3d(1px,-8px,0); } }
.p-iv-ref__bubbles { display: grid; gap: 34px; padding-bottom: 20px; }
.p-iv-ref__q { margin: 0 0 14px 25px; font-size: 14px; font-weight: 700; letter-spacing: .05em; }
.p-iv-ref__q span { margin-right: 7px; color: var(--iv-yellow); font-size: 22px; }
.p-iv-ref__bubbles article > div { position: relative; padding: 40px 48px 43px; border: 2px solid rgb(31 120 209 / .16); border-radius: 36px; color: var(--iv-ink); background: #fff; box-shadow: 0 18px 42px rgb(0 32 73 / .17); }
.p-iv-ref__bubbles article:nth-child(2) > div { border-radius: 36px; }
.p-iv-ref__bubbles article > div::after { content: ""; position: absolute; left: -22px; bottom: 29px; width: 25px; height: 24px; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 72%); }
.p-iv-ref__bubbles h3 { margin-bottom: 15px; color: var(--iv-deep); font-size: clamp(21px, 2.1vw, 30px); font-weight: 800; line-height: 1.58; letter-spacing: .05em; }
.p-iv-ref__bubbles p:last-child { color: #4b5d72; font-size: 13px; line-height: 2; }

/* Profile card and vertical timeline. */
.p-iv-ref__profile {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  margin-top: clamp(115px, 11vw, 175px);
  max-width: 1000px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 22px;
  color: var(--iv-ink);
  background: #fff;
  box-shadow: 0 30px 82px rgb(0 29 68 / .28);
}
.p-iv-ref__profile-copy { padding: clamp(52px, 6vw, 84px); }
.p-iv-ref__profile-en { color: var(--iv-blue); font-size: 11px; }
.p-iv-ref__profile h2 { margin-top: 8px; color: var(--iv-deep); font-family: var(--ff-en, sans-serif); font-size: clamp(54px, 6vw, 84px); font-weight: 650; letter-spacing: .035em; }
.p-iv-ref__profile dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; margin-top: 35px; }
.p-iv-ref__profile dl > div { padding-left: 17px; border-left: 3px solid var(--iv-yellow); }
.p-iv-ref__profile dt { margin-bottom: 5px; color: var(--iv-blue); font-size: 11px; font-weight: 800; }
.p-iv-ref__profile dd { font-size: 14px; line-height: 1.72; }
.p-iv-ref__profile-note { margin-top: 35px; padding: 16px 18px; color: #193754; background: #fff2a4; font-size: 12px; font-weight: 700; line-height: 1.8; }
.p-iv-ref__profile-photo { position: relative; min-height: 500px; overflow: hidden; background: #dbe8f3; }
.p-iv-ref__profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 100% center; }
.p-iv-ref__schedule { grid-column: 1 / -1; padding: clamp(52px, 6vw, 84px); border-top: 1px solid #d9e5ef; }
.p-iv-ref__schedule-en { color: var(--iv-blue); font-size: 10px; }
.p-iv-ref__schedule h3 { margin-top: 9px; margin-bottom: 45px; color: var(--iv-deep); font-size: clamp(23px, 2.3vw, 31px); font-weight: 800; }
.p-iv-ref__schedule ol { position: relative; width: min(810px, 100%); margin: 0 auto; }
.p-iv-ref__schedule ol::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 116px; width: 1px; background: #e75d86; }
.p-iv-ref__schedule li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 48px; min-height: 92px; padding-bottom: 26px; }
.p-iv-ref__schedule li:last-child { min-height: 0; padding-bottom: 0; }
.p-iv-ref__schedule li::before { content: ""; position: absolute; top: 5px; left: 108px; width: 17px; height: 17px; border: 5px solid #fff; border-radius: 50%; background: #e7507d; box-shadow: 0 0 0 1px #e7507d; }
.p-iv-ref__schedule time { padding-top: 3px; color: var(--iv-deep); font-family: var(--ff-en, sans-serif); font-size: 16px; font-weight: 750; }
.p-iv-ref__schedule strong { display: block; margin-bottom: 7px; font-size: 15px; }
.p-iv-ref__schedule li p { color: #5d6c7d; font-size: 12px; line-height: 1.9; }

/* Related people — overlapping speech-bubble portraits. */
.p-iv-ref__related { position: relative; padding: clamp(125px, 11vw, 180px) 0 clamp(105px, 9vw, 150px); background: linear-gradient(180deg, #fff 0%, #f4f9fe 100%); }
.p-iv-ref__related > .c-wrap { width: min(1080px, calc(100% - 64px)); margin-inline: auto; }
.p-iv-ref__related-heading { text-align: center; }
.p-iv-ref__related-heading p { color: var(--iv-blue); font-family: var(--ff-en, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.p-iv-ref__related-heading h2 { margin-top: 10px; font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: .055em; }
.p-iv-ref__related-heading h2::after { content: ""; display: block; width: 54px; height: 4px; margin: 19px auto 0; background: var(--iv-yellow); }
.p-iv-ref__related-heading > span { display: block; margin-top: 27px; color: var(--iv-muted); font-size: 13px; letter-spacing: .045em; }
.p-iv-ref__member-stage { width: min(1000px, 100%); margin: 76px auto 0; }
.p-iv-ref__member-stage ul { display: flex; align-items: flex-end; justify-content: center; padding-inline: 2%; }
.p-iv-ref__member-stage li { position: relative; width: 27%; margin-left: -2.5%; transition: translate .28s ease; }
.p-iv-ref__member-stage li:first-child { margin-left: 0; }
.p-iv-ref__member-stage li:nth-child(even) { translate: 0 18px; }
.p-iv-ref__member-stage li:hover { z-index: 5; translate: 0 -8px; }
.p-iv-ref__member-stage a { display: block; position: relative; }
.p-iv-ref__member-stage figure { position: relative; aspect-ratio: .64; overflow: hidden; border: 10px solid #fff; border-radius: 999px 999px 42px 999px; background: #0a3565; box-shadow: 0 20px 44px rgb(7 55 103 / .2); filter: saturate(.78) brightness(.82); transition: filter .28s ease, scale .28s ease; }
.p-iv-ref__member-stage li:nth-child(2) figure { background: #d9b800; }
.p-iv-ref__member-stage li:nth-child(3) figure { background: #0871bd; }
.p-iv-ref__member-stage li:nth-child(4) figure { background: #5ca8df; }
.p-iv-ref__member-stage li.is-current { z-index: 4; width: 29%; translate: 0 -12px; }
.p-iv-ref__member-stage li.is-current figure { filter: none; scale: 1.035; }
.p-iv-ref__member-stage li:hover figure { filter: none; scale: 1; }
.p-iv-ref__member-stage figure img { position: absolute; inset: auto 0 -20px 50%; width: auto; max-width: 128%; height: calc(102% + 20px); object-fit: contain; object-position: center bottom; translate: -50% 0; filter: drop-shadow(0 10px 12px rgb(0 35 74 / .2)); transition: transform .3s ease; animation: ivMemberStep 7.2s step-end infinite; }
.p-iv-ref__member-stage li:nth-child(2) img { animation-delay: -1.7s; }
.p-iv-ref__member-stage li:nth-child(3) img { animation-delay: -3.4s; }
.p-iv-ref__member-stage li:nth-child(4) img { animation-delay: -5.1s; }
@keyframes ivMemberStep { 0%,26%,100% { transform: translate3d(0,0,0); } 27%,52% { transform: translate3d(2px,-7px,0) rotate(-.45deg); } 53%,77% { transform: translate3d(-2px,-2px,0) rotate(.45deg); } 78%,92% { transform: translate3d(1px,-8px,0); } }
.p-iv-ref__member-stage a > span { position: absolute; top: 16px; right: 17px; z-index: 2; color: #fff; font-family: var(--ff-en, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.p-iv-ref__member-current { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 27px; width: max-content; max-width: 100%; margin: 52px auto 0; padding: 21px 29px; border: 2px solid var(--iv-deep); border-radius: 24px 24px 24px 8px; color: #fff; background: var(--iv-deep); box-shadow: 0 16px 34px rgb(7 55 103 / .16); }
.p-iv-ref__member-current p { padding-right: 25px; border-right: 1px solid rgb(255 255 255 / .35); }
.p-iv-ref__member-current p span,
.p-iv-ref__member-current div span { display: block; color: #a8d2f7; font-family: var(--ff-en, sans-serif); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.p-iv-ref__member-current p strong { display: block; margin-top: 2px; font-family: var(--ff-en, sans-serif); font-size: 23px; letter-spacing: .09em; }
.p-iv-ref__member-current div strong { display: block; margin-top: 5px; font-size: 13px; }
.p-iv-ref__nav { display: flex; justify-content: center; gap: 14px; margin-top: 75px; }
.p-iv-ref__nav a { min-width: 200px; padding: 17px 24px; border: 1px solid #b4c7da; border-radius: 999px; color: var(--iv-deep); text-align: center; font-family: var(--ff-en, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .11em; transition: color .25s, border-color .25s, background .25s; }
.p-iv-ref__nav a:hover { color: #fff; border-color: var(--iv-blue); background: var(--iv-blue); }

/* Closing photographic beat, matching the reference page's editorial rhythm. */
.p-iv-ref__wide-visual { position: relative; height: clamp(440px, 52vw, 760px); overflow: hidden; background: #9fc7e7; }
.p-iv-ref__wide-visual img { width: 100%; height: 116%; object-fit: cover; object-position: center 42%; translate: 0 -7%; transition: scale 1.2s cubic-bezier(.2,.8,.2,1); }
.p-iv-ref__wide-visual.is-in img { scale: 1.025; }
.p-iv-ref__wide-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(2 38 77 / .48), transparent 60%); }
.p-iv-ref__wide-visual figcaption { position: absolute; bottom: 12%; left: 7%; z-index: 2; color: #fff; text-shadow: 0 4px 20px rgb(0 27 58 / .3); }
.p-iv-ref__wide-visual figcaption span { display: block; margin-bottom: 10px; font-family: var(--ff-en, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .19em; }
.p-iv-ref__wide-visual figcaption strong { font-size: clamp(34px, 4vw, 58px); letter-spacing: .06em; }

/* Existing pages 02–04 keep working while they are migrated to the richer markup. */
.p-iv-ref__hero:not(:has(.p-iv-ref__hero-frame)) > .p-iv-ref__hero-visual { width: 87.5%; max-width: 1400px; margin-left: auto; }
.p-iv-ref__hero:not(:has(.p-iv-ref__hero-frame)) > .p-iv-ref__hero-bubble { top: 52%; left: 6%; }
.p-iv-ref__hero:not(:has(.p-iv-ref__hero-frame)) > .p-iv-ref__number { top: 13%; right: 8%; color: var(--iv-blue); text-shadow: none; }
.p-iv-ref__hero:not(:has(.p-iv-ref__hero-frame)) > .p-iv-ref__hero-visual > img { position: absolute; right: 7%; bottom: 0; width: auto; height: 94%; object-fit: contain; object-position: center bottom; animation: ivPortraitStep 6.4s step-end infinite; }
.p-iv-ref__story-visual img[src*="/cutout/"] { object-fit: contain; object-position: center bottom; }
.p-iv-ref__future-grid > figure:not(.p-iv-ref__future-person) { position: relative; min-height: 650px; }
.p-iv-ref__future-grid > figure:not(.p-iv-ref__future-person) img { position: absolute; inset: auto 0 0 50%; width: auto; max-width: 125%; height: 100%; object-fit: contain; object-position: center bottom; translate: -50% 0; filter: drop-shadow(0 25px 30px rgb(0 28 65 / .26)); }
.p-iv-ref__profile > div:not(.p-iv-ref__schedule):not(.p-iv-ref__profile-copy) { padding: clamp(52px, 6vw, 84px); }
.p-iv-ref__profile > figure:not(.p-iv-ref__profile-photo) { position: relative; min-height: 500px; overflow: hidden; background: #dbe8f3; }
.p-iv-ref__profile > figure:not(.p-iv-ref__profile-photo) img { position: absolute; inset: auto 0 0 50%; width: auto; max-width: 120%; height: 95%; object-fit: contain; translate: -50% 0; }
.p-iv-ref__schedule li > span { display: block; padding-top: 2px; font-size: 14px; font-weight: 700; }
.p-iv-ref__related > .c-wrap > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 55px; }
.p-iv-ref__related > .c-wrap > ul a { display: block; text-align: center; }
.p-iv-ref__related > .c-wrap > ul figure { position: relative; aspect-ratio: .72; overflow: hidden; border-radius: 50% 50% 20px 20px; background: var(--iv-navy); }
.p-iv-ref__related > .c-wrap > ul li:nth-child(2) figure { background: #d9b800; }
.p-iv-ref__related > .c-wrap > ul li:nth-child(3) figure { background: #0871bd; }
.p-iv-ref__related > .c-wrap > ul li:nth-child(4) figure { background: #5ca8df; }
.p-iv-ref__related > .c-wrap > ul figure img { position: absolute; inset: auto 0 0 50%; width: auto; max-width: 120%; height: 96%; object-fit: contain; translate: -50% 0; }
.p-iv-ref__related > .c-wrap > ul strong { display: block; margin-top: 14px; color: var(--iv-deep); font-family: var(--ff-en, sans-serif); font-size: 17px; letter-spacing: .08em; }

/* Typography system — voice, information and navigation each have a
 * deliberate role instead of sharing one generic bold sans face. */
.p-iv-ref :where(
  .p-iv-ref__hero-en,
  .p-iv-ref__number,
  .p-iv-ref__hero-caption,
  .p-iv-ref__story-en,
  .p-iv-ref__future-en,
  .p-iv-ref__profile-en,
  .p-iv-ref__related-heading > p,
  .p-iv-ref__member-current,
  .p-iv-ref__nav,
  .p-iv-ref__back
) {
  font-family: var(--iv-font-en);
  font-variation-settings: "wght" 650;
}
.p-iv-ref :where(
  .p-iv-ref__hero-bubble h1,
  .p-iv-ref__interviews-heading h2,
  .p-iv-ref__story-copy h3,
  .p-iv-ref__bubbles h3,
  .p-iv-ref__related-heading h2
) {
  font-family: var(--iv-font-voice);
  font-weight: 700;
  letter-spacing: .025em;
  font-feature-settings: "palt" 1, "kern" 1;
}
.p-iv-ref__hero-bubble h1 {
  line-height: 1.72;
  letter-spacing: .035em;
}
.p-iv-ref__interviews-heading h2 {
  line-height: 1.58;
  letter-spacing: .055em;
}
.p-iv-ref__story-copy h3 {
  line-height: 1.72;
  letter-spacing: .04em;
}
.p-iv-ref__bubbles h3 {
  line-height: 1.7;
  letter-spacing: .035em;
}
.p-iv-ref__future-heading h2 {
  font-family: var(--iv-font-ja);
  font-weight: 900;
  letter-spacing: .065em;
}
.p-iv-ref__profile h2,
.p-iv-ref__hero-info strong,
.p-iv-ref__member-current p strong {
  font-family: var(--iv-font-en);
  font-variation-settings: "wght" 680;
}
.p-iv-ref :where(
  .p-iv-ref__story-copy > p,
  .p-iv-ref__bubbles p,
  .p-iv-ref__profile dd,
  .p-iv-ref__profile-note,
  .p-iv-ref__related-heading > span
) {
  font-family: var(--iv-font-ja);
  font-weight: 500;
  letter-spacing: .035em;
}
.p-iv-ref__story-copy > p:not(.p-iv-ref__story-question) {
  line-height: 2.28;
}
.p-iv-ref__story-question,
.p-iv-ref__q,
.p-iv-ref__profile dt,
.p-iv-ref__hero-info span {
  font-family: var(--iv-font-ja);
  font-weight: 700;
}

@media (max-width: 63.99rem) {
  .p-iv-ref__hero { padding-top: 58px; }
  .p-iv-ref__hero-frame { width: calc(100% - 40px); }
  .p-iv-ref__hero-visual { aspect-ratio: auto; min-height: 680px; border-radius: 30px; }
  .p-iv-ref__hero-visual > img { object-position: 68% center; }
  .p-iv-ref__hero-bubble { top: auto; right: 28px; bottom: 35px; left: 28px; width: auto; padding: 38px 42px; border-radius: 54px 54px 54px 16px; translate: 0; }
  .p-iv-ref__number { top: 38px; right: 35px; }
  .p-iv-ref__number strong { font-size: 88px; }
  .p-iv-ref__hero-caption { width: calc(100% - 40px); padding-inline: 5px; }
  .p-iv-ref__interviews > .c-wrap,
  .p-iv-ref__future > .c-wrap { width: min(760px, calc(100% - 40px)); }
  .p-iv-ref__story,
  .p-iv-ref__story.--reverse { grid-template-columns: 1fr; grid-template-areas: "en" "copy" "visual"; }
  .p-iv-ref__story-visual { aspect-ratio: 1.45; }
  .p-iv-ref__story + .p-iv-ref__story { margin-top: 115px; }
  .p-iv-ref__future-grid { grid-template-columns: 1fr; }
  .p-iv-ref__future-grid > figure { order: 2; min-height: 560px; }
  .p-iv-ref__bubbles { order: 1; }
  .p-iv-ref__profile { grid-template-columns: 1fr; }
  .p-iv-ref__profile-photo { min-height: 500px; }
  .p-iv-ref__related > .c-wrap { width: min(760px, calc(100% - 40px)); }
  .p-iv-ref__decor.--lifestyle { top: 5%; right: 14px; width: 120px; opacity: 1; }
  .p-iv-ref__decor.--ship { bottom: 3%; left: 10px; width: 105px; opacity: 1; }
  .p-iv-ref__decor.--metal { top: 5%; right: 14px; width: 82px; opacity: 1; }
  .p-iv-ref__member-stage li { width: 28%; margin-left: -7%; }
  .p-iv-ref__member-stage li.is-current { width: 31%; }
  .p-iv-ref__related > .c-wrap > ul { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .p-iv-ref__hero:not(:has(.p-iv-ref__hero-frame)) > .p-iv-ref__hero-bubble { top: auto; right: 28px; bottom: 35px; left: 28px; }
}

@media (max-width: 47.99rem) {
  .p-iv-ref__hero { margin-top: 72px; padding: 35px 0 72px; }
  .p-iv-ref__back { margin: 0 0 24px 20px; }
  .p-iv-ref__hero-frame { width: calc(100% - 24px); }
  .p-iv-ref__hero-visual { min-height: 565px; border-radius: 22px; }
  .p-iv-ref__hero-visual > img { object-position: 72% center; }
  .p-iv-ref__hero-visual::after { background: linear-gradient(180deg, transparent 35%, rgb(1 30 60 / .48) 100%); }
  .p-iv-ref__number { top: 27px; right: 20px; }
  .p-iv-ref__number strong { font-size: 67px; }
  .p-iv-ref__number span { margin-top: 9px; font-size: 9px; }
  .p-iv-ref__hero-bubble { right: 17px; bottom: 24px; left: 17px; padding: 28px 24px 30px; border-radius: 34px 34px 34px 12px; }
  .p-iv-ref__hero-bubble::after { bottom: -17px; width: 38px; height: 34px; }
  .p-iv-ref__hero-bubble h1 { font-size: 21px; }
  .p-iv-ref__hero-info { margin-top: 18px; }
  .p-iv-ref__hero-caption { width: calc(100% - 24px); font-size: 8px; }
  .p-iv-ref__interviews { padding: 100px 0 155px; }
  .p-iv-ref__decor.--lifestyle { top: 2.5%; right: -18px; width: 92px; opacity: 1; }
  .p-iv-ref__decor.--ship { bottom: 1.5%; left: -20px; width: 86px; opacity: 1; }
  .p-iv-ref__decor.--metal { top: 2.5%; right: -12px; width: 66px; opacity: 1; }
  .p-iv-ref__interviews-heading { margin-bottom: 85px; }
  .p-iv-ref__interviews-heading h2 { font-size: 31px; }
  .p-iv-ref__story-en { font-size: 10px; }
  .p-iv-ref__story-visual { aspect-ratio: 1.12; }
  .p-iv-ref__story-copy h3 { font-size: 25px; }
  .p-iv-ref__story-copy > p:not(.p-iv-ref__story-question) { font-size: 15px; line-height: 2; }
  .p-iv-ref__story-visual.--panorama img { width: auto; height: 100%; translate: -33% 0; }
  .p-iv-ref__future { padding: 110px 0 90px; }
  .p-iv-ref__future-heading h2 { font-size: 34px; }
  .p-iv-ref__future-grid > figure { min-height: 430px; }
  .p-iv-ref__bubbles article > div { padding: 32px 25px 35px; border-radius: 26px; }
  .p-iv-ref__bubbles article:nth-child(2) > div { border-radius: 26px; }
  .p-iv-ref__bubbles article > div::after { left: 25px; bottom: -18px; clip-path: polygon(0 0, 100% 0, 25% 100%); }
  .p-iv-ref__profile { margin-top: 85px; }
  .p-iv-ref__profile-copy { padding: 38px 25px; }
  .p-iv-ref__profile dl { grid-template-columns: 1fr; gap: 20px; }
  .p-iv-ref__profile-photo { min-height: 340px; }
  .p-iv-ref__schedule { padding: 39px 25px 48px; }
  .p-iv-ref__schedule ol::before { left: 72px; }
  .p-iv-ref__schedule li { grid-template-columns: 54px 1fr; gap: 37px; min-height: 116px; }
  .p-iv-ref__schedule li::before { left: 64px; }
  .p-iv-ref__schedule time { font-size: 13px; }
  .p-iv-ref__related { padding-block: 90px 80px; }
  .p-iv-ref__member-stage { margin-top: 45px; }
  .p-iv-ref__member-stage ul { padding-inline: 0; }
  .p-iv-ref__member-stage li { width: 31%; margin-left: -12%; }
  .p-iv-ref__member-stage li.is-current { width: 36%; }
  .p-iv-ref__member-stage figure { border-width: 5px; }
  .p-iv-ref__member-stage a > span { top: 9px; right: 9px; font-size: 9px; }
  .p-iv-ref__member-current { grid-template-columns: 1fr; gap: 11px; width: 100%; padding: 17px 19px; }
  .p-iv-ref__member-current p { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .3); }
  .p-iv-ref__nav { flex-wrap: wrap; margin-top: 55px; }
  .p-iv-ref__nav a { min-width: calc(50% - 8px); padding-inline: 14px; font-size: 9px; }
  .p-iv-ref__wide-visual { height: 420px; }
  .p-iv-ref__wide-visual img { object-position: 54% center; }
  .p-iv-ref__wide-visual figcaption { bottom: 10%; left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-iv-ref__hero-visual > img,
  .p-iv-ref__future-person img,
  .p-iv-ref__decor { animation: none; }
  .p-iv-ref__story-visual img,
  .p-iv-ref__member-stage :where(li, figure, img),
  .p-iv-ref__wide-visual img { transition: none; }
  .p-iv-ref__member-stage figure img { animation: none; }
}

/* --------------------------------------------------------------------------
 * 2026 bright editorial refinement
 * The long-form interview mock uses light paper-like fields, softly curved
 * blue transitions and compact editorial cards.  These rules deliberately
 * avoid grids and translucent ornaments so photography remains the focus.
 * ----------------------------------------------------------------------- */
.p-iv-ref {
  --iv-paper: #f8fbff;
  --iv-paper-blue: #eaf5ff;
  --iv-line: #c8ddf1;
  --iv-card-shadow: 0 22px 54px rgb(13 76 135 / .12);
}

.p-iv-ref__hero {
  padding-bottom: clamp(76px, 6vw, 104px);
  background:
    radial-gradient(80% 38% at 88% 100%, rgb(214 236 255 / .72), transparent 70%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}
.p-iv-ref__hero-visual {
  border-radius: 36px;
  background: #dceaf6;
  box-shadow: 0 26px 64px rgb(13 72 128 / .14);
}
.p-iv-ref__hero-visual::after {
  background: linear-gradient(90deg, rgb(4 48 91 / .13) 0%, transparent 42%);
}
.p-iv-ref__hero-bubble {
  border: 3px solid #fff;
  border-radius: 42px 42px 42px 15px;
  background: linear-gradient(145deg, #3297ed 0%, #0872ce 100%);
  box-shadow: 0 20px 46px rgb(9 83 151 / .19);
}
.p-iv-ref__hero-bubble::before {
  content: "\201C";
  position: absolute;
  top: -35px;
  left: 31px;
  color: var(--iv-yellow);
  font-family: Georgia, serif;
  font-size: 70px;
  line-height: 1;
  text-shadow: 0 4px 0 #fff;
}
.p-iv-ref__hero-bubble::after { background: #0872ce; }
.p-iv-ref__number { text-shadow: 0 3px 15px rgb(0 42 83 / .16); }

/* Pale paper field and large curved edges reproduce the reference rhythm. */
.p-iv-ref__interviews {
  isolation: isolate;
  padding: clamp(135px, 11vw, 190px) 0 clamp(180px, 14vw, 240px);
  color: var(--iv-ink);
  background:
    radial-gradient(85% 230px at 50% 0, #fff 0 76%, transparent 76.5%),
    linear-gradient(180deg, var(--iv-paper-blue) 0%, #f7fbff 46%, #edf7ff 100%);
}
.p-iv-ref__interviews::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -110px;
  left: -12%;
  z-index: 0;
  height: 230px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #fff;
}
.p-iv-ref__interviews-heading p { color: var(--iv-blue); }
.p-iv-ref__interviews-heading h2 {
  position: relative;
  color: var(--iv-deep);
}
.p-iv-ref__interviews-heading h2::after,
.p-iv-ref__future-heading h2::after {
  content: "";
  display: block;
  width: min(270px, 64%);
  height: 6px;
  margin: 22px auto 0;
  border-radius: 999px;
  background: var(--iv-yellow);
  rotate: -2deg;
  box-shadow: 74px 7px 0 -2px rgb(255 215 70 / .7);
}
.p-iv-ref__story {
  gap: 30px clamp(54px, 6vw, 92px);
}
.p-iv-ref__story-en {
  color: var(--iv-blue);
  border-bottom-color: var(--iv-yellow);
}
.p-iv-ref__story-en span { color: #9db6cd; }
.p-iv-ref__story-visual {
  border: 7px solid #fff;
  border-radius: 26px;
  box-shadow: var(--iv-card-shadow);
}
.p-iv-ref__story-copy {
  position: relative;
  padding: clamp(32px, 3.5vw, 50px);
  border: 1px solid rgb(171 203 231 / .72);
  border-radius: 30px 30px 30px 10px;
  background: rgb(255 255 255 / .96);
  box-shadow: var(--iv-card-shadow);
}
.p-iv-ref__story-copy::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: -17px;
  width: 43px;
  height: 27px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.p-iv-ref__story-question { color: #53718e; }
.p-iv-ref__story-copy h3 { color: var(--iv-deep); }
.p-iv-ref__story-copy > p:not(.p-iv-ref__story-question) { color: #415a73; }

.p-iv-ref__decor {
  filter: drop-shadow(0 15px 20px rgb(18 77 132 / .16));
}
.p-iv-ref__decor.--lifestyle { top: 6%; }
.p-iv-ref__decor.--ship { bottom: 7%; }

/* Future becomes the bright, spacious speech-bubble scene from the mock. */
.p-iv-ref__future {
  isolation: isolate;
  margin-top: 0;
  padding: clamp(145px, 12vw, 200px) 0 clamp(120px, 10vw, 170px);
  color: var(--iv-ink);
  background:
    radial-gradient(58% 310px at 8% 20%, rgb(218 239 255 / .8), transparent 74%),
    linear-gradient(180deg, #fff 0%, #f4faff 58%, #eaf5ff 100%);
}
.p-iv-ref__future::before {
  content: "";
  position: absolute;
  top: -132px;
  right: -10%;
  left: -10%;
  z-index: 0;
  height: 215px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: #fff;
}
.p-iv-ref__future-en { color: var(--iv-blue); }
.p-iv-ref__future-heading h2 {
  color: var(--iv-deep);
  font-family: var(--iv-font-voice);
  font-style: normal;
}
.p-iv-ref__future-heading h2::after {
  position: static;
  background: var(--iv-yellow);
}
.p-iv-ref__future-grid { align-items: center; }
.p-iv-ref__future-person {
  min-height: 610px;
  overflow: hidden;
}
.p-iv-ref__future-person img {
  bottom: -64px;
  height: calc(100% + 64px);
  filter: drop-shadow(0 24px 24px rgb(10 73 133 / .16));
}
.p-iv-ref__q { color: #345b80; }
.p-iv-ref__bubbles article > div {
  border: 2px solid #b7d5ef;
  border-radius: 34px 34px 34px 10px;
  box-shadow: 0 18px 42px rgb(13 76 135 / .11);
}
.p-iv-ref__bubbles article:nth-child(2) > div { border-radius: 34px 34px 10px 34px; }
.p-iv-ref__bubbles article > div::after {
  background: #fff;
  filter: drop-shadow(-2px 2px 0 #b7d5ef);
}

.p-iv-ref__profile {
  border: 1px solid #bdd8ed;
  box-shadow: 0 25px 60px rgb(13 76 135 / .12);
}
.p-iv-ref__profile-copy { background: #fff; }
.p-iv-ref__profile-photo { border-left: 1px solid #d7e7f5; }

.p-iv-ref__related {
  border-top: 1px solid #d7e9f7;
  background:
    radial-gradient(80% 210px at 50% 0, #eaf5ff 0 72%, transparent 72.5%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}
.p-iv-ref__related-heading h2::after {
  width: 116px;
  height: 6px;
  border-radius: 999px;
  rotate: -2deg;
}
.p-iv-ref__member-stage figure {
  border-color: #fff;
  box-shadow: 0 18px 42px rgb(13 70 124 / .16), 0 0 0 2px #c1daee;
}
.p-iv-ref__member-current {
  border-color: #fff;
  background: linear-gradient(135deg, #1683df, #0867bd);
  box-shadow: 0 14px 32px rgb(7 82 153 / .14), 0 0 0 2px #c3ddef;
}

@media (max-width: 63.99rem) {
  .p-iv-ref__story-copy { padding: 38px 42px 44px; }
  .p-iv-ref__future-person { min-height: 540px; overflow: hidden; }
  .p-iv-ref__interviews::after { bottom: -75px; height: 160px; }
}

@media (max-width: 47.99rem) {
  .p-iv-ref__hero-bubble::before { top: -26px; left: 23px; font-size: 54px; }
  .p-iv-ref__interviews {
    padding-top: 105px;
    background: linear-gradient(180deg, #eef8ff 0%, #f9fcff 48%, #edf7ff 100%);
  }
  .p-iv-ref__interviews-heading h2::after,
  .p-iv-ref__future-heading h2::after { height: 4px; margin-top: 16px; }
  .p-iv-ref__story-copy { padding: 29px 24px 34px; border-radius: 24px 24px 24px 8px; }
  .p-iv-ref__story-visual { border-width: 5px; border-radius: 21px; }
  .p-iv-ref__future { padding-top: 115px; }
  .p-iv-ref__future::before { top: -75px; height: 120px; }
  .p-iv-ref__future-person { min-height: 410px; }
  .p-iv-ref__profile-photo { border-top: 1px solid #d7e7f5; border-left: 0; }
  .p-iv-ref__related { background: linear-gradient(180deg, #eef8ff 0%, #fff 18%, #f7fbff 100%); }
}

/* --------------------------------------------------------------------------
 * v1.7 — compact art-direction pass
 * Match the supplied mock's brochure-like density: one continuous composition,
 * photo-first hierarchy and restrained editorial labels.
 * ----------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .p-iv-ref__hero {
    margin-top: 76px;
    padding: 24px 0 66px;
  }
  .p-iv-ref__back {
    margin: 0 0 20px calc((100% - min(1120px, calc(100% - 80px))) / 2);
  }
  .p-iv-ref__hero-frame,
  .p-iv-ref__hero-caption {
    width: min(1120px, calc(100% - 80px));
  }
  .p-iv-ref__hero-visual {
    min-height: 0;
    aspect-ratio: 2 / 1;
    border-radius: 28px;
  }
  .p-iv-ref__hero-bubble {
    top: 58%;
    left: -3.8%;
    width: 450px;
    padding: 31px 34px 32px;
    border-radius: 30px 30px 30px 10px;
  }
  .p-iv-ref__hero-bubble h1 {
    font-size: 27px;
    line-height: 1.72;
    letter-spacing: .025em;
  }
  .p-iv-ref__hero-info { gap: 5px 12px; margin-top: 20px; }
  .p-iv-ref__hero-info strong { font-size: 22px; }
  .p-iv-ref__hero-info span {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: rgb(255 255 255 / .82);
    font-size: 10px;
  }
  .p-iv-ref__hero-info span + span::before { content: "/"; margin-right: 12px; opacity: .55; }
  .p-iv-ref__number { top: 8%; right: 3.5%; }
  .p-iv-ref__number strong { font-size: 94px; }

  .p-iv-ref__interviews {
    padding: 82px 0 125px;
    background:
      radial-gradient(55% 150px at 100% 28%, rgb(211 235 255 / .7), transparent 76%),
      linear-gradient(180deg, #f5faff 0%, #eaf5ff 48%, #f7fbff 100%);
  }
  .p-iv-ref__interviews::after { bottom: -48px; height: 96px; }
  .p-iv-ref__interviews > .c-wrap,
  .p-iv-ref__future > .c-wrap { width: min(1040px, calc(100% - 80px)); }
  .p-iv-ref__interviews-heading {
    max-width: 560px;
    margin-bottom: 62px;
  }
  .p-iv-ref__interviews-heading h2 {
    margin-top: 12px;
    font-size: 43px;
    line-height: 1.45;
  }
  .p-iv-ref__interviews-heading h2::after { margin-top: 14px; }
  .p-iv-ref__story {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 15px 48px;
  }
  .p-iv-ref__story + .p-iv-ref__story { margin-top: 78px; }
  .p-iv-ref__story-en { padding-bottom: 8px; font-size: 10px; }
  .p-iv-ref__story-en span { font-size: 18px; }
  .p-iv-ref__story-visual {
    aspect-ratio: 1.45;
    border-width: 6px;
    border-radius: 21px;
  }
  .p-iv-ref__story-copy {
    padding: 31px 35px 34px;
    border-radius: 24px 24px 24px 8px;
  }
  .p-iv-ref__story-question { margin-bottom: 17px; font-size: 12px; }
  .p-iv-ref__story-question::before { font-size: 32px; }
  .p-iv-ref__story-copy h3 {
    margin-bottom: 19px;
    font-size: 30px;
    line-height: 1.6;
  }
  .p-iv-ref__story-copy h3::after { width: 58px; margin-top: 13px; }
  .p-iv-ref__story-copy > p:not(.p-iv-ref__story-question) {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 2.05;
  }
  .p-iv-ref__story-copy > p + p { margin-top: 14px; }
  .p-iv-ref__decor.--lifestyle { top: 5%; width: 130px; }
  .p-iv-ref__decor.--ship { bottom: 4%; width: 112px; }

  .p-iv-ref__future {
    padding: 102px 0 105px;
    background:
      radial-gradient(40% 220px at 12% 34%, rgb(224 242 255 / .72), transparent 76%),
      linear-gradient(180deg, #fff 0%, #f4faff 50%, #eaf5ff 100%);
  }
  .p-iv-ref__future::before { top: -58px; height: 96px; }
  .p-iv-ref__future-heading h2 {
    margin-top: 10px;
    padding-bottom: 0;
    font-size: 47px;
    letter-spacing: .045em;
  }
  .p-iv-ref__future-heading h2::after { margin-top: 12px; }
  .p-iv-ref__future-grid {
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    gap: 62px;
    margin-top: 55px;
  }
  .p-iv-ref__future-person { min-height: 510px; }
  .p-iv-ref__bubbles { gap: 21px; }
  .p-iv-ref__q { margin: 0 0 8px 20px; font-size: 12px; }
  .p-iv-ref__q span { font-size: 18px; }
  .p-iv-ref__bubbles article > div {
    padding: 28px 34px 30px;
    border-radius: 28px 28px 28px 9px;
  }
  .p-iv-ref__bubbles article:nth-child(2) > div { border-radius: 28px 28px 9px 28px; }
  .p-iv-ref__bubbles h3 { margin-bottom: 9px; font-size: 25px; line-height: 1.55; }
  .p-iv-ref__bubbles p:last-child { font-size: 12px; line-height: 1.85; }
  .p-iv-ref__profile {
    max-width: 900px;
    margin-top: 68px;
    border-radius: 18px;
  }
  .p-iv-ref__profile-copy { padding: 42px 48px; }
  .p-iv-ref__profile h2 { margin-top: 5px; font-size: 58px; }
  .p-iv-ref__profile dl { gap: 20px 25px; margin-top: 24px; }
  .p-iv-ref__profile dd { font-size: 12px; }
  .p-iv-ref__profile-note { margin-top: 25px; padding: 13px 15px; }
  .p-iv-ref__profile-photo { min-height: 390px; }

  .p-iv-ref__related {
    padding: 86px 0 90px;
  }
  .p-iv-ref__related-heading h2 { font-size: 42px; }
  .p-iv-ref__related-heading > span { margin-top: 18px; }
  .p-iv-ref__member-stage { margin-top: 48px; }
  .p-iv-ref__member-stage li { width: 23%; margin-left: -1.5%; }
  .p-iv-ref__member-stage li.is-current { width: 25%; }
  .p-iv-ref__member-stage figure { border-width: 7px; border-radius: 999px 999px 28px 999px; }
  .p-iv-ref__member-current { margin-top: 36px; padding: 15px 23px; }
  .p-iv-ref__nav { margin-top: 42px; }
}

@media (max-width: 63.99rem) {
  .p-iv-ref__hero { padding-bottom: 72px; }
  .p-iv-ref__interviews { padding-top: 92px; padding-bottom: 135px; }
  .p-iv-ref__interviews-heading { margin-bottom: 65px; }
  .p-iv-ref__story + .p-iv-ref__story { margin-top: 78px; }
  .p-iv-ref__future { padding-top: 100px; }
  .p-iv-ref__future-grid { margin-top: 62px; }
  .p-iv-ref__profile { margin-top: 68px; }
}

@media (max-width: 47.99rem) {
  .p-iv-ref__hero { margin-top: 72px; padding-top: 18px; }
  .p-iv-ref__back { margin-bottom: 16px; }
  .p-iv-ref__hero-visual { min-height: 500px; }
  .p-iv-ref__hero-bubble h1 { font-size: 20px; line-height: 1.62; }
  .p-iv-ref__interviews { padding: 78px 0 105px; }
  .p-iv-ref__interviews-heading { margin-bottom: 55px; }
  .p-iv-ref__interviews-heading h2 { font-size: 30px; }
  .p-iv-ref__story + .p-iv-ref__story { margin-top: 66px; }
  .p-iv-ref__future { padding: 86px 0 82px; }
  .p-iv-ref__future-grid { margin-top: 48px; }
  .p-iv-ref__profile { margin-top: 55px; }
  .p-iv-ref__related { padding: 72px 0 70px; }
}

/* --------------------------------------------------------------------------
 * v1.7.2 — quiet section transitions and illustrated editorial cards
 * ----------------------------------------------------------------------- */
.p-iv-ref__hero-visual,
.p-iv-ref__hero-bubble,
.p-iv-ref__story-visual,
.p-iv-ref__story-copy,
.p-iv-ref__bubbles article > div,
.p-iv-ref__profile,
.p-iv-ref__member-stage figure,
.p-iv-ref__member-current {
  box-shadow: none !important;
}

/* Sections are separated by colour and soft arcs only — never a rule. */
.p-iv-ref__interviews,
.p-iv-ref__future,
.p-iv-ref__related {
  border: 0 !important;
  outline: 0 !important;
}
.p-iv-ref__related { border-top: 0 !important; }
.p-iv-ref__interviews::after,
.p-iv-ref__future::before {
  border: 0;
  box-shadow: none;
}

/* Keep the related-title accent calm and horizontal. */
.p-iv-ref__related-heading h2::after {
  width: 82px;
  height: 5px;
  margin-top: 17px;
  border-radius: 999px;
  background: var(--iv-yellow);
  rotate: 0deg !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Editorial quote panels: soft fields, no stroke and no floating-card shadow. */
.p-iv-ref__story-copy {
  border: 0;
  background:
    url("../images/deco/star-gold.svg") no-repeat calc(100% - 22px) 20px / 21px 23px,
    #fff;
}
.p-iv-ref__story-copy::before {
  content: "";
  position: absolute;
  top: -12px;
  right: 48px;
  width: 31px;
  height: 31px;
  background: url("../images/deco/spark-gold.svg") center / contain no-repeat;
  animation: ivDecorFloat 7.6s step-end -2.1s infinite;
}
.p-iv-ref__story-copy::after {
  right: 26px;
  bottom: -14px;
  width: 34px;
  height: 22px;
}
.p-iv-ref__story-question::before { color: #f6be3c; }

.p-iv-ref__bubbles article > div {
  border: 0;
  background:
    url("../images/deco/star-gold.svg") no-repeat calc(100% - 20px) 18px / 18px 20px,
    #fff;
}
.p-iv-ref__bubbles article:nth-child(2) > div {
  background:
    url("../images/deco/spark-gold.svg") no-repeat calc(100% - 18px) 17px / 27px 27px,
    #fff;
}
.p-iv-ref__bubbles article > div::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9fd7f5;
  box-shadow: -13px 13px 0 3px #d9effb;
}
.p-iv-ref__bubbles article > div::after {
  filter: none;
}

/* Profile and portrait tiles retain structure without card shadows. */
.p-iv-ref__profile {
  border: 0;
  background: #fff;
}
.p-iv-ref__profile-photo { border: 0; }
.p-iv-ref__member-stage figure {
  box-shadow: 0 0 0 2px #c1daee !important;
}
.p-iv-ref__member-current {
  box-shadow: none !important;
}

/* Replace product-photo ornaments with the theme's purpose-built star set. */
.p-iv-ref__decor {
  filter: none;
}
.p-iv-ref__decor.--lifestyle {
  top: 7%;
  right: max(28px, 4vw);
  width: clamp(34px, 3.4vw, 54px);
  rotate: 7deg;
}
.p-iv-ref__decor.--ship {
  bottom: 7%;
  left: max(25px, 4vw);
  width: clamp(38px, 4vw, 64px);
}
.p-iv-ref__decor.--metal {
  top: 4%;
  right: max(22px, 4vw);
  width: clamp(86px, 9vw, 132px);
  rotate: 0deg;
}

@media (max-width: 63.99rem) {
  .p-iv-ref__decor.--lifestyle { width: 42px; }
  .p-iv-ref__decor.--ship { width: 46px; }
  .p-iv-ref__decor.--metal { width: 92px; }
}

@media (max-width: 47.99rem) {
  .p-iv-ref__story-copy {
    background-size: 17px 19px, auto;
    background-position: calc(100% - 15px) 14px, 0 0;
  }
  .p-iv-ref__story-copy::before { top: -9px; right: 37px; width: 24px; height: 24px; }
  .p-iv-ref__bubbles article > div,
  .p-iv-ref__bubbles article:nth-child(2) > div { background-size: 17px 19px, auto; }
  .p-iv-ref__decor.--lifestyle { right: 12px; width: 32px; }
  .p-iv-ref__decor.--ship { left: 12px; width: 36px; }
  .p-iv-ref__decor.--metal { right: 5px; width: 72px; }
}

/* =========================================================
   インタビュー詳細：プロフィール欄の作り直し
   直す前は
     ・名前が欧文書体（和文が欧文の字形で崩れて見える）
     ・4項目それぞれに黄色い縦棒が付き、面が細切れ
     ・注記が黄色ベタで、そこだけ浮いていた
   罫を1本に減らし、項目は静かな表組みに、注記は地に沈めた。
   ========================================================= */
.p-iv-ref__profile {
  grid-template-columns: 1.12fr .88fr;
  border-radius: 26px;
  box-shadow: 0 24px 60px rgb(0 29 68 / .16);
}
.p-iv-ref__profile-copy { padding: clamp(44px, 4.6vw, 68px) clamp(40px, 4.4vw, 64px); }

/* 見出し：小見出しは細く、名前は和文の書体で組む */
.p-iv-ref__profile-en {
  display: inline-block;
  padding-bottom: 7px;
  border-bottom: 1.5px solid currentColor;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .22em;
}
.p-iv-ref__profile h2 {
  margin-top: 18px !important;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif) !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  line-height: 1.3;
}

/* 項目：縦棒をやめ、1本の細い横罫で仕切る表組みにする */
.p-iv-ref__profile dl {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin-top: clamp(26px, 2.8vw, 38px) !important;
  border-top: 1px solid rgb(31 120 209 / .18);
}
.p-iv-ref__profile dl > div {
  display: grid;
  grid-template-columns: 7.2em minmax(0, 1fr);
  align-items: baseline;
  gap: 0 18px;
  padding: 13px 2px !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgb(31 120 209 / .18);
}
.p-iv-ref__profile dt {
  margin-bottom: 0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  color: rgb(25 55 84 / .62) !important;
}
.p-iv-ref__profile dd {
  font-size: 14.5px !important;
  font-weight: 600;
  line-height: 1.7 !important;
  color: var(--iv-ink);
}

/* 注記：黄色ベタをやめ、淡い地に金の縦罫で沿わせる */
.p-iv-ref__profile-note {
  margin-top: clamp(24px, 2.6vw, 34px) !important;
  padding: 16px 20px !important;
  border-left: 3px solid var(--iv-yellow);
  border-radius: 0 10px 10px 0;
  background: rgb(31 120 209 / .05) !important;
  color: rgb(25 55 84 / .88) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.95 !important;
}
@media (max-width: 47.99rem) {
  .p-iv-ref__profile dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .p-iv-ref__profile h2 { font-size: 26px !important; }
}

/* ── プロフィール欄の詰め ──
   名前：サイトの見出し書体（Zen Kaku Gothic New 900）に合わせ、
         字間を詰めて大きく。他ページの見出しと同じ顔にする。
   注記：本人の言葉なので、囲みをやめて引用の組みにする。
         Message セクションの金の引用符と同じ語彙。 */
.p-iv-ref__profile h2 {
  font-family: var(--ff-jp-heading, "Zen Kaku Gothic New", sans-serif) !important;
  font-size: clamp(34px, 3.5vw, 50px) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  line-height: 1.24 !important;
  color: var(--iv-deep) !important;
}

.p-iv-ref__profile-note {
  position: relative;
  margin-top: clamp(28px, 3vw, 40px) !important;
  padding: 4px 0 0 clamp(34px, 3.4vw, 46px) !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: rgb(25 55 84 / .92) !important;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 2.0 !important;
}
/* 本人の言葉として、金の引用符を頭に置く */
.p-iv-ref__profile-note::before {
  content: "\201C";
  position: absolute;
  top: -.34em;
  left: 0;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: clamp(46px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 1;
  color: var(--iv-yellow);
}
@media (max-width: 47.99rem) {
  .p-iv-ref__profile h2 { font-size: 28px !important; }
  .p-iv-ref__profile-note { padding-left: 30px !important; font-size: 13px !important; }
}
/* 引用符が小さく、本文との間が空きすぎていたので詰める */
.p-iv-ref__profile-note {
  padding-left: clamp(26px, 2.6vw, 34px) !important;
  padding-top: 2px !important;
}
.p-iv-ref__profile-note::before {
  top: -.18em;
  font-size: clamp(34px, 3.2vw, 44px);
  opacity: .95;
}
/* 項目名は2行に折れると間延びするので、幅を少し広げて1行に収める */
.p-iv-ref__profile dl > div { grid-template-columns: 8.4em minmax(0, 1fr); }

/* =========================================================
   プロフィールの名前：もっと目を引く組みにする
   ・級数を上げ、姓と名の間をあけて堂々と見せる
   ・下に手描きの線を敷いて、機械的に並んだ字面から離す
   ・脇に小さな装飾を添える
   ========================================================= */
.p-iv-ref__profile-copy { position: relative; }
.p-iv-ref__profile h2 {
  position: relative;
  display: inline-block;
  margin-top: 20px !important;
  padding-bottom: 16px;
  font-family: var(--ff-jp-heading, "Zen Kaku Gothic New", sans-serif) !important;
  font-size: clamp(40px, 4.4vw, 62px) !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  line-height: 1.18 !important;
  color: var(--iv-deep) !important;
}
/* 手描きの下線。まっすぐな罫ではなく、少し波打たせる */
.p-iv-ref__profile h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: -6%;
  bottom: 0;
  height: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7C34 2 58 8 92 5c30-3 52 3 84 0 14-1 28 1 40 3' fill='none' stroke='%23FFD746' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")
    left bottom / 100% 10px no-repeat;
}
/* 名前の右上に小さなきらめきを添える */
.p-iv-ref__profile h2::before {
  content: "";
  position: absolute;
  top: -.34em;
  right: -1.1em;
  width: .42em;
  height: .42em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cpath d='M20 2c2 13 6 18 18 20-12 2-16 7-18 20-2-13-6-18-18-20 12-2 16-7 18-20z' fill='%23FFD746'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
@media (max-width: 47.99rem) {
  .p-iv-ref__profile h2 { font-size: 32px !important; }
}
/* h2 を inline-block にしたことで PROFILE と横に並んでしまった。行を分ける */
.p-iv-ref__profile-en { display: block !important; width: fit-content; }
.p-iv-ref__profile h2 { display: table !important; margin-top: 24px !important; }

/* 本番では左カラムが 1.12fr でも狭く、値が3行に折れて読みにくい。
   文章側にもう少し幅を渡し、項目名の列は詰める。 */
.p-iv-ref__profile { grid-template-columns: 1.34fr .66fr !important; }
.p-iv-ref__profile dl > div { grid-template-columns: 7em minmax(0, 1fr) !important; }
.p-iv-ref__profile dd { line-height: 1.62 !important; }
@media (max-width: 63.99rem) {
  .p-iv-ref__profile { grid-template-columns: minmax(0, 1fr) !important; }
}

/* =========================================================
   インタビュー詳細：ヒーローの吹き出しを横長に
   幅 min(38vw,500px) では見出しが3行に折れて縦に伸びていた。
   幅を広げ、名前を見出しの横に並べて、横に寝た形にする。
   ========================================================= */
.p-iv-ref__hero-bubble {
  width: min(58vw, 760px) !important;
  padding: clamp(30px, 3vw, 44px) clamp(34px, 3.4vw, 52px) !important;
}
.p-iv-ref__hero-bubble h1 {
  font-size: clamp(22px, 2.1vw, 34px) !important;
  line-height: 1.5 !important;
}
/* 名前と所属は見出しの下で横一列に。改行して縦に伸びるのを止める */
.p-iv-ref__hero-info {
  align-items: baseline !important;
  gap: 6px 14px !important;
  margin-top: 20px !important;
}
.p-iv-ref__hero-info strong {
  width: auto !important;
  margin-bottom: 0 !important;
  font-family: var(--ff-jp-heading, "Zen Kaku Gothic New", sans-serif) !important;
  font-size: clamp(19px, 1.6vw, 25px) !important;
  letter-spacing: .06em !important;
}
@media (max-width: 63.99rem) {
  .p-iv-ref__hero-bubble { width: min(74vw, 620px) !important; }
}
@media (max-width: 47.99rem) {
  .p-iv-ref__hero-bubble { width: calc(100% - 32px) !important; }
  .p-iv-ref__hero-bubble h1 { font-size: 20px !important; }
}

/* 見出しの枠が 620px しかなく、指定した改行位置を無視して
   意図しないところで折れていた。文字が入りきる幅に広げる。 */
.p-iv-ref__interviews-heading { max-width: min(1000px, 88vw) !important; }
.p-iv-ref__interviews-heading h2 {
  font-size: clamp(30px, 3.6vw, 50px) !important;
  line-height: 1.5 !important;
}
@media (max-width: 47.99rem) {
  .p-iv-ref__interviews-heading h2 { font-size: 25px !important; letter-spacing: .04em !important; }
}

/* 質問文が14pxで、続く見出しに対して小さすぎた。読ませる大きさに上げる */
.p-iv-ref__story-question {
  font-size: clamp(15px, 1.25vw, 19px) !important;
  letter-spacing: .04em !important;
  line-height: 1.7 !important;
  align-items: flex-start !important;
  margin-bottom: 22px !important;
}
.p-iv-ref__story-question::before { font-size: 48px !important; line-height: .74 !important; }
@media (max-width: 47.99rem) {
  .p-iv-ref__story-question { font-size: 15px !important; }
}

/* 写真の上に重ねていたラベルは不要 */
.p-iv-ref__story-visual figcaption { display: none !important; }

/* =========================================================
   プロフィール：高さは左の内容で決める
   写真側の min-height:500px が枠を押し広げ、左に大きな余白が
   できていた。写真は枠を伸ばさず、決まった高さの中で収める。
   ========================================================= */
.p-iv-ref__profile { align-items: stretch; }
.p-iv-ref__profile-photo,
.p-iv-ref__profile > figure {
  min-height: 0 !important;
  height: 100%;
  align-self: stretch;
}
/* 写真は枠いっぱいに敷き、はみ出す分は切る */
.p-iv-ref__profile-photo img,
.p-iv-ref__profile > figure img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 22% !important;   /* 顔が切れないよう上寄り */
  translate: none !important;
}
@media (max-width: 63.99rem) {
  /* 1カラムに落ちるときは写真に高さを持たせる */
  .p-iv-ref__profile-photo,
  .p-iv-ref__profile > figure { min-height: 340px !important; }
}

/* =========================================================
   関連メンバー：参考サイト（yamacs）の見せ方に寄せる
   参考の作り
     ・縦長の吹き出し型カードを横一列。中央（現在のページ）だけ等倍
     ・両脇は 0.905 倍に縮小し、暗い膜をかけて後ろへ下げる
     ・現在のカードだけ写真を 1.15 倍に寄せる
     ・変化は .6s cubic-bezier(.455,.03,.515,.955)
   ホクセイ版では、現在地のカードを主役に、他は静かに引かせる。
   ========================================================= */
.p-iv-ref__member-stage ul {
  align-items: center !important;
  gap: 0;
  padding-inline: 3% !important;
}
.p-iv-ref__member-stage li {
  width: 25% !important;
  margin-left: -1.5% !important;
  scale: .905;                       /* 参考と同じ縮率 */
  transition: scale .6s cubic-bezier(.455,.03,.515,.955),
              translate .6s cubic-bezier(.455,.03,.515,.955) !important;
  translate: none !important;
}
.p-iv-ref__member-stage li:nth-child(even) { translate: none !important; }

/* カードは吹き出し型。角の丸みを参考に寄せる */
.p-iv-ref__member-stage figure {
  aspect-ratio: 338 / 572 !important;
  border: 0 !important;
  border-radius: 999px 999px 999px 34px !important;
  filter: none !important;
  scale: 1 !important;
  box-shadow: 0 18px 40px rgb(7 55 103 / .18) !important;
  transition: none !important;
}
/* 中央以外は暗い膜をかけて奥へ下げる（参考は rgba(0,0,0,.7)） */
.p-iv-ref__member-stage figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(4 26 58 / .62);
  transition: background .6s ease;
  pointer-events: none;
}
.p-iv-ref__member-stage li.is-current figure::after { background: rgb(4 26 58 / 0); }

/* 現在のページのカードだけ等倍で前に出す */
.p-iv-ref__member-stage li.is-current {
  z-index: 6 !important;
  width: 25% !important;
  scale: 1 !important;
  translate: 0 -10px !important;
}
/* 現在のカードは写真を少し寄せる（参考は 1.15 倍） */
.p-iv-ref__member-stage li.is-current figure img { transform: scale(1.12); }
.p-iv-ref__member-stage figure img {
  transition: transform .4s cubic-bezier(.455,.03,.515,.955) !important;
  animation: none !important;        /* 揺れは止め、静かに見せる */
}
/* 触れたカードも同じ扱いで前に出す */
.p-iv-ref__member-stage li:hover { z-index: 5; scale: 1; translate: 0 -6px !important; }
.p-iv-ref__member-stage li:hover figure::after { background: rgb(4 26 58 / .18); }
.p-iv-ref__member-stage li:hover figure img { transform: scale(1.08); }

/* 番号は左下の白丸に置く */
.p-iv-ref__member-stage a > span {
  top: auto !important;
  bottom: 14px;
  right: auto !important;
  left: 16px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--iv-deep) !important;
  background: #fff;
  font-size: 11px !important;
}
@media (max-width: 47.99rem) {
  .p-iv-ref__member-stage ul { padding-inline: 0 !important; }
  .p-iv-ref__member-stage li,
  .p-iv-ref__member-stage li.is-current { width: 27% !important; }
  .p-iv-ref__member-stage a > span { width: 24px; height: 24px; font-size: 10px !important; bottom: 8px; left: 8px; }
}
/* 参考は主役が中央に来る。現在のカードを真ん中へ寄せ、
   両脇が左右に流れていく並びにする（4枚なので order で入れ替える）。 */
.p-iv-ref__member-stage ul { position: relative; }
.p-iv-ref__member-stage li { transform-origin: center bottom; }
/* 現在のカードが1番目なら、その次の2枚を左へ回して中央に据える */
.p-iv-ref__member-stage li.is-current { order: 2; }
.p-iv-ref__member-stage li:not(.is-current):first-child { order: 1; }
.p-iv-ref__member-stage li.is-current:first-child ~ li:nth-child(2) { order: 1; }
.p-iv-ref__member-stage li.is-current:first-child ~ li:nth-child(3) { order: 3; }
.p-iv-ref__member-stage li.is-current:first-child ~ li:nth-child(4) { order: 4; }
/* 影の重なりは中央が最前面、外側ほど奥 */
.p-iv-ref__member-stage li { z-index: 1; }
.p-iv-ref__member-stage li.is-current { z-index: 6 !important; }

/* =========================================================
   インタビュー詳細の見出しを太く
   Zen Kaku Gothic New が持つのは 400/500/700/900 で、800 は無い。
   font-weight:800 と書いても 700 で描かれていたため、900 にする。
   ========================================================= */
.p-iv-ref__interviews-heading h2,
.p-iv-ref__future-heading h2,
.p-iv-ref__story-copy h3,
.p-iv-ref__hero-bubble h1,
.p-iv-ref__profile h2 { font-weight: 900 !important; }

/* =========================================================
   ヒーローの吹き出しを写真の下端より少し下へ
   top:50% では写真の中央に重なって人物の顔を隠し、bottom:5% でもまだ高かった。
   写真の下端を少し越える位置に置いて、貼り込んだような見え方にする。
   ========================================================= */
.p-iv-ref__hero-bubble {
  top: auto !important;
  bottom: -28px !important;
  translate: 0 0 !important;
}
@media (max-width: 63.99rem) {
  .p-iv-ref__hero-bubble { bottom: -22px !important; }
}
@media (max-width: 47.99rem) {
  .p-iv-ref__hero-bubble { bottom: -16px !important; }
}

/* =========================================================
   ストーリー写真：差し替えたときに右へ隙間ができる問題
   --panorama は「横長の帯画像の一部を見せる」前提で
   width:auto と translate:-31% を当てていた。
   通常の比率の写真を入れると、左にずれて右が空く。
   どんな写真でも枠を埋めるよう、素直に cover させる。
   ========================================================= */
.p-iv-ref__story-visual.--panorama img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  translate: none !important;
}
/* 切り抜き素材だけは全体を見せる（枠に収める） */
.p-iv-ref__story-visual img[src*="/cutout/"],
.p-iv-ref__story-visual img[src*="透過"] {
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* =========================================================
   関連メンバー：形をただの楕円にし、顔が切れないようにする
   これまでは吹き出し型（999px 999px 999px 34px）で、
   写真を枠より大きく出していたため上下で切れていた。
   楕円にして、人物は枠の中に収める。
   ========================================================= */
.p-iv-ref__member-stage figure {
  border-radius: 50% !important;      /* ただの楕円 */
  aspect-ratio: 320 / 440 !important;
  overflow: hidden;
}
/* 人物は枠内に全身が収まるように置く */
.p-iv-ref__member-stage figure img {
  position: absolute !important;
  inset: auto 0 0 50% !important;
  width: auto !important;
  max-width: 88% !important;
  height: 88% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  translate: -50% 0 !important;
  transform: none !important;
}
/* 現在のカードだけ、少しだけ大きく見せる（切れない範囲で） */
.p-iv-ref__member-stage li.is-current figure img {
  height: 92% !important;
  max-width: 92% !important;
}
.p-iv-ref__member-stage li:hover figure img { height: 90% !important; }
/* 番号は楕円の外に出ないよう内側へ */
.p-iv-ref__member-stage a > span { bottom: 8%; left: 50%; translate: -50% 0; }
/* 現在のカードで人物が枠からはみ出していたので、他と同じ収まりにする。
   大きさの差は figure 側の scale で付ける */
.p-iv-ref__member-stage li.is-current figure img,
.p-iv-ref__member-stage li:hover figure img {
  height: 88% !important;
  max-width: 88% !important;
}
.p-iv-ref__member-stage figure { overflow: hidden !important; }

/* =========================================================
   「ホクセイで描く未来」の質問と本文が小さすぎた
   質問14px・本文13px。他の節（ストーリー本文は15〜17px）に対して
   明らかに細かいので、読ませる大きさにそろえる。
   ========================================================= */
.p-iv-ref__q {
  font-size: clamp(15px, 1.25vw, 19px) !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
}
.p-iv-ref__q span { font-size: 1.35em !important; }
.p-iv-ref__bubbles p:last-child {
  font-size: clamp(14px, 1.08vw, 16px) !important;
  line-height: 2.02 !important;
  color: #3d5068 !important;
}
.p-iv-ref__bubbles h3 { font-weight: 900 !important; }
@media (max-width: 47.99rem) {
  .p-iv-ref__q { font-size: 15px !important; }
  .p-iv-ref__bubbles p:last-child { font-size: 14px !important; }
}

/* =========================================================
   ストーリーの文章カードを広げる
   1fr/1fr の等分＋c-wrap の 5vi の内側余白で、本文の折り返しに対して
   カードが狭かった。囲みの取り分を増やし、写真は今の大きさを保つ。
   --reverse は文章が左列なので、取り分を左右反転させる。
   ========================================================= */
.p-iv-ref__interviews > .c-wrap { padding-inline: clamp(20px, 2.6vi, 52px) !important; }
@media (min-width: 64rem) {
  .p-iv-ref__story { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr) !important; }
  .p-iv-ref__story.--reverse { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important; }
  .p-iv-ref__story { column-gap: clamp(40px, 4.4vw, 72px) !important; }
}

/* =========================================================
   ヒーロー吹き出しのしっぽを外す
   写真の中に収まっていた頃の名残。下端より下へ出した今は
   何も指していない三角が白地に落ちるだけなので消す。
   ========================================================= */
.p-iv-ref__hero-bubble::after { display: none !important; }
/* 左下だけ角ばっていたのは、しっぽを受けるための欠き。しっぽが無い今は他の角にそろえる */
.p-iv-ref__hero-bubble { border-radius: 30px !important; }
@media (max-width: 63.99rem) { .p-iv-ref__hero-bubble { border-radius: 26px !important; } }
@media (max-width: 47.99rem) { .p-iv-ref__hero-bubble { border-radius: 20px !important; } }

/* =========================================================
   ヒーロー吹き出しの高さを詰める
   上下44pxの余白と行間1.5で縦に膨らみ、写真を隠す面積が大きかった。
   左右の余白は変えず、上下と行送りだけを詰める（296px → 250px）。
   ========================================================= */
.p-iv-ref__hero-bubble { padding: clamp(22px, 2.1vw, 30px) clamp(34px, 3.4vw, 52px) !important; }
.p-iv-ref__hero-bubble h1 { line-height: 1.42 !important; }
.p-iv-ref__hero-bubble .p-iv-ref__hero-en { margin-bottom: 11px !important; }
.p-iv-ref__hero-bubble .p-iv-ref__hero-info { margin-top: 13px !important; }

/* 吹き出し左上の引用符の装飾を外す */
.p-iv-ref__hero-bubble::before { display: none !important; }

/* =========================================================
   プロフィール表の縦位置
   align-items: baseline のため、項目名が2行に折れると
   その1行目に本文が揃い、本文が上に寄って見えていた。
   ========================================================= */
.p-iv-ref__profile dl > div { align-items: center !important; }

/* =========================================================
   関連メンバーのホバーを、サイト全体のカクカクした動きにそろえる
   cubic-bezier で .6s かけて滑らかに動いていたため、
   steps(1) で組んだ他の動きから浮いていた。
   3段の steps に変えて、段を踏んで動くようにする。
   ========================================================= */
.p-iv-ref__member-stage li {
  transition: scale .27s steps(3, jump-none),
              translate .27s steps(3, jump-none) !important;
}
.p-iv-ref__member-stage figure::after {
  transition: background .27s steps(3, jump-none) !important;
}
.p-iv-ref__member-stage figure img {
  transition: transform .27s steps(3, jump-none),
              height .27s steps(3, jump-none) !important;
}
/* 番号の白丸も同じ段で追従させる */
.p-iv-ref__member-stage a > span {
  transition: scale .27s steps(3, jump-none),
              background-color .27s steps(3, jump-none) !important;
}
.p-iv-ref__member-stage li:hover a > span { scale: 1.12; }

@media (prefers-reduced-motion: reduce) {
  .p-iv-ref__member-stage :where(li, figure, img, a > span),
  .p-iv-ref__member-stage figure::after { transition: none !important; }
  .p-iv-ref__member-stage li:hover a > span { scale: 1; }
}