/* ===========================================================================
   ServicesCloud — こんな課題 (text left, isometric figure right with stage buttons)
   and 提供内容 (one row per step: text left, deliverable card right).
   The figure states s0..s4 (課題 → 01 → 02 → 03 → 04) are pure CSS classes on
   the <svg>, generated with the canvas board E (morph rules at the bottom).
   =========================================================================== */

.sc-story { --pt: clamp(56px, 6.6vw, 96px); --pb: clamp(32px, 3.3vw, 48px); }
.sc-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sc-prob { margin: 32px 0 0; padding: 0; list-style: none; }
.sc-prob li { padding: 20px 0; border-top: 1px solid var(--line-strong); }
.sc-prob li:last-child { border-bottom: 1px solid var(--line-strong); }
.sc-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 */
.sc-prob h3::before { content: ""; flex: none; width: 12px; height: 2px; border-radius: 1px; background: var(--blue); }
.sc-prob p { margin: 0 0 0 22px; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.9; color: var(--muted); }

.sc-fig { margin: 0; }
.sc-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); }
.sc-fig__cap .sc-legend[hidden] { display: none; }
.sc-fig__stage { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 1px 0 var(--line-strong); }
.sc-fig__stage svg { display: block; width: 100%; height: auto; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; }
.sc-fig__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sc-fig__nav[hidden] { display: none; }
/* each stage button carries the amber dot (svc-cloud-base.css) and looks raised until chosen */
.sc-fig__nav button { 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 14px; 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; }
.sc-fig__nav button.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: none; }
@media (hover: hover) { .sc-fig__nav button:not(.is-on):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 42, 67, .14); } }
.sc-fig__nav button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sc-fig__note { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
/* what the current stage 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
   stage changes; svc-cloud-story.js moves .is-on. Without JS the 課題 line stays, like the figure. */
.sc-fig__say { display: grid; margin: 0 0 14px; }
.sc-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); }
.sc-fig__say p:not(.is-on) { visibility: hidden; }
/* phones: the figure's own labels would render at ~7px, so they are hidden below 640px; the line above says it */
@media (max-width: 639px) {
  .sc-fig .mo :is(.m-p0, .m-p1, .m-p2, .m-p3, .m-p4, .m-labels), .sc-hero__fig .mo .m-labels { display: none; }
}

/* 提供内容: continues the tint of the section above, no divider between them */
.sc-steps { --pt: clamp(56px, 6.6vw, 96px); --pb: clamp(72px, 7.8vw, 112px); border-top: 0; }
.sc-steps__hd { max-width: 640px; }
.sc-steps__hd .lead { margin: 16px 0 0; }
.sc-steps__note { margin: 6px 0 0 34px; font-size: 13px; line-height: 1.8; color: var(--muted); }   /* under .sc-sub's text, past its dash */
.sc-steplist { margin: 24px 0 0; padding: 0; list-style: none; }
.sc-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); }
.sc-step:last-child { border-bottom: 1px solid var(--line-strong); }
.sc-step__t { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; font-size: 20px; line-height: 1.55; }
.sc-step__n { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--blue); transition: color .3s; }
.sc-step__name { font-weight: 700; color: var(--navy); transition: color .3s; }
.sc-step__do { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; padding: 0; list-style: none; }
.sc-step__do li { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--navy); }
/* with JS: the row at mid-screen is "on", the others step back a little */
.sc-steps-live .sc-step:not(.is-on) .sc-step__n, .sc-steps-live .sc-step:not(.is-on) .sc-step__name { color: var(--muted); }   /* steps back, still ≥4.5:1 */

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

/* the hero shows the finished platform only (no mock card, no background panel) */
.is-hero .m-p4, .is-hero .m-bg, .is-hero .m-grid { display: none; }

