/* ============================================================
   VACAN Technologies サイト — revelatio.studio の L3 トレースを土台に、G2 以降で差し替えた節を持つ（2026-09-12 に案の区別を廃止）
   単位: 参照は全寸法が vw 比例（1440 で 0.9996 倍）。U(n) = calc(n * var(--u))。sui.io の実測 px も同じ単位で写す。
   色: 白ベース・グレースケール・黒。アクセント色なし。黒面は HERO・進め方の文・工程・footer、実物カードは採用サイトの地色そのまま。
   ============================================================ */
:root{
  --u:clamp(.6664px, calc(100vw / 1440 * .9996), 1.3328px);
  --w:#FFFFFF; --k:#000000; --k2:#222222;
  --g900:#13151A; --g700:#4B515B; --g500:#6C7584; --g300:#B5BAC1; --g100:#E6E8EB;
  --k52:rgba(0,0,0,.32); --k14:rgba(0,0,0,.08); --w52:rgba(255,255,255,.32); --w14:rgba(255,255,255,.08);
  --sans:"Inter","Noto Sans JP","Hiragino Sans",sans-serif; --jp:"Noto Sans JP","Hiragino Sans",sans-serif; --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --paper:#F5F6F8; --line:#DADDE2;--card-line:#C9CDD3;--violet:#512376;--violet-lt:#C9B5DE;--err:#9E2A1E; /* 入力エラーだけに使う。3 色（白・黒・violet）に足す唯一の色。violet は「触れる・押せる」の色なので、誤りの合図に使うと意味が衝突する（2026-09-15・要確認） */ /* VACAN Violet（recruit と同値）。使う場所はカーソルの十字とブラケットだけ（2026-09-14） */ /* 白地の上のカードの縁（工程カード・プロダクトカード共通） */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"Noto Sans JP","Hiragino Sans",monospace;
  --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; /* --d-ml = 退場（--d-l × 0.8） */
  --t:var(--d-m) var(--e-out);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--w);color:var(--k);font:400 calc(12 * var(--u))/calc(18 * var(--u)) var(--jp);-webkit-font-smoothing:antialiased;overflow-x:clip;cursor:none}
@media (hover:none){body{cursor:auto}}
img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--k);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* 器の左右余白（2026-09-12「Hero 以外は左右にもう少し隙間を。左右が窮屈」）: 1440 で 30 → 40px（ヘッダーのロゴの左端 40 と揃う）。SP は 20 → 28px */
.container-large{width:calc(1360 * var(--u));max-width:calc(100% - calc(80 * var(--u)));margin:0 auto}
.padding-section{padding:calc(60 * var(--u)) 0}
/* 型（revelatio 実測: 36/39.6 ls-1.08・72/86.4 ls-2.16・180/180 ls-7.2・27/40.5・15/19.5 w500・12/18・10.5/15.7・13.5/16.2） */
.h36{font-family:var(--jp);font-weight:400;font-size:calc(36 * var(--u));line-height:calc(39.6 * var(--u));letter-spacing:calc(-1.08 * var(--u))}
.h36b{font-family:var(--sans);font-weight:400;font-size:calc(36 * var(--u));line-height:calc(42.48 * var(--u));letter-spacing:calc(-1.08 * var(--u))}
.h72{font-family:var(--jp);font-weight:400;font-size:calc(72 * var(--u));line-height:calc(86.4 * var(--u));letter-spacing:calc(-2.16 * var(--u))}
.h180{font-family:var(--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}
.l27{font-size:calc(27 * var(--u));line-height:calc(40.5 * var(--u))}
.l15{font-family:var(--jp);font-weight:500;font-size:calc(15 * var(--u));line-height:calc(19.5 * var(--u))} .l15r{font-family:var(--jp);font-weight:400;font-size:calc(15 * var(--u));line-height:calc(19.5 * var(--u))}
.l12{font-family:var(--jp);font-size:calc(12 * var(--u));line-height:calc(18 * var(--u))} .l12b{font-family:var(--jp);font-size:calc(12 * var(--u));line-height:calc(16.8 * var(--u))} .l12s{font-family:var(--jp);font-size:calc(12 * var(--u));line-height:calc(13.2 * var(--u))}
.l13{font-family:var(--jp);font-size:calc(13.5 * var(--u));line-height:calc(16.2 * var(--u))}
.m105{font-size:calc(10.504 * var(--u));line-height:calc(10.504 * var(--u))} .meta{font-size:calc(10.504 * var(--u));line-height:calc(15.75 * var(--u))}
.dim{opacity:.52} .dim2{color:var(--g500)}
.max-65{max-width:calc(780 * var(--u))} .max-660{max-width:calc(660 * var(--u))} .max-384{max-width:calc(384 * var(--u))} .max-444{max-width:calc(444 * var(--u))}
.center{text-align:center}
.section{position:relative;transition:background-color var(--t),color var(--t)}
[id]{scroll-margin-top:calc(90 * var(--u))}
.bg-light{background:var(--w);color:var(--k)} .bg-dark{background:var(--k);color:var(--w)}
.two-col{display:flex;justify-content:space-between;gap:calc(24 * var(--u))} .right-col{width:calc(444 * var(--u));display:flex;flex-direction:column;gap:calc(30 * var(--u))}

/* ---- header = 採用サイトの .d-hd 実測（78 高・pad 0 40・gap 40／pill: top 14・52 高・pad 0 10 0 18・gap 32・黒 92%・blur 10・影 0 10 34）。色は本サイトの白／黒。
   変形は、常に全幅で固定された不可視の外枠 .d-hd の中の .d-hd__in だけが受け持つ。幅は JS が実測した --hd-pill-w（px）と 100% の間を補間する。
   （旧実装は left/right/top の切替＝補間不能な瞬間移動 ＋ translateX(-50%) だけが 500ms 残るため、全幅の帯が左半分の外から滑り込んでいた。実測: left −694 → 0）
   振付: 展開（pill→全幅・退場）= 幾何 400ms e-out ／ 面（黒・影・blur）300ms e-out ／ 文字色・CTA 色は面が黒 α≒.54（黒 4.4:1・白 4.9:1 が釣り合う灰）を跨ぐ瞬間 ＝ 薄くなる側は α .92→0 なので進行 .41 ＝ e-out の x≒.11 ≒ 32ms に 0s（遅延のみ）で切替。
         収縮（全幅→pill・登場）= 幾何 500ms e-io ／ 面 300ms e-out を +200ms から（まず集まり、形が決まってから黒く固まる）／ 色は +260ms（面の開始 200 ＋ 60。黒くなる側は α 0→.92 なので .54 に届くのは進行 .59 ＝ e-out の x≒.2 ＝ 60ms）で切替。
   反転色を時間をかけて混ぜると必ず中間で文字と地が同じ灰になって消える（実測: 120ms でも 2.0:1 の駒が出た）。面が 46% 灰の瞬間なら黒 6.1:1・白 3.45:1 でどちらも読めるので、そこで一駒で切り替える。 ---- */
.d-hd{position:fixed;inset:0 0 auto;z-index:800;pointer-events:none;color:var(--k)}
.d-hd__in{pointer-events:auto;position:relative;width:100%;height:78px;margin:0 auto;display:flex;align-items:center;gap:40px;padding:0 40px;color:var(--k);background:rgba(0,0,0,0);border-radius:0;box-shadow:0 10px 34px rgba(0,0,0,0);transform:translateY(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),transform 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}
.d-hd.is-pill .d-hd__in{width:var(--hd-pill-w,fit-content);height:52px;padding:0 10px 0 18px;gap:32px;transform:translateY(14px);border-radius:26px;background:rgba(0,0,0,.92);box-shadow:0 10px 34px rgba(0,0,0,.34);color:var(--w); /* 2026-09-12 性能: backdrop-filter:blur(10px) を外す。固定要素のぼかしはスクロール中に毎フレーム背後を再合成する。黒 92% の下では見えない */
  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),transform 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}
/* 実測中（JS）: transition を切り、幅を中身なりに */
.d-hd.is-measure .d-hd__in,.d-hd.is-measure .d-hd__in *{transition:none!important} .d-hd.is-measure .d-hd__in{width:max-content!important}
.d-hd.is-init .d-hd__in,.d-hd.is-init .d-hd__in *{transition:none!important}
.d-hd__logo{display:flex;flex:none;align-items:center} .d-hd__logo svg{height:32px;width:auto;display:block;transition:height var(--d-ml) var(--e-out)} .d-hd__logo svg *{fill:currentColor}
.d-hd.is-pill .d-hd__logo svg{height:16px;transition:height var(--d-l) var(--e-io)}
.d-hd__nav{position:relative;display:flex;align-items:center;gap:32px;margin-left:auto}
/* ナビの当たり判定は見た目 25×15px しかなかった（2026-09-15 の監査）。描画は変えず ::after で広げる。
   SP の罫リンク・footer と同じやり方。隣とは 32px 空いているので ±8px でも重ならない */
