/* トップ専用。背景は白、線はインクブルー。映像を文字で覆わない構成。 */
.process-player{min-width:0;background:#fff;border:1px solid #dce3e9;border-radius:16px;overflow:hidden;box-shadow:0 12px 35px #2533450b}
.process-stage{position:relative;min-width:0}
.process-visual{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff}
.process-visual>img,.process-visual>video{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.process-visual>video{opacity:0;transition:opacity .3s}
.process-visual>video.ready{opacity:1}
.process-caption{padding:24px 28px;min-height:190px;background:#fff;border-top:1px solid #edf1f4}
.process-kicker{font-size:14.78px;font-weight:700;color:#285e78;letter-spacing:.05em}
.process-caption h2{font-size:clamp(21.11px,2.11vw,28.5px);line-height:1.6;margin:10px 0}
.process-caption p{font-size:16.89px;line-height:1.8;margin:0;color:#606c78}
.process-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid #dce3e9;background:#f5f7f9}
.process-controls[hidden],.process-slide[hidden],.draw-intro[hidden]{display:none}
.process-controls button{min-width:40px;min-height:44px;border:1px solid #c5d3dd;background:#fff;color:#253345;border-radius:6px;cursor:pointer;font-size:15.83px}
.process-controls button:hover,.process-controls button[aria-pressed=true]{background:#285e78;color:white;border-color:#285e78}
.process-dots{display:flex;gap:5px;flex:1}
.process-pause{padding:0 12px}.process-controls button:focus-visible{outline:3px solid #ad421f;outline-offset:2px}
.process-note{position:absolute;bottom:12px;left:14px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 28px)}
.process-note span{font-size:14.78px;padding:5px 10px;background:#ffffffed;color:#285e78;border:1px solid #c5d3dd;border-radius:5px}
.process-note span:before{content:'✓';margin-right:6px}
.process-slide.is-active .process-note span{animation:note-in .65s both;animation-delay:1.1s}
.process-slide.is-active .process-note span+span{animation-delay:2.3s}
.process-slide.is-active .process-caption{animation:note-in .6s both}
@keyframes note-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.draw-intro{position:absolute;inset:0;z-index:3;background:#fff;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.draw-intro svg{width:100%;height:auto}.draw-intro p{padding:0 24px;text-align:center;font-size:19.0px;font-weight:700;color:#285e78}
.draw-line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw-site 1.3s ease forwards}.draw-line:nth-child(n+2){animation-delay:.3s}.draw-line:nth-child(n+4){animation-delay:.65s}.draw-fill{opacity:0;animation:color-site .6s 1.7s forwards}
@keyframes draw-site{to{stroke-dashoffset:0}}@keyframes color-site{to{opacity:1}}
.process-player.is-paused *{animation-play-state:paused!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.process-caption{padding:20px;min-height:210px}.process-controls{padding:10px;gap:5px}.process-controls button{min-width:32px}.process-dots{gap:3px}.process-pause{flex-basis:100%;margin-top:4px}.process-note{bottom:8px;left:8px;gap:4px}.process-note span{font-size:12.67px;padding:3px 6px}}
@media(prefers-reduced-motion:reduce){.process-player *{animation:none!important;transition:none!important}.process-visual video{display:none}.draw-intro{display:none}.process-note{display:none}}

/* 文字拡大後も内容に応じて高さを確保。 */
.process-caption{min-height:205px}
@media(max-width:600px){.process-caption{min-height:225px}}