/* =========================================================
   base.css : トークン / リセット / 共通UI
   方針: 配色は palette.js が --paper / --ink / --mint / --blue / --lav を切替。
   面・線・ガラスは color-mix で派生させ、明配色でも暗配色でも破綻しない。
   ========================================================= */

:root {
  /* シネマティックな“真っ黒”ベース（紺ではない）。アクセントは palette.js が切替（既定: Aether） */
  --paper:#07080c;
  --ink:#eef2f7;
  --ink-soft:#a0abbd;
  --mint:#36c5ff;
  --blue:#3d8bff;
  --lav:#9a8cff;

  /* 派生（自動で明暗に追従） */
  --surface: color-mix(in srgb, var(--ink) 5%, var(--paper));
  --surface-2: color-mix(in srgb, var(--ink) 9%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 7%, transparent);
  --glass: color-mix(in srgb, var(--paper) 64%, transparent);

  --maxw:1240px;
  --gut:clamp(20px,5vw,80px);
  --radius:18px;

  --en:"Space Grotesk", sans-serif;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--jp);line-height:1.85;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background .6s var(--ease),color .6s var(--ease);
}
body.is-loading{overflow:hidden;height:100vh;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img,canvas,svg{display:block;max-width:100%;}
em{font-style:normal;}
strong{font-weight:700;color:var(--ink);}
::selection{background:var(--ink);color:var(--paper);}

@media(hover:hover) and (pointer:fine){
  body{cursor:none;}
  a,button,[data-cursor],[data-magnetic]{cursor:none;}
}

/* ---- プリローダー ---- */
.preloader{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;transition:opacity .6s var(--ease),visibility .6s var(--ease);}
.preloader.is-done{opacity:0;visibility:hidden;}
.preloader__inner{display:flex;align-items:baseline;gap:18px;font-family:var(--en);}
.preloader__name{font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.04em;color:var(--ink-soft);}
.preloader__count{font-size:clamp(3rem,12vw,8rem);font-weight:500;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.preloader__bar{width:min(320px,60vw);height:2px;background:var(--line);overflow:hidden;}
.preloader__bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--mint),var(--blue));}

/* ---- カスタムカーソル ---- */
.cursor{position:fixed;top:0;left:0;z-index:300;pointer-events:none;}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%);}
.cursor__dot{width:7px;height:7px;background:var(--ink);}
.cursor__ring{width:40px;height:40px;border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);}
.cursor.is-hover .cursor__ring{width:64px;height:64px;background:color-mix(in srgb,var(--ink) 8%,transparent);border-color:transparent;}
.cursor.is-hover .cursor__dot{opacity:0;}
.cursor.is-label .cursor__ring{width:84px;height:84px;background:var(--mint);border-color:transparent;}
.cursor__label{position:absolute;top:0;left:0;transform:translate(-50%,-50%) scale(.6);font-family:var(--en);
  font-size:.78rem;font-weight:600;color:#06231d;opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);white-space:nowrap;}
.cursor.is-label .cursor__label{opacity:1;transform:translate(-50%,-50%) scale(1);}
@media(hover:none),(pointer:coarse){.cursor{display:none;}}

/* ---- ヘッダー ---- */
/* ヘッダー＝ヒーロー中は隠れ、ヒーローを過ぎると上からスライドして追従（スティッキー出現） */
.header{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--gut);background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
  transform:translateY(-118%);opacity:0;pointer-events:none;
  transition:transform .55s var(--ease),opacity .4s var(--ease),padding .4s var(--ease),background .4s var(--ease);}
.header.is-stuck{transform:none;opacity:1;pointer-events:auto;}
/* スティッキー時：ヘッダー下端に“流れるチップの帯”を出す（チップ→バナー化の演出） */
.header__ticker{position:absolute;left:0;right:0;top:100%;height:0;overflow:hidden;opacity:0;pointer-events:none;
  background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
  transition:height .5s var(--ease),opacity .5s var(--ease);}
.header.is-stuck .header__ticker{height:34px;opacity:1;}
.header__ticker-track{display:flex;align-items:center;gap:14px;width:max-content;height:34px;padding-left:var(--gut);
  animation:hticker 24s linear infinite;will-change:transform;}
