.approach-process {
  position: relative;
  height: 410svh;
  min-height: 2600px;
  margin-left: 82px;
  padding: 0;
  overflow: visible;
  background: #f7fbfe;
  color: #112e4a;
  font-family: var(--font-standard);
  scroll-margin-top: 0;
}
.ap-sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100svh;
  margin: 0 auto;
  padding: clamp(33px, 4.4vh, 55px) clamp(48px, 5vw, 100px) 25px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 81% 47%, #eaf5fc 0, #f7fbfe 40%, #f7fbfe 100%);
}
.ap-sticky::before { position: absolute; z-index: -1; top: 21%; right: -7%; width: 50vw; height: 50vw; border: 1px solid #dbeef9; border-radius: 50%; opacity: .7; content: ""; pointer-events: none; }
.ap-header { max-width: 1740px; width: 100%; margin: 0 auto; }
.ap-kicker { margin: 0 0 17px; color: #244e72; font-size: 11px; font-weight: 700; letter-spacing: .25em; }
.ap-kicker span { margin-left: 18px; color: #8ca4b5; }
.ap-header h2 { margin: 0; font-size: clamp(45px, 3.7vw, 71px); font-weight: 500; letter-spacing: -.025em; line-height: 1.18; }
.ap-body { display: grid; grid-template-columns: 43% minmax(0, 1fr); gap: clamp(28px, 3vw, 58px); min-height: 0; max-width: 1740px; width: 100%; margin: 17px auto 0; }
.ap-copy { display: flex; flex-direction: column; min-height: 0; }
.ap-intro { margin: 5px 0 12px; color: #47677e; font-size: clamp(13px, .88vw, 16px); font-weight: 500; line-height: 1.75; }
.approach-process .approach-steps { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: space-around; min-height: 0; margin: 0; padding: 0; list-style: none; }
.approach-process .approach-steps::before { position: absolute; top: 12%; bottom: 12%; left: 68px; width: 1px; background: #bcd5e4; content: ""; }
.approach-process .approach-steps li,
.approach-process .approach-steps li:first-child,
.approach-process .approach-steps li:nth-child(even) { display: block; flex: 1; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; opacity: .38; transition: opacity .38s ease; }
.approach-process .approach-steps li.is-active { opacity: 1; }
.approach-steps button { display: grid; grid-template-columns: 44px 28px minmax(0, 1fr); align-items: start; gap: 12px; width: 100%; height: 100%; margin: 0; padding: clamp(8px, 1.5vh, 15px) 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.ap-step-no { color: #3c83a8; font-size: clamp(26px, 1.75vw, 32px); font-weight: 400; line-height: 1.15; }
.ap-step-marker { position: relative; z-index: 1; display: block; width: 12px; height: 12px; margin: 11px auto 0; border-radius: 50%; background: #8eabbc; box-shadow: 0 0 0 4px #f7fbfe; }
.is-active .ap-step-marker { background: #164765; box-shadow: 0 0 0 4px #f7fbfe, 0 0 0 6px #4a9bc2; }
.ap-step-text { display: block; min-width: 0; }
.ap-step-text small { display: block; margin: 1px 0 8px; color: #4d91b0; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.ap-step-text strong { display: block; color: #123451; font-size: clamp(21px, 1.47vw, 29px); font-weight: 700; letter-spacing: -.015em; line-height: 1.35; }
.ap-step-text em { display: block; max-width: 29em; margin-top: 10px; color: #47647a; font-size: clamp(12px, .8vw, 14px); font-style: normal; font-weight: 400; line-height: 1.65; }
.ap-visual { position: relative; min-height: 0; }
.ap-scene { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transform: translate3d(0, 20px, 0) scale(.97); transition: opacity .65s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.ap-scene.is-active { opacity: 1; pointer-events: auto; transform: none; }
.ap-scene img { position: absolute; top: -55%; left: -22%; width: min(145%, 1100px); height: auto; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(circle at center, #000 53%, #000c 62%, transparent 81%); mask-image: radial-gradient(circle at center, #000 53%, #000c 62%, transparent 81%); }
.ap-scene figcaption { position: absolute; bottom: clamp(10px, 2vh, 22px); left: 3%; width: min(94%, 575px); padding: 15px 19px 16px 23px; border-left: 3px solid #5e9dbd; background: linear-gradient(90deg, #f9fcfffa, #f9fcfff0); box-shadow: 0 14px 35px #5e9dbd12; }
.ap-scene figcaption span { display: block; margin-bottom: 6px; color: #397fa6; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.ap-scene figcaption strong { display: block; color: #102e49; font-size: clamp(20px, 1.25vw, 24px); line-height: 1.45; }
.ap-scene figcaption p { margin: 7px 0 0; color: #31536c; font-size: clamp(13px, .89vw, 16px); line-height: 1.65; }
.ap-footer { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: 25px; max-width: 1740px; width: 100%; margin: 0 auto; color: #335d78; font-size: 11px; font-weight: 700; letter-spacing: .19em; }
.ap-scroll-cue { justify-self: center; }
.ap-scroll-cue::before { display: block; width: 1px; height: 26px; margin: 0 auto 7px; background: #769bb0; content: ""; }
.ap-counter { display: inline-flex; align-items: center; gap: 13px; white-space: nowrap; }
.ap-counter b { color: #173f59; font-size: 20px; font-weight: 600; line-height: 1; }
.ap-counter i { width: 28px; height: 1px; background: #8cb0c2; }
.ap-footer a { color: #174e73; font-size: 12px; text-decoration: none; white-space: nowrap; }
.ap-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 1150px) {
  .ap-sticky { padding-inline: clamp(32px, 4vw, 55px); }
  .ap-body { grid-template-columns: 46% minmax(0, 1fr); }
  .ap-step-text strong { font-size: clamp(19px, 1.8vw, 24px); }
  .ap-step-text em { font-size: 12px; }
  .ap-scene img { top: -16%; left: -7%; width: 118%; max-width: 118%; }
}
@media (max-width: 850px) {
  .approach-process { margin-left: 0; }
  .ap-sticky { padding: 88px 25px 26px; }
  .ap-kicker { margin-bottom: 9px; font-size: 9px; }
  .ap-header h2 { font-size: clamp(39px, 5.8vw, 53px); }
  .ap-header h2 br { display: none; }
  .ap-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 6px; margin-top: 13px; }
  .ap-intro { display: none; }
  .approach-process .approach-steps { flex: none; }
  .approach-process .approach-steps::before { top: 10%; bottom: 10%; left: 54px; }
  .approach-process .approach-steps li,
  .approach-process .approach-steps li:first-child,
  .approach-process .approach-steps li:nth-child(even) { flex: none; min-height: 54px; }
  .approach-steps button { grid-template-columns: 35px 16px minmax(0, 1fr); gap: 11px; padding: 5px 0; }
  .ap-step-no { font-size: 23px; }
  .ap-step-marker { width: 10px; height: 10px; margin-top: 8px; }
  .ap-step-text small { display: inline; margin: 0 8px 0 0; font-size: 9px; }
  .ap-step-text strong { display: inline; font-size: 17px; }
  .ap-step-text em { display: none; margin-top: 3px; font-size: 11px; line-height: 1.4; }
  .is-active .ap-step-text em { display: block; }
  .ap-visual { min-height: 200px; }
  .ap-scene img { top: -20%; right: auto; left: 50%; width: min(116vw, 450px); max-width: none; height: auto; margin: 0; transform: translateX(-50%); }
  .ap-scene figcaption { right: 0; bottom: 0; left: 0; width: 100%; max-width: none; padding: 9px 12px; border-left-width: 2px; box-shadow: none; }
  .ap-scene figcaption span { display: none; }
  .ap-scene figcaption strong { font-size: 15px; }
  .ap-scene figcaption p { display: none; }
  .ap-footer { grid-template-columns: 1fr auto; gap: 12px; margin-top: 7px; }
  .ap-scroll-cue, .ap-footer a { display: none; }
}
@media (max-width: 600px) {
  .ap-sticky { padding: 89px 18px 21px; }
  .ap-header h2 { font-size: clamp(36px, 10vw, 45px); }
  .ap-header h2 br { display: initial; }
  .ap-body { margin-top: 9px; }
  .approach-process .approach-steps li,
  .approach-process .approach-steps li:first-child,
  .approach-process .approach-steps li:nth-child(even) { min-height: 49px; }
  .ap-step-text strong { font-size: clamp(15px, 4vw, 18px); }
  .ap-step-text em { font-size: 10px; }
  .ap-scene figcaption strong { font-size: 13px; }
  .ap-footer { font-size: 10px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .ap-sticky { padding-top: 74px; }
  .ap-header h2 { font-size: 36px; line-height: 1.13; }
  .approach-process .approach-steps li,
  .approach-process .approach-steps li:first-child,
  .approach-process .approach-steps li:nth-child(even) { min-height: 43px; }
  .ap-visual { min-height: 155px; }
  .ap-scene img { top: -18%; width: min(112vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  .approach-process .approach-steps li, .ap-scene { transition: none; }
}