/*! world-flow — /system/ (システム開発). Loaded after works.css.
    A process chart on a light desk: a cool off-white ground, near-black type,
    and one signal green that only ever means "it runs" — the wire that joins
    one step to the next, the node where it lands, the button that starts it.
    The hero draws the page's own promise as a diagram: five small screens
    (会員証・予約・見積り・通知・集計) joined by a single wire. Sections are
    steps on the same wire, so each one hangs from a node.
    Light theme — data-theme="light" on body flips the chrome (vq.css); the
    footer stays dark, as everywhere. Japanese stays in the device's own font
    (body.build, works.css); this file adds no font.
    Gradients, strokes and type only: no images, no CSS 3D, no clip-path
    (Safari/Edge), and no data: backgrounds (CSP img-src 'self'). One thing
    moves on the page: the dashes running along the hero's wire. */
body[data-world="flow"]{
  --ground:#F3F6F4;--raise:#FFFFFF;
  --ink:#0E1714;--ink-mid:#3D4A45;--ink-dim:#55635D;--ink-faint:#5F6D67;
  --line:rgba(14,23,20,.10);--line-firm:rgba(14,23,20,.20);
  --acc:#087A50;--acc-line:rgba(8,122,80,.42);--acc-glow:rgba(16,165,110,.16);
  --go:#10A56E;--well:#0F1A17;
  background-color:#F3F6F4;
}
body[data-world="flow"] main{--grad:linear-gradient(96deg,#087A50 0%,#0F9B8E 100%)}
body[data-world="flow"] ::selection{background:#087A50;color:#fff}
body[data-world="flow"] main :focus-visible{outline-color:#087A50}

/* ── Surfaces ───────────────────────────────────────────────────────
   White on off-white, parted by a hairline and a short shadow. */
body[data-world="flow"] :is(.card,.work,.faq details,.form-wrap,.vq-noscript){border-color:var(--line)}
body[data-world="flow"] :is(.card,.work,.faq details,.form-wrap,.vq-form-msg,.vq-noscript){
  background:#FFFFFF;
  box-shadow:0 1px 2px rgba(14,23,20,.04),0 14px 34px rgba(14,23,20,.06)}
body[data-world="flow"] :is(.card,.work):hover{border-color:var(--acc-line);
  box-shadow:0 2px 5px rgba(14,23,20,.05),0 28px 60px rgba(14,23,20,.12)}
body[data-world="flow"] .faq details[open]{border-color:var(--acc-line)}
/* The example shots were composed on a dark ground; the well keeps it. */
body[data-world="flow"] .work-shot{background:var(--well)}
body[data-world="flow"] :is(.tags,.chips) li{background:rgba(14,23,20,.04);color:var(--ink-dim);border-color:var(--line)}
body[data-world="flow"] .role-demo{color:#087A50;border-color:rgba(8,122,80,.45)}
body[data-world="flow"] .role-own{color:var(--ink-dim);border-color:var(--line-firm)}
body[data-world="flow"] .role-partner{color:#1E5FD0;border-color:rgba(30,95,208,.45)}
body[data-world="flow"] :is(input,select,textarea){background:#FFFFFF;border-color:var(--line-firm);color:var(--ink);
  font-family:inherit}
body[data-world="flow"] :is(input,select,textarea):focus{background:#FFFFFF;border-color:var(--acc)}
body[data-world="flow"] .lbl{color:var(--ink-dim)}
body[data-world="flow"] .lbl b{color:#B42318}
body[data-world="flow"] .vq-form-msg[data-state="error"]{color:#B42318;border-color:rgba(180,35,24,.45)}

/* The one saturated thing: the button that starts the job. */
body[data-world="flow"] main :is(.btn,.submit){
  background:#087A50;color:#FFFFFF;font-family:inherit;
  box-shadow:0 12px 30px rgba(8,122,80,.30)}
body[data-world="flow"] main :is(.btn,.submit):hover{filter:none;background:#06694A;transform:translateY(-2px)}
body[data-world="flow"] .btn-ghost{background:#FFFFFF;border-color:rgba(14,23,20,.16);color:var(--ink);
  box-shadow:0 6px 18px rgba(14,23,20,.05)}
body[data-world="flow"] .btn-ghost:hover{border-color:var(--acc);color:var(--acc);background:#FFFFFF}

/* ── Section furniture ─────────────────────────────────────────────
   Every section hangs from the same wire: a short dashed drop out of the
   section above, landing on a node beside the number. */
body[data-world="flow"] .sec-head{position:relative}
body[data-world="flow"] .sec-head::before{content:"";position:absolute;left:5px;bottom:calc(100% + 17px);
  height:clamp(30px,4.6vw,60px);border-left:1.5px dashed rgba(8,122,80,.60)}
body[data-world="flow"] .sec-head::after{content:"";position:absolute;left:0;bottom:calc(100% + 6px);
  box-sizing:border-box;width:11px;height:11px;border-radius:50%;background:#FFFFFF;border:2px solid var(--go)}

/* 進め方 — four steps on one wire, not four boxes. Down the left edge on a
   phone, across the top from 900px. */
body[data-world="flow"] .build-flow{gap:0;grid-template-columns:minmax(0,1fr)}
body[data-world="flow"] .build-flow li{position:relative;border:0;border-radius:0;background:none;
  padding:0 0 clamp(26px,4vw,34px) 34px}
body[data-world="flow"] .build-flow li:last-child{padding-bottom:0}
body[data-world="flow"] .build-flow li::before{content:"";position:absolute;left:5px;top:8px;bottom:-8px;
  border-left:1.5px solid rgba(8,122,80,.55)}
body[data-world="flow"] .build-flow li:last-child::before{display:none}
body[data-world="flow"] .build-flow li::after{content:"";position:absolute;left:0;top:3px;
  box-sizing:border-box;width:11px;height:11px;border-radius:50%;background:#FFFFFF;border:2px solid var(--go)}
body[data-world="flow"] .build-flow strong{font-size:clamp(16px,1.7vw,19px);letter-spacing:-.012em}
@media (min-width:900px){
  body[data-world="flow"] .build-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-world="flow"] .build-flow li{padding:34px clamp(18px,2.4vw,34px) 0 0}
  body[data-world="flow"] .build-flow li::before{left:11px;right:0;top:5px;bottom:auto;
    border-left:0;border-top:1.5px solid rgba(8,122,80,.55)}
  body[data-world="flow"] .build-flow li:last-child::before{display:block;right:auto;width:clamp(40px,6vw,90px);
    border-top-style:dashed}
  body[data-world="flow"] .build-flow li::after{top:0}
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.w-hero--flow{padding-top:clamp(26px,4vh,56px);padding-bottom:clamp(30px,5vh,64px)}
.w-hero--flow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 86% 34%,rgba(16,165,110,.13) 0%,transparent 70%),
    radial-gradient(40% 50% at 8% 0%,rgba(15,155,142,.08) 0%,transparent 70%)}
.w-hero--flow .w-grid{position:relative;z-index:1;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);align-items:center}
.w-hero--flow .crumb{margin-bottom:clamp(14px,2.4vh,26px)}
.fl-kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.fl-kicker i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--go);box-shadow:0 0 0 4px rgba(16,165,110,.18)}
.fl-name{margin:0;font-weight:800;font-size:clamp(42px,6.3vw,84px);line-height:1.06;letter-spacing:-.045em;color:var(--ink);
  font-feature-settings:"palt"}
.fl-catch{margin:clamp(14px,2.2vh,24px) 0 clamp(16px,2.2vh,22px);font-weight:800;
  font-size:clamp(21px,2.5vw,33px);line-height:1.36;letter-spacing:-.02em}
.fl-catch span,.fl-catch em{display:block}
.fl-catch span{color:var(--ink)}
.fl-catch em{font-style:normal;color:var(--acc)}
.w-hero--flow .w-lede{margin-bottom:clamp(14px,2vh,18px);max-width:35em}
.w-hero--flow .chips{margin-bottom:clamp(18px,2.6vh,26px)}
/* What pressing the button leads to, in plain text under it (the chips above
   read as labels and are skipped). Same shape as the other units' .cta-note. */
.w-hero--flow .cta-note{margin:14px 0 0;max-width:44em;font-size:13px;line-height:1.8;color:var(--ink-mid)}

/* The diagram. Five modules on a board, joined by one wire. The board's
   height is fixed and only its width follows the column: a module's height
   comes from its type, not from the width, so a board that shrank with the
   column would let module 04 run into module 05 (it did, at 1024px). The
   wire is an SVG stretched to the board (non-scaling stroke) and the modules
   are placed in percentages of it, so the two keep their joints at any width. */
.fl-map{position:relative;width:100%;max-width:580px;margin-left:auto;height:560px}
.fl-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fl-wire path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.fl-wire .w0{stroke:rgba(8,122,80,.28);stroke-width:1.5}
.fl-wire .w1{stroke:var(--go);stroke-width:2;stroke-dasharray:3 15}
.fl-mod{position:absolute;box-sizing:border-box;width:49.5%;
  background:#FFFFFF;border:1px solid rgba(14,23,20,.10);border-radius:16px;
  padding:13px 15px 15px;
  box-shadow:0 1px 2px rgba(14,23,20,.05),0 18px 40px rgba(14,23,20,.09)}
.fl-m1{left:0;top:0}
.fl-m2{right:0;top:18.6%}
.fl-m3{left:0;top:39.3%}
.fl-m4{right:0;top:59.3%}
.fl-m5{left:17%;width:66%;top:81.4%}
/* The joints. Each sits where the wire meets an edge whose place is fixed by
   the percentages above (a top or a side, never a bottom: a module's height
   follows its type, so its bottom edge is not a place the wire can count on). */
.fl-n{position:absolute;box-sizing:border-box;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#FFFFFF;border:2px solid var(--go)}
.fl-n1{left:49.5%;top:8.21%}
.fl-n2{left:75.2%;top:18.6%}
.fl-n3{left:49.5%;top:47.5%}
.fl-n4{left:50.5%;top:67.5%}
.fl-n5{left:75.2%;top:81.4%}
.fl-top{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.fl-top b{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--acc)}
.fl-top strong{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.fl-top i{margin-left:auto;flex:none;width:7px;height:7px;border-radius:50%;background:var(--go)}
.fl-ui{font-family:'IBM Plex Mono','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',monospace;
  font-size:10.5px;line-height:1.5;color:var(--ink-dim)}

/* 01 会員証 — a card with a barcode and a balance. */
.fl-pass{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  border-radius:10px;padding:10px 12px;color:#EAF4EF;
  background:linear-gradient(120deg,#0F1A17 0%,#143328 100%)}
.fl-pass .bar{flex:none;width:44%;height:26px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#EAF4EF 0 2px,transparent 2px 4px,#EAF4EF 4px 5px,transparent 5px 9px,#EAF4EF 9px 12px,transparent 12px 14px)}
.fl-pass .pt{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1;color:#FFFFFF;white-space:nowrap}
.fl-pass .pt small{margin-left:3px;font-size:10px;font-weight:400;color:#9FD9BF}
/* 02 予約 — three lanes with their counts. */
.fl-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fl-lanes span{display:block;border-radius:8px;padding:7px 8px 8px;background:#F1F5F3;white-space:nowrap}
.fl-lanes b{display:block;margin-top:2px;font-size:16px;font-weight:600;line-height:1;color:var(--ink)}
.fl-lanes .on{background:rgba(16,165,110,.14);color:#06694A}
.fl-lanes .on b{color:#06694A}
/* 03 見積り — rows and a total. */
.fl-doc{display:grid;gap:6px}
.fl-doc i{display:block;height:6px;border-radius:3px;background:#E4EAE7}
.fl-doc i:nth-child(2){width:72%}
.fl-doc p{display:flex;justify-content:space-between;align-items:baseline;margin:3px 0 0;padding-top:8px;border-top:1px solid rgba(14,23,20,.10)}
.fl-doc p b{width:46%;height:9px;border-radius:3px;background:var(--ink)}
/* 04 通知 — the message that goes out. */
.fl-note{display:flex;align-items:center;gap:9px;border-radius:10px;padding:9px 11px;background:#F1F5F3}
.fl-note .at{flex:none;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.fl-note span{min-width:0;color:var(--ink-mid);font-size:11px;line-height:1.45}
/* 05 集計 — a month in bars. */
.fl-bars{display:flex;align-items:flex-end;gap:5px;height:38px}
.fl-bars i{flex:1;border-radius:3px 3px 0 0;background:#D5DFDA}
.fl-bars i:nth-child(1){height:38%}.fl-bars i:nth-child(2){height:52%}.fl-bars i:nth-child(3){height:46%}
.fl-bars i:nth-child(4){height:64%}.fl-bars i:nth-child(5){height:58%}.fl-bars i:nth-child(6){height:78%}
.fl-bars i:nth-child(7){height:70%}.fl-bars i:nth-child(8){height:100%;background:var(--go)}
.fl-sum{display:flex;align-items:flex-end;gap:14px}
.fl-sum .fl-bars{flex:1}
.fl-sum p{flex:none;margin:0;text-align:right}
.fl-sum p b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  .fl-wire .w1{animation:fl-run 1.5s linear infinite}
}
@keyframes fl-run{to{stroke-dashoffset:-18}}

@media (max-width:960px){
  .w-hero--flow .w-grid{grid-template-columns:1fr}
  .w-hero--flow .w-visual{max-width:none}
  .fl-map{max-width:520px;margin:clamp(10px,3vw,22px) auto 0}
}
@media (max-width:480px){
  /* Smaller modules, so a shorter board; the wire stretches with it. */
  .fl-map{height:490px}
  .fl-mod{padding:11px 11px 12px;border-radius:14px}
  .fl-top{margin-bottom:8px;gap:6px}
  .fl-top strong{font-size:12.5px}
  .fl-pass{padding:8px 9px}
  .fl-pass .pt{font-size:16px}
  .fl-lanes{gap:4px}
  .fl-lanes span{padding:6px 5px 7px;font-size:9.5px}
  .fl-lanes b{font-size:14px}
  .fl-note{padding:8px 9px;gap:7px}
  .fl-note span{font-size:10px}
}
@media (max-width:359px){
  .fl-top i{display:none}
  .fl-note .at{display:none}
  .fl-lanes span{font-size:8.5px;letter-spacing:-.02em;padding-left:3px;padding-right:1px}
}

/* ── Jumps inside the page ─────────────────────────────────────────
   A card under こんなときに opens its example, and every 相談 link opens the
   form. Each target stops below the sticky header. A section carries its own
   padding above the number, so it takes the 96px #cases has (works.css). An
   example is a card with no padding above it, and the header is 98px on a
   phone, 103px on a tablet and 129px where the nav wraps to three rows
   (under 345px): 136px keeps the card's top edge in view at all of them. */
body[data-world="flow"] :is(#needs,#delivery,#contact){scroll-margin-top:96px}
body[data-world="flow"] [id^="case-"]{scroll-margin-top:136px}

/* ── The form ──────────────────────────────────────────────────────
   Three things are asked: who, where to answer, and what. The shared grid
   (works.css) would open empty columns on a wide screen; here the two short
   fields share one row from 900px and stack below it. */
body[data-world="flow"] .fields{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  body[data-world="flow"] .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── English (/en/system/) ─────────────────────────────────────────
   The name is two words and longer than the Japanese one: a size down, so it
   holds to two lines at any width, in the Latin face the page's other
   headings name first. */
html[lang="en"] :is(.fl-name,.fl-catch){
  font-family:'Schibsted Grotesk','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',sans-serif}
html[lang="en"] .fl-name{font-size:clamp(38px,5.3vw,68px)}
/* The note in module 04 keeps to two lines on a phone: Latin in the mono face
   runs wider than the Japanese line it stands for. */
@media (max-width:480px){html[lang="en"] .fl-note span{font-size:9.5px}}
/* Both buttons stay on one row on a phone: the English pair is the wider one. */
@media (max-width:420px){
  html[lang="en"] .w-hero--flow .hero-cta{gap:10px}
  html[lang="en"] .w-hero--flow .btn{padding:15px 24px}
  html[lang="en"] .w-hero--flow .btn-ghost{padding:14px 20px}
}

/* ── The way on from the examples ──────────────────────────────────
   The form is five sections further down; whoever found their case in the
   list gets the button here. */
.build-next{display:flex;justify-content:center;margin:clamp(28px,3.6vw,48px) 0 0}

/* ── Reduced motion ────────────────────────────────────────────────
   The button rule above outranks works.css's reduced-motion reset, so the
   lift is taken off here as well. */
@media (prefers-reduced-motion:reduce){
  body[data-world="flow"] main :is(.btn,.submit){transition:none}
  body[data-world="flow"] main :is(.btn,.submit):hover{transform:none}
}