@keyframes hticker{to{transform:translateX(-50%);}}
.mini-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--en);font-size:.7rem;letter-spacing:.02em;color:var(--ink-soft);white-space:nowrap;}
.mini-chip b{width:7px;height:7px;border-radius:3px;background:linear-gradient(135deg,var(--mint),var(--blue));}
.header__brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;}
/* ロゴマーク（N＋ブルーの角）。fillはCSS変数なので配色に追従する */
.logo-mark{width:27px;height:27px;flex:none;}
.logo-mark{width:24px;height:24px;}
.header__name{display:inline-flex;align-items:baseline;gap:.22em;font-size:.98rem;letter-spacing:.02em;}
.header__name b{font-weight:700;color:var(--ink);}
.header__name>span{font-weight:400;color:var(--ink-soft);}
.header__nav{display:flex;gap:30px;font-size:.92rem;font-family:var(--en);}
.header__nav a{color:var(--ink-soft);position:relative;transition:color .3s var(--ease);}
.header__nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--mint);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
.header__nav a:hover{color:var(--ink);}
.header__nav a:hover::after{transform:scaleX(1);transform-origin:left;}
/* 無料相談＝反転（青地×白）で最も目立たせる */
.header__cta{white-space:nowrap;padding:10px 22px;border-radius:999px;background:var(--mint);border:1px solid var(--mint);color:#fff;font-size:.9rem;font-weight:700;
  box-shadow:0 6px 20px color-mix(in srgb,var(--mint) 35%,transparent);transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);}
.header__cta:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateY(-1px);}
@media(max-width:860px){
  .header__nav{display:none;}
  .header{padding:12px 16px;gap:10px;}
  .header__cta{padding:9px 15px;font-size:.84rem;}
  .header__ticker{display:none;} /* スマホは常時ヘッダーのため帯は出さない（被り・ノイズ防止） */
}

/* ---- ハンバーガー＋モバイルメニュー（860px以下で有効） ---- */
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  padding:10px;border:1px solid var(--line);border-radius:12px;background:transparent;cursor:pointer;flex:none;}
.menu-btn i{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .3s var(--ease);}
.menu-btn.is-open i:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn.is-open i:nth-child(2){opacity:0;}
.menu-btn.is-open i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mnav{position:fixed;inset:0;z-index:75;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:90px var(--gut) 40px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(18px);
  visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility .4s var(--ease);}
.mnav.is-open{visibility:visible;opacity:1;}
.mnav a{font-size:clamp(1.3rem,6vw,1.7rem);font-weight:800;color:var(--ink);padding:12px 0;
  border-bottom:1px solid var(--line-soft);display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);
  transition-delay:calc(var(--mi,0)*60ms);}
.mnav.is-open a{opacity:1;transform:none;}
.mnav a small{font-family:var(--en);font-size:.68rem;letter-spacing:.14em;color:var(--mint);text-transform:uppercase;}
.mnav .mnav__cta{margin-top:18px;border:none;justify-content:center;border-radius:999px;background:var(--mint);
  color:#fff;font-size:1.05rem;padding:16px;}
@media(max-width:860px){
  .menu-btn{display:flex;}
  /* メニューを開くためにヘッダーはモバイルでは常時表示 */
  .header{transform:none;opacity:1;pointer-events:auto;background:var(--glass);backdrop-filter:blur(14px);}
}
body.is-menu-open{overflow:hidden;}

/* ---- フッター回遊ナビ ---- */
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:0 var(--gut) 34px;
  font-size:.88rem;}
.footer__nav a{color:var(--ink-soft);transition:color .3s var(--ease);}
.footer__nav a:hover{color:var(--mint);}

