/* =====================================================================
   WordPress の一覧ページ（/casestudy/・/column/・/company/news/・/company/member/）のあしらい。
   トップ（top-assets/plan-a.css・pre-dev1 の 2026-10-16 時点）から、次の規則を同じ値のまま写した:
     トークン（--u・色・時間）・見出し（.a-h36・.a-l27・.a-max65）・出現（.rv）・解像（#rz・.is-rz）・カーソル（#cur・#curv）・現在地インジケータ（.a-ind）
   このファイルで足したもの: .lfx-hd（見出しの置き場所）・.lfx-page（/company/ の 2 ページの見出しの帯の代わり）
   動きは common/lists/fx.js
   ===================================================================== */
:root {
  --u: clamp(.6664px, calc(100vw / 1440 * .9996), 1.3328px);
  --a-w: #fff; --a-k: #000;
  --a-g700: #4B515B; --a-g500: #6C7584;
  --a-line: #DADDE2; --a-violet: #512376;
  --a-sans: "Inter", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --a-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --a-mono: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --e-out: cubic-bezier(.2,.7,.2,1); --e-in: cubic-bezier(.4,0,1,1);
  --d-xs: 120ms; --d-s: 200ms; --d-m: 300ms;
  --a-gutter: calc(80 * var(--u));
  --a-head: calc(80 * var(--u));
}
@media (max-width: 1100px) {
  :root { --a-gutter: 48px; --a-head: 56px; }
}
@media (max-width: 767px) {
  :root { --a-gutter: 28px; --a-head: 48px; }
}

/* テーマ vacan の main.css は「* { transition: transform .5s, opacity .25s }」で全要素に動きを付ける。
   カーソル・解像の面・インジケータは毎フレーム JS で位置を決めるので、そのままだと 0.5 秒遅れて追いかけ、もっさり見えた（2026-10-19）。
   ここで打ち消す。インジケータの部品で、トップが動きを持つもの（.a-ind__ttl・__sp・__hs・__mk など）は、後ろの規則が同じ強さで上書きするので残る */
#cur, #curv, #cur *, #curv *, #rz, .a-ind, .a-ind * { transition: none; }

/* ---- 背景: トップと同じ白一色（2026-10-19）。粒子・図形・端の升は HTML から外した ---- */
body { background: #fff; }

/* ---- 見出し（トップの「利用シーンから探す」と同じ型） ---- */
.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; color: var(--a-k); margin: 0; }
.a-l27 { font-family: var(--a-jp); font-weight: 400; font-size: calc(27 * var(--u)); line-height: calc(40.5 * var(--u)); color: var(--a-g500); margin-top: calc(12 * var(--u)); margin-bottom: 0; word-break: auto-phrase; }
.a-max65 { max-width: calc(780 * var(--u)); }
.lfx-hd { margin-bottom: var(--a-head); text-align: left; }
/* /company/ の 2 ページ: 紫の帯（.page--head）の代わりに、白地の上に見出しを置く。上はピルのヘッダーの下まで空ける */
.lfx-page { position: relative; z-index: 1; padding-top: calc(200 * var(--u)); }
@media (max-width: 1100px) {
  .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; }
  .lfx-page { padding-top: 120px; }
}

/* ---- 出現 ---- */
.rv { opacity: 0; transform: translateY(20px); }

/* ---- 解像 ---- */
#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]) { -webkit-text-fill-color: currentcolor !important; }

/* ---- カーソル ---- */
html.has-cur body, html.has-cur a, html.has-cur button, html.has-cur summary { cursor: none; }
/* 入力欄・プルダウンの上は手の形（点と十字は隠す。印は fx.js が付ける） */
html.has-cur input, html.has-cur select, html.has-cur textarea, html.has-cur .cs-select, html.has-cur .cs-select button, html.has-cur .cs-search__clear { cursor: pointer; }
html.cur-native #cur, html.cur-native #curv { visibility: hidden; }
@media (hover: none) {
  html.has-cur body { cursor: auto; }
  html.has-cur a, html.has-cur button, html.has-cur summary { cursor: pointer; }
}
#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; }
#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); }
@media (hover: none) {
  #cur, #curv { display: none; }
}

/* ---- 現在地インジケータ ---- */
.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; }
.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); transition: opacity var(--d-s) var(--e-out); }
.a-ind.is-other .a-ind__pc { opacity: 0; }
.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); }
.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; }
.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; }
.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; }
}
@media (max-width: 767px) {
  .a-ind { --tx: 15px; --rx: 4px; --len: 320px; --tk: 4px; --mk: 4px; }
  .a-ind__t { display: none; }
  .a-ind__pc { margin-inline-end: 0; }
}
html.a-drawer .a-ind { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  #cur, #curv, #rz { display: none; }
  html.has-cur body { cursor: auto; }
  .a-ind__sp, .a-ind__hs, .a-ind__mk, .a-ind__ttl { transition: none !important; }
}