/* ===========================================================================
   ServicesModernization — こんな課題 (text left, the 「街」 figure right) and 進め方
   (one row per step: text left, 成果物プレビュー card right).
   The figure is a small film: its five states (課題 → 01 → 04) follow each other by themselves, one
   progress line per step, and the step buttons take over (svc-modernization-story.js, same behaviour as the
   hero films of the Solutions pages: a press stops the autoplay, 再生 starts it again, it freezes while
   off screen or in a hidden tab). The states themselves are CSS classes on the <svg> (svc-modernization-fig.css).
   =========================================================================== */

.md-story { --pt: clamp(56px, 6.6vw, 96px); --pb: clamp(32px, 3.3vw, 48px); }
.md-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.md-prob { margin: 32px 0 0; padding: 0; list-style: none; }
.md-prob li { padding: 20px 0; border-top: 1px solid var(--line-strong); }
.md-prob li:last-child { border-bottom: 1px solid var(--line-strong); }
.md-prob h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--navy); }
/* a short blue dash, not a dot: amber dots on this page mean "press here" and these rows are plain text */
.md-prob h3::before { content: ""; flex: none; width: 12px; height: 2px; border-radius: 1px; background: var(--blue); }
.md-prob p { margin: 0 0 0 22px; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.9; color: var(--muted); }

.md-fig { margin: 0; }
.md-fig__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--navy); }
.md-fig__cap .md-legend[hidden] { display: none; }
/* what the current step shows, in everyday words, ABOVE the figure (explain-screens-for-non-tech-end-users):
   all five lines share one grid cell, so the tallest sets the height and the figure never moves when the
   step changes; svc-modernization-story.js moves .is-on. Without JS the 課題 line stays, like the figure. */