/* ---- ボタン ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:16px 30px;border-radius:999px;
  font-weight:600;font-size:.98rem;border:1px solid transparent;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease);}
.btn>span{position:relative;z-index:1;}
.btn::before{content:"";position:absolute;inset:0;z-index:0;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);}
.btn:hover::before{transform:scaleY(1);}
/* プライマリ＝青地×白文字（視認性重視） */
.btn--primary{background:var(--mint);color:#fff;box-shadow:0 10px 36px color-mix(in srgb,var(--mint) 36%,transparent);}
.btn--primary::before{background:var(--ink);}
.btn--primary:hover{color:var(--paper);}
.btn--ghost{color:var(--ink);border-color:var(--line);}
.btn--ghost::before{background:var(--ink);}
.btn--ghost:hover{color:var(--paper);border-color:var(--ink);}
.btn--block{width:100%;}

/* ---- セクション共通 ---- */
.section{padding:clamp(90px,14vw,200px) var(--gut);position:relative;}
.section__head{max-width:var(--maxw);margin:0 auto clamp(48px,7vw,96px);}
.section__eyebrow{font-family:var(--en);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:18px;}
.section__title{font-size:clamp(1.9rem,5vw,3.4rem);font-weight:700;line-height:1.25;letter-spacing:.01em;}

/* ---- リビール ---- */
[data-reveal]{will-change:transform,opacity;}
[data-reveal="fade"]{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}
[data-reveal="fade"].is-in{opacity:1;transform:none;filter:none;}
[data-reveal="rise"]{opacity:0;transform:translateY(56px);filter:blur(9px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);}
[data-reveal="rise"].is-in{opacity:1;transform:none;filter:none;}
.reveal-line{display:block;overflow:hidden;}
.reveal-line__inner{display:block;transform:translateY(110%);transition:transform 1s var(--ease);}
.is-in .reveal-line__inner,.reveal-line.is-in .reveal-line__inner{transform:none;}
/* 文節単位で折返し（禁則対応）。長すぎる文節だけは中で折る */
.reveal-phrase{display:inline-block;max-width:100%;}
/* em等の装飾要素：文字分割せずopacityで出現（background-clip:textを壊さない） */
.reveal-em{opacity:0;transition:opacity .9s var(--ease);transition-delay:calc(var(--wi,0)*26ms);}
[data-reveal].is-in .reveal-em{opacity:1;}
.reveal-word{display:inline-block;overflow:hidden;vertical-align:top;}
.reveal-word__inner{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:calc(var(--wi,0)*30ms);}
.is-in .reveal-word__inner{transform:none;}

/* ---- マーキー（画像タイル付きチップが3Dで起き上がって出現→流れる） ---- */
.marquee{overflow:hidden;padding:30px 0 64px;background:var(--paper);perspective:1100px;}
.marquee__track{display:flex;align-items:center;gap:16px;width:max-content;white-space:nowrap;will-change:transform;transform-style:preserve-3d;}
.flow-chip{display:inline-flex;align-items:center;gap:11px;padding:11px 20px 11px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:1rem;font-weight:500;color:var(--ink);
  transform-origin:center top;}
/* 出現前は伏せておき、ビューに入ったら起き上がる（順次） */
.marquee:not(.in) .flow-chip{opacity:0;transform:rotateX(-92deg) translateY(10px);}
.marquee.in .flow-chip{opacity:1;transform:rotateX(0) translateY(0);
  transition:transform .8s var(--ease),opacity .55s var(--ease);transition-delay:calc(var(--ci,0)*45ms);}
.flow-chip b{width:24px;height:24px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--c1,var(--mint)),var(--c2,var(--blue)));}

/* ---- 白⇄黒パネル（セクションが重なるギミック） ---- */
.section--dark{--paper:#0b0f17;--ink:#f3f6fa;background:var(--paper);color:var(--ink);}
.panel{position:relative;z-index:1;border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;
  margin-top:-42px;box-shadow:0 -24px 60px color-mix(in srgb,#000 16%,transparent);}
/* 重なりの継ぎ目に細い発光ライン */
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--mint) 70%,transparent),transparent);
  border-top-left-radius:inherit;border-top-right-radius:inherit;}

/* ---- 背景ゾーン切替のワイプ（サイト全体がフリップする演出） ---- */
.sweep{position:fixed;inset:0;z-index:120;transform:translateY(100%);pointer-events:none;will-change:transform;
  box-shadow:0 -10px 50px color-mix(in srgb,var(--mint) 30%,transparent);}
.sweep::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--mint);opacity:.9;}

/* ---- 配色スイッチャー ---- */
.sw{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:min(94vw,620px);padding:12px 16px;border-radius:22px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);}
.sw__t{position:absolute;top:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--en);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.chip{display:flex;flex-direction:column;align-items:center;gap:5px;border:none;background:none;padding:2px;}
.chip b{width:34px;height:34px;border-radius:10px;border:1px solid transparent;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.16);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);}
.chip b u{width:15px;height:15px;border-radius:50%;display:block;}
.chip.on b{border-color:var(--ink)!important;transform:scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,.22);}
.chip small{font-family:var(--en);font-size:.58rem;letter-spacing:.02em;color:var(--ink-soft);}