/* hero intro (Phong 2026-10-04: give the hero the effect of the 課題 figure). Plays once per page load,
   the 課題 → 04 story compressed to ~2 s: the scattered servers fly into one platform, layers 01→04 drop in
   from the bottom up with their labels, the AWS / Google Cloud cube lands, then the slow beams start.
   Pure CSS with fill-mode both, so the first paint is already the opening frame (no flash before the
   script loads); keyframes without a 100% step end on the element's own s4 values, i.e. the finished
   picture. svc-cloud-story.js holds the intro (.is-wait) until 35% of the figure is on screen, e.g. below
   the text on phones; the beams also pause whenever the hero is off screen. Reduced motion:
   svc-cloud-base.css switches every animation in .sc-hero off = finished picture. */
.sc-hero__fig .m-srv { animation: sc-h-srv 1s .15s cubic-bezier(.65, 0, .35, 1) both; }
.sc-hero__fig .m-srv1 { animation-delay: .2s; } .sc-hero__fig .m-srv2 { animation-delay: .25s; }
.sc-hero__fig .m-srv3 { animation-delay: .3s; } .sc-hero__fig .m-srv4 { animation-delay: .35s; }
.sc-hero__fig .m-wires, .sc-hero__fig .m-xs { animation: sc-h-wire .8s both; }
.sc-hero__fig .m-plate { animation: sc-h-fade .5s .35s both; }
.sc-hero__fig .m-ly { animation: sc-h-drop .65s cubic-bezier(.22, .61, .36, 1) both; }
.sc-hero__fig .m-ly0 { animation-delay: .55s; } .sc-hero__fig .m-ly1 { animation-delay: .75s; }
.sc-hero__fig .m-ly2 { animation-delay: .95s; } .sc-hero__fig .m-ly3 { animation-delay: 1.15s; }
.sc-hero__fig .m-labels { animation: sc-h-fade .45s both; }
.sc-hero__fig .m-lb0 { animation-delay: .8s; } .sc-hero__fig .m-lb1 { animation-delay: 1s; }
.sc-hero__fig .m-lb2 { animation-delay: 1.2s; } .sc-hero__fig .m-lb3 { animation-delay: 1.4s; }
.sc-hero__fig .m-cube { animation: sc-h-cube .75s 1.4s cubic-bezier(.34, 1.56, .64, 1) both; }
/* the beams wait for the cube (base rules: .mo.s4 .m-vb loops with delays 0 / 1.1 / 2.2 s) */
.sc-hero__fig .mo.s4 .m-vb0 { animation-delay: 2.2s; } .sc-hero__fig .mo.s4 .m-vb1 { animation-delay: 3.3s; }
.sc-hero__fig .mo.s4 .m-vb2 { animation-delay: 4.4s; }
/* ".mo" keeps this above the generated ".mo.s4 .m-vb { animation: … }" further down, whose shorthand would
   otherwise set the beams running during the wait */
.sc-hero__fig.is-wait .mo :is(.m-srv, .m-wires, .m-xs, .m-plate, .m-ly, .m-labels, .m-cube, .m-vb),
html.js .sc-hero__fig:not(.is-in) .m-vb { animation-play-state: paused; }
@keyframes sc-h-srv { 0% { transform: none; opacity: 1; } 75% { opacity: 1; } }
@keyframes sc-h-wire { 0%, 30% { opacity: .55; } }
@keyframes sc-h-fade { 0% { opacity: 0; } }
@keyframes sc-h-drop { 0% { opacity: 0; transform: translateY(-34px); } }
@keyframes sc-h-cube { 0% { opacity: 0; transform: translateY(-44px); } 55% { opacity: 1; } }

