/* ==========================================================
   biz-motion.css — 非住宅サイト アニメーション改善（P129=A・P130=C2／2026-10-05 ディレクター決定）
   計画書: design/biz-motion-plan_261005-01.md
   方針「線が引かれ、写真が据わる」＝住宅と同じ速さ・緩急（1.3s expo-out）。行き過ぎ・ぼかしは使わない。

   ・すべて html.mx-on 配下でのみ効く。mx-on は <head> の1行スクリプト（functions.php idworks_biz_mx_switch）が付ける。
     付かない条件＝URL に ?mx=0／?motion=0、または OS の「視差効果を減らす」（?motion=1 で強制再生）。
   ・JS＝assets/js/biz-motion.js（要素に data-mx を付けたものだけ隠す＝JS が動かなければ何も隠れない）。
     例外は FV（html.mx-fv-pre）。最初の描画から隠す必要があるため CSS だけで隠し、
     JS が動かなくても head の保険タイマー（6秒）で必ず表示される。
   ========================================================== */
:root{
  --mx-ease-out:cubic-bezier(.16,1,.3,1);       /* expo.out 相当＝文字・画像の着地 */
  --mx-ease-fade:cubic-bezier(.215,.61,.355,1); /* power3.out 相当＝フェード */
  --mx-ease-io:cubic-bezier(.87,0,.13,1);       /* expo.inOut 相当＝罫線 */
  --mx-dur:1.3s;
  --mx-dur-fade:1.6s;
}

/* ---------- Lenis（慣性スクロール・PCのみ） ---------- */
html.lenis,html.lenis body{height:auto;}
html.lenis{overflow-anchor:none;}
html.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth iframe{pointer-events:none;}
.lenis [data-lenis-prevent]{overscroll-behavior:contain;}

/* ---------- 1) 文字：行ごとにマスクの中をせり上がる ---------- */
html.mx-on .mx-l{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;}
html.mx-on .mx-li{
  display:block;translate:0 108%;
  transition:translate var(--mx-dur) var(--mx-ease-out);
  transition-delay:calc(var(--i,0) * .09s + var(--d,0s));
}
html.mx-on .is-mx-in > .mx-l > .mx-li{translate:0 0;}

/* 見出しブロック＝少し上がりながらフェード */
html.mx-on .mx-up[data-mx]{transition:opacity 1.1s var(--mx-ease-fade),translate var(--mx-dur) var(--mx-ease-out);transition-delay:var(--d,0s);}
html.mx-on .mx-up[data-mx]:not(.is-mx-in){opacity:0;translate:0 26px;}

/* 本文・小要素＝フェード主体（ごく僅かに上がる） */
html.mx-on .mx-fade[data-mx]{transition:opacity var(--mx-dur-fade) var(--mx-ease-fade),translate var(--mx-dur-fade) var(--mx-ease-out);transition-delay:var(--d,0s);}
html.mx-on .mx-fade[data-mx]:not(.is-mx-in){opacity:0;translate:0 12px;}
/* 20261020m（ディレクター「施工事例一覧、スクロールしたときの文字が出てくるのが遅い」）：カード内の文字だけ 1.6s→0.9s。本文などほかのフェードは従来どおり */
html.mx-on :is(.work-card,.event-card) .mx-fade[data-mx]{transition-duration:.9s,.9s;}
/* 20261020m：トップ以外の施工事例カード＝カード全体（「さらに見る」の bizWorkCardIn と同じ 0.5s・10px・cubic-bezier(.22,.61,.36,1)） */
html.mx-on .mx-card[data-mx]{transition:opacity .5s cubic-bezier(.22,.61,.36,1),translate .5s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s);}
html.mx-on .mx-card[data-mx]:not(.is-mx-in){opacity:0;translate:0 10px;}

/* 英字ラベル＝フェードしながら字間が締まる */
html.mx-on .mx-ls[data-mx]{transition:opacity 1.2s var(--mx-ease-fade),letter-spacing 2s var(--mx-ease-out);transition-delay:var(--d,0s);}
html.mx-on .mx-ls[data-mx]:not(.is-mx-in){opacity:0;letter-spacing:.42em;}

