@charset "utf-8";
/* 生成AI導入・活用コンサルティングサービス  /ai-implementation-consulting-services
   swell_child/assets/css/consult-fx.css   2026-09-26
   ------------------------------------------------------------------
   藤井さんの指示（2026-09-26）
     「もっとFV以下のところですが、AIっぽい面白いアニメーションをたくさん入れてください。
       普段はみないようなめちゃくちゃ面白いやつで」
   ------------------------------------------------------------------
   ★中身は全部 html.aicx の下に書く。aicx は assets/js/consult-fx.js が付ける印。
     JSが落ちれば1つも効かない（中身が隠れたままになる事故が起きない）
   ★consult.css を上書きするので、必ず consult.css より後に読む
   ★並びは1pxも動かさない。動かすのは transform / opacity / filter / clip-path / background だけ
   ★動きを減らす設定の人には consult-fx.js が印を付けないので、何も起きない
   ------------------------------------------------------------------
   入れた動き（FV以下）
     05 リード文の太字に、左から線が引かれる
     06 数字の札：数え終わりに輪の波紋が広がる
     07 数字に触ると 0と1 に化けて、元の数字へ戻る
     09 カードはマウスの位置で奥行きを持って傾き、光と点の格子が指についてくる
     10 業種のタグ37個が、マウスに引き寄せられて寄る
     13 導入の流れ：線の上をデータの粒が走り、着いた丸から波紋が出る
     15 サービスの番号が、奥から回り込んで出る
     16 申し込みボタンの枠を光が1周する（触ったときだけ）
     18 実績の帯：触った項目の数字が光る
     19 プロフィールの写真を、AIが1回スキャンする
     20 スクロールしている間は、触ったときの動きを止める
   ------------------------------------------------------------
   ★2026-09-26 に藤井さんの指示で外したもの（番号は欠番のまま残す）
     03 章に入ると走査の光が上から下へ通る（画面全体に出る動き）
     04 章の中でマウスを動かすと背景の点の格子が浮かぶ（画面全体に出る動き）
     08 カードがぼやけた状態から鮮明になり光の帯が走る（スクロールで出てくる動き）
     11 お客様の声の考えている点と、文字が遅れて現れる動き（スクロールで出てくる動き）
     17 読み進みの線の先に光の玉が付いていく（画面全体に出る動き）
   ★2026-09-26 に「スクロールで挙動がおかしくなる」と言われて減らしたもの
     ・「前→後」の矢印がずっと流れる動き（32本が画面の外でも動き続けていた）
     ・申し込みボタンの枠の光を、ずっと回す→触ったときだけに
     ・業種のタグの will-change（37個ぶんの描画の層）
     ・サービスの番号の回り込みを 82度 → 38度 へ
     ・会社の数字の棒が光る動き（12本ぶんの影の描き直し）
     ・章見出しの文字の確定は、スクロールが止まってから始める
   ★2026-09-26 に「見出しのテキストのアニメーションは削除で」と言われて外したもの
     01 章見出しの文字が、でたらめな文字から正しい文字へ確定する
     02 章の英字ラベルが1文字ずつ打ち込まれる
     14 使った道具の行に触ると文字が組み直される（同じ仕掛けなので一緒に外した）
     →見出しまわりの文字は一切動かさない。見出しの下の線が引かれる動きは consult.css 側に残っている
     →「画面全体に出てくるアニメーションや、ブロックがスクロール時に出てくるアニメーションは削除で」
     ※consult.css 側の「下から浮き上がる」出現は藤井さんの選択で残してある
*/

/* ------------------------------------------------------------
   05 リード文の太字に、左から線が引かれる
   ------------------------------------------------------------ */
html.aicx .aic-sub b,
html.aicx .aic-svc__d b,
html.aicx .aic-prof__body p b{position:relative;}
html.aicx .aic-sub b::after,
html.aicx .aic-svc__d b::after,
html.aicx .aic-prof__body p b::after{content:"";position:absolute;left:-.08em;right:-.08em;bottom:-.1em;height:.42em;
  z-index:-1;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(26,194,241,.34),rgba(124,92,255,.24));
  transform:scaleX(0);transform-origin:left center;}
html.aicx .aic-sec--dark .aic-sub b::after{background:linear-gradient(90deg,rgba(26,194,241,.42),rgba(124,92,255,.3));}
html.aicx .aicx-on .aic-sub b::after,
html.aicx .aicx-on .aic-svc__d b::after,
html.aicx .aicx-on .aic-prof__body p b::after{animation:aicx-mark .7s cubic-bezier(.2,.8,.25,1) .55s both;}
@keyframes aicx-mark{to{transform:scaleX(1);}}