/* --- figure states (generated: morph_state.css + morph.css of board E) --- */
.mo .m-bg{fill:#EEF2F6;transition:fill .8s}
.mo.s2 .m-bg{fill:#E6F0FA}
.mo.s3 .m-bg,.mo.s4 .m-bg{fill:#0B2036}
.mo .m-grid{opacity:0;transition:opacity .8s}
.mo.s2 .m-grid,.mo.s3 .m-grid,.mo.s4 .m-grid{opacity:1}
.mo .m-dots{transition:opacity .6s}
.mo.s2 .m-dots,.mo.s3 .m-dots,.mo.s4 .m-dots{opacity:0}
.mo .m-wires,.mo .m-xs{transition:opacity .6s}
.mo.s2 .m-wires,.mo.s2 .m-xs{opacity:.16}
.mo.s3 .m-wires,.mo.s4 .m-wires,.mo.s3 .m-xs,.mo.s4 .m-xs{opacity:0}
.mo .m-srv{transition:transform 1s cubic-bezier(.65,0,.35,1),opacity .8s;transform-box:fill-box;transform-origin:center}
.mo.s2 .m-srv{opacity:.22}
.mo.s3 .m-srv,.mo.s4 .m-srv{opacity:0}
.mo .m-p0,.mo .m-p1,.mo .m-p2,.mo .m-p3,.mo .m-p4{opacity:0;transition:opacity .45s}
.mo.s0 .m-p0,.mo.s1 .m-p1,.mo.s2 .m-p2,.mo.s3 .m-p3,.mo.s4 .m-p4{opacity:1;transition-delay:.35s}
.mo .m-plate{opacity:0;transition:opacity .6s}
.mo.s2 .m-plate{opacity:.4}
.mo.s3 .m-plate,.mo.s4 .m-plate{opacity:1}
.mo .m-bp{opacity:0;transition:opacity .6s}
.mo.s2 .m-bp{opacity:1}
.mo .m-ly{opacity:0;transform:translateY(-34px);transition:opacity .5s,transform .8s cubic-bezier(.22,.61,.36,1)}
.mo.s3 .m-ly,.mo.s4 .m-ly{opacity:1;transform:none}
.mo.s3 .m-ly0{transition-delay:.5s}.mo.s3 .m-ly1{transition-delay:.65s}.mo.s3 .m-ly2{transition-delay:.8s}.mo.s3 .m-ly3{transition-delay:.95s}
.mo .m-labels{opacity:0;transition:opacity .5s}
.mo.s2 .m-labels,.mo.s3 .m-labels,.mo.s4 .m-labels{opacity:1}
.mo .m-lbl{fill:#102A43;transition:fill .6s}.mo .m-num{fill:#165F9C;transition:fill .6s}.mo .m-lead{stroke:#1B6FB3;transition:stroke .6s}
.mo.s3 .m-lbl,.mo.s4 .m-lbl{fill:#FFFFFF}.mo.s3 .m-num,.mo.s4 .m-num{fill:#8FC9F5}.mo.s3 .m-lead,.mo.s4 .m-lead{stroke:#8FC9F5}
.mo .m-cube{opacity:0;transform:translateY(-26px);transition:opacity .6s 1.15s,transform .8s 1.15s cubic-bezier(.22,.61,.36,1)}
.mo.s3 .m-cube,.mo.s4 .m-cube{opacity:1;transform:none}
.mo .m-vb{opacity:0}
.mo.s4 .m-vb{animation:mvb 3.2s cubic-bezier(.4,0,.2,1) infinite both}
.mo.s4 .m-vb1{animation-delay:1.1s}.mo.s4 .m-vb2{animation-delay:2.2s}
@keyframes mvb{0%{transform:translateY(480px);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translateY(170px);opacity:0}}
.mo .m-cost{transform-box:fill-box;transform-origin:left center;transition:transform 1s .5s}
.mo.s4 .m-cost{transform:scaleX(.33)}

.mo.s3 .m-srv0,.mo.s4 .m-srv0{transform:translate(180px,212px) scale(.2)}
.mo.s3 .m-srv1,.mo.s4 .m-srv1{transform:translate(0px,292px) scale(.2)}
.mo.s3 .m-srv2,.mo.s4 .m-srv2{transform:translate(-182px,198px) scale(.2)}
.mo.s3 .m-srv3,.mo.s4 .m-srv3{transform:translate(130px,20px) scale(.2)}
.mo.s3 .m-srv4,.mo.s4 .m-srv4{transform:translate(-140px,8px) scale(.2)}