.md-fig__say { display: grid; margin: 0 0 14px; }
.md-fig__say p { grid-area: 1 / 1; align-self: start; margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.8; color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-soft), visibility 0s linear .3s; }
.md-fig__say p.is-on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-soft) .1s, visibility 0s; }
.md-fig__stage { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 1px 0 var(--line-strong); }
.md-fig__stage svg { display: block; width: 100%; height: auto; }
.md-fig__words { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.md-fig__words > span:first-child { font-weight: 700; }

/* step buttons + play / pause: one row; each control carries the amber dot (svc-modernization-base.css) */
.md-fig__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.md-fig__bar[hidden] { display: none; }
.md-go { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); box-shadow: 0 2px 6px rgba(16, 42, 67, .08); font-size: 13px; font-weight: 700; color: var(--navy); transition: background-color .25s, color .25s, transform .25s, box-shadow .25s; }
.md-go.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .md-go:not(.is-on):hover, .md-play:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 42, 67, .14); } }
.md-go:focus-visible, .md-play:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* progress line of the step that is playing: it grows over the step's time, and the figure moves on when it ends */
.md-prog { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--blue-pale); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.md-fig.is-live[data-at="0"] [data-md-go="0"] .md-prog, .md-fig.is-live[data-at="1"] [data-md-go="1"] .md-prog,
.md-fig.is-live[data-at="2"] [data-md-go="2"] .md-prog, .md-fig.is-live[data-at="3"] [data-md-go="3"] .md-prog,
.md-fig.is-live[data-at="4"] [data-md-go="4"] .md-prog { animation: md-prog var(--dur) linear both; }
/* time per step: 3.5s across all steps; visitors who want to read the line can pause or press a step */
[data-md-go="0"] { --dur: 3.5s; } [data-md-go="1"] { --dur: 3.5s; } [data-md-go="2"] { --dur: 3.5s; }
[data-md-go="3"] { --dur: 3.5s; } [data-md-go="4"] { --dur: 3.5s; }
@keyframes md-prog { from { transform: scaleX(0); } to { transform: none; } }
/* 一時停止 / 再生 is a player control, not a 6th step: navy outline, an icon, set apart by a little more room */
.md-play { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 8px; padding: 0 16px; border: 1px solid var(--navy); border-radius: 999px; background: var(--white); box-shadow: 0 2px 6px rgba(16, 42, 67, .08); font-size: 13px; font-weight: 700; color: var(--navy); transition: transform .25s, box-shadow .25s; }
.md-play[hidden] { display: none; }
.md-play__ico { box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.md-play[data-state="paused"] .md-play__ico { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.md-play__tx { display: grid; }
.md-play__tx > span { grid-area: 1 / 1; }
.md-play[data-state="playing"] [data-l="play"], .md-play[data-state="paused"] [data-l="pause"] { visibility: hidden; }
/* the freeze: off screen, hidden tab or 一時停止 pauses every animation in the film, the progress line included */
.md-fig.is-held, .md-fig.is-held *, .md-fig.is-held *::before, .md-fig.is-held *::after { animation-play-state: paused !important; }

/* phones: the figure's own labels would render at ~7px, so they are hidden below 640px (svc-modernization-fig.css);
   the line above the figure says what the picture shows */
@media (max-width: 639px) { .md-play { margin-left: 0; } }
/* 一時停止 / 再生 shows its words where there is room (640–1180px, one column); in the two-column layout the figure
   column is ~550px and on phones the row is narrow, so only the icon stays (the button keeps its name for screen readers) */
@media (min-width: 1181px), (max-width: 639px) {
  .md-play { width: 44px; padding: 0; justify-content: center; }
  .md-play__tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 進め方: continues the tint of the section above, no divider between them */
.md-steps { --pt: clamp(56px, 6.6vw, 96px); --pb: clamp(72px, 7.8vw, 112px); border-top: 0; }
.md-steps__hd { max-width: 640px; }
.md-steps__hd .md-p { margin-top: 16px; }
.md-steps__note { margin: 6px 0 0 34px; font-size: 13px; line-height: 1.8; color: var(--muted); }   /* under .md-sub's text, past its dash */
.md-steplist { margin: 24px 0 0; padding: 0; list-style: none; }
.md-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: start; padding: 32px 0; border-top: 1px solid var(--line-strong); }
.md-step:last-child { border-bottom: 1px solid var(--line-strong); }
.md-step__t { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; font-size: 20px; line-height: 1.55; }
.md-step__n { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--md-blue-text); transition: color .3s; }
.md-step__name { font-weight: 700; color: var(--navy); transition: color .3s; }
.md-step__do { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.md-step__do li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--navy); }
.md-step__do svg { flex: none; }
/* with JS: the row at mid-screen is "on", the others step back a little */
.md-steps-live .md-step:not(.is-on) .md-step__n, .md-steps-live .md-step:not(.is-on) .md-step__name { color: var(--muted); }   /* steps back, still ≥4.5:1 */

/* below 1180px the figure column got too narrow for its labels, so the figure takes its own row under the list,
   capped at 640px; on phones it moves above the list */
@media (max-width: 1180px) {
  .md-story__grid { grid-template-columns: 1fr; }
  .md-fig { width: 100%; max-width: 640px; }
  .md-prob { max-width: 720px; }
}
@media (max-width: 900px) {
  .md-fig { order: -1; }
  .md-step { grid-template-columns: 1fr; }
}

/* ---- 成果物プレビュー cards. The final state is the default. With JS (html.md-steps-live) a card body waits hidden
   until its row comes into view, then plays its short story once (.is-played): ticks pop, bars grow. ---- */
