/* =====================================================================
   案 A 第5版（2026-10-03）— 第4版に: 検知・解析・配信（VACAN SIGNAGE .f-about の写し）／技術の節（工程の舞台を作り直し）／
     導入までの流れ（6 段の一列）／出現の譜面（80%・罫→中身）／FAQ の開閉／メガメニューの右列と選択の動き／Violet をプライマリに。判断は docs/plan-a-v5.md
   案 A 第4版 — VACAN Technologies（vacancorp/vacan-cms technologies/css/site.css・2026-10-03 の main）の実装を写す。
   写したもの: 単位 --u・色・時間のトークン・型・ヘッダーの振付・hero（Prism）・ロゴ帯（signage plan-f）・解像（#rz）・カーソル・
              実物カード（d-pcard）・サービスの行・句の点灯・工程（sui.io の写し）・オドメーター・ティッカー・事例の行・手紙の CTA・footer。
   写さなかったもの（理由は docs/plan-a-technologies-trace.md §2）:
     ・余白 … 第3版（しのさん「A案でもっと余白を」）の値を --u で持つ。Technologies の節 60u には戻さない
     ・12px 未満の字 … Technologies は 10〜11px を使う（SCROLL 10u・meta 10.5u・car-nav 11px）。A案は 12px を下限にする（AI-RULES 4.11）
     ・メニュー … 本番の木と白いパネル（第2版のしのさん指示）
   **このファイルは他の案と共有しない。**
   ===================================================================== */
:root {
  --u: clamp(.6664px, calc(100vw / 1440 * .9996), 1.3328px);
  --a-w: #fff; --a-k: #000; --a-k2: #222;
  --a-g900: #13151A; --a-g700: #4B515B; --a-g500: #6C7584; --a-g300: #B5BAC1; --a-g100: #E6E8EB;
  --a-k14: rgba(0,0,0,.08); --a-paper: #F5F6F8; --a-line: #DADDE2; --a-card-line: #C9CDD3; --a-violet: #512376; --a-violet-lt: #C9B5DE; --a-violet-dk: #3E1A5C; --a-violet-pill: rgba(81,35,118,.96);
  --a-sans: "Inter", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --a-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --a-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 数字・ラベルの書体（しのさん 2026-10-06「2026.09.25 などの数字のフォントがダサい」）: 等幅（IBM Plex Mono・Azeret Mono）をやめ、本文と同じ書体の半角英数に。
     技術の節の番号と同じ決定（2026-10-04「シンプルに今のフォントの半角英数に」）。変数名は残し、参照している 20 か所をまとめて切り替える */
  --a-mono: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --a-amono: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --a-archivo: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --e-out: cubic-bezier(.2,.7,.2,1); --e-io: cubic-bezier(.62,.16,.13,1.01); --e-in: cubic-bezier(.4,0,1,1);
  --d-xs: 120ms; --d-s: 200ms; --d-m: 300ms; --d-ml: 400ms; --d-l: 500ms; --d-xl: 700ms;
  --t: var(--d-m) var(--e-out);
  /* 出現（第5版）= VACAN SIGNAGE の .f-rev（800ms・(.22,1,.36,1)・20px）。罫は 700ms e-io で左から引く */
  --e-rv: cubic-bezier(.22,1,.36,1); --d-rv: 800ms; --d-rule: 700ms;
  color-scheme: light;
  /* 余白の物差し（第3版の値。1440 で 左右 80 / 節 120（節と節 240）/ 見出し→中身 80 / 行 64 / 格子 40 / 相談 160 / フッター 96）。
     第4版で単位を Technologies の --u に（1440 で同じ px、他の幅では比例）。≤1100 と ≤767 は第3版の px のまま（スマホの左右は Technologies の 28px） */
  --a-gutter: calc(80 * var(--u));
  --a-sec: calc(120 * var(--u));
  --a-head: calc(80 * var(--u));
  --a-row: calc(64 * var(--u));
  --a-gap: calc(40 * var(--u));
  --a-cta: calc(160 * var(--u));
  --a-foot: calc(96 * var(--u));
}
@media (max-width: 1100px) { :root { --a-gutter: 48px; --a-sec: 88px; --a-head: 56px; --a-row: 48px; --a-gap: 32px; --a-cta: 112px; --a-foot: 72px; } }
@media (max-width: 767px) { :root { --a-gutter: 28px; --a-sec: 80px; --a-head: 48px; --a-row: 40px; --a-gap: 24px; --a-cta: 96px; --a-foot: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--a-w); overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; scroll-behavior: auto; }
body { margin: 0; background: var(--a-w); color: var(--a-k); font: 400 max(14px, calc(14 * var(--u)))/1.8 var(--a-jp); -webkit-font-smoothing: antialiased; overflow-x: clip; text-wrap: pretty; }
/* カーソルは JS が作れたときだけ消す（Technologies は無条件で cursor:none。JS が落ちると矢印が消えるので条件を付けた） */
html.has-cur body, html.has-cur a, html.has-cur button, html.has-cur summary { cursor: none; }
@media (hover: none) { html.has-cur body { cursor: auto; } html.has-cur a, html.has-cur button, html.has-cur summary { cursor: pointer; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, dl, dd { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; }
:focus-visible { outline: 2px solid var(--a-k); outline-offset: 3px; }
.a-hd.is-pill :focus-visible { outline-color: var(--a-w); }   /* 黒いピルの中では白（Technologies と同じ。黒のままだと見えない） */
html.a-drawer .a-hd :focus-visible { outline-color: var(--a-k); }
html.a-drawer.a-drawer-ptr .a-hd :focus-visible { outline-color: transparent; }   /* 指・マウスで開いた時は、最初の項目へ移したフォーカスの枠を出さない（iPhone では開くたびに「利用シーン」が黒い枠で囲まれた）。キーを押すと出る */
.a-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.a-container { padding: 0 var(--a-gutter); }
[id] { scroll-margin-top: calc(90 * var(--u)); }

/* ---- 型（Technologies の実測値。和文の段落の行送りだけ第3版の 1.8 系を残す） ---- */
.a-h36 { font-family: var(--a-jp); font-weight: 400; font-size: calc(36 * var(--u)); line-height: calc(39.6 * var(--u)); letter-spacing: calc(-1.08 * var(--u)); word-break: auto-phrase; text-wrap: balance; }
.a-h90 { font-family: var(--a-jp); font-weight: 400; font-size: calc(90 * var(--u)); line-height: calc(106.2 * var(--u)); letter-spacing: -.04em; text-align: center; color: var(--a-k); word-break: keep-all; }
.a-l27 { font-size: calc(27 * var(--u)); line-height: calc(40.5 * var(--u)); color: var(--a-g500); margin-top: calc(12 * var(--u)); word-break: auto-phrase; }
.a-l15 { font-family: var(--a-jp); font-weight: 500; font-size: max(14px, calc(15 * var(--u))); line-height: max(20px, calc(19.5 * var(--u))); }
.a-l15r { font-family: var(--a-jp); font-weight: 400; font-size: max(14px, calc(15 * var(--u))); line-height: max(24px, calc(27 * var(--u))); }
.a-l12 { font-family: var(--a-jp); font-size: max(12px, calc(12 * var(--u))); line-height: max(18px, calc(18 * var(--u))); }
.a-dim { color: var(--a-g500); }
.a-mono { font-family: var(--a-mono); letter-spacing: .04em; }
/* 縦に並ぶ数字（日付・番号・位置）は桁の幅を揃える */
.a-media__list time, .a-faq__q, .a-flow__n, .a-decl__n, .a-pcard__n, .a-carnav, .a-tkpos, .a-foot__copy { font-variant-numeric: tabular-nums; }
.a-max65 { max-width: calc(780 * var(--u)); }
.a-two { display: flex; justify-content: space-between; gap: calc(24 * var(--u)); align-items: flex-start; }
.a-two__r { width: calc(444 * var(--u)); display: flex; flex-direction: column; gap: calc(30 * var(--u)); align-items: flex-start; color: var(--a-g700); }
.a-two__r.a-two__r--row { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px calc(32 * var(--u)); }   /* 同じ重さのリンクが 2 つ（ニュース一覧・コラム一覧）の時は横に並べる（しのさん 2026-10-07）。間は利用シーンのカードの下のリンクと同じ考え（24〜32） */
@media (min-width: 1101px) { .a-two__r > .a-see { align-self: flex-end; } .a-two__r--row { justify-content: flex-end; } }   /* 見出しの横のリンク（導入までの流れ・よくある質問の「気軽に相談する」、ニュース一覧・コラム一覧）は右の列の右端へ（しのさん 2026-10-07「ボタンの位置が中途半端。右端に寄せて。同様の位置にあるボタンも」）。文（数字・資料のリード）は左寄せのまま。1100 以下は見出しの下に積むので左のまま */
.a-see { position: relative; display: inline-flex; gap: .4em; align-items: baseline; padding: 3px 0; color: var(--a-violet); }   /* ボタンの合図（案11）の字はふだんから Violet（しのさん 2026-10-07）。載せると群れの括弧が実線になる。前は黒で、載せると薄くした */
.a-arr { font-family: var(--a-sans); opacity: .52; }
picture { display: contents; }   /* AVIF の picture は箱を作らない（img の位置・大きさは picture が無い時と同じ。2026-10-07 軽量化） */
.a-scr { display: inline-block; min-width: 1ch; }
.a-skip { position: absolute; left: calc(30 * var(--u)); top: -100px; z-index: 900; background: var(--a-k); color: var(--a-w); padding: 8px 12px; border-radius: 999px; font-size: 12px; }
.a-skip:focus { top: 30px; }

/* ================= ヘッダー（Technologies .d-hd の振付。メニュー木は本番どおり）
   常に全幅で固定された不可視の外枠 .a-hd の中の .a-hd__in だけが変形する。幅は JS が実測した --hd-pill-w と 100% の間を補間。
   展開（ピル→全幅）= 幾何 400ms e-out ／ 面 300ms ／ 文字色は 32ms に 0s で切替。
   収縮（全幅→ピル）= 幾何 500ms e-io ／ 面 300ms を +200ms ／ 文字色 +260ms で切替（反転色を時間で混ぜると中間で字が地に溶ける）。
   Technologies は縦の移動を transform で持つが、A案は中に position:fixed の全面メニュー（スマホ）を持つため、
   transform（固定配置の基準が変わる）ではなく top で動かす。時間と曲線は同じ ================= */
/* 第5版: ヘッダーの字とロゴは VACAN Violet、ピルの地も Violet（しのさん指示「ヘッダーメニューの黒と VACAN logo の黒は VACAN Violet に」） */
.a-hd { position: fixed; inset: 0 0 auto; z-index: 800; pointer-events: none; color: var(--a-violet); padding-top: env(safe-area-inset-top, 0px); }
.a-hd__in { pointer-events: auto; position: relative; top: 0; width: 100%; height: 78px; margin: 0 auto; display: flex; align-items: center; gap: 40px; padding: 0 var(--a-gutter); color: var(--a-violet); background: rgba(0,0,0,0); border-radius: 0; box-shadow: 0 10px 34px rgba(0,0,0,0);
  transition: width var(--d-ml) var(--e-out), height var(--d-ml) var(--e-out), padding var(--d-ml) var(--e-out), gap var(--d-ml) var(--e-out), top var(--d-ml) var(--e-out), border-radius var(--d-ml) var(--e-out),
    background-color var(--d-m) var(--e-out), box-shadow var(--d-m) var(--e-out), color 0s linear 32ms; }
.a-hd.is-pill .a-hd__in { width: var(--hd-pill-w, fit-content); height: 52px; padding: 0 10px 2px 18px; gap: 32px; top: 14px; border-radius: 26px; background: var(--a-violet-pill); box-shadow: 0 10px 34px rgba(62,26,92,.34); color: var(--a-w);
  transition: width var(--d-l) var(--e-io), height var(--d-l) var(--e-io), padding var(--d-l) var(--e-io), gap var(--d-l) var(--e-io), top var(--d-l) var(--e-io), border-radius var(--d-l) var(--e-io),
    background-color var(--d-m) var(--e-out) 200ms, box-shadow var(--d-m) var(--e-out) 200ms, color 0s linear 260ms; }
/* ピルの下の内余白 2px … 中身（ロゴ・ナビ・CTA）を 1px 上げて見た目の中央に。幾何の中央（字形の中心 26.23px／ピル 26px）では「見た目が下にずれている」（しのさん 2026-10-06）。
   下に落とした影（0 10px 34px）でピルの重心が下に見え、和文の字は箱の中央でも低く見えるため。transform で上げると中の固定配置（ドロップダウン）の基準が変わるので padding で上げる */
.a-hd.is-measure .a-hd__in, .a-hd.is-measure .a-hd__in * { transition: none !important; }
.a-hd.is-measure .a-hd__in { width: max-content !important; }
.a-hd.is-init .a-hd__in, .a-hd.is-init .a-hd__in * { transition: none !important; }
.a-hd__logo { display: flex; flex: none; align-items: center; }
.a-hd__logo svg { height: 20.8px; width: auto; display: block; transition: height var(--d-ml) var(--e-out); }   /* ロゴは 16px の 130%（しのさん 2026-10-06 のコメント）。ピル 8 → 10.4px・1100px 以下 10 → 13px も同じ比 */
.a-hd__logo svg * { fill: currentColor; }
.a-hd.is-pill .a-hd__logo svg { height: 10.4px; transition: height var(--d-l) var(--e-io); }
.a-hd__nav { margin-left: auto; }
.a-nav { display: flex; align-items: center; gap: 32px; }
.a-ni__top { position: relative; top: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--a-mono); font-size: 12px; line-height: 15.008px; letter-spacing: .04em; white-space: nowrap; transition: opacity var(--d-m) var(--e-out); }
.a-ni__top::before { content: ""; position: absolute; left: -8px; right: -8px; top: -9px; bottom: -9px; }   /* 当たり判定を広げる（描画は変えない） */
/* 載せた時の見た目（:hover）は、載せられる端末だけ。指の端末は .is-tap（押している間だけ JS が押した所とその親に付ける・2026-10-08「SP はタップした瞬間に hover と同様の動きを。PC とは分ける」）で同じ見た目を出す。
   以下の :hover の規則はすべて「.is-tap の規則 ＋ @media (hover: hover) の :hover の規則」の対にしてある。
   載せた時の見た目は、載せられる端末（マウス・トラックパッド）だけ。タッチの端末は最後に触れた項目を :hover のまま残し、
   全面メニューを指でなぞると、名前の Violet と ↗ のずれが残っていった（しのさん 2026-10-08「SP でメニューをドラッグするとカーソルが残っていく」） */
.a-ni__top.is-tap { opacity: .62; } @media (hover: hover) { .a-ni__top:hover { opacity: .62; } }
@media (min-width: 1101px) { .a-ni__top { padding: 5px 0; margin: -5px 0; } }   /* 箱そのものを 25px に（見た目は不変。WCAG 2.5.8 の 24px） */
/* 項目（li）を flex にして、ナビの字とお問い合わせを li の行の基線から切り離す（しのさん 2026-10-06「ナビの字だけ 2px ほど下がっている」）。
   li は本文の字（max(14px, 14u)・行送り 1.8）の行を持ち、inline-flex の項目はその行の基線に乗っていた。画面が 1440px より広いと本文の字が大きくなり、
   ナビの字だけが下がった（1728px で 1.5px・1920px で 3.5px。1440px 以下では 0.6px）。flex の項目にすると、どの幅でもピルの中央に揃う。
   字は和文の字面が箱の中央より 0.5px 低いので、ラベルと矢印を 0.5px 上げてロゴの中心に合わせる */
@media (min-width: 1101px) {
  .a-nav > li { display: flex; align-items: center; }
  .a-ni__top > span, .a-hd__nav .a-hd__cta > span { translate: 0 -.5px; }
}
/* top は 0。第5版は等幅の書体の字形が中央より下にあったので 1px 上げていたが、Noto Sans JP に替えた後（2026-10-06）はその 1px で中央より 0.25〜1px 上にずれていた（しのさんの指摘）。外すとナビ・CTA の字が同じ高さに揃う（scripts/hdr-optical.mjs） */
button.a-ni__top::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: 45deg; translate: 0 -.5px; transition: rotate var(--t), translate var(--t); }   /* 矢印の字形の上下中央をラベルの字形に合わせる（等幅の書体の時期は -2px。Noto Sans JP では 1.5px 上に浮いていた・scripts/tmp/hdr-chev.mjs） */
.a-ni.is-open > button.a-ni__top::after { rotate: 225deg; translate: 0 2px; }
@media (min-width: 1101px) { button.a-ni__top::after { translate: 0 -1px; } .a-ni.is-open > button.a-ni__top::after { translate: 0 1.5px; } }   /* ラベルと一緒に 0.5px 上げる（上の flex の注記） */
.a-hd__cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 999px; background: var(--a-violet); color: var(--a-w); font-family: var(--a-mono); font-size: 12px; line-height: 15.008px; letter-spacing: .04em; white-space: nowrap; transition: background-color 0s linear 32ms, color 0s linear 32ms, transform var(--d-s) var(--e-out); }
.a-hd__cta::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: currentColor; opacity: 0; transition: opacity var(--d-xs) var(--e-out); }
.a-hd__cta.is-tap::after { opacity: .12; } @media (hover: hover) { .a-hd__cta:hover::after { opacity: .12; } }
.a-hd.is-pill .a-hd__cta { background: var(--a-w); color: var(--a-violet); transition: background-color 0s linear 260ms, color 0s linear 260ms, transform var(--d-s) var(--e-out); }
.a-hd__cta.is-press, .a-btn.is-press { transform: scale(.97); transition: transform var(--d-xs) var(--e-io); }
.a-hd__quick, .a-hd__menu { display: none; }
.a-hd__qs { display: none; }   /* スマホの表記「お問合わせ」（≤767 で入れ替える） */

