.refine-process{margin-top:58px;color:#2a4a38;display:flex;gap:44px;align-items:stretch}
.process-visual{margin:0;background:#e9ede8;border:1px solid #d9dfd8;border-radius:16px;position:relative;overflow:hidden;flex:0 0 50%;max-width:50%;display:flex;flex-direction:column}
.process-visual svg{display:block;width:100%;flex:1 1 auto;min-height:0}
.process-status{position:absolute;left:24px;top:22px;display:flex;flex-direction:column;gap:8px}
.process-status span{font:700 10px Roboto,sans-serif;letter-spacing:.12em}
.process-status strong{font:700 34px Roboto,sans-serif;color:#f78226}
.process-guide path{fill:none;stroke:#2a4a38;stroke-width:1;stroke-opacity:.18}
.process-visual figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:10px 24px;font-size:10px;color:#607264}
.process-visual button{border:1px solid #b8c5b9;border-radius:24px;background:transparent;color:#2a4a38;padding:8px 14px;font:inherit;cursor:pointer}
.process-visual button:disabled{opacity:.4;cursor:default}
.process-steps{flex:1;min-width:0;display:flex;flex-direction:column}
.process-step{border-top:2px solid #d9dfd8;padding:22px 0;transition:color .5s}
.process-step .step{font-size:10px;letter-spacing:.06em;margin-bottom:14px}
.process-step h3{font-size:18px;letter-spacing:-.3px;line-height:1.5;margin:0 0 10px}
.process-step p{font-size:13px;line-height:1.8;margin:0;color:#606c62}
.process-step.is-current .step,.process-step.is-current h3{color:#f78226}
@media(max-width:820px){
  .refine-process{flex-direction:column}
  .process-visual{flex:none;max-width:100%}
  .process-visual svg{flex:none;height:280px}
}
@media(max-width:620px){
  .process-visual svg{height:250px;padding-top:45px}
  .process-status{left:20px;top:20px;flex-direction:row;align-items:center;gap:12px}
  .process-status strong{font-size:26px}
  .process-visual figcaption{padding:12px 18px;font-size:9px}
  .process-step{padding:20px 0}
}
@media(prefers-reduced-motion:reduce){.process-step{transition:none}}