1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3612],{1506:function(n,e,r){r.d(e,{Z:function(){return s}});var o=r(5893),a=r(7672),p=r(9008),t=r.n(p);r(7294);var i=r(917);let f=()=>(0,o.jsx)(i.xB,{styles:"\n .grid-item-thumbnail {\n border-radius: 50%;\n width: 180px;\n height: 180px;\n margin:auto;\n display:flex;\n }\n "}),d={hidden:{opacity:0,x:0,y:20},enter:{opacity:1,x:0,y:0},exit:{opacity:0,x:-0,y:20}};var s=n=>{let{children:e,title:r}=n,p="".concat(r," - Nefront Inc.");return(0,o.jsx)(a.E.article,{initial:"hidden",animate:"enter",exit:"exit",variants:d,transition:{duration:.4,type:"easeInOut"},style:{position:"relative"},children:(0,o.jsxs)(o.Fragment,{children:[r&&(0,o.jsxs)(t(),{children:[(0,o.jsx)("title",{children:p}),(0,o.jsx)("meta",{name:"twitter:title",content:p}),(0,o.jsx)("meta",{property:"og:title",content:p})]}),e,(0,o.jsx)(f,{})]})})}},5836:function(n,e,r){r.d(e,{Cc:function(){return t},FA:function(){return i},KP:function(){return p},cs:function(){return a}});var o=r(8996);let a="https://forms.gle/HJXsrsk5myVrmEqC6",p={junkaiGo:"/junkai-go/",filefront:"/filefront/",spatialCloud:"/spatial-cloud/"},t=n=>({junkaiGo:(0,o.rN)(n,p.junkaiGo),filefront:(0,o.rN)(n,p.filefront),spatialCloud:(0,o.rN)(n,p.spatialCloud)}),i=n=>({junkaiGo:{terms:(0,o.rN)(n,"/junkai-go/terms/"),privacy:(0,o.rN)(n,"/junkai-go/privacy-policy/")},filefront:{terms:(0,o.rN)(n,"/filefront/terms/"),privacy:(0,o.rN)(n,"/filefront/privacy/")},spatialCloud:{terms:(0,o.rN)(n,"/spatial-cloud/terms/"),privacy:(0,o.rN)(n,"/spatial-cloud/privacy-policy/")}})},4344:function(n,e,r){var o=r(2729),a=r(5893);r(7294);var p=r(917);function t(){let n=(0,o._)(["\n .nfp {\n --blue: #3054d6;\n --blue-deep: #24409f;\n --blue-pale: #eaeffb;\n --blue-wash: #f3f6fd;\n --ink: #16202e;\n --ink-soft: #4b5a6e;\n --ink-faint: #8391a4;\n --paper: #ffffff;\n --ground: #f5f8fc;\n --grid: #e2e8f2;\n --axis: #c3cfe2;\n --red: #d6453a;\n --amber-raw: #e0a521;\n --sh-1: 0 1px 2px rgba(22, 32, 46, 0.05), 0 4px 14px rgba(22, 32, 46, 0.05);\n --sh-2: 0 2px 4px rgba(22, 32, 46, 0.06), 0 14px 34px rgba(22, 32, 46, 0.1);\n --sh-blue: 0 8px 26px rgba(48, 84, 214, 0.28);\n --ease: cubic-bezier(0.22, 0.8, 0.28, 1);\n\n margin-inline: calc(-1 * var(--chakra-space-4, 1rem));\n background: var(--paper);\n color: var(--ink);\n font-size: 15px;\n line-height: 1.9;\n overflow: clip;\n text-align: left;\n\n /*\n * æ¥æ¬èªã®æãè¿ãã製åãã¼ã¸å
¨ä½ï¼è¦åºããæ¬æãï¼ã«å¹ãããã\n * æ¢å®ã®ã¾ã¾ã ã¨èªãçèªã®éä¸ã§æããï¼å®éã«ãç
§åãï¼ã¦ããä½µï¼ç¨ãã¾ãããåºãï¼ã\n * keep-all ã«ããã¨å¥èªç¹ã§ã ãæããã\n * ãã ã keep-all ã ãã ã¨è±æ°åã®é·ãé£ãªãï¼è£½ååã»AD-11 ã®ãããªç¬¦å·ã»URLï¼ã\n * æããã«æ¨ªã¸ã¯ã¿åºãã®ã§ãoverflow-wrap: anywhere ãå¿
ãä½µè¨ããã\n * text-wrap: balance ã¯ããã«ã¯å½ã¦ãªããè¡é·ãæããããã«ä¸èªç¶ãªä½ç½®ã§æãããã\n * è¦åºãã ãã»768px 以ä¸ã ãã«éå®ãã¦ããï¼ä¸ã® h1/h2/h3 ãåç
§ï¼ã\n */\n word-break: keep-all;\n overflow-wrap: anywhere;\n }\n /*\n * overflow-wrap ãåå«ã«ããç´æ¥ãå½ã¦ç´ããç¶æ¿ã ã¨å¹ããªãããå¿
è¦ã\n * Chakra ã® CSS ãªã»ããã * / *::before / *::after ã« word-wrap: break-word ã\n * åºãã¦ããã®ã§ã.nfp ããç¶æ¿ãã anywhere ã¯å
¨ã¦ã®åå«ã§ break-word ã«ä¸æ¸ããããã\n * 両è
ã¯æ¹è¡ä½ç½®ããåãã ããmin-content å¹
ã®è¨ç®ãéã:\n * - anywhere ⦠ã©ãã§ãæããåæã§è¨ç®ããã®ã§ min-content 㯠1 æåå\n * - break-word ⦠æããªãåæã§è¨ç®ããã®ã§ min-content ã¯ãå¥èªç¹ã¾ã§ã®ä¸ç¶ãã\n * .nfp 㯠word-break: keep-all ãªã®ã§ãbreak-word ã®ã¾ã¾ã ã¨æ¥æ¬èªã®ä¸æã\n * ã¾ãã㨠min-content ã«ãªããgrid ã® 1fr 㯠minmax(auto, 1fr)ãã¤ã¾ãä¸éã\n * min-content ãªã®ã§ããã©ãã¯ãåçã«ãªããã°ãªããã親ããã¯ã¿åºãã\n * å®æ¸¬ï¼1280px ã®å·¡åGOã»ä¿®æ£åï¼
1:\n * .flow4 repeat(4, 1fr) -> 237.5 / 287.5 / 390.7 / 298.8px = è¨ 1268pxï¼è¦ª 1064pxï¼\n * STEP 4 ã®ã«ã¼ãã x=1376 ã¾ã§åºã¦ã.nfp ã® overflow: clip ã§åãã¦ãã\n * .lifecycle 1fr 1fr 1fr -> 433.5 / 333.5 / 433.5px = è¨ 1241pxï¼è¦ª 1064pxï¼\n * ãã® 1 è¡ã§ 1024 / 1280 / 1440px ã§ã®ã¯ã¿åºã㯠0 件ã«ãªãï¼æ¯è¼è¡¨ã®\n * min-width: 780px ã«ãã .tblscroll å
ã®æ¨ªã¹ã¯ãã¼ã«ã¯ä»æ§ã©ããæ®ãï¼ã\n */\n .nfp * {\n box-sizing: border-box;\n overflow-wrap: anywhere;\n }\n /*\n * ãã ãçãç»é¢ã§ã¯ keep-all ãæ¬æã«å¹ãããªãï¼style.css ã® .nf-top ã¨åãæ±ãï¼ã\n * keep-all ã¯å¥èªç¹ã§ããæããªãã®ã§ã1è¡ã«å
¥ãæåæ°ãå°ãªãã¹ããã§ã¯ç¯ã\n * ã¾ããã¨æ¬¡ã®è¡ã¸éãããè¡æ«ã«å¤§ããªç©ºãã並ã¶ï¼å®æ¸¬ 390px: 空éã¯ã©ã¦ãã®\n * VISION æ¬æããã¹ãã¼ãã°ã©ã¹ã®ããã«å¸¸æ身ã«ã¤ãããããã§åãã¦ãå³ã大ãã\n * 空ãã¦ããï¼ãauto-phrase ã¯æç¯ã§æãã®ã§æ¥æ¬èªã¨ãã¦èªç¶ã«è©°ã¾ãã\n * æªå¯¾å¿ã
1®ãã©ã¦ã¶ã§ã¯å®£è¨ãã¨ç¡å¹ã«ãªã keep-all ãç¶æ¿ãã¦ãã¾ãã®ã§ã\n * ç´åã« normal ãæ¸ãã¦ãã©ã¼ã«ããã¯ãããï¼å¯¾å¿ãã¦ããã°å¾åã¡ï¼ã\n * è¦åºãã¯çã㦠keep-all ã§ãç ´ç¶»ããªããããçèªãå²ããã¨ç®ç«ã¤ã®ã§ãã®ã¾ã¾ã\n */\n @media (max-width: 700px) {\n .nfp p,\n .nfp li,\n .nfp dd,\n .nfp td {\n word-break: normal;\n word-break: auto-phrase;\n }\n }\n /*\n * è¦åºããword-break / overflow-wrap 㯠.nfp ããç¶æ¿ããã\n * text-wrap: balance ã¯è¡é·ãåãããæãããã¨ãåªå
ãã¦çèªã®éä¸ã§ãæããã\n * ï¼çãå¹
ã§ã¯ã建è¨ç¾å ´ã ãã®æ/è¡ã§ã¯ããã¾ãããã«ãªãï¼768px 以ä¸ã«éå®ããã\n * balance 㯠keep-all ããåªå
ãããã®ã§ä¸¡ç«ã¯ã§ããªããå®æ¸¬ã§ç¢ºèªæ¸ã¿ã\n */\n .nfp h1,\n .nfp h2,\n .nfp h3 {\n letter-spacing: 0.015em;\n text-wrap: pretty;\n font-family: inherit;\n }\n @media (min-width: 768px) {\n .nfp h1,\n .nfp h2,\n .nfp h3 {\n text-wrap: balance;\n }\n }\n .nfp .wrap {\n max-width: 1120px;\n margin: 0 auto;\n padding: 0 28px;\n }\n /* ã¹ããã§ã¯å·¦å³ã®ä½ç½ãè©°ãã¦ã横å¹
ãã§ããã ãæ¬æã«åãï¼style.css ã® .nf-wrap ã¨åãï¼ */\n @media (max-width: 700px) {\n .nfp .wrap {\n padding: 0 16px;\n }\n }\n /* 製ååã¯è¡ãã¾ããã§å²ããªããæ¥æ¬èªã¨è±åã®å¢ç®ã¯é常ã®æ¹è¡ä½ç½®ãªã®ã§ã\n ãããç¡ãã¨ãå·¡åGOãããå·¡åãï¼ãGOãã«åããã¦æãè¿ããã\n ï¼word-break ã§ã¯é²ããªããã white-space ã§æ¢ããï¼ã */\n .nfp .pname {\n white-space: nowrap;\n }\n /* èªã®éä¸ã§æãè¿ãããããªãèªå¥ã«ä»ããï¼ä¾:ã空éAIãã©ãããã©ã¼ã ãï¼ã */\n .nfp .nw {\n white-space: nowrap;\n }\n /* æ¬æä¸ããä»è£½åãã¼ã¸ã¸å¼µã製ååãªã³ã¯ãnext/link ã¯ç´ ã® <a> ãåºãããã\n Chakra ã®ãªã»ããï¼color/text-decoration ã inheritï¼ã§æ¬æã¨åºå¥ãä»ããªããªãã\n ãªã³ã¯ã ã¨åããããã«ãç« æ«ã® .related a ã¨åãè¦ãç®ãä¸ãã¦ããã */\n .nfp a.pname {\n color: var(--blue-deep);\n font-weight: 700;\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n .nfp a.pname:hover {\n color: var(--blue);\n }\n .nfp .mono {\n font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n }\n\n /* ã¹ã¯ãã¼ã«ãªãã¼ã« */\n .nfp .rv {\n opacity: 0;\n transform: translateY(22px);\n transition:\n opacity 0.7s var(--ease),\n transform 0.7s var(--ease);\n transition-delay: var(--d, 0s);\n }\n .nfp .rv.in {\n opacity: 1;\n transform: none;\n }\n\n /* 製åãã´ãå®ãã´ç»åã <picture> ã§ç½®ãã®ã§ã寸æ³ã¯å¤å´ã® span ã§æ±ºãã\n ï¼<picture> ã§ã¯ãªã span ããã¬ãã¯ã¹ã¢ã¤ãã ã«ãªãï¼ */\n .nfp .plogo {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 18px;\n flex-wrap: wrap;\n }\n /* å·¡åGO ã¯ã·ã³ãã«ã¨æåçµã¿ãå¥ç´ æãé«ãã ãæå®ãã¦å¹
ã¯å寸æ¯ã®ã¾ã¾ã\n ã·ã³ãã«ã¯ Filefront ã®ãã¼ã¯ã¨åã 56px è§ã\n æåçµã¿ã¯å®æ¸¬ã§ Filefront ãã¼ã¸ã¨å
å¦çã«æãã¦ãã:\n \"Filefront\"(32px/900) ã® F ã®åé¢é«ã¯ 24.77pxããã®ç»åã¯ãGOããç»åé«ãã®ãã®ã\n ãå·¡åããç»åé«ã® 0.942 åãé«ã 25px ã«ãã㨠GO=25px ã F ã¨ã»ã¼ä¸è´ãã\n æ¼¢å㯠23.6px ã¨å°ãå°ãããªãï¼æ¼¢åã¯åãé«ãã ã¨å¤§ããè¦ããã®ã§ããã§ããï¼ã */\n .nfp .plogo .plogo-symbol {\n flex: none;\n height: 56px;\n }\n .nfp .plogo .plogo-word {\n flex: none;\n height: 25px;\n }\n .nfp .plogo .plogo-symbol img,\n .nfp .plogo .plogo-word img {\n display: block;\n height: 100%;\n width: auto;\n }\n /* ãã¼ã¯ï¼Filefrontï¼ãé£ã«ããã¹ãã®è£½ååã並㶠*/\n .nfp .plogo .plogo-mark {\n flex: none;\n width: 56px;\n height: 56px;\n }\n .nfp .plogo .plogo-mark img {\n display: block;\n width: 100%;\n height: 100%;\n }
1\n /* ããã¹ãã§çµã製ååï¼Filefront ã®ã¯ã¼ããã¼ã¯ï¼ã\n 游ã´ã·ãã¯ã¯ macOS ã YuGothicãWindows ã Yu Gothic ã¨ååãéãã®ã§ä¸¡æ¹ä¸¦ã¹ãã\n ããããã¼ã¸ã®ãããã¯ãã«ã¼ãå´ã¯å¥ãã¡ã¤ã«ã§åãæå®ããã¦ããï¼å
±éåããªãï¼ã */\n .nfp .plogo .pwordmark {\n font-family: 'Yu Gothic Medium', 'Yu Gothic', YuGothic, '游ã´ã·ãã¯ä½', 'Hiragino Sans',\n sans-serif;\n font-size: 32px;\n /* 游ã´ã·ãã¯ã¯å¤ªãåºãã®ã§ã900 ã ã¨é£ã«ä¸¦ã¶å·¡åGOã®ãã´ããæããã«éããªãã\n ãã ããã®æ¸ä½ã¯å®è³ª2ã¦ã§ã¤ãããç¡ãã600ã900 ã¯ãã¹ã¦ Bold ã«ä¸¸ãããã¦\n è¦ãç®ãå¤ãããªãï¼å®æ¸¬: æç»å¹
ãåé¢ã®ã¤ã³ã¯éã 600/700/800/900 ã§åä¸ï¼ã\n 太ããå®éã«è½ã¨ããã®ã¯ 500 以ä¸ãªã®ã§ 500 ãæå®ãã¦ããã */\n font-weight: 500;\n color: var(--ink);\n line-height: 1;\n }\n .nfp .plogo .psub {\n font-size: 12.5px;\n color: var(--ink-faint);\n font-weight: 700;\n border-left: 1px solid var(--axis);\n padding-left: 14px;\n }\n /* æãè¿ãã¦è£½ååã®ä¸ã«æ¥ãã¨ãã¯ã縦罫ç·ãå®ã«æµ®ãã®ã§å¤ã */\n @media (max-width: 520px) {\n .nfp .plogo .psub {\n border-left: none;\n padding-left: 0;\n }\n }\n\n /* ç¯ã¿ã¤ãã«ã®ä¸ã«ç½®ãè±åã©ãã« */\n .nfp .eyebrow {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 11.5px;\n font-weight: 700;\n letter-spacing: 0.24em;\n color: var(--blue);\n margin-bottom: 16px;\n font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n }\n .nfp .eyebrow::before {\n content: '';\n width: 30px;\n height: 2px;\n background: linear-gradient(90deg, var(--blue), rgba(48, 84, 214, 0.25));\n }\n\n /* ãã¿ã³ */\n .nfp .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 0.03em;\n padding: 14px 32px;\n border-radius: 5px;\n text-decoration: none;\n border: 2px solid var(--blue);\n cursor: pointer;\n font-family: inherit;\n transition:\n transform 0.25s var(--ease),\n box-shadow 0.25s var(--ease),\n background 0.25s,\n color 0.25s,\n border-color 0.25s;\n position: relative;\n }\n .nfp .btn .ar {\n display: inline-block;\n transition: transform 0.25s var(--ease);\n font-weight: 400;\n }\n .nfp .btn:hover .ar {\n transform: translateX(4px);\n }\n .nfp .btn.pri {\n background: var(--blue);\n color: #fff;\n box-shadow: var(--sh-blue);\n }\n .nfp .btn.pri:hover {\n background: var(--blue-deep);\n border-color: var(--blue-deep);\n transform: translateY(-2px);\n box-shadow: 0 14px 34px rgba(48, 84, 214, 0.36);\n }\n .nfp .btn.pri:active {\n transform: translateY(0);\n }\n /*\n * ã¢ãã¯ã§ã¯ç¬¬2ãã¿ã³ã .btn.sec ã ããã»ã¯ã·ã§ã³ã® .sec ã¨è¡çªãã¦\n * .sec ã® padding (92px 0) ãæ¾ã£ã¦ãã¾ãããããã¡ãã§ã¯ .ghost ã«æ¹åãã¦ããã\n */\n .nfp .btn.ghost {\n background: rgba(255, 255, 255, 0.9);\n color: var(--blue);\n }\n .nfp .btn.ghost:hover {\n background: var(--blue-pale);\n transform: translateY(-2px);\n box-shadow: var(--sh-1);\n }\n .nfp .btn:focus-visible,\n .nfp a:focus-visible {\n outline: 3px solid #8fa8ef;\n outline-offset: 2px;\n }\n /*\n * ãã¼ãã¼ã® CTAãããåãåãããã¨ãç¡æãã©ã¤ã¢ã«ãç¸è«ãã¯æåæ°ãéãã®ã§ã\n * flex ã®ã¾ã¾ã ã¨ä¸èº«ãªãã®å¹
ã«ãªã£ã¦é£ãåã2ã¤ã®ãã¿ã³ã®å¹
ãããããªãã\n * grid ã® 1fr åã«ããã¨ãåå¹
ãåºãæ¹ï¼=ãç¡æãã©ã¤ã¢ã«ãç¸è«ãï¼ã«ãããã\n * - width: max-content ⦠ãããã¯ã¬ãã«ã®ã¾ã¾å
容å¹
ã«ç¸®ããï¼inline-grid ã«\n * ããã¨è¡ããã¯ã¹ã«ãªããä¸ã«è¡éã¶ãã®ä½ç½ãä»ãï¼\n * - minmax(0, 1fr) ⦠880ã920px ãããã§ãã¼ãã¼ã®å·¦ã«ã©ã ã 2ã¤åã®å¹
ã«\n * ãããããªã®ã§ãå
¥ããªãã¨ãã¯åã縮ãã¦ï¼æåãæã£ã¦ï¼ã¯ã¿åºãããªã\n * ãã¿ã³ã1ã¤ã ãã® btnrowï¼ç©ºéã¯ã©ã¦ãï¼ã§ã¯ãåã1ã¤ãªã®ã§è¦ãç®ã¯å¤ãããªãã\n */\n .nfp .btnrow {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n width: max-content;\n max-width: 100%;\n gap: 14px;\n }\n /* 横ã«2ã¤ä¸¦ã¹ãã¨å
¥ããªãå¹
ã§ã¯ç¸¦ã«ç©ãã1åã«ãªãã®ã§å¹
ã¯ããã£ãã¾ã¾ */\n @media (max-width: 520px) {\n .nfp .btnrow {\n grid-auto-flow: row;\n }\n }\n\n /* ============ ãã¼ãã¼ ============ */\n .nfp .phero {\n background: var(--blue-wash);\n border-bottom: 1px solid var(--grid);\n position: relative;\n overflow: hidden;\n }\n .nfp .phero::before {\n content: '';\n position: absolute;\n inset: 0;\n /* æ°´å¹³ã°ãªããç·ã ãåããã(28px)ä¸ãã¦ããããªãã»ãããç¡ãã¨ãã¼ãã¼ä¸ç«¯(y=0)ã«\n ã°ãªããç·ã1æ¬å¼ããããã® 5px ä¸ã«ããåºå®ãããã¼ã® border-bottom ã¨\n åè²ã»ã»ã¼åä½ç½®ã§ä¸¦ã¶ããããã¼ã¸ä¸é¨ã«æ¨ªç
1·ã2æ¬ããããã«è¦ãã¦ãã¾ãã\n ä½ç½®ã¨ãµã¤ãºã¯ background ã·ã§ã¼ããã³ãã®ã¬ã¤ã¤å
(<position> / <size>)ã§\n æå®ãããã¨ãbackground-position ãå¥å®£è¨ã§å¾ç½®ããã¨ãemotion ãç¡å¹ãª\n -webkit-background-position ãä½µãã¦åºåããä½ç½®ãå¹ããªãã */\n background:\n radial-gradient(640px 380px at 82% 20%, rgba(48, 84, 214, 0.1), transparent 65%),\n linear-gradient(var(--grid) 1px, transparent 1px) 0 28px / 56px 56px,\n linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 56px 56px;\n mask-image: linear-gradient(180deg, #000 60%, transparent);\n -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);\n }\n .nfp .phero .wrap {\n position: relative;\n padding-top: 76px;\n padding-bottom: 68px;\n display: grid;\n grid-template-columns: 1.15fr 0.85fr;\n gap: 44px;\n align-items: center;\n }\n @media (max-width: 880px) {\n .nfp .phero .wrap {\n grid-template-columns: 1fr;\n padding-top: 52px;\n }\n }\n .nfp .phero h1 {\n font-size: clamp(28px, 4.2vw, 44px);\n margin: 0 0 18px;\n font-weight: 800;\n line-height: 1.45;\n }\n .nfp .phero p {\n color: var(--ink-soft);\n margin: 0 0 30px;\n max-width: 30em;\n }\n .nfp .trialbadge {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n background: #fff;\n border: 1.5px solid var(--blue);\n color: var(--blue-deep);\n font-weight: 800;\n font-size: 13.5px;\n border-radius: 999px;\n padding: 6px 18px;\n margin-bottom: 18px;\n box-shadow: var(--sh-1);\n }\n .nfp .trialbadge::before {\n content: '';\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--blue);\n }\n\n /* å·¡åGO ãã¼ãã¼: ãã³ã¨çµè·¯ */\n .nfp .phero.geo .wrap {\n z-index: 2;\n }\n .nfp .pheromap {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n .nfp .pheromap .proom {\n fill: none;\n stroke: var(--blue);\n stroke-width: 1.4;\n opacity: 0;\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n }\n .nfp .phero.in .pheromap .proom {\n animation: nfpRoom 1.9s var(--ease) forwards;\n }\n /* åºç¾ã®é
延㯠hero-junkai-map.tsx ã®ã¤ã³ã©ã¤ã³ animation-delay ã§æ¯ã£ã¦ãã */\n @keyframes nfpRoom {\n from {\n stroke-dashoffset: 1;\n opacity: 0;\n }\n 40% {\n opacity: 0.2;\n }\n to {\n stroke-dashoffset: 0;\n opacity: 0.2;\n }\n }\n .nfp .pheromap .pping {\n fill: none;\n stroke: var(--blue);\n stroke-width: 2;\n opacity: 0;\n }\n .nfp .phero.in .pheromap .pping {\n animation: nfpPing 2.6s ease-out infinite;\n }\n @keyframes nfpPing {\n 0% {\n r: 8;\n opacity: 0.45;\n }\n 70%,\n 100% {\n r: 46;\n opacity: 0;\n }\n }\n .nfp .pheromap .proute {\n fill: none;\n stroke: var(--blue);\n stroke-width: 3.4;\n stroke-linecap: round;\n stroke-linejoin: round;\n opacity: 0.5;\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n }\n .nfp .pheromap .r2 {\n stroke-width: 2;\n opacity: 0.3;\n }\n .nfp .phero.in .pheromap .r1 {\n animation: nfpDraw 2.6s var(--ease) 0.4s forwards;\n }\n .nfp .phero.in .pheromap .r2 {\n animation: nfpDraw 2s var(--ease) 1.6s forwards;\n }\n .nfp .pheromap .ppin {\n opacity: 0;\n }\n .nfp .pheromap .ppin path {\n fill: var(--blue);\n opacity: 0.62;\n }\n .nfp .pheromap .ppin circle {\n fill: #fff;\n }\n .nfp .phero.in .pheromap .ppin {\n animation: nfpPop 0.5s var(--ease) forwards;\n }\n .nfp .phero.in .pheromap .p1 {\n animation-delay: 0.9s;\n }\n .nfp .phero.in .pheromap .p2 {\n animation-delay: 1.4s;\n }\n .nfp .phero.in .pheromap .p3 {\n animation-delay: 1.9s;\n }\n .nfp .phero.in .pheromap .p4 {\n animation-delay: 2.4s;\n }\n .nfp .phero.in .pheromap .p5 {\n animation-delay: 3.1s;\n }\n .nfp .pheromap .pwalk circle {\n fill: var(--blue);\n opacity: 0;\n }\n .nfp .phero.in .pheromap .pwalk circle {\n offset-path: path('M150 720 V540 H560 V300 H900 V150');\n animation:\n nfpWalk 6.5s linear 1s infinite,\n nfpFade 0.6s ease 1s forwards;\n }\n @keyframes nfpWalk {\n from {\n offset-distance: 0%;\n }\n to {\n offset-distance: 100%;\n }\n }\n @keyframes nfpFade {\n to {\n opacity: 0.55;\n }\n }\n @keyframes nfpDraw {\n to {\n stroke-dashoffset: 0;\n }\n }\n @keyframes nfpPop {\n to {\n opacity: 1;\n }\n }\n /* å¹
ãçãã¨ãã«ä¸¸ãã¨æ¶ãã¨èæ¯ã¢ãã¡ã¼ã·ã§ã³ãåºãªã
1ãªããããèãããã ãã«ãã */\n @media (max-width: 700px) {\n .nfp .pheromap {\n opacity: 0.55;\n }\n }\n\n /* Filefront ãã¼ãã¼: å®å³é¢ãèãæ·ããèµ°æ»ãã¦è¨å·ãæ¤åºãã */\n .nfp .phero.dwg .dwglayer {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n mask-image: linear-gradient(100deg, transparent 6%, #000 40%, #000 96%, transparent);\n -webkit-mask-image: linear-gradient(\n 100deg,\n transparent 6%,\n #000 40%,\n #000 96%,\n transparent\n );\n }\n .nfp .phero.dwg .dwglayer image {\n opacity: 0.24;\n mix-blend-mode: multiply;\n }\n .nfp .phero.dwg .dwgscan {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 22%;\n left: -22%;\n pointer-events: none;\n z-index: 1;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(48, 84, 214, 0.12) 46%,\n rgba(48, 84, 214, 0.28) 50%,\n rgba(48, 84, 214, 0.12) 54%,\n transparent\n );\n }\n .nfp .phero.dwg.in .dwgscan {\n animation: nfpSweep 3.2s var(--ease) 0.3s forwards;\n }\n @keyframes nfpSweep {\n to {\n left: 100%;\n }\n }\n /* æ¤åºçµæã¯å®åºåããæ½åºããæ ã¨å»ºå
·ç¬¦å·ãå³é¢ã¨åã座æ¨ç³»ã«ç½®ãã¦ãããããºã¬ãªã */\n .nfp .phero.dwg .dwglayer .det {\n opacity: 0;\n }\n .nfp .phero.dwg .dwglayer .det rect {\n fill: none;\n stroke: #d92b2b;\n stroke-width: 1.4;\n vector-effect: non-scaling-stroke;\n }\n .nfp .phero.dwg .dwglayer .det text {\n font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;\n /* viewBox åä½ãSVG å
ãªã®ã§å³é¢ã¨ä¸ç·ã«æ¡å¤§ç¸®å°ãã */\n font-size: 13px;\n font-weight: 700;\n fill: #1f3fd8;\n }\n .nfp .phero.dwg.in .dwglayer .det {\n animation: nfpDet 0.42s var(--ease) forwards;\n }\n @keyframes nfpDet {\n from {\n opacity: 0;\n transform: scale(0.94);\n }\n to {\n /* æ ã¨æåã¯ããã¾ã§èæ¯ãèãåºãã¦æ¬æã®å¯èªæ§ãè½ã¨ããªã */\n opacity: 0.4;\n transform: none;\n }\n }\n .nfp .phero.dwg .wrap {\n z-index: 2;\n }\n\n /* 空éã¯ã©ã¦ã ãã¼ãã¼: ç¹ç¾¤ \xd7 AR */\n .nfp .phero.cloud {\n background: #05080f;\n color: #fff;\n border-bottom: none;\n min-height: 560px;\n }\n .nfp .phero.cloud::before {\n display: none;\n }\n .nfp .phero.cloud canvas {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n }\n .nfp .phero.cloud .cloudglow {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: radial-gradient(\n 720px 440px at 66% 48%,\n rgba(48, 120, 214, 0.24),\n transparent 68%\n );\n }\n .nfp .phero.cloud .cloudvig {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: radial-gradient(\n 140% 110% at 50% 42%,\n transparent 38%,\n rgba(5, 8, 15, 0.88) 100%\n );\n }\n .nfp .phero.cloud .wrap {\n position: relative;\n z-index: 5;\n grid-template-columns: 1fr;\n }\n .nfp .phero.cloud h1 {\n color: #fff;\n }\n /*\n * 空éã¯ã©ã¦ãã®è£½åå㯠Filefront ãã¼ãã¼ã¨åã .pwordmarkï¼æ¸¸ã´ã·ã㯠32px / 500ï¼ã\n * 使ããæ¿ãå°ã«è¼ããã®ã§ç½æãã«ããã ãã«çãããããã ã太ã
1ããªãçç±:\n * - 游ã´ã·ãã¯ã¯å®è³ª Medium 㨠Bold ã®2ã¦ã§ã¤ããããªããå®æ¸¬ï¼32px \"Spatial Cloud\"ï¼ã§\n * 400/500 ã¯æç»å¹
196.64pxã»ã¤ã³ã¯é 360kã600/700/900 㯠208.20pxã»537k ã§å®å
¨ã«åå¤ã\n * ã¤ã¾ããå°ãã ã太ããã¯ã§ãããä¸ãããªãä¸æ°ã« 1.49 åã®ã¤ã³ã¯éã«ãªãã\n * - å¹³åã¤ã³ã¯è¢«è¦çï¼ã¤ã³ã¯é \xf7 å¹
\xf7 æåãµã¤ãºï¼ã§æ¯ã¹ãã¨ããããã®ãããã¯ãã«ã¼ãã®\n * 製ååï¼æ¸¸ã´ã·ã㯠23px / 400ï¼ã 55.4ããã® 32px / 500 ã 57.2 ã§ã»ã¼ä¸è´ããã\n * Bold ã«ãã㨠80.6ãå¤æ´åã® Noto Sans JP 30px / 900 㯠88.7 ã§æããã«éãã£ãã\n * - ç½æãæåã¯ãã¬ã¼ã·ã§ã³ã§ããã太ã£ã¦è¦ããã®ã§ãæ¿ãå°ã ããã¨æã¡ä¸ããå¿
è¦ã¯ãªãã\n * 製ååã¯2èªã§2è¡ã«çµãããã.pwordmark æ¢å®ã® line-height: 1 ã ã¨è¡éãè©°ã¾ããããã\n */\n .nfp .phero.cloud .plogo .pwordmark {\n color: #fff;\n line-height: 1.18;\n }\n .nfp .phero.cloud p {\n color: #fff;\n }\n .nfp .phero.cloud .psub {\n color: #7f96b5;\n border-left-color: #2a3a55;\n }\n .nfp .phero.cloud .btn.pri {\n background: #2f7ad6;\n border-color: #2f7ad6;\n box-shadow: 0 10px 34px rgba(47, 122, 214, 0.42);\n }\n .nfp .phero.cloud .arlayer {\n position: absolute;\n inset: 0;\n z-index: 3;\n pointer-events: none;\n }\n .nfp .phero.cloud .arlab {\n position: absolute;\n transform: translate(-50%, -100%);\n font-size: 11.5px;\n line-height: 1.55;\n white-space: nowrap;\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n .nfp .phero.cloud .arlab .card {\n display: flex;\n align-items: center;\n gap: 9px;\n background: rgba(8, 16, 30, 0.78);\n border: 1px solid rgba(120, 180, 255, 0.34);\n border-radius: 7px;\n padding: 7px 12px;\n backdrop-filter: blur(6px);\n box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);\n }\n .nfp .phero.cloud .arlab .dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n flex: none;\n }\n .nfp .phero.cloud .arlab b {\n color: #fff;\n font-weight: 700;\n }\n .nfp .phero.cloud .arlab small {\n display: block;\n color: #8fa6c4;\n font-size: 10px;\n }\n .nfp .phero.cloud .arlab .stem {\n display: block;\n width: 1px;\n height: 26px;\n margin: 0 auto;\n background: linear-gradient(180deg, rgba(120, 180, 255, 0.6), rgba(120, 180, 255, 0));\n }\n .nfp .phero.cloud .arlab .anchor {\n display: block;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n margin: -5px auto 0;\n border: 1px solid rgba(120, 180, 255, 0.9);\n background: rgba(120, 180, 255, 0.25);\n }\n .nfp .phero.cloud .hud {\n position: absolute;\n inset: 0;\n z-index: 4;\n pointer-events: none;\n }\n .nfp .phero.cloud .hud .br {\n position: absolute;\n width: 28px;\n height: 28px;\n border: 1.5px solid rgba(120, 190, 255, 0.4);\n }\n .nfp .phero.cloud .hud .br.tl {\n top: 24px;\n left: 24px;\n border-right: 0;\n border-bottom: 0;\n }\n .nfp .phero.cloud .hud .br.tr {\n top: 24px;\n right: 24px;\n border-left: 0;\n border-bottom: 0;\n }\n .nfp .phero.cloud .hud .br.bl {\n bottom: 24px;\n left: 24px;\n border-right: 0;\n border-top: 0;\n }\n .nfp .phero.cloud .hud .br.br2 {\n bottom: 24px;\n right: 24px;\n border-left: 0;\n border-top: 0;\n }\n\n /* ============ ã»ã¯ã·ã§ã³ ============ */\n .nfp .sec {\n padding: 92px 0;\n position: relative;\n }\n .nfp .sec.alt {\n background: var(--ground);\n border-block: 1px solid var(--grid);\n }\n .nfp .sec h2 {\n font-size: clamp(24px, 3.1vw, 33px);\n margin: 0 0 16px;\n font-weight: 800;\n line-height: 1.5;\n }\n .nfp .sec .lead {\n color: var(--ink-soft);\n max-width: 44em;\n margin: 0 0 44px;\n }\n /* ãªã¼ããè¤æ°ã®æ®µè½ã«åããã¨ãã«ãæå¾ä»¥å¤ã®æ®µè½ã¸ä»ããã\n æ¢å®ã® 44px ã¯ç¯ã®ä¸ã®ä½ç½ã¨ãã¦æ±ºããå¤ã
1ªã®ã§ã段è½ã®éã«ã¯ç©ºããããã */\n .nfp .sec .lead.tight {\n margin-bottom: 16px;\n }\n .nfp .note {\n font-size: 12.5px;\n color: var(--ink-faint);\n margin-top: 22px;\n }\n\n /* 課é¡ã«ã¼ã */\n .nfp .painlist {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n }\n .nfp .painlist4 {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n }\n @media (max-width: 720px) {\n .nfp .painlist4 {\n grid-template-columns: 1fr;\n }\n }\n @media (max-width: 700px) {\n .nfp .painlist {\n grid-template-columns: 1fr;\n }\n }\n .nfp .pain {\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 10px;\n padding: 26px 26px 22px;\n box-shadow: var(--sh-1);\n transition:\n transform 0.35s var(--ease),\n box-shadow 0.35s var(--ease);\n }\n .nfp .pain:hover {\n transform: translateY(-4px);\n box-shadow: var(--sh-2);\n }\n .nfp .pain h3 {\n font-size: 15.5px;\n margin: 0 0 8px;\n }\n .nfp .pain p {\n font-size: 13px;\n color: var(--ink-soft);\n margin: 0;\n }\n\n /* .bigsteps / .bigstepï¼å·¡åGO ã®ã使ãæ¹ã¯ã3ã¹ããããï¼ã¯ã\n 使ãæ¹ããã¼ãã¼ã®ã¹ã©ã¤ãã·ã§ã¼ã¨éè¤ãã¦ããããã»ã¯ã·ã§ã³ãã¨åé¤ããã\n 3ãã¼ã¸ã¨ãåç
§ãç¡ããã¨ã grep ã§ç¢ºèªæ¸ã¿ã */\n .nfp .shot {\n background: var(--ground);\n border: 1px solid var(--grid);\n border-radius: 8px;\n overflow: hidden;\n }\n .nfp .shot svg,\n .nfp .shot img {\n display: block;\n width: 100%;\n height: auto;\n }\n .nfp .shot-note {\n font-size: 10.5px;\n color: var(--ink-faint);\n text-align: center;\n padding: 5px 0 7px;\n }\n /* .shot.portrait ãã使ãæ¹ã¯ã3ã¹ããããã§ãã使ã£ã¦ããªãã£ãã®ã§ä¸ç·ã«åé¤ããã\n .shot / .shot-note 㯠Filefront ã®ãã¼ãã¼ä¸ã§ä½¿ã£ã¦ããã®ã§æ®ãã */\n .nfp .figure {\n margin: 0;\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 12px;\n overflow: hidden;\n box-shadow: var(--sh-1);\n }\n .nfp .figure img {\n display: block;\n width: 100%;\n height: auto;\n }\n .nfp .figure figcaption {\n font-size: 12px;\n color: var(--ink-faint);\n text-align: center;\n padding: 10px 16px 14px;\n }\n\n /* æ©è½ã«ã¼ã: ç»é¢å¹
ã«å¿ã㦠2 â 1 åã\n ã«ã¼ã㯠3 製åãã¼ã¸ã¨ãå
¨é¨åã大ããã«è¦ããï¼æ¢åãµã¤ãã®ã«ã¼ãã¨åãæ±ãï¼ã\n grid-auto-rows: 1fr ã§å
¨è¡ã®é«ããæããä¸ã® .fimg ã§ç»åæ ã®å¤§ããã\n æ£è¦åãã¦ããã両æ¹ãããªãã¨ãç»åã®å¤§ãã 1 æã ãã§ã«ã¼ãã伸ã³ãã */\n .nfp .features {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-auto-rows: 1fr;\n gap: 20px;\n }\n @media (max-width: 880px) {\n .nfp .features {\n grid-template-columns: 1fr;\n }\n }\n .nfp .feature {\n display: flex;\n flex-direction: column;\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 10px;\n padding: 26px 28px 22px;\n box-shadow: var(--sh-1);\n transition:\n transform 0.35s var(--ease),\n box-shadow 0.35s var(--ease),\n border-color 0.35s;\n }\n .nfp .feature:hover {\n transform: translateY(-4px);\n box-shadow: var(--sh-2);\n border-color: rgba(48, 84, 214, 0.35);\n }\n .nfp .feature .fno {\n font-family: ui-monospace, Menlo, monospace;\n font-size: 12px;\n color: var(--blue);\n font-weight: 700;\n letter-spacing: 0.1em;\n }\n .nfp .feature h3 {\n margin: 6px 0 8px;\n font-size: 16.5px;\n }\n .nfp .feature p {\n margin: 0;\n font-size: 13px;\n color: var(--ink-soft);\n }\n /* ç»åæ ã横é·ã¹ã¯ã·ã§ã»ç¸¦é·ã¹ããã»UI ããã«ã®åãåºããæ··å¨ããã®ã§ã\n æ ã®å¤§ããã 3:2ï¼ä¸é 320pxï¼ã«åºå®ãã¦ä¸ã« contain ã§åããã\n æ ãåºå®ããªãã¨ãç´ æã®ç¸¦æ¨ªæ¯ã®éãããã®ã¾ã¾ã
1«ã¼ãã®é«ãã®éãã«ãªã\n ï¼å®æ¸¬: Filefront ã® F-02 ã ãç»åã 576px é«ã«ãªããé£ã® F-01 ã®ä¸ã«\n 200px 以ä¸ã®ç©ºç½ãã§ãã¦ããï¼ã\n ä¸é 320px ã¯ã1 åã«è½ã¡ãåºãå¹
ã§æ ãé延ã³ããªãããã®é æã¡ã\n 1280px ã§ã¯æ 㯠466x311px ã«ãªããããã«ã®ç¸®å°ç㯠0.55ã0.69 ã§\n ä¸ã®æåã 11px ç¸å½ä»¥ä¸ãä¿ã¦ãã */\n .nfp .feature .fimg {\n margin: 16px 0 0;\n border: 1px solid var(--grid);\n border-radius: 8px;\n overflow: hidden;\n /* æ ã« contain ã§åããã®ã§ä¸ä¸ãå·¦å³ã«ä½ç½ãåºããå°ã¯ç½ã\n ç´ æã¯ã©ããèæ¯ãç½ãªã®ã§ãç½ãªãä½ç½ã段差ã¨ãã¦è¦ããªã\n ï¼æ·¡ãå°ã«ããã¨ç»åã®å¨ãã«å¸¯ãåºã¦ãç»åãå°ãããããã«è¦ããï¼ã */\n background: #fff;\n /*\n * é«ãã¯åºå®å¤ãaspect-ratio ã§æ±ºããã¨ãé«ããä¸å®ãã¨æ±ããã¦\n * ä¸ã® img ã® height: 100% ã解決ãããã縦é·ã®ã¹ã¯ã·ã§ãå寸ã®ã¾ã¾\n * æç»ããã¦æ ã® overflow: hidden ã§ä¸ä¸ãåãã¦ããï¼F-03 ã®åçãã¼ã¯ã¢ããï¼ã\n */\n height: 300px;\n display: grid;\n /*\n * è¡ãæ示ã㦠minmax(0, 1fr) ã«ãããæ¢å®ã®æé»è¡ï¼autoï¼ã ã¨è¡ãä¸èº«ã®\n * é«ãï¼ç¸¦é·ã¹ã¯ã·ã§ã§ 952pxï¼ã¾ã§ä¼¸ã³ã¦ãã¾ãããã®è¡ãåºæºã« picture / img ã®\n * height: 100% ã解決ããã¦æ ãã溢ããoverflow: hidden ã§ä¸ä¸ãåãã¦ããã\n * 1fr ãªãè¡ã®é«ããæ ã®å
寸ã§ç¢ºå®ããã®ã§ãä¸ã® % ãæ£ãã解決ãããã\n */\n grid-template-rows: minmax(0, 1fr);\n place-items: center;\n }\n @media (max-width: 880px) {\n .nfp .feature .fimg {\n height: 240px;\n }\n }\n /* ProductPicture 㯠<picture> ãæãã®ã§ããããæ ãã£ã±ãã«åºããã\n <picture> ã¯æ¢å®ã§ display: inlineã»é«ã auto ãªã®ã§ããããç¡ãã¨\n ä¸ã® img ã® height: 100% ã解決ãããã縦é·ã®ã¹ã¯ã·ã§ï¼F-03 ã®åçãã¼ã¯ã¢ããï¼ã\n å寸ã®ã¾ã¾æç»ããã¦æ ã® overflow: hidden ã§ä¸ä¸ãåããã */\n .nfp .feature .fimg picture {\n display: block;\n width: 100%;\n height: 100%;\n }\n /* æ ãã£ã±ãã使ã£ã¦ contain ã§åãããåãåããªãã */\n .nfp .feature .fimg img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n /* 縦é·ã®ã¹ããå®æ©ã¹ã¯ã·ã§ãç»åèªä½ã¯ããªãã³ã°ããªãã\n å°ã¯ä»ã®ç»åæ ã¨åãæ·¡ãå°ã以åã¯æãå°ï¼#0f1524ï¼ã«ãã¦ãããã\n ã«ã¼ãã®ä¸ã§1æã ãé»ãé¢ãã§ãã¦æµ®ãããæããã */\n .nfp .feature .fimg.portrait {\n padding: 12px;\n }\n .nfp .feature .fimg.portrait img {\n border-radius: 8px;\n }\n /* UI ããã«ã®åãåºãï¼Filefront ã®æ¤ç´¢æ¡ä»¶ã»é¢é£ãã¼ã¸ï¼ã\n ããã«èªä½ã®å°ãæ·¡ãéãªã®ã§ãã«ã¼ãã¨ã®å¢ç®ã«èãæ ã足ãã */\n .nfp .feature .fimg.panel {\n padding: 10px;\n }\n .nfp .feature .fimg.panel img {\n border-radius: 6px;\n border: 1px solid var(--grid);\n }\n .nfp .fitline {\n margin-top: 12px !important;\n padding-top: 11px;\n border-top: 1px dashed var(--grid);\n font-size: 12px !important;\n color: var(--ink-faint) !important;\n }\n\n /* ãã³ã®è²ã®å¡ä¾ï¼ç¨®å¥ã»å¯¾å¿ç¶æ³ï¼ã¯æ¬æã§èª¬æããå½¢ã«ããã®ã§ããã¾ã¯ä½¿ã£ã¦ããªãã\n .legend / .pin-ring / .pin-dot ã¨ãã«åç
§ç®æã¯ç¡ãã */\n\n /* ä½ç½®ã¥ãå³ */\n .nfp .continuum {\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 14px;\n padding: 40px 44px;\n box-shadow: var(--sh-1);\n }\n @media (max-width: 720px) {\n .nfp .continuum {\n padding: 28px 24px;\n }\n }\n .nfp .stackviz .devices {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 12px;\n max-width: 660px;\n margin: 0 auto 18px;\n }\n @media (max-width: 720px) {\n .nfp .stackviz .devices {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n /* 5ã¤ä¸¦ã¹ãçï¼ãã£ã¸ã«ã«AIã®å·¥ç¨ï¼ã4ååºå®ã ã¨5ã¤ç®ã次ã®è¡ã«1ã¤ã ãæ®ãã®ã§ã\n å
¥ãæ°ã ãèªåã§æãè¿ããå¹
ãå°ãåºãã¦ã1æãããã窮å±ã«ãªããªãããã«ããã */\n .nfp .stackviz .devices.five {\n grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));\n max-width: 780px;\n }\n .nfp .stackviz .dev {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n font-weight: 700;\n color: var(--ink-soft);\n border: 1px solid var(--grid);\n background: #fff;\n border-radius: 10px;\n padding: 10px 12px;\n text-align: center;\n line-height: 1.6;\n transition: transform 0.3s var(--ease);\n }\n .nfp .stackviz .dev:hover {\n transform: translateY(-3px);\n }\n .nfp .stackviz .dev small {\n font-weight: 500;\n font-size: 10.5px;\n color: var(--ink-faint);\n }\n .nfp .stackviz .conn {\n text-align: center;\n color: var(--axis);\n font-size: 15px;\n line-height: 1;\n margin-bottom: 14px;\n letter-spacing: 8px;\n }\n .nfp .stackviz .base {\n background: var(--blue);\n color: #fff;\n border-radius: 8px;\n text-align: center;\n font-weight: 800;\n font-size: 14.5px;\n padding: 13px 18px;\n letter-spacing: 0.06em;\n box-shadow: var(--sh-blue);\n max-width: 560px;\n margin: 0 auto;\n }\n .nfp .stackviz .cap {\n text-align: center;\n font-size: 11.5px;\n color: var(--ink-faint);\n margin-top: 12px;\n }\n /* å³ã®ä¸çªä¸ã«ç½®ããã£ãã·ã§ã³ï¼ä½¿ãå´ã®ããã¤ã¹ï¼ãä½ç½ãä¸ä¸ã²ã£ããè¿ã */\n .nfp .stackviz .cap.top {\n margin-top: 0;\n margin-bottom: 12px;\n }\n .nfp .forwhom {\n margin-top: 38px;\n border-top: 1px solid var(--grid);\n padding-top: 26px;\n }\n .nfp .forwhom h3 {\n margin: 0 0 14px;\n font-size: 15px;\n font-weight: 800;\n letter-spacing: 0.02em;\n }\n .nfp .forwhom ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px 26px;\n }\n @media (max-width: 720px) {\n .nfp .forwhom ul {\n grid-template-columns: 1fr;\n }\n }\n .nfp .forwhom li {\n font-size: 13.5px;\n color: var(--ink-soft);\n padding-left: 20px;\n position: relative;\n line-height: 1.8;\n }\n .nfp .forwhom li::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0.72em;\n width: 9px;\n height: 9px;\n border: 1.5px solid var(--blue);\n border-radius: 50%;\n }\n\n /* ã©ã¤ããµã¤ã¯ã«: ç¹æ¤ â å ±å â ä¿®ç¹ */\n .nfp .lifecycle {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 20px;\n margin-top: 34px;\n }\n @media (max-width: 880px) {\n .nfp .lifecycle {\n grid-template-columns: 1fr;\n }\n }\n .nfp .lcgroup {\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 10px;\n padding: 22px 24px 18px;\n box-shadow: var(--sh-1);\n display: flex;\n flex-direction: column;\n gap: 16px;\n transition:\n transform 0.35s var(--ease),\n box-shadow 0.35s var(--ease),\n border-color 0.35s;\n }\n .nfp .lcgroup:hover {\n transform: translateY(-4px);\n box-shadow: var(--sh-2);\n border-color: rgba(48, 84, 214, 0.35);\n }\n .nfp .lctag {\n align-self: flex-start;\n font-size: 12.5px;\n font-weight: 800;\n letter-spacing: 0.1em;\n color: var(--blue-deep);\n background: var(--blue-wash);\n border: 1px solid var(--blue-pale);\n border-radius: 999px;\n padding: 3px 16px;\n }\n .nfp .lcstep {\n display: grid;\n grid-template-columns: 34px 1fr;\n gap: 12px;\n align-items: start;\n }\n .nfp .lcno {\n font-family: ui-monospace, Menlo, monospace;\n font-size: 12px;\n font-weight: 700;\n color: var(--blue);\n letter-spacing: 0.06em;\n padding-top: 2px;\n }\n .nfp .lcstep b {\n display: block;\n font-size: 14.5px;\n margin-bottom: 3px;\n }\n .nfp .lcstep p {\n margin: 0;\n font-size: 12.5px;\n color: var(--ink-soft);\n line-height: 1.75;\n }\n\n /* AI ã¯ã¼ã¯ããã¼ */\n .nfp .wf {\n margin-top: 34px;\n border: 1px solid rgba(48, 84, 214, 0.28);\n border-radius: 14px;\n background: linear-gradient(180deg, var(--blue-wash), #fff 55%);\n padding: 36px 38px 32px;\n box-shadow: var(--sh-1);\n }\n @media (max-width: 720px) {\n .nfp .wf {\n padding: 26px 22px;\n }\n }\n .nfp .wfsteps {\n display: grid;\n grid-template-columns: 1fr 30px 1fr 30px 1fr;\n gap: 8px;\n align-items: stretch;\n }\n @media (max-width: 880px) {\n .nfp .wfsteps {\n grid-template-columns: 1fr;\n }\n }\n .nfp .wfstep {\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 10px;\n padding: 20px 22px 18px;\n box-shadow: var(--sh-1);\n transition:\n transform 0.35s var(--ease),\n border-color 0.35s;\n }\n .nfp .wfstep:hover {\n transform: translateY(-3px);\n border-color: rgba(48, 84, 214, 0.4);\n }\n .nfp .wfno {\n display: inline-block;\n font-family: ui-monospace, Menlo, monospace;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.1em;\n color: #fff;\n background: var(--blue);\n border-radius: 3px;\n padding: 2px 9px;\n margin-bottom: 10px;\n }\n .nfp .wfstep b {\n display: block;\n font-size: 15.5px;\n margin-bottom: 5px;\n }\n .nfp .wfstep p {\n margin: 0;\n font-size: 12.5px;\n color: var(--ink-soft);\n line-height: 1.8;\n }\n .nfp .wfarr {\n display: grid;\n place-items: center;\n color: var(--axis);\n font-size: 17px;\n font-weight: 700;\n }\n @media (max-width: 880px) {\n .nfp .wfarr {\n transform: rotate(90deg);\n padding: 4px 0;\n }\n }\n .nfp .wfnotes {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n margin-top: 26px;\n }\n @media (max-width: 880px) {\n .nfp .wfnotes {\n grid-template-columns: 1fr;\n }\n }\n .nfp .wfnote {\n border-top: 2px solid var(--blue-pale);\n padding-top: 14px;\n }\n .nfp .wfnote b {\n display: block;\n font-size: 13.5px;\n margin-bottom: 5px;\n }\n .nfp .wfnote p {\n margin: 0;\n font-size: 12.5px;\n color: var(--ink-soft);\n line-height: 1.8;\n }\n\n /* æ¯è¼è¡¨ */\n .nfp .compare {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: 13.5px;\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 10px;\n overflow: hidden;\n box-shadow: var(--sh-1);\n min-width: 780px;\n }\n .nfp .compare th,\n .nfp .compare td {\n border-bottom: 1px solid var(--grid);\n padding: 14px 18px;\n text-align: left;\n vertical-align: top;\n }\n .nfp .compare tr:last-child th,\n .nfp .compare tr:last-child td {\n border-bottom: none;\n }\n .nfp .compare thead th {\n background: var(--ground);\n font-size: 12.5px;\n border-bottom: 2px solid var(--axis);\n }\n /* å·¡åGOã®åãè¡è¦åºãã®é£ï¼å·¦ç«¯ã®æ¬¡ï¼ã«ç½®ãã®ã§ãå·¦å³ã©ã¡ãã«ãåºåãç·ãå
¥ãã¦\n 1
1åã®ã¾ã¨ã¾ãã¨ãã¦è¦ããã */\n .nfp .compare .hl {\n background: var(--blue-wash);\n border-left: 1px solid var(--blue-pale);\n border-right: 1px solid var(--blue-pale);\n }\n .nfp .compare thead .hl {\n background: var(--blue-pale);\n color: var(--blue-deep);\n }\n .nfp .compare .hl b {\n color: var(--blue-deep);\n }\n .nfp .tblscroll {\n overflow-x: auto;\n }\n\n /* FAQ */\n .nfp .faq details {\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 10px;\n margin-bottom: 12px;\n box-shadow: var(--sh-1);\n transition: border-color 0.25s;\n }\n .nfp .faq details[open] {\n border-color: rgba(48, 84, 214, 0.35);\n }\n .nfp .faq summary {\n cursor: pointer;\n padding: 18px 52px 18px 22px;\n font-weight: 700;\n font-size: 14.5px;\n list-style: none;\n display: flex;\n gap: 14px;\n align-items: baseline;\n position: relative;\n }\n .nfp .faq summary::-webkit-details-marker {\n display: none;\n }\n .nfp .faq summary::before {\n content: 'Q';\n color: var(--blue);\n font-family: ui-monospace, Menlo, monospace;\n font-weight: 700;\n }\n .nfp .faq summary::after {\n content: '';\n position: absolute;\n right: 22px;\n top: 50%;\n width: 9px;\n height: 9px;\n border-right: 2px solid var(--ink-faint);\n border-bottom: 2px solid var(--ink-faint);\n transform: translateY(-70%) rotate(45deg);\n transition: transform 0.3s var(--ease);\n }\n .nfp .faq details[open] summary::after {\n transform: translateY(-30%) rotate(225deg);\n }\n .nfp .faq details[open] summary {\n border-bottom: 1px solid var(--grid);\n }\n .nfp .faq .a {\n padding: 16px 22px;\n font-size: 13.5px;\n color: var(--ink-soft);\n display: flex;\n gap: 14px;\n }\n .nfp .faq .a::before {\n content: 'A';\n color: var(--ink-faint);\n font-family: ui-monospace, Menlo, monospace;\n font-weight: 700;\n }\n\n /* å°å
¥ã®æµã */\n .nfp .flow3 {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 20px;\n }\n @media (max-width: 780px) {\n .nfp .flow3 {\n grid-template-columns: 1fr;\n }\n }\n .nfp .flow4 {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 18px;\n }\n @media (max-width: 880px) {\n .nfp .flow4 {\n grid-template-columns: 1fr 1fr;\n }\n }\n @media (max-width: 560px) {\n .nfp .flow4 {\n grid-template-columns: 1fr;\n }\n }\n .nfp .flowbox {\n background: #fff;\n border: 1px solid var(--grid);\n border-radius: 10px;\n padding: 24px 24px 20px;\n text-align: center;\n box-shadow: var(--sh-1);\n transition:\n transform 0.35s var(--ease),\n box-shadow 0.35s var(--ease);\n }\n .nfp .flowbox:hover {\n transform: translateY(-4px);\n box-shadow: var(--sh-2);\n }\n .nfp .flowbox .fno {\n font-family: ui-monospace, Menlo, monospace;\n color: var(--blue);\n font-weight: 700;\n font-size: 12px;\n letter-spacing: 0.14em;\n }\n .nfp .flowbox h3 {\n font-size: 16px;\n margin: 8px 0 6px;\n }\n .nfp .flowbox p {\n font-size: 12.5px;\n color: var(--ink-soft);\n margin: 0;\n }\n\n /* é¢é£ãããã¯ãã¸ã®å°ç· */\n .nfp .related {\n margin-top: 40px;\n border: 1px solid var(--blue-pale);\n background: var(--blue-wash);\n border-radius: 12px;\n padding: 24px 28px;\n }\n .nfp .related p {\n margin: 0;\n font-size: 13.5px;\n color: var(--ink-soft);\n line-height: 1.9;\n }\n .nfp .related a {\n color: var(--blue-deep);\n font-weight: 700;\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n\n /* ç· ãã® CTA */\n .nfp .closing {\n background: linear-gradient(150deg, #17233e, #101828 55%, #0f1e3d);\n color: #fff;\n position: relative;\n overflow: hidden;\n }\n .nfp .closing::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);\n background-size: 56px 56px;\n mask-image: radial-gradient(720px 420px at 50% 0%, #000, transparent 75%);\n -webkit-mask-image: radial-gradient(720px 420px at 50% 0%, #000, transparent 75%);\n }\n .nfp .closing .wrap {\n position: relative;\n text-align: center;\n }\n .nfp .closing h2 {\n color: #fff;\n }\n .nfp .closing .lead {\n color: #b9c5d6;\n margin: 0 auto 34px;\n }
1\n .nfp .closing .btn.pri {\n border-color: #fff;\n background: #fff;\n color: var(--ink);\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n }\n .nfp .closing .btn.pri:hover {\n background: #e9eefb;\n border-color: #e9eefb;\n color: var(--ink);\n }\n\n /* è¦ç´ã»ããªã·ã¼ã¸ã®å°ç·ãç· ãã® CTA ã®ä¸ã«ç½®ãç´°ã帯 */\n .nfp .plegal {\n background: var(--ground);\n border-top: 1px solid var(--grid);\n padding: 22px 0;\n }\n .nfp .plegal .wrap {\n display: flex;\n flex-wrap: wrap;\n gap: 12px 28px;\n justify-content: center;\n }\n .nfp .plegal a {\n font-size: 13px;\n color: var(--ink-soft);\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n .nfp .plegal a:hover {\n color: var(--blue-deep);\n }\n\n /* ã¹ããã¹ã©ã¤ãã·ã§ã¼ */\n .nfp .slideshow {\n position: relative;\n }\n .nfp .phone {\n width: min(272px, 74vw);\n margin: 0 auto;\n background: #0f1524;\n border-radius: 34px;\n padding: 10px;\n box-shadow:\n 0 2px 3px rgba(22, 32, 46, 0.2),\n 0 24px 60px rgba(27, 47, 110, 0.3),\n 0 8px 20px rgba(27, 47, 110, 0.16);\n animation: nfpFloat 7s ease-in-out infinite;\n }\n /*\n * çãç»é¢ã§ã¯æµ®éã¢ãã¡ã¼ã·ã§ã³ãæ¢ãããããèªä½ã transform ãªã®ã§ã\n * ã¹ã©ã¤ãã®åãæ¿ãï¼åãã transformï¼ã¨éãªãã¿ã¤ãã³ã°ã§åæãå´©ãã\n * å¼ãéã«ãªãããï¼æµ®éã®1å¨æ 7.0s ã¨ã3æç®ã«åãæ¿ãã 7.2s ãã»ã¼ä¸è´ããï¼ã\n * å°ããç»é¢ã§ã¯åãã®å¹æãèãã®ã§ãæ¶ããä¸å
·åã®è½ãå
ã«æãã§ããã\n */\n @media (max-width: 900px) {\n .nfp .ph
1one {\n animation: none;\n }\n }\n @keyframes nfpFloat {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-9px);\n }\n }\n /*\n * ã¹ãã㧠STEP 2â3ã3â4 ã«åãæ¿ããã¨ä¸èº«ï¼ã¨ãã«ãã¬ã¼ã ãã¨ï¼ãæ¶ãããã¨ãã\n * å ±åã¸ã®å¯¾å¦ãborder-radius + overflow: hidden ã®è¦ç´ ã®ä¸ã§åã transform ã§\n * åããã¨ãiOS Safari ã§ã¯åãæãã®ç©å½¢ãæ´æ°ããããå
ã®ä½ç½®ããå¤ã«åºãå\n * ï¼ï¼3æç®ä»¥éï¼ãæç»ãããªããªããã¨ãããã1ã»2æç®ã ãç¡äºã§3æç®ããæ¶ããã\n * ã¨ããçç¶ã¨ãä¸è´ããã\n * 対çã¯2ã¤éãã¦ãã:\n * - translateZ(0) ã§ãã®è¦ç´ èªèº«ã«åæã¬ã¤ã¤ã¼ãæãããåãæãã追å¾ããã\n * - -webkit-mask-image ã§è§ä¸¸ã®ã¯ãªããã mask å´ã«ä»»ããï¼iOS ã®å®çªã®åé¿çï¼\n * ä½µã㦠.slides å´ã«ã will-change ãç½®ããåãæ¿ãã®ãã³ã«ã¬ã¤ã¤ã¼ã\n * ä½ãç´ãããªãããã«ãã¦ããã\n */\n .nfp .phone .screen {\n border-radius: 25px;\n overflow: hidden;\n position: relative;\n background: #fff;\n transform: translateZ(0);\n -webkit-mask-image: -webkit-radial-gradient(#fff, #000);\n mask-image: radial-gradient(#fff, #000);\n }\n .nfp .slides {\n display: flex;\n transition: transform 0.6s var(--ease);\n will-change: transform;\n }\n .nfp .slide {\n min-width: 100%;\n }\n /* å®æ©ã¹ã¯ãªã¼ã³ã·ã§ããï¼å
1206 \xd7 2622 ãé·è¾º 1600 ã«ç¸®å°ï¼ã\n æ¯çãåºå®ãã¦èªã¿è¾¼ã¿æã®ã¬ã¿ã¤ããé²ãã\n ã¹ã¯ã·ã§ã«ã¹ãã¼ã¿ã¹ãã¼ãå
¥ã£ã¦ããã®ã§ããããã®ãªã¼ãã¼ã¬ã¤ã¯éããªãã */\n .nfp .slide img {\n display: block;\n width: 100%;\n height: auto;\n aspect-ratio: 736 / 1600;\n }\n .nfp .slide-caption {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 20px;\n justify-content: center;\n font-size: 13.5px;\n font-weight: 700;\n }\n .nfp .slide-caption .stepno {\n font-family: ui-monospace, Menlo, monospace;\n font-size: 11px;\n background: var(--blue);\n color: #fff;\n border-radius: 3px;\n padding: 2px 9px;\n box-shadow: 0 3px 10px rgba(48, 84, 214, 0.3);\n }\n .nfp .dots {\n display: flex;\n gap: 8px;\n justify-content: center;\n margin-top: 14px;\n }\n .nfp .dots button {\n width: 8px;\n height: 8px;\n border-radius: 999px;\n border: none;\n cursor: pointer;\n background: var(--axis);\n padding: 0;\n transition:\n width 0.35s var(--ease),\n background 0.35s;\n }\n .nfp .dots button.on {\n background: var(--blue);\n width: 26px;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .nfp .slides,\n .nfp .rv {\n transition: none;\n }\n .nfp .rv {\n opacity: 1;\n transform: none;\n }
1\n .nfp .phone {\n animation: none;\n }\n .nfp .phero.dwg .dwgscan {\n display: none;\n }\n .nfp .phero.dwg .dwglayer .det {\n opacity: 0.4;\n animation: none !important;\n }\n .nfp .pheromap .proom {\n opacity: 0.2;\n stroke-dashoffset: 0;\n animation: none !important;\n }\n .nfp .pheromap .pping {\n display: none;\n }\n .nfp .pheromap .proute {\n stroke-dashoffset: 0;\n animation: none !important;\n }\n .nfp .pheromap .ppin {\n opacity: 1;\n animation: none !important;\n }\n .nfp .pheromap .pwalk {\n display: none;\n }\n }\n"]);return t=function(){return n},n}let i=(0,p.iv)(t());e.Z=()=>(0,a.jsx)(p.xB,{styles:i})},9123:function(n,e,r){var o=r(7294);e.Z=()=>{(0,o.useEffect)(()=>{let n=new Set(document.querySelectorAll(".nfp .rv"));if(0===n.size)return;let e=e=>{e.classList.add("in"),n.delete(e)};if("function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches){n.forEach(e);return}let r=!1,o=()=>{r=!1;let o=window.innerHeight-40;n.forEach(n=>{n.getBoundingClientRect().top<o&&e(n)}),0===n.size&&(window.removeEventListener("scroll",a),window.removeEventListener("resize",a))},a=()=>{r||(r=!0,requestAnimationFrame(o))};return a(),window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a)}},[])}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.