/* ---- 背景の流れる光の線（全体のアンビエント・モーション） ---- */
.bg-flow{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.45;transition:opacity .45s var(--ease);}
/* 中央Nを回すと灯る背景グロー（opacityはJSが制御・上限あり） */
.spin-glow{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(58% 50% at 50% 42%, color-mix(in srgb,var(--mint) 26%, transparent), color-mix(in srgb,var(--blue) 12%, transparent) 45%, transparent 72%);}
/* パネル・フォーカス時：DOM背景を減光して手前パネルを主役化（3D側は暗幕で背後を沈める） */
body.is-focusing .bg-flow{opacity:.08;}

/* ---- トップへ戻るボタン（下スクロールで出現） ---- */
.to-top{position:fixed;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:60;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);cursor:pointer;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;box-shadow:0 14px 34px rgba(0,0,0,.35);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .25s var(--ease),color .25s var(--ease);}
.to-top.is-show{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--mint);color:var(--paper);transform:translateY(-4px);}
.to-top:active{transform:translateY(-1px) scale(.96);}
.to-top svg{width:22px;height:22px;}
@media(max-width:720px){.to-top{width:46px;height:46px;}}

/* ---- ヒーロー上部の横帯タグライン（v2：SYSTEMS — FOR — HUMAN — WORK） ---- */
.hero-topline{position:absolute;top:clamp(78px,11vh,114px);left:0;right:0;z-index:2;text-align:center;pointer-events:none;
  font-family:var(--en);font-weight:400;font-size:clamp(.66rem,1.2vw,.86rem);letter-spacing:.5em;text-transform:lowercase;
  color:color-mix(in srgb,var(--ink) 32%,transparent);padding:0 var(--gut);}
.hero-topline b{font-weight:700;text-transform:uppercase;color:#fff;}
@media(max-width:560px){.hero-topline{letter-spacing:.3em;}}

/* ---- パネルクリック時の画面遷移ワイプ演出（ただ飛ぶだけにしない） ---- */
.warp{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;transform:translateX(-100%);
  background:linear-gradient(115deg,transparent 0%,color-mix(in srgb,var(--mint) 65%,transparent) 44%,color-mix(in srgb,var(--blue) 80%,transparent) 56%,transparent 100%);}
body.is-warp .warp{animation:warpSweep .72s var(--ease) forwards;}
@keyframes warpSweep{0%{opacity:0;transform:translateX(-100%);}30%{opacity:.92;}62%{opacity:.92;}100%{opacity:0;transform:translateX(100%);}}

/* ---- キーボード操作のフォーカス可視化（A11y：カスタムカーソルでも必ず見える） ---- */
a,button,[data-cursor],[data-magnetic],.svc[data-overlay],.chip{cursor:pointer;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px;}
.btn:focus-visible,.header__cta:focus-visible,.chip:focus-visible{outline-offset:4px;}
.svc[data-overlay]:focus-visible{outline-offset:-6px;}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;}
:focus:not(:focus-visible){outline:none;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  [data-reveal],.reveal-line__inner,.reveal-word__inner{opacity:1!important;transform:none!important;filter:none!important;}
  .flow-chip{opacity:1!important;transform:none!important;}
  .header{transform:none!important;opacity:1!important;pointer-events:auto!important;}
  .bg-flow{display:none!important;}
  .warp{display:none!important;}
  .cursor{display:none;}body{cursor:auto;}
}

/* ---- 追従CTAバー（サービスページ・スマホ専用） ---- */
.cta-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;
  display:none;gap:10px;padding:10px;border-radius:20px;
  background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(16px);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.45);
  transform:translateY(130%);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease);}
.cta-bar.is-show{transform:none;opacity:1;}
.cta-bar__main{flex:1.2;text-align:center;padding:14px 10px;border-radius:14px;background:var(--mint);
  color:#fff;font-weight:700;font-size:.95rem;box-shadow:0 8px 24px color-mix(in srgb,var(--mint) 35%,transparent);}
.cta-bar__quote{flex:1;text-align:center;padding:14px 10px;border-radius:14px;border:1px solid var(--line);
  color:var(--ink);font-weight:600;font-size:.9rem;background:color-mix(in srgb,var(--ink) 5%,transparent);}
body.is-menu-open .cta-bar{opacity:0;pointer-events:none;}
@media(max-width:860px){.cta-bar{display:flex;}}