/* パネル: 白い角丸のカード（Technologies のカード: r20・縁 #C9CDD3）。左 = 分類、右 = 選んだ分類の子と説明 */
.a-panel { position: fixed; top: calc(86px + env(safe-area-inset-top, 0px)); left: 50%; width: 920px; margin-left: -460px; padding: 24px; display: grid; grid-template-columns: 296px 1fr; column-gap: 24px;
  background: var(--a-w); color: var(--a-k); border: 1px solid var(--a-card-line); border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.12);
  visibility: hidden; opacity: 0; translate: 0 -8px; transition: opacity var(--d-m) var(--e-out), translate var(--d-m) var(--e-out), visibility 0s linear var(--d-m); }
.a-hd.is-pill .a-panel { top: calc(74px + env(safe-area-inset-top, 0px)); }
.a-ni.is-open > .a-panel { visibility: visible; opacity: 1; translate: 0 0; transition: opacity var(--d-m) var(--e-out), translate var(--d-m) var(--e-out), visibility 0s; }
html.no-js .a-ni:hover > .a-panel, html.no-js .a-ni:focus-within > .a-panel { visibility: visible; opacity: 1; translate: 0 0; }
/* 第5版: 右列を左列と同じ型に（行 48・本文 15/21 の和文・↗）。右列は子の項目から始める（頭に分類名を繰り返さない・2026-10-06）。右列は「出る 120ms e-in（→）／入る 300ms e-out（←から・行ごと 40ms）」
   地の色は付けない（しのさん 2026-10-07「背景のライトグレーは不要。selected 扱いのものはカーソルが表示されていて紫になっていればいい」。前は選んだ行に paper の地が滑って移り、載せた行にも薄い地が出ていた）。
   載せた行・選んでいる行は、字が Violet（載せた瞬間に。色の補間はしない）＋カーソルの括弧 */
.a-panel__cats { display: grid; gap: 2px; align-content: start; }   /* 位置の基準にしない（右列 .a-pc__kids の基準はパネル） */
.a-pc__btn { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; font: 500 15px/21px var(--a-jp); text-align: start; }
.a-pc__i { color: var(--a-g500); font-family: var(--a-mono); font-size: 12px; }
.a-pc__btn i { font-style: normal; font-family: var(--a-sans); font-size: 12px; color: var(--a-g500); transition: translate var(--t); }
.a-pc--parent > .a-pc__btn::after { content: ""; width: 6px; height: 6px; border-right: 1px solid var(--a-g500); border-top: 1px solid var(--a-g500); rotate: 45deg; transition: translate var(--d-m) var(--e-io), border-color var(--d-m) var(--e-out); }
a.a-pc__btn.is-tap i { translate: 3px -3px; } @media (hover: hover) { a.a-pc__btn:hover i { translate: 3px -3px; } }
.a-pc.is-active > .a-pc__btn::after { border-color: var(--a-k); translate: 2px 0; }
.a-pc.is-active .a-pc__i { color: var(--a-violet); }
.a-pc__t { position: relative; text-wrap: pretty; word-break: auto-phrase; }
.a-pc__btn:focus-visible .a-pc__t, .a-pc__btn.is-tap .a-pc__t { color: var(--a-violet); } @media (hover: hover) { .a-pc__btn:hover .a-pc__t { color: var(--a-violet); } }   /* メニューの項目も、載せると字が Violet・名前を括弧で囲む（サイトの他のボタンと同じ。点は無し） */
@media (min-width: 1101px) { .a-pc.is-active > .a-pc__btn .a-pc__t { color: var(--a-violet); } }   /* 選んでいる分類も Violet（地の代わり。全面メニュー〈1100 以下〉は分類が見出しなので付けない） */
.a-pc__kids { display: none; position: absolute; left: 344px; right: 24px; top: 24px; }
.a-pc.is-active > .a-pc__kids, .a-pc.is-leaving > .a-pc__kids { display: block; }
.a-pc.is-leaving > .a-pc__kids { animation: aKidsOut var(--d-xs) var(--e-in) forwards; pointer-events: none; }
.a-pc.is-active > .a-pc__kids .a-pk { animation: aKidIn var(--d-m) var(--e-out) both; animation-delay: calc(100ms + var(--k, 0) * 40ms); }
@keyframes aKidsOut { to { opacity: 0; transform: translateX(8px); } }
@keyframes aKidIn { from { opacity: 0; transform: translateX(-12px); } }
html.no-js .a-pc__kids { position: static; display: block; padding: 0 0 8px 36px; }
.a-pc__kids ul { display: grid; gap: 2px; }
.a-pk__a { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 6px; align-items: center; min-height: 48px; padding: 12px 14px; border-radius: 12px; }   /* 左 50px は右列の頭（番号）に字頭を揃えるためだった。頭を外したので左列の行と同じ 14px（2026-10-06） */
.a-pk__n { position: relative; font: 500 15px/21px var(--a-jp); }   /* 名前と説明の間 6px（前は 2px）: 載せた時の括弧（名前から 6px 外）が説明の字に掛からないように */
.a-pk__a i { font-style: normal; font-family: var(--a-sans); font-size: 12px; color: var(--a-g500); transition: translate var(--t); }
.a-pk__d { grid-column: 1 / -1; font: 400 13px/20px var(--a-jp); color: var(--a-g700); }
.a-pk__a.is-tap .a-pk__n { color: var(--a-violet); } .a-pk__a.is-tap i { translate: 3px -3px; } @media (hover: hover) { .a-pk__a:hover .a-pk__n { color: var(--a-violet); } .a-pk__a:hover i { translate: 3px -3px; } }

/* ================= hero（Technologies 0 HERO）: Prism（全面）・中央の明朝 92・罫・副文 20/1.8・SCROLL ================= */
.a-top { position: relative; overflow: clip; }
.a-prism { position: absolute; inset: 0; z-index: 0; background: var(--a-w);
  /* 背景の光と粒は、hero の下端（--hero-h）から節（ロゴの帯）の下端までで、ゆるやかに消す（しのさん 2026-10-07「利用シーンから探すとロゴ群の間に hero 背景の境界線がわかりやすく表示される」）。
     消え方は直線ではなく、始めと終わりをなだらかに（直線だと消え始めの所に段が見える） */
  --hero-h: clamp(640px, 100vh, calc(900 * var(--u)));
  --fade: linear-gradient(to bottom, #000 0, #000 var(--hero-h), rgba(0,0,0,.92) calc(var(--hero-h) + (100% - var(--hero-h)) * .15), rgba(0,0,0,.7) calc(var(--hero-h) + (100% - var(--hero-h)) * .35), rgba(0,0,0,.4) calc(var(--hero-h) + (100% - var(--hero-h)) * .55), rgba(0,0,0,.14) calc(var(--hero-h) + (100% - var(--hero-h)) * .78), transparent 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.a-prism canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.a-hero { position: relative; z-index: 1; height: 100vh; min-height: 640px; max-height: calc(900 * var(--u)); }
.a-hero__head { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 calc(30 * var(--u)) calc(40 * var(--u)); pointer-events: none; }
.a-hero__eyebrow { /* 第9版: 背景を Violet 基調にしたので、灰を少し濃く（g500 #6C7584 → #5F6775。背景の濃い所でもコントラスト比 4.5 以上） */ font-family: var(--a-mono); font-size: max(12px, calc(12 * var(--u))); line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: #5F6775; display: flex; align-items: center; gap: calc(14 * var(--u)); margin: 0 0 calc(36 * var(--u)); }
.a-hero__eyebrow { translate: .208em 0; }   /* 墨を中央に: 最後の字の後ろの字間（.18em の半分）と字の左右の余白の差で 2.5px 左に寄っていた（しのさん 2026-10-08「hero のコンテンツがセンターに来るように」） */
.a-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--a-g300); display: inline-block; }
/* 92u。A案の見出しは 14 字（Technologies は 10 字）なので、本文の器（左右 80u の内側）に収まる大きさを上限にする（1440 で 83px） */
.a-hero__title { font-family: var(--a-serif); font-weight: 700; font-size: min(calc(106 * var(--u)), calc((100vw - 2 * var(--a-gutter) - 68 * var(--u)) / 12.67)); line-height: 1.18; letter-spacing: 0; color: var(--a-k); display: flex; align-items: center; justify-content: center; gap: 0; white-space: nowrap; }
.a-hero__title > span { white-space: nowrap; }   /* 句の中では折らない（行末の句読点をぶら下げると、折り返してよい幅では「る、」が次の行へ回った） */
.a-hero__cm { margin-right: -.340em; }   /* PC の 1 行: 「、」の後ろに墨の間 0.40em の一息（字詰めは plans/plan_a.py の HERO_KERN。前は字間 +0.04em で「、」の後ろが 0.78em 空いた） */
.a-hero__mr { margin-right: -.974em; }   /* 行末の「。」はぶら下げ: 箱の右端を「る」の墨の右端＋行頭の字の左の余白に置き、字の本体で中央に揃える */   /* 第9版: 中央の縦線をやめた（しのさん）。2 つの句は「、」の字の余白だけでつなぐ */
.a-hero__sub { translate: .12em 0; font-family: var(--a-jp); font-weight: 400; font-size: calc(20 * var(--u)); line-height: 1.8; letter-spacing: .1em; color: #3A3F47; margin: calc(28 * var(--u)) 0 0; }
.a-hero__cta { position: relative; margin-top: calc(48 * var(--u)); display: flex; gap: calc(12 * var(--u)); align-items: center; pointer-events: auto; }
.a-hero__dl { position: relative; display: inline-flex; }
.a-hero__balloon { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; white-space: nowrap; font: 400 12px/1 var(--a-jp); color: var(--a-g700); }
.a-hero__balloon::before { content: "＼ "; } .a-hero__balloon::after { content: " ／"; }
.a-hero__scroll { position: absolute; left: 50%; bottom: calc(28 * var(--u)); transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); font-family: var(--a-mono); font-size: 12px; letter-spacing: .24em; color: var(--a-g500); margin: 0; }
.a-hero__scroll-line { width: 1px; height: calc(40 * var(--u)); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.45)); }

/* ボタン（Technologies .btn-pill ＋ 線の変種） */
.a-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: calc(44 * var(--u)); min-height: 40px; padding: 0 calc(24 * var(--u)); border-radius: 999px; background: var(--a-violet); color: var(--a-w); font: 500 max(13px, calc(13 * var(--u)))/1 var(--a-jp); white-space: nowrap; transition: background-color var(--t), transform var(--d-s) var(--e-out); }
.a-btn.is-tap { background: var(--a-violet-dk); } @media (hover: hover) { .a-btn:hover { background: var(--a-violet-dk); } }
.a-btn--line { background: var(--a-w); color: var(--a-k); box-shadow: inset 0 0 0 1px var(--a-k); }
.a-btn--line.is-tap { background: var(--a-paper); } @media (hover: hover) { .a-btn--line:hover { background: var(--a-paper); } }

/* ================= 導入クライアントロゴ帯 = signage plan-f.css L453–482 の写し（Technologies .f-logos と同じ）
   値は px/clamp/vw のまま。地は透明（Prism の上に乗る）・上下の罫なし ================= */
.a-logos { position: relative; z-index: 1; padding: clamp(40px, 6vh, 78px) 0 var(--a-sec); background: transparent; }
.a-logos__lead { margin: 0 clamp(20px, 4vw, 60px) clamp(26px, 3.4vw, 40px); font-size: 12px; letter-spacing: .14em; line-height: 1.9; color: #636363; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.a-logos__win { overflow: hidden; }
.a-logos__win + .a-logos__win { margin-top: clamp(22px, 2.6vw, 36px); }
/* 周期は Technologies（signage）の 58/47/66s から 60/48/72s（5:4:6）へ。非整数比の周期は位相がずれ続ける（ui-animation §3・d-x 第2周 軸7） */
.a-logos__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; will-change: transform; animation: aLogos 180s linear infinite; }   /* 半分が並び 3 つになったので、尺も 3 倍（速さは前と同じ） */
.a-logos__track--b { animation-name: aLogosRev; animation-duration: 144s; }
.a-logos__track--c { animation-duration: 216s; }
.a-logos__track li { flex: none; margin: 0 clamp(34px, 4.4vw, 64px) 0 0; }
.a-logos__track img { display: block; width: auto; opacity: .78; height: clamp(26px, 2.6vw, 35px); }
.a-logos__track li[data-sz="w"] img { height: clamp(22px, 2.2vw, 29px); }
.a-logos__track li[data-sz="s"] img { height: clamp(36px, 3.6vw, 48px); }
@keyframes aLogos { to { transform: translateX(-50%); } }
@keyframes aLogosRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ================= 1 利用シーン = Technologies 実物（採用サイトの .d-carousel / .d-pcard の値そのまま。px） ================= */
.a-work { padding: var(--a-sec) 0; --d-g1: 8px; --d-g2: 24px; --d-side: calc(30 * var(--u)); }
.a-work__hd { margin-bottom: var(--a-head); }
.a-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 560px; gap: var(--d-g2); overflow-x: auto; overflow-y: clip; scroll-snap-type: x proximity; overscroll-behavior-inline: contain;
  margin-inline: calc(var(--d-side) * -1); padding: 8px var(--d-side) var(--d-g2); margin-top: -8px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }
.a-pcard { scroll-snap-align: center; border-radius: 20px; background: var(--a-w); color: var(--a-k); border: 1px solid var(--a-card-line); padding: var(--d-g2); display: flex; flex-direction: column; gap: var(--d-g1); transition: transform .4s var(--e-io); }
.a-pcard__hd { display: grid; gap: 6px; }
.a-pcard__ttl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.a-pcard__h { font-family: var(--a-archivo); font-size: 34px; line-height: 38px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }   /* 見出しは語の途中で折らない。折る位置はデータの <wbr>（label_wbr）だけ */
.a-pcard__n { order: 2; flex: none; font-family: var(--a-amono); font-size: 12px; line-height: 15px; color: var(--a-g500); }
.a-pcard__cat { font-family: var(--a-jp); font-size: 12px; line-height: 18px; color: var(--a-g500); }   /* 分類はサイトのラベル（12/18 g500）と同じ書体（Technologies 2026-09-12 の変更） */
/* 場所名は 1 行（しのさん 2026-10-06「例の表示が 2 行にならない様に。1 行で、例が多い場合はマーキー」）。収まらないカードだけ JS が .is-marq を付けて
   同じ並びを 2 つつなげて左へ流す（30px/s・カーソルを載せても止めない＝しのさん 2026-10-06「hover で止まる意味はない」・画面の外では止める）。JS なし・動きを減らす設定は末尾を … で省く。流れの両端は字を淡くして切れ目を見せない */
