/* CoreBuild — できること / What we build, v2 (2026-10-19). Loads LAST, after style.css and v2.css.
   Everything here is scoped under .page-services. New classes are sx- prefixed (grepped against
   style.css, v2.css and home.css before naming — HANDOVER trap 3).
   The folder map ([data-fx]) keeps every class app.js and style.css need; this file only
   re-dresses it for the v2 world: no glass, no tone colours (jade means only "automated /
   yours", so the folders go neutral and only the 自動化 badges stay jade), the one warm
   light marks the folder you opened and the wire that reaches it. */

/* ── 1. opening ────────────────────────────────────────────────────────── */
.page-services .sx-soft { font-size: .7em; margin-top: .34em; }   /* relative, so the line fit can shrink the whole headline */

/* the contents page: four ways in, hairlines, the whole row is the target */
.page-services .sx-ix { margin: 0; }
.page-services .sx-ix-h {
  margin: 0 0 12px; font-size: 12px; font-weight: 900; letter-spacing: .14em; color: var(--sub);
}
.page-services .sx-ix-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v-hair-2); }
.page-services .sx-ix-l li { border-bottom: 1px solid var(--v-hair); }
.page-services .sx-ix-a {
  display: block; min-height: 64px; padding: 15px 2px 14px;
  color: var(--ink); text-decoration: none;
}
.page-services .sx-ix-k {
  display: block; font-family: var(--mincho); font-weight: 600;
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; letter-spacing: -.01em;
  transition: color 200ms ease;
}
.page-services .sx-ix-d { display: block; margin-top: 3px; font-size: 13px; line-height: 1.6; color: var(--sub); }
@media (hover: hover) and (pointer: fine) {
  .page-services .sx-ix-a:hover .sx-ix-k { color: var(--amber); }
}

/* ── 2. the hub: the dashboard in the centre, every source feeding it ────
   The page's one authored moment: once the hub has settled, a mote of the warm light runs
   along each wire into the panel, staggered, then rests. Lines are pseudo-elements; the
   source names sit in their own spans (never bare text in the flex row). */
.page-services .sx-hub {
  margin-top: clamp(56px, 9vh, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem) minmax(0, 1fr);
  align-items: center;
}
.page-services .sx-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.page-services .sx-s { display: flex; align-items: center; gap: 14px; min-height: 40px; }
.page-services .sx-s-t {
  flex: none; font-size: clamp(14px, 1.15vw, 16px); font-weight: 700; color: var(--ink); line-height: 1.4;
}
.page-services .sx-s::after {
  content: ""; flex: 1; height: 7px; min-width: 24px;
  background:
    radial-gradient(circle at center, var(--amber) 0 2px, transparent 2.6px) no-repeat,
    linear-gradient(var(--v-hair-2), var(--v-hair-2)) center / 100% 1px no-repeat;
  background-size: 7px 7px, 100% 1px;
  background-position: -12px 50%, center;
}
.page-services .sx-src--a .sx-s { justify-content: flex-end; }
.page-services .sx-src--b .sx-s { flex-direction: row-reverse; justify-content: flex-end; }
@keyframes sx-in-r { from { background-position: -12px 50%, center; } to { background-position: calc(100% + 12px) 50%, center; } }
@keyframes sx-in-l { from { background-position: calc(100% + 12px) 50%, center; } to { background-position: -12px 50%, center; } }
@media (prefers-reduced-motion: no-preference) {
  .page-services .sx-hub.on .sx-src--a .sx-s::after { animation: sx-in-r 1.6s var(--v-move) both; }
  .page-services .sx-hub.on .sx-src--b .sx-s::after { animation: sx-in-l 1.6s var(--v-move) both; }
  .page-services .sx-hub.on .sx-s:nth-child(1)::after { animation-delay: .5s; }
  .page-services .sx-hub.on .sx-s:nth-child(2)::after { animation-delay: .8s; }
  .page-services .sx-hub.on .sx-s:nth-child(3)::after { animation-delay: 1.1s; }
  .page-services .sx-hub.on .sx-s:nth-child(4)::after { animation-delay: 1.4s; }
  .page-services .sx-hub.on .sx-s:nth-child(5)::after { animation-delay: 1.7s; }
  .page-services .sx-hub.on .sx-s:nth-child(6)::after { animation-delay: 2s; }
}

