/* ===========================================================================
   ServicesModernization — signature figure 「街を建て替える」 (direction A, chosen by Phong 2026-10-13).
   One picture, five states as classes on the <svg class="md-a sN">:
     s0 課題   one fused block, no borders or roads      s1 現状分析  measured: where each part sits
     s2 再設計  four parcels + gateway + shared data      s3 段階的刷新  parcels rebuilt one by one (3 is being built)
     s4 定着・改善  all four new, still 稼働中, tech signboard, slow beams
   The hero uses the same drawing (.is-hero): it plays s0 → s4 once, ~2 s, and stops on s4. The 課題 figure is
   moved from state to state by svc-modernization-story.js (autoplay + buttons); every state is a plain CSS rule,
   so no JS / reduced motion shows the finished or the 課題 picture. Transform / opacity only.
   Flat plan view on purpose: not the isometric scene of ServicesCloud.
   =========================================================================== */
.md-a{font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif}
.md-a .md-a-bg{fill:#EEF2F6;transition:fill .8s}
.md-a.md-s2 .md-a-bg{fill:#E6F0FA}
.md-a.md-s3 .md-a-bg,.md-a.md-s4 .md-a-bg{fill:#0B2036}
.md-a .md-a-gridline{stroke:rgba(143,201,245,.12);transition:stroke .8s}
.md-a.md-s2 .md-a-gridline{stroke:rgba(27,111,179,.14)}
.md-a .md-a-grid{opacity:0;transition:opacity .8s}
.md-a.md-s2 .md-a-grid,.md-a.md-s3 .md-a-grid,.md-a.md-s4 .md-a-grid{opacity:1}
.md-a .md-a-old,.md-a .md-a-tangle{transition:opacity .7s}
.md-a.md-s1 .md-a-tangle{opacity:.18}
.md-a.md-s2 .md-a-tangle{opacity:.1}
.md-a.md-s2 .md-a-old{opacity:.28}
.md-a.md-s3 .md-a-old,.md-a.md-s4 .md-a-old{opacity:0}
.md-a .md-a-cap0,.md-a .md-a-oldlbl{transition:opacity .4s}
.md-a.md-s2 .md-a-oldlbl{opacity:0}
.md-a.md-s1 .md-a-cap0,.md-a.md-s2 .md-a-cap0,.md-a.md-s3 .md-a-cap0,.md-a.md-s4 .md-a-cap0{opacity:0}
.md-a .md-a-survey,.md-a .md-a-plan,.md-a .md-a-infra,.md-a .md-a-sign{opacity:0;transition:opacity .6s}
.md-a.md-s1 .md-a-survey,.md-a.md-s2 .md-a-plan,.md-a.md-s3 .md-a-infra,.md-a.md-s4 .md-a-infra,.md-a.md-s4 .md-a-sign{opacity:1}
.md-a.md-s3 .md-a-infra{transition-delay:.1s}
.md-a .md-a-new,.md-a .md-a-wip3,.md-a .md-a-old4{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .5s,transform .6s cubic-bezier(.22,.61,.36,1)}
.md-a .md-a-new{transform:scale(.94)}
.md-a.md-s3 .md-a-new1,.md-a.md-s3 .md-a-new2,.md-a.md-s4 .md-a-new{opacity:1;transform:none}
.md-a.md-s3 .md-a-new1{transition-delay:.2s}.md-a.md-s3 .md-a-new2{transition-delay:.4s}
.md-a.md-s3 .md-a-wip3{opacity:1;transition-delay:.6s}
.md-a.md-s3 .md-a-old4{opacity:1;transition-delay:.4s}
.md-a .md-a-bm{opacity:0}
.md-a.md-s4 .md-a-bm{animation:md-a-bm 3.6s cubic-bezier(.4,0,.2,1) infinite both}
.md-a.md-s4 .md-a-bm1{animation-delay:1.2s}.md-a.md-s4 .md-a-bm2{animation-delay:2.4s}
@keyframes md-a-bm{0%{transform:translateX(0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translateX(456px);opacity:0}}
.md-a .md-a-chip{transform-box:fill-box;transform-origin:center}
/* hero: the same picture plays once, s0 -> s4 (~2 s), and stops on the finished picture */
.md-a.is-hero .md-a-bg,.md-a.is-hero .md-a-grid{display:none}
.md-a.is-hero .md-a-old{animation:md-a-h-old 1.1s .1s both}
.md-a.is-hero .md-a-new{animation:md-a-h-pop .5s cubic-bezier(.34,1.3,.64,1) both}
.md-a.is-hero .md-a-new1{animation-delay:.5s}.md-a.is-hero .md-a-new2{animation-delay:.75s}
.md-a.is-hero .md-a-new3{animation-delay:1s}.md-a.is-hero .md-a-new4{animation-delay:1.25s}
.md-a.is-hero .md-a-infra{animation:md-a-h-fade .6s 1.3s both}
.md-a.is-hero .md-a-sign{animation:md-a-h-fade .6s 1.6s both}
.md-a.is-hero .md-a-chip{animation:md-a-h-pop .4s both;animation-delay:calc(1.7s + var(--i) * .1s)}
.md-a.is-hero.md-s4 .md-a-bm{animation-duration:2.2s;animation-iteration-count:1;animation-delay:2.2s}
.md-a.is-hero.md-s4 .md-a-bm1{animation-delay:2.4s}.md-a.is-hero.md-s4 .md-a-bm2{animation-delay:2.6s}   /* longhands on purpose: the last beam ends at 4.8 s and the .is-wait hold still applies */
@keyframes md-a-h-old{0%,30%{opacity:1}100%{opacity:0}}
@keyframes md-a-h-pop{0%{opacity:0;transform:scale(.9)}}
@keyframes md-a-h-fade{0%{opacity:0}}
@media (max-width:639px){.md-a .md-a-lbl{display:none}}

/* beams (state 4) only run while the figure is on screen */
html.js .md-hero__fig:not(.is-in) .md-a-bm, html.js .md-fig:not(.is-in) .md-a-bm { animation-play-state: paused; }
/* the hero intro waits (.is-wait, svc-modernization-story.js) until 35% of the figure is visible */
.md-hero__fig.is-wait .md-a * { animation-play-state: paused; }
/* a stopped film (a step was pressed) and a frozen one (.is-held) hold the beams too */
.md-fig:not(.is-live) .md-a-bm { animation-play-state: paused; }
.md-fig.is-held .md-a * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .md-a *, .md-hero__fig .md-a * { animation: none !important; transition: none !important; } .md-a .md-a-bm { display: none; } }