#paint-process{--paper:#f6f4ef;--ink:#2b2926;--ink-2:#5c5751;--ink-3:#9a948c;--line:#dcd7cf;--sage:#7ea876;--sage-d:#557a4e;--hand:Ikenaga,"Yu Gothic",sans-serif;background:var(--paper);color:var(--ink)}#paint-process .pp-heading{text-align:center;padding-top:60px}#paint-process .pp-heading .section-title{margin-bottom:10px}#paint-process .pp-heading p{font-size:14px;color:var(--ink-2)}#paint-process .pp-skip{display:inline-block;font-size:12px;margin-top:14px}#paint-process .pp-ending{text-align:center;padding:20px 0 55px}#paint-process .pp-note{font-size:12px;color:var(--ink-2);max-width:760px;margin:12px auto 0}#paint-process .steps{margin:0}#paint-process .art{min-height:0}#paint-process .pp-stage{scroll-margin-top:0}

#paint-process .pp-stage{height:100vh;height:100svh;display:grid;grid-template-columns:minmax(300px,32%) 1fr;align-items:center;gap:2vw;padding:0 4vw;overflow:hidden}
#paint-process .steps{list-style:none;position:relative;padding-left:34px}
#paint-process .steps::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;background:var(--line)}
#paint-process .steps .bar{position:absolute;left:9px;top:12px;width:2px;height:0;background:var(--sage-d)}
#paint-process .step{position:relative;padding:14px 0;opacity:.38;transition:opacity .4s}
#paint-process .step::before{content:"";position:absolute;left:-31px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--ink-3);transition:background .4s,border-color .4s}
#paint-process .step.is-on{opacity:1}
#paint-process .step.is-on::before,#paint-process .step.is-done::before{background:var(--sage);border-color:var(--sage-d)}
#paint-process .step.is-done{opacity:.6}
#paint-process .step .no{font-family:var(--hand);font-size:13px;letter-spacing:.2em;color:var(--sage-d)}
#paint-process .step h2{font-family:var(--hand);font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.35;letter-spacing:.04em}
#paint-process .step p{font-size:14px;color:var(--ink-2);margin-top:4px;max-width:22em}

#paint-process .art{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#paint-process .art svg{width:100%;height:min(90vh,100%);overflow:visible}
#paint-process .done-label{font-family:var(--hand);font-weight:600}

@media (max-width:760px){
  #paint-process .pp-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:20px 16px 8px;gap:0;align-items:stretch}
  #paint-process .steps{padding-left:0;min-height:118px}
  #paint-process .steps::before,#paint-process .steps .bar{display:none}
  #paint-process .step{position:absolute;left:0;right:0;top:0;opacity:0;padding:6px 0;transition:opacity .35s}
  #paint-process .step::before{display:none}
  #paint-process .step.is-on{opacity:1}
  #paint-process .step.is-done{opacity:0}
  #paint-process .step p{font-size:13px}
  #paint-process .art svg{height:100%}
}
#paint-process:not(.paint-ready) .step{opacity:1;position:relative}#paint-process:not(.paint-ready) .steps{min-height:auto}#paint-process .pp-stage{height:min(900px,100svh);min-height:560px}#paint-process .art svg{max-height:100%;overflow:visible}#paint-process .step h2{margin:0}#paint-process .step p{margin-bottom:0}
@media(max-width:760px){#paint-process .pp-stage{height:100svh;min-height:540px;padding:20px 18px 10px;grid-template-rows:150px minmax(0,1fr)}#paint-process .step p{font-size:14px}#paint-process .step h2{font-size:24px}#paint-process .steps{min-height:150px}#paint-process .pp-heading{padding-top:40px}#paint-process .pp-ending{padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){#paint-process .pp-stage{height:auto;min-height:0;padding-top:30px;padding-bottom:30px}#paint-process .step,#paint-process .step.is-done{opacity:1;position:relative;transition:none}#paint-process .steps{min-height:0}#paint-process .art{min-height:320px}#paint-process .art svg{height:auto;max-height:600px}#paint-process .pp-stage{grid-template-rows:auto auto}#paint-process .pp-heading>p,#paint-process .pp-skip,#pp-again{display:none}}
#paint-process:not(.paint-ready) .pp-stage{height:auto;min-height:0;grid-template-rows:auto auto;padding-block:30px}#paint-process:not(.paint-ready) .art{min-height:320px}#paint-process:not(.paint-ready) .art svg{height:auto;max-height:600px}

#paint-process .pp-scroll-track{position:relative}#paint-process .pp-scroll-track.is-animated .pp-stage{position:sticky;top:0;height:100svh;min-height:0;max-height:100svh}#paint-process .pp-scroll-track:not(.is-animated) .pp-stage{position:relative}