.a-pcard__cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-pcard__cat.is-marq { text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 20px), transparent); }
.a-pcard__cat.is-marq .a-pcard__cattr { display: inline-flex; gap: 2.4em; will-change: transform; }
.a-pcard__pl { color: inherit; transition: color var(--d-s) var(--e-out); }   /* 場所名＝事例へのリンク。字はふだん通り（灰）、載せた時だけ VACAN Violet。流れ（マーキー）は止めない（しのさん 2026-10-07） */
.a-pcard__pl.is-hot, .a-pcard__pl.is-tap { color: var(--a-violet); } @media (hover: hover) { .a-pcard__pl:hover { color: var(--a-violet); } }   /* is-hot = カーソルの括弧が付いている場所名（js のカーソル。止めたカーソルの下へ流れてきた字も、括弧と同時に色を変える） */
.a-pcard__img { position: relative; display: block; aspect-ratio: 510 / 320; overflow: hidden; border-radius: 8px; clip-path: inset(0 round 8px); background: var(--a-paper); margin-top: 8px; }   /* しのさん 2026-10-05: 角丸 8px・枠線なし（clip-path は hover の拡大で角がはみ出さないように） */
.a-pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-l) var(--e-out); }
.a-pcard__img img.is-ui { object-fit: contain; padding: 16px; }   /* 製品の画面は切らずに収める */
.a-pcard__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; transition: transform var(--d-l) var(--e-out); }   /* サイネージの画面の録画（16:9）は切らずに収め、上下の余りは画面と同じ黒（しのさん 2026-10-07・大型施設の 2 枚目） */
.a-pcard.is-tap .a-pcard__img img, .a-pcard.is-tap .a-pcard__img video { transform: scale(1.03); } @media (hover: hover) { .a-pcard:hover .a-pcard__img img, .a-pcard:hover .a-pcard__img video { transform: scale(1.03); } }   /* 写真の拡大はサイト全体で 1.03 倍（しのさん 2026-10-08「利用シーン・課題から探すは 1.02、事例・資料は 1.03。1.03 に揃えて」） */
/* スライドショー（第9版・2 枚以上のカード。js の SLIDES）: 5s ごとに 800ms で重ねて替える。下端の細い線＝何枚目か・残り時間（載せている間・画面の外・動きを減らす設定では止まる） */
.a-pcard__img--slides img, .a-pcard__img--slides video { opacity: 0; transition: opacity 800ms cubic-bezier(.4,0,.2,1), transform var(--d-l) var(--e-out); }
.a-pcard__img--slides img.is-on, .a-pcard__img--slides video.is-on { opacity: 1; }
.a-pcard__img--slides img:not(.is-on), .a-pcard__img--slides video:not(.is-on) { pointer-events: none; }   /* 重ねた残りの写真がカーソルを取らない（取ると hover の解像が最後の 1 枚になった） */
/* スライドの進み（しのさん 2026-10-05「線がダサい」→ modelY の語彙で）: 1 枚 = 4px 角の升 6 つ（升の間は空けない＝数字の図の粒と同じ）。
   升が 1 つずつ点き、点いた升は Violet から白へ落ち着く（技術の図の「Violet の点が墨に落ち着く」と同じ動き）。補助なので画像の幅に広げず左下に小さく */
.a-pcard__bars { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: flex; gap: 8px; pointer-events: none; filter: drop-shadow(0 0 1px rgba(0,0,0,.32)); }   /* 下敷きは「目立ちすぎ」で外した（しのさん 2026-10-05）。明るい所で升の縁だけ見えるよう、1px のごく薄い影 */
.a-pcard__bars i { display: flex; }
.a-pcard__bars b { width: 4px; height: 4px; background: rgba(255,255,255,.4); }
.a-pcard__bars b.is-on { background: var(--a-w); animation: a-cell 640ms cubic-bezier(0,0,.2,1) both; }
@keyframes a-cell { from { background: var(--a-violet-lt); } to { background: var(--a-w); } }
.a-pcard__img[data-tone="light"] .a-pcard__bars { filter: none; }   /* 白地の画面は影なしで墨の升 */
.a-pcard__img[data-tone="light"] .a-pcard__bars b { background: rgba(0,0,0,.12); }
.a-pcard__img[data-tone="light"] .a-pcard__bars b.is-on { background: var(--a-k); animation-name: a-cell-lt; }
@keyframes a-cell-lt { from { background: var(--a-violet); } to { background: var(--a-k); } }
.no-js .a-pcard__bars { display: none; }   /* JS が無いと送らない（1 枚目のまま） */
.a-pcard__lead { font-family: var(--a-jp); font-weight: 500; font-size: 15px; line-height: 27px; color: var(--a-k); margin: 14px 0 0; word-break: auto-phrase; }
.a-pcard__body { font-family: var(--a-jp); font-size: 13px; line-height: 21px; color: var(--a-g700); }
.a-pcard__m { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--a-card-line); }
.a-pcard__link { font-family: var(--a-jp); font-size: 16px; line-height: 24px; padding: 2px 0; color: var(--a-k); display: inline-flex; gap: 4px; align-items: baseline; }
.a-pcard__link { position: relative; color: var(--a-violet); }   /* 字はふだんから Violet。載せた時は下線の代わりに群れの括弧（案11）。大きさ 16px／行送り 24px（しのさん 2026-10-07 コメント「フォントサイズを16pxにして」。前は 13px／20px） */
/* 右にカードが続く合図（しのさん 2026-10-07「利用シーンの右側にコンテンツがあることが分かりにくい瞬間がある。右にスクロールするまで、サイトのテイストに合った矢印でさりげなく促して」）:
   右端を白へぼかし（カードがその下へ続いて見える）、その中に hero の SCROLL と同じ語彙（12px・字間 .24em・灰・大文字）の「SCROLL」と 1px の矢印。矢印は 2.8 秒に 1 度、右へ 6px 寄ってから戻る（休みを長く）。
   右へ送ったら消えて、もう出さない（js: .is-done）。カードが 1 画面に収まる幅では出さない（.is-fit） */
.a-carwrap { position: relative; }
.a-carhint { position: absolute; top: 0; bottom: var(--d-g2); right: calc(var(--d-side) * -1); width: clamp(72px, 9vw, 132px); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; padding-right: clamp(14px, 2vw, 28px); pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.88) 42%, rgba(255,255,255,.96));   /* 字の下は白 .88 以上（写真の暗い所に字が沈まない。前は 55% で .72・字の左端は .4 で、人物の上で読めなかった） */ font-family: var(--a-mono); font-size: 12px; line-height: 1; letter-spacing: .24em; color: var(--a-g500); opacity: 1; transition: opacity var(--d-ml) var(--e-out); }
.a-carhint__t { margin-right: -.24em; }   /* 字間の最後の余白を打ち消し、矢印の右端と字の右端を揃える */
.a-carhint__a { display: block; width: 40px; height: 9px; color: var(--a-g500); animation: aCarHint 2.8s var(--e-io) 1.2s infinite; }
@keyframes aCarHint { 0%, 46%, 100% { transform: translateX(0); } 23% { transform: translateX(6px); } }
.a-carwrap.is-done .a-carhint, .a-carwrap.is-fit .a-carhint { opacity: 0; }
.a-carwrap.is-done .a-carhint__a, .a-carwrap.is-fit .a-carhint__a { animation: none; }
@media (prefers-reduced-motion: reduce) { .a-carhint__a { animation: none; } }
/* ================= 現在地インジケータ（案2「検出の軸」・しのさん 2026-10-07 採用） =================
   第3版（2026-10-08 しのさん「サイズは 2 倍に。番号とタイトルと % は一直線に縦に並べて上下センターに。スクロールをやめると元案どおりフェードアウト、
   スクロールを始めるとまたフェードイン」）:
   縦線（ページ全体の縮図）は画面の上下の真ん中に 400px（スマホ 320px）。節の境目の目盛りは縦線から左へ 6px、いまの節は濃い灰の線、
   いま見ている位置は目盛りと同じ 1px の線を縦線から右へ（Violet）。
   いまの節の番号・名前・全体の % は、縦線の右（本文の側）の 1 本の縦書きの列（画面の上下の真ん中・しのさん 2026-10-08「チャプター表示と % はインジケーターの右側に」）。列は送っている間だけ出す:
   動き始めたら 300ms e-out で現れ、止めて 1.2 秒たつと 200ms e-in で消える（元案の札と同じ間合い）。目盛りに載せている間は、その節の名前で出す。
   横の並び（1101 以上）: 縦線 16px ／ 位置の線 16〜26 ／ 列 32〜44（% → 名前）／ 本文 61〜（1440 で 80）。JS なし・全面メニューの間は出さない */
.a-ind { position: fixed; z-index: 700; top: 0; bottom: 0; left: 0; width: var(--a-gutter); pointer-events: none; --tx: 38px; --rx: 16px; --len: 400px; --tk: 6px; --mk: 10px; }
html.no-js .a-ind { display: none; }
.a-ind__ttl { position: absolute; top: 50%; left: var(--tx); translate: -50% -50%; writing-mode: vertical-rl; font: 400 12px/1 var(--a-jp); letter-spacing: .1em; color: var(--a-g700); white-space: nowrap;
  opacity: 0; transition: opacity var(--d-s) var(--e-in); }
.a-ind.is-moving .a-ind__ttl, .a-ind.is-preview .a-ind__ttl { opacity: 1; transition: opacity var(--d-m) var(--e-out); }
.a-ind__pc { margin-inline-end: 8px; letter-spacing: 0; color: var(--a-g500); }   /* % は名前の上（しのさん 2026-10-08「% の表示をテキストの上に」） */
.a-ind__pn { position: relative; font: 400 12px/1 var(--a-sans); font-variant-numeric: tabular-nums; text-combine-upright: all; }   /* 数は縦中横・％は全角で立てる */
.a-ind.is-preview .a-ind__t { color: var(--a-k); }   /* 目盛りに載せている間は、載せた節の名前（字を濃く） */
.a-ind__rl, .a-ind__sp, .a-ind__hs { position: absolute; left: var(--rx); width: 1px; }
.a-ind__rl { background: var(--a-line); }
.a-ind__sp { top: 0; height: 1px; background: var(--a-g500); transform-origin: 0 0; transition: transform var(--d-m) var(--e-out); }
.a-ind__hs { top: 0; height: 1px; background: var(--a-k); transform-origin: 0 0; opacity: 0; transition: opacity var(--d-s) var(--e-in); }   /* 載せている節の区間（いまの節より濃い墨）。しのさん 2026-10-08「hover すると縦線もその hover したチャプター部分が色が濃くなるように」 */
.a-ind.is-preview .a-ind__hs { opacity: 1; transition: opacity var(--d-xs) var(--e-out); }
.a-ind__rg { margin: 0; padding: 0; list-style: none; }
.a-ind__rg a { position: absolute; left: 0; width: calc(var(--tx) + 8px); pointer-events: auto; color: inherit; -webkit-tap-highlight-color: transparent; }   /* 押せる幅は余白の左端から縦書きの列の右まで（1440 で 46px・スマホ 26px。しのさん 2026-10-08「タッチエリアをもう少し横に広げて」。前は縦線の左右 10px ずつの 20px） */
/* 位置の線は送っている間だけ、縦線から右へスッと伸びて出る（しのさん 2026-10-08「横線もスクロールのタイミングでスッと表示されるように」）。出る 300ms e-out・消える 200ms e-in（縦書きの列と同じ拍）。
   縦線の左に出ていた目盛りは描かない（しのさん 2026-10-08「横棒の左側に出ている分は不要」）。各節の区間は押せるまま（載せると区間の縦線が濃くなる） */
.a-ind__rg a:focus-visible { outline: 2px solid var(--a-k); outline-offset: 2px; }
.a-ind__rd { position: absolute; top: 0; left: var(--rx); display: flex; align-items: center; height: 21px; margin-top: -10px; will-change: transform; }   /* 高さ 21 = 1px の線が 10px＝画素に乗る */
.a-ind__mk { flex: none; width: var(--mk); height: 1px; background: var(--a-violet); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-s) var(--e-in); }
.a-ind.is-moving .a-ind__mk, .a-ind.is-preview .a-ind__mk { transform: none; transition: transform var(--d-m) var(--e-out); }
@media (max-width: 1100px) { .a-ind { --tx: 36px; --mk: 8px; } }   /* 余白 48px: 位置の線 16〜24 ／ 列 30〜42 */
@media (max-width: 767px) { .a-ind { --tx: 18px; --rx: 6px; --len: 320px; --tk: 4px; --mk: 4px; } }   /* 余白 28px: 目盛り 2〜6 ／ 縦線 6 ／ 位置の線 6〜10 ／ 列 12〜24 */
@media (max-width: 767px) { .a-ind__t { display: none; } .a-ind__pc { margin-inline-end: 0; } }   /* スマホは % だけ（しのさん 2026-10-08「SP の時はタイトルテキスト不要で % だけでいい」） */
html.a-drawer .a-ind { visibility: hidden; }

/* 引っ張りの帯（指の端末・ページの一番上で下へ引いた時だけ。JS が html.is-ptr と --ptr-d を付ける）: ページ全体を引いた分だけ下げ、上にできた帯にことばを置く。
   字は帯の下端に寄せる（帯が字より低い間は、字の上側が画面の外に出るだけで、ヘッダーの上にはみ出さない） */
.a-ptr { position: fixed; z-index: 850; top: 0; left: 0; right: 0; height: var(--ptr-d, 0px); display: none; align-items: flex-end; justify-content: center; padding: 0 24px 12px; background: var(--a-w); pointer-events: none; }   /* 重なりはヘッダー（800）より上・解像の升（#rz 900）より下。切り取りはしない（升を集める時に、帯の外の字が外されて升が出なかった。はみ出しは画面の上の外へ出るだけ） */
html.is-ptr .a-ptr { display: flex; }
html.is-ptr .a-hd, html.is-ptr .a-ind, html.is-ptr main, html.is-ptr footer { translate: 0 var(--ptr-d, 0px); }
.a-ptr__t { margin: 0; max-width: 32em; font: 500 15px/1.6 var(--a-jp); letter-spacing: .02em; color: var(--a-k); text-align: center; text-wrap: pretty; word-break: auto-phrase; }
.a-ptr__l { display: block; }   /* 1 行ずつ（改行の位置は JS が意味の切れ目で決める） */
.a-ptr__c { position: relative; color: transparent; }   /* 打つ前の字は透明（場所は取っておく） */
.a-ptr__c.is-on { color: var(--a-k); }
.a-ptr__c.is-cur::after { content: ""; position: absolute; top: .18em; bottom: .12em; right: -.06em; width: 1.5px; background: var(--a-k); }   /* 打っている所の縦線 */   /* 全面メニューを開いている間は出さない */
@media (prefers-reduced-motion: reduce) { .a-ind__sp, .a-ind__hs, .a-ind__mk, .a-ind__ttl { transition: none !important; } }

/* スマホ: 次のカードが 1px も覗かない幅なので合図は要るが、見ているカードの写真には掛けない。
   ぼかしは写真の右（カードの余白・罫・カードの間）だけに収め、字は置かず矢印だけ（SCROLL の字は 60px あり、写真に重なる） */
