/* ===========================================================================
   ServicesCloud — page basics: text helpers, amber hotspot, term popovers,
   segmented switch, reveal-on-scroll, hero, overview band, reduced motion.
   Tokens (--navy, --blue, --muted…) come from home-prototype.css. Every class
   is sc- prefixed. Rule of the page: without JS (no html.js) everything is
   visible in its final state; scripts only add switches and one-shot motion.
   =========================================================================== */

/* Page type floor (design-qa-gate, 2026-10-05): nothing under 12px — Latin numbers and file names 12px,
   Japanese secondary labels 13px, notes 13–14px, body 16px — SVG text included, at the size it renders.
   Two text shades the site tokens lacked at ≥4.5:1 on light tints: */
:root { --sc-blue-text: #165F9C; --sc-amber-text: #8A6300; }

.sc-p, .sc-step__p { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.95; color: var(--muted); }
.sc-h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.55; color: var(--navy); }
.sc-nb { display: inline-block; }   /* keeps 「にはしません。」 on one line on phones */
.sc-sub { margin: 20px 0 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--navy); }
.sc-sub::before { content: ""; width: 24px; height: 2px; background: var(--blue); flex: none; }

/* amber hotspot = "this can be pressed" (same cue as the Solutions pages). Phong 2026-10-04: EVERY control
   that changes something in place carries one — figure stage buttons, service chips, cloud cards, cost
   buttons, and the '?' of hard words — and nothing that cannot be pressed is drawn as an amber dot.
   The dots appear only once a script has made the control work (no html.js, no dots). */
.sc-hot { position: relative; display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.sc-hot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; }
.is-in .sc-hot::after { animation: sc-ring 1.4s .3s 3 both; }   /* legend dot: pulses 3 times when its block scrolls into view */
.sc-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sc-fig__nav button::after, .sc-seg button::after, .sc-cloud::after, .sc-arch__wrap.is-live .sc-chip::after {
  content: ""; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--white); pointer-events: none;
}
/* the option you can switch TO invites a press: its dot pulses 3 times when the switch scrolls into view */
.sc-seg button::before, .sc-cloud::before {
  content: ""; position: absolute; top: -11px; right: -11px; width: 22px; height: 22px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--amber); opacity: 0; pointer-events: none;
}
.sc-cost.is-in .sc-seg button:not(.is-on)::before, .sc-arch__bar.is-in .sc-cloud:not(.is-on)::before { animation: sc-ring 1.4s .5s 3 both; }

@keyframes sc-ring { 0% { opacity: .85; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sc-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes sc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-write { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* --- hard words: inline note in brackets without JS, '?' popover with JS (svc-cloud-ui.js) --- */
.sc-term__btn { all: unset; font-weight: 700; color: var(--blue); }
.sc-term__q { display: none; }
.sc-term__pop { font-size: 13px; line-height: 1.8; color: var(--muted); font-weight: 400; }
.sc-term__pop::before { content: "（"; }
.sc-term__pop::after { content: "）"; }
.sc-terms-live .sc-term { position: relative; display: inline; }
/* 10px of vertical padding makes the inline word a ≥44px tap target without moving the line; the
   underline is a text-decoration so it stays under the word */
.sc-terms-live .sc-term__btn { cursor: pointer; padding: 10px 1px; text-decoration: underline dotted var(--blue); text-underline-offset: 5px; }
.sc-terms-live .sc-term__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
.sc-terms-live .sc-term__q { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 3px; border-radius: 50%; background: var(--amber); color: var(--navy); font-size: 12px; vertical-align: 1px; }   /* amber = pressable, like every other dot */
.sc-terms-live .sc-term__pop { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 6; width: min(300px, 78vw); padding: 12px 14px; border-radius: 8px; background: var(--navy); color: var(--white); box-shadow: 0 10px 30px rgba(16, 42, 67, .25); white-space: normal; animation: sc-rise .3s both; }
.sc-terms-live .sc-term__pop::before, .sc-terms-live .sc-term__pop::after { content: none; }
.sc-terms-live .sc-term.is-open .sc-term__pop { display: block; }

/* --- two-way switch (cost before/after): two separate pills, so each one carries its own dot and the
       option not chosen still looks like a button (in one shared pill it read as plain text) --- */
.sc-seg { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.sc-seg[hidden] { display: none; }
.sc-seg button { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); box-shadow: 0 2px 6px rgba(16, 42, 67, .08); font-size: 14px; font-weight: 700; color: var(--navy); transition: background-color .25s, color .25s, transform .25s, box-shadow .25s; }
.sc-seg button.is-on { border-color: var(--navy); background: var(--navy); color: var(--white); box-shadow: none; }
@media (hover: hover) { .sc-seg button:not(.is-on):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 42, 67, .14); } }
.sc-seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- reveal on scroll: home-motion.js puts html.js and toggles .is-in on [data-io] --- */
html.js .sc-prob li[data-io], html.js .sc-fig[data-io], html.js .sc-why__big > [data-io], html.js .sc-out__it[data-io],
html.js .sc-cost[data-io], html.js .sc-cert__it[data-io], html.js .sc-logos[data-io] {
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
html.js .sc-prob li.is-in, html.js .sc-fig.is-in, html.js .sc-why__big > .is-in, html.js .sc-out__it.is-in,
html.js .sc-cost.is-in, html.js .sc-cert__it.is-in, html.js .sc-logos.is-in { opacity: 1; transform: none; }
html.js .sc-prob li:nth-child(2), html.js .sc-cert__it:nth-child(2), html.js .sc-why__big > :nth-child(2), html.js .sc-out__it:nth-child(2) { transition-delay: .08s; }
html.js .sc-prob li:nth-child(3), html.js .sc-cert__it:nth-child(3), html.js .sc-out__it:nth-child(3) { transition-delay: .16s; }
html.js .sc-prob li:nth-child(4), html.js .sc-out__it:nth-child(4) { transition-delay: .24s; }

/* --- hero: navy, text left, the finished platform right --- */
.sc-hero { color: var(--white); background-color: var(--navy-deep); background-image: linear-gradient(rgba(143, 201, 245, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 201, 245, .06) 1px, transparent 1px); background-size: 28px 28px; overflow: hidden; }
.sc-hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px clamp(40px, 4.4vw, 68px); padding-top: 56px; padding-bottom: 64px; }
.sc-hero__txt { flex: 9 1 400px; min-width: 0; }
.sc-hero__h1 { margin: 0 0 24px; font-size: clamp(34px, 4.2vw, 52px); font-weight: 900; line-height: 1.28; letter-spacing: .01em; color: var(--white); }
.sc-hero__lead { margin: 0; max-width: 34em; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.95; color: var(--on-dark-muted); }
.sc-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.sc-hero__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
@media (hover: hover) { .sc-hero__more:hover { border-color: var(--white); } }
.sc-hero__fig { flex: 12 1 540px; min-width: 0; margin: 0 0 -24px; }
.sc-hero__fig svg { display: block; width: 100%; height: auto; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; }
.sc-rise { animation: sc-rise .55s var(--ease-out) both; }
.sc-d1 { animation-delay: .08s; } .sc-d2 { animation-delay: .18s; } .sc-d3 { animation-delay: .28s; }

/* --- overview band: the service's key visual at its own size (~446px source, shown at 200px) --- */
.sc-kv { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; padding-top: 48px; padding-bottom: 64px; }
.sc-kv__img { display: block; flex: none; width: 200px; height: auto; }
.sc-kv__txt { flex: 1 1 420px; min-width: 0; }
.sc-kv__lead { margin: 0 0 20px; max-width: 40em; color: var(--ink); }
.sc-kv__jump { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.sc-kv__jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: 1px solid #C6D3E0; }
.sc-kv__jump b { font-size: 12px; letter-spacing: .14em; color: var(--blue); }
@media (hover: hover) { .sc-kv__jump a:hover { border-color: var(--blue); } }

/* --- reduced motion: everything stands still in its final state --- */
@media (prefers-reduced-motion: reduce) {
  .sc-hero *, .sc-story *, .sc-steps *, .sc-arch *, .sc-why *, .sc-out *, .sc-ai *, .sc-cert *, .sc-tech *, .sc-band, .sc-band * {
    animation: none !important; transition: none !important;
  }
  /* "*" does not reach pseudo-elements: stop the hotspot rings explicitly */
  .sc-hot::after, .sc-seg button::before, .sc-cloud::before { animation: none !important; }
}