/* ============================================================
   06・07 数字の札
   ============================================================ */
/* 数え終わりに輪の波紋が広がる */
/* ★数字の上に出すと数え上がりが読めなくなる。札の右上から広げる（2026-09-26 に撮って直した） */
html.aicx .aic-stats li::after{content:"";position:absolute;right:26px;top:36px;width:14px;height:14px;
  border-radius:50%;border:2px solid var(--aic-cy);opacity:0;pointer-events:none;}
html.aicx .aic-stats.aicx-on li::after{animation:aicx-ripple 1.25s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(1.15s + var(--i,0) * 90ms);}
@keyframes aicx-ripple{
  0%{opacity:0;transform:scale(.25);}
  12%{opacity:.85;}
  100%{opacity:0;transform:scale(5);}
}
/* 0と1 に化けているあいだは水色（consult-fx.js が印を付ける） */
html.aicx .aic-n.is-bin{color:var(--aic-cy2);}
html.aicx .aic-sec--dark .aic-n.is-bin{color:#8FE3FB;}

/* ============================================================
   09 カードがマウスの位置で傾き、光と点の格子が指についてくる
   ============================================================ */
html.aicx .aicx-tilt{transform-style:preserve-3d;}
@media (hover:hover){
  html.aicx .aic-ag li.aicx-tilt:hover,
  html.aicx .aic-vo li.aicx-tilt:hover,
  html.aicx .aic-str li.aicx-tilt:hover,
  html.aicx .aic-svc li.aicx-tilt:hover,
  html.aicx .aic-stats li.aicx-tilt:hover,
  html.aicx .aic-case li.aicx-tilt:hover{
    transform:perspective(820px) translateY(-4px)
      rotateX(calc(var(--aicx-ty,0) * -3.6deg)) rotateY(calc(var(--aicx-tx,0) * 5deg)) scale(1.014);
    box-shadow:0 18px 40px rgba(13,27,42,.14);}
  html.aicx .aic-card.aicx-tilt:hover{
    transform:perspective(820px) translateY(-5px)
      rotateX(calc(var(--aicx-ty,0) * -3.6deg)) rotateY(calc(var(--aicx-tx,0) * 5deg)) scale(1.014);}
  html.aicx .aic-sec--dark .aic-case li.aicx-tilt:hover{box-shadow:0 18px 40px rgba(0,0,0,.34);}
}
/* 指についてくる光と点の格子（consult-fx.js が入れる span） */
html.aicx .aicx-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .3s ease;overflow:hidden;}
html.aicx .aicx-sheen::before{content:"";position:absolute;inset:0;
  background:radial-gradient(220px circle at var(--aicx-mx,50%) var(--aicx-my,50%),rgba(26,194,241,.22),rgba(124,92,255,.08) 38%,transparent 66%);}