/* ---------- 2) 写真：フェードしながら中の写真が 1.12→1 へ収まる（scale は独立プロパティ＝既存の transform と干渉しない） ---------- */
html.mx-on .mx-img[data-mx]{overflow:hidden;transition:opacity 1.2s var(--mx-ease-fade);transition-delay:var(--d,0s);}
html.mx-on .mx-img[data-mx]:not(.is-mx-in){opacity:0;}
html.mx-on .mx-img[data-mx] img{transition:scale 1.9s var(--mx-ease-out);transition-delay:var(--d,0s);}
html.mx-on .mx-img[data-mx]:not(.is-mx-in) img{scale:1.12;}
/* 右から寄りながら据わる（Not expensive の裁ち落とし写真＝画面の外から来るので自然） */
html.mx-on .mx-slide[data-mx]{transition:opacity 1.2s var(--mx-ease-fade),translate 1.6s var(--mx-ease-out);transition-delay:var(--d,0s);}
html.mx-on .mx-slide[data-mx]:not(.is-mx-in){opacity:0;translate:6% 0;}
@media(max-width:767px){ html.mx-on .mx-slide[data-mx]:not(.is-mx-in){translate:24px 0;} }

/* ---------- 3) 罫線・枠の描画（border は JS が透明にし、同じ色の線を background で描く） ---------- */
html.mx-on .mx-rule{
  background-image:var(--mx-line-img);background-repeat:no-repeat;background-origin:border-box;
  background-position:var(--mx-line-pos);background-size:var(--mx-line-from);
  transition:background-size 1.4s var(--mx-ease-io);transition-delay:calc(var(--mx-rd,0s) + .1s);
}
html.mx-on .mx-rule.is-mx-in{background-size:var(--mx-line-to);}
html.mx-on .mx-rule--cell{transition:background-size .6s cubic-bezier(.45,.05,.55,.95);transition-delay:calc(var(--mx-rd,0s) + .1s);}
/* ボタン：枠が描かれ終わったら JS が線を外して本来の border に戻す（ホバーの枠色変化を残すため） */
html.mx-on .btn.mx-rule{transition:background-size 1.1s var(--mx-ease-io),color .38s ease,border-color .38s ease;transition-delay:calc(var(--mx-rd,0s) + .15s),0s,0s;}

/* ---------- 4) 実績：数字の下に短い線が引かれる→カウントアップ／項目名の字間が締まる ---------- */
html.mx-on #track .stat__num{position:relative;}
html.mx-on #track .stat__num::after{
  content:"";position:absolute;left:50%;bottom:-10px;width:40px;height:1px;margin-left:-20px;
  background:var(--c-line-dark);transform:scaleX(0);transform-origin:left center;
  transition:transform .9s var(--mx-ease-io) .1s;
}
html.mx-on #track .stat.is-mx-in .stat__num::after{transform:scaleX(1);}

/* ---------- 5) CONTACT：番号円の輪郭が線で描かれる→番号が出る ---------- */
html.mx-on .cfeature__no.mx-ring{position:relative;border-color:transparent!important;}
html.mx-on .mx-ring__svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;overflow:visible;pointer-events:none;}
html.mx-on .mx-ring__svg circle{fill:none;stroke:var(--mx-ring-c,currentColor);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--mx-ease-io);transition-delay:var(--d,0s);}
html.mx-on .mx-ring.is-mx-in .mx-ring__svg circle{stroke-dashoffset:0;}
html.mx-on .mx-ring__n{transition:opacity .9s var(--mx-ease-fade);transition-delay:calc(var(--d,0s) + .55s);}
html.mx-on .mx-ring:not(.is-mx-in) .mx-ring__n{opacity:0;}

/* ---------- 6) アイコン（.bz-ic＝線のアイコン）が線で描かれる ---------- */
html.mx-on .mx-draw :is(path,rect,line,polyline,circle){stroke-dasharray:1;transition:stroke-dashoffset .9s var(--mx-ease-out);transition-delay:calc(var(--k,0) * .12s + var(--d,.3s));}
html.mx-on .mx-draw:not(.is-mx-in) :is(path,rect,line,polyline,circle){stroke-dashoffset:1;}
html.mx-on .mx-draw.is-mx-in :is(path,rect,line,polyline,circle){stroke-dashoffset:0;}

/* ---------- 7) 下層の画像（site-motion の移植）：枠が切り抜く写真はわずかに逆へ動く／SPは左右交互に寄る ---------- */
html.mx-on .sm-img{transition:opacity 1.2s var(--mx-ease-fade),translate 1.4s var(--mx-ease-out);}
html.mx-on .sm-img:not(.is-mx-in){opacity:0;}
html.mx-on [data-sm-img="clip"] > img{scale:1.08;translate:0 var(--sm-py,0px);transition:scale 1.9s var(--mx-ease-out);}
html.mx-on [data-sm-img="clip"]:not(.is-mx-in) > img{scale:1.18;}
@media(max-width:767px){ html.mx-on .sm-img:not(.is-mx-in){translate:calc(var(--sm-side,1) * 18px) 0;} }