.d-hd__nav>a:not(.d-hd__cta){position:relative}
.d-hd__nav>a:not(.d-hd__cta)::after{content:"";position:absolute;left:-8px;right:-8px;top:-9px;bottom:-9px}
.d-hd__nav>a:not(.d-hd__cta){font-family:var(--mono);font-size:12px;line-height:15.008px;font-weight:400;letter-spacing:.04em;white-space:nowrap;transition:opacity var(--d-m) var(--e-out)} .d-hd__nav>a:not(.d-hd__cta):hover{opacity:.62}
/* CTA: 状態色（黒⇄白）は要素自身の background で、文字色と同じ瞬間（面 50%）に 0s で切り替える。hover は ::after の currentColor 被せ（遅延なし）で状態と独立 */
.d-hd__cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:999px;background:var(--k);color:var(--w);font-family:var(--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)}
.d-hd__cta::after{content:"";position:absolute;inset:0;border-radius:999px;background:currentColor;opacity:0;transition:opacity var(--d-xs) var(--e-out)} .d-hd__cta:hover::after{opacity:.12}
.d-hd.is-pill .d-hd__cta{background:var(--w);color:var(--k);transition:background-color 0s linear 260ms,color 0s linear 260ms,transform var(--d-s) var(--e-out)}
.d-hd__cta.is-press,.btn-pill.is-press{transform:scale(.97);transition:transform var(--d-xs) var(--e-io)} /* 押下の所作（G6 案 1）: 120ms e-io で .97 → 離すと 200ms e-out で戻る */
.d-hd__burger{display:none} .d-hd__panel{display:none}
@media (max-width:1023px){
  .d-hd__in{gap:24px;padding:0 20px} .d-hd__logo svg{height:20px} .d-hd.is-pill .d-hd__in{padding:0 4px 0 18px} .d-hd__nav>a:not(.d-hd__cta){display:none}
  .d-hd__burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:currentColor;cursor:pointer} .d-hd__burger svg{width:20px;height:20px}
  .d-hd__cta{min-height:44px} .d-hd__logo{min-height:44px;padding-inline:2px}
  .d-hd__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:224px;flex-direction:column;padding:10px;background:rgba(0,0,0,.96);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 18px 44px rgba(0,0,0,.4)}
  .d-hd.is-menu .d-hd__panel{display:flex} .d-hd__panel a{padding:13px 16px;border-radius:12px;color:var(--w);font-family:var(--mono);font-size:13px;line-height:18px;letter-spacing:.08em} .d-hd__panel a:hover{background:rgba(255,255,255,.08)}
}
@media (max-width:767px){ .d-hd__in{gap:12px} .d-hd__nav{gap:12px} .d-hd__cta{padding:9px 14px} }
@media (hover:none){.d-hd__burger,.d-hd__cta,.d-hd__nav a{cursor:pointer}}
.skip{position:absolute;left:calc(30 * var(--u));top:-100px;z-index:900;background:var(--k);color:var(--w);padding:calc(8 * var(--u)) calc(12 * var(--u));border-radius:calc(1199 * var(--u))} .skip:focus{top:calc(30 * var(--u))}
.bg-dark :focus-visible,.d-hd.is-pill :focus-visible{outline-color:var(--w)}
.l12.dim,.l15r.dim,.m105.dim{opacity:.64}
/* ---- 0 HERO（1 画面・100vh 最大 900）: 背景 Prism（全面）・文言は左下 pad-bottom 30 ---- */
/* hero の高さは content-view が持つ（100vh・640–900u）。section 自体は中身なり＝ Hero 本体＋導入ロゴ帯。Prism の canvas は section 全体（ロゴの後ろまで）を覆い、構図の基準（大きさ・中心）は JS が content-view に固定する */
.home-hero{position:relative;overflow:clip}
.home-hero_content-view{position:relative;z-index:1;height:100vh;min-height:640px;max-height:calc(900 * var(--u))}
.prism-container{position:absolute;inset:0;z-index:0;background:var(--w)} .prism-container canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.component-hero-header{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}
/* 見出し: 明朝 700・92px・字間 .04em。左右の 2 語を細い罫で分ける。eyebrow は mono の小さな英字、サブは 20px の余白ある本文 */
.hero-eyebrow{font-family:var(--mono);font-size:calc(12 * var(--u));line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--g500);display:flex;align-items:center;gap:calc(14 * var(--u));margin:0 0 calc(36 * var(--u))}
.hero-dot{width:4px;height:4px;border-radius:50%;background:var(--g300);display:inline-block}
.hero-title{font-family:var(--serif);font-weight:700;font-size:calc(92 * var(--u));line-height:1.18;letter-spacing:.04em;color:var(--k);margin:0;display:flex;align-items:center;justify-content:center;gap:calc(34 * var(--u));text-wrap:balance}
.hero-bar{display:inline-block;width:1px;height:.78em;background:rgba(0,0,0,.28);transform:translateY(.02em)}
.hero-sub{font-family:var(--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}
.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(--mono);font-size:calc(10 * var(--u));letter-spacing:.24em;color:var(--g500);margin:0}
.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))}
/* ================= 問い合わせページ（/contact/・2026-09-15）
   項目と文言の根拠は docs/contact-form.md。デザインは本体と同じ部品で組む: 白地・--card-line の罫・角は立てる・
   触れる所は violet（カーソルの十字／ブラケットと同じ規則）。入力欄だけ cursor:text に戻す（本体は cursor:none） ================= */
.ct{padding:calc(180 * var(--u)) 0 calc(140 * var(--u))}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(560 * var(--u)));gap:calc(120 * var(--u));align-items:start} /* フォームの列を 560u に固定（入力欄が広すぎると読みにくい）。文章は残りを使う */
.ct-intro{position:sticky;top:calc(160 * var(--u))}
.ct-eyebrow{letter-spacing:.04em}
.ct-h{margin:calc(12 * var(--u)) 0 calc(20 * var(--u))}
.ct-fig{display:block;width:calc(392 * var(--u));max-width:100%;height:auto;margin:calc(40 * var(--u)) 0 0 calc((480 - 392) / 2 * var(--u))}
  /* 560u の 70% ＝ 392u（2026-09-15）。中央の基準は「段」ではなく「文字」。
     文字の幅はリードの max-width（480u）で決まるので、左の余りは (480 − 392) / 2 ＝ 44u。
     段（680u）の中央に置くと、文字の中心より 100px 右にずれる（1440 実測） */ /* 左端の揃えは canvas の中で行う（js/site.js の OFFX）。要素は器からはみ出さない */
.ct-lead{max-width:calc(480 * var(--u));font-size:calc(20 * var(--u));line-height:calc(34 * var(--u))} /* 27px だと 520u の段で 7 行に割れ、語中でも折れたので 20px に。折りは既定（句読点固定にしない） */
/* ---- フォーム ---- */
.ct-form{display:flex;flex-direction:column;gap:calc(28 * var(--u))}
.ct-f{display:flex;flex-direction:column;gap:calc(8 * var(--u))}
.ct-f[hidden],.ct-form[hidden],.ct-done[hidden]{display:none} /* display:flex は [hidden] の既定（display:none）より強いので明示する（2026-09-15 の不具合: 送信後も入力欄が残り、「いまの段階」が取材でも消えなかった） */
.ct-l{font-family:var(--jp);font-weight:500;font-size:calc(15 * var(--u));line-height:calc(22 * var(--u));color:var(--k);display:flex;align-items:baseline;gap:calc(10 * var(--u))}
.ct-req{color:var(--k);font-weight:500;margin-left:calc(-4 * var(--u))}   /* 必須の印。赤にしない（--err は入力の誤りだけに使う） */
.ct-legend{margin:0 0 calc(4 * var(--u));transition:opacity var(--d-s) var(--e-out)}
html.ct-swap .ct-legend{opacity:0}
html.ct-sent .ct-legend{display:none}   /* フォームと一緒に消す。凡例だけ残ると完了画面に意味のない行が残る */
.ct-check .ct-req{margin-left:calc(2 * var(--u))}
.ct-hint{margin:calc(-2 * var(--u)) 0 0;font-family:var(--jp);font-size:calc(13 * var(--u));line-height:calc(20 * var(--u));color:var(--g500)}
.ct-in{width:100%;box-sizing:border-box;min-height:48px;padding:calc(12 * var(--u)) calc(14 * var(--u));background:var(--w);color:var(--k);border:1px solid var(--card-line);border-radius:0;
  font-family:var(--jp);font-weight:400;font-size:calc(15 * var(--u));line-height:calc(24 * var(--u));cursor:text;transition:border-color var(--d-xs) var(--e-out),box-shadow var(--d-xs) var(--e-out)}