html.aicx .aicx-sheen::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(26,194,241,.85) 1px,transparent 1.5px);background-size:14px 14px;
  -webkit-mask:radial-gradient(120px circle at var(--aicx-mx,50%) var(--aicx-my,50%),#000 2%,transparent 70%);
  mask:radial-gradient(120px circle at var(--aicx-mx,50%) var(--aicx-my,50%),#000 2%,transparent 70%);}
html.aicx .aic-sec--dark .aicx-sheen::before{background:radial-gradient(220px circle at var(--aicx-mx,50%) var(--aicx-my,50%),rgba(143,227,251,.2),rgba(124,92,255,.1) 38%,transparent 66%);}
html.aicx .aic-sec--dark .aicx-sheen::after{background-image:radial-gradient(rgba(143,227,251,.9) 1px,transparent 1.5px);}
@media (hover:hover){
  html.aicx .aicx-tilt:hover > .aicx-sheen{opacity:1;}
}

/* ============================================================
   10 業種のタグがマウスに引き寄せられて寄る
   ------------------------------------------------------------
   寄せるのは consult-fx.js（transform を直に書く）。近いタグは枠と字の色が変わる
   ============================================================ */
/* ★will-change は付けない。37個ぶんの描画の層を先に確保してスクロールが重くなる */
html.aicx .aic-ind li{transition:border-color .16s ease,color .16s ease,box-shadow .2s ease,background-color .16s ease;}
html.aicx .aic-ind li.is-near{border-color:var(--aic-cy);color:var(--aic-cy2);
  box-shadow:0 6px 18px rgba(26,194,241,.22);}
html.aicx .aic-ind li.is-hot{background:linear-gradient(135deg,rgba(26,194,241,.14),rgba(124,92,255,.1));
  border-color:var(--aic-pu);color:var(--aic-navy);}

/* ============================================================
   12 会社の数字：棒が伸びるあいだ、棒そのものが光る
   ============================================================ */
/* ★棒が光る動き（drop-shadow）は外した（2026-09-26）。
      12本が同時に走ると影を描き直し続けることになり、スクロールが重くなる。
      棒が0から伸びる動きは consult.css 側に残っている */
/* ★「前→後」の矢印がずっと流れる指定は外した（2026-09-26）。
      32本が画面の外でも動き続けていて、スクロールが重くなる元になっていた */

/* ============================================================
   13 導入の流れ：線の上をデータの粒が走り、着いた丸から波紋が出る
   ============================================================ */
/* ★線そのもの（.aic-flow__line）は高さ2pxで overflow:hidden なので、粒は .aic-flow の子に置く */
html.aicx .aicx-pkt{position:absolute;left:12%;right:12%;top:11px;height:2px;z-index:2;pointer-events:none;}
html.aicx .aicx-pkt i{position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(26,194,241,.5),0 0 14px 4px rgba(26,194,241,.75);opacity:0;}
html.aicx .aic-flow.aic-in .aicx-pkt i{animation:aicx-pkt 1.55s cubic-bezier(.3,.68,.3,1) .15s both;}
@keyframes aicx-pkt{
  0%{opacity:0;transform:translateX(0);}
  8%{opacity:1;}
  86%{opacity:1;transform:translateX(calc(var(--aicx-run,600px)));}
  100%{opacity:0;transform:translateX(calc(var(--aicx-run,600px)));}
}
/* 丸に着いた瞬間の波紋 */
html.aicx .aic-flow__dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--aic-cy);opacity:0;pointer-events:none;}
html.aicx .aic-flow.aic-in .aic-flow__dot::after{animation:aicx-ripple-s 1.1s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(.25s + var(--i,0) * 340ms);}
/* ★丸は22pxあるので、札と同じ8倍だと200pxを超えて隣の段まで届く（2026-09-26 に撮って直した） */
@keyframes aicx-ripple-s{
  0%{opacity:0;transform:scale(.85);}
  12%{opacity:.9;}
  100%{opacity:0;transform:scale(3.4);}
}

/* 使った道具の行は、触ると色だけ濃くする（文字の組み直しは2026-09-26 に外した） */
html.aicx .aic-ag li:hover .aic-ag__tech{color:var(--aic-navy);}

/* ============================================================
   15 サービスの番号が、奥から回り込んで出る
   ============================================================ */
html.aicx .aic-svc.aicx-on .aic-svc__num{animation:aicx-flip 1.05s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:calc(var(--i,0) * 90ms + 120ms);transform-origin:right center;}
@keyframes aicx-flip{
  0%{opacity:0;transform:perspective(600px) rotateY(-38deg);}
  100%{opacity:1;transform:perspective(600px) rotateY(0);}
}
/* 触ると番号が水色に灯る */
html.aicx .aic-svc li{transition:transform .2s ease,box-shadow .2s ease;}
html.aicx .aic-svc li:hover .aic-svc__num{color:rgba(26,194,241,.22);transition:color .3s ease;}

/* ============================================================
   16 申し込みボタンの枠を光が1周する
   ------------------------------------------------------------
   枠の内側1pxだけを見せるので、ボタンの overflow:hidden のままで出せる
   ============================================================ */
html.aicx .aic-btn--lg::before{content:"";position:absolute;inset:0;border-radius:4px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--aic-cy) 78%,#fff 86%,var(--aic-pu) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;}
/* ★ずっと回すのはやめて、触ったときだけ回す（2026-09-26） */
html.aicx .aic-cta.aicx-on .aic-btn--lg::before{opacity:.75;}
@media (hover:hover){
  html.aicx .aic-btn--lg:hover::before{opacity:1;animation:aicx-spin 1.3s linear infinite;}
}
@keyframes aicx-spin{to{transform:rotate(360deg);}}

/* ============================================================
   18 実績の帯：触った項目の数字が光る
   ============================================================ */