.md-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); }
.md-card__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #F9FBFD; }
.md-card__k { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.md-card__v { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--navy); }
.md-card__bd { padding: 18px 18px 16px; }
.md-card__end { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; }
.md-ck { display: inline-flex; align-items: center; justify-content: center; justify-self: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); }
.md-ck svg { width: 14px; height: 14px; }
/* 01 現状分析と課題整理: what each part holds, in the order to start */
.md-t1__r { display: grid; grid-template-columns: minmax(0, 1fr) 56px 76px 56px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #EEF2F6; font-size: 13px; color: var(--ink); }
.md-t1__h { font-size: 13px; font-weight: 700; color: var(--muted); }
.md-t1__h span:not(:first-child) { text-align: center; }
.md-t1__o { justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; }
.md-t1__r:nth-child(2) { --d: .2s; } .md-t1__r:nth-child(3) { --d: .35s; } .md-t1__r:nth-child(4) { --d: .5s; } .md-t1__r:nth-child(5) { --d: .65s; }
/* 02 新アーキテクチャ設計: gateway, four services, shared data + the three decisions */
.md-t2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.md-t2__d { display: flex; flex-direction: column; gap: 6px; }
.md-t2__bar { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; color: var(--white); background: var(--blue); }
.md-t2__bar--data { background: var(--navy-mid); }
.md-t2__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.md-t2__row span { white-space: nowrap; padding: 12px 4px; border-radius: 8px; background: #E6F0FA; font-size: 13px; font-weight: 700; color: var(--navy); text-align: center; }
.md-t2__row span:nth-child(1) { --d: .2s; } .md-t2__row span:nth-child(2) { --d: .3s; } .md-t2__row span:nth-child(3) { --d: .4s; } .md-t2__row span:nth-child(4) { --d: .5s; }
.md-t2__ck { display: flex; flex-direction: column; gap: 10px; font-size: 13px; font-weight: 700; color: var(--navy); }
.md-t2__ck div { display: flex; align-items: center; gap: 8px; }
/* 03 刷新ロードマップ: old → parallel run → new, part by part */
.md-t3__r { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; font-weight: 700; color: var(--navy); }
.md-t3__tr { position: relative; display: flex; height: 14px; overflow: hidden; border-radius: 7px; background: #EEF2F6; }
.md-t3__tr i { display: block; height: 100%; width: var(--w); transform-origin: left; }
.md-t3__lg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.md-t3__lg b { display: inline-block; width: 14px; height: 8px; margin-right: 6px; border-radius: 4px; vertical-align: 1px; }
.md-t3__old { background: #B5C0CB; } .md-t3__ov { background: repeating-linear-gradient(135deg, #B5C0CB 0 4px, #8FC9F5 4px 8px); } .md-t3__new { background: var(--blue); }
/* 04 移行後の運用設計: what keeps running after hand-over */
.md-t4__r { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF2F6; font-size: 14px; font-weight: 700; color: var(--navy); }
.md-t4__r em { flex: none; white-space: nowrap; margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #E9F5EF; color: #1F6B4A; font-size: 13px; font-style: normal; font-weight: 700; }
.md-t4__r:nth-child(1) { --d: .2s; } .md-t4__r:nth-child(2) { --d: .35s; } .md-t4__r:nth-child(3) { --d: .5s; }
@media (max-width: 640px), (min-width: 901px) and (max-width: 1199px) { .md-t2 { grid-template-columns: 1fr; } }   /* cells stay ≥ 60px wide */

/* --- one-shot stories --- */
.md-steps-live .md-step:not(.is-played) .md-card__bd { opacity: 0; }
.md-step.is-played .md-card__bd { animation: md-rise .45s both; }
.md-step.is-played .md-t1__r .md-ck { animation: md-pop .35s both; animation-delay: var(--d); }
.md-step.is-played .md-t1__r .md-ck + .md-ck { animation-delay: calc(var(--d) + .08s); }
.md-step.is-played .md-card__end { animation: md-pop .4s both; animation-delay: var(--d, .9s); }
.md-step.is-played .md-t2__row span { animation: md-rise .4s both; animation-delay: var(--d); }
.md-step.is-played .md-t3__tr i { animation: md-grow .6s cubic-bezier(.4, 0, .2, 1) both; animation-delay: var(--d); }
.md-step.is-played .md-t4__r { animation: md-write .35s both; animation-delay: var(--d); }
@media (prefers-reduced-motion: reduce) { .md-steps-live .md-step:not(.is-played) .md-card__bd { opacity: 1; } }