.ct-in::placeholder{color:var(--g300)}
.ct-in:hover{border-color:var(--g500)}
.ct-in:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.ct-ta{resize:vertical;min-height:calc(168 * var(--u));line-height:calc(26 * var(--u))}
select.ct-in{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:calc(40 * var(--u));
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* ---- 独自の選択リスト（2026-09-15 しのさん「select のデザインをテイストに合わせて」）
   ネイティブの <option> の一覧は OS が描くので CSS が効かない（macOS は角丸の黒いパネル）。
   そこで pointer:fine（PC）だけ button＋role="listbox" に差し替える。値は元の <select> が持ったまま（JS を切っても素の select が動く）。
   触る端末は OS の選択シートの方が扱いやすいので、ネイティブのまま ---- */
.ct-sel{position:relative}
.ct-sel__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}
.ct-sel__btn{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));width:100%;text-align:left;cursor:none;color:var(--k)}
@media (hover:none){.ct-sel__btn{cursor:pointer}}
.ct-sel__btn::after{content:"";flex:none;width:6px;height:6px;margin-right:2px;border-right:1.5px solid var(--k);border-bottom:1.5px solid var(--k);transform:translateY(-2px) rotate(45deg);transition:transform var(--d-xs) var(--e-out)}
.ct-sel[data-open="true"] .ct-sel__btn{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.ct-sel[data-open="true"] .ct-sel__btn::after{transform:translateY(1px) rotate(225deg)}
.ct-sel__btn:focus-visible{outline:0;border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.ct-sel__list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:0;list-style:none;background:var(--w);
  border:1px solid var(--violet);box-shadow:0 14px 38px rgba(0,0,0,.14);max-height:calc(320 * var(--u));overflow:auto}
.ct-sel__list[hidden]{display:none}
.ct-sel__opt{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:48px;padding:calc(12 * var(--u)) calc(14 * var(--u));border:1px solid transparent;cursor:none;
  font-family:var(--jp);font-weight:400;font-size:calc(15 * var(--u));line-height:calc(24 * var(--u));color:var(--k)}
  /* 1 行の高さを入力欄とぴたりと同じに（2026-09-15 指示）。.ct-in と同じ計算式にする: min-height 48px・padding 12u・line-height 24u・枠 1px（透明）→ どの幅でも同値 */
@media (hover:none){.ct-sel__opt{cursor:pointer}}
.ct-sel__opt::before{content:"";flex:none;width:6px;height:6px;background:transparent}
.ct-sel__opt[aria-selected="true"]::before{background:var(--violet)}
.ct-sel__opt[aria-selected="true"]{font-weight:500}
.ct-sel__opt.is-active{background:var(--g100)}
/* エラー: 色だけに頼らない（文言・aria-invalid・枠の三重） */
/* 書き終えた欄（2026-09-15 しのさん採用「案3-cで行こう 色は紫ではなく黒で」）。
   合図は ①ラベルが升に戻って左から解ける ②枠の升が 2 のべき乗で半分ずつ消えて線になる。どちらも黒。
   violet は「触れる・押せる」の色なので、済んだ状態には使わない。効果の最中は canvas が枠を描くので CSS の枠は消す */
.ct-f[data-done="1"] .ct-in{border-color:var(--k)}
.ct-f.is-fx .ct-in{border-color:transparent}
.ct-f[data-done="1"] .ct-in:focus{border-color:var(--violet)}
.ct-f[data-done="1"] .ct-sel[data-open="true"] .ct-sel__btn{border-color:var(--violet)}
.ct-f[data-done="1"] .ct-in[aria-invalid="true"]{border-color:var(--err)}
#fxb{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:899}
.ct-sub__t.is-wait{opacity:0}
/* 送信中は「押せない」より「働いている」を優先する。灰色の無効状態のままだと死んで見えた（2026-09-16 実機で確認） */
.btn-pill.ct-submit[disabled].is-sending,.btn-pill.ct-submit[disabled].is-sending:hover,
.btn-pill.ct-submit[aria-disabled="true"].is-sending{background:var(--k);color:var(--w)}   /* 送信中は canvas が字を描く。色は保ったまま隠す（color:transparent にするとその色で升を塗ってしまう） */
/* ---- 送信後（2026-09-15 しのさん採用「ドットグリッドが広がる → 画面背景を vacan violet → 控えも残す」）
   順番は ①方眼が送信ボタンから画面の端へ広がる（620ms）②地が violet に変わる（420ms）③控えが上から解像する。
   地が変わるので、段の中の文字・線・リンクはすべて白系に切り替える。図は役目が終わるので消す ---- */
/* 方眼は文字の下・枠の升は文字の上。層が違うので canvas を 2 枚使う（#fxg は z0・#fxb は z899）。
   #fxg を段の地より上に出すため、段の背景は透明にして地の色は body が持つ */
#fxg{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0}
body{transition:background-color 120ms linear}   /* 地の色は canvas の紫が満ちきった瞬間に引き継ぐだけ。ここで長い推移をかけると二重に見える */
/* 文字の色は「地が violet になる瞬間」に一息で変える。ゆっくり変えると、解像の升が黒のまま violet の上に出る（2026-09-15 の実測で判明） */
.ct{background:transparent;position:relative;z-index:1}
.footer{position:relative;z-index:1;transition:background-color 120ms linear,color 120ms linear}   /* 方眼（#fxg・z0）を footer の下に潜らせる */
/* 送信後は footer も紫に。白い帯のまま残すと、画面が紫になった瞬間に帯だけが浮いて、
   高さが変わるぶん跳ねて見えた（2026-09-16 しのさん「一瞬 footer がちらつきます」／実測 134px）。
   一枚の紫にすれば、跳ねても色の境目が無いので目に留まらない */
html.ct-sent .footer{background:var(--violet);color:var(--w);border-top-color:rgba(255,255,255,.22)}
html.ct-sent .ft-mark svg *{fill:var(--w)}
html.ct-sent .ft-h,html.ct-sent .ft-copy{color:rgba(255,255,255,.62)}
html.ct-sent .ft-list a,html.ct-sent .ft-legal{color:var(--w)}
html.ct-sent .ft-legal:hover{color:var(--w)}
html.ct-sent .ft-bottom{border-top-color:rgba(255,255,255,.22)}
.ct-intro{transition:opacity var(--d-s) var(--e-out)}
html.ct-swap .ct-intro{opacity:0}
.ct-form.is-out,.ct-fallback.is-out{opacity:0;transition:opacity var(--d-s) var(--e-out);pointer-events:none}
html.ct-sent,html.ct-sent body{background:var(--violet)}
html.ct-sent .ct{color:var(--w)}
html.ct-sent .ct .dim2{color:rgba(255,255,255,.66)}
html.ct-sent .ct-fig{display:none}
/* 送信後の文だけ、句の切れ目（<wbr>）でしか折らない。送信前の長いリードには効かせない */
html.ct-sent .ct-lead,.ct-rcp__n{word-break:keep-all;overflow-wrap:anywhere}
html.ct-sent .ct-back{color:var(--w)}
html.ct-sent .ct-h{outline:0}
/* 地が violet になるので、ピルになっていないヘッダー（黒文字）を白に返す。ピルのときは黒地なのでそのまま */
html.ct-sent .d-hd:not(.is-pill) .d-hd__in{color:var(--w)}
html.ct-sent .d-hd:not(.is-pill) .d-hd__cta{background:var(--w);color:var(--violet)}
.ct-rcp__n{margin:calc(16 * var(--u)) 0 0}
.ct-rcp__n a{color:inherit;text-decoration:underline;text-underline-offset:3px} .ct-rcp__n a:hover{text-decoration-thickness:2px}
.ct-done__h{outline:0}
.ct-rcp__h{margin:calc(18 * var(--u)) 0 calc(2 * var(--u));letter-spacing:.04em}
.ct-rcp{display:grid;grid-template-columns:calc(116 * var(--u)) minmax(0,1fr);width:100%;max-width:calc(520 * var(--u));margin:0}
.ct-rcp dt,.ct-rcp dd{margin:0;padding:calc(13 * var(--u)) 0;border-top:1px solid var(--line);
  font-size:calc(14 * var(--u));line-height:calc(23 * var(--u));overflow-wrap:anywhere}
.ct-rcp dt{color:var(--g500);font-family:var(--mono);letter-spacing:.03em}
.ct-rcp .ct-rcp__r:last-child dt,.ct-rcp .ct-rcp__r:last-child dd{border-bottom:1px solid var(--line)}
.ct-rcp__r{display:contents}
html.ct-sent .ct-rcp dt{color:rgba(255,255,255,.66)}
html.ct-sent .ct-rcp dt,html.ct-sent .ct-rcp dd{border-color:rgba(255,255,255,.28)}
@media (max-width:767px){.ct-rcp{grid-template-columns:minmax(0,1fr)}
  .ct-rcp dt{padding-bottom:0;border-bottom:0} .ct-rcp dd{padding-top:calc(4 * var(--u));border-top:0}
  .ct-rcp .ct-rcp__r:last-child dt{border-bottom:0}}
.ct-in[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.ct-err{margin:0;color:var(--err)}
/* 同意 */
.ct-consent{gap:calc(6 * var(--u))}
.ct-check{display:flex;align-items:flex-start;gap:calc(12 * var(--u));cursor:pointer;padding:3px 0;   /* 行の高さ 22 → 28px。触る的の下限 24px を満たす（2026-09-15 の監査で 22px だった） */
  font-family:var(--jp);font-size:calc(15 * var(--u));line-height:calc(22 * var(--u))}
.ct-check input{position:absolute;opacity:0;width:0;height:0}
.ct-ctext a{color:var(--k);text-decoration:underline;text-underline-offset:3px} .ct-ctext a:hover{text-decoration-thickness:2px}
.ct-box{flex:none;width:20px;height:20px;margin-top:1px;border:1px solid var(--card-line);background:var(--w);position:relative;transition:border-color var(--d-xs) var(--e-out),background-color var(--d-xs) var(--e-out)}
.ct-box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--w);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform var(--d-xs) var(--e-out)}
.ct-check input:checked + .ct-box{background:var(--violet);border-color:var(--violet)}
.ct-check input:checked + .ct-box::after{transform:rotate(45deg) scale(1)}
.ct-check input:focus-visible + .ct-box{box-shadow:0 0 0 2px var(--violet)}
.ct-consent[data-invalid="true"] .ct-box{border-color:var(--err)}
/* 送信 */
.btn-pill.ct-submit{border:0;cursor:none;width:100%;height:calc(60 * var(--u));min-height:56px;justify-content:center;margin-top:calc(8 * var(--u));padding:0;
  font-family:var(--jp);font-weight:500;font-size:calc(16 * var(--u));line-height:1;letter-spacing:.04em}
  /* 2026-09-15「送信ボタンが小さい」: 入力欄と同じ幅いっぱいに、高さは入力欄（48/50px）より一回り大きい 60u/56px。この列でいちばん大きい面にする */