html.aicx .aic-mq__i{transition:color .2s ease;}
html.aicx .aic-mq__i b{transition:color .2s ease,text-shadow .2s ease;}
@media (hover:hover){
  html.aicx .aic-mq__i:hover{color:#DCEFF8;}
  html.aicx .aic-mq__i:hover b{color:#fff;text-shadow:0 0 14px rgba(26,194,241,.95);}
}

/* ============================================================
   19 プロフィールの写真を、AIが1回スキャンする
   ------------------------------------------------------------
   四隅のカギ括弧が出る → 光の線が上から下へ通る → 点と線がつながる
   写真と同じ縦横比（864:886）の器を重ねるので、並びは1pxも動かない
   ============================================================ */
html.aicx .aic-prof__ph{position:relative;}
html.aicx .aicx-net{position:absolute;left:0;top:0;width:100%;aspect-ratio:864/886;
  z-index:2;pointer-events:none;opacity:0;border-radius:6px;overflow:hidden;}
html.aicx .aicx-net svg{display:block;width:100%;height:100%;}
/* 四隅のカギ括弧 */
html.aicx .aicx-net__c{position:absolute;width:18px;height:18px;border:2px solid var(--aic-cy);}
html.aicx .aicx-net__c:nth-child(1){left:8px;top:8px;border-right:0;border-bottom:0;}
html.aicx .aicx-net__c:nth-child(2){right:8px;top:8px;border-left:0;border-bottom:0;}
html.aicx .aicx-net__c:nth-child(3){left:8px;bottom:8px;border-right:0;border-top:0;}
html.aicx .aicx-net__c:nth-child(4){right:8px;bottom:8px;border-left:0;border-top:0;}
/* 上から下へ通る光の線 */
html.aicx .aicx-net__s{position:absolute;left:0;right:0;top:0;height:64px;
  background:linear-gradient(180deg,transparent,rgba(26,194,241,.28) 70%,rgba(143,227,251,.95) 96%,transparent);
  transform:translateY(-70px);}
/* 点と、点をつなぐ線 */
html.aicx .aicx-net__e{fill:none;stroke:rgba(143,227,251,.85);stroke-width:.7;
  stroke-dasharray:120;stroke-dashoffset:120;}
html.aicx .aicx-net__n{fill:#fff;stroke:var(--aic-cy);stroke-width:1.2;opacity:0;}

html.aicx .aic-prof.aicx-on .aicx-net{animation:aicx-net-io 4.4s ease both .3s;}
html.aicx .aic-prof.aicx-on .aicx-net__s{animation:aicx-facescan 1.7s cubic-bezier(.35,.6,.3,1) both .45s;}
html.aicx .aic-prof.aicx-on .aicx-net__e{animation:aicx-draw-line 1.1s ease both 1.25s;}
html.aicx .aic-prof.aicx-on .aicx-net__n{animation:aicx-node .5s ease both;
  animation-delay:calc(1.05s + var(--n,0) * 90ms);}
@keyframes aicx-net-io{0%{opacity:0;}8%{opacity:1;}72%{opacity:1;}100%{opacity:.22;}}
@keyframes aicx-facescan{0%{transform:translateY(-70px);}100%{transform:translateY(calc(100% + 70px));}}
@keyframes aicx-draw-line{to{stroke-dashoffset:0;}}
@keyframes aicx-node{0%{opacity:0;transform:scale(.2);}60%{opacity:1;transform:scale(1.5);}100%{opacity:1;transform:scale(1);}}
@media (hover:hover){
  html.aicx .aic-prof__ph:hover .aicx-net{opacity:1;transition:opacity .3s ease;}
}

/* ============================================================
   20 スクロールしている間は、触ったときの動きを止める（2026-09-26 追加）
   ------------------------------------------------------------
   スクロールするとマウスの下を要素が通り過ぎて :hover になり、
   カードが傾いたり光ったりしていた。止まってから 0.18秒で元に戻る
   ============================================================ */
@media (hover:hover){
  html.aicx.aicx-scroll .aicx-tilt:hover{transform:none!important;box-shadow:none!important;}
  html.aicx.aicx-scroll .aicx-tilt:hover > .aicx-sheen{opacity:0!important;}
  html.aicx.aicx-scroll .aic-ind li{transition:none;}
  html.aicx.aicx-scroll .aic-btn--lg:hover::before{animation:none;}
}

/* ============================================================
   狭いとき
   ============================================================ */
@media (max-width:820px){
  html.aicx .aic-stats li::after{right:12px;top:18px;width:10px;height:10px;}
  /* スマホの流れは縦。粒も縦に走らせる */
  html.aicx .aicx-pkt{left:10px;right:auto;top:8px;bottom:14px;width:2px;height:auto;}
  html.aicx .aicx-pkt i{left:50%;top:-4px;margin:0 0 0 -4px;}
  html.aicx .aic-flow.aic-in .aicx-pkt i{animation-name:aicx-pkt-y;}
  @keyframes aicx-pkt-y{
    0%{opacity:0;transform:translateY(0);}
    8%{opacity:1;}
    86%{opacity:1;transform:translateY(var(--aicx-run,600px));}
    100%{opacity:0;transform:translateY(var(--aicx-run,600px));}
  }
}

/* ============================================================
   動きを減らす設定の人には何もしない（印そのものを付けないが、念のため）
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.aicx .aicx-sheen,html.aicx .aicx-pkt,html.aicx .aicx-net{display:none!important;}
}