@media (max-width: 767px) {
  .a-carhint { width: 44px; padding-right: 2px; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.88) 70%); }
  .a-carhint__t { display: none; }
  .a-carhint__a { width: 28px; height: 9px; }
}
.a-carnav { display: flex; align-items: center; justify-content: flex-end; gap: calc(24 * var(--u)); margin-top: 8px; font-family: var(--a-amono); font-size: 12px; line-height: 15px; color: var(--a-g500); }
.a-carnav button { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font: inherit; color: inherit; transition: color var(--t); }
.a-carnav button.is-tap:not(:disabled) { color: var(--a-k); } @media (hover: hover) { .a-carnav button:hover:not(:disabled) { color: var(--a-k); } }
.a-carnav button:disabled { opacity: .36; cursor: default; }
.a-carnav svg { width: 22px; height: 9px; display: block; color: inherit; }
.a-carnav__pos { font-variant-numeric: tabular-nums; }
/* 縦スクロールで横に送る固定（.is-pin）は 2026-10-07 にやめた（しのさん「使いにくいので通常通り横スクロールだけに」）。列は横スクロール＋スナップ */

/* ================= 2 サービス = Technologies サービスの行（写真 3:2・図 3:2・説明。罫で区切る） ================= */
.a-approach { padding: var(--a-sec) 0; }
.a-svcrows { margin-top: var(--a-head); }
.a-svcrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-gap); padding: var(--a-row) 0; align-items: start; }
.a-svcrow__photo { overflow: hidden; border-radius: calc(4 * var(--u)); }
.a-svcrow__media { display: block; overflow: hidden; border-radius: calc(4 * var(--u)); isolation: isolate; }   /* 写真だけを角丸で切る（しのさん 2026-10-07「この画像の 4 角に radius が入っていない。下部を確認して」: hover の 1.02 倍で、下の 2 角が説明文の下まで続く枠でしか切られず、ほぼ直角に見えていた）。isolation は Safari で拡大中も角丸で切るため */
.a-svcrow__photo img, .a-svcrow__photo video { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(4 * var(--u)); transition: transform var(--d-l) var(--e-out); }
.a-svcrow__photo video { display: block; background: var(--a-paper); }   /* 活かすの行の動画: 他の画像と同じく上下左右の中央で切る（しのさん 2026-10-07。前は下端を基準にしていた） */
.a-svcrow__media--vid { position: relative; }
.a-svcrow__media--vid::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .05); pointer-events: none; }   /* 動画の上に黒 5%（しのさん 2026-10-07「この動画の上にオーバーレイで黒を5%乗せて」）。hover で動画が 1.02 倍になっても、幕は枠に留まる */
.a-svcrow.is-tap .a-svcrow__photo img, .a-svcrow.is-tap .a-svcrow__photo video { transform: scale(1.03); } @media (hover: hover) { .a-svcrow:hover .a-svcrow__photo img, .a-svcrow:hover .a-svcrow__photo video { transform: scale(1.03); } }   /* 1.03 倍（利用シーンのカードと同じ） */
.a-svcrow__photo figcaption, .a-svcrow__figw figcaption { margin-top: calc(8 * var(--u)); }   /* 2 枚目の写真の下の文も同じ間（届ける・しのさん 2026-10-07） */
/* 画面の切り抜き（noma の端末）: 地の箱は外側の span が持ち、img は描かれる大きさそのもの（器だけ広い img は拡大表示と誤判定される・高解像度端末で甘くなる） */
.a-svcrow__pad { display: flex; justify-content: center; align-items: center; height: calc(291 * var(--u)); padding: 16px; background: var(--a-paper); border-radius: calc(4 * var(--u)); }
.a-svcrow--wide .a-svcrow__photo--fit img, .a-svcrow__photo--fit img { width: auto; height: 100%; max-width: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.a-svcrow__fig { aspect-ratio: 3 / 2; border-radius: calc(4 * var(--u)); overflow: hidden; background: var(--a-w); }
.a-svcrow__fig img { width: 100%; height: 100%; object-fit: cover; }
/* 白地に機器の図を置くときだけ枠の線で範囲を示す。写真は 1 枚目と同じく線なし（しのさん「画像に outline は不要」・利用シーンのカードと同じ） */
.a-svcrow__fig--fit { border: 1px solid var(--a-k14); }
.a-svcrow__fig--fit img { object-fit: contain; padding: 16px; }
.a-svcrow--wide .a-svcrow__photo { grid-column: span 2; }
.a-svcrow--wide .a-svcrow__photo img, .a-svcrow--wide .a-svcrow__photo video { aspect-ratio: auto; height: calc(291 * var(--u)); }
.a-svcrow__text { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.a-svcrow__text > .a-l15 { line-height: 1.75; }   /* 2〜3 行になる導入文。Technologies の .l15（19.5/15 = 1.3）は 1 行用の値（d-x 第1周: 行間不足 5 件） */
.a-steps { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); }
.a-steps li { display: flex; align-items: flex-start; gap: calc(8 * var(--u)); color: var(--a-g500); }
.a-steps li > svg { width: 22px; height: 9px; flex: 0 0 auto; margin-top: 4px; }   /* 行頭の └ だけ（リンクの中の群れの svg には当てない） */
.a-steps li:has(> a) > svg { margin-top: 7px; }   /* 製品名（16px／24px）の行は、└ の横線を名前の行の真ん中に（12px／18px の行より 3px 下） */
.a-steps a { position: relative; display: grid; gap: 6px; padding: 3px 0; color: var(--a-k); }   /* 名前と説明の間 6px: 名前の下の点（2px 下）と括弧（6px 外）が説明の字に掛からないように（前は 2px で、括弧の下の辺が説明の字の上端に約 0.6px 掛かった） */
.a-steps a b { position: relative; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--a-violet); }   /* 製品名は 16px（しのさん 2026-10-07 コメント「font sizeを16 pxにして」。前は説明と同じ 12px／18px）。説明は 12px のまま */   /* 製品名はふだんから Violet。載せた時は下線の代わりに群れの括弧（案11・しのさん 2026-10-07） */
.a-steps a > span { color: var(--a-g500); }
.a-steps__nb { white-space: nowrap; }   /* 注記つきの説明は「前半」「末尾の語＋注記」の 2 つのかたまり（折れる時はその間で） */
.a-steps__note { margin-left: .25em; font-size: 10px; line-height: 1; }   /* ※当社調べ: 10px（しのさん 2026-10-08「※当社調べは10pxでいい」。ページの下限 12px の例外はこの注記だけ）。頭の空白と合わせて約 .5em あける。行の高さは字と同じ（説明の 18px を引き継ぐと、基準線を揃えた時に行が 1px 伸びた） */

/* ================= 3 解決できること = Technologies 進め方の文の器（3600u・固定 900u）。中身は第6版の宣言（IT-3）と 3 案の動き ================= */
.a-loc { height: calc(3600 * var(--u)); min-height: 400vh; }
.a-loc__view { height: 100%; }
.a-loc__sticky { position: sticky; top: 0; height: 100vh; max-height: calc(900 * var(--u)); padding: 0 var(--a-gutter); overflow: clip; }
/* A案の宣言は 5 句・3 行（Technologies は 8 句・6 行）。上に寄せると固定枠の下 2/3 が空くので、枠の中で上下中央に置く（d-x 第1周） */
.a-loc__in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: calc(87 * var(--u)) 0 calc(60 * var(--u)); }
.a-loc__label { position: relative; z-index: 1; opacity: .64; margin-bottom: calc(48 * var(--u)); }
/* 第6版: 宣言は IT-3「わかる。まてる。まわれる。」。左に大きな動詞 3 つ（h2）、右に機能名 3 つ（その節への行き先）。
   2 つの列は親の 3 段を subgrid で共有し、機能名は動詞の行の下端（字の下から 20%）に揃う。字の大きさは JS が枠に合わせて決める（--decl-fs） */