@media (hover:none){.btn-pill.ct-submit{cursor:pointer}}
/* 押せない見た目は aria-disabled でも同じ。押すと足りない欄を指すので、本物の disabled にはしない
   （disabled は押しても何も起きず、理由が伝わらないため。2026-09-16） */
.btn-pill.ct-submit[disabled],.btn-pill.ct-submit[disabled]:hover,
.btn-pill.ct-submit[aria-disabled="true"],.btn-pill.ct-submit[aria-disabled="true"]:hover{background:var(--g100);color:var(--g700);opacity:1}
  /* 押せないとき: 薄い面＋濃い灰の字（6.5:1）。白字＋灰の面は 1.95:1 でコントラストの基準を割る（2026-09-15 ゲートで検出）。黒の半透明もやめる＝「押せない」が形で分かる */
.ct-note{margin:0;min-height:calc(18 * var(--u))}
.ct-note[data-state="error"]{color:var(--err)}
.ct-fallback{margin:calc(20 * var(--u)) 0 0;color:var(--g500)} .ct-fallback a{color:var(--k);text-decoration:underline;text-underline-offset:3px}
.ct-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 送信後 */
.ct-done{display:flex;flex-direction:column;align-items:flex-start;gap:calc(16 * var(--u));padding:calc(48 * var(--u)) 0}
.ct-done .see{margin-top:calc(16 * var(--u))}
@media (max-width:991px){ .ct-fig{display:none} /* 1 段になる幅では、図がフォームを押し下げるだけなので出さない */ .ct-grid{grid-template-columns:1fr;gap:calc(56 * var(--u))} .ct-intro{position:static} .ct{padding:calc(140 * var(--u)) 0 calc(96 * var(--u))} .ct-lead{max-width:none;font-size:calc(18 * var(--u));line-height:calc(31 * var(--u))} }
@media (max-width:767px){ .ct-lead{font-size:16px;line-height:28px} .ct-l{font-size:15px;line-height:22px} .ct-hint{font-size:13px;line-height:20px} .ct-in{font-size:16px;line-height:24px} /* 16px 未満だと iOS が拡大する */ .ct-opt{font-size:10px} .ct-check{font-size:15px;line-height:22px} .ct-ta{min-height:180px} .btn-pill.ct-submit{font-size:16px;height:56px;padding:0} }

/* ---- 5.5 デザイン（2026-09-15）。G マークの文字は黒なので、この節は白地から動かさない。
   賞は「並べる」のではなく、作法の裏づけとして 1 行の罫の中に収める ---- */
#dsg-h{word-break:keep-all;overflow-wrap:anywhere;max-width:calc(760 * var(--u))}   /* 「画面をつ／くる。」と語中で折れるのを防ぐ。読点で折る */
/* 罫をすべて外した。2026-09-16 しのさん ①「セクションの真ん中に線があってコンテンツが分かれて見える」
   ②「詳細の内容は不要。概要だけでいい」→ 3 つの作法の一覧ごと撤去。この節に残る罫は 0 本 */
.dsg-band{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(40 * var(--u));margin:calc(48 * var(--u)) 0 0;padding:0}
.dsg-awards{display:flex;align-items:flex-end;gap:calc(64 * var(--u))}
.dsg-award{display:flex;flex-direction:column;align-items:flex-start;gap:calc(16 * var(--u))}
.dsg-award + .dsg-award{padding-left:calc(64 * var(--u));border-left:1px solid var(--k14)}
.dsg-logo{display:block;width:auto}
.dsg-logo--if{height:calc(76.8 * var(--u));min-height:62px}   /* 277 × 142 ＝ 1.95:1。2026-09-16 しのさん「ロゴが少し小さい」→ 64 の 20% 増 */
.dsg-logo--g{height:calc(45.6 * var(--u));min-height:37px}    /* 111 × 39 ＝ 2.85:1。赤い角版より軽く見えるよう、丈は約 6 割。同じく 38 の 20% 増 */
.dsg-src{margin:0;text-align:right;flex:0 0 auto}
/* 2026-09-16 しのさん「上下にもう少しだけ隙間を開けて、隣接するセクションと距離を空けて」。
   既定の 60 → 100（隣は 60 のままなので、前後の空きは 120 → 160 になる） */
.design .padding-section{padding:calc(100 * var(--u)) 0}
@media (max-width:991px){
  .dsg-band{flex-direction:column;align-items:flex-start;gap:calc(24 * var(--u));padding:0}
  .dsg-awards{flex-direction:column;align-items:flex-start;gap:calc(28 * var(--u));width:100%}
  .dsg-src{text-align:left;margin-top:calc(12 * var(--u))} .dsg-src br{display:none}   /* 帯の gap 24 に 12 を足し、賞 1 件の見出しと説明（16）より明らかに離す。2 件ぜんぶに掛かる注記であることを間隔で示す */
  .dsg-award + .dsg-award{padding:calc(28 * var(--u)) 0 0;border-left:0;border-top:1px solid var(--k14);width:100%}
  .design .padding-section{padding:64px 0}}   /* --u が下限に貼り付くので px で置く（40 → 64。前後の空きは 80 → 104） */
/* ---- 1 実物（採用サイト vacan-cms/technologies/recruit の .d-cent.is-dark ＋ .d-carousel ＋ .d-pcard をそのまま。トークン値も同じ）---- */
.d-cent{--d-mono:"Azeret Mono",ui-monospace,SFMono-Regular,"Noto Sans JP","Hiragino Sans",monospace;--d-sans:"Archivo","Inter",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  --d-urban-smoke:#FFFFFF;--d-off-white:#000000;--d-rich-carbon:#F5F6F8;--d-core-black:#FFFFFF;--d-white-flash:#F3EFFB;--d-fg2:var(--g500);--d-line:var(--card-line);
  --d-r-lg:20px;--d-r:1px;--d-g1:8px;--d-g2:24px;--d-side:calc(30 * var(--u));--d-d2:.4s;--d-ease:cubic-bezier(.62,.16,.13,1.01);
  background:var(--w);color:var(--d-off-white);padding:calc(96 * var(--u)) 0 calc(100 * var(--u))} /* 2026-09-12 しのさん「この背景だけグレーなのが気になる」: 地は他の節と同じ白。カードの縁と画像の罫で区画を作る */