/* ==========================================================
   8) FV の見せ場（P130＝C2）：9枠の枠線が図面のように引かれ、写真がはまる
   html.mx-fv-pre（head・トップのみ）＝最初の描画から写真とコピーを伏せる
   html.mx-fv-go  （JS・保険は6秒）＝線→写真→コピーの順に動き出す
   html.mx-fv-done（JS・保険は6秒）＝演出終了。セル本来の背景へ戻し、ランダム切替を開始
   ========================================================== */
html.mx-fv-pre:not(.mx-fv-done) #fv2 .fv__cell--img{background-image:none!important;background-color:transparent!important;}
/* 線（4辺）。上下は左→右、左右は上→下 */
html.mx-on .mx-fvfr{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  --c:rgba(255,255,255,.62);
  background-image:linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-repeat:no-repeat;
  background-position:left top,left bottom,left top,right top;
  background-size:0% 1px,0% 1px,1px 0%,1px 0%;
  transition:background-size .8s var(--mx-ease-io),opacity .9s var(--mx-ease-fade);
  transition-delay:var(--d1,0s),var(--d3,2s);
}
html.mx-fv-go .mx-fvfr{background-size:100% 1px,100% 1px,1px 100%,1px 100%;opacity:0;}
/* 写真＝線の中にはまる（フェード＋1.14→1） */
html.mx-on .mx-fvph{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-size:cover;background-repeat:no-repeat;
  opacity:0;scale:1.14;
  transition:opacity 1.1s var(--mx-ease-fade),scale 1.7s var(--mx-ease-out);
  transition-delay:var(--d2,.7s);
}
html.mx-fv-go .mx-fvph{opacity:1;scale:1;}
/* コピー：見出しは行ごとにせり上がり、サブ→タグ（0.06s刻み）→下部の帯の順 */
html.mx-fv-pre:not(.mx-fv-go) #fv2 :is(.fv__title,.fv__sub,.fv__tags .tag,.fv__band){opacity:0;}
html.mx-fv-pre #fv2 :is(.fv__sub,.fv__tags .tag,.fv__band){transition:opacity 1.2s var(--mx-ease-fade),translate 1.3s var(--mx-ease-out);transition-delay:var(--d,0s);}
html.mx-fv-pre:not(.mx-fv-go) #fv2 :is(.fv__sub,.fv__tags .tag){translate:0 10px;}
html.mx-fv-go #fv2 .fv__title.mx-lines > .mx-l > .mx-li{translate:0 0;}

/* ==========================================================
   9) OUR VALUE：見出し→本文をスクロール追従で順に出すぶん、帯を長くする（2026-10-10 ディレクター提案）
   旧 145vh（固定 45vh 分）→ 230vh（固定 130vh 分）。SP 130vh → 190vh。
   背景の振れ幅も帯の長さに合わせて広げ、固定中に背景が動く量を増やす（PC 40→56vh／SP 18→24vh）。
   ※2026-07-17 に「滞留が長くストレス」で 200vh→145vh に縮めた経緯あり。今回は固定中に文字が順に出るので
     止まって待つ時間にはならない想定。長さは --vb-track の1か所で調整できる。
   ========================================================== */
html.mx-on .value-sec{--vb-track:230vh;--vb-range:56vh;}
@media(max-width:767px){ html.mx-on .value-sec{--vb-track:190vh;--vb-range:24vh;} }

/* [20261016za] 画像リンクのホバー拡大がカクッと跳ぶ不具合の修正（ディレクター「施工事例にカーソルをかざしたときの動きが自然じゃない」）
   原因＝上のスクロール演出（[data-sm-img="clip"] > img／.mx-img img）が img の transition を「scale だけ」で上書きし、
   ホバー拡大（transform：biz-works-img.css／link-anim.css）の transition が消えて瞬間的に拡大・縮小していた。
   → 両方を併記して、スクロール演出の scale（1.9s・遅延 --d）とホバーの transform（.65s・遅延なし）を共存させる。 */
html.mx-on .la-hover .la-zoom > img.la-zoom__img,
html.mx-on .work-card .ph--photo > img{
  transition-property:scale,transform;
  transition-duration:1.9s,var(--la-zoom-dur,.65s);
  transition-timing-function:var(--mx-ease-out),var(--la-zoom-ease,cubic-bezier(.22,.61,.36,1));
  transition-delay:var(--d,0s),0s;
}