.a-decl { --fs: var(--decl-fs, calc(180 * var(--u))); position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat(3, auto); column-gap: calc(64 * var(--u)); }
.a-decl__vs { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; margin: 0; font: 400 var(--fs)/1.08 var(--a-jp); letter-spacing: -.03em; color: var(--a-k); }
.a-decl__v { position: relative; display: block; white-space: nowrap; }
.a-decl__v.is-key { color: var(--a-violet); }
.a-decl__fs { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.a-decl__f { align-self: end; display: grid; gap: 6px; padding-bottom: calc(var(--fs) * .2); pointer-events: auto; }
.a-decl__f a { justify-self: start; display: inline-flex; align-items: baseline; gap: 12px; padding: 4px 0; font: 500 max(16px, calc(20 * var(--u)))/1.4 var(--a-jp); color: var(--a-k); }
.a-decl__f a.is-tap .a-decl__fn { text-decoration: underline; } @media (hover: hover) { .a-decl__f a:hover .a-decl__fn { text-decoration: underline; } }
.a-decl__n { font-family: var(--a-mono); font-size: 12px; letter-spacing: .04em; color: var(--a-violet); }
.a-decl__p { padding-left: calc(12px + 2.6ch); font-size: 12px; line-height: 18px; color: var(--a-g500); word-break: auto-phrase; }
/* 機能名は、その動詞が出来上がった時に出る（3 案共通。JS が .is-on。JS が無い・動きを減らす設定では最初から出ている） */
html:not(.no-js) .a-decl__f { opacity: 0; transform: translateY(8px); transition: opacity var(--d-ml) var(--e-out), transform var(--d-ml) var(--e-out); }
html:not(.no-js) .a-decl__f.is-on { opacity: 1; transform: none; }
/* 案3「走査と認識」: 読み取る前の字は薄い灰。走査線が通った字が黒（要は Violet）になり、検出の括弧が付く。hover で、その働きを持つサービス名が出る */
html:not(.no-js) .a-loc[data-mode="3"] .a-decl__v { color: rgba(0,0,0,.14); transition: color var(--d-m) var(--e-out); }
html:not(.no-js) .a-loc[data-mode="3"] .a-decl__v.is-rec { color: var(--a-k); }
html:not(.no-js) .a-loc[data-mode="3"] .a-decl__v.is-key.is-rec { color: var(--a-violet); }
.a-decl__brk { --arm: calc(var(--fs) * .12); position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transform: scale(1.14); transition: opacity var(--d-s) var(--e-out), transform var(--d-m) var(--e-out); }
.a-decl__brk.is-on { opacity: 1; transform: none; }
.a-decl__brk.is-on.is-rest { opacity: .28; }
.a-decl__brk.is-on.is-rest.is-hot { opacity: 1; }
.a-decl__brk i { position: absolute; width: var(--arm); height: var(--arm); border: 0 solid var(--a-violet); transition: border-width var(--d-s) var(--e-out); }
.a-decl__brk i:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; } .a-decl__brk i:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.a-decl__brk i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; } .a-decl__brk i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.a-decl__brk.is-hot i:nth-child(1) { border-width: 3px 0 0 3px; } .a-decl__brk.is-hot i:nth-child(2) { border-width: 3px 3px 0 0; } .a-decl__brk.is-hot i:nth-child(3) { border-width: 0 0 3px 3px; } .a-decl__brk.is-hot i:nth-child(4) { border-width: 0 3px 3px 0; }
.a-decl__scan { position: absolute; left: calc(-24 * var(--u)); right: 0; top: 0; height: 1.5px; background: var(--a-violet); pointer-events: none; opacity: 0; will-change: transform; }
.a-decl__scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--fs) * .4); background: linear-gradient(to bottom, rgba(81,35,118,0), rgba(81,35,118,.12)); }
html:not(.no-js) .a-loc[data-mode="3"] .a-decl__p { opacity: 0; transform: translateY(-4px); transition: opacity var(--d-s) var(--e-out), transform var(--d-s) var(--e-out); }
html:not(.no-js) .a-loc[data-mode="3"] .a-decl__f.is-hot .a-decl__p { opacity: 1; transform: none; }
/* 案1「解像」: 出来上がる前の動詞は字を透明にし、canvas がブロック（粗→細）で描く。出来上がった動詞は hover の所だけ、字がブロックに戻る（レンズ） */
.a-decl__cv { position: absolute; left: 0; top: 0; pointer-events: none; }
.a-loc[data-mode="1"] .a-decl__v.is-unres { -webkit-text-fill-color: transparent; }
.a-loc[data-mode="1"] .a-decl__v.is-lens { -webkit-mask-image: radial-gradient(circle var(--lr) at var(--mx) var(--my), transparent calc(var(--lr) - 1px), #000 var(--lr)); mask-image: radial-gradient(circle var(--lr) at var(--mx) var(--my), transparent calc(var(--lr) - 1px), #000 var(--lr)); }
/* 案2「点群から字へ」: 固定枠いっぱいの canvas に点を描き、点が字の形に集まりきったら本物の字に入れ替える */
.a-loc__pc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.a-loc[data-mode^="2"] .a-decl__v { transition: opacity var(--d-m) var(--e-out); }
html:not(.no-js) .a-loc[data-mode^="2"] .a-decl__v.is-part { opacity: 0; }

/* ================= 3.5 検知・解析・配信 = VACAN SIGNAGE .f-about の写し（vacancorp/vacan-cms main signage/css/plan-f.css L254–287・L637–639・L890–904）
   左: sticky の見出し＋リード（0.86fr）／右: 3 段（1.14fr・段の間 clamp(56px,10vh,110px)）。各段 = 240px 角の点群（three.js・js の POINTS）に段の名前を重ね、横に本文。
   値は signage の px / clamp / vw のまま。書体だけ A案の明朝（Shippori Mincho B1）に置き換えた（Marcellus・Zen Old Mincho を足さない）。罫は signage の #b9b9b5 に近い g300 ================= */
.a-about { padding: var(--a-sec) var(--a-gutter) 0; }
.a-about__wrap { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(30px, 5vw, 76px); }
.a-about__pin { position: sticky; top: 0; height: 100vh; max-height: 900px; display: flex; flex-direction: column; justify-content: center; }
/* 第7版: 文字はページの型に揃える（見出し = 他の節と同じ .a-h36、リード = .a-l27、段の文 = .a-l15r の和文ゴシック）。
   signage の明朝（Marcellus・Zen Old Mincho の写し）と英字の大見出しは、この節だけ書体が変わって浮いていた（しのさん指摘）。構造・寸法・点群はそのまま */
.a-about__lead { max-width: 22em; }
.a-about__steps { display: grid; gap: clamp(56px, 10vh, 110px); padding: 10vh 0; }
.a-step { padding-top: 26px; }   /* 罫はページの他の行と同じ k14 */
.a-step p { max-width: 34em; margin: 0; font-family: var(--a-jp); font-size: max(14px, calc(15 * var(--u))); line-height: 1.8; color: var(--a-g700); word-break: auto-phrase; }
@media (min-width: 1280px) {
  .a-step { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: clamp(26px, 2.6vw, 40px); align-items: center; }
  .a-step > .a-step__obj { grid-column: 1; } .a-step > p { grid-column: 2; }
}
.a-step__obj { width: 100%; max-width: 240px; aspect-ratio: 1 / 1; margin: 0; position: relative; }
.a-step__obj canvas { display: block; width: 100%; height: 100%; }
.a-step__obj[data-obj="rings"] canvas { position: absolute; left: 50%; top: 50%; width: 140%; height: 140%; translate: -50% -50%; }   /* 配信の輪は枠の 140% で描く（JS の zoom: 1.4 と対）。枠・列・本文の位置は変えず、絵だけ大きく。はみ出すのは端の薄い点で、列の間の余白に収まる */
.a-step__obj h3 { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--a-jp); font-size: max(22px, calc(28 * var(--u))); font-weight: 400; letter-spacing: .02em; line-height: 1.4; color: var(--a-k); }
@media (max-width: 900px) {
  .a-about__wrap { grid-template-columns: 1fr; }
  .a-about__pin { position: static; height: auto; max-height: none; padding-bottom: 40px; }
  .a-about__steps { padding: 0 0 40px; gap: 50px; }
  .a-step { text-align: center; }
  .a-step__obj { max-width: min(74vw, 300px); margin: 0 auto 18px; }
  .a-step__obj h3 { font-size: clamp(26px, 7vw, 32px); }
  .a-step p { margin-inline: auto; }
}

/* ================= 4 技術 = Technologies 工程（sui.io の写し: 節 pad 0 195・container 1050・見出し 90/106 sticky・列 463・
   右 pad-top 124／左 800・gap 944・カード 463 幅・sticky@315 の点線 250 ＋ violet の四角と尾）
   第5版: 中身を「導入までの流れ」から「技術 6」に。図は機械の視覚（点の格子・検出の括弧・走査線・mono のラベル）で描き直し、背骨に Violet の粒が流れる ================= */
.a-stack { padding: 0 calc(195 * var(--u)) var(--a-sec); overflow: clip; overflow-anchor: none; background: var(--a-w); color: var(--a-k); }
/* overflow-anchor: none … カードが開くと上のカードの高さが伸び、ブラウザのスクロール固定（scroll anchoring）が画面を勝手に送っていた（第5版で実測: 跳んだ後 0.4s で +470px）。この節は固定の対象から外す */
.a-tl { width: calc(1050 * var(--u)); max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: calc(154 * var(--u)); }
.a-tl__stage { height: 140vh; min-height: calc(900 * var(--u)); }
.a-tl__heading { position: sticky; top: calc(50vh - 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.a-tl__hin { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(21 * var(--u)); opacity: 0; will-change: transform, opacity; }   /* 横いっぱい（中身に合わせると、スマホで見出しの幅まで縮み、リードの 1 文が途中で折れた） */
html.no-js .a-tl__hin { opacity: 1; }
.a-tl__lead { width: 100%; color: var(--a-g500); text-align: center; max-width: calc(620 * var(--u)); word-break: auto-phrase; }   /* 幅を中身に合わせない（行末の「。」のぶら下げで中身の幅が縮むと箱も縮み、1 文の行が途中で折れた）。上限 620u の中で中央揃え */
.a-tl__ls { display: block; }   /* 2 文を 1 文ずつの行に（意図した行分割。幅が足りなければ各文の中で文節で折れる） */
.a-tl__eyebrow { font-family: var(--a-mono); font-size: 12px; line-height: 1; letter-spacing: .18em; margin-right: -.18em; color: var(--a-violet); }   /* 最後の字の後ろの字間を打ち消して中央に（前は 0.9px 左に寄っていた） */
.a-tl__main { position: relative; height: calc(4020 * var(--u)); }
.a-tl__col { position: absolute; top: 0; width: calc(463 * var(--u)); display: flex; flex-direction: column; gap: calc(944 * var(--u)); will-change: transform, opacity; opacity: 0; transform: translateY(30%); }
html.no-js .a-tl__col { opacity: 1; transform: none; }
.a-tl__col--l { left: calc(1 * var(--u)); padding-top: calc(800 * var(--u)); }
.a-tl__col--r { left: calc(586 * var(--u)); padding-top: calc(124 * var(--u)); }
.a-tlc { --nc: max(22px, calc(26 * var(--u))); --tl: calc(32 * var(--u) + var(--nc)); --cw: calc(393 * var(--u)); position: relative; width: calc(463 * var(--u)); background: var(--a-w); border: 1px solid var(--a-card-line); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.a-tlc__row { position: relative; height: calc(74 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.a-tlc__row--b { height: auto; min-height: calc(96 * var(--u)); padding: calc(8 * var(--u)) calc(100% - var(--tl) - var(--cw) * 341 / 393) calc(20 * var(--u)) var(--tl); align-items: flex-start; }   /* 本文は題の頭に揃える（左 20u ＋ 番号の列 --nc ＋ 間 12u） */
/* 題・図・本文の左を揃え、本文の幅を図の幅にする（しのさん 2026-10-08「説明テキストの width は図の width に合わせて。左は合ってるが右がはみ出ている」）。
   図 = canvas（幅 --cw）の中に描く絵の範囲。設計空間 393 のうち 26〜367（01 の枠の括弧）。canvas の左を「題の頭 − 26/393 の幅」に置き、本文の右を「題の頭 ＋ 341/393 の幅」で止める。
   前は canvas を中央に置いていて、枠の左が題より 5u 右・本文の右が枠より 28〜56px 外だった */
.a-tlc__num { width: var(--nc); flex: 0 0 auto; font-family: var(--a-jp); font-weight: 500; font-size: max(12px, calc(14 * var(--u))); line-height: max(17px, calc(19.6 * var(--u))); color: var(--a-g500); font-variant-numeric: tabular-nums; }   /* 第8版 改: 枠なしの半角数字（本文と同じ書体）。Doto・枠をやめた */
.a-ts14 { font-family: var(--a-mono); font-size: max(12px, calc(14 * var(--u))); line-height: max(17px, calc(19.6 * var(--u))); letter-spacing: calc(-.28 * var(--u)); color: var(--a-k); }
.a-ts18 { font-family: var(--a-jp); font-size: max(14px, calc(18 * var(--u))); line-height: max(22px, calc(28 * var(--u))); letter-spacing: -.02em; color: var(--a-g500); word-break: normal; line-break: strict; }
.a-ts18 .a-nw { white-space: nowrap; }
.a-ts18 { text-wrap: wrap; }   /* body の pretty は Safari では全部の行を短めに揃え、行が図の右端まで届かなかった（402pt で 1 行 13 字・右に 69pt 余る）。最後の行の短さは生成器が末尾 4 字をかたまりにして防ぐ */   /* 本文は字単位で折り（行頭の「ー」などは strict で禁止）、カタカナ語・英数字の語は割らない（生成器の nowrap_words）。文節で折ると行末が最大 122px 空いた（2026-10-08） */
.a-tlc__anim { position: relative; height: 0; padding-left: calc(var(--tl) - var(--cw) * 26 / 393); display: flex; align-items: stretch; justify-content: flex-start; overflow: hidden; }
html.no-js .a-tlc__anim { height: calc(272 * var(--u)); }
html.no-js .a-tlc { --ah: calc(272 * var(--u)); }
.a-tlc__rive { flex: none; width: calc(425 * var(--u)); height: calc(272 * var(--u)); padding-right: calc(32 * var(--u)); display: flex; align-items: center; justify-content: center; transform-origin: bottom center; transform: scale(.7); opacity: 0; will-change: transform, opacity; }
html.no-js .a-tlc__rive { transform: none; opacity: 1; }
.a-tl-canvas { width: calc(393 * var(--u)); height: calc(272 * var(--u)); display: block; }
.a-tlc__roles { margin-left: auto; display: flex; gap: calc(6 * var(--u)); flex: none; }
.a-tlc__role { font-family: var(--a-mono); font-size: 12px; line-height: 1; letter-spacing: .06em; padding: 5px 7px 4px; border-radius: 3px; background: var(--a-k); color: var(--a-w); white-space: nowrap; }
.a-tlc__role--analyze { background: var(--a-violet); }   /* 推論の段だけ Violet（図の中の推論＝括弧・予測の帯と同じ色） */
.a-tlc__title { font-weight: 400; font-family: var(--a-jp); }   /* 番号と同じ書体の行の高さに揃える（基線を合わせる。見える字は元から Noto Sans JP） */
/* 第7版: 上の番号の箱の下端から、下の「内容」の箱の上端までを 1 本の線で結ぶ（線の長さ = 33u ＋ 図の高さ --ah。JS が開閉に合わせて書く）。
   sui.io の写しの L 字（縦線＋下端の横線）は、下の箱を縦に貫いて箱の下へはみ出し、重なって壊れて見えた（しのさん指摘） */
.a-tl__prog { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; opacity: 0; }
.a-tl__cur { position: sticky; top: calc(315 * var(--u)); width: 2px; height: calc(250 * var(--u)); z-index: 2; }
.a-tl__cur::before, .a-tl__cur::after { content: ""; position: absolute; left: 0; right: 0; height: 12%; z-index: 3; pointer-events: none; }
.a-tl__cur::before { top: 0; background: linear-gradient(to bottom, #fff, rgba(255,255,255,0)); }
.a-tl__cur::after { bottom: 0; background: linear-gradient(to top, #fff, rgba(255,255,255,0)); }
.a-tl__tt, .a-tl__tb { position: absolute; left: 0; width: 2px; height: 0; background: var(--a-violet); }
.a-tl__tt { bottom: 50%; margin-bottom: 15px; }
.a-tl__tb { top: 50%; margin-top: 15px; }
.a-tl__dots { position: absolute; left: 0; top: 0; width: 2px; height: 100%; color: var(--a-k); opacity: 0; }
.a-tl__dots svg { display: block; width: 2px; height: 100%; }
.a-tl__v { position: absolute; left: 1px; top: 50%; width: 16px; height: 16.36px; padding: 7px 5px; box-sizing: content-box; background: var(--a-w); transform: translate(-50%, -50%); fill: var(--a-violet); z-index: 2; display: block; }   /* 上下 7px の白い余白で、背骨の点と線を V の先から離す（続いていると Y に見えた） */   /* 第8版 改: 中央の四角を VACAN ロゴの V に（ロゴの多角形そのまま・幅 16px） */
/* 背骨を流れるデータの粒（4px・2s ＝ 図の 4s の半分。3 粒を 1/3 周期ずつずらす。連続の流れなので linear） */
.a-tl__pp { position: absolute; left: -1px; top: 0; width: 4px; height: 4px; background: var(--a-violet); opacity: 0; animation: aPP 3.333s linear infinite; }   /* 第7版: 2s → 3.333s（速さ 60%・しのさん指示。図の 4s とは 5:6 の整数比） */
.a-tl__pp:nth-of-type(2) { animation-delay: -1.111s; } .a-tl__pp:nth-of-type(3) { animation-delay: -2.222s; }
@keyframes aPP { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(calc(246 * var(--u))); opacity: 0; } }

/* ================= 5 数字 = Technologies NUMBERS（行 226・ラベル 18/1.6 g700・数字 180 x691 幅 110/桁・単位 36） ================= */
.a-results { padding: var(--a-sec) 0; }
.a-stats { margin-top: var(--a-head); }
.a-stat { position: relative; min-height: calc(226 * var(--u)); display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: calc(24 * var(--u)); }
.a-stat__label { padding-top: calc(9 * var(--u)); font-size: max(12px, calc(18 * var(--u))); line-height: 1.6; color: var(--a-g700); max-width: calc(520 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
.a-stat__claim { font-weight: 500; color: var(--a-k); word-break: auto-phrase; }
.a-stat__cond { font-size: max(12px, calc(12 * var(--u))); line-height: 1.5; color: var(--a-g500); word-break: auto-phrase; text-wrap: pretty; }   /* 「10／分」のように数と単位の間で折れないよう、文節で折る */
.a-stat__src { justify-self: start; font-size: max(12px, calc(12 * var(--u))); line-height: 1.5; color: var(--a-k); }
.a-stat__src.is-tap { text-decoration: underline; } @media (hover: hover) { .a-stat__src:hover { text-decoration: underline; } }
.a-odo { position: absolute; left: calc(691 * var(--u)); top: calc(50% - 6 * var(--u)); translate: 0 -50%; display: flex; align-items: baseline; color: var(--a-k); font-family: var(--a-sans); font-weight: 400; font-size: calc(180 * var(--u)); line-height: calc(180 * var(--u)); letter-spacing: calc(-7.2 * var(--u)); font-variant-numeric: tabular-nums; }
.a-digit { display: inline-block; width: calc(110 * var(--u)); height: calc(180 * var(--u)); overflow: hidden; text-align: center; }
.a-digit--sym { width: calc(100 * var(--u)); }
.a-reel { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.a-reel span { display: block; height: calc(180 * var(--u)); }
html.no-js .a-reel { transform: translateY(calc(var(--d) * -10%)); }
/* 大きな数字は行の上下の中央に（しのさん 2026-10-06「少し上に上がりすぎ。各項目の上下センターに」）。前は行の上端から 9u に固定。
   中央の基準は、行の字の範囲（主張の 1 行目の字の上端〜図の下の注記の下端）の真ん中＝行の箱の中央より 6u 上（下の 24u の余白に字が無いため）。数字の字面の中心は箱の中心と同じ */
.a-odo__unit { margin-left: calc(12 * var(--u)); color: var(--a-g500); align-self: flex-end; padding-bottom: calc(28 * var(--u)); font-family: var(--a-jp); font-size: calc(36 * var(--u)); line-height: calc(39.6 * var(--u)); letter-spacing: calc(-1.08 * var(--u)); }

/* 数字の節の図（第8版 改・しのさん「複雑すぎて一見して分からない」）: 2 本の棒（行の下端に置く＝4 行で図の位置が揃う。数の列は 3.4em で固定＝棒の右端が揃う）。導入前＝灰、導入後＝Violet、棒の残りは薄い地。
   長さの違いだけで読めるように、目盛り・凡例・尺は置かない。「倍」の行だけ 1 倍ずつの区切り（数えても読める）。箱根だけ、出典にある 90分 / 10分 を棒の端に書く
   動き（js の BARS）: 走査線が左→右へ通った所から棒が解ける → 導入後の棒が、導入前と同じ長さから縮む（離れた分はブロックに崩れて消える）／区切りが 1 つずつ増える */
.a-stat { flex-direction: column; }
.a-bars { position: relative; margin: auto 0 0; padding-top: calc(28 * var(--u)); width: 100%; max-width: calc(520 * var(--u)); display: grid; grid-template-columns: 3em minmax(0, 1fr) 3.4em; column-gap: max(10px, calc(12 * var(--u))); row-gap: max(8px, calc(10 * var(--u))); align-items: center; font-size: 12px; }
.a-bars > :nth-child(1) { grid-area: 1 / 1; } .a-bars > :nth-child(2) { grid-area: 1 / 2; } .a-bars > :nth-child(3) { grid-area: 1 / 3; }
.a-bars > :nth-child(4) { grid-area: 2 / 1; } .a-bars > :nth-child(5) { grid-area: 2 / 2; } .a-bars > :nth-child(6) { grid-area: 2 / 3; }
.a-bars__l { font-family: var(--a-jp); font-size: 12px; line-height: 1; color: var(--a-g500); }
.a-bars__tr { position: relative; display: block; height: max(14px, calc(18 * var(--u))); background: var(--a-paper); }
.a-bars__b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--a-g300); transform-origin: 0 50%; }
.a-bars__b--1 { background: var(--a-violet); }
/* 縮む時に離れた分（js が見せて消す）: 灰の市松＝ブロックに崩れた棒 */
.a-bars__res { position: absolute; top: 0; bottom: 0; left: var(--w); width: calc(var(--f) - var(--w)); opacity: 0; background: conic-gradient(var(--a-g300) 25%, transparent 0 50%, var(--a-g300) 0 75%, transparent 0) 0 0 / 6px 6px; }
.a-bars__tr--u { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; background: none; }
.a-bars__c { position: relative; display: block; background: var(--a-paper); }
.a-bars__c > b { position: absolute; inset: 0; }
.a-bars__c--g > b { background: var(--a-g300); } .a-bars__c--v > b { background: var(--a-violet); } .a-bars__c--r > b { background: var(--a-violet-lt); }
.a-bars__v { font-family: var(--a-jp); font-size: 13px; line-height: 1; color: var(--a-g700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-bars__v--1 { color: var(--a-violet); font-weight: 500; }
.a-bars.is-pre .a-bars__b, .a-bars.is-pre .a-bars__c > b { clip-path: inset(0 100% 0 0); }   /* 走査の前（js が付ける。JS なし・動きを減らす設定では付かない） */
.a-bars.is-pre .a-bars__v { opacity: 0; }
.a-bars__scan { grid-area: 1 / 2 / 3 / 3; align-self: stretch; position: relative; pointer-events: none; }
.a-bars__beam { position: absolute; top: -6px; bottom: -6px; left: 0; width: 40px; margin-left: -40px; opacity: 0; border-right: 1.5px solid var(--a-violet); background: linear-gradient(to right, rgba(81,35,118,0), rgba(81,35,118,.14)); will-change: transform, opacity; }
.a-bars__beam::before { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 12px; background: conic-gradient(rgba(81,35,118,.3) 25%, transparent 0 50%, rgba(81,35,118,.3) 0 75%, transparent 0) 0 0 / 6px 6px; }   /* 走査の前縁のブロック（解像） */

.a-gfx { position: relative; display: block; }
/* 走査線（入場の時だけ）: 1.5px の Violet ＋ 前縁のブロック ＋ 尾 */
.a-beam { position: absolute; top: -6px; bottom: -6px; left: 0; width: 40px; margin-left: -40px; opacity: 0; border-right: 1.5px solid var(--a-violet); background: linear-gradient(to right, rgba(81,35,118,0), rgba(81,35,118,.14)); pointer-events: none; will-change: transform, opacity; }
.a-beam::before { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 12px; background: conic-gradient(rgba(81,35,118,.3) 25%, transparent 0 50%, rgba(81,35,118,.3) 0 75%, transparent 0) 0 0 / 6px 6px; }

/* 数字の節の図（第9版・案 B「削減した分を認識する」・しのさん選定）: 1 本の棒（灰＝残る／Violet＝消えた分）＋ 検出の枠（技術の節の図の括弧と同じ角）＋ 札 */
.a-split { position: relative; margin: auto 0 0; padding-top: calc(28 * var(--u)); width: 100%; max-width: calc(520 * var(--u)); font-family: var(--a-jp); font-size: 12px; line-height: 1; color: var(--a-g500); }
.a-split__cap, .a-split__foot { display: block; }
.a-split__cap { margin-bottom: calc(12 * var(--u)); padding-left: 4px; }
.a-split__foot { margin-top: calc(10 * var(--u)); padding-left: 4px; }
.a-split__tr { height: 21px; margin: 0 4px; }   /* 点が 4 行（767 以下は 3 行の 16px） */   /* 検出の枠の角（外へ 4px）が本文の左右の端を越えないように */
.a-split__keep, .a-split__cut, .a-split__rng { position: absolute; top: 0; bottom: 0; }
.a-split__keep { background: var(--a-g300); }
.a-split__cut { background-color: var(--a-violet); }
.a-split__rng { background-color: var(--a-violet-lt); }
/* 削減した分は四角い点の集まり（第9版・しのさん）: 隙間なしの約 5px 角の升。ふだんは点が 1 つずつチラチラ明滅する（AI が計算し続けている。js の FLK が重ねた canvas）。
   止まっている所は均一の Violet（升ごとの淡いモザイク・隙間の格子は 2026-10-05 にやめた） */
.a-split__fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.a-split__cut.is-build { background-color: transparent; }   /* 入場で升が積み上がる間は、紫の地を出さず canvas の升だけ（積み終わると地に戻す） */
@media (max-width: 767px) { .a-split__tr { height: 16px; } }
.a-split__det { --c: var(--a-violet); --k: 8px; --t: 1.5px; position: absolute; top: -5px; bottom: -5px; left: calc(var(--l) - 4px); width: calc(var(--w) + 8px);
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--k) var(--t), linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--k), linear-gradient(var(--c), var(--c)) 100% 0 / var(--k) var(--t), linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--k),
              linear-gradient(var(--c), var(--c)) 0 100% / var(--k) var(--t), linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--k), linear-gradient(var(--c), var(--c)) 100% 100% / var(--k) var(--t), linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--k);
  background-repeat: no-repeat; }
.a-split__det { opacity: 0; transition: opacity 160ms cubic-bezier(.4,0,1,1); }   /* 検出の枠はふだん出さない（しのさん 2026-10-05）。hover の時だけ .is-det で出す */
.a-stat.is-det .a-split__det { opacity: 1; transition: none; }
.a-split__lab { position: absolute; top: -5px; bottom: -5px; left: calc(var(--l) - 4px); width: calc(var(--w) + 8px); pointer-events: none; }   /* 札は枠と切り離して、hover でも動かさない */
.a-split__lab b { position: absolute; right: 0; bottom: calc(100% + 4px); padding: 3px 6px; border-radius: 3px; background: var(--a-violet); color: var(--a-w); font-weight: 500; font-size: 12px; line-height: 1; white-space: nowrap; }
.a-split.is-pre .a-split__keep, .a-split.is-pre .a-split__cut, .a-split.is-pre .a-split__rng { clip-path: inset(0 100% 0 0); }
.a-split.is-pre .a-split__lab, .a-split.is-pre .a-split__cap, .a-split.is-pre .a-split__foot { opacity: 0; }
/* hover 3 案（section[data-hov]・js の SPLIT）。どれも入った時に 1 度だけ動き、離れると戻る。走査線は入場の時だけ（hover では出さない）
   lift: 削減した分を 5px 持ち上げて影を落とし、残る分は薄く、右の大きな数字も Violet に */
.a-split__cut::after { content: ""; position: absolute; inset: 0; box-shadow: 0 8px 18px rgba(81,35,118,.32); opacity: 0; transition: opacity var(--d-s) var(--e-out); }
[data-hov="lift"] .a-split__cut, [data-hov="lift"] .a-split__rng, [data-hov="lift"] .a-split__det, [data-hov="lift"] .a-split__keep { transition: transform 320ms var(--e-out), opacity 320ms var(--e-out); }
[data-hov="lift"] .a-stat.is-hov .a-split__cut, [data-hov="lift"] .a-stat.is-hov .a-split__rng, [data-hov="lift"] .a-stat.is-hov .a-split__det { transform: translateY(-5px); }
[data-hov="lift"] .a-stat.is-hov .a-split__cut::after { opacity: 1; }
[data-hov="lift"] .a-stat.is-hov .a-split__keep { opacity: .35; }
[data-hov="lift"] .a-odo, [data-hov="lift"] .a-odo__unit { transition: color 320ms var(--e-out); }
[data-hov="lift"] .a-stat.is-hov .a-odo, [data-hov="lift"] .a-stat.is-hov .a-odo__unit { color: var(--a-violet); }
/* link: 削減した分から大きな数字へ、検出の線（1.5px の Violet）を引き、数字にも検出の枠（js が重ねる svg） */
[data-hov="link"] .a-odo, [data-hov="link"] .a-odo__unit { transition: color 280ms cubic-bezier(.2,.7,.2,1); }   /* 数字は枠でなく色で応える（入る 280ms・出る 220ms） */
[data-hov="link"] .a-stat.is-num .a-odo, [data-hov="link"] .a-stat.is-num .a-odo__unit { color: var(--a-violet); }
[data-hov="link"] .a-stat:not(.is-num) .a-odo, [data-hov="link"] .a-stat:not(.is-num) .a-odo__unit { transition-duration: 220ms; transition-timing-function: cubic-bezier(.4,0,1,1); }

/* ================= 6 ティッカー = Technologies 会社の考え（146/132.86・ls -.02em・gap 132・JS で 80px/s・掴んで投げられる） ================= */
.a-thought { padding: var(--a-head) 0; overflow: clip; }
.a-tk__k { color: var(--a-violet); }
/* 何件目か（帯を押すと次のことばへ）。操作の説明は書かず、数で「束」だと分かるようにする */
.a-tkpos { margin: calc(8 * var(--u)) 0 0; padding: 0 var(--a-gutter); text-align: right; font-family: var(--a-mono); font-size: 12px; line-height: 18px; color: var(--a-g500); font-variant-numeric: tabular-nums; }
.a-tkband:focus-visible { outline-offset: -6px; }
/* hover（第8版）: 番号が Violet になり、→ が右へ小さく 1 度動く（次へ） */
.a-tkpos { transition: color var(--d-s) var(--e-out); }
.a-tkpos::after { content: "→"; display: inline-block; margin-left: 8px; font-family: var(--a-sans); opacity: 0; transform: translateX(-4px); transition: opacity var(--d-s) var(--e-out), transform var(--d-m) var(--e-out); }
.a-thought.is-hot .a-tkpos { color: var(--a-violet); }
.a-thought.is-hot .a-tkpos::after { opacity: 1; transform: none; animation: aTkNext 1.2s var(--e-io) .3s 1; }   /* 入った時に 1 度だけ（乗せ続けても繰り返さない） */
@keyframes aTkNext { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.a-tkband { background: var(--a-w); padding-top: calc(32 * var(--u)); position: relative; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.a-tkband.is-grab .a-tk { will-change: transform; }
@media (hover: none) { .a-tkband { cursor: grab; } .a-tkband.is-grab { cursor: grabbing; } }
.a-tkframe { padding: calc(24 * var(--u)) 0; overflow: hidden; }
.a-tt { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }   /* 文字ごとの選択枠（js の TT）。帯の字の上に重ねる */
.a-tk { display: flex; align-items: flex-start; gap: calc(132 * var(--u)); width: max-content; margin: 0; padding: 0; will-change: transform; }
.a-tk li { flex: 0 0 auto; }
.a-tk__t { font-family: var(--a-jp); font-weight: 500; font-size: calc(146 * var(--u)); line-height: calc(132.86 * var(--u)); letter-spacing: -.02em; color: var(--a-k); white-space: nowrap; margin: 0; }

/* ================= 7 導入事例 = Technologies 媒体の行（画像 444 ＋ 文 600・罫で区切る。行の上下は第3版の 64） ================= */
.a-news { padding: var(--a-sec) 0; }
.a-cases { margin-top: var(--a-head); }
.a-item { display: grid; grid-template-columns: calc(444 * var(--u)) minmax(0, calc(600 * var(--u))); gap: calc(60 * var(--u)); align-items: center; padding: var(--a-row) 0; min-width: 0; }
.a-item__wrap { display: block; position: relative; height: 0; padding-top: 56.25%; overflow: hidden; border-radius: calc(4 * var(--u)); background: var(--a-k14); }
.a-item__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-l) var(--e-out); }
.a-item.is-tap .a-item__img { transform: scale(1.03); } @media (hover: hover) { .a-item:hover .a-item__img { transform: scale(1.03); } }
.a-item__body { display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-width: 0; }
.a-item__t { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--a-violet); }   /* 社名と ↗ はふだんから Violet。載せた時は下線の代わりに群れの括弧（案11・しのさん 2026-10-07「ジョイナスさまの部分を紫に、その部分だけにボタンエフェクト。ターゲットエリアは現状のまま」） */
.a-item__h { font-family: var(--a-jp); font-weight: 500; font-size: max(12px, calc(18 * var(--u))); line-height: 1.6; color: var(--a-k); word-break: auto-phrase; }
.a-item__d { color: var(--a-g700); word-break: auto-phrase; }

/* ================= ニュース・よくある質問・資料（Technologies に無い節。同じ語彙＝罫・12/18 のラベル・15 の本文・↗ で組む） ================= */
.a-newslist { padding: var(--a-sec) 0; }
.a-media__list { margin-top: var(--a-head); }
.a-media__list li { display: grid; grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr) calc(80 * var(--u)); gap: var(--a-gap); align-items: baseline; padding: calc(24 * var(--u)) 0; }
.a-media__list time, .a-media__list .a-mono { font-family: var(--a-mono); font-size: 12px; line-height: 18px; color: var(--a-g500); }
.a-media__list a { font-size: max(14px, calc(15 * var(--u))); line-height: max(22px, calc(24 * var(--u))); }
.a-media__list a.is-tap { text-decoration: underline; } @media (hover: hover) { .a-media__list a:hover { text-decoration: underline; } }
.a-faqs { padding: var(--a-sec) 0; }
.a-faq__list { margin-top: var(--a-head); }
.a-faq summary { display: grid; grid-template-columns: calc(64 * var(--u)) 1fr 24px; align-items: baseline; padding: calc(32 * var(--u)) 0; list-style: none; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary.is-tap .a-faq__t { text-decoration: underline; } @media (hover: hover) { .a-faq summary:hover .a-faq__t { text-decoration: underline; } }
.a-faq__q { font-family: var(--a-mono); font-size: 12px; color: var(--a-g500); }
.a-faq__t { font-size: max(15px, calc(18 * var(--u))); line-height: 1.6; word-break: auto-phrase; }
.a-faq__scope { margin-left: 12px; font-size: 12px; color: var(--a-g500); }
.a-faq__pm { position: relative; width: 14px; height: 14px; justify-self: end; }
.a-faq__pm::before, .a-faq__pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: rotate 340ms var(--e-out); }
.a-faq__pm::after { rotate: 90deg; }
/* 開閉（第5版）: 開く = 高さ 0→実寸 340ms e-out ＋ 本文が 6px 上がりながら現れる／閉じる = 260ms e-in（退場は登場の 0.8 倍）。＋ の回転は同じ尺。
   JS が無いときは details の素の開閉（[open]）だけ */
html.no-js .a-faq[open] .a-faq__pm::after, .a-faq.is-on .a-faq__pm::after { rotate: 0deg; }
.a-faq.is-closing .a-faq__pm::before, .a-faq.is-closing .a-faq__pm::after { transition-duration: 260ms; transition-timing-function: var(--e-in); }
.a-faq__body { overflow: hidden; }
.a-faq__a { padding: 0 24px calc(40 * var(--u)) calc(64 * var(--u)); max-width: calc(920 * var(--u)); color: var(--a-g700); word-break: auto-phrase; }
/* 導入までの流れ（第5版: 舞台をやめ、検討の最終段の情報として FAQ の後に 6 段の一列。罫の頭に Violet の四角＝背骨の四角と同じ記号） */
.a-flow { padding: var(--a-sec) 0; }
.a-flow__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(48 * var(--u)) var(--a-gap); margin: var(--a-head) 0 0; padding: 0; list-style: none; }   /* 3 列 × 2 段（6 列だと本文が 1 行 11〜13 字に詰まる＝d-x 第1周・行長） */
.a-flow__s { --rl: var(--a-g300); position: relative; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding-top: calc(24 * var(--u)); }
.a-flow__s::after { content: ""; position: absolute; left: 0; top: -3px; width: 6px; height: 6px; background: var(--a-violet); }
.a-flow__n { font-family: var(--a-mono); font-size: 12px; line-height: 18px; color: var(--a-g500); }
.a-flow__t { font: 500 max(15px, calc(16 * var(--u)))/1.5 var(--a-jp); word-break: auto-phrase; }
.a-flow__d { font-size: 13px; line-height: 22px; color: var(--a-g700); word-break: auto-phrase; }
/* ボタンの合図（案11「群れ → カーソル」・js が点と括弧をその場で描く）: 点 2.4px・括弧 1px。色はすべて Violet（しのさん 2026-10-07「群れの色を紫に統一」） */
.a-sw { position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.a-sw path { fill: none; stroke: var(--a-violet); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.a-sw .a-sw__b { stroke-width: 1; shape-rendering: crispEdges; }

/* ================= 8 相談 = Technologies 手紙の CTA（560u の一段・Shippori Mincho・見出し 36/1.5・本文 17/1.95） ================= */
.a-cta { padding: var(--a-cta) 0; border-top: 1px solid var(--a-k14); }
.a-cta__letter { max-width: calc(560 * var(--u)); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); }
.a-cta__h { font-family: var(--a-serif); font-weight: 700; font-size: calc(36 * var(--u)); line-height: 1.5; letter-spacing: -.01em; margin-bottom: calc(8 * var(--u)); word-break: keep-all; overflow-wrap: anywhere; }
.a-cta__p { font-family: var(--a-serif); font-weight: 400; font-size: max(15px, calc(17 * var(--u))); line-height: 1.95; color: var(--a-g700); }
.a-cta__btns { display: flex; gap: calc(24 * var(--u)); align-items: center; margin-top: calc(16 * var(--u)); }

/* ================= footer = Technologies（罫 1 本・12/18 の見出し・15/22 の項目＋↗・大きなワードマーク・© mono）。列は本番の 5 群 ================= */
.a-foot { background: var(--a-w); color: var(--a-k); border-top: 1px solid var(--a-k14); padding: var(--a-foot) 0 calc(40 * var(--u)); font-family: var(--a-jp); }
/* 5 列は等分にせず、各列でいちばん長い文節の幅で比を決める（等分だと 1440 で 1 列 224px になり「ガイドライ／ン」と語中で折れる） */
.a-foot__cols { display: grid; grid-template-columns: minmax(0, 23fr) minmax(0, 21fr) minmax(0, 15fr) minmax(0, 19fr) minmax(0, 26fr); gap: 48px var(--a-gap); }
.a-foot__h { font-size: max(12px, calc(12 * var(--u))); line-height: max(18px, calc(18 * var(--u))); color: var(--a-g500); margin: 0 0 calc(16 * var(--u)); }
.a-foot__list { display: flex; flex-direction: column; gap: calc(12 * var(--u)); align-items: flex-start; word-break: auto-phrase; overflow-wrap: anywhere; }
/* 字と ↗ は 1 つの行の流れ（2026-10-07 d-x レビュー: 前は inline-flex で、字が 2 行に折れると ↗ が列の右端に離れた）。↗ は字の最後のかたまりの中（plan_a.py lis）。
   行の高さ・上下の 2px は li が持つ（a を inline にしても、1 行 26px・2 行 48px の行送りは前と同じ）。字は文節で折る */
.a-foot__list li { font-size: max(13px, calc(14 * var(--u))); line-height: max(20px, calc(21 * var(--u))); padding: 2px 0; max-width: 100%; }   /* しのさん 2026-10-08「footer メニューのフォントサイズが少し大きい」: 15u／14px → 14u／13px（1440 で 15 → 14px・1920 で 20 → 18.7px・スマホ 14 → 13px）。行は 22u → 21u（スマホは 20px のまま） */
.a-foot__list a { color: var(--a-k); }
.a-foot__list .a-nb { vertical-align: top; }   /* かたまり（inline-block）を行の上に揃える（基線揃えだと行がさらに広がる） */
/* 文節で折る（2026-10-06: スマホのニュースの題で「実／証実験」と語中で折れていた。指定の漏れていた文の箱にまとめて付ける） */
.a-media__list a, .a-svcrow__text p, .a-steps li, .a-l12, .a-l15, .a-l15r, .a-pcard__cat, .a-step h3 + p { word-break: auto-phrase; }   /* .a-ts18 = 技術の節のカードの本文（「シフ／ト」「センサ／ー」と折れていた） */
.a-media__list a { text-wrap: pretty; }
.a-nb { display: inline-block; }   /* 括弧の中は 1 かたまりで折る（auto-phrase は <wbr> を折れ目に使わない: 1024 で「保護方／針」になった） */
.a-foot__list a.is-tap { text-decoration: underline; } @media (hover: hover) { .a-foot__list a:hover { text-decoration: underline; } }
.a-foot__list .a-arr { font-size: 12px; margin-left: calc(6 * var(--u)); }   /* ↗（12px・Inter）は行を 2px 押し広げる。前から 1 行の項目はこの 2px を含んだ高さ（26px）だったので、そのままにした（2 行の項目もこれで同じく +2px にそろう） */
.a-foot__mark { display: block; margin: calc(72 * var(--u)) 0 calc(40 * var(--u)); color: var(--a-violet); }
.a-foot__mark { position: relative; }
.a-foot__mark svg { display: block; width: 100%; height: auto; }
/* 第7版: footer の動き（JS の FOOTS）。canvas はワードマークに重ね、字の SVG は案ごとに隠し方を変える */
.a-foot__cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* 1 走査: 走査線はワードマークだけを通る（隠す範囲は JS が --sa〜--sb）。メニューは canvas の上で 1 字ずつ静かにまたたく（字の SVG・HTML は隠さない） */
.a-foot .a-container { position: relative; }
.a-foot__cv--all { z-index: 1; }
.a-foot.is-scan .a-foot__mark[data-foot="1"] svg { -webkit-mask-image: linear-gradient(90deg, #000 var(--sa, -1px), transparent var(--sa, -1px), transparent var(--sb, -1px), #000 var(--sb, -1px)); mask-image: linear-gradient(90deg, #000 var(--sa, -1px), transparent var(--sa, -1px), transparent var(--sb, -1px), #000 var(--sb, -1px)); }
.a-foot__mark[data-foot="2"].is-live svg { opacity: 0; }
.a-foot__brk { position: absolute; inset: 0; pointer-events: none; }
.a-foot__brk i { position: absolute; left: 0; top: 0; width: var(--arm, 20px); height: var(--arm, 20px); border: 0 solid var(--a-violet); will-change: transform; }
.a-foot__brk i:nth-child(1) { border-width: 2px 0 0 2px; } .a-foot__brk i:nth-child(2) { border-width: 2px 2px 0 0; } .a-foot__brk i:nth-child(3) { border-width: 0 0 2px 2px; } .a-foot__brk i:nth-child(4) { border-width: 0 2px 2px 0; }
.a-foot__mark[data-foot="3"] svg { opacity: .92; }
.a-foot__tag { position: absolute; left: 0; top: 0; padding: 3px 6px 2px; border-radius: 2px; background: var(--a-violet); color: var(--a-w); font-family: var(--a-mono); font-size: 12px; line-height: 15px; letter-spacing: .08em; white-space: nowrap; will-change: transform; }
.a-foot__mark svg * { fill: currentColor; }
.a-foot__bottom { position: relative; display: flex; justify-content: space-between; align-items: center; gap: calc(24 * var(--u)); padding-top: calc(24 * var(--u)); word-break: auto-phrase; overflow-wrap: anywhere; }
.a-foot__copy { font-family: var(--a-mono); font-size: 12px; line-height: 16px; color: var(--a-g500); letter-spacing: .02em; }
.a-foot__addr { font-size: 12px; line-height: 18px; color: var(--a-g700); }
@media (max-width: 767px) { .a-foot__co { display: block; } .a-foot__gap { display: none; } }   /* スマホ幅は社名を 1 行目に。住所は〒番号・住所・建物名の塊の間だけで折れる（plan_a.foot_addr・2026-10-09） */
.a-foot__sns { display: flex; gap: 16px; font-size: 12px; line-height: 18px; color: var(--a-g700); }
.a-foot__sns a.is-tap { color: var(--a-k); text-decoration: underline; } @media (hover: hover) { .a-foot__sns a:hover { color: var(--a-k); text-decoration: underline; } }
@media (min-width: 1101px) and (max-width: 1439px) { .a-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= 罫（第5版）: 行の罫は擬似要素で描き、出現のときに左から引く（scaleX 0→1・700ms e-io）
   行の上の罫 = ::before、最後の行の下の罫 = ::after。JS が .rl-wait（引く前）→ .rl-go（引く）を付ける。JS が無い・動きを減らす設定では最初から引いてある ================= */
.a-svcrow, .a-item, .a-media__list li, .a-faq, .a-step, .a-flow__s { position: relative; }
.a-svcrow::before, .a-stat::before, .a-item::before, .a-media__list li::before, .a-faq::before, .a-step::before, .a-flow__s::before, .a-foot__bottom::before,
.a-svcrow:last-child::after, .a-stat:last-child::after, .a-item:last-child::after, .a-media__list li:last-child::after, .a-faq:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rl, var(--a-k14)); transform-origin: 0 50%; pointer-events: none; }
.a-svcrow:last-child::after, .a-stat:last-child::after, .a-item:last-child::after, .a-media__list li:last-child::after, .a-faq:last-child::after { top: auto; bottom: 0; }
.rl-wait::before, .rl-wait::after { transform: scaleX(0); }
.rl-go::before, .rl-go::after { transition: transform var(--d-rule) var(--e-io) var(--rl-d, 0ms); }
.a-flow__s.rl-wait::after { transform: scale(0); }   /* 流れの四角（::after）は罫と一緒に出る */
.a-flow__s.rl-go::after { transition: transform var(--d-m) var(--e-out) var(--rl-d, 0ms); }

/* ================= 出現（第5版）= VACAN SIGNAGE .f-rev（opacity 0・20px 下 → 800ms (.22,1,.36,1)。画面の 80% で発火）＋ 解像（Technologies）
   JS が .rv（出る前）を付け、発火で WAAPI の上昇に渡して .rv を外す（要素の hover の transition と取り合わない）。罫 → 中身（+120ms）→ 横の並びは 60ms 刻み ================= */
.rv { opacity: 0; transform: translateY(20px); }
html.no-js .rv { opacity: 1; transform: none; }
#rz { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; }
.is-rz, .is-rz * { -webkit-text-fill-color: transparent !important; }
.is-rz [data-scr]:not([data-scr-done]), .is-rz .a-odo, .is-rz .a-odo * { -webkit-text-fill-color: currentcolor !important; }
#cur, #curv { position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: 0; }
#cur { mix-blend-mode: difference; }
#cur i, #curv i { position: absolute; left: 0; top: 0; display: block; background: #fff; will-change: transform; opacity: 0; }
#cur .c-dot { width: 4px; height: 4px; }
#curv .c-gl { position: absolute; left: 0; top: 0; display: block; width: 16px; height: 16px; opacity: 0; will-change: transform; transform-origin: 8px 8px; }   /* 押せる所で大きくなった点・ロゴの字（js: 押せる所の点）。Violet で描くので反転の層（#cur）ではなく #curv に置く */
#curv .c-h { width: 21px; height: 1px; } #curv .c-v { width: 1px; height: 21px; }
#curv .c-k { width: 10px; height: 10px; background: transparent; border-top: 1px solid #fff; border-left: 1px solid #fff; transform-origin: 5px 5px; }
#cur .c-ch { width: 5px; height: 5px; background: transparent; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform-origin: 3px 3px; }
#curv i { background: var(--a-violet); } #curv .c-k { background: transparent; border-color: var(--a-violet); }
#curv.is-dark i { background: var(--a-w); } #curv.is-dark .c-k { background: transparent; border-color: var(--a-w); }   /* Violet のピルの中では白（第5版） */
@media (hover: none) { #cur, #curv { display: none; } }

/* ================= 狭幅（≤1100） ================= */
@media (max-width: 1100px) {
  /* ヘッダー: ロゴ・無料問い合わせ・Menu。木は白い全面メニューに組み替える */
  .a-hd__in { gap: 12px; padding: 0 16px; }
  .a-hd.is-pill .a-hd__in { padding: 0 4px 2px 18px; gap: 12px; }   /* 下 2px は全幅と同じ理由（見た目の中央） */
  .a-hd__logo { margin-right: auto; position: relative; z-index: 2; min-height: 44px; }
  .a-hd__logo svg { height: 13px; }
  .a-hd__quick, .a-hd__menu { display: inline-flex; align-items: center; position: relative; z-index: 2; }
  .a-hd__menu { min-height: 44px; padding: 0 8px; font-family: var(--a-mono); font-size: 12px; letter-spacing: .08em; }
  .a-hd__nav { display: none; position: fixed; inset: 0; z-index: 1; margin: 0; padding: calc(88px + env(safe-area-inset-top, 0px)) 20px 48px; background: var(--a-w); color: var(--a-k); overflow-y: auto; overscroll-behavior: contain; }
  html.a-drawer { overflow: hidden; }
  html.a-drawer .a-hd__nav { display: block; }
  html.a-drawer .a-hd__in { color: var(--a-violet); background: transparent; box-shadow: none; }
  /* メニューを開いている間は上部の「お問い合わせ」を出さない（しのさん 2026-10-06「メニューを開いた時に上部の問い合わせボタンは不要」。最下部の「お問い合わせ」は残す）。
     場所は空けたまま消す（Menu／Close の位置を動かさない） */
  .a-hd__quick { transition: opacity var(--d-s) var(--e-out), visibility 0s linear 0s; }
  html.a-drawer .a-hd__quick { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--d-xs) var(--e-in), visibility 0s linear var(--d-xs); }
  html.a-drawer-out .a-hd__nav { display: block; pointer-events: none; }   /* 閉じる動きの間だけ残す（JS が 240ms で外す） */
  /* 全面メニューを送ると、中身がロゴと Close の下へ潜って字が重なった（2026-10-08 の QA）。上の 88px（＋ノッチ）に白い帯を貼り付け、中身はその下に隠れる（sticky の基準は padding の内側なので top は -88px）。
     帯は送る前の余白と同じ高さなので、送る前の見た目は変わらない */
  .a-hd__nav::before { content: ""; position: sticky; z-index: 1; top: calc(-88px - env(safe-area-inset-top, 0px)); display: block; height: calc(88px + env(safe-area-inset-top, 0px)); margin: calc(-88px - env(safe-area-inset-top, 0px)) -20px 0; background: var(--a-w); }
  .a-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .a-ni { border-bottom: 1px solid var(--a-k14); }
  .a-hd__nav .a-ni__top { top: 0; color: var(--a-k); }   /* 全面メニューの中の項目は本文と同じ黒（Violet はロゴと問い合わせだけ） */
  .a-ni__top { display: flex; width: 100%; justify-content: space-between; min-height: 60px; font: 500 20px/1.3 var(--a-jp); letter-spacing: 0; }
  .a-ni__top::before { content: none; }
  button.a-ni__top::after { width: 8px; height: 8px; }
  .a-ni--cta { border-bottom: 0; padding-top: 20px; }
  .a-ni--cta .a-hd__cta { display: flex; justify-content: center; height: 48px; font: 500 15px/1 var(--a-jp); background: var(--a-violet) !important; color: var(--a-w) !important; }
  .a-panel { position: static; display: none; width: auto; margin: 0; padding: 0 0 16px; visibility: visible; opacity: 1; translate: none; transition: none; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: 1fr; }
  .a-ni.is-open > .a-panel, .a-ni.is-closing > .a-panel { display: block; }
  .a-ni.is-closing > .a-panel { pointer-events: none; }   /* 閉じる動きの間だけ残す（JS が行を抜いてから外す） */
  .a-ni.is-open .a-pc__kids .a-pk { animation: aKidIn var(--d-m) var(--e-out) both; animation-delay: calc(100ms + var(--k, 0) * 40ms); }   /* 全面メニューは分類が全部開いているので、どの分類の行も同じ動きで入る（前は 1 つ目の分類だけ） */
  .a-pc__btn { min-height: 44px; padding: 10px 0; font-size: 15px; border-radius: 0; background: none !important; }
  .a-pc--parent > .a-pc__btn { pointer-events: none; color: var(--a-g500); }
  .a-pc--parent > .a-pc__btn::after { content: none; }
  .a-pc__kids, .a-pc.is-active > .a-pc__kids { display: block; position: static; padding: 0 0 8px 36px; }
  .a-pc__kids ul { border-top: 0; }
  .a-pk { border-bottom: 0; }
  .a-pk__a { padding: 10px 0; }
  .a-pk__n { font-size: 16px; }
  .a-pk__d { font-size: 12px; line-height: 18px; }

  .a-hero { height: 100svh; min-height: 600px; max-height: none; }
  .a-prism { --hero-h: max(600px, 100svh); }   /* 背景を消し始める所＝この幅の hero の下端 */
  .a-hero__head { padding: 0 24px 40px; }
  .a-hero__title { flex-direction: column; gap: 8px; font-size: clamp(44.3px, 10.63vw, 79.7px); line-height: 1.24; white-space: normal; }   /* 前（40px〜72px・字間 +0.04em）と同じ横幅に（字詰めで縮んだ分 ×1.107。しのさん 2026-10-07） */
  .a-hero__cm { margin-right: -.652em; } .a-hero__mr { margin-right: -.581em; }   /* 2 行の時は句読点まで含めた墨で中央に（しのさん 2026-10-08「SP でキャッチコピーが少し右に寄って見える」）。前は 1 行の時と同じく本体で中央に揃えていて（-.986／-.978em）、2 行とも右に句読点が出るぶん、かたまりが 7〜9px 右に寄った */
  .a-hero__sub { font-size: 15px; line-height: 1.8; letter-spacing: .06em; word-break: auto-phrase; translate: .1em 0; }   /* 墨を中央に（字間 .06em のぶん PC より浅い） */
  .a-hero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-top: 56px; }
  .a-hero__dl, .a-hero__cta .a-btn { width: 100%; }
  .a-hero__dl { margin-top: 28px; }
  .a-btn { height: 48px; font-size: 14px; }

  .a-h36 { font-size: clamp(22px, 5.6vw, 28px); line-height: 1.3; letter-spacing: -.01em; }
  .a-l27 { font-size: 17px; line-height: 1.7; }
  .a-h90 { font-size: clamp(30px, 7.4vw, 44px); line-height: 1.18; }
  .a-two { flex-direction: column; }
  .a-two__r { width: auto; gap: 16px; }

  .a-carousel { grid-auto-columns: 86vw; }
  .a-pcard__h { font-size: 28px; line-height: 34px; }
  .a-svcrow { grid-template-columns: 1fr; }
  .a-svcrow--wide .a-svcrow__photo { grid-column: auto; }
  .a-svcrow--wide .a-svcrow__photo img, .a-svcrow--wide .a-svcrow__photo video { height: auto; aspect-ratio: 3 / 2; }
  .a-svcrow--wide.a-svcrow--kv .a-svcrow__photo img { aspect-ratio: 1400 / 490; }   /* noma の KV（ロゴとコピー入り）は 3:2 だと左右が切れるので KV の比のまま。PC は横長の枠（比 2.89）で上下 1.5px だけ */
  .a-svcrow__pad { height: 320px; }
  .a-loc__in { padding-top: 96px; }
  .a-stack { padding: 0 var(--a-gutter) var(--a-sec); }

  .a-stat { flex-direction: column; padding: 16px 0; min-height: 0; }
  .a-bars, .a-split { order: 2; max-width: 560px; margin-top: 0; padding-top: 16px; }   /* 主張 → 大きな数字 → 図 の順。全幅に伸ばすと棒が罫に見える */
  .a-stat__label { font-size: 15px; max-width: none; }
  .a-odo { position: static; translate: none; font-size: calc(120 * var(--u)); line-height: calc(120 * var(--u)); margin-top: 8px; }
  .a-digit { width: calc(74 * var(--u)); height: calc(120 * var(--u)); }
  .a-digit--sym { width: calc(68 * var(--u)); }
  .a-reel span { height: calc(120 * var(--u)); }
  .a-odo__unit { padding-bottom: 16px; font-size: 22px; line-height: 1.2; }
  .a-tk__t { font-size: calc(96 * var(--u)); line-height: calc(88 * var(--u)); }

  .a-item { grid-template-columns: calc(360 * var(--u)) minmax(0, 1fr); }
  .a-item__h { font-size: 16px; }
  .a-media__list li { grid-template-columns: auto 1fr; gap: 6px 12px; }
  .a-media__list li a { grid-column: 1 / -1; grid-row: 2; }   /* 日付と種別を 1 行に、題を次の行に（3 行に割れて行長が細切れにならないように） */
  .a-faq summary { grid-template-columns: 48px 1fr 20px; }
  .a-faq__a { padding-left: 48px; padding-right: 0; }
  .a-cta__letter { padding: 0 var(--a-gutter); max-width: 620px; }
  .a-cta__h { font-size: 26px; }
  .a-cta__p { font-size: 15px; line-height: 1.9; }
  .a-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-foot__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* 工程: Technologies と同じく 992 未満は 1 列に積み、全カードを開いたまま（図は位相を 6 等分でずらして常時ループ） */
@media (max-width: 991px) {
  .a-tl__main { height: auto; display: flex; flex-direction: column; gap: 24px; }
  .a-tl__col, .a-tl__col--l, .a-tl__col--r { display: contents; transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .a-tlc { width: 100%; order: var(--i); container-type: inline-size; --cw: min(calc(200px * 393 / 272), calc((100cqw - var(--tl)) * 393 / 367)); }   /* 図は高さ 200px（幅 289px）。狭い時はカードの右端に収まる幅まで縮める */
  .a-tl__prog { display: none; }
  .a-tlc__anim { height: calc(272 * var(--u)) !important; min-height: 200px; }
  .a-tlc { --ah: max(200px, calc(272 * var(--u))) !important; }
  .a-tlc__rive { transform: none !important; opacity: 1 !important; width: 100%; height: 100%; padding-right: 0; justify-content: flex-start; }
  .a-tl-canvas { width: var(--cw); height: auto; aspect-ratio: 786 / 544; }
  .a-tl__stage { height: auto; min-height: 0; padding: 80px 0 40px; }
  .a-tl__heading { position: static; }
  .a-tl__hin { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .a-tlc__row { height: auto; min-height: 56px; }
}
/* タブレット（768–1100）: スマホの1列を引き伸ばさない */
@media (min-width: 768px) and (max-width: 1100px) {
  .a-carousel { grid-auto-columns: 480px; }
  .a-svcrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-svcrow--wide .a-svcrow__photo { grid-column: span 2; }
  .a-svcrow--wide .a-svcrow__photo img, .a-svcrow--wide .a-svcrow__photo video { aspect-ratio: auto; height: calc(291 * var(--u)); }
  .a-svcrow--wide.a-svcrow--kv .a-svcrow__photo img { height: auto; aspect-ratio: 1400 / 490; }   /* 枠が比 4.5 まで横長になり KV の上下が 36% 切れた → KV の比のまま */
  .a-svcrow__text { grid-column: 1 / -1; max-width: 640px; margin-top: 8px; }
  .a-media__list li { grid-template-columns: 96px minmax(0, 1fr) 72px; gap: var(--a-gap); }
  .a-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* 宣言: 固定枠は画面の高さいっぱいに（900u の上限は 390 で 600px になり、下に 244px の空白が出た）。動詞と機能名を 1 列に交互に */
  .a-loc__sticky { height: 100svh; max-height: none; }
  .a-decl { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6, auto); }
  .a-decl__vs, .a-decl__fs { grid-column: 1; grid-row: 1 / -1; }
  .a-decl__v:nth-child(2) { grid-row: 3; } .a-decl__v:nth-child(3) { grid-row: 5; }
  .a-decl__f:nth-child(1) { grid-row: 2; } .a-decl__f:nth-child(2) { grid-row: 4; } .a-decl__f:nth-child(3) { grid-row: 6; }
  .a-decl__f { align-self: start; padding: 4px 0 16px; }
  .a-hero__eyebrow { font-size: 12px; letter-spacing: .12em; flex-wrap: wrap; justify-content: center; translate: .175em 0; }   /* 墨を中央に（字間 .12em のぶん PC より浅い） */
  .a-item { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .a-foot__cols { grid-template-columns: minmax(0, 1fr); }   /* 列は 1 つずつ縦に積む（しのさん 2026-10-06「会社セクションも横並びじゃなくて縦に並んだ方がキレイ」。前は短い 2 列＝事例・資料と会社だけ左右に並んでいた） */
  .a-foot__mark { margin: 40px 0 28px; }
  .a-faq__a { padding-left: 0; }
  .a-faq summary { grid-template-columns: 40px 1fr 20px; }
  .a-carnav button { min-height: 44px; padding: 0 10px; }
  .a-tlc__roles { display: none; }
  .a-flow__list { grid-template-columns: 1fr; row-gap: 28px; }
  .a-flow__s { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 0; row-gap: 6px; }
  .a-flow__n { grid-row: 1 / span 2; }
}

/* ================= reduced-motion（Technologies と同じく全部止める） ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .rv { opacity: 1; transform: none; } .rl-wait::before, .rl-wait::after { transform: none; } .a-decl__f { opacity: 1 !important; transform: none !important; } #cur, #curv, #rz { display: none; } html.has-cur body { cursor: auto; }
  .a-tl__pp { display: none; }
  .a-pcard__bars { display: none; }   /* 動きを減らす設定では送らない（1 枚目のまま）ので、進みも出さない */
  .a-tl__hin { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .a-tl__col { transform: none !important; opacity: 1 !important; }
  .a-tlc__anim { height: calc(272 * var(--u)) !important; } .a-tlc { --ah: calc(272 * var(--u)) !important; } .a-tlc__rive { transform: none !important; opacity: 1 !important; }
  .a-tl__prog, .a-tl__dots { opacity: 1 !important; }
  .a-logos__track { animation: none; } .a-logos__win { overflow-x: auto; } .a-logos__track li[data-clone] { display: none; }   /* 動きを減らす設定では、手で送る帯に（複製は出さない） */
}

/* ================= スマホのスクロール後のピル（しのさん 2026-10-08「少し窮屈なので幅を少し広げ、logo・問い合わせボタン・menu を均等に、窮屈にならないように。お問合わせに。これは SP だけ」）
   幅 261 → 300px（狭い画面は左右 16px を残す）。ロゴ → ボタン、ボタン → Menu の字の間を同じにする。
   左右の余白はロゴ・Menu の字まで 24px（ピルの両端は丸いので、間 32px より少し狭いと釣り合う）。タブレット（768〜1100）と PC は変えない ================= */
@media (max-width: 767px) {
  /* 並べ方は全幅の時と同じ（ロゴの右の auto で押し出す）にし、幅・余白・間だけを変える＝どれも補間される。前は両端寄せ・ロゴの余白 0・Menu の −8px に切り替えていて、
     ピルに変わった瞬間（0ms）にボタンだけが 54px 左へ跳んだ（しのさん 2026-10-08「スクロールした時のお問合わせボタンのアニメーションががたついている」）。
     間（--hd-pill-g）は js の measurePill が部品の実寸から計算する: ロゴ→ボタン（間＋auto の余り 8px）＝ ボタン→Menu の字（間＋Menu の左の内余白 8px） */
  .a-hd.is-pill .a-hd__in { width: min(300px, calc(100% - 32px)); padding: 0 16px 2px 24px; gap: var(--hd-pill-g, 24px); }
  .a-hd__ql { display: none; }
  .a-hd__qs { display: inline; }
}

/* ================= 幅ごとの崩れの修正（2026-10-08 幅の総当たり QA・scripts/width-sweep.mjs）
   しのさん「サイズによっては図が左によっている。ウィンドウサイズによってコンテンツがおかしくないか確認して」。27 の幅 × 13 節を撮って見た結果 ================= */
/* 技術のカード（991 以下）: 前はカードを横いっぱいに伸ばし、図だけ 289px（高さ 200px）に止めていたので、600〜991 で図と本文が左に寄り、右の半分以上が空いていた。
   PC のカード（幅 463・図 393＝85%）と同じ比に揃える: カードは 463px まで（中央）、図はカードの幅の 393/463。スマホ（〜390）は今までどおり 289px のまま */
@media (max-width: 991px) {
  .a-tlc { width: min(100%, 463px); margin-inline: auto; --cw: min(max(calc(200px * 393 / 272), calc(100cqw * 393 / 463)), calc((100cqw - var(--tl)) * 393 / 367)); }
  .a-tlc__anim { height: calc(var(--cw) * 544 / 786) !important; min-height: 0; }   /* 図の箱の高さ＝図の高さ（図が大きくなった分、下が切れないように。動きを減らす設定の 272u も上書き） */
}
@media (min-width: 768px) and (max-width: 991px) {
  .a-tl__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }   /* タブレットは 2 枚ずつ（PC の 2 列に近い並び。1 列だと 463px のカードの左右が大きく空く） */
  .a-tlc { width: 100%; }
}
/* 600〜767（大きいスマホ・小さいタブレット）: スマホの 1 列をそのまま引き伸ばしていた（767 で写真 1 枚が幅 700px・高さ 470px、利用シーンのカードが 650px）。
   タブレット（768〜）と同じ組み方を 600 から使う */
@media (min-width: 600px) and (max-width: 767px) {
  .a-carousel { grid-auto-columns: 480px; }
  .a-svcrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-svcrow--wide .a-svcrow__photo { grid-column: span 2; }
  .a-svcrow__text { grid-column: 1 / -1; max-width: 640px; margin-top: 8px; }
  .a-svcrow--wide .a-svcrow__photo img, .a-svcrow--wide .a-svcrow__photo video { aspect-ratio: auto; height: calc(291 * var(--u)); }   /* 横長の 1 枚（活かす）もタブレットと同じ帯の高さ（767 で 470px → 194px。768 との段差をなくす） */
  .a-svcrow--wide.a-svcrow--kv .a-svcrow__photo img { height: auto; aspect-ratio: 1400 / 490; }
}
/* 大きな動詞（わかる。まてる。まわれる。）: JS が枠に合わせて決める（--decl-fs）。JS が無い時の既定も、画面の幅を超えない大きさに（5 字 × 0.97em ＋ 括弧の余白 < 本文の幅） */
.a-decl { --fs: var(--decl-fs, min(calc(180 * var(--u)), 17vw)); }
/* 左の現在地（固定）: % の数字は縦中横で 17px 幅になり、本文の頭と 1px（スマホ）・3px（768〜1100）しか離れていなかった（320 で「よくある質問」の Q03 に接して見えた）。
   印と線ごと左へ寄せ、本文との間を 4〜5px に（線 4・印 4〜8・% の列 7〜24 ／ タブレットは % の列 26〜43） */
@media (max-width: 767px) { .a-ind { --tx: 15px; --rx: 4px; } }
@media (min-width: 768px) and (max-width: 1100px) { .a-ind { --tx: 34px; } }
/* hero の英字の見出し（320〜359）: 字間 .12em では「VACAN ・」と「Crowd & Flow Management」の 2 行に割れ、点が 1 行目の終わりに残った。
   字間を .06em にして 1 行に（墨の中央の補正も字間の差のぶん浅く: .175em → .145em） */
@media (max-width: 359px) { .a-hero__eyebrow { letter-spacing: .06em; translate: .145em 0; } }
/* カタカナ・英数字の並び（書き出しの最後に plans/plan_a.py の glue_words が囲む）: Safari で語の途中で折らない */
.a-nw { white-space: nowrap; }
/* 320px より狭い幅（Android で「表示サイズ」「文字サイズ」を大きくした端末。2026-10-09 しのさん「android の実機で見え方がおかしくなる可能性は」）:
   hero の見出しは最小 44.3px のままで、280〜300 で「。」が右の端から切れ、左の現在地に重なった → 320 未満だけ本文の幅（画面 − 余白 28px×2）に比例して小さく（320 で 44.3px ちょうど。320 以上は今までどおり）。
   英字の見出しは 1 行に入らないので、点を消して「VACAN」と「CROWD & FLOW MANAGEMENT」の 2 行に。最後の相談の見出しも 2 行に収まる大きさに */
@media (max-width: 767px) { .a-hero__title { font-size: clamp(min(44.3px, calc((100vw - 2 * var(--a-gutter)) / 5.959)), 10.63vw, 79.7px); } .a-cta__h { font-size: min(26px, calc((100vw - 2 * var(--a-gutter)) / 10.15)); } }
@media (max-width: 319px) { .a-hero__dot { display: none; } }
/* フッターのメニュー（js の「フッターのメニュー」・.a-foot__cols[data-acc]）: スマホ幅は列ごとに開け閉め（しのさん 2026-10-10）。
   見た目は商業施設ページ（css/plan-mall.css の .m-fh）と同じ。行の区切りと矢印はヘッダーの全面メニューと同じ。広い幅では今の見出しと同じ見た目で押せない */
.a-foot__tg { appearance: none; display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: default; }
.a-foot__tg:disabled { color: inherit; opacity: 1; }
@media (max-width: 767px) {
  .a-foot__cols.is-acc { gap: 0; }
  .a-foot__cols.is-acc .a-foot__col { border-bottom: 1px solid var(--a-k14); }
  .a-foot__cols.is-acc .a-foot__h { margin: 0; }
  .a-foot__cols.is-acc .a-foot__tg { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; font: 500 15px/1.3 var(--a-jp); color: var(--a-k); cursor: pointer; }
  .a-foot__cols.is-acc .a-foot__tg::after { content: ""; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: 45deg; translate: 0 -.5px; transition: rotate var(--t), translate var(--t); }
  .a-foot__cols.is-acc .is-open .a-foot__tg::after { rotate: 225deg; translate: 0 2px; }
  .a-foot__cols.is-acc .a-foot__list { overflow: hidden; padding-bottom: 20px; }
  .a-foot__cols.is-acc .a-foot__list[hidden] { display: none; }
}