/* Native sticky reference: https://www.g-in.co.jp/assets/css/pages.css
   GIN keeps .side_tit at top:60px; we keep the process figure in view.
   The document remains the only scroll container. */
#approach .approach-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: start;
  overflow: visible;
}
#approach .approach-copy { min-width: 0; }
#approach .approach-copy > h2 {
  max-width: 15em;
  margin: 0 0 30px;
  line-height: 1.65;
}
#approach .approach-layout > :last-child {
  min-width: 0;
  width: 100%;
  align-self: start;
}
#approach .approach-layout .diagram-stage {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  overflow: visible;
}
#approach .approach-layout .diagram-stage > svg { overflow: visible; }
#approach .step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 17px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid #bdc8c4;
  opacity: 1;
  transform: none;
}
#approach .step > div { min-width: 0; }
#approach .step .num { color: #647c82; font-size: 13px; padding-top: 4px; }
#approach .step h3 { margin: 0 0 13px; font-size: 23px; line-height: 1.65; font-weight: 500; }
#approach .step p { max-width: 28em; font-size: 16px; line-height: 1.95; color: #53645f; opacity: 1; transform: none; }
#approach .approach-scroll-caption { display: none; }

@media (min-width: 901px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  #approach { padding-block: clamp(70px, 9svh, 112px); }
  #approach .section-heading { margin-bottom: clamp(35px, 5svh, 66px); }
  #approach .approach-copy > h2 { margin-bottom: 36px; }
  #approach .step {
    min-height: clamp(260px, 42svh, 390px);
    align-content: center;
    padding-block: 48px;
    padding-left: 13px;
    margin-left: 9px;
  }
  #approach .step:last-child { min-height: clamp(270px, 46svh, 425px); }
  #approach .approach-layout > :last-child {
    position: sticky;
    top: clamp(98px, 13svh, 156px);
    /* Small viewport heights use the same diagram without clipping its spread. */
    max-width: min(680px, calc((100svh - 220px) * 1.25));
    justify-self: center;
    padding-block: 8px 18px;
    z-index: 1;
  }
  #approach .step::before {
    content: "";
    position: absolute;
    left: -9px;
    top: calc(50% - 4px);
    width: 7px;
    height: 7px;
    border: 1px solid #7c969b;
    border-radius: 50%;
    background: #f0f2eb;
  }
  #approach .step.is-current-approach-step::before { background: #607f85; }
  #approach .approach-scroll-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 440px;
    min-height: 54px;
    margin: 8px auto 0;
    padding-top: 16px;
    border-top: 1px solid #c2cbc7;
  }
  #approach .approach-scroll-caption-text { font-size: 17px; line-height: 1.7; color: #445953; }
  #approach .approach-scroll-caption-rail { display: flex; flex-shrink: 0; gap: 7px; }
  #approach .approach-scroll-caption-rail > span { display: block; width: 20px; height: 2px; background: #8d9d98; opacity: .3; }
  #approach .approach-scroll-caption-rail > .is-current { opacity: 1; }
  #approach .approach-scroll-link .dg-link-signal { opacity: .3; transition: opacity 180ms ease; }
  #approach .approach-scroll-link.is-current .dg-link-signal { opacity: 1; }

  @supports (animation-timeline: view()) {
    #approach .step::after {
      content: "";
      position: absolute;
      top: 0;
      left: -6px;
      width: 1px;
      height: 100%;
      background: #879c9b;
      transform: scaleY(0);
      transform-origin: center top;
      animation: approach-step-progress 1ms linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 55%;
      pointer-events: none;
    }
  }
}

/* With less space, place the figure once, then keep all three explanations visible. */
@media (max-width: 900px) {
  #approach .approach-layout { display: flex; flex-direction: column; gap: 0; }
  #approach .approach-copy { display: contents; }
  #approach .approach-copy > h2 { order: 0; margin-bottom: 20px; font-size: 27px; }
  #approach .approach-layout > :last-child { position: static; order: 1; max-width: 580px; margin: -15px auto 28px; }
  #approach .step { order: 2; width: 100%; padding: 26px 0; min-height: 0; }
  #approach .step h3 { font-size: 21px; margin-bottom: 9px; }
  #approach .step p { max-width: none; font-size: 15px; }
  #approach .approach-scroll-caption { display: none; }
}
@media (max-width: 520px) {
  #approach .approach-copy > h2 { font-size: 25px; }
  #approach .approach-layout > :last-child { margin-block: -8px 18px; }
  #approach .step { grid-template-columns: 25px minmax(0, 1fr); gap: 13px; }
  #approach .step h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #approach .approach-layout > :last-child { position: static; }
  #approach .step { min-height: 0; }
  #approach .step::before, #approach .step::after { display: none; }
  #approach .approach-scroll-link .dg-link-signal { opacity: 1; transition: none; }
  #approach .approach-scroll-caption { display: none; }
}
@keyframes approach-step-progress { from { transform: scaleY(0); } to { transform: scaleY(1); } }