/* the panel: solid, seated, the same material as the home's ledger */
.page-services .sx-dash {
  position: relative; margin: 0; padding: 22px 22px 18px; border-radius: 22px;
  background: linear-gradient(180deg, #0f1217, #0a0c10);
  border: 1px solid rgba(255,90,31,.32);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -30px rgba(0,0,0,.9), 0 12px 24px -12px rgba(0,0,0,.7);
}
.page-services .sx-dash-t { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .14em; color: var(--sub); }
.page-services .sx-dash-l { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--v-hair); }
.page-services .sx-dash-l li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--v-hair);
}
.page-services .sx-dash-k { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.page-services .sx-dash-f { font-size: 11.5px; font-weight: 700; color: var(--faint); letter-spacing: .04em; white-space: nowrap; }
.page-services .sx-dash-n { margin-top: 12px; font-size: 11.5px; line-height: 1.7; color: var(--faint); }

/* ── 3. modules: the master first and largest, the kinds that feed it, the apps on top ── */
.page-services .sx-master {
  margin-top: clamp(56px, 9vh, 100px); padding-top: clamp(26px, 4vh, 40px);
  border-top: 1px solid var(--amber);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 80px); align-items: end;
}
.page-services .sx-master-k {
  margin: 0; font-family: var(--mincho); font-weight: 600; color: var(--ink);
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.15; letter-spacing: -.02em;
  white-space: nowrap;   /* one word; it must never break as ダッシュボー／ド */
}
.page-services .sx-master-d { margin: 0; max-width: 30em; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.95; color: var(--sub); }
.page-services .sx-master-d b { color: var(--ink); font-weight: 900; }
.page-services .sx-mods {
  list-style: none; margin: clamp(48px, 8vh, 84px) 0 0 auto; padding: 0;
  max-width: 54rem; border-top: 1px solid var(--v-hair-2);
}
.page-services .sx-mod {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 44px); align-items: baseline;
  padding: clamp(22px, 3.6vh, 32px) 0; border-bottom: 1px solid var(--v-hair);
}
.page-services .sx-mod-k { margin: 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 900; color: var(--ink); line-height: 1.5; }
.page-services .sx-mod-d { margin: 0; font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.9; color: var(--sub); }
.page-services .sx-mod-x { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--faint); letter-spacing: .02em; }
.page-services .sx-apps { margin-top: clamp(64px, 11vh, 120px); max-width: 40rem; }
.page-services .sx-apps-k { font-size: clamp(22px, 3vw, 40px); line-height: 1.3; }
.page-services .sx-apps-d { margin: 18px 0 0; max-width: 34em; font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.95; color: var(--sub); }

/* ── 4. the keys ───────────────────────────────────────────────────────── */
.page-services .sx-acc {
  list-style: none; margin: clamp(48px, 8vh, 86px) 0 0; padding: 0;
  border-top: 1px solid var(--v-hair-2);
}
.page-services .sx-a {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 48px); align-items: baseline;
  padding: clamp(22px, 3.6vh, 34px) 0; border-bottom: 1px solid var(--v-hair);
}
.page-services .sx-a-k { margin: 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 900; color: var(--ink); line-height: 1.5; }
.page-services .sx-a-d { margin: 0; font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.85; color: var(--sub); max-width: 36em; }
.page-services .sx-a-y {
  margin: 0; justify-self: end; white-space: nowrap;
  font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--jade);
}

/* ── 5. behind the numbers: the folder map, re-dressed ─────────────────────────── */
.page-services .v-lede .sv-hl { color: var(--jade); }
.page-services .fx { margin-top: clamp(48px, 8vh, 80px); }
.page-services .fx-stage {
  background: none; border: 0; border-top: 1px solid var(--v-hair-2); border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  padding: clamp(28px, 4.4vh, 44px) 0 0;
}
.page-services .fx-root { background: var(--v-night); border-color: rgba(255,90,31,.45); }
.page-services .fx-root em { color: var(--faint); }
/* the tiles sit over the wires that run to the rows below, so they keep a night fill;
   everything else about the old card (glass, shadow, tint, tone colour) goes */