.d-cent .projects_header{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(30 * var(--u));margin-bottom:calc(40 * var(--u))}
.d-cent .projects_header h2{text-wrap:balance} .kp{word-break:keep-all;overflow-wrap:anywhere} .br-sp{display:none} /* SP 専用の改行。SP ブロックで inline に */ /* 句読点でだけ折る（「自／分たちで」のような語中の折れを防ぐ）。入らないときだけ任意の位置で折る */ .d-cent .projects_header .l27{margin-top:calc(12 * var(--u))}
.car-nav svg{width:calc(22 * var(--u));height:calc(9 * var(--u));display:block;color:inherit} /* └─ の記号（旧 footer と共用していた .footer_svg の寸法をここに移す） */
.car-nav{display:flex;align-items:center;justify-content:flex-end;gap:calc(24 * var(--u));margin-top:calc(8 * var(--u));font-family:var(--d-mono);font-size:11px;line-height:15px;color:var(--d-fg2)} .car-nav button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:none;transition:color var(--t)} .car-nav button:hover{color:var(--k)} .car-nav svg{width:22px;height:9px} .car-pos{font-variant-numeric:tabular-nums}
@media (hover:none){.car-nav button{cursor:pointer}}
.d-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}
.d-pcard{scroll-snap-align:center;border-radius:var(--d-r-lg);background:var(--d-urban-smoke);color:var(--d-off-white);border:1px solid var(--d-line);padding:var(--d-g2);display:flex;flex-direction:column;gap:var(--d-g1);transition:transform var(--d-d2) var(--d-ease)}

.d-pcard img{width:100%;height:auto;display:block;border:1px solid var(--k14)} /* 画面写真の白い端がカードの白に溶けないように */
.d-pcard__n{font-family:var(--d-mono);font-size:11px;line-height:15px;color:var(--d-fg2);margin:0}
/* 見出し（2026-09-12）: 番号と題を baseline で一行に、分類はその下。カード先頭に置き、画像より先に題が目に入る */
/* 見出し行（2026-09-12「01 などの番号はカードの右端に寄せる」）: 題は左、番号は右端。baseline で揃える */
.d-pcard__hd{display:grid;gap:6px;margin:0} .d-pcard__ttl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0} .d-pcard__ttl .d-h3{margin:0;min-width:0;overflow-wrap:anywhere} .d-pcard__ttl .d-pcard__n{order:2;flex:none}
.d-pcard__cat{font-family:var(--jp);font-size:12px;line-height:18px;color:var(--g500);margin:0} /* 分類はサイトのラベル（.l12 dim2）と同じ書体・大きさに（mono の英字ラベルはやめる） */
.d-pcard .d-h3{font-family:var(--d-sans);font-size:34px;line-height:38px;font-weight:600;letter-spacing:-.01em;text-transform:none;margin:0 0 4px}



/* 2026-09-12 文言と設計の見直し: lead（黒 15/23・500）＝ クライアントの言葉で何が変わるか／body（灰 13/21・Noto Sans）＝ AI の役割と自社で使っている事実／evidence（mono 11・灰）＝ 技術読者向けの証拠。和文の本文を mono で組むのをやめる */
.d-pcard__lead{font-family:var(--jp);font-weight:500;font-size:15px;line-height:23px;color:var(--k);margin:6px 0 0}
.d-pcard__body{font-family:var(--jp);font-size:13px;line-height:21px;color:var(--g700);margin:0} .d-pcard__body b{color:var(--k);font-weight:600}
.d-pcard p{margin:0}
.d-pcard__m{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:var(--d-g1);border-top:1px solid var(--d-line);font-family:var(--d-mono);font-size:11px;line-height:15px} .d-pcard__m:empty{display:none} .d-pcard__ev{color:var(--k)}
.d-pcard__m b{font-family:var(--d-sans);font-size:15px;line-height:22px;font-weight:500;color:var(--k)} .d-pcard__m i{font-style:normal;color:var(--d-fg2);margin-left:4px}
.d-pcard__s,.d-pcard__a{color:var(--d-fg2)} .num{font-variant-numeric:tabular-nums}

