*{box-sizing:border-box}html{scroll-behavior:smooth}body.product-page{margin:0;background:#f7f7f4;color:#202e46;font-family:'Noto Sans JP',sans-serif!important}body.product-page :is(h1,h2,h3,h4,h5,p,a,span,li,strong,td,th,div){font-family:'Noto Sans JP',sans-serif}a{text-decoration:none;color:inherit}.product-hero{height:900px;position:relative;overflow:hidden;background:#020916;color:#f7fbff;isolation:isolate}.hero-art{position:absolute;inset:82px 0 0;z-index:-4;background:var(--hero) center/cover}.hero-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#020916 0%,#020916ed 24%,#02091677 48%,transparent 74%)}.organic{position:absolute;inset:0;z-index:-2;background:url('../fv-unified/organic-texture.svg') center/100% 100%;opacity:.6}.hero-art:after{content:'';position:absolute;left:0;top:0;width:300px;height:150px;background:linear-gradient(#020916 20%,transparent)}.site-nav{height:82px;position:relative;display:flex;align-items:center;justify-content:space-between;margin:0 4%;z-index:5}.wm{width:132px;height:66px}.site-nav nav{display:flex;gap:34px}.site-nav nav a{display:flex;flex-direction:column;text-align:center;gap:3px}.site-nav .en{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.08em}.site-nav .ja{font-size:9px;opacity:.75}.site-nav .menu{display:none}.hero-copy{position:absolute;left:7%;top:228px;max-width:700px}.product-brand{display:flex;gap:21px;align-items:center}.product-brand svg{width:126px;height:31px}.product-brand span{font:20px Montserrat,sans-serif!important;letter-spacing:.1em}.product-en{font:9px Montserrat,sans-serif!important;letter-spacing:.14em;opacity:.7;margin:16px 0 30px}.hero-eyebrow{font-size:12px;letter-spacing:.06em;margin:0 0 17px;color:#c4d4e7}.hero-copy h1{font-size:53px;line-height:1.55;font-weight:400;letter-spacing:.02em;margin:0 0 26px}.hero-lead{font-size:13px;line-height:2.1;font-weight:400;letter-spacing:.01em;margin:0 0 29px}.hero-actions{display:flex;gap:14px}.pill{border-radius:60px;display:inline-flex;align-items:center;justify-content:space-between;gap:40px;padding:15px 25px;font-size:13px;background:#f4f7fb;color:#183052;min-width:168px}.pill span{font-size:23px;line-height:1}.pill.secondary{background:transparent;color:white;border:1px solid #ffffff66}.hero-bottom{position:absolute;bottom:26px;left:5%;right:5%;display:flex;justify-content:space-between}.hero-bottom span{font:9px Montserrat,sans-serif;letter-spacing:.14em;color:#c4d4e7}
.lower{position:relative;border-radius:28px 28px 0 0;overflow:hidden;margin-top:-28px;background:#f7f7f4}.lower .legacy-section{padding:110px max(5vw,24px)!important;background:#f7f7f4!important;color:#202e46!important;position:relative;overflow:hidden}.lower .legacy-section:nth-child(even){background:#eaf0f3!important}.lower .legacy-section:nth-child(4n){background:#132943!important;color:#f3f6fa!important}.lower .legacy-section:nth-child(4n):before{content:'';position:absolute;inset:0;background:url('../fv-unified/organic-texture.svg') center/cover;opacity:.25;pointer-events:none}.lower .legacy-section>div{position:relative;z-index:1;max-width:1200px;margin-left:auto;margin-right:auto}.lower :is(h2,h3,h4){font-weight:400!important;font-family:'Noto Sans JP',sans-serif!important;color:inherit!important}.lower h2{font-size:35px!important;line-height:1.65!important;letter-spacing:.025em!important}.lower h3{font-size:21px!important;line-height:1.7!important}.lower h4{font-size:17px!important}.lower p{font-size:14px!important;line-height:2.05!important;font-weight:400!important;color:inherit!important}.lower strong{font-weight:500!important}.lower header{background:none}.lower :is(article,.info-card){border-radius:10px!important;box-shadow:none!important;border:1px solid #cbd5df!important;background:#ffffff85!important;color:#202e46!important}.lower .legacy-section:nth-child(4n) :is(article,.info-card){background:#ffffff0d!important;border-color:#ffffff26!important;color:#f4f7fa!important}.lower [class*='text-[#3e61ce]'],.lower [class*='text-[#6d98f7]']{color:#5276a3!important}.lower [class*='font-black'],.lower [class*='font-bold']{font-weight:400!important}.lower [class*='bg-[#3e61ce]'],.lower [class*='bg-[#0a1326]'],.lower [class*='bg-[#102a54]']{background:#263f62!important}.lower .pointer-events-none{display:none!important}.lower img{border-radius:8px}.lower .section-label{font:11px Montserrat,sans-serif!important;letter-spacing:.16em;color:#5276a3}.lower .section-head{max-width:920px!important;margin:0 auto 52px!important}.lower .section-desc{max-width:820px;margin:24px auto!important}.lower .hero{display:none}.contact-block{background:#11263e;color:#eef4fa;padding:100px 8%;display:flex;align-items:center;justify-content:space-between;gap:60px}.contact-block h2{font-size:38px;font-weight:400;margin:16px 0 28px}.contact-block p{font-size:14px;line-height:2}.contact-block .section-label{font:12px Montserrat,sans-serif;letter-spacing:.1em}footer{padding:38px 8%;display:flex;justify-content:space-between;background:#091a2c;color:#b8c9dd;font-size:11px}.skill-node .section{max-width:none!important;margin:0!important}.skill-node .problem-grid,.skill-node .output-grid,.skill-node .value-grid{max-width:1200px}.skill-node .concept-panel,.skill-node .how-layout{max-width:1200px}.skill-node .cta-section{max-width:none;margin:0;background:#122b47!important;color:#f7fbff!important}.skill-node .cta-section .btn{border-radius:50px}.skill-node .hero-copy{transform:none}.skill-node .section-company .section-head h2{color:inherit}.skill-node .product-hero{max-width:none;margin:0;border-radius:0}.skill-node main{max-width:none;padding:0}.skill-node .pill{font-weight:400}.skill-node .hero-copy h1{font-size:49px}
@media(max-width:768px){.product-hero{height:880px}.site-nav{height:68px}.site-nav nav{display:none}.wm{width:108px}.hero-copy{top:146px;left:7%;right:7%;max-width:none}.hero-copy h1,.skill-node .hero-copy h1{font-size:32px;line-height:1.55}.hero-eyebrow{font-size:10px}.hero-lead{font-size:11px}.hero-lead br{display:none}.hero-art{inset:280px -210px 0 -330px}.hero-shade{background:linear-gradient(#020916 25%,#020916bb 57%,transparent)}.product-brand span{font-size:16px!important}.product-brand svg{width:110px}.hero-actions{flex-wrap:wrap;gap:10px}.pill{font-size:11px;padding:12px 18px;min-width:145px;gap:20px}.lower .legacy-section{padding:70px 24px!important}.lower h2{font-size:25px!important}.lower h3{font-size:19px!important}.lower p{font-size:13px!important}.contact-block{display:block;padding:70px 24px}.contact-block .pill{margin-top:30px}footer{display:block;padding:32px 24px}footer span{display:block;margin-bottom:16px}.skill-node .hero-copy{width:auto}.skill-node .how-layout,.skill-node .concept-panel{display:block}.skill-node .problem-grid,.skill-node .value-grid,.skill-node .output-grid{grid-template-columns:1fr}}
.lower .legacy-section:nth-child(4n) [class*='text-[#']{color:#e7eff8!important}.lower .legacy-section:nth-child(4n) [class*='bg-white']{color:#203450!important}.lower .legacy-section:nth-child(4n) img[alt='ゾスAI']{filter:brightness(0) invert(1)}
.skill-node .cta-section .cta-panel{background:#1d3854!important;border:1px solid #ffffff26!important;color:#f7fbff!important}.skill-node .cta-section :is(h2,p){color:#f7fbff!important}.skill-node .cta-section .cta-box{background:#1d3854!important;color:#f7fbff!important}.lower .legacy-section:nth-child(6) [class*='text-white']{color:#405674!important}
.skill-node .cta-section .cta-shell{background:#1d3854!important;border:1px solid #ffffff26!important;color:#f7fbff!important}
.signal li.signal-added{background:#3e61ce!important;box-shadow:0 10px 24px rgba(62,97,206,.32)!important;border:1px solid #3e61ce}.signal li.signal-added :is(span,svg){color:#fff!important}.signal li.signal-added:after{content:'AI\3067\5224\65AD\53EF\80FD';position:absolute;top:-9px;right:10px;padding:2px 9px;border-radius:999px;background:#fff;color:#3e61ce;font:500 10px/1.6 'Noto Sans JP',sans-serif;letter-spacing:.08em;box-shadow:0 2px 8px rgba(19,41,67,.15)}
.signal img.signal-ai-inline{display:inline-block;height:1.05em;width:auto;margin:0 .2em 0 .05em;vertical-align:-.14em;border-radius:0;filter:none!important}
.signal img.signal-ai-mark{border-radius:0;filter:none!important;object-fit:contain}
.signal .lower article.signal-you{background:#3e61ce!important;border-color:#3e61ce!important;color:#fff!important;box-shadow:0 12px 28px rgba(62,97,206,.28)!important}.signal .lower article.signal-you :is(h4,p,span){color:#fff!important}.signal .lower article.signal-you p{opacity:.88}.signal .lower article.signal-you span[class*='tracking-']{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#ffffff26;font:500 11px/1.6 'Noto Sans JP',sans-serif!important;letter-spacing:.08em}.signal svg.signal-person{width:14px;height:14px;color:#fff}.signal .lower article.signal-you svg.signal-person{width:13px;height:13px}
:is(.signal,.ats,.skill-node) .signal-closing{position:relative;overflow:hidden;background:#031339;color:#f4f7ff;padding:112px 0}:is(.signal,.ats,.skill-node) .signal-closing:before{content:'';position:absolute;width:650px;height:650px;right:-200px;top:-140px;border:1px solid rgba(109,152,247,.35);border-radius:50%;box-shadow:0 0 90px rgba(62,97,206,.24),inset 0 0 90px rgba(62,97,206,.2);pointer-events:none}:is(.signal,.ats,.skill-node) .signal-closing-inner{position:relative;width:min(1180px,calc(100% - 80px));margin:0 auto}:is(.signal,.ats,.skill-node) .signal-closing-eyebrow{font:11px/1.5 Montserrat,sans-serif;letter-spacing:.18em;color:#d3defc;margin:0}:is(.signal,.ats,.skill-node) .signal-closing h2{margin:30px 0 42px;font-family:'Noto Sans JP',sans-serif;font-size:clamp(30px,3.7vw,54px);font-weight:400;line-height:1.5;letter-spacing:.035em;color:#f4f7ff}:is(.signal,.ats,.skill-node) .signal-closing-actions{display:flex;align-items:center;gap:42px;flex-wrap:wrap}:is(.signal,.ats,.skill-node) .signal-closing-button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:56px;border-radius:40px;padding:14px 24px;background:#f1f5ff;color:#183468;font-size:13px;line-height:1.6;text-decoration:none;transition:transform .2s}:is(.signal,.ats,.skill-node) .signal-closing-button:hover{transform:translateY(-2px)}:is(.signal,.ats,.skill-node) .signal-closing-button span{font:300 22px/1 Arial,sans-serif}:is(.signal,.ats,.skill-node) .signal-closing-download{font-size:12px;color:#f4f7ff;border-bottom:1px solid #fff7;padding:14px 0;display:inline-flex;gap:32px;text-decoration:none}:is(.signal,.ats,.skill-node) .signal-closing-download:hover{color:#d3defc}
:is(.signal,.ats,.skill-node) .zc-page-end{position:relative;padding-top:clamp(140px,14vw,220px);background:linear-gradient(180deg,#f7f7f4 0,#dfe2ea 18%,#8d96b5 34%,#2f3a6c 50%,#18205a 62%,#0f1236 84%,#0a0c24 100%)}:is(.signal,.ats,.skill-node) .zc-page-end footer.zc-footer{border-top-color:transparent}:is(.signal,.ats,.skill-node) footer.zc-footer{display:block;color:#8891c4;background:none;border-top:1px solid rgba(255,255,255,.08);padding:3.2rem 0 2rem;font-size:inherit;position:relative}:is(.signal,.ats,.skill-node) .zc-footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem;width:min(100% - 2.5rem,1180px);margin-inline:auto}:is(.signal,.ats,.skill-node) .zc-footer-logo{color:#f3f3f1;display:inline-flex}:is(.signal,.ats,.skill-node) .zc-footer-logo .wm{width:132px;height:auto;display:block}:is(.signal,.ats,.skill-node) .zc-footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:1.2rem}:is(.signal,.ats,.skill-node) .zc-footer-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1.6rem;margin:0;padding:0;list-style:none}:is(.signal,.ats,.skill-node) .zc-footer-nav a,:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-top{letter-spacing:.08em;color:inherit;font:500 .82rem Montserrat,system-ui,sans-serif;text-decoration:none;transition:color .3s}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-top{cursor:default}:is(.signal,.ats,.skill-node) .zc-footer-nav a:hover,:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-drop:hover .fn-top,:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-drop:focus-within .fn-top{color:#d3defc}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-drop{position:relative}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-pop{position:absolute;bottom:100%;left:50%;z-index:20;opacity:0;visibility:hidden;pointer-events:none;padding-bottom:12px;transform:translate(-50%,6px);transition:opacity .25s,transform .25s,visibility .25s}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-drop:hover .fn-pop,:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-drop:focus-within .fn-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%)}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-list{display:flex;flex-direction:column;gap:.1rem;margin:0;padding:.45rem;list-style:none;background:rgba(20,22,40,.97);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-list a{display:flex;align-items:center;gap:.55rem;white-space:nowrap;color:#e6e8f4;letter-spacing:.04em;border-radius:8px;padding:.45rem .7rem;font:400 .8rem 'Noto Sans JP',sans-serif}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-list a:hover{background:rgba(255,255,255,.07);color:#d3defc}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-list img{flex:0 0 auto;width:18px;height:18px;border-radius:0}:is(.signal,.ats,.skill-node) .zc-footer-sns{display:flex;align-items:center;gap:.9rem;margin:0;padding:0;list-style:none}:is(.signal,.ats,.skill-node) .zc-footer-sns a{display:grid;place-items:center;width:34px;height:34px;color:rgba(235,238,250,.75);border:1px solid rgba(255,255,255,.22);border-radius:50%;transition:.3s}:is(.signal,.ats,.skill-node) .zc-footer-sns a:hover{border-color:#d3defc;color:#d3defc}:is(.signal,.ats,.skill-node) .zc-footer-sns svg{width:15px;height:15px;fill:currentColor}:is(.signal,.ats,.skill-node) .zc-copy{text-align:center;letter-spacing:.08em;color:#5a639e;margin:2.4rem 0 0;font:400 .72rem Montserrat,system-ui,sans-serif}
@media(max-width:900px){:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-drop,:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-pop,:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-list{display:contents}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-pop{visibility:visible;opacity:1;pointer-events:auto}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-top,:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-list img{display:none}:is(.signal,.ats,.skill-node) .zc-footer-nav .fn-list a{display:inline;color:inherit;background:none;padding:0;font:500 .82rem Montserrat,'Noto Sans JP',sans-serif}:is(.signal,.ats,.skill-node) .zc-footer-inner{flex-direction:column;align-items:center;text-align:center;gap:1.6rem}:is(.signal,.ats,.skill-node) .zc-footer-right{align-items:center}:is(.signal,.ats,.skill-node) .zc-footer-nav,:is(.signal,.ats,.skill-node) .zc-footer-sns{justify-content:center}}
@media(max-width:768px){:is(.signal,.ats,.skill-node) .signal-closing{padding:68px 0}:is(.signal,.ats,.skill-node) .signal-closing-inner{width:calc(100% - 48px)}:is(.signal,.ats,.skill-node) .signal-closing-eyebrow{font-size:9px}:is(.signal,.ats,.skill-node) .signal-closing h2{font-size:30px}:is(.signal,.ats,.skill-node) .signal-closing-actions{gap:28px}:is(.signal,.ats,.skill-node) .signal-closing-button{min-height:52px;font-size:12px;gap:24px}:is(.signal,.ats,.skill-node) .signal-closing:before{right:-400px;opacity:.7}}
.signal .lower strong.signal-emphasis{color:#3e61ce!important;font-weight:500!important;background:linear-gradient(transparent 64%,#d3defc 64%);padding:0 2px}
.signal .lower article.signal-reason{padding:28px}.signal .lower article.signal-reason .rounded-\[20px\]{border-radius:14px}@media(min-width:768px){.signal .lower article.signal-reason{padding:40px}}@media(max-width:640px){.signal .lower article.signal-reason{padding:16px 16px 28px}}
.signal .signal-seq [data-seq]{opacity:0}.signal .signal-seq.is-in [data-seq]{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0s)}.signal .signal-seq [data-seq=item]{transform:translateY(16px)}.signal .signal-seq [data-seq=arrow]{transform:translateX(-8px)}.signal .signal-seq.lg\:hidden [data-seq=arrow]{transform:translateY(-8px)}.signal .signal-seq.is-in [data-seq]{opacity:1}.signal .signal-seq.is-in :is([data-seq=item],[data-seq=arrow]){transform:none}
.signal .lower .legacy-section:nth-child(4n) :is(span,strong)[style*="color: rgb(62, 97, 206)"]{color:#9ab8ff!important}
.signal .signal-cross>article{opacity:0}.signal .signal-cross.is-in>article{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.signal .signal-cross>article:first-child{transform:translateX(-56px)}.signal .signal-cross>article:last-child{transform:translateX(56px)}.signal .signal-cross .signal-cross-mark{position:relative;opacity:0;transform:scale(.2) rotate(-135deg)}.signal .signal-cross.is-in .signal-cross-mark{transition:opacity .4s ease .65s,transform .7s cubic-bezier(.34,1.56,.64,1) .65s}.signal .signal-cross .signal-cross-mark:before,.signal .signal-cross .signal-cross-mark:after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(154,184,255,.7);opacity:0;pointer-events:none}.signal .signal-cross.is-in>article{opacity:1;transform:none}.signal .signal-cross.is-in .signal-cross-mark{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(62,97,206,.5),0 0 28px rgba(109,152,247,.55)}.signal .signal-cross.is-in .signal-cross-mark:before{animation:signal-cross-ring 1.2s ease-out 1.05s}.signal .signal-cross.is-in .signal-cross-mark:after{animation:signal-cross-ring 1.2s ease-out 1.35s}@keyframes signal-cross-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}@media(max-width:767px){.signal .signal-cross:not(.is-in)>article:first-child{transform:translateY(-36px)}.signal .signal-cross:not(.is-in)>article:last-child{transform:translateY(36px)}}
/* ゾスキャリ/ゾスAI と同じ「資料ダウンロード」「その他サービス」(ZC 本体から移植) */
:is(.signal,.ats,.skill-node) .signal-tail{--svc:#3E61CE;--svc-2:#4577F7;--svc-ink:#183468;--svc-on-dark:#F4F7FF;--svc-soft:#F1F5FF;--text-lg:1.125rem;--text-xl:1.25rem;--font-weight-medium:500;background:#f7f7f4;color:var(--svc-ink)}
:is(.signal,.ats,.skill-node) #whitepaper .svc-resource-grid{ grid-template-columns: 1fr; }
:is(.signal,.ats,.skill-node) .svc-resource-deck{ position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 48px; padding: 60px; background: radial-gradient(at 100% 0%, rgba(174, 121, 107, 0.44), transparent 60%), linear-gradient(rgb(20, 25, 73), rgb(27, 34, 96) 46%, rgb(15, 18, 54)); color: rgb(231, 234, 247); }
:is(.signal,.ats,.skill-node) .svc-deck-copy .svc-eyebrow{ color: rgb(255, 217, 174); }
:is(.signal,.ats,.skill-node) .svc-deck-copy h3{ font-size: 32px; line-height: 1.6; color: rgb(255, 255, 255); font-weight: 400; margin: 22px 0px !important; }
:is(.signal,.ats,.skill-node) .svc-deck-copy > p{ font-size: 14px; line-height: 2; color: rgb(170, 178, 220); }
:is(.signal,.ats,.skill-node) .svc-deck-download{ display: inline-flex; align-items: center; gap: 15px; margin-top: 28px; padding: 18px 22px; border-radius: 14px; background: linear-gradient(115deg, rgb(217, 118, 92), rgb(226, 148, 114)); color: rgb(255, 255, 255); }
:is(.signal,.ats,.skill-node) .svc-deck-download > span:first-child{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.19); flex-shrink: 0; }
:is(.signal,.ats,.skill-node) .svc-deck-download strong{ font-size: 13px; display: block; }
:is(.signal,.ats,.skill-node) .svc-deck-download small{ display: block; font-size: 10px; margin-top: 6px; }
:is(.signal,.ats,.skill-node) .svc-deck-slides{ display: block; position: relative; aspect-ratio: 16 / 11; min-width: 0px; }
:is(.signal,.ats,.skill-node) .svc-deck-slides img{ position: absolute; width: 82%; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.733) 0px 30px 70px -30px; border: 1px solid rgba(255, 255, 255, 0.14); }
:is(.signal,.ats,.skill-node) .svc-deck-slide-1{ left: 0px; bottom: 0px; z-index: 3; }
:is(.signal,.ats,.skill-node) .svc-deck-slide-2{ left: 9%; bottom: 14%; z-index: 2; opacity: 0.9; }
:is(.signal,.ats,.skill-node) .svc-deck-slide-3{ left: 18%; bottom: 28%; z-index: 1; opacity: 0.75; }
:is(.signal,.ats,.skill-node) .svc-resource-grid > .is-pending{ max-width: 640px; width: 100%; }
@media (max-width: 900px){:is(.signal,.ats,.skill-node) .svc-resource-deck{ grid-template-columns: 1fr; padding: 36px; gap: 36px; }}
@media (max-width: 900px){:is(.signal,.ats,.skill-node) .svc-deck-slides{ width: 100%; max-width: 520px; margin: auto; }}
@media (max-width: 480px){:is(.signal,.ats,.skill-node) .svc-resource-deck{ padding: 28px 22px; }}
@media (max-width: 480px){:is(.signal,.ats,.skill-node) .svc-deck-copy h3{ font-size: 27px; }}
@media (max-width: 480px){:is(.signal,.ats,.skill-node) .svc-deck-download{ padding: 15px 12px; gap: 10px; }}
@media (max-width: 480px){:is(.signal,.ats,.skill-node) .svc-deck-download strong{ font-size: 11px; }}
:is(.signal,.ats,.skill-node) .zc-service .svc-lower *{ box-sizing: border-box; }
:is(.signal,.ats,.skill-node) .zc-service .svc-lower :where(h2,:is(.signal,.ats,.skill-node) h3,:is(.signal,.ats,.skill-node) h4,:is(.signal,.ats,.skill-node) h5,:is(.signal,.ats,.skill-node) p,:is(.signal,.ats,.skill-node) figure){ margin: 0px; }
:is(.signal,.ats,.skill-node) .zc-service .svc-lower a{ color: inherit; text-decoration: none; }
:is(.signal,.ats,.skill-node) .zc-service .svc-lower :is(a,:is(.signal,.ats,.skill-node) button,:is(.signal,.ats,.skill-node) summary,:is(.signal,.ats,.skill-node) [tabindex]):focus-visible{ outline: 2px solid var(--svc); outline-offset: 6px; }
:is(.signal,.ats,.skill-node) .zc-service .svc-lower [id]{ scroll-margin-top: 105px; }
:is(.signal,.ats,.skill-node) .svc-container{ width: calc(100% - 96px); max-width: 1200px; margin: auto; }
:is(.signal,.ats,.skill-node) .svc-section{ padding: 112px 0px; }
:is(.signal,.ats,.skill-node) .svc-eyebrow{ font: 11px / 1.5 Arial, sans-serif; letter-spacing: 0.18em; color: var(--svc); display: block; }
:is(.signal,.ats,.skill-node) .svc-heading{ max-width: 880px; margin-bottom: 48px; }
:is(.signal,.ats,.skill-node) .svc-lower h2{ font-size: clamp(30px, 3.3vw, 48px); font-weight: 400; line-height: 1.5; letter-spacing: 0.035em; text-wrap: pretty; }
:is(.signal,.ats,.skill-node) .svc-heading h2{ margin-top: 22px !important; }
:is(.signal,.ats,.skill-node) .svc-lead{ font-size: 16px; font-weight: 400; line-height: 2; letter-spacing: -0.01em; max-width: 760px; opacity: 0.82; margin-top: 26px !important; }
:is(.signal,.ats,.skill-node) .svc-other{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
:is(.signal,.ats,.skill-node) .svc-other-card{ position: relative; border-top: 1px solid rgb(222, 215, 205); border-bottom: 1px solid rgb(222, 215, 205); padding: 32px 50px 32px 0px; transition: background 0.2s; }
:is(.signal,.ats,.skill-node) .svc-other-card:hover{ background: var(--svc-soft); }
:is(.signal,.ats,.skill-node) .svc-other-card > img{ width: 150px; height: 44px; object-fit: contain; object-position: left center; }
:is(.signal,.ats,.skill-node) .svc-other-card p{ font-size: 13px; opacity: 0.76; margin-top: 20px !important; }
:is(.signal,.ats,.skill-node) .svc-other-card > span{ position: absolute; right: 16px; top: 38px; font: 30px Arial; }
@media (min-width: 1600px){:is(.signal,.ats,.skill-node) .svc-container{ max-width: 1280px; }}
@media (max-width: 1100px){:is(.signal,.ats,.skill-node) .svc-container{ width: calc(100% - 64px); }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-container{ width: calc(100% - 48px); }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-section{ padding: 68px 0px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-heading{ margin-bottom: 32px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-lower h2{ font-size: 29px; letter-spacing: 0.02em; line-height: 1.55; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-heading h2{ margin-top: 18px !important; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-eyebrow{ font-size: 9px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-lead{ font-size: 14px; line-height: 2; margin-top: 20px !important; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-other{ grid-template-columns: 1fr; gap: 0px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-other-card + .svc-other-card{ border-top: 0px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-other-card{ padding: 27px 36px 27px 0px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-other-card p{ font-size: 12px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-other-card > img{ width: 125px; }}
@media (prefers-reduced-motion: reduce){:is(.signal,.ats,.skill-node) .zc-service .svc-lower *{ scroll-behavior: auto !important; transition: none !important; }}
:is(.signal,.ats,.skill-node) .zc-service .svc-other-card > img{ width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 14px; }
:is(.signal,.ats,.skill-node) .zc-service .svc-other-card > h3{ display: inline-block; vertical-align: middle; font-size: 24px; font-weight: 500; letter-spacing: 0.025em; }
:is(.signal,.ats,.skill-node) .zc-service .svc-other-card > p{ margin-top: 22px !important; }
:is(.signal,.ats,.skill-node) .svc-lower .svc-heading-lockup h2{ font-size: clamp(30px, 4.6vw, 70px); font-weight: 400; line-height: 1.16; letter-spacing: -0.012em; text-wrap: balance; }
:is(.signal,.ats,.skill-node) .svc-heading-lockup .lk-big{ display: block; }
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-lower .svc-heading-lockup h2{ font-size: clamp(26px, 7.6vw, 40px); line-height: 1.2; }}
:is(.signal,.ats,.skill-node) .svc-other-logo{ display: block; height: 28px; width: 170px; mask: var(--logo) left center/contain no-repeat; background-color: currentcolor; }
:is(.signal,.ats,.skill-node) .svc-other-card .svc-other-logo{ color: var(--svc-ink); }
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-other-logo{ height: 24px; }}
:is(.signal,.ats,.skill-node) .svc-lower .svc-heading h2{ font-size: clamp(32px, 3.8vw, 55px); line-height: 1.45; letter-spacing: 0.015em; }
:is(.signal,.ats,.skill-node) .svc-lower .svc-lead{ font-size: 16px; line-height: 2.05; }
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-lower .svc-heading h2{ font-size: 30px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-lower .svc-lead,:is(.signal,.ats,.skill-node) .svc-lower .svc-editorial-copy,:is(.signal,.ats,.skill-node) .svc-lower .svc-card p{ font-size: 14px; }}
/* SIGNAL feature icons: soft 3D glass treatment shared with the illustrations above */
.signal .lower section.legacy-section:nth-of-type(6) article > div:first-child{
position:relative;
width:64px;
height:64px;
overflow:hidden;
border:1px solid rgba(255,255,255,.9);
border-radius:18px;
background:
radial-gradient(circle at 27% 20%,rgba(255,255,255,.98) 0 8%,rgba(255,255,255,0) 31%),
linear-gradient(145deg,#f8fbff 0%,#dceaff 48%,#9bc1ff 100%);
box-shadow:
inset 2px 2px 4px rgba(255,255,255,.92),
inset -4px -5px 10px rgba(56,112,220,.18),
0 10px 22px rgba(47,94,185,.16),
0 2px 4px rgba(35,76,158,.12);
}
.signal .lower section.legacy-section:nth-of-type(6) article > div:first-child:after{
content:'';
position:absolute;
inset:5px 7px auto 7px;
height:22px;
border-radius:13px;
background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));
pointer-events:none;
}
.signal .lower section.legacy-section:nth-of-type(6) article > div:first-child svg{
position:relative;
z-index:1;
width:28px;
height:28px;
color:#306fdb!important;
stroke-width:1.65;
filter:drop-shadow(0 2px 2px rgba(38,84,178,.2));
}
@media(max-width:640px){
.signal .lower section.legacy-section:nth-of-type(6) article > div:first-child{width:58px;height:58px;border-radius:16px}
.signal .lower section.legacy-section:nth-of-type(6) article > div:first-child svg{width:26px;height:26px}
}
:is(.signal,.ats,.skill-node) .svc-resource-grid{ display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 28px; }
:is(.signal,.ats,.skill-node) .svc-resource-card{ border: 1px solid color-mix(in srgb,var(--svc-ink),transparent 82%); background: var(--svc-soft); padding: 30px; display: grid; grid-template-columns: 130px minmax(0px, 1fr); align-items: center; gap: 30px; min-width: 0px; }
:is(.signal,.ats,.skill-node) .svc-document-cover{ aspect-ratio: 0.71 / 1; background: var(--svc-ink); color: var(--svc-on-dark); padding: 16px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 5px 5px color-mix(in srgb,var(--svc-ink),transparent 85%); }
:is(.signal,.ats,.skill-node) .svc-document-cover > span{ font: 15px / 1.4 Arial, sans-serif; letter-spacing: 0.08em; z-index: 1; }
:is(.signal,.ats,.skill-node) .svc-document-cover small{ font: 7px Arial, sans-serif; letter-spacing: 0.1em; margin-top: auto; z-index: 1; }
:is(.signal,.ats,.skill-node) .svc-document-cover i{ position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1px solid var(--svc-2); left: 25%; top: 35%; box-shadow: 0 0 30px color-mix(in srgb,var(--svc-2),transparent 55%); }
:is(.signal,.ats,.skill-node) .svc-resource-card h3{ font-size: 24px; line-height: 1.6; font-weight: 400; margin: 15px 0px !important; }
:is(.signal,.ats,.skill-node) .svc-resource-card p{ font-size: 13px; line-height: 1.9; opacity: 0.75; }
:is(.signal,.ats,.skill-node) .svc-resource-card.is-pending{ background: transparent; }
:is(.signal,.ats,.skill-node) .svc-resource-card.is-pending .svc-document-cover{ opacity: 0.55; }
:is(.signal,.ats,.skill-node) .svc-pending-label{ display: inline-block; font-size: 11px; border: 1px solid color-mix(in srgb,var(--svc-ink),transparent 75%); border-radius: 30px; padding: 4px 16px; margin-top: 24px; opacity: 0.7; }
@media (max-width: 1100px){:is(.signal,.ats,.skill-node) .svc-resource-card{ grid-template-columns: 100px minmax(0px, 1fr); padding: 24px; gap: 20px; }}
@media (max-width: 1100px){:is(.signal,.ats,.skill-node) .svc-resource-card h3{ font-size: 20px; }}
@media (max-width: 1100px){:is(.signal,.ats,.skill-node) .svc-resource-card .svc-eyebrow{ font-size: 9px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-case-grid,:is(.signal,.ats,.skill-node) .svc-resource-grid{ grid-template-columns: 1fr; gap: 36px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-resource-card{ grid-template-columns: 90px minmax(0px, 1fr); padding: 20px; gap: 20px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-resource-card h3{ font-size: 20px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-resource-card p{ font-size: 12px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-document-cover{ padding: 12px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-document-cover > span{ font-size: 12px; }}
@media (max-width: 768px){:is(.signal,.ats,.skill-node) .svc-document-cover small{ font-size: 6px; }}
@media (max-width: 360px){:is(.signal,.ats,.skill-node) .svc-resource-card{ grid-template-columns: 1fr; }}
@media (max-width: 360px){:is(.signal,.ats,.skill-node) .svc-document-cover{ width: 95px; }}
@media (max-width: 360px){:is(.signal,.ats,.skill-node) .svc-resource-card h3{ font-size: 22px; }}
.signal .signal-hub .signal-hub-card{opacity:0}.signal .signal-hub.is-in .signal-hub-card{transition:opacity .6s ease,translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--seq)*.18s)}.signal .signal-hub .signal-hub-card:nth-child(1){translate:-28px -20px}.signal .signal-hub .signal-hub-card:nth-child(2){translate:28px -20px}.signal .signal-hub .signal-hub-card:nth-child(3){translate:-28px 20px}.signal .signal-hub .signal-hub-card:nth-child(4){translate:28px 20px}.signal .signal-hub .signal-hub-core{opacity:0;scale:.6}.signal .signal-hub.is-in .signal-hub-core{transition:opacity .45s ease 1s,scale .75s cubic-bezier(.34,1.56,.64,1) 1s}.signal .signal-hub.is-in .signal-hub-card{opacity:1;translate:0 0}.signal .signal-hub.is-in .signal-hub-core{opacity:1;scale:1}
.signal .signal-pile li.signal-added:after{transition:opacity .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}.signal .signal-pile li.signal-added:not(.is-stamped):after{opacity:0;transform:scale(.3) rotate(-12deg)}
.signal .signal-pile li[hidden]{display:none!important}
.signal .signal-pre{opacity:0}
.signal li.signal-step{padding-right:20px}.signal .signal-step-no{position:absolute;top:7px;right:9px;font:500 10px/1 Montserrat,sans-serif;letter-spacing:.1em;color:#3e61ce;opacity:.75}
.signal ul.signal-pile{align-content:start}
.signal .lower .signal-orb{box-shadow:0 14px 34px rgba(109,152,247,.18)!important}
.signal .lower .signal-actual{background:linear-gradient(180deg,#eef2fc 0%,#e1e8fb 55%,#d3defc 100%)!important;border-top:1px solid #d3defc}
.signal .signal-catch .signal-line{display:inline-block}.signal .signal-catch .signal-hl{background:linear-gradient(#9ab8ff,#9ab8ff) left 100%/100% 2px no-repeat;padding-bottom:2px}.signal .signal-catch.is-armed .signal-line{opacity:0;transform:translateY(18px)}.signal .signal-catch.is-armed.is-in .signal-line{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.signal .signal-catch.is-armed.is-in .signal-line:nth-of-type(2){transition-delay:.35s}.signal .lower .legacy-section .signal-catch.is-armed .signal-hl{color:#e7eff8!important;background-size:0% 2px}.signal .lower .legacy-section .signal-catch.is-armed.is-in .signal-hl{color:#9ab8ff!important;background-size:100% 2px;transition:color .5s ease 1.1s,background-size .6s cubic-bezier(.2,.7,.2,1) 1.1s}.signal .lower .legacy-section .signal-catch.is-armed.is-in .signal-line:nth-of-type(2) .signal-hl{transition-delay:1.5s}
.signal .signal-ai-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5}.signal .signal-ai-intro-group{display:inline-flex;align-items:center;gap:12px;transform-origin:center}.signal .signal-ai-intro-group img{display:block;border-radius:0;filter:none!important}.signal .signal-ai-intro-group img:first-child{width:44px;height:44px;border-radius:50%}.signal .signal-ai-intro-group img:last-child{height:34px;width:auto}@media(max-width:640px){.signal .signal-ai-intro-group img:first-child{width:36px;height:36px}.signal .signal-ai-intro-group img:last-child{height:28px}}
:is(.signal,.ats,.skill-node) .lower p.signal-en-label{font-family:Montserrat,sans-serif!important;font-weight:500!important;font-size:13px!important;letter-spacing:.14em!important;line-height:1.6!important}
/* ATS: candidate management screen presented in the shared Zoth AI laptop mockup style. */
.ats img[src$="ats-candidate-detail-BWOQOkmz.jpg"] {
content: url("assets/ats-management-laptop-mockup-v1.webp");
aspect-ratio: 3 / 2;
object-fit: contain;
position: relative;
z-index: 2;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: drop-shadow(18px 30px 22px rgba(16, 42, 84, 0.3));
transform: translateY(-8px) rotate(-1.2deg);
}
@media (min-width: 768px) {
.ats img[src$="ats-candidate-detail-BWOQOkmz.jpg"] {
width: 120% !important;
max-width: none;
margin-left: -10%;
}
}
.ats img[src$="ats-dashboard-DRNmu-28.jpg"] {
display: none !important;
}
.ats div:has(> .relative > img[src$="ats-candidate-detail-BWOQOkmz.jpg"]) {
opacity: 1 !important;
transform: none !important;
}
.ats div:has(> img[src$="ats-candidate-detail-BWOQOkmz.jpg"]) {
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
min-height: 370px;
padding: 28px 18px 42px;
overflow: hidden;
border: 1px solid rgba(171, 195, 235, 0.72);
border-radius: 22px;
background:
radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.96), transparent 35%),
radial-gradient(circle at 88% 82%, rgba(184, 213, 255, 0.78), transparent 42%),
linear-gradient(145deg, #e8f5ff 0%, #dceef5 54%, #dce7ff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 18px 38px rgba(31, 71, 126, 0.1);
}
.ats div:has(> img[src$="ats-candidate-detail-BWOQOkmz.jpg"])::before {
content: "";
position: absolute;
z-index: 5;
top: 7%;
right: -1%;
width: 52%;
aspect-ratio: 1431 / 900;
border: 4px solid rgba(255, 255, 255, 0.96);
border-radius: 14px;
background: #fff url("assets/ats-dashboard-DRNmu-28.jpg") center / cover no-repeat;
box-shadow: none;
transform: rotate(-1.2deg);
transform-origin: center center;
pointer-events: none;
}
.ats div:has(> img[src$="ats-candidate-detail-BWOQOkmz.jpg"])::after {
content: "";
position: absolute;
z-index: 1;
left: 16%;
right: 10%;
bottom: 16%;
height: 54px;
border-radius: 50%;
background: rgba(22, 49, 86, 0.36);
filter: blur(20px);
transform: rotate(-2deg) scaleX(0.94);
}
@media (max-width: 767px) {
.ats div:has(> img[src$="ats-candidate-detail-BWOQOkmz.jpg"]) {
min-height: 280px;
padding: 24px 10px 32px;
}
.ats img[src$="ats-candidate-detail-BWOQOkmz.jpg"] {
transform: translateY(-2px) rotate(-0.8deg);
}
.ats div:has(> img[src$="ats-candidate-detail-BWOQOkmz.jpg"])::before {
top: 8%;
right: -2%;
width: 56%;
border-width: 3px;
border-radius: 10px;
transform: rotate(-0.8deg);
}
}
.ats .lower .ats-marker{background:linear-gradient(transparent 62%,#d3defc 62%);padding:0 2px;text-shadow:0 2px 10px rgba(62,97,206,.22)}
/* ATS: AI scout phone with layered candidate search, ranking and outreach UI. */
.ats div:has(> img[src$="ats-ai-scout-phone-mockup-v2.webp"]) {
opacity: 1 !important;
transform: none !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.ats img[src$="ats-ai-scout-phone-mockup-v2.webp"] {
display: block;
width: 112% !important;
max-width: none;
margin-left: -6%;
filter: drop-shadow(18px 28px 26px rgba(4, 17, 38, 0.34));
}
@media (max-width: 767px) {
.ats img[src$="ats-ai-scout-phone-mockup-v2.webp"] {
width: 104% !important;
margin-left: -2%;
}
}
/* ATS: three HOW IT WORKS illustrations in the SIGNAL soft 3D style. */
.ats .ats-how-visual {
display: flex;
align-items: center;
justify-content: center;
height: 210px;
margin-bottom: 24px;
overflow: hidden;
border-radius: 18px;
background:
radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96), transparent 54%),
linear-gradient(145deg, rgba(232, 244, 255, 0.92), rgba(220, 231, 255, 0.72));
}
.ats .ats-how-visual img {
width: 88%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 18px rgba(27, 66, 128, 0.14));
}
@media (max-width: 767px) {
.ats .ats-how-visual {
height: 240px;
margin-bottom: 18px;
}
.ats .ats-how-visual img {
width: min(88%, 300px);
}
}
/* ATS: compact problem illustrations for WHY OPERATIONS STALL 01–04. */
.ats article:has(> .ats-stall-visual) {
position: relative;
align-items: center;
min-height: 196px;
}
.ats article:has(> .ats-stall-visual) > span {
order: 1;
align-self: flex-start;
}
.ats article:has(> .ats-stall-visual) > div {
order: 2;
flex: 1 1 auto;
min-width: 0;
}
.ats .ats-stall-visual {
order: 3;
flex: 0 0 136px;
width: 136px;
height: 136px;
margin-left: auto;
object-fit: contain;
filter: drop-shadow(0 12px 16px rgba(27, 66, 128, 0.13));
}
@media (max-width: 767px) {
.ats article:has(> .ats-stall-visual) {
flex-wrap: wrap;
}
.ats .ats-stall-visual {
flex-basis: 100%;
width: 100%;
height: 170px;
margin: 4px 0 0;
}
}
/* ATS: selection-progress icons share SIGNAL's soft glass tile treatment. */
.ats .ats-process-icon {
display: inline-flex;
width: 48px;
height: 48px;
flex: 0 0 48px;
align-items: center;
justify-content: center;
}
.ats .ats-process-icon img {
display: block;
width: 48px;
height: 48px;
}
.ats .lower .ats-ba [class*='bg-[#f4f6f8]']{background:#eceff3!important}.ats .lower .ats-ba [class*='bg-[#f2f5fc]']{background:#e8eefc!important}.ats .lower .ats-ba [class*='bg-[#f2f5fc]'] span[class*='font-bold']{font-weight:500!important}
.skill-node .lower .section-label.signal-en-label{display:block;height:auto;padding:0;background:none!important;border:0!important;border-radius:0;font-family:Montserrat,sans-serif!important;font-weight:500!important;font-size:13px!important;letter-spacing:.14em!important;line-height:1.6!important;text-transform:uppercase}
.skill-node .concept-diagram.sn-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:stretch}.skill-node .sn-flow .diagram-node{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;padding:22px 12px 18px;border:0;border-radius:14px;background:#fff;box-shadow:0 6px 16px rgba(62,97,206,.10);font-weight:400}.skill-node .sn-flow .sn-flow-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#d3defc;color:#3e61ce}.skill-node .sn-flow .sn-flow-icon svg{width:20px;height:20px}.skill-node .sn-flow .sn-flow-label{font-size:15px;font-weight:500;color:#202e46}.skill-node .sn-flow .sn-flow-no{position:absolute;top:9px;right:11px;font:500 10px/1 Montserrat,sans-serif;letter-spacing:.1em;color:#3e61ce;opacity:.75}.skill-node .sn-flow .diagram-link{width:auto;height:auto;background:none;display:flex;align-items:center;justify-content:center;margin:0}.skill-node .sn-flow .diagram-link svg{width:20px;height:20px}.skill-node .sn-flow .diagram-node-accent{background:#3e61ce;box-shadow:0 12px 28px rgba(62,97,206,.28)}.skill-node .sn-flow .diagram-node-accent .sn-flow-icon{background:rgba(255,255,255,.18);color:#fff}.skill-node .sn-flow .diagram-node-accent .sn-flow-label,.skill-node .sn-flow .diagram-node-accent .sn-flow-no{color:#fff}
@media(max-width:760px){.skill-node .concept-diagram.sn-flow{grid-template-columns:1fr 1fr;justify-items:stretch;gap:10px}.skill-node .sn-flow .diagram-link{display:none}}
/* SKILL NODE: デモページ (LPmain.html) から統合した「実際の画面」「特長」「FAQ」 */
.skill-node .sn-demo-frame{border-radius:18px;overflow:hidden;background:#0b1a33;box-shadow:0 24px 60px rgba(16,42,84,.22)}.skill-node .sn-demo-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#102444;color:#c9d6f2}.skill-node .sn-demo-bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}.skill-node .sn-demo-bar em{margin-left:10px;font:500 11px/1 Montserrat,sans-serif;letter-spacing:.08em;font-style:normal;color:#fff}.skill-node .sn-demo-bar small{margin-left:auto;font:400 10px/1 Montserrat,sans-serif;letter-spacing:.08em;opacity:.7}.skill-node .sn-demo-video{display:block;width:100%;height:auto;border-radius:0}
.skill-node .sn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1200px;margin:40px auto 0}.skill-node .sn-stats>div{border-top:1px solid rgba(32,46,70,.18);padding-top:16px}.skill-node .sn-stats strong{display:block;font-size:clamp(24px,2.3vw,30px);font-weight:500;line-height:1.3;color:#202e46}.skill-node .sn-stats span{display:block;margin-top:6px;font-size:12px;line-height:1.8;opacity:.72}
.skill-node .sn-step-shot{margin:14px 0 0}.skill-node .sn-step-shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #d6deea;box-shadow:0 6px 16px rgba(62,97,206,.10)}
.skill-node .sn-detail-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1200px;margin:32px auto 0}.skill-node .sn-detail-list>div{background:#fff;border-radius:14px;padding:20px 22px;box-shadow:0 6px 16px rgba(62,97,206,.10)}.skill-node .sn-detail-list strong{display:block;font-size:15px;font-weight:500;color:#202e46;margin-bottom:6px}.skill-node .sn-detail-list span{display:block;font-size:13px;line-height:1.9;opacity:.8}
.skill-node .sn-faq-list{max-width:920px;margin:0 auto;border-top:1px solid rgba(32,46,70,.2)}.skill-node .sn-faq-list details{border-bottom:1px solid rgba(32,46,70,.2)}.skill-node .sn-faq-list summary{display:grid;grid-template-columns:28px 1fr 20px;gap:14px;align-items:center;padding:24px 0;list-style:none;cursor:pointer;font-size:15px;font-weight:500}.skill-node .sn-faq-list summary::-webkit-details-marker{display:none}.skill-node .sn-q{font:500 15px Montserrat,sans-serif;color:#3e61ce}.skill-node .sn-faq-toggle{position:relative;width:15px;height:15px}.skill-node .sn-faq-toggle:before,.skill-node .sn-faq-toggle:after{content:'';position:absolute;top:7px;left:0;width:15px;height:1px;background:currentColor}.skill-node .sn-faq-toggle:after{transform:rotate(90deg)}.skill-node .sn-faq-list details[open] .sn-faq-toggle:after{transform:none}.skill-node .sn-faq-list details>p{padding:0 34px 26px 42px;font-size:14px;line-height:2;opacity:.85}
@media(max-width:640px){.skill-node .sn-stats{grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}.skill-node .sn-detail-list{grid-template-columns:1fr}.skill-node .sn-faq-list summary{font-size:14px;padding:20px 0;gap:10px}.skill-node .sn-faq-list details>p{padding:0 10px 22px 38px;font-size:13px}.skill-node .sn-demo-bar small{display:none}}
/* SKILL NODE: セクション配色の順番 (デモ画面を先頭に入れたため 4n 任せにせず明示。濃紺は WHAT YOU GET と CTA) */
.skill-node .lower .legacy-section:nth-child(4n):not(.sn-dark):not(.cta-section){background:#f7f7f4!important;color:#202e46!important}.skill-node .lower .legacy-section:nth-child(4n):not(.sn-dark):not(.cta-section):before{display:none}.skill-node .lower .legacy-section:nth-child(4n):not(.sn-dark):not(.cta-section) [class*='text-[#']{color:inherit!important}
.skill-node .lower .sn-dark{background:#132943!important;color:#f3f6fa!important}.skill-node .lower .sn-dark:before{content:'';position:absolute;inset:0;background:url('../fv-unified/organic-texture.svg') center/cover;opacity:.25;pointer-events:none}.skill-node .lower .sn-dark :is(article,.info-card,.output-card){background:#ffffff0d!important;border:1px solid #ffffff26!important;color:#f4f7fa!important;box-shadow:none!important}.skill-node .lower .sn-dark .sn-detail-list>div{background:#ffffff0d;border:1px solid #ffffff26;box-shadow:none}.skill-node .lower .sn-dark .sn-detail-list strong{color:#f4f7fa}.skill-node .lower .sn-dark .output-icon{background:#ffffff1f;color:#d3defc}
/* SKILL NODE: カード類を SIGNAL / ATS と同じ仕様に (白・影は青・枠線なし) */
.skill-node .lower .legacy-section:not(.sn-dark) :is(.info-card,.output-card,.step-card){background:#fff!important;border:0!important;border-radius:16px!important;box-shadow:0 6px 16px rgba(62,97,206,.10)!important;color:#202e46!important;backdrop-filter:none}
.skill-node .lower :is(.info-card,.output-card){padding:28px}.skill-node .lower .card-index{width:auto;height:auto;margin-bottom:14px;border-radius:0;background:none;display:block;font:500 12px/1 Montserrat,sans-serif;letter-spacing:.14em;color:#3e61ce}.skill-node .lower .sn-dark .card-index{color:#9ab8ff}.skill-node .lower :is(.info-card,.output-card) h3{font-size:18px!important;font-weight:500!important;line-height:1.6!important}.skill-node .lower :is(.info-card,.output-card,.step-card) p{font-size:13px!important;line-height:1.9!important;color:inherit!important;opacity:.82}.skill-node .lower .output-icon{min-height:30px;width:auto;padding:0 14px;background:#d3defc;color:#3e61ce;font:500 11px/1 Montserrat,sans-serif;letter-spacing:.12em}
/* HOW IT WORKS: 手順カード (番号は右上に小さく、カード間は青い矢印) */
.skill-node .lower .step-list{gap:28px}.skill-node .lower .step-card{position:relative;grid-template-columns:1fr;gap:0;padding:22px 22px 20px}.skill-node .lower .step-card+.step-card:before{content:'';position:absolute;top:-24px;left:50%;width:20px;height:20px;transform:translateX(-50%);background:url("data:image/svg+xml;utf8,") center/contain no-repeat}.skill-node .lower .step-no{position:absolute;top:12px;right:14px;width:auto;height:auto;border-radius:0;background:none;color:#3e61ce;font:500 11px/1 Montserrat,sans-serif;letter-spacing:.1em;opacity:.75}.skill-node .lower .step-no:before{content:'0'}.skill-node .lower .step-card h3{font-size:17px!important;font-weight:500!important;line-height:1.6!important;margin:0 0 6px!important;padding-right:30px}
/* HOW IT WORKS: Connection Preview (SIGNAL の「ゾスAIが自動で進める」枠と同じ、淡い青の面に白いカード) */
.skill-node .lower .workspace-card{background:#d3defc!important;border:0!important;border-radius:16px!important;box-shadow:none!important;padding:24px;backdrop-filter:none}.skill-node .lower .workspace-label{min-height:0;padding:7px 12px;border:0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);font:500 11px/1.4 Montserrat,sans-serif;letter-spacing:.08em;color:#202e46;text-transform:uppercase}.skill-node .lower .flow-column{background:#fff;border:0;border-radius:14px;padding:18px}.skill-node .lower .flow-column h4{font-family:Montserrat,sans-serif!important;font-size:11px!important;font-weight:500!important;letter-spacing:.14em;color:#3e61ce!important;text-transform:uppercase;margin:0 0 14px}.skill-node .lower .mini-node{border:0;border-radius:999px;background:#f1f5ff;padding:10px 16px;font-size:13px;font-weight:500;color:#202e46}.skill-node .lower .mini-node-strong{background:#3e61ce;color:#fff}.skill-node .lower .flow-arrow{width:20px!important;height:20px!important;background:url("data:image/svg+xml;utf8,") center/contain no-repeat!important;justify-self:center}.skill-node .lower .flow-arrow:after{display:none}@media(max-width:900px){.skill-node .lower .flow-arrow{transform:rotate(90deg)}}
.skill-node .lower .mini-node-tech{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:18px;background:#f7f9ff}.skill-node .lower .mini-node-tech img{display:block;width:auto;height:30px;max-width:52px;object-fit:contain}.skill-node .lower .mini-node-tech img[alt="Java"]{height:36px;max-width:32px}.skill-node .lower .mini-node-tech img[alt="AWS"]{height:26px;max-width:54px}
/* CTA: ボタンを SIGNAL の締めと同じピル型に */
.skill-node .cta-section .cta-actions{display:flex;flex-wrap:wrap;gap:14px}.skill-node .cta-section .button{min-height:54px;padding:12px 24px;border-radius:40px!important;gap:32px;justify-content:space-between;font-size:13px;font-weight:500;border:0;box-shadow:none;transition:transform .2s}.skill-node .cta-section .button:hover{transform:translateY(-2px)}.skill-node .cta-section .button:after{font:300 20px/1 Arial,sans-serif}.skill-node .cta-section .button-primary{background:#f1f5ff!important;color:#183468!important}.skill-node .cta-section .button-primary:after{content:'↗'}.skill-node .cta-section .button-secondary{background:transparent!important;color:#f7fbff!important;border:1px solid rgba(255,255,255,.45)!important}.skill-node .cta-section .button-secondary:after{content:'→'}@media(max-width:640px){.skill-node .cta-section .cta-actions{flex-direction:column}.skill-node .cta-section .button{width:100%}}
.skill-node .sn-demo-video{aspect-ratio:16/9;background:#0b1a33}
.skill-node .lower .step-no{display:block;white-space:nowrap}.skill-node .lower .sn-step-shot img{width:auto;max-width:100%}.skill-node .lower .how-grid{align-items:start}.skill-node .lower .workspace-card{position:sticky;top:110px}.skill-node .lower .section-head h2{text-wrap:balance}.skill-node .lower .output-card{min-height:0}@media(max-width:900px){.skill-node .lower .workspace-card{position:static}}
/* Figma 136:3 — ゾスAI FV */
.skill-node .figma-fv{height:900px;min-height:760px;background:#06183b;color:#f7f9ff;isolation:isolate}
.skill-node .figma-fv:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 38% 46% at 72% 68%,#2554ae 0%,#193e8c 24%,#0c2869 48%,#071d4a 73%,#06183b 100%)}
.skill-node .figma-fv:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(106deg,rgba(6,24,59,.925) 6%,rgba(6,24,59,.59) 44%,rgba(6,24,59,0) 75%),radial-gradient(ellipse 24% 20% at 98% 5%,rgba(52,116,222,.15),transparent 70%)}
.skill-node .site-nav{height:82px;margin:0 24px}
.skill-node .figma-fv-zoth{display:block;width:132px;height:66px}
.skill-node .figma-fv-zoth img{display:block;width:132px;height:66px;object-fit:contain}
.skill-node .site-nav nav{gap:38px}
.skill-node .figma-fv-content{position:absolute;left:4.3%;right:4.3%;top:82px;bottom:32px;display:grid;grid-template-columns:43% 57%;align-items:center;max-width:1600px;margin:auto}
.skill-node .figma-fv-copy{padding-bottom:16px;align-self:center}
.skill-node .figma-fv-ai{display:block;width:128px;height:auto;object-fit:contain}
.skill-node .figma-fv-en{margin:12px 0 35px;color:#a8c2f3;font:10px/1 Arial,sans-serif!important;letter-spacing:2.2px}
.skill-node .figma-fv-copy h1{margin:0;color:#f7f9ff;font-size:47px;line-height:1.48;font-weight:400;letter-spacing:.035em;white-space:nowrap}
.skill-node .figma-fv-lead{margin:27px 0 33px;color:#d1dff8;font-size:13px;line-height:2;font-weight:400;white-space:nowrap}
.skill-node .figma-fv-cta{display:inline-flex;min-height:57px;align-items:center;justify-content:space-between;gap:54px;padding:12px 25px;border-radius:40px;background:#f4f7ff;color:#183468;font-size:14px}
.skill-node .figma-fv-cta span{font:26px/1 Arial,sans-serif!important}
.skill-node .figma-fv-tagline{margin:46px 0 0;color:#9bb8ed;font:9px/1 Arial,sans-serif!important;letter-spacing:2.25px}
.skill-node .figma-fv-visual{position:relative;width:100%;height:690px;min-height:600px}
.skill-node .figma-fv-visual img{position:absolute;top:6%;left:-10%;width:118%;height:auto;max-width:none;object-fit:contain}
.skill-node .figma-fv .hero-bottom{bottom:25px;left:4.3%;right:4.3%}
.skill-node .figma-fv .hero-bottom span{color:#b1c7ed;letter-spacing:1.8px}
@media(min-width:769px) and (max-width:1100px){
.skill-node .figma-fv-content{grid-template-columns:42% 58%}
.skill-node .figma-fv-copy h1{font-size:38px}
.skill-node .figma-fv-visual img{left:-2%;width:112%}
}
@media(max-width:768px){
.skill-node .figma-fv{height:880px;min-height:0}
.skill-node .site-nav{height:68px;margin:0 18px}
.skill-node .figma-fv-zoth,.skill-node .figma-fv-zoth img{width:108px;height:54px}
.skill-node .figma-fv-content{top:104px;bottom:38px;left:7%;right:7%;display:block}
.skill-node .figma-fv-copy{position:relative;z-index:2;padding:0}
.skill-node .figma-fv-ai{width:110px}
.skill-node .figma-fv-en{margin:9px 0 24px;font-size:8px;letter-spacing:1.7px}
.skill-node .figma-fv-copy h1{font-size:32px;line-height:1.55;letter-spacing:.02em}
.skill-node .figma-fv-lead{margin:18px 0 22px;font-size:11px;line-height:1.9;white-space:normal}
.skill-node .figma-fv-cta{min-height:48px;gap:38px;padding:10px 20px;font-size:12px}
.skill-node .figma-fv-tagline{margin-top:24px;font-size:8px}
.skill-node .figma-fv-visual{position:absolute;left:-13%;right:-17%;bottom:18px;width:130%;height:auto;min-height:0}
.skill-node .figma-fv-visual img{position:relative;top:auto;left:auto;width:100%;opacity:.92}
.skill-node .figma-fv .hero-bottom{left:7%;right:7%;bottom:18px}
}
/* SKILL NODE: パネル内の小見出し (Knowledge Structure / Connection Preview) を枠なしの英字ラベルに */
.skill-node .lower :is(.panel-label,.workspace-label){display:block;min-height:0;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:#3e61ce;margin-bottom:12px}
/* sn-flow-anim: 整列が終わるまで「成果」は白いまま、最後に青へ */
.skill-node .sn-flow .diagram-node-accent,.skill-node .sn-flow .diagram-node-accent :is(.sn-flow-icon,.sn-flow-label,.sn-flow-no){transition:background-color .6s ease,color .6s ease,box-shadow .6s ease}.skill-node .sn-flow.sn-flow-armed .diagram-node-accent{background:#fff;box-shadow:0 6px 16px rgba(62,97,206,.10)}.skill-node .sn-flow.sn-flow-armed .diagram-node-accent .sn-flow-icon{background:#d3defc;color:#3e61ce}.skill-node .sn-flow.sn-flow-armed .diagram-node-accent :is(.sn-flow-label){color:#202e46}.skill-node .sn-flow.sn-flow-armed .diagram-node-accent .sn-flow-no{color:#3e61ce}
.skill-node .lower .concept-panel h3{text-wrap:balance}
/* SKILL NODE output icons — ATS / SIGNAL visual language */
.skill-node .lower .sn-dark .output-icon.output-icon-graphic{display:block;width:80px;height:80px;min-height:80px;margin:0 0 22px;padding:0;border:0;border-radius:0;background:transparent!important;object-fit:contain}
/* SKILL NODE: 経験〜成果を貫く1本の矢印 (カードの下を左から右へ) */
.skill-node .concept-diagram.sn-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.skill-node .sn-flow-line{position:relative;height:24px;margin-top:14px;display:flex;align-items:center}.skill-node .sn-flow-line svg:first-child{flex:1;height:24px;overflow:visible}.skill-node .sn-flow-line-path{fill:none;stroke:url(#snFlowGrad);stroke:#3e61ce;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}.skill-node .sn-flow-head{flex:0 0 auto;width:22px;height:22px;margin-left:-14px}.skill-node .sn-flow-head path{fill:none;stroke:#3e61ce;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.skill-node .sn-flow-line:before{content:'';position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;background:#3e61ce;transform:translateY(-50%)}
@media(max-width:760px){.skill-node .concept-diagram.sn-flow{grid-template-columns:1fr 1fr;gap:10px}}
.skill-node .sn-flow-line{width:100%;max-width:100%;overflow:visible}.skill-node .sn-flow-line svg:first-child{flex:1 1 0;width:0;min-width:0;display:block}.skill-node .sn-flow-head{display:block;width:22px!important;height:22px!important;min-width:22px}
.skill-node .lower .concept-panel h3{word-break:auto-phrase}
.skill-node .section-concept .concept-stack .info-card-soft{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:18px;align-items:center;min-height:190px;padding:22px 18px 22px 26px;overflow:hidden}.skill-node .section-concept .concept-card-copy{min-width:0}.skill-node .section-concept .concept-card-copy h3{margin:0 0 8px}.skill-node .section-concept .concept-card-copy p{margin:0}.skill-node .section-concept .concept-card-illustration{display:block;width:190px;height:150px;margin:0 -10px 0 0;border-radius:0;object-fit:contain}.skill-node .section-concept .concept-stack .info-card-soft:nth-child(2) .concept-card-illustration{height:145px}.skill-node .section-concept .concept-stack .info-card-soft:nth-child(3) .concept-card-illustration{height:155px}
@media(max-width:1100px) and (min-width:769px){.skill-node .section-concept .concept-stack .info-card-soft{grid-template-columns:minmax(0,1fr) 150px}.skill-node .section-concept .concept-card-illustration{width:160px;height:135px}}
@media(max-width:768px){.skill-node .section-concept .concept-stack{margin-top:20px}.skill-node .section-concept .concept-stack .info-card-soft{grid-template-columns:minmax(0,1fr) 150px;min-height:170px}.skill-node .section-concept .concept-card-illustration{width:160px;height:130px}}
@media(max-width:520px){.skill-node .section-concept .concept-stack .info-card-soft{grid-template-columns:1fr;padding:22px}.skill-node .section-concept .concept-card-illustration{grid-row:1;width:100%;height:170px;margin:0 auto}.skill-node .section-concept .concept-card-copy{grid-row:2}}
/* SKILL NODE: 4枚を貫く矢印 (細い「く」の字 ×3 → 「成果」自体が大きな矢じり) */
.skill-node .concept-diagram.sn-flow{grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1.12fr;gap:8px;align-items:stretch}.skill-node .sn-flow .sn-chev{display:flex!important;align-items:center;justify-content:center;width:auto;height:auto;background:none;margin:0}.skill-node .sn-flow .sn-chev svg{width:20px;height:28px;display:block}.skill-node .sn-flow .sn-chev path{fill:#3e61ce}.skill-node .sn-flow .sn-chev:nth-of-type(2) path{fill-opacity:.35}.skill-node .sn-flow .sn-chev:nth-of-type(4) path{fill-opacity:.6}.skill-node .sn-flow .sn-chev:nth-of-type(6) path{fill-opacity:.85}
.skill-node .sn-flow .diagram-node-accent{border-radius:0;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,0 100%,22px 50%);padding-left:30px;padding-right:38px;box-shadow:none!important}.skill-node .sn-flow .diagram-node-accent .sn-flow-no{right:auto;left:30px}.skill-node .sn-flow.sn-flow-armed .diagram-node-accent{background:#e4ebfb}
.skill-node .sn-flow-line{display:none}
@media(max-width:760px){.skill-node .concept-diagram.sn-flow{grid-template-columns:1fr;gap:6px}.skill-node .sn-flow .diagram-node{flex-direction:row;justify-content:flex-start;gap:14px;padding:16px 18px}.skill-node .sn-flow .sn-chev svg{transform:rotate(90deg);width:18px;height:24px}.skill-node .sn-flow .sn-chev{height:22px}.skill-node .sn-flow .diagram-node-accent{clip-path:polygon(0 0,50% 18px,100% 0,100% calc(100% - 22px),50% 100%,0 calc(100% - 22px));padding:30px 18px 34px}.skill-node .sn-flow .diagram-node-accent .sn-flow-no{left:auto;right:11px;top:22px}}
/* SKILL NODE problem illustrations — ATS / SIGNAL visual language */
.skill-node .section-problem .info-card{display:flex;min-height:390px;flex-direction:column;align-items:flex-start;overflow:hidden}
.skill-node .section-problem .problem-illustration{display:block;width:100%;height:190px;margin:-2px 0 18px;border-radius:0;object-fit:contain}
@media(max-width:980px) and (min-width:641px){
.skill-node .section-problem .info-card{display:grid;min-height:250px;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:auto auto 1fr;column-gap:28px;align-items:start}
.skill-node .section-problem .card-index{grid-column:1;grid-row:1}
.skill-node .section-problem .problem-illustration{grid-column:2;grid-row:1 / 4;width:230px;height:200px;margin:auto 0;align-self:center}
.skill-node .section-problem .info-card h3{grid-column:1;grid-row:2}
.skill-node .section-problem .info-card p{grid-column:1;grid-row:3}
}
@media(max-width:640px){
.skill-node .section-problem .info-card{min-height:0}
.skill-node .section-problem .problem-illustration{height:180px}
}
/* SKILL NODE output format badges */
.skill-node .lower .sn-dark .output-icon-wrap{position:relative;width:98px;height:88px;margin:0 0 22px}
.skill-node .lower .sn-dark .output-icon-wrap .output-icon.output-icon-graphic{margin:0}
.skill-node .lower .sn-dark .output-icon-wrap>span{position:absolute;right:0;bottom:0;display:flex;min-width:43px;height:25px;align-items:center;justify-content:center;padding:0 8px;border:2px solid rgba(255,255,255,.9);border-radius:999px;background:linear-gradient(135deg,#79baff,#397ceb 58%,#1c4fb6);box-shadow:0 4px 10px rgba(4,27,76,.28);color:#fff;font:600 9px/1 Montserrat,sans-serif!important;letter-spacing:.08em}
.skill-node .lower .sn-dark .output-icon-wrap-brand{width:108px;height:88px}.skill-node .lower .sn-dark .output-icon-wrap-docs{width:126px}.skill-node .lower .output-brand-mark,.skill-node .lower .output-brand-pair>span{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border:1px solid rgba(62,97,206,.13);border-radius:20px;background:linear-gradient(145deg,#fff,#edf3ff);box-shadow:0 8px 18px rgba(5,26,64,.22)}.skill-node .lower .output-brand-mark img{display:block;width:50px;height:50px;object-fit:contain}.skill-node .lower .output-brand-pair{display:flex;align-items:center;padding-left:4px}.skill-node .lower .output-brand-pair>span{width:64px;height:76px;border-radius:18px}.skill-node .lower .output-brand-pair>span+span{margin-left:-12px}.skill-node .lower .output-brand-pair img{display:block;width:38px;height:42px;object-fit:contain}.skill-node .lower .output-brand-pair>span:last-child img{width:43px;height:43px}
/* SKILL NODE: 「成果」も 01〜03 と同じ角丸カードに (青い塗りのみ違う) */
.skill-node .sn-flow .diagram-node-accent{clip-path:none;border-radius:14px;padding:22px 12px 18px;box-shadow:0 12px 28px rgba(62,97,206,.28)!important}.skill-node .sn-flow .diagram-node-accent .sn-flow-no{left:auto;right:11px;top:9px}.skill-node .concept-diagram.sn-flow{grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr}
@media(max-width:760px){.skill-node .concept-diagram.sn-flow{grid-template-columns:1fr}.skill-node .sn-flow .diagram-node-accent{clip-path:none;padding:16px 18px}.skill-node .sn-flow .diagram-node-accent .sn-flow-no{top:9px;right:11px}}
.skill-node .sn-stats .sn-em{font-style:normal;color:#3e61ce}
.skill-node .sn-stats .sn-em{font-weight:700}
.skill-node .lower #demo h2{word-break:auto-phrase;text-wrap:balance}
/* SKILL NODE: 本人 × 企業の対比 (同じ1枚のスキルシートを両側から見る) */
.skill-node .sn-compare-grid{display:grid;grid-template-columns:1fr 96px 1fr;align-items:stretch;max-width:1200px;margin:0 auto}.skill-node .sn-compare-card{position:relative;display:flex;flex-direction:column;border-radius:18px;padding:36px 34px}.skill-node .sn-compare-card.is-candidate{background:#fff;color:#202e46;box-shadow:0 6px 16px rgba(62,97,206,.10)}.skill-node .sn-compare-card.is-company{background:linear-gradient(160deg,#16305a,#0e2244);color:#f4f7ff;box-shadow:0 18px 40px rgba(16,42,84,.28)}.skill-node .sn-compare-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}.skill-node .sn-compare-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#d3defc;color:#3e61ce}.skill-node .sn-compare-icon svg{width:20px;height:20px}.skill-node .is-company .sn-compare-icon{background:rgba(255,255,255,.14);color:#9ab8ff}.skill-node .sn-compare-label{font:500 11px/1.4 Montserrat,sans-serif;letter-spacing:.14em;color:#3e61ce}.skill-node .is-company .sn-compare-label{color:#9ab8ff}
.skill-node .sn-compare-icon{width:54px;height:54px;flex:0 0 54px;overflow:hidden;border:2px solid #fff;box-shadow:0 6px 14px rgba(35,70,140,.18)}.skill-node .sn-compare-icon img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}.skill-node .is-company .sn-compare-icon{border-color:rgba(154,184,255,.65);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.skill-node .lower .sn-compare-card h3{font-size:24px!important;line-height:1.55!important;font-weight:500!important;letter-spacing:.02em;margin:0 0 14px!important;color:inherit!important;text-wrap:balance;word-break:auto-phrase}.skill-node .lower .sn-compare-card>p{font-size:14px!important;line-height:1.95!important;opacity:.82;margin:0 0 26px!important;color:inherit!important}
.skill-node .sn-compare-list{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid rgba(32,46,70,.12)}.skill-node .sn-compare-list li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid rgba(32,46,70,.12)}.skill-node .is-company .sn-compare-list,.skill-node .is-company .sn-compare-list li{border-color:rgba(255,255,255,.16)}.skill-node .sn-compare-list li:before{content:'';width:20px;height:20px;margin-top:2px;border-radius:50%;background:#d3defc url("data:image/svg+xml;utf8,") center/11px no-repeat}.skill-node .is-company .sn-compare-list li:before{background:rgba(154,184,255,.22) url("data:image/svg+xml;utf8,") center/11px no-repeat}.skill-node .lower .sn-compare-list strong{display:block;font-size:15px;font-weight:500!important;margin-bottom:4px;color:inherit}.skill-node .sn-compare-list span{display:block;font-size:13px;line-height:1.85;opacity:.8}
.skill-node .sn-compare-core{position:relative;display:flex;align-items:center;justify-content:center}.skill-node .sn-compare-core:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,#3e61ce,#9ab8ff)}.skill-node .sn-compare-core span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:86px;height:86px;border-radius:50%;background:#3e61ce;color:#fff;box-shadow:0 10px 24px rgba(62,97,206,.32);text-align:center}.skill-node .sn-compare-core small{font:500 8px/1.3 Montserrat,sans-serif;letter-spacing:.14em;color:#d3defc}.skill-node .sn-compare-core b{font-size:13px;font-weight:500;line-height:1.3}
.skill-node .sn-compare.is-armed .sn-compare-card{opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.skill-node .sn-compare.is-armed .is-candidate{transform:translateX(-40px)}.skill-node .sn-compare.is-armed .is-company{transform:translateX(40px)}.skill-node .sn-compare.is-armed .sn-compare-core span{opacity:0;transform:scale(.3);transition:opacity .4s ease .6s,transform .7s cubic-bezier(.34,1.56,.64,1) .6s}.skill-node .sn-compare.is-armed .sn-compare-core:before{transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) .35s}.skill-node .sn-compare.is-armed.is-in .sn-compare-card{opacity:1;transform:none}.skill-node .sn-compare.is-armed.is-in .sn-compare-core span{opacity:1;transform:none}.skill-node .sn-compare.is-armed.is-in .sn-compare-core:before{transform:none}
@media(max-width:900px){.skill-node .sn-compare-grid{grid-template-columns:1fr}.skill-node .sn-compare-card{padding:28px 22px}.skill-node .sn-compare-core{height:110px}.skill-node .sn-compare-core:before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,#3e61ce,#9ab8ff)}.skill-node .sn-compare.is-armed .is-candidate{transform:translateY(-24px)}.skill-node .sn-compare.is-armed .is-company{transform:translateY(24px)}.skill-node .sn-compare.is-armed .sn-compare-core:before{transform:scaleY(0)}.skill-node .lower .sn-compare-card h3{font-size:21px!important}}
.skill-node .sn-compare-list li:before{grid-row:1/span 2}.skill-node .sn-compare-list li>*{grid-column:2}.skill-node .sn-compare-core span{width:86px!important;height:86px!important;flex:0 0 auto;box-sizing:border-box}
.skill-node .is-candidate .sn-compare-list li{grid-template-columns:20px minmax(0,1fr) 104px;min-height:118px;align-items:center}.skill-node .is-candidate .sn-compare-list li:before{grid-column:1;align-self:start;margin-top:3px}.skill-node .is-candidate .sn-compare-list li>strong{grid-column:2;align-self:end}.skill-node .is-candidate .sn-compare-list li>span{grid-column:2;align-self:start}.skill-node .is-candidate .sn-compare-list .sn-value-illustration{grid-column:3;grid-row:1/span 2;display:block;width:112px;height:94px;margin:0 -8px 0 0;border-radius:0;object-fit:contain;align-self:center}
.skill-node .is-company .sn-compare-list li{grid-template-columns:20px minmax(0,1fr) 104px;min-height:118px;align-items:center}.skill-node .is-company .sn-compare-list li:before{grid-column:1;align-self:start;margin-top:3px}.skill-node .is-company .sn-compare-list li>strong{grid-column:2;align-self:end}.skill-node .is-company .sn-compare-list li>span{grid-column:2;align-self:start}.skill-node .is-company .sn-compare-list .sn-value-illustration{grid-column:3;grid-row:1/span 2;display:block;width:112px;height:94px;margin:0 -8px 0 0;border-radius:0;object-fit:contain;align-self:center;filter:drop-shadow(0 6px 12px rgba(42,113,255,.18))}
@media(max-width:520px){.skill-node .is-candidate .sn-compare-list li{grid-template-columns:20px minmax(0,1fr) 82px;min-height:106px;gap:10px}.skill-node .is-candidate .sn-compare-list .sn-value-illustration{width:88px;height:78px;margin-right:-6px}}
@media(max-width:520px){.skill-node .is-company .sn-compare-list li{grid-template-columns:20px minmax(0,1fr) 82px;min-height:106px;gap:10px}.skill-node .is-company .sn-compare-list .sn-value-illustration{width:88px;height:78px;margin-right:-6px}}
.skill-node .sn-compare-grid{grid-template-columns:1fr 128px 1fr}@media(max-width:900px){.skill-node .sn-compare-grid{grid-template-columns:1fr}}
.skill-node .sn-compare-core b{font-size:12.5px;line-height:1.35;letter-spacing:.02em}
/* HOW IT WORKS: 手順ごとに対応する絵を入れ、縦1列で読む (Connection Preview は手順2の中へ) */
.skill-node .lower .how-grid{grid-template-columns:1fr!important}.skill-node .lower .step-card .workspace-card{position:static;top:auto;margin-top:16px;padding:20px}.skill-node .lower .step-card .workspace-label{margin-bottom:10px}
.skill-node .lower .section-head h2{word-break:auto-phrase}
.skill-node .sn-compare-core span{width:96px!important;height:96px!important}.skill-node .sn-compare-core b{font-size:12px;letter-spacing:0}
.skill-node .sn-compare-label{font-size:13px;font-weight:600}
/* SKILL NODE concept — desktop uses one compact explanation row and three equal visual cards. */
@media(min-width:901px){
.skill-node .section-concept .concept-grid{
grid-template-columns:1fr;
gap:22px;
}
.skill-node .section-concept .concept-panel-large{
display:grid;
grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
grid-template-rows:auto auto 1fr;
column-gap:42px;
align-items:center;
padding:32px 34px;
}
.skill-node .section-concept .concept-panel-large>.panel-label{
grid-column:1;
grid-row:1;
align-self:end;
}
.skill-node .section-concept .concept-panel-large>h3{
grid-column:1;
grid-row:2;
margin:0 0 10px;
}
.skill-node .section-concept .concept-panel-large>p{
grid-column:1;
grid-row:3;
margin:0;
}
.skill-node .section-concept .concept-panel-large>.concept-diagram{
grid-column:2;
grid-row:1 / 4;
align-self:center;
margin:0;
}
.skill-node .section-concept .concept-stack{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.skill-node .section-concept .concept-stack .info-card-soft{
display:flex;
min-height:310px;
flex-direction:column;
align-items:stretch;
gap:0;
padding:20px 24px 26px;
}
.skill-node .section-concept .concept-card-illustration,
.skill-node .section-concept .concept-stack .info-card-soft:nth-child(2) .concept-card-illustration,
.skill-node .section-concept .concept-stack .info-card-soft:nth-child(3) .concept-card-illustration{
order:-1;
width:100%;
height:158px;
margin:0 0 12px;
}
.skill-node .section-concept .concept-card-copy h3{
min-height:58px;
}
}
@media(min-width:901px) and (max-width:1120px){
.skill-node .section-concept .concept-panel-large{
column-gap:26px;
padding:28px;
}
.skill-node .section-concept .concept-stack .info-card-soft{
min-height:292px;
padding:18px 20px 24px;
}
.skill-node .section-concept .concept-card-illustration,
.skill-node .section-concept .concept-stack .info-card-soft:nth-child(2) .concept-card-illustration,
.skill-node .section-concept .concept-stack .info-card-soft:nth-child(3) .concept-card-illustration{
height:145px;
}
}
/* SIGNAL screenshot revisions — October 2, 2026. */
.signal .hero-bottom{justify-content:flex-end}
.signal .lower .signal-review-highlight{background:linear-gradient(#3e61ce,#3e61ce) left center/100% 100% no-repeat;color:#fff!important;padding:.06em .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.signal .lower .signal-review-highlight.is-armed{background-size:0% 100%;color:#202e46!important}
.signal .lower .signal-review-highlight.is-armed.is-in{background-size:100% 100%;color:#fff!important;transition:background-size .75s cubic-bezier(.2,.7,.2,1),color .2s ease .38s}
@media(prefers-reduced-motion:reduce){.signal .lower .signal-review-highlight{transition:none!important}}
.signal .lower .signal-review-copy{max-width:960px!important}
.signal .signal-review-copy .signal-copy-line{display:block;text-wrap:pretty}
.signal .lower .legacy-section .signal-catch{font-size:clamp(16px,4.1vw,30px)!important;white-space:nowrap}
.signal .signal-hub-card h3{text-wrap:balance;word-break:auto-phrase}
@media(min-width:1100px){
.signal .signal-hub-card h3{white-space:nowrap}
}
@media(max-width:800px){
.signal .signal-hub{display:flex;flex-direction:column}
.signal .signal-hub>div:first-child{order:2;grid-template-columns:1fr;gap:12px}
.signal .signal-hub .signal-hub-core{position:static!important;order:1;left:auto!important;top:auto!important;width:100%!important;height:auto!important;min-height:160px;margin:0 0 12px;transform:none!important}
.signal .signal-hub-card{min-height:132px}
}
@media(max-width:767px){
.signal .signal-review-copy .signal-copy-line{display:inline}
.signal .signal-review-copy{text-align:left}
}
.signal .lower .signal-orb+h3{color:#3e61ce!important;font-weight:500!important}
/* SIGNAL: 「ゾスAI SIGNALとは」の4枚カード (スマホ・タブレット)
PC 用の中央寄せのずらし・左右反転・中央カードを避ける余白を外し、青いカード → 4枚の順に縦へ並べる */
@media(max-width:800px){
.signal .signal-hub .signal-hub-core{translate:none!important;min-height:0;padding:28px 20px!important;border-radius:16px!important}
.signal .signal-hub .signal-hub-core p:first-child{font-size:10px!important;letter-spacing:.16em!important}
.signal .signal-hub .signal-hub-core p+p{font-size:20px!important;margin-top:8px!important}
.signal .signal-hub>div:first-child{gap:10px}
.signal .signal-hub-card{min-height:0!important;flex-direction:row!important;align-items:center;gap:16px!important;padding:18px 20px!important;border-radius:14px!important}
.signal .signal-hub-card>div:first-child{width:56px!important;height:56px!important;border-radius:14px!important}
.signal .signal-hub-card>div:first-child img{width:44px!important;height:44px!important}
.signal .signal-hub-card>div:last-child{padding:0!important;text-align:left}
.signal .signal-hub-card p{font-size:12px!important}
.signal .signal-hub-card h3{font-size:17px!important;margin-top:4px!important;white-space:normal}
.signal .signal-hub:not(.is-in) .signal-hub-card:nth-child(n){translate:0 16px}
}
/* SKILL NODE: WORKSPACE の見出しまわりを中央揃え、「3分」を青で強調 */
.skill-node .lower #demo .section-head{text-align:center;margin-left:auto;margin-right:auto}.skill-node .lower #demo .section-head .section-desc{margin-left:auto;margin-right:auto}.skill-node .lower #demo h2 .sn-em{font-style:normal;font-weight:700;color:#3e61ce}
.skill-node .lower #demo .section-desc{word-break:auto-phrase;text-wrap:balance}
/* SKILL NODE: 見出しまわりの揃え (WHY / WHAT IS / HOW は中央、FAQ は左で一覧と揃える) */
.skill-node .lower :is(#problem,#concept,#how,#output)>.section-head{text-align:center;margin-left:auto;margin-right:auto}.skill-node .lower :is(#problem,#concept,#how,#output)>.section-head .section-desc{margin-left:auto;margin-right:auto;word-break:auto-phrase;text-wrap:balance}.skill-node .lower :is(#problem,#concept,#how,#output)>.section-head h2{word-break:auto-phrase;text-wrap:balance}
.skill-node .lower #concept h2 .sn-em{font-style:normal;font-weight:700;color:#3e61ce}
.skill-node .lower #faq>.section-head{max-width:920px;margin-left:auto;margin-right:auto;padding-left:0;text-align:left}
.skill-node .lower .sn-compare-card h3{margin-bottom:22px!important}
.skill-node .lower #faq>.section-head{max-width:none!important;width:auto;margin-left:0!important;margin-right:0!important}
.skill-node .lower #faq>.section-head{max-width:1200px!important;margin-left:auto!important;margin-right:auto!important}
/* ATS: 見出しの要点を青で強調 (濃紺のセクションでは明るい青) */
.ats .lower h2 .ats-em{font-style:normal;font-weight:700;color:#3e61ce}.ats .lower .legacy-section:nth-child(4n) h2 .ats-em{color:#9ab8ff}
/* ATS: HOW IT WORKS の7項目にカーソルを乗せると、青いシアーでふわっと光る */
.ats .lower .ats-how-item{position:relative;transition:background-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}.ats .lower .ats-how-item:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(109,152,247,.16),rgba(62,97,206,.06));opacity:0;transition:opacity .35s ease;pointer-events:none}.ats .lower .ats-how-item:hover{background:#eef3ff!important;box-shadow:0 0 0 1px rgba(109,152,247,.45),0 12px 30px rgba(62,97,206,.22),0 0 26px rgba(109,152,247,.28)!important;transform:translateY(-2px)}.ats .lower .ats-how-item:hover:before{opacity:1}.ats .lower .ats-how-item:hover h4{color:#3e61ce!important}.ats .lower .ats-how-item>*{position:relative}
@media(prefers-reduced-motion:reduce){.ats .lower .ats-how-item{transition:none}.ats .lower .ats-how-item:hover{transform:none}}
/* ATS: HOW IT WORKS の7項目のホバーを、ゾスキャリの導入事例と同じ「色のシアーがふわっと重なる」形に
(浮き上がり・光る影はなし。オレンジの代わりにゾスAIの青のグラデーション) */
.ats .lower .ats-how-item{transition:background-color .6s ease}.ats .lower .ats-how-item:hover{transform:none!important;box-shadow:none!important;background:#f7f9fb!important}
.ats .lower .ats-how-item:before{background:linear-gradient(150deg,rgba(62,97,206,.9),rgba(69,119,247,.84) 45%,rgba(109,152,247,.78))!important;transition:opacity .6s cubic-bezier(.2,.7,.2,1)!important}
.ats .lower .ats-how-item :is(h4,p){transition:color .6s ease}.ats .lower .ats-how-item:hover :is(h4,p){color:#fff!important}
.skill-node .figma-fv .organic{opacity:1;mix-blend-mode:screen}
.skill-node .figma-fv .organic{background:radial-gradient(55% 60% at 16% 14%,rgba(200,214,224,.42),rgba(140,160,180,.16) 45%,transparent 72%),url('../fv-unified/organic-texture.svg') center/100% 100%}
/* ===== ヘッダー: ZC サイト本体と同じもの (ZC のゾスAIページの描画結果から移植。手で書き換えない) ===== */
.product-page #nav{--paper: #f7f7f6; --surface: #fff; --sunk: #f1f1ef; --line: #e3e3df; --line-2: #d2d2cd; --ink: #17181c; --graphite: #4a4e56; --body: #53565d; --faint: #838a93; --sun-1: #d9765c; --sun-2: #edb98e; --glow: #c0654b; --ember: #e29472; --night-1: #2438a6; --night-2: #131f7a; --night-3: #0d1655; --ease: cubic-bezier(.22,.61,.36,1); --maxw: 1180px; --zc-paper: #f7f7f6; --zc-ink: #17181c; --zc-graphite: #4a4e56; --zc-faint: #838a93; --zc-sun-1: #d9765c; --zc-sun-2: #edb98e; --zc-glow: #c0654b; --zc-ember: #e29472; --zc-ease: cubic-bezier(.22,.61,.36,1);}
:where(.product-page #nav),:where(.product-page #nav) :where(*,::before,::after){box-sizing:border-box}:where(.product-page #nav) :where(ul,li,p,span,a,button,nav,div){margin:0;padding:0}:where(.product-page #nav) :where(ul){list-style:none}:where(.product-page #nav) :where(a){color:inherit;text-decoration:none}:where(.product-page #nav) :where(img,svg){display:block;vertical-align:middle}:where(.product-page #nav) :where(button){font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border:0;border-radius:0;cursor:pointer;appearance:button}
.product-page .nav{ z-index: 50; position: fixed; inset: 0px 0px auto; }
.product-page .nav::before{ content: ""; pointer-events: none; z-index: 0; height: 240px; transition: opacity .75s var(--ease); background: linear-gradient(rgba(12, 16, 52, 0.62), rgba(12, 16, 52, 0.46) 19%, rgba(12, 16, 52, 0.337) 34%, rgba(12, 16, 52, 0.235) 47%, rgba(12, 16, 52, 0.173) 56.5%, rgba(12, 16, 52, 0.12) 65%, rgba(12, 16, 52, 0.08) 73%, rgba(12, 16, 52, 0.047) 80.2%, rgba(12, 16, 52, 0.027) 86.1%, rgba(12, 16, 52, 0.01) 91%, rgba(12, 16, 52, 0.004) 95.2%, rgba(12, 16, 52, 0) 98.2%, rgba(12, 16, 52, 0)); position: absolute; top: 0px; left: 0px; right: 0px; }
.product-page .nav.is-stuck{ background: 0px 0px; border-bottom: 0px; }
.product-page .nav::after{ content: ""; pointer-events: none; z-index: 0; opacity: 0; height: 240px; transition: opacity .75s var(--ease); background: linear-gradient(rgba(247, 247, 246, 0.72), rgba(247, 247, 246, 0.533) 19%, rgba(247, 247, 246, 0.39) 34%, rgba(247, 247, 246, 0.275) 47%, rgba(247, 247, 246, 0.2) 56.5%, rgba(247, 247, 246, 0.14) 65%, rgba(247, 247, 246, 0.09) 73%, rgba(247, 247, 246, 0.055) 80.2%, rgba(247, 247, 246, 0.03) 86.1%, rgba(247, 247, 246, 0.016) 91%, rgba(247, 247, 246, 0.004) 95.2%, rgba(247, 247, 246, 0) 98.2%, rgba(247, 247, 246, 0)); position: absolute; top: 0px; left: 0px; right: 0px; }
.product-page .nav.is-stuck::after{ opacity: 1; }
.product-page .nav-inner{ z-index: 1; position: relative; }
.product-page .nav.is-stuck::before{ opacity: 0; }
.product-page .nav-inner{ justify-content: space-between; align-items: center; gap: 2rem; width: min(100% - 3rem, 1560px); height: 82px; margin-inline: auto; display: flex; position: relative; }
.product-page .nav-logo{ color: rgb(255, 255, 255); transition: color .75s var(--ease); }
.product-page .nav.is-stuck .nav-logo{ color: var(--ink); }
.product-page .nav-logo .wm{ width: 132px; height: auto; display: block; }
.product-page .nav-menu{ align-items: center; display: flex; }
.product-page .nav-menu ul{ flex-direction: row; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); display: flex; }
.product-page .nav-menu li{ position: relative; }
.product-page .nav-menu a{ transition: opacity .3s var(--ease); flex-direction: column; align-items: center; line-height: 1.25; display: flex; }
.product-page .nav-menu .en{ letter-spacing: 0.08em; color: rgb(255, 255, 255); transition: color .75s var(--ease); white-space: nowrap; font-family: Gotham, Montserrat, system-ui, sans-serif; font-size: 0.82rem; font-weight: 500; }
.product-page .nav-menu .ja{ letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.78); transition: color .75s var(--ease); white-space: nowrap; margin-top: 0.2em; font-size: 0.58rem; }
.product-page .nav.is-stuck .nav-menu .en{ color: var(--ink); }
.product-page .nav.is-stuck .nav-menu .ja{ color: var(--graphite); }
.product-page .nav-menu a:hover .en{ color: var(--ember); }
.product-page .nav-menu .nav-top{ cursor: default; flex-direction: column; align-items: center; line-height: 1.25; display: flex; }
.product-page .nav-menu .has-drop:hover .nav-top .en{ color: var(--ember); }
.product-page .nav-menu .is-ext .ext-arrow{ color: var(--ember); font-size: 0.72rem; position: absolute; top: 0.05em; left: -0.95em; }
.product-page .nav-burger{ cursor: pointer; z-index: 2; background: 0px 0px; border: 0px; width: 44px; height: 44px; display: none; position: relative; }
.product-page .nav-burger span{ width: 22px; height: 1.5px; transition: background .75s var(--ease),top .35s var(--ease),transform .35s var(--ease); background: rgb(255, 255, 255); position: absolute; left: 11px; }
.product-page .nav.is-stuck .nav-burger span{ background: var(--ink); }
.product-page .nav-burger span:first-child{ top: 18px; }
.product-page .nav-burger span:nth-child(2){ top: 25px; }
@media (max-width: 768px){.product-page .nav-burger{ display: block; }}
@media (max-width: 768px){.product-page .nav-inner{ height: 68px; }}
@media (max-width: 768px){.product-page .nav-menu{ backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); opacity: 0; pointer-events: none; transition: .35s var(--ease); background: rgba(247, 247, 246, 0.97); padding: 1.8rem 1.5rem 2.4rem; display: block; position: fixed; inset: 68px 0px auto; transform: translateY(-12px); }}
@media (max-width: 768px){.product-page .nav.is-stuck .nav-menu{ border-top: 0px; border-left: 0px; border-right: 0px; border-radius: 0px; padding: 1.8rem 1.5rem 2.4rem; }}
@media (max-width: 768px){.product-page .nav-menu.is-open{ opacity: 1; pointer-events: auto; transform: none; }}
@media (max-width: 768px){.product-page .nav-menu ul{ flex-direction: column; align-items: flex-start; gap: 1.3rem; }}
@media (max-width: 768px){.product-page .nav-menu a,.product-page .nav-menu .nav-top{ align-items: flex-start; }}
@media (max-width: 768px){.product-page .nav-menu .en{ color: var(--ink); }}
@media (max-width: 768px){.product-page .nav-menu .ja{ color: var(--faint); }}
@media (max-width: 768px){.product-page .nav-menu .is-ext .ext-arrow{ margin-bottom: 0.1em; position: static; }}
.product-page .nav-menu .has-drop{ position: relative; }
.product-page .nav-menu .nav-drop{ z-index: 60; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s var(--ease),transform .28s var(--ease),visibility .28s; padding-top: 14px; position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); }
.product-page .nav-menu .has-drop:hover .nav-drop,.product-page .nav-menu .has-drop:focus-within .nav-drop{ opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%); }
.product-page .nav-menu .nav-drop-list,.product-page .nav-menu .nav-sub{ flex-direction: column; align-items: stretch; gap: 0px; margin: 0px; padding: 0px; list-style: none; display: block; }
.product-page .nav-menu .nav-drop-list{ backdrop-filter: blur(14px); border: 1px solid var(--line); text-align: left; background: rgba(255, 255, 255, 0.98); border-radius: 16px; width: 286px; padding: 0.5rem; box-shadow: rgba(23, 24, 28, 0.34) 0px 26px 60px -24px; }
.product-page .nav-menu .nav-drop-list > li + li{ margin-top: 0.1rem; }
.product-page .nav-menu .nav-drop-list > li > a,.product-page .nav-menu .nav-drop-list > li > .nd-head{ transition: background .25s var(--ease); border-radius: 10px; flex-direction: row; align-items: center; gap: 0.7rem; padding: 0.58rem 0.6rem; display: flex; }
.product-page .nav-menu .nav-drop-list > li > a:hover{ background: var(--sunk); }
.product-page .nav-menu .nav-drop-list > li > .nd-head{ cursor: default; }
.product-page .nav-menu .nav-drop-list img{ flex: 0 0 auto; width: 26px; height: 26px; }
.product-page .nav-menu .nav-drop .nd-t{ flex-direction: column; align-items: flex-start; gap: 0.12em; min-width: 0px; display: flex; }
.product-page .nav-menu .nav-drop .nd-kana{ color: var(--ink); letter-spacing: 0.03em; white-space: nowrap; font-size: 0.86rem; font-weight: 700; }
.product-page .nav-menu .nav-drop .nd-en{ letter-spacing: 0.1em; color: var(--faint); white-space: nowrap; font-family: Gotham, Montserrat, system-ui, sans-serif; font-size: 0.56rem; font-weight: 500; }
.product-page .nav-menu .nav-sub{ border-left: 1px solid var(--line-2); margin: 0.05rem 0px 0.3rem 2.2rem; padding-left: 0.8rem; }
.product-page .nav-menu .nav-sub > li + li{ margin-top: 0.05rem; }
.product-page .nav-menu .nav-sub a{ transition: background .25s var(--ease); border-radius: 8px; flex-direction: column; align-items: flex-start; gap: 0.1em; padding: 0.36rem 0.5rem; display: flex; }
.product-page .nav-menu .nav-sub a:hover{ background: var(--sunk); }
.product-page .nav-menu .nav-sub .sn{ letter-spacing: 0.08em; color: var(--graphite); white-space: nowrap; font-family: Gotham, Montserrat, system-ui, sans-serif; font-size: 0.68rem; font-weight: 500; }
.product-page .nav-menu .nav-sub a:hover .sn{ color: var(--glow); }
.product-page .nav-menu .nav-sub .sj{ letter-spacing: 0.03em; color: var(--faint); white-space: nowrap; font-size: 0.56rem; }
@media (max-width: 768px){.product-page .nav-menu .nav-drop{ opacity: 1; visibility: visible; pointer-events: auto; padding-top: 0.5rem; position: static; transform: none; }}
@media (max-width: 768px){.product-page .nav-menu .nav-drop-list{ width: auto; box-shadow: none; background: 0px 0px; border: 0px; padding: 0px; }}
@media (max-width: 768px){.product-page .nav-menu .nav-drop-list > li > a,.product-page .nav-menu .nav-drop-list > li > .nd-head{ padding: 0.4rem 0px; }}
@media (max-width: 768px){.product-page .nav-menu .nav-sub{ margin-left: 2rem; }}
@media (max-width: 768px){.product-page .nav-menu .has-drop:hover .nav-drop,.product-page .nav-menu .has-drop:focus-within .nav-drop{ transform: none; }}
.product-page .nav-burger[aria-expanded="true"] span:nth-child(1){top:21.5px;transform:rotate(45deg)}.product-page .nav-burger[aria-expanded="true"] span:nth-child(2){top:21.5px;transform:rotate(-45deg)}
.product-page .zc-page-end{--pt:clamp(140px,14vw,220px);padding-top:var(--pt);background:linear-gradient(180deg,#f7f7f4 0,#dfe2ea calc(var(--pt)*.22),#8d96b5 calc(var(--pt)*.5),#2f3a6c calc(var(--pt)*.78),#161642 var(--pt),#0f1236 calc(var(--pt) + (100% - var(--pt))*.55),#0a0c24 100%)}
@media (max-width:768px){.product-page .nav-menu .has-drop:hover .nav-drop,.product-page .nav-menu .has-drop:focus-within .nav-drop{transform:none}.product-page .nav-menu:not(.is-open) .has-drop .nav-drop{visibility:hidden;pointer-events:none}}
/* ===== ATS / SIGNAL: 文字サイズを SKILL NODE・ゾスコンにそろえる =====
共通の .lower h3/h4/p (21px / 17px / 14px) が効いて、ATS・SIGNAL だけ文字が大きく見えていた。
SKILL NODE と同じ大きさにする (個別に大きさを決めている見出しは :where で詳細度を上げずに残す)。 */
.ats .hero-copy h1,.signal .hero-copy h1{font-size:47px;line-height:1.48;letter-spacing:.035em}
:where(.ats,.signal) .lower h3{font-size:18px!important;font-weight:500!important;line-height:1.6!important}
:where(.ats,.signal) .lower h4{font-size:16px!important;font-weight:500!important}
:where(.ats,.signal) .lower :is(h3,h4)[class*='font-bold']{font-weight:500!important}
:where(.ats,.signal) .lower p{font-size:13px!important;line-height:1.95!important}
:where(.ats,.signal) .lower h2 ~ p{font-size:14px!important;line-height:2.05!important}
@media(min-width:769px) and (max-width:1100px){
.ats .hero-copy h1,.signal .hero-copy h1{font-size:38px}
}
@media(max-width:768px){
.ats .hero-copy h1,.signal .hero-copy h1{font-size:32px;line-height:1.55;letter-spacing:.02em}
:where(.ats,.signal) .lower h2 ~ p{font-size:13px!important}
}
/* ===== FV: 5つのLP (ゾスキャリ・ゾスコン・ATS・SIGNAL・SKILL NODE) で見出し・本文・ボタンをそろえる =====
- サービス名の下の英字は削除したので、ロゴと次の要素の間はここで空ける
- 見出し・本文・ボタンの書体はゾスキャリ・ゾスコンと同じ (ヒラギノ角ゴ / 游ゴシック)
- ボタンは 212×56 (SP 196×50)、文字 14px/500 (SP 13px)、矢印 Arial 22px (SP 20px) */
.product-hero .product-brand{margin-bottom:30px}
.skill-node .figma-fv-ai{margin-bottom:30px}
body.product-page :is(.hero-copy,.figma-fv-copy) :is(h1,h1 *,.hero-lead,.figma-fv-lead,.pill,.figma-fv-cta){font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif!important}
body.product-page :is(.hero-lead,.figma-fv-lead){font-size:14px;line-height:2.05;font-weight:400}
body.product-page :is(.hero-copy .pill,.figma-fv-cta){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-width:212px;height:56px;min-height:56px;padding:0 24px 0 28px;border-radius:999px;font-size:14px;font-weight:500;line-height:1;letter-spacing:.04em}
body.product-page :is(.hero-copy .pill,.figma-fv-cta) span{font:300 22px/1 Arial,sans-serif!important}
@media(max-width:768px){
.product-hero .product-brand{margin-bottom:22px}
.skill-node .figma-fv-ai{margin-bottom:22px}
body.product-page :is(.hero-lead,.figma-fv-lead){font-size:12px;line-height:1.9}
body.product-page :is(.hero-copy .pill,.figma-fv-cta){gap:32px;min-width:196px;height:50px;min-height:50px;padding:0 20px 0 24px;font-size:13px}
body.product-page :is(.hero-copy .pill,.figma-fv-cta) span{font-size:20px!important}
}
/* ==========================================================
お役立ち資料: 会社紹介資料の下に、資料をカードで並べる (参考: baigie.me/document のレイアウト)
表紙のパネル → シリーズ名 → 丸矢印つきの資料名。カード全体が資料請求フォームへのリンク
PC 3列 / タブレット 2列 / SP 1列
========================================================== */
.svc-material-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.svc-material-list a{display:flex;flex-direction:column;height:100%;color:var(--svc-ink);text-decoration:none}
.svc-material-cover{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:color-mix(in srgb,var(--svc-ink),transparent 95%);overflow:hidden}
.svc-material-cover img{display:block;height:80%;width:auto;aspect-ratio:480/679;object-fit:cover;box-shadow:0 14px 30px color-mix(in srgb,var(--svc-ink),transparent 82%);transition:transform .35s ease,box-shadow .35s ease}
.svc-material-list a:hover .svc-material-cover img{transform:translateY(-6px);box-shadow:0 22px 40px color-mix(in srgb,var(--svc-ink),transparent 76%)}
.svc-material-series{display:flex;gap:10px;margin-top:22px;font-size:12px;line-height:1.6;letter-spacing:.06em;opacity:.7}
.svc-material-series span{font-family:Montserrat,"Noto Sans JP",sans-serif}
.svc-material-title{display:flex;align-items:flex-start;gap:10px;margin-top:8px;font-size:20px;font-weight:600;line-height:1.55}
.svc-material-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:.3em;border:1px solid currentColor;border-radius:50%;font:400 11px/1 Arial,sans-serif;transition:background .25s,color .25s,border-color .25s}
.svc-material-name{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color .25s}
.svc-material-list a:hover .svc-material-name{text-decoration-color:currentColor}
.svc-material-list a:hover .svc-material-arrow{background:var(--svc);border-color:var(--svc);color:#fff}
.svc-material-lead{margin-top:10px;font-size:13px;line-height:1.85;opacity:.75}
.svc-material-all{margin:48px 0 0;text-align:center}
@media(max-width:1024px){.svc-material-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}}
@media(max-width:640px){
.svc-material-list{grid-template-columns:1fr;gap:40px}
.svc-material-cover{aspect-ratio:16/10}
.svc-material-series{margin-top:16px}
.svc-material-title{font-size:17px}
.svc-material-lead{font-size:12px}
}
/* ゾスAI の静的ページには .svc-text-link が無いので、「まとめて請求する」のリンクだけここで定義 */
.svc-material-all .svc-text-link{display:inline-flex;gap:24px;align-items:center;font-size:13px;line-height:1.6;padding:12px 0;border-bottom:1px solid currentColor;color:var(--svc-ink);text-decoration:none}
.svc-material-all .svc-text-link>span{font-size:20px}
/* ==========================================================
お役立ち資料: 資料の一覧は /document/ に集約。ここには資料ページへの案内カードだけを置く
(サイト本体の lp/src/imports/service-pages/design-refinement.css と同じ見た目)
PC: 左に文言・右に表紙3枚 / SP: 縦積み
========================================================== */
.svc-resource-link.svc-section{padding:72px 0}
.svc-resource-link-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;padding:44px 56px;border-radius:24px;background:var(--svc-soft);border:1px solid color-mix(in srgb,var(--svc-ink),transparent 88%);overflow:hidden;color:var(--svc-ink);text-decoration:none;transition:transform .3s,box-shadow .3s}
.svc-resource-link-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -28px color-mix(in srgb,var(--svc-ink),transparent 55%)}
.svc-resource-link-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.svc-resource-link-lead{font-size:15px;line-height:1.8;opacity:.8}
.svc-resource-link-title{display:inline-flex;align-items:center;gap:16px;font-size:clamp(24px,2.6vw,34px);font-weight:600;line-height:1.4;letter-spacing:.02em}
.svc-resource-link-arrow{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid currentColor;font-size:16px;transition:background .25s,border-color .25s,color .25s}
.svc-resource-link-card:hover .svc-resource-link-arrow{background:var(--svc);border-color:var(--svc);color:#fff}
.svc-resource-link-note{font-size:12px;line-height:1.8;opacity:.65}
.svc-resource-link-covers{position:relative;display:block;width:260px;height:120px}
.svc-resource-link-covers img{position:absolute;bottom:-60px;width:108px;height:auto;aspect-ratio:480/679;object-fit:cover;border-radius:4px;box-shadow:0 14px 30px color-mix(in srgb,var(--svc-ink),transparent 78%);transition:transform .35s}
.svc-resource-link-covers img:nth-child(1){left:0;transform:rotate(-8deg)}
.svc-resource-link-covers img:nth-child(2){left:76px;bottom:-40px;z-index:2}
.svc-resource-link-covers img:nth-child(3){left:152px;transform:rotate(8deg)}
.svc-resource-link-card:hover .svc-resource-link-covers img:nth-child(2){transform:translateY(-8px)}
@media(max-width:768px){
.svc-resource-link.svc-section{padding:56px 0}
.svc-resource-link-card{grid-template-columns:1fr;gap:28px;padding:32px 24px 0}
.svc-resource-link-lead{font-size:13px}
.svc-resource-link-title{font-size:22px}
.svc-resource-link-arrow{width:34px;height:34px}
.svc-resource-link-covers{width:240px;height:84px;margin:0 auto}
.svc-resource-link-covers img{width:96px}
.svc-resource-link-covers img:nth-child(2){left:72px}
.svc-resource-link-covers img:nth-child(3){left:144px}
}
/* OUR SERVICES の一番下: お役立ち資料 (3 サービス共通のページなので、区切り線で分ける) */
.product-page .nav-menu .nav-drop-list > li.nd-res{margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--line)}
.product-page .nav-menu .nd-res-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-2);color:var(--graphite);transition:color .25s,border-color .25s}
.product-page .nav-menu .nd-res a:hover .nd-res-icon{border-color:var(--glow);color:var(--glow)}