.page-services .fx-f,
.page-services .fx-f[data-tone] {
  color: var(--sub); background: rgba(5,6,8,.94); border-color: var(--v-hair);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  transition: transform 220ms var(--v-out), border-color 220ms var(--v-out), background-color 220ms var(--v-out);
}
.page-services .fx-f[data-open] {
  color: var(--amber); border-color: rgba(255,90,31,.5);
  background: #0c0806;
}
.page-services .fx-f[data-open] .fx-nm { color: var(--ink); }
.page-services .fx-auto { font-size: 10.5px; padding: 2px 9px; }
.page-services .fx-en { white-space: nowrap; }   /* マーケティ／ング broke in the open row at 375 */
.page-services .fx-pi { transition-timing-function: var(--v-out); }
.page-services .fx-kids { border-bottom-color: var(--v-hair); }
.page-services .fx-ph { color: var(--faint); margin-top: clamp(18px, 2.6vh, 26px); }
@media (hover: hover) and (pointer: fine) {
  .page-services .fx-f:not([data-open]):hover { background: #0a0c10; border-color: var(--v-hair-2); }
}
.page-services .sx-legend { margin-top: clamp(26px, 4vh, 40px); padding-top: 20px; border-top: 1px solid var(--v-hair); }

/* ── the quiet passage (v-grow centres it) ──────────────────────────── */
.page-services .sx-quiet { padding-block: clamp(120px, 22vh, 240px); }

/* ── 6. the work after the work ───────────────────────────────────────────── */
.page-services .sx-note {
  margin: clamp(28px, 4.4vh, 44px) 0 0; max-width: 40em;
  font-size: 14.5px; line-height: 1.95; color: var(--faint);
}

/* ── 7. onward ─────────────────────────────────────────────────────────── */
.page-services .sx-nx { list-style: none; margin: clamp(40px, 7vh, 72px) 0 0; padding: 0; border-top: 1px solid var(--v-hair-2); }
.page-services .sx-nx li { border-bottom: 1px solid var(--v-hair); }
.page-services .sx-nx-a {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: clamp(14px, 3vw, 44px); align-items: center;
  min-height: 84px; padding: 18px 2px; color: var(--ink); text-decoration: none;
}
.page-services .sx-nx-k {
  display: block; font-family: var(--mincho); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; transition: color 200ms ease;
}
.page-services .sx-nx-d { display: block; font-size: clamp(14px, 1.15vw, 15.5px); line-height: 1.8; color: var(--sub); }
.page-services .sx-nx-ar { color: var(--amber); transition: transform 260ms var(--v-out); }
@media (hover: hover) and (pointer: fine) {
  .page-services .sx-nx-a:hover .sx-nx-k { color: var(--amber); }
  .page-services .sx-nx-a:hover .sx-nx-ar { transform: translateX(4px); }
}
.page-services .sx-nx-a:active .sx-nx-ar { transform: translateX(2px); }

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .page-services .sx-hub { grid-template-columns: minmax(0, 1fr); }
  .page-services .sx-src { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; }
  .page-services .sx-s, .page-services .sx-src--b .sx-s { flex-direction: row; justify-content: center; min-height: 34px; }
  .page-services .sx-s::after { display: none; }
  .page-services .sx-dash { margin: 34px 0; }
  .page-services .sx-dash::before, .page-services .sx-dash::after {
    content: ""; position: absolute; left: 50%; width: 7px; height: 34px; margin-left: -3.5px;
    background:
      radial-gradient(circle at center, var(--amber) 0 2px, transparent 2.6px) no-repeat,
      linear-gradient(var(--v-hair-2), var(--v-hair-2)) center / 1px 100% no-repeat;
    background-size: 7px 7px, 1px 100%;
    background-position: 50% -12px, center;
  }
  .page-services .sx-dash::before { bottom: 100%; }
  .page-services .sx-dash::after { top: 100%; background-position: 50% calc(100% + 12px), center; }
  .page-services .sx-master { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .page-services .sx-mod { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .page-services .v-mega { font-size: clamp(26px, 7.4vw, 32px); }
  .page-services .sx-a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "k y" "d d"; gap: 8px 16px;
  }
  .page-services .sx-a-k { grid-area: k; }
  .page-services .sx-a-y { grid-area: y; font-size: 11.5px; }
  .page-services .sx-a-d { grid-area: d; }
  .page-services .sx-nx-a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "k ar" "d ar"; gap: 4px 16px;
  }
  .page-services .sx-nx-k { grid-area: k; }
  .page-services .sx-nx-d { grid-area: d; }
  .page-services .sx-nx-ar { grid-area: ar; }
  .page-services .sx-quiet { padding-block: clamp(110px, 18vh, 160px); }
}
@media (max-width: 520px) {
  .page-services .fx-grid { gap: 8px; }
  .page-services .fx-t { padding-inline: 4px; }
  .page-services .fx-pi > * { padding-inline: 14px; }
}
@media (max-width: 380px) {
  .page-services .sx-ix-k { font-size: 18px; }
  .page-services .fx-nm { font-size: 11.5px; }
}

@keyframes sx-dn { from { background-position: 50% -12px, center; } to { background-position: 50% calc(100% + 12px), center; } }
@keyframes sx-up { from { background-position: 50% calc(100% + 12px), center; } to { background-position: 50% -12px, center; } }
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .page-services .sx-hub.on .sx-dash::before { animation: sx-dn 1.6s var(--v-move) .6s 3 both; }
  .page-services .sx-hub.on .sx-dash::after  { animation: sx-up 1.6s var(--v-move) 1.2s 3 both; }
}
@media (max-width: 380px) {
  .page-services .sx-apps-k { font-size: 20px; }
  .page-services .sx-master-k { font-size: 28px; }
  .page-services .sx-s-t { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-services .sx-nx-ar, .page-services .sx-ix-k, .page-services .sx-nx-k { transition: none; }
}