/* ---- 2 3つのサービスモデル（写真 3:2・幾何の図 3:2・説明。写真は単色に沈め hover で色を戻す＝asset-rules §4）---- */
.services .padding-section{padding:calc(60 * var(--u)) 0 calc(96 * var(--u))} .services .l27{margin-top:calc(12 * var(--u))}
.svc-rows{margin-top:calc(48 * var(--u));border-top:1px solid var(--k14)}
.svc-row{display:grid;grid-template-columns:repeat(3,minmax(0,calc(443.7 * var(--u))));gap:calc(24 * var(--u));padding:calc(48 * var(--u)) 0;border-bottom:1px solid var(--k14);align-items:start}
.svc-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:calc(4 * var(--u));transition:transform var(--d-l) var(--e-out)}
.svc-row:hover .svc-photo img{transform:scale(1.02)}
/* 動画は素材比率のまま（1440×922・四隅の焼き込み角丸を切り落とし済み）。写真の器と同じ角丸・枠。reduced-motion では JS が止めてポスターを見せる */
.svc-video{display:block;width:100%;height:auto;aspect-ratio:1440/922;object-fit:cover;border-radius:calc(4 * var(--u));background:var(--g100)}
.svc-photo figcaption{margin-top:calc(8 * var(--u))}
.svc-fig{aspect-ratio:3/2;border:1px solid var(--k14);border-radius:calc(4 * var(--u));overflow:hidden;background:var(--w)} .svc-canvas{width:100%;height:100%;display:block}
.svc-text{display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.svc-steps{display:flex;flex-direction:column;gap:calc(6 * var(--u));margin-top:calc(8 * var(--u))} .svc-steps li{display:flex;align-items:center;gap:calc(6 * var(--u));color:var(--g500)} .svc-steps svg{width:calc(22 * var(--u));height:calc(9 * var(--u));flex:0 0 auto}

/* ---- 3 進め方の文（LOCATIONS の器: 3600・固定 900・72/86.4 run-in・句ごとに点灯）---- */
.locations{height:calc(3600 * var(--u));min-height:400vh}
.locations_component-view{height:100%}
.locations_component-sticky{position:sticky;top:0;height:100vh;max-height:calc(900 * var(--u));padding:0 calc(30 * var(--u));overflow:clip}
.component_locations{position:relative;padding:calc(87 * var(--u)) 0 calc(60 * var(--u))} .loc-label{opacity:.64;margin-bottom:calc(60 * var(--u))}
.locations_text{width:calc(1380 * var(--u));max-width:100%;font-size:var(--loc-fs,calc(72 * var(--u)));line-height:1.2}
.loc-word{opacity:.1;transition:opacity var(--d-m) var(--e-out),color var(--d-m) var(--e-out)} .loc-word.is-on{opacity:1;color:var(--k)} .loc-word.was{opacity:.36} .loc-word.is-key.is-on,.loc-word.is-key.was{opacity:1;color:var(--violet)} /* 2026-09-14 しのさん: 要の語（「小さなアウトプット」・確実に定着させる）は黒ではなく VACAN Violet で残す。読んでいる語は黒のまま */

/* ---- 4 FDE は、どこからどこまでを受け持つか（sui.io 実測: 節 pad 0 195・container 1050・見出し 90/90 ls-5.4 180 高・gap 154・main 3968・列 463・右 pad-top 124／左 800・gap 944・カード 463×420・色 #13151A / #4B515B / #6C7584・sticky@315 の点線 250 ＋ 白 12px）---- */
.stack{padding:0 calc(195 * var(--u)) calc(48 * var(--u));overflow:clip;background:var(--w);color:var(--k)}
.container-1050{width:calc(1050 * var(--u));max-width:100%;margin:0 auto}
.timeline_wrapper{padding-top:0;display:flex;flex-direction:column;gap:calc(154 * var(--u))}
/* 見出しの舞台: 140vh。見出しは画面中央に sticky で留まり（約 1 画面ぶんの滞留）、その後カードが続く。参照は hero の画像シーケンス完了で見出しを pin していたので、その滞留を sticky で置き換える */
.timeline_stage{height:140vh;min-height:calc(900 * var(--u))}
.timeline_heading{position:sticky;top:calc(50vh - 140px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.timeline_heading_in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(21 * var(--u));opacity:0;will-change:transform,opacity}
html.no-js .timeline_heading_in{opacity:1}
.h2-90px{font-family:var(--jp);font-weight:400;font-size:calc(90 * var(--u));line-height:calc(106.2 * var(--u)); /* 1.18 ＝ Hero 見出し（92px）と同じ比。2026-09-12「行の隙間が狭い」（旧 1.0） */letter-spacing:-.04em;text-align:center;color:var(--k);word-break:keep-all} 
.timeline_main{position:relative;height:calc(3968 * var(--u))}
.timeline_colum_left{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%)}
.timeline_colum_left.mobile_optimized{left:calc(1 * var(--u));padding-top:calc(800 * var(--u))} .timeline_colum_left.right{left:calc(586 * var(--u));padding-top:calc(124 * var(--u))}
/* 2026-09-12: カードの地を真っ白に（旧 paper #F5F6F8）。白い節の上なので輪郭は 4 辺の罫（#C9CDD3）で出す。線・文字は一段濃く */
.colum_card_main{position:relative;width:calc(463 * var(--u));background:var(--w);border:1px solid var(--card-line);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.timeline_colum_card{position:relative;height:calc(74 * var(--u));border-top:1px solid #C9CDD3;padding:calc(16 * var(--u));display:flex;align-items:center;justify-content:flex-start;gap:calc(12 * var(--u))}
.timeline_colum_card.bottom{padding:calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(67 * var(--u));border-top:0} .timeline_colum_card.bottom.is-open{border-top:1.5px solid #C9CDD3} .timeline_colum_card .color-gray{color:var(--g700)}
.timeline_num{width:calc(40 * var(--u));height:calc(40 * var(--u));border:1px solid var(--g700);display:flex;align-items:center;justify-content:center;color:var(--k);flex:0 0 auto;background:var(--w)}
.ts-14px{font-family:var(--mono);font-size:calc(14 * var(--u));line-height:calc(19.6 * var(--u));letter-spacing:calc(-.28 * var(--u));color:var(--k)}
.ts-18px{font-family:var(--jp);font-size:calc(18 * var(--u));line-height:calc(25.2 * var(--u));letter-spacing:-.02em} .color-gray{color:var(--g500)}
.gray_cube{position:absolute;left:calc(28.8 * var(--u));top:calc(58 * var(--u));width:calc(14 * var(--u));height:calc(14 * var(--u));background:var(--w);transform:translateY(calc(7 * var(--u)))} .gray_cube.bottom{top:calc(-14.4 * var(--u))}
.timeline_card_anim{position:relative;height:0;padding-left:calc(36 * var(--u));display:flex;align-items:stretch;justify-content:center;overflow:hidden}
.rivesize{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} .tl-canvas{width:calc(393 * var(--u));height:calc(272 * var(--u));display:block}
.tl-out{font-size:calc(11 * var(--u));line-height:1;color:var(--k);letter-spacing:0}
.tl-roles{margin-left:auto;display:flex;gap:calc(6 * var(--u));flex:none} .tl-role{font-size:calc(10 * var(--u));line-height:1;letter-spacing:.06em;padding:calc(4 * var(--u)) calc(7 * var(--u)) calc(3 * var(--u));border-radius:3px;background:var(--k);color:var(--w);white-space:nowrap} /* 工程に居る役割のタグ（G7 案 A・2026-09-14）。図の中のチップと同じ黒。居ない役割は出さない */
.tl-lead{color:var(--g500);text-align:center}
.timeline_connector{position:absolute;left:calc(35.2 * var(--u));top:0;width:calc(22.4 * var(--u));height:100%;padding:calc(56 * var(--u)) 0 calc(36 * var(--u));z-index:2;display:flex;flex-direction:column;pointer-events:none}
.connector_line_top{width:1.5px;flex:1 1 auto;background:var(--g500)} .connector_line_bottom{width:100%;height:1.5px;background:var(--g500)}
.timeline_progress_main{position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;opacity:0}
.timeline_current{position:sticky;top:calc(315 * var(--u));width:2px;height:calc(250 * var(--u));z-index:2}
.timeline_current::before,.timeline_current::after{content:"";position:absolute;left:0;right:0;height:12%;z-index:3;pointer-events:none} .timeline_current::before{top:0;background:linear-gradient(to bottom,#fff,rgba(255,255,255,0))} .timeline_current::after{bottom:0;background:linear-gradient(to top,#fff,rgba(255,255,255,0))}
.tl_current_top,.tl_current_bottom{position:absolute;left:0;width:2px;height:0;background:var(--violet)} /* 2026-09-14 しのさん: 背骨の四角と、スクロールで伸びる軌跡（彗星の尾）は VACAN Violet。点線は黒のまま */ .tl_current_top{bottom:50%;margin-bottom:6px} .tl_current_bottom{top:50%;margin-top:6px}
.timeline_progress{position:absolute;left:0;top:0;width:2px;height:100%;color:var(--k);opacity:0} .timeline_progress svg{display:block;width:2px;height:100%}
.white_cube{position:absolute;left:-5px;top:50%;margin-top:-6px;width:12px;height:12px;background:var(--violet);z-index:2}

/* ---- 5 現場に置いた後、何が起きたか（NUMBERS の器: 36 w660／右 444／行 226・ラベル 12 x30・数字 180 x721 幅 110/桁・単位 36）---- */
.stats{margin-top:calc(96 * var(--u))}
.stat-row{position:relative;height:calc(226 * var(--u));border-top:1px solid var(--k14);display:flex;justify-content:space-between;align-items:flex-start}
.stat-row:last-child{border-bottom:1px solid var(--k14)}
.stat-label{padding-top:calc(9 * var(--u));font-size:calc(18 * var(--u));line-height:1.6;color:var(--g700);max-width:calc(520 * var(--u))} /* 2026-09-12「左のテキストが小さい」: 180px の数字の隣で 12px は比 15:1 で意味の側が消える → 18px・1.6（比 10:1）。数字の説明なので灰 700 */
.odometer{position:absolute;left:calc(691 * var(--u));top:calc(9 * var(--u));display:flex;align-items:baseline;color:var(--k)}
.digit{display:inline-block;width:calc(110 * var(--u));height:calc(180 * var(--u));overflow:hidden;text-align:center} .digit.sym{width:calc(100 * var(--u))}
.reel{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1)} .reel span{display:block;height:calc(180 * var(--u))}
.odometer .unit{margin-left:calc(12 * var(--u));color:var(--g500);align-self:flex-end;padding-bottom:calc(28 * var(--u))}
.see{display:inline-block;margin-top:calc(40 * var(--u));transition:opacity var(--t)} .see:hover{opacity:.52}
/* ---- 6 会社の考え = benjamincreative.me の Ticker 実測（帯 213 = 32 ＋ 24 ＋ 133 ＋ 24 ／ 146px/132.86 ls -6 白 ／ 区切り 100×100 35% ／ gap 16 ／ 80px/s 左）。橙 → 黒（上の薄い帯は #2B2B2B） ---- */
.thought{padding:calc(60 * var(--u)) 0 0;overflow:clip}
.thought-head{display:flex;justify-content:flex-start;align-items:baseline;margin-bottom:calc(40 * var(--u))} /* 2026-09-12: ラベルは左の 1 つだけ（「私たちが現場で守ること。」） */
.ticker-band{background:var(--w);padding-top:calc(32 * var(--u));position:relative;user-select:none;-webkit-user-select:none;touch-action:pan-y} .ticker-band.is-grab .ticker{will-change:transform} @media (hover:none){.ticker-band{cursor:grab} .ticker-band.is-grab{cursor:grabbing}} /* 掴んで投げられる（2026-09-12） */ /* 参照の「上の薄い帯」は置かない（指示 2026-09-11）。高さ 213 は保つ */
.ticker-frame{padding:calc(24 * var(--u)) 0;overflow:hidden}
.ticker{display:flex;flex-direction:row;align-items:flex-start;gap:calc(132 * var(--u));width:max-content;list-style:none;margin:0;padding:0;will-change:transform}
.ticker li{flex:0 0 auto;height:fit-content;width:fit-content}
.tk-text{font-family:var(--jp);font-weight:500;font-size:calc(146 * var(--u));line-height:calc(132.86 * var(--u));letter-spacing:-.02em;color:var(--k);white-space:nowrap;margin:0}
/* ---- 7 媒体（3 カード 444・高さ 360/240/280）---- */
/* 媒体（2026-09-11「窮屈・画像がデカすぎる」→ 2 列カードをやめ、画像 444×250 ＋ 文 600 の行に。行間 40・罫で区切る） */
.news-head{margin-bottom:calc(56 * var(--u))} .news-head .l12{margin-top:calc(12 * var(--u))}
.news-list{display:block} .news-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:calc(40 * var(--u)) 0;border-top:1px solid var(--k14);min-width:0} .news-item:last-child{border-bottom:1px solid var(--k14)} .news-body{display:flex;flex-direction:column;gap:calc(12 * var(--u));min-width:0}
.case-wrap{display:block;position:relative;height:0;padding-top:56.25%;overflow:hidden;border-radius:calc(4 * var(--u));background:var(--k14)} .case-wrap .case-img{position:absolute;inset:0} .news-item .l15r{flex:1 1 auto} .case-img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform var(--d-l) var(--e-out)} .news-item:hover .case-img{transform:scale(1.03)}
.news-title{display:flex;align-items:center;gap:calc(8 * var(--u))} .news-title .arr{font-family:var(--sans);opacity:.52} .news-item:hover .l15{text-decoration:underline}
/* ---- 会社概要（2 列 = Google マップ 4:3 ＋ 罫の表。行 20/20・dt 160・見出しは他節と同じ 36＋12）---- */
/* 会社概要（2026-09-11「地図がデカすぎる／ゆとり」→ 表を左 660 まで・地図を右 444 幅に。行の上下 24） */
.co-head{margin-bottom:calc(56 * var(--u))} .co-head .l12{margin-top:calc(12 * var(--u));max-width:calc(660 * var(--u))}
/* 会社概要（2026-09-12 v3「右側が変に空白」）: 表 600 ＋ 60 ＋ 地図は残り幅いっぱい（1440 で 700）。行の高さは表に合わせ、地図の列は「地図（伸びる）＋ 脚注」で同じ高さ。地図の端は .co-dissolve が升で欠かせる（中心だけ見えればよい） */
.co-grid{display:grid;grid-template-columns:minmax(0,calc(600 * var(--u))) minmax(0,1fr);gap:calc(60 * var(--u));align-items:stretch}
.co-map{display:flex;flex-direction:column;min-height:0}
.co-mapwrap{position:relative;flex:1 1 auto;min-height:calc(280 * var(--u));overflow:hidden}
.co-dissolve{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.co-iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:var(--g100)}
.co-mapfoot{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(24 * var(--u));margin-top:calc(12 * var(--u));flex:none} .co-mapfoot .see{margin-top:0;white-space:nowrap}
.co-table{margin:0} .co-row{display:grid;grid-template-columns:calc(160 * var(--u)) minmax(0,1fr);gap:calc(16 * var(--u));padding:calc(24 * var(--u)) 0;border-top:1px solid var(--k14)} .co-row:last-child{border-bottom:1px solid var(--k14)}
.co-row dd{margin:0} .co-row a{display:inline-flex;align-items:baseline;gap:calc(6 * var(--u))} .co-row a:hover{text-decoration:underline} .co-row .arr{font-family:var(--sans);opacity:.52;font-size:calc(12 * var(--u))}
/* ---- 8 CTA（中央 36 ＋ 12 ×3 行 ＋ アバター 40 ＋ ピル）---- */
/* 締め ＝ 代表からの手紙（2026-09-12）: 560 の一段組を中央に置き、中は左揃え。書体は Hero と同じ Shippori Mincho（サイトの最初と最後を同じ声にする）。見出し 36/1.5・本文 17/1.95・署名・黒のピル。採用リンクはここに置かない */
.cta-letter{max-width:calc(560 * var(--u));margin:0 auto;padding:calc(128 * var(--u)) 0 calc(136 * var(--u));display:flex;flex-direction:column;align-items:flex-start;gap:calc(20 * var(--u))}
.cta-h{font-family:var(--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}
.cta-p{font-family:var(--serif);font-weight:400;font-size:calc(17 * var(--u));line-height:1.95;color:var(--g700);margin:0}
.cta-letter .person{margin-top:calc(12 * var(--u))} .cta-letter .btn-pill{margin-top:calc(8 * var(--u))}
.person-name{display:flex;flex-direction:column;gap:2px;font-family:var(--serif);font-weight:600;font-size:calc(14 * var(--u));line-height:1.4;color:var(--k)} .person-role{font-family:var(--jp);font-weight:400;font-size:calc(11 * var(--u));line-height:1.4;color:var(--g500)}
.person{display:flex;align-items:center;gap:calc(14 * var(--u))} .image-full{width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:50%;object-fit:cover}
.btn-pill{display:inline-flex;align-items:center;height:calc(40 * var(--u));padding:0 calc(20 * var(--u));border-radius:calc(1199 * var(--u));background:var(--k);color:var(--w);transition:background-color var(--t),transform var(--d-s) var(--e-out)} .btn-pill:hover{background:var(--k2)}

/* ---- footer（2026-09-12 再設計）: sui.io の写し（実線＋点線・└─・mono 一色）をやめ、サイト本体の表の語彙（会社概要の罫・.l12 のラベル・15 の本文）で組む。
   罫は 1 本だけ（節の境界 = --k14）。上 72 → ブランド行 → 罫 → 3 列（48/56）→ 罫 → 24 → © と規約。列は等分 3、見出しは .l12 と同じ 12/18 灰、項目は 15/22 黒＋外部リンクの ↗。hover は本体と同じ（解像＋下線） ---- */
.footer{background:var(--w);color:var(--k);border-top:1px solid var(--k14);padding:calc(72 * var(--u)) 0 calc(40 * var(--u));font-family:var(--jp)}
/* 大きなロゴ（2026-09-12「footer の下部に大きな Logo を signage サイトのように」）: signage は Marcellus の文字 clamp(40px,11vw,158px)・器いっぱい。本サイトはワードマーク SVG（610×80）を器の幅いっぱいに（1440 → 1360u 幅・高さ ≈178u）。上 56・下 40 */
.ft-mark{display:block;margin:calc(56 * var(--u)) 0 calc(40 * var(--u))} .ft-mark svg{display:block;width:100%;height:auto} .ft-mark svg *{fill:var(--k)}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(40 * var(--u));padding:0}
.ft-h{font-size:calc(12 * var(--u));line-height:calc(18 * var(--u));color:var(--g500);margin:0 0 calc(16 * var(--u))}
.ft-list{display:flex;flex-direction:column;gap:calc(12 * var(--u));align-items:flex-start}
.ft-list a{font-size:calc(15 * var(--u));line-height:calc(22 * var(--u));color:var(--k);display:inline-flex;align-items:baseline;gap:calc(6 * var(--u))} .ft-list a:hover{text-decoration:underline} .ft-list .arr{font-family:var(--sans);opacity:.52;font-size:calc(12 * var(--u))}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:calc(24 * var(--u));padding-top:calc(24 * var(--u));border-top:1px solid var(--k14)}
.ft-copy{font-family:var(--mono);font-size:calc(11 * var(--u));line-height:calc(16 * var(--u));color:var(--g500);letter-spacing:.02em;margin:0}
.ft-legal{font-size:calc(12 * var(--u));line-height:calc(18 * var(--u));color:var(--g700)} .ft-legal:hover{color:var(--k);text-decoration:underline}
/* ---- カーソル（difference）: 既定は 12px の点。文字リンクの上でも点のまま（文字を隠さない）。data-cursor を持つ絵の上だけ 96px の円＋ラベル ---- */
@media (hover:none){#cur,#curv{display:none}}
/* ---- 入場・reveal ---- */
/* 入場 ＝ 解像（#rz の覆いが 48→6px と細かくなる 480ms のうち、最後の 300ms で実物が現れる）。移動はしない（升目がその場で解ける絵なので） */
.rv{opacity:0} .rv.is-in{opacity:1} /* 解像 v2: 入場の瞬間に DOM は見えるが、同じフレームで #rz が未解像の字と画像を覆う（覆い方式）。フェードは無い */
#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 .odometer,.is-rz .odometer *{-webkit-text-fill-color:currentcolor!important} /* canvas に描かれない字（スクランブル中・動く数字）は消さない（2026-09-12「Google Maps を hover すると字が消える」） */ /* 解像中: 字だけ瞬時に透明（背景・罫・currentColor の SVG は残る）。canvas がブロックと実字を描く。終われば外す */ /* ヘッダー（800）より上・カーソル（1000）より下。90 だとヘッダーのリンクの覆いがピルの下に描かれて字が読めたままだった（2026-09-12） */
#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-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} #cur .c-chl{transform:rotate(45deg)}
#curv i{background:var(--violet)} #curv .c-k{background:transparent;border-color:var(--violet)} #curv.is-dark i{background:var(--violet-lt)} #curv.is-dark .c-k{background:transparent;border-color:var(--violet-lt)} /* 十字とブラケット ＝ VACAN Violet（2026-09-14）。黒いピルの中では薄い violet */ /* カーソルは DOM（合成だけ）。canvas 版と同じ寸法: 点 4・十字 21・ブラケット 10・矢羽 5 */
#curv .c-k{transform-origin:5px 5px}
html.no-js .rv{opacity:1}
.scr{display:inline-block;min-width:1ch}
@media (max-width:991px){
  .two-col{flex-direction:column} .right-col{width:auto}
  .d-carousel{grid-auto-columns:86vw} .d-cent .projects_header{flex-direction:column;align-items:flex-start;gap:calc(20 * var(--u))} .d-cent .projects_header .max-65{max-width:none} .d-cent .projects_header .max-444{max-width:none}
  .svc-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .svc-text{grid-column:span 2}
  .h72{font-size:calc(48 * var(--u));line-height:calc(58 * var(--u))} .hero-title{font-size:calc(64 * var(--u))}
  .stack{padding:0 28px calc(48 * var(--u))} .h2-90px{font-size:calc(44 * var(--u));line-height:calc(52 * var(--u))} /* 1.18 */ .br-sp{display:inline} #work-h,#svc-h,#res-h,#news-h,#cta-h{word-break:keep-all} .h36{font-size:clamp(20px,5.6vw,24px);line-height:1.1} /* 2026-09-14 SP の節見出し: 390 で 21.8px・375 で 21px。「実運用に耐える基幹システムを、」15 字が 1 行に入る幅（旧 24px 固定では 349px > 334px で入らなかった）。比 1.1 は据え置き */ /* 2026-09-14 SP の短い見出しは句読点（と br-sp）でだけ折る。「何が起きた／か。」の孤立を防ぐ。長文の loc-h は対象外（keep-all＋anywhere だと「、」だけの行ができた） */ /* SP は固定改行を外し 2 行に均等割り（「を」が 1 文字で孤立しないように） */ .timeline_main{height:auto;display:flex;flex-direction:column;gap:calc(24 * var(--u))}
  .timeline_colum_left,.timeline_colum_left.right,.timeline_colum_left.mobile_optimized{display:contents;transform:none!important;opacity:1!important;visibility:visible!important} .colum_card_main{width:100%;order:var(--i)} .timeline_progress_main{display:none} .timeline_card_anim{height:calc(272 * var(--u))!important} .rivesize{transform:none!important;opacity:1!important} .timeline_colum_card.bottom{border-top:1.5px solid var(--line)} .timeline_stage{height:auto;min-height:0;padding:calc(80 * var(--u)) 0 calc(40 * var(--u))} .timeline_heading{position:static} .timeline_heading_in{opacity:1!important;transform:none!important;visibility:visible!important}
  .odometer{position:static;font-size:calc(120 * var(--u));line-height:calc(120 * var(--u))} .digit{width:calc(74 * var(--u));height:calc(120 * var(--u))} .reel span{height:calc(120 * var(--u))} .stat-row{height:auto;flex-direction:column;padding:calc(16 * var(--u)) 0} .odometer .unit{padding-bottom:calc(16 * var(--u))}
  .co-grid{grid-template-columns:1fr;gap:calc(40 * var(--u))} .co-map{max-width:none} .co-mapwrap{flex:none;aspect-ratio:16/10;min-height:0} .ft-cols{gap:calc(28 * var(--u))} .news-item{grid-template-columns:calc(360 * var(--u)) minmax(0,1fr)} .tk-text{font-size:calc(96 * var(--u));line-height:calc(88 * var(--u))}
}
@media (max-width:767px){ .container-large{max-width:calc(100% - 56px)} }
@media (max-width:767px){ .hero-title{flex-direction:column;gap:calc(8 * var(--u));font-size:calc(52 * var(--u))} .hero-bar{display:none} .hero-sub{font-size:calc(16 * var(--u))} .co-row{grid-template-columns:1fr;gap:calc(6 * var(--u))} .co-mapfoot{flex-direction:column} .co-map{max-width:none} .news-item{grid-template-columns:1fr;gap:calc(16 * var(--u));align-items:start;padding:calc(28 * var(--u)) 0} .svc-row{grid-template-columns:minmax(0,1fr)} .svc-text{grid-column:span 1} .news-list{grid-template-columns:minmax(0,1fr)} .ft-cols{grid-template-columns:1fr;gap:32px;padding:0} .ft-mark{margin:40px 0 28px} .ft-bottom{flex-direction:column;align-items:flex-start;gap:12px} }
@media (max-width:767px){ .cta-letter{padding:calc(88 * var(--u)) 0 calc(96 * var(--u))} .cta-h{font-size:26px;line-height:1.5} .cta-p{font-size:15px;line-height:1.9} .person-name{font-size:13px} .person-role{font-size:11px} } /* --u は 390 で .6664 に張り付くので手紙は px で指定（17u = 11.3px では読めない） */
/* ===== SP QA（2026-09-12・しのさん「スマホの UI UX が問題ないか QA してデザインを再確認」） =====
   --u は 390 で .6664 に張り付くので、12u の文が 8px・15u が 10px になっていた（QA で 12px 未満の文が 36 種）。文字の型だけ px の下限を置く（余白は --u のまま）。
   タップ領域: 罫のリンク・footer・カルーセルの Prev/Next が 9〜15px 高 → ::after で 44px 相当に広げる（レイアウトは変えない）。
   Hero: min-height 640 > max-height 600（900u）で矛盾 → 100svh・下限 560・上限なし。進め方のラベルがピルの下に入る → 上余白 96px */
@media (max-width:767px){
  .l12,.l12b,.l12s{font-size:12px;line-height:18px} .l15,.l15r{font-size:15px;line-height:22px} .m105{font-size:11px;line-height:11px} .meta{font-size:11px;line-height:16px}
  .hero-eyebrow{font-size:10px} .hero-scroll{font-size:9px} .hero-sub{font-size:15px;line-height:1.8}
  .tl-out{font-size:10px} .tl-roles{gap:6px} .tl-role{font-size:10px;padding:4px 7px 3px} .ts-14px{font-size:12px;line-height:17px;letter-spacing:0} .ts-18px{font-size:14px;line-height:20px}
  .ft-h,.ft-legal{font-size:12px;line-height:18px} .ft-list a{font-size:15px;line-height:22px} .ft-list{gap:10px} .ft-copy{font-size:11px;line-height:16px}
  .stat-label{font-size:14px;line-height:1.6} .person-role{font-size:12px} .d-pcard__body{font-size:13px;line-height:21px} .car-nav{font-size:12px}
  .see,.co-row a,.ft-list a,.ft-legal{position:relative} .see::after,.co-row a::after,.ft-list a::after,.ft-legal::after{content:"";position:absolute;left:-8px;right:-8px;top:-11px;bottom:-11px} /* 見た目 18〜32px のリンクに 44px 以上の当たり判定（描画はしない） */
  .arr{font-size:12px}
  .car-nav button{min-height:44px;padding:0 10px} .btn-pill{height:44px;padding:0 20px;font-size:13px}
  .home-hero_content-view{height:100svh;min-height:560px;max-height:none} .component_locations{padding-top:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .rv{opacity:1} .loc-word{opacity:1} #cur,#curv,#rz{display:none} body{cursor:auto} .timeline_heading_in{opacity:1!important;transform:none!important;visibility:visible!important} .timeline_colum_left{transform:none!important;opacity:1!important} .timeline_card_anim{height:calc(272 * var(--u))!important} .rivesize{transform:none!important;opacity:1!important} .timeline_colum_card.bottom{border-top:1.5px solid var(--line)} .timeline_progress_main,.timeline_progress{opacity:1!important}
}

/* ===== 導入クライアントロゴ帯 ＝ 自社 signage サイト（vacan-cms/signage/css/plan-f.css L453–482）をそのまま移植。値は px/clamp/vw のまま（案Bの --u 換算にしない）。
   置換したトークンだけ: --f-line-3(#dcdcd8)→--line(#DADDE2) ／ --f-pad→clamp(20px,4vw,60px) の実値 ／ --f-ink-4→#636363 の実値 ===== */
.f-logos { position: relative; z-index: 1; padding: clamp(40px, 6vh, 78px) 0 clamp(46px, 7vh, 90px); background: transparent; border: 0; } /* 2026-09-11 指示: 地は透明・上下の罫なし（signage の border-top/bottom は外す） */
.f-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; /* signage は body に keep-all。案Bは body に無いので lead だけに付け、<wbr> の位置でしか折り返さないようにする（「株式会社｜バカン」で割れない） */ }
.f-logos__win { overflow: hidden; }
.f-logos__win + .f-logos__win { margin-top: clamp(22px, 2.6vw, 36px); }
.f-logos__track { display: flex; align-items: center; width: max-content; list-style: none; margin: 0; padding: 0; will-change: transform; animation: fLogos 58s linear infinite; }
.f-logos__track--b { animation-name: fLogosRev; animation-duration: 47s; }
.f-logos__track--c { animation-duration: 66s; }
.f-logos__track li { flex: none; margin: 0 clamp(34px, 4.4vw, 64px) 0 0; }
.f-logos__track img { display: block; width: auto; opacity: .78; height: clamp(26px, 2.6vw, 35px); }
.f-logos__track li[data-sz="w"] img { height: clamp(22px, 2.2vw, 29px); }
.f-logos__track li[data-sz="s"] img { height: clamp(36px, 3.6vw, 48px); }
@keyframes fLogos { to { transform: translateX(-50%); } }
@keyframes fLogosRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .f-logos__track { animation: none; } .f-logos__win { overflow-x: auto; } }