/* ===========================================================================
   ServicesModernization — page basics: text helpers, amber hotspot, term
   popovers, two-way switch, reveal-on-scroll, hero, overview band, reduced motion.
   Tokens (--navy, --blue, --muted…) come from home-prototype.css. Every class is
   md- prefixed. Rule of the page: without JS (no html.js) everything is visible
   in its final state; scripts only add switches and one-shot / looping 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.
   One text shade the site tokens lack at ≥4.5:1 on the pale tints: */
:root { --md-blue-text: #165F9C; }

.md-p { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.95; color: var(--muted); text-wrap: pretty; }
.md-p + .md-p { margin-top: 16px; }
.md-h2 { margin-bottom: 16px; }
.md-h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.55; color: var(--navy); }
.md-note { margin: 12px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.8; color: var(--muted); }
.md-nb { display: inline-block; }   /* keeps a phrase on one line, e.g. the two halves of the hero title */
.md-nw { white-space: nowrap; }   /* a hard word + its particle stay together (「?」 never starts a line alone); the note inside wraps again */
.md-sub { margin: 20px 0 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--navy); }
.md-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 — the figure's step buttons and play / pause, the 現行 / 刷新後 switch,
   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). */
.md-hot { position: relative; display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.md-hot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; }
.is-in .md-hot::after { animation: md-ring 1.4s .3s 3 both; }   /* legend dot: pulses 3 times when its block scrolls into view */
.md-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.md-go::after, .md-play::after, .md-seg button::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 */
.md-seg button::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;
}
.md-ba.is-in .md-seg button:not(.is-on)::before { animation: md-ring 1.4s .5s 3 both; }

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

/* --- hard words: inline note in brackets without JS, '?' popover with JS (svc-modernization-ui.js) --- */
.md-term__btn { all: unset; font-weight: 700; color: var(--blue); }
.md-term__q { display: none; }
.md-term__pop { font-size: 13px; line-height: 1.8; color: var(--muted); font-weight: 400; letter-spacing: normal; white-space: normal; }
.md-term__pop::before { content: "（"; }
.md-term__pop::after { content: "）"; }
.md-terms-live .md-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 */
.md-terms-live .md-term__btn { cursor: pointer; padding: 10px 1px; margin: -10px 0; text-decoration: underline dotted var(--blue); text-underline-offset: 5px; scroll-margin-top: 92px; }
/* the padding makes the word a >=44px tap target; the equal negative margin keeps the line as tall as plain text (13px words: 13px) */
.md-terms-live .md-fig__words .md-term__btn, .md-terms-live .md-flow__base .md-term__btn { padding-block: 13px; margin-block: -13px; }
.md-terms-live .md-term__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
.md-terms-live .md-hero .md-term__btn:focus-visible, .md-terms-live .md-flow__base .md-term__btn:focus-visible { outline-color: var(--blue-pale); }   /* the blue ring is 2.8:1 on navy, the pale blue 9:1 */
.md-terms-live .md-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; text-decoration: none; }   /* amber = pressable, like every other dot */
.md-terms-live .md-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); font-family: 'Noto Sans JP', sans-serif; box-shadow: 0 10px 30px rgba(16, 42, 67, .25); white-space: normal; animation: md-rise .3s both; }
.md-terms-live .md-term__pop::before, .md-terms-live .md-term__pop::after { content: none; }
.md-terms-live .md-term.is-open .md-term__pop { display: block; }
/* on navy (hero, AVATAR block) the word is pale blue and the bubble is white */
.md-hero .md-term__btn, .md-flow__base .md-term__btn { color: var(--blue-pale); }
.md-terms-live .md-hero .md-term__btn, .md-terms-live .md-flow__base .md-term__btn { text-decoration-color: var(--blue-pale); }
.md-terms-live .md-hero .md-term__pop, .md-terms-live .md-flow__base .md-term__pop { background: var(--white); color: var(--navy); }
.md-hero .md-term__pop, .md-flow__base .md-term__pop { color: var(--on-dark-muted); }   /* no-JS inline note on navy */

/* --- two-way switch (現行 / 刷新後): two separate pills, so each one carries its own dot and the option not
       chosen still looks like a button --- */
.md-seg { display: inline-flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.md-seg[hidden] { display: none; }
.md-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; }
.md-seg button.is-on { border-color: var(--navy); background: var(--navy); color: var(--white); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .md-seg button:not(.is-on):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 42, 67, .14); } }
.md-seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.md-seg button, .md-go, .md-play { scroll-margin-top: 92px; }   /* the sticky header is 77px: keyboard focus must not land under it */

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

/* --- hero: navy, text left, the finished town right --- */
.md-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; }
.md-hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px clamp(40px, 4.4vw, 68px); padding-top: 56px; padding-bottom: 64px; }
.md-hero__txt { flex: 9 1 400px; min-width: 0; }
.md-hero__h1 { margin: 0 0 24px; font-size: clamp(25px, 8vw, 30px); font-weight: 900; line-height: 1.3; letter-spacing: .01em; color: var(--white); }   /* 44px max: 「AIモダナイゼーション」 stays on one line in the text column */
.md-hero__lead { position: relative; z-index: 2; margin: 0; max-width: 34em; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.95; color: var(--on-dark-muted); }   /* z-index: the term bubble must stay above the buttons below */
.md-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.md-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) and (pointer: fine) { .md-hero__more:hover { border-color: var(--white); } }
@media (min-width: 900px) { .md-hero__h1 { font-size: clamp(30px, 3.3vw, 44px); } }
.md-hero__more:focus-visible, .md-hero .btn:focus-visible { outline: 2px solid var(--blue-pale); outline-offset: 3px; }
.md-hero__fig { flex: 12 1 540px; min-width: 0; margin: 0 0 -24px; }
.md-hero__fig svg { display: block; width: 100%; height: auto; }
.md-rise { animation: md-rise .55s var(--ease-out) both; }
.md-d1 { animation-delay: .08s; } .md-d2 { animation-delay: .18s; } .md-d3 { animation-delay: .28s; }

/* --- overview band: the service's key visual at its own size (334px source, shown at 200px) --- */
.md-kv { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; padding-top: 48px; padding-bottom: 64px; }
.md-kv__img { display: block; flex: none; width: 200px; height: auto; }
.md-kv__txt { flex: 1 1 420px; min-width: 0; }
.md-kv__lead { margin: 0 0 20px; max-width: 40em; font-family: 'Noto Sans JP', sans-serif; font-size: 18px; line-height: 1.95; color: var(--ink); }
.md-kv__jump { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.md-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; }
.md-kv__jump b { font-size: 12px; letter-spacing: .14em; color: var(--blue); }
@media (hover: hover) and (pointer: fine) { .md-kv__jump a:hover { border-color: var(--blue); } }
.md-kv__jump a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* --- 背景: plain band (the hero above is already navy) --- */
.md-bg { --pt: clamp(56px, 6.6vw, 96px); --pb: clamp(40px, 4.4vw, 64px); }
.md-bg__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.md-bg__txt .md-p { color: var(--ink); }
@media (max-width: 900px) { .md-bg__grid { grid-template-columns: 1fr; } }

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