/* ========================================================= SOURCE BLOCK: legacy-core-1 Cascade order preserved from approved index.html ========================================================= */ :root{--navy:#071b36;--navy2:#123e6d;--blue:#2e6299;--pale:#edf4fa;--pale2:#e4eef7;--text:#173554;--muted:#587087;--line:rgba(7,27,54,.14);--yellow:#e6bd20;--max:1180px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--pale);font-family:"Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;line-height:1.75;letter-spacing:.025em;overflow-x:hidden}body.loading{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(calc(100% - 48px),var(--max));margin:auto}.section{position:relative;z-index:3;padding:92px 0;background:rgba(237,244,250,.91)}.section.alt{background:rgba(228,238,247,.92)}.section.navy{color:#fff;background:rgba(7,27,54,.96)}.section.navy .title{color:#fff}.section.navy .lead{color:rgba(255,255,255,.7)}.eyebrow{display:block;margin-bottom:10px;color:var(--blue);font-size:.78rem;font-weight:800;letter-spacing:.11em}.title{margin:0;color:var(--navy);font-size:clamp(2rem,3.8vw,2.8rem);line-height:1.35;letter-spacing:-.02em}.lead{max-width:720px;margin:18px 0 0;color:var(--muted);font-size:1rem}.reveal{opacity:0;transform:translateY(15px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}.reveal.show{opacity:1;transform:none}.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s} /* intro */ .intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 50% 45%,#244d82,#0b2548 48%,#06152a 100%);transition:opacity .8s ease,visibility .8s ease}.intro.done{opacity:0;visibility:hidden}.intro-skip{position:absolute;right:22px;top:20px;border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;padding:7px 14px;cursor:pointer}.intro-stage{position:relative;width:min(94vw,980px);height:min(72vh,560px);display:grid;place-items:center}.intro-brand{display:flex;align-items:center;justify-content:center;gap:42px;width:100%;transition:.72s ease}.intro-brand.away{opacity:0;filter:blur(12px);transform:scale(.95)}.intro-mark{position:relative;width:180px;aspect-ratio:1}.intro-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.intro-left{clip-path:inset(0 50% 0 0);transform:translateX(-46px);opacity:0}.intro-right{clip-path:inset(0 0 0 50%);transform:translateX(46px);opacity:0}.intro-whole{opacity:0}.intro-mark.join .intro-left{animation:joinL 1s cubic-bezier(.2,.85,.2,1) forwards}.intro-mark.join .intro-right{animation:joinR 1s cubic-bezier(.2,.85,.2,1) forwards}.intro-mark.joined .intro-left,.intro-mark.joined .intro-right{opacity:0}.intro-mark.joined .intro-whole{animation:whole .45s ease forwards}.intro-name{position:relative;width:min(68vw,650px);min-height:140px;display:grid;place-items:center}.intro-company{width:100%;opacity:0;transform:translateY(10px)}.intro-company.in{animation:fadeIn .75s ease forwards}.intro-company.out{animation:fadeOut .65s ease forwards}.intro-division{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:"Yu Mincho",serif;font-size:clamp(2.6rem,6vw,5rem);font-weight:700;letter-spacing:.12em;opacity:0;filter:blur(8px)}.intro-division.in{animation:divIn .75s ease forwards}.intro-plate{position:absolute;width:min(68vw,480px);max-height:72vh;object-fit:contain;opacity:0;filter:blur(14px);transform:scale(.9)}.intro-plate.in{animation:plateIn 1s cubic-bezier(.2,.8,.2,1) forwards}@keyframes joinL{to{opacity:1;transform:none}}@keyframes joinR{to{opacity:1;transform:none}}@keyframes whole{to{opacity:1}}@keyframes fadeIn{to{opacity:1;transform:none}}@keyframes fadeOut{to{opacity:0;filter:blur(10px);transform:scale(.97)}}@keyframes divIn{to{opacity:1;filter:blur(0)}}@keyframes plateIn{to{opacity:1;filter:blur(0);transform:none}} /* header */ .header{position:fixed;z-index:50;top:0;left:0;width:100%;background:rgba(239,245,250,.93);border-bottom:1px solid rgba(7,27,54,.08);backdrop-filter:blur(12px);transition:.3s}.header.scrolled{background:rgba(239,245,250,.98);box-shadow:0 7px 22px rgba(7,27,54,.08)}.header-inner{width:min(calc(100% - 28px),1320px);margin:auto;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:block;margin-left:-4px;flex:0 0 auto}.brand img{width:285px;max-height:68px;object-fit:contain;object-position:left center}.nav{display:flex;align-items:center;gap:7px}.nav a{display:block;padding:12px 16px;color:var(--navy);font-size:.84rem;font-weight:800;transition:background .22s,color .22s}.nav a:hover,.nav a:focus-visible{color:#fff;background:var(--navy);outline:none}.menu{display:none;width:48px;height:42px;border:0;color:#fff;background:var(--navy);cursor:pointer} /* scaffold background - absent on hero/footer */ .scaffold-bg{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}.scaffold-bg svg{width:105%;height:105%;margin:-2.5%;animation:drift 20s ease-in-out infinite alternate}.scaffold-copy.dark{color:var(--navy);opacity:.14}.scaffold-copy.light{color:#c6dced;opacity:.10;transform:translate(5px,3px)}.beam{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:build 14s var(--d) ease-in-out infinite}.brace{stroke-width:1.25}.joint{fill:currentColor;opacity:0;animation:joint 14s var(--d) ease-in-out infinite}.foot{fill:var(--yellow);stroke:currentColor;stroke-width:1;opacity:0;animation:foot 14s var(--d) ease-in-out infinite}.data{fill:none;stroke:#4b8dc5;stroke-width:2;stroke-dasharray:7 28;vector-effect:non-scaling-stroke;opacity:0;animation:data 14s var(--d) linear infinite}@keyframes build{0%,6%{stroke-dashoffset:1;opacity:0}15%{opacity:.4}26%,76%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:-1;opacity:0}}@keyframes joint{0%,22%{opacity:0}30%,77%{opacity:.75}90%,100%{opacity:0}}@keyframes foot{0%,4%{opacity:0}12%,80%{opacity:.9}92%,100%{opacity:0}}@keyframes data{0%,28%{opacity:0;stroke-dashoffset:90}36%,74%{opacity:.65}88%,100%{opacity:0;stroke-dashoffset:-40}}@keyframes drift{from{transform:translate3d(-7px,4px,0) scale(1.005)}to{transform:translate3d(8px,-5px,0) scale(1.015)}} /* hero: opaque above scaffold, photo clear */ .hero{position:relative;z-index:5;min-height:92svh;display:grid;align-items:center;overflow:hidden;padding:120px 0 68px;background:#dce8f2}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 64%;filter:saturate(.98) contrast(1.02) brightness(.99);animation:heroZoom 18s ease-in-out infinite alternate}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(220,232,242,.94) 0%,rgba(220,232,242,.86) 30%,rgba(220,232,242,.60) 44%,rgba(220,232,242,.24) 60%,rgba(7,27,54,.05) 78%,rgba(7,27,54,0) 100%)}.hero .container{position:relative;z-index:2}.hero-copy{max-width:700px}.hero-kicker{display:block;margin-bottom:16px;color:var(--blue);font-weight:800;font-size:.84rem}.hero h1{margin:0;color:var(--navy);font-size:clamp(2.7rem,5.5vw,4.35rem);line-height:1.2;letter-spacing:-.04em}.hero p{max-width:640px;margin:24px 0 0;color:#34536e;font-size:1.03rem}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:11px 22px;border:1px solid var(--navy);border-radius:5px;font-size:.88rem;font-weight:800;transition:.22s}.btn.primary{color:#fff;background:var(--navy)}.btn.secondary{color:var(--navy);background:rgba(239,245,250,.78)}.btn:hover{transform:translateY(-2px)}@keyframes heroZoom{to{transform:scale(1.045)}} /* content */ .feature-grid,.other-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:58px;align-items:center}.photo{overflow:hidden;min-height:410px;border-radius:10px}.photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.035);transition:transform 1s ease}.photo.show img{transform:scale(1)}.feature-list{margin-top:28px;border-top:1px solid var(--line)}.feature{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}.feature b{color:var(--blue);font-size:.85rem}.feature h3{margin:0;color:var(--navy);font-size:1.14rem}.feature p{margin:6px 0 0;color:var(--muted);font-size:.9rem}.service-photo{height:350px;margin:38px 0;overflow:hidden;border-radius:10px}.service-photo img{width:100%;height:100%;object-fit:cover}.services{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(255,255,255,.22)}.service{padding:28px 30px 28px 0;border-bottom:1px solid rgba(255,255,255,.22)}.service:nth-child(odd){border-right:1px solid rgba(255,255,255,.22);padding-right:40px}.service:nth-child(even){padding-left:40px}.service b{color:#b7cde1;font-size:.76rem}.service h3{margin:8px 0 0;font-size:1.22rem}.service p{margin:9px 0 0;color:rgba(255,255,255,.66);font-size:.9rem}.service ul{display:flex;flex-wrap:wrap;gap:5px 15px;margin:15px 0 0;padding:0;list-style:none;color:rgba(255,255,255,.88);font-size:.78rem}.service li:before{content:"・"}.other-copy p{color:var(--muted)} /* contact */ .contact{position:relative;z-index:4;padding:86px 0;color:#fff;background:rgba(7,27,54,.97)}.contact-grid{display:grid;grid-template-columns:1fr .76fr;gap:60px}.contact .title{color:#fff}.contact p{color:rgba(255,255,255,.7)}.flow{border-top:1px solid rgba(255,255,255,.24)}.flow-row{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.24)}.flow-row b{color:#b7cde1;font-size:.78rem}.flow-row strong{display:block}.flow-row span{display:block;color:rgba(255,255,255,.62);font-size:.8rem} /* footer: opaque, no scaffold */ .footer{position:relative;z-index:20;background:#07172b;color:#fff;padding:58px 0 24px}.footer-inner{width:min(calc(100% - 48px),1120px);margin:auto}.footer-main{display:grid;grid-template-columns:1.08fr 1.45fr;gap:80px;align-items:start}.footer-logo{width:285px;max-height:76px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1);opacity:.96}.footer-address{margin-top:26px;display:grid;grid-template-columns:54px 1fr;gap:12px;color:rgba(255,255,255,.74);font-size:.82rem}.footer-address strong{color:#fff}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 34px}.footer-links a{display:block;padding:5px 0;color:rgba(255,255,255,.9);font-size:.86rem;font-weight:700;transition:color .2s}.footer-links a:hover{color:#a9c7e2}.footer-rule{margin:48px 0 20px;border:0;border-top:1px solid rgba(255,255,255,.48)}.copyright{text-align:center;color:rgba(255,255,255,.62);font-size:.76rem} @media(max-width:980px){.nav a{padding:11px 10px}.brand img{width:245px}.feature-grid,.other-grid,.contact-grid{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr;gap:42px}.footer-links{max-width:700px}.scaffold-bg{opacity:.8}} @media(max-width:720px){.container{width:min(calc(100% - 28px),var(--max))}.header-inner{width:calc(100% - 20px);min-height:68px}.brand{margin-left:-2px}.brand img{width:205px;max-height:54px}.menu{display:block}.nav{display:none}.nav.open{position:fixed;display:grid;top:68px;left:10px;right:10px;gap:3px;padding:12px;background:#edf4fa;box-shadow:0 14px 35px rgba(7,27,54,.18)}.nav.open a{padding:12px}.section{padding:70px 0}.hero{min-height:84svh;padding-top:96px}.hero h1{font-size:clamp(2.35rem,11vw,3.1rem)}.hero:after{background:linear-gradient(90deg,rgba(220,232,242,.91),rgba(220,232,242,.74) 50%,rgba(220,232,242,.35))}.photo{min-height:280px}.service-photo{height:260px}.services{grid-template-columns:1fr}.service,.service:nth-child(odd),.service:nth-child(even){padding:24px 0;border-right:0}.footer{padding-top:46px}.footer-main{gap:34px}.footer-logo{width:230px}.footer-links{grid-template-columns:repeat(2,1fr)}.intro-brand{flex-direction:column;gap:12px}.intro-mark{width:120px}.intro-name{width:min(88vw,520px);min-height:110px}.intro-division{font-size:clamp(2.3rem,11vw,3.8rem)}.intro-plate{width:min(82vw,420px)}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* ========================================================= RESTORE: ORIGINAL OPENING + SECTION MOTION ========================================================= */ /* Header logo 1.3x / slightly more left */ .header-inner{ width:min(calc(100% - 18px),1400px)!important; min-height:94px!important; } .brand{margin-left:-8px!important} .brand img{ width:370px!important; max-height:86px!important; } /* Hover = same navy as primary button, rounded */ .nav a{ border-radius:8px!important; transition:background .22s ease,color .22s ease,transform .22s ease!important; } .nav a:hover,.nav a:focus-visible{ background:var(--navy)!important; color:#fff!important; transform:translateY(-1px); } /* Footer logo: same original image, no color conversion */ .footer-logo{ filter:none!important; opacity:1!important; width:300px!important; max-height:90px!important; } /* Hero offset for taller header */ .hero{padding-top:138px!important} /* ---------- Strengths: photo assembles in slices ---------- */ #strengths .feature-grid{position:relative} .feature-progress{ position:absolute;left:-24px;top:84px;bottom:22px;width:2px; overflow:hidden;background:rgba(7,27,54,.09); } .feature-progress span{ display:block;width:100%;height:100%;background:var(--blue); transform:translateY(-100%); } #strengths.is-active .feature-progress span{ animation:featureProgress 1.8s .2s cubic-bezier(.22,1,.36,1) forwards; } .feature-mosaic{isolation:isolate;position:relative} .mosaic-slice{ position:absolute;z-index:3;top:0;bottom:0; left:calc(var(--slice)*16.6667%);width:16.75%; background:var(--pale2);transform-origin:top; } #strengths.is-active .mosaic-slice{ animation:mosaicOpen .9s calc(.12s + var(--slice)*.08s) cubic-bezier(.77,0,.18,1) forwards; } .mosaic-corner{position:absolute;z-index:4;width:38px;height:38px;opacity:0} .mosaic-corner--tl{left:13px;top:13px;border-left:2px solid #fff;border-top:2px solid #fff} .mosaic-corner--br{right:13px;bottom:13px;border-right:2px solid #fff;border-bottom:2px solid #fff} #strengths.is-active .mosaic-corner{animation:cornerIn .45s 1.05s forwards} .feature{position:relative;overflow:hidden} .feature:after{ content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--blue); } .feature.show:after{right:0;transition:right .8s .18s cubic-bezier(.22,1,.36,1)} @keyframes featureProgress{to{transform:none}} @keyframes mosaicOpen{to{transform:scaleY(0)}} @keyframes cornerIn{to{opacity:.82}} /* ---------- Services: four modules connect ---------- */ .service-system{position:relative} .service-circuit{ position:absolute;z-index:0;inset:0;width:100%;height:100%; pointer-events:none;opacity:.72; } .circuit-path{ fill:none;stroke:rgba(183,205,225,.33);stroke-width:1.5; vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1; } #services.is-active .circuit-path{ animation:circuitDraw 1.45s .52s cubic-bezier(.22,1,.36,1) forwards; } .circuit-node{fill:#fff;opacity:0} #services.is-active .circuit-node{animation:circuitNode .4s 1.65s forwards} .circuit-pulse{fill:#fff;opacity:0;filter:drop-shadow(0 0 6px rgba(183,205,225,.85))} #services.is-active .circuit-pulse--a{animation:pulseA 5.3s 1.9s linear infinite} #services.is-active .circuit-pulse--b{animation:pulseB 5.3s 4.55s linear infinite} .services{position:relative;z-index:2} .service-enter{ background:rgba(7,27,54,.70); transition:opacity .75s ease,transform .85s cubic-bezier(.22,1,.36,1),background .3s ease; } .service-enter:hover{background:rgba(16,49,84,.88)} .service-enter--tl{transform:translate(-28px,-22px)} .service-enter--tr{transform:translate(28px,-22px)} .service-enter--bl{transform:translate(-28px,22px)} .service-enter--br{transform:translate(28px,22px)} .service-enter.show{transform:none} .service{position:relative} .service:before{ content:"";position:absolute;left:0;top:0;width:0;height:2px;background:#b7cde1; transition:width .8s .42s cubic-bezier(.22,1,.36,1); } .service.show:before{width:100%} @keyframes circuitDraw{to{stroke-dashoffset:0}} @keyframes circuitNode{to{opacity:1}} @keyframes pulseA{ 0%{opacity:0;transform:translate(250px,130px)}5%{opacity:1} 33%{transform:translate(500px,130px)}50%{transform:translate(500px,390px)} 95%{opacity:1}100%{opacity:0;transform:translate(750px,390px)} } @keyframes pulseB{ 0%{opacity:0;transform:translate(750px,130px)}5%{opacity:1} 33%{transform:translate(500px,130px)}50%{transform:translate(500px,390px)} 95%{opacity:1}100%{opacity:0;transform:translate(250px,390px)} } /* ---------- Other business: scaffold-like shutters ---------- */ .other-shutter{position:relative;isolation:isolate} .shutter-panel{ position:absolute;z-index:3;top:0;bottom:0; left:calc(var(--panel)*16.6667%);width:16.8%; background:var(--navy);border-right:1px solid rgba(255,255,255,.12); } #other.is-active .shutter-panel:nth-of-type(odd){ animation:shutterUp .85s calc(.08s + var(--panel)*.07s) cubic-bezier(.77,0,.18,1) forwards; } #other.is-active .shutter-panel:nth-of-type(even){ animation:shutterDown .85s calc(.08s + var(--panel)*.07s) cubic-bezier(.77,0,.18,1) forwards; } @keyframes shutterUp{to{transform:translateY(-102%)}} @keyframes shutterDown{to{transform:translateY(102%)}} /* ---------- Contact: live status + moving signal ---------- */ .contact-grid{position:relative} .contact-status{ grid-column:2; display:flex;align-items:center;gap:9px; margin-bottom:-36px; color:rgba(255,255,255,.62); font:700 .68rem/1 monospace;letter-spacing:.12em; } .status-dot{ width:8px;height:8px;border-radius:50%;background:#78d3a3; animation:statusPulse 1.8s ease-out infinite; } .flow{position:relative;overflow:visible} .flow-signal{ position:absolute;z-index:2;left:-4px;top:0;width:8px;height:8px;border-radius:50%; background:#fff;box-shadow:0 0 12px rgba(255,255,255,.8);opacity:0; } #contact.is-active .flow-signal{animation:flowSignal 3.8s .75s ease-in-out infinite} @keyframes statusPulse{ 0%{box-shadow:0 0 0 0 rgba(120,211,163,.42)} 70%{box-shadow:0 0 0 9px rgba(120,211,163,0)} 100%{box-shadow:0 0 0 0 rgba(120,211,163,0)} } @keyframes flowSignal{ 0%{top:0;opacity:0}8%{opacity:1}31%{top:28%} 58%{top:61%}88%{opacity:1}100%{top:calc(100% - 8px);opacity:0} } @media(max-width:980px){ .header-inner{min-height:86px!important} .brand img{width:315px!important;max-height:76px!important} .feature-progress,.service-circuit{display:none} .contact-status{grid-column:1;margin:4px 0 -30px} } @media(max-width:720px){ .header-inner{min-height:76px!important} .brand{margin-left:-5px!important} .brand img{width:265px!important;max-height:65px!important} .hero{padding-top:112px!important} .intro-brand--original{gap:10px;flex-direction:column} .intro-brand--original.morph{transform:none} .intro-brand--original.away{transform:scale(.94)} .intro-mark{width:116px} .intro-name--morph{width:min(90vw,520px);height:116px} .mosaic-slice,.shutter-panel{width:25%;left:calc(var(--slice, var(--panel))*25%)} .mosaic-slice:nth-of-type(n+5),.shutter-panel:nth-of-type(n+5){display:none} .service-enter--tl,.service-enter--tr,.service-enter--bl,.service-enter--br{transform:translateY(20px)} .footer-logo{width:255px!important} } @media(prefers-reduced-motion:reduce){ .mosaic-slice,.shutter-panel{display:none} .circuit-path{stroke-dashoffset:0} .circuit-pulse,.flow-signal,.status-dot{animation:none!important} } /* INTRO — copied from supplied reference file */ .intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 46%,#153e7c 0,#0a2853 35%,#06172f 72%,#020912 100%);transition:opacity .85s ease,visibility .85s ease}.intro.done{opacity:0;visibility:hidden}.intro:before{content:"";position:absolute;inset:-20%;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:58px 58px;transform:perspective(780px) rotateX(60deg) translateY(27%);animation:grid 10s linear infinite}.intro:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 28%,rgba(2,13,31,.62) 100%);pointer-events:none}.skip{position:absolute;z-index:10;right:24px;top:22px;padding:8px 15px;border:1px solid rgba(255,255,255,.28);border-radius:99px;color:rgba(255,255,255,.75);background:rgba(255,255,255,.05);font-size:.7rem;letter-spacing:.15em;cursor:pointer}.intro-stage{position:relative;z-index:2;width:min(94vw,1040px);height:min(78vh,620px);display:grid;place-items:center}.brand-stage,.plate-stage{position:absolute;inset:0;display:grid;place-items:center}.brand-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4.8vw,58px);width:100%;transform:translateY(0);transition:opacity .8s ease,filter .8s ease,transform .9s var(--ease)}.brand-row.to-plate{opacity:0;filter:blur(12px);transform:scale(.94)}.handmark{position:relative;width:clamp(125px,17vw,190px);aspect-ratio:1;filter:drop-shadow(0 18px 30px rgba(2,13,31,.35));flex:0 0 auto}.handmark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.logo-left{clip-path:polygon(0 0,52% 0,52% 100%,0 100%);transform:translateX(-46px);opacity:0}.logo-right{clip-path:polygon(48% 0,100% 0,100% 100%,48% 100%);transform:translateX(46px);opacity:0}.logo-whole{opacity:0}.handmark.join .logo-left{animation:leftJoin 1s var(--ease) forwards}.handmark.join .logo-right{animation:rightJoin 1s var(--ease) forwards}.handmark.joined .logo-whole{animation:wholeIn .26s ease forwards}.handmark.joined .logo-left,.handmark.joined .logo-right{animation:halvesOut .22s ease forwards}.spark{position:absolute;left:50%;top:52%;width:18%;aspect-ratio:1;border:2px solid var(--yellow);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)}.handmark.joined .spark{animation:spark .72s ease-out forwards}.word-stage{position:relative;width:clamp(350px,61vw,730px);height:clamp(100px,15vw,150px);display:grid;place-items:center;flex:0 1 auto}.company-word,.division-word{position:absolute;max-height:100%;object-fit:contain;transform-origin:center}.company-word{width:100%;opacity:0;transform:translateY(10px)}.company-word.in{animation:wordIn .85s var(--ease) forwards}.company-word.morph{animation:companyMorph .48s ease forwards}.division-word{width:clamp(300px,47vw,570px);opacity:0;filter:blur(10px);transform:scale(.94)}.division-word.in{animation:divisionMorph .62s var(--ease) forwards}.morph-flare{position:absolute;left:50%;top:50%;width:88%;height:105%;opacity:0;transform:translate(-50%,-50%);background:linear-gradient(100deg,transparent 26%,rgba(255,255,255,.8) 48%,transparent 68%);filter:blur(8px);pointer-events:none}.morph-flare.run{animation:flare .9s ease forwards}.plate-stage{opacity:0;filter:blur(14px);transform:scale(.9);transition:opacity 1.05s var(--ease),filter 1.05s ease,transform 1.05s var(--ease)}.plate-stage.in{opacity:1;filter:blur(0);transform:scale(1)}.plate-halo{position:absolute;width:min(86vw,650px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(105,177,255,.18),rgba(41,99,173,.08) 45%,transparent 72%);filter:blur(6px)}.intro-plate{position:relative;width:min(66vw,445px);max-height:72vh;object-fit:contain;filter:drop-shadow(0 25px 55px rgba(2,13,31,.3))}.intro-caption{position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);font-size:.68rem;letter-spacing:.2em;color:rgba(255,255,255,.58);white-space:nowrap;opacity:0}.plate-stage.in .intro-caption{animation:caption .7s .45s ease forwards} @keyframes grid{to{transform:perspective(780px) rotateX(60deg) translateY(36%)}}@keyframes leftJoin{0%{opacity:0;transform:translateX(-50px) scale(.96)}35%{opacity:1}80%{transform:translateX(3px) scale(1.01)}100%{opacity:1;transform:none}}@keyframes rightJoin{0%{opacity:0;transform:translateX(50px) scale(.96)}35%{opacity:1}80%{transform:translateX(-3px) scale(1.01)}100%{opacity:1;transform:none}}@keyframes wholeIn{to{opacity:1}}@keyframes halvesOut{to{opacity:0}}@keyframes spark{0%{opacity:.9;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.3)}}@keyframes wordIn{to{opacity:1;transform:none}}@keyframes companyMorph{0%{opacity:1;filter:blur(0);transform:none}45%{opacity:.35;filter:blur(2px);transform:scale(.99)}100%{opacity:0;filter:blur(4px);transform:scale(.97)}}@keyframes divisionMorph{0%{opacity:0;filter:blur(6px);transform:scale(.96)}100%{opacity:1;filter:blur(0);transform:none}}@keyframes flare{0%{opacity:0;transform:translate(-68%,-50%)}35%{opacity:.72}100%{opacity:0;transform:translate(-32%,-50%)}}@keyframes caption{to{opacity:1}} :root{--ease:cubic-bezier(.22,1,.36,1)} /* Reference intro mobile rules */ @media(max-width:700px){ .brand-row{flex-direction:column;gap:12px} .handmark{width:112px} .word-stage{width:min(88vw,520px);height:110px} .company-word{width:100%} .division-word{width:min(74vw,410px)} .intro-plate{width:min(82vw,390px)} } /* ========================================================= BUTTON MOTION — right-to-left fill + outward ripple ========================================================= */ .btn,.simple-btn,.nav a,.menu{ --btn-fill:var(--navy); --btn-ripple:rgba(36,86,143,.50); position:relative; isolation:isolate; overflow:visible; border-radius:4px!important; transition:color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease!important; } .btn:before,.simple-btn:before,.nav a:before,.menu:before{ content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; background:var(--btn-fill); transform:scaleX(0); transform-origin:right center; transition:transform .46s cubic-bezier(.22,1,.36,1); } .btn:after,.simple-btn:after,.nav a:after,.menu:after{ content:""; position:absolute; pointer-events:none; z-index:-2; inset:-3px; border:1px solid var(--btn-ripple); border-radius:5px; opacity:0; transform:scale(1); } .btn:hover:before,.simple-btn:hover:before,.nav a:hover:before,.menu:hover:before, .btn:focus-visible:before,.simple-btn:focus-visible:before,.nav a:focus-visible:before,.menu:focus-visible:before{ transform:scaleX(1); } .btn:hover:after,.simple-btn:hover:after,.nav a:hover:after,.menu:hover:after, .btn:focus-visible:after,.simple-btn:focus-visible:after,.nav a:focus-visible:after,.menu:focus-visible:after{ animation:buttonRipple .72s ease-out; } @keyframes buttonRipple{ 0%{opacity:.58;transform:scale(1)} 100%{opacity:0;transform:scale(1.14)} } .btn:hover,.simple-btn:hover,.nav a:hover,.menu:hover, .btn:focus-visible,.simple-btn:focus-visible,.nav a:focus-visible,.menu:focus-visible{ color:#fff!important; transform:translateY(-2px); box-shadow:0 11px 25px rgba(7,27,54,.16); } .btn.primary{--btn-fill:#24568f;--btn-ripple:rgba(36,86,143,.50)} .btn.secondary{--btn-fill:var(--navy);--btn-ripple:rgba(7,27,54,.40)} .btn.light{color:var(--navy)!important;background:#fff!important;border-color:#fff!important;--btn-fill:#24568f;--btn-ripple:rgba(255,255,255,.45)} .nav a{--btn-fill:var(--navy);--btn-ripple:rgba(36,86,143,.40)} .menu{--btn-fill:#24568f;--btn-ripple:rgba(36,86,143,.46)} /* no pill-shaped CTA buttons */ .actions .btn,.contact .btn{border-radius:4px!important} /* Footer requested structure */ .footer-logo{filter:none!important;opacity:1!important} .footer-locations{display:grid;gap:20px;margin-top:28px} .footer-address{margin-top:0!important;grid-template-columns:72px 1fr!important} .footer-address a{color:inherit;transition:color .2s ease} .footer-address a:hover{color:#b8d4ee} .footer-links{align-items:start} .footer-links a{position:relative;width:max-content;max-width:100%} .footer-links a:after{content:"";position:absolute;left:0;bottom:1px;width:0;height:1px;background:#b8d4ee;transition:width .3s ease} .footer-links a:hover:after{width:100%} @media(max-width:720px){ .footer-address{grid-template-columns:1fr!important;gap:4px!important} .footer-links{grid-template-columns:1fr 1fr!important} } /* INTRO */ .intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 46%,#153e7c 0,#0a2853 35%,#06172f 72%,#020912 100%);transition:opacity .85s ease,visibility .85s ease}.intro.done{opacity:0;visibility:hidden}.intro:before{content:"";position:absolute;inset:-20%;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:58px 58px;transform:perspective(780px) rotateX(60deg) translateY(27%);animation:grid 10s linear infinite}.intro:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 28%,rgba(2,13,31,.62) 100%);pointer-events:none}.skip{position:absolute;z-index:10;right:24px;top:22px;padding:8px 15px;border:1px solid rgba(255,255,255,.28);border-radius:99px;color:rgba(255,255,255,.75);background:rgba(255,255,255,.05);font-size:.7rem;letter-spacing:.15em;cursor:pointer}.intro-stage{position:relative;z-index:2;width:min(94vw,1040px);height:min(78vh,620px);display:grid;place-items:center}.brand-stage,.plate-stage{position:absolute;inset:0;display:grid;place-items:center}.brand-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4.8vw,58px);width:100%;transform:translateY(0);transition:opacity .8s ease,filter .8s ease,transform .9s var(--ease)}.brand-row.to-plate{opacity:0;filter:blur(12px);transform:scale(.94)}.handmark{position:relative;width:clamp(125px,17vw,190px);aspect-ratio:1;filter:drop-shadow(0 18px 30px rgba(2,13,31,.35));flex:0 0 auto}.handmark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.logo-left{clip-path:polygon(0 0,52% 0,52% 100%,0 100%);transform:translateX(-46px);opacity:0}.logo-right{clip-path:polygon(48% 0,100% 0,100% 100%,48% 100%);transform:translateX(46px);opacity:0}.logo-whole{opacity:0}.handmark.join .logo-left{animation:leftJoin 1s var(--ease) forwards}.handmark.join .logo-right{animation:rightJoin 1s var(--ease) forwards}.handmark.joined .logo-whole{animation:wholeIn .26s ease forwards}.handmark.joined .logo-left,.handmark.joined .logo-right{animation:halvesOut .22s ease forwards}.spark{position:absolute;left:50%;top:52%;width:18%;aspect-ratio:1;border:2px solid var(--yellow);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)}.handmark.joined .spark{animation:spark .72s ease-out forwards}.word-stage{position:relative;width:clamp(350px,61vw,730px);height:clamp(100px,15vw,150px);display:grid;place-items:center;flex:0 1 auto}.company-word,.division-word{position:absolute;max-height:100%;object-fit:contain;transform-origin:center}.company-word{width:100%;opacity:0;transform:translateY(10px)}.company-word.in{animation:wordIn .85s var(--ease) forwards}.company-word.morph{animation:companyMorph .48s ease forwards}.division-word{width:clamp(300px,47vw,570px);opacity:0;filter:blur(10px);transform:scale(.94)}.division-word.in{animation:divisionMorph .62s var(--ease) forwards}.morph-flare{position:absolute;left:50%;top:50%;width:88%;height:105%;opacity:0;transform:translate(-50%,-50%);background:linear-gradient(100deg,transparent 26%,rgba(255,255,255,.8) 48%,transparent 68%);filter:blur(8px);pointer-events:none}.morph-flare.run{animation:flare .9s ease forwards}.plate-stage{opacity:0;filter:blur(14px);transform:scale(.9);transition:opacity 1.05s var(--ease),filter 1.05s ease,transform 1.05s var(--ease)}.plate-stage.in{opacity:1;filter:blur(0);transform:scale(1)}.plate-halo{position:absolute;width:min(86vw,650px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(105,177,255,.18),rgba(41,99,173,.08) 45%,transparent 72%);filter:blur(6px)}.intro-plate{position:relative;width:min(66vw,445px);max-height:72vh;object-fit:contain;filter:drop-shadow(0 25px 55px rgba(2,13,31,.3))}.intro-caption{position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);font-size:.68rem;letter-spacing:.2em;color:rgba(255,255,255,.58);white-space:nowrap;opacity:0}.plate-stage.in .intro-caption{animation:caption .7s .45s ease forwards} @keyframes grid{to{transform:perspective(780px) rotateX(60deg) translateY(36%)}}@keyframes leftJoin{0%{opacity:0;transform:translateX(-50px) scale(.96)}35%{opacity:1}80%{transform:translateX(3px) scale(1.01)}100%{opacity:1;transform:none}}@keyframes rightJoin{0%{opacity:0;transform:translateX(50px) scale(.96)}35%{opacity:1}80%{transform:translateX(-3px) scale(1.01)}100%{opacity:1;transform:none}}@keyframes wholeIn{to{opacity:1}}@keyframes halvesOut{to{opacity:0}}@keyframes spark{0%{opacity:.9;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.3)}}@keyframes wordIn{to{opacity:1;transform:none}}@keyframes companyMorph{0%{opacity:1;filter:blur(0);transform:none}45%{opacity:.35;filter:blur(2px);transform:scale(.99)}100%{opacity:0;filter:blur(4px);transform:scale(.97)}}@keyframes divisionMorph{0%{opacity:0;filter:blur(6px);transform:scale(.96)}100%{opacity:1;filter:blur(0);transform:none}}@keyframes flare{0%{opacity:0;transform:translate(-68%,-50%)}35%{opacity:.72}100%{opacity:0;transform:translate(-32%,-50%)}}@keyframes caption{to{opacity:1}} /* ========================================================= BUTTON / FOOTER REFINEMENT 長方形 + 右から左へデジタルワイプ。波紋演出は使用しない。 ========================================================= */ /* CTA BUTTONS */ .btn, .simple-btn{ --btn-fill:#071b36; --btn-hover:#164d80; position:relative; isolation:isolate; overflow:hidden; border-radius:2px!important; min-height:50px; padding:12px 24px; border:1px solid rgba(7,27,54,.72); font-weight:800; letter-spacing:.045em; transition: color .32s ease, border-color .32s ease, box-shadow .32s ease, transform .32s cubic-bezier(.22,1,.36,1)!important; } .btn:before, .simple-btn:before{ content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,var(--btn-hover),var(--btn-fill)); transform:scaleX(0); transform-origin:right center; transition:transform .46s cubic-bezier(.22,1,.36,1); } .btn:after, .simple-btn:after{ content:""; position:absolute; left:0; top:0; width:0; height:2px; background:#6fa6d4; box-shadow:0 calc(100% - 2px) 0 #6fa6d4; transition:width .46s .05s cubic-bezier(.22,1,.36,1); pointer-events:none; } .btn:hover, .btn:focus-visible, .simple-btn:hover, .simple-btn:focus-visible{ color:#fff!important; border-color:#245f96!important; transform:translateY(-2px)!important; box-shadow:0 12px 26px rgba(7,27,54,.18),inset 3px 0 0 #ffe227!important; outline:none; } .btn:hover:before, .btn:focus-visible:before, .simple-btn:hover:before, .simple-btn:focus-visible:before{ transform:scaleX(1); transform-origin:right center; } .btn:hover:after, .btn:focus-visible:after, .simple-btn:hover:after, .simple-btn:focus-visible:after{ width:100%; } /* Primary buttons: already navy, so hover becomes brighter digital navy */ .btn.primary, .btn-primary, .simple-btn--primary{ --btn-fill:#071b36; --btn-hover:#1a588f; border-color:#071b36; } .btn.secondary, .btn-outline, .simple-btn--secondary{ --btn-fill:#071b36; --btn-hover:#123f6c; } /* Header nav — rectangular IT-style hover, no pill */ .nav a{ position:relative; overflow:hidden; border-radius:2px!important; padding:11px 15px!important; transition:color .28s ease,border-color .28s ease,box-shadow .28s ease!important; } .nav a:before{ content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#164d80,#071b36); transform:scaleX(0); transform-origin:right center; transition:transform .40s cubic-bezier(.22,1,.36,1); } .nav a:hover, .nav a:focus-visible{ color:#fff!important; background:transparent!important; box-shadow:inset 3px 0 0 #ffe227; outline:none; } .nav a:hover:before, .nav a:focus-visible:before{ transform:scaleX(1); } /* 旧下線アニメーションは無効化 */ .nav a:not(.contact):after{display:none!important} /* Menu/skipも角丸を弱く */ .menu{ border-radius:2px!important; } /* Footer 4 columns x 2 rows */ .footer-main{ grid-template-columns:minmax(330px,.95fr) minmax(560px,1.45fr)!important; gap:72px!important; } .footer-links.footer-links--4x2{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:repeat(2,auto)!important; gap:16px 28px!important; align-content:start; } .footer-links.footer-links--4x2>a{ display:flex; align-items:center; min-height:42px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.90); font-size:.84rem; font-weight:700; transition:color .25s ease,border-color .25s ease,transform .25s ease; } .footer-links.footer-links--4x2>a:before{ content:""; width:0; height:1px; margin-right:0; background:#82afd4; transition:width .28s ease,margin-right .28s ease; } .footer-links.footer-links--4x2>a:hover{ color:#fff; border-color:#82afd4; transform:translateX(3px); } .footer-links.footer-links--4x2>a:hover:before{ width:16px; margin-right:8px; } .footer-locations{display:grid;gap:16px;margin-top:24px} .footer-address{margin-top:0!important} @media(max-width:1050px){ .footer-main{ grid-template-columns:1fr!important; gap:42px!important; } .footer-links.footer-links--4x2{ max-width:780px; } } @media(max-width:720px){ .footer-links.footer-links--4x2{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto!important; gap:8px 22px!important; } .btn,.simple-btn{ width:100%; } } /* INTRO */ .intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 46%,#153e7c 0,#0a2853 35%,#06172f 72%,#020912 100%);transition:opacity .85s ease,visibility .85s ease}.intro.done{opacity:0;visibility:hidden}.intro:before{content:"";position:absolute;inset:-20%;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:58px 58px;transform:perspective(780px) rotateX(60deg) translateY(27%);animation:grid 10s linear infinite}.intro:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 28%,rgba(2,13,31,.62) 100%);pointer-events:none}.skip{position:absolute;z-index:10;right:24px;top:22px;padding:8px 15px;border:1px solid rgba(255,255,255,.28);border-radius:99px;color:rgba(255,255,255,.75);background:rgba(255,255,255,.05);font-size:.7rem;letter-spacing:.15em;cursor:pointer}.intro-stage{position:relative;z-index:2;width:min(94vw,1040px);height:min(78vh,620px);display:grid;place-items:center}.brand-stage,.plate-stage{position:absolute;inset:0;display:grid;place-items:center}.brand-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4.8vw,58px);width:100%;transform:translateY(0);transition:opacity .8s ease,filter .8s ease,transform .9s var(--ease)}.brand-row.to-plate{opacity:0;filter:blur(12px);transform:scale(.94)}.handmark{position:relative;width:clamp(125px,17vw,190px);aspect-ratio:1;filter:drop-shadow(0 18px 30px rgba(2,13,31,.35));flex:0 0 auto}.handmark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.logo-left{clip-path:polygon(0 0,52% 0,52% 100%,0 100%);transform:translateX(-46px);opacity:0}.logo-right{clip-path:polygon(48% 0,100% 0,100% 100%,48% 100%);transform:translateX(46px);opacity:0}.logo-whole{opacity:0}.handmark.join .logo-left{animation:leftJoin 1s var(--ease) forwards}.handmark.join .logo-right{animation:rightJoin 1s var(--ease) forwards}.handmark.joined .logo-whole{animation:wholeIn .26s ease forwards}.handmark.joined .logo-left,.handmark.joined .logo-right{animation:halvesOut .22s ease forwards}.spark{position:absolute;left:50%;top:52%;width:18%;aspect-ratio:1;border:2px solid var(--yellow);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)}.handmark.joined .spark{animation:spark .72s ease-out forwards}.word-stage{position:relative;width:clamp(350px,61vw,730px);height:clamp(100px,15vw,150px);display:grid;place-items:center;flex:0 1 auto}.company-word,.division-word{position:absolute;max-height:100%;object-fit:contain;transform-origin:center}.company-word{width:100%;opacity:0;transform:translateY(10px)}.company-word.in{animation:wordIn .85s var(--ease) forwards}.company-word.morph{animation:companyMorph .48s ease forwards}.division-word{width:clamp(300px,47vw,570px);opacity:0;filter:blur(10px);transform:scale(.94)}.division-word.in{animation:divisionMorph .62s var(--ease) forwards}.morph-flare{position:absolute;left:50%;top:50%;width:88%;height:105%;opacity:0;transform:translate(-50%,-50%);background:linear-gradient(100deg,transparent 26%,rgba(255,255,255,.8) 48%,transparent 68%);filter:blur(8px);pointer-events:none}.morph-flare.run{animation:flare .9s ease forwards}.plate-stage{opacity:0;filter:blur(14px);transform:scale(.9);transition:opacity 1.05s var(--ease),filter 1.05s ease,transform 1.05s var(--ease)}.plate-stage.in{opacity:1;filter:blur(0);transform:scale(1)}.plate-halo{position:absolute;width:min(86vw,650px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(105,177,255,.18),rgba(41,99,173,.08) 45%,transparent 72%);filter:blur(6px)}.intro-plate{position:relative;width:min(66vw,445px);max-height:72vh;object-fit:contain;filter:drop-shadow(0 25px 55px rgba(2,13,31,.3))}.intro-caption{position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);font-size:.68rem;letter-spacing:.2em;color:rgba(255,255,255,.58);white-space:nowrap;opacity:0}.plate-stage.in .intro-caption{animation:caption .7s .45s ease forwards} @keyframes grid{to{transform:perspective(780px) rotateX(60deg) translateY(36%)}}@keyframes leftJoin{0%{opacity:0;transform:translateX(-50px) scale(.96)}35%{opacity:1}80%{transform:translateX(3px) scale(1.01)}100%{opacity:1;transform:none}}@keyframes rightJoin{0%{opacity:0;transform:translateX(50px) scale(.96)}35%{opacity:1}80%{transform:translateX(-3px) scale(1.01)}100%{opacity:1;transform:none}}@keyframes wholeIn{to{opacity:1}}@keyframes halvesOut{to{opacity:0}}@keyframes spark{0%{opacity:.9;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.3)}}@keyframes wordIn{to{opacity:1;transform:none}}@keyframes companyMorph{0%{opacity:1;filter:blur(0);transform:none}45%{opacity:.35;filter:blur(2px);transform:scale(.99)}100%{opacity:0;filter:blur(4px);transform:scale(.97)}}@keyframes divisionMorph{0%{opacity:0;filter:blur(6px);transform:scale(.96)}100%{opacity:1;filter:blur(0);transform:none}}@keyframes flare{0%{opacity:0;transform:translate(-68%,-50%)}35%{opacity:.72}100%{opacity:0;transform:translate(-32%,-50%)}}@keyframes caption{to{opacity:1}} /* ========================================================= INTRO FINAL CALIBRATION — index(2).html + supplied assets Do not modify: visual/timing reference for the opening animation. ========================================================= */ #intro{--ease:cubic-bezier(.22,1,.36,1);--yellow:#ffe227} #intro.intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 46%,#153e7c 0,#0a2853 35%,#06172f 72%,#020912 100%);transition:opacity .85s ease,visibility .85s ease} #intro.intro.done{opacity:0;visibility:hidden} #intro.intro:before{content:"";position:absolute;inset:-20%;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:58px 58px;transform:perspective(780px) rotateX(60deg) translateY(27%);animation:grid 10s linear infinite} #intro.intro:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 28%,rgba(2,13,31,.62) 100%);pointer-events:none} #intro .skip{position:absolute!important;z-index:10!important;right:24px!important;top:22px!important;padding:8px 15px!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:99px!important;color:rgba(255,255,255,.75)!important;background:rgba(255,255,255,.05)!important;font-size:.7rem!important;letter-spacing:.15em!important;cursor:pointer!important;overflow:visible!important;transform:none!important;box-shadow:none!important;isolation:auto!important} #intro .skip:before,#intro .skip:after{content:none!important;display:none!important;animation:none!important} #intro .intro-stage{position:relative;z-index:2;width:min(94vw,1040px);height:min(78vh,620px);display:grid;place-items:center} #intro .brand-stage,#intro .plate-stage{position:absolute;inset:0;display:grid;place-items:center} #intro .brand-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4.8vw,58px);width:100%;transform:translateY(0);transition:opacity .8s ease,filter .8s ease,transform .9s var(--ease)} #intro .brand-row.to-plate{opacity:0;filter:blur(12px);transform:scale(.94)} #intro .handmark{position:relative;width:clamp(125px,17vw,190px);aspect-ratio:1;filter:drop-shadow(0 18px 30px rgba(2,13,31,.35));flex:0 0 auto} #intro .handmark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} #intro .logo-left{clip-path:polygon(0 0,52% 0,52% 100%,0 100%);transform:translateX(-46px);opacity:0} #intro .logo-right{clip-path:polygon(48% 0,100% 0,100% 100%,48% 100%);transform:translateX(46px);opacity:0} #intro .logo-whole{opacity:0} #intro .handmark.join .logo-left{animation:leftJoin 1s var(--ease) forwards} #intro .handmark.join .logo-right{animation:rightJoin 1s var(--ease) forwards} #intro .handmark.joined .logo-whole{animation:wholeIn .26s ease forwards} #intro .handmark.joined .logo-left,#intro .handmark.joined .logo-right{animation:halvesOut .22s ease forwards} #intro .spark{position:absolute;left:50%;top:52%;width:18%;aspect-ratio:1;border:2px solid var(--yellow);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)} #intro .handmark.joined .spark{animation:spark .72s ease-out forwards} #intro .word-stage{position:relative;width:clamp(350px,61vw,730px);height:clamp(100px,15vw,150px);display:grid;place-items:center;flex:0 1 auto} #intro .company-word,#intro .division-word{position:absolute;max-height:100%;object-fit:contain;transform-origin:center} #intro .company-word{width:100%;opacity:0;transform:translateY(10px)} #intro .company-word.in{animation:wordIn .85s var(--ease) forwards} #intro .company-word.morph{animation:companyMorph .48s ease forwards} #intro .division-word{width:clamp(300px,47vw,570px);opacity:0;filter:blur(10px);transform:scale(.94)} #intro .division-word.in{animation:divisionMorph .62s var(--ease) forwards} #intro .morph-flare{position:absolute;left:50%;top:50%;width:88%;height:105%;opacity:0;transform:translate(-50%,-50%);background:linear-gradient(100deg,transparent 26%,rgba(255,255,255,.8) 48%,transparent 68%);filter:blur(8px);pointer-events:none} #intro .morph-flare.run{animation:flare .9s ease forwards} #intro .plate-stage{opacity:0;filter:blur(14px);transform:scale(.9);transition:opacity 1.05s var(--ease),filter 1.05s ease,transform 1.05s var(--ease)} #intro .plate-stage.in{opacity:1;filter:blur(0);transform:scale(1)} #intro .plate-halo{position:absolute;width:min(86vw,650px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(105,177,255,.18),rgba(41,99,173,.08) 45%,transparent 72%);filter:blur(6px)} #intro .intro-plate{position:relative!important;width:min(66vw,445px)!important;max-height:72vh!important;object-fit:contain!important;opacity:1!important;filter:drop-shadow(0 25px 55px rgba(2,13,31,.3))!important;transform:none!important} #intro .intro-caption{position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);font-size:.68rem;letter-spacing:.2em;color:rgba(255,255,255,.58);white-space:nowrap;opacity:0} #intro .plate-stage.in .intro-caption{animation:caption .7s .45s ease forwards} @media(max-width:700px){ #intro .brand-row{flex-direction:column;gap:12px} #intro .handmark{width:112px} #intro .word-stage{width:min(88vw,520px);height:110px} #intro .company-word{width:100%} #intro .division-word{width:min(74vw,410px)} #intro .intro-plate{width:min(82vw,390px)!important} } /* ========================================================= SCAFFOLD VISIBILITY BOOST 初期アニメーション・各セクション演出は一切変更せず、 足場背景の描画階層と濃度だけを強化。 ========================================================= */ /* セクション背景の上、本文コンテンツの下へ足場を配置 */ .scaffold-bg{ z-index:8!important; opacity:1!important; } .section, .contact{ z-index:auto!important; } .section>.container, .contact>.container{ position:relative; z-index:12!important; } /* ファーストビューには足場を被せない */ .hero{ z-index:14!important; } /* フッターにも足場を被せない */ .footer{ z-index:20!important; } /* 明るい背景ではネイビー線をしっかり見せる */ .scaffold-copy.dark{ opacity:.24!important; filter:drop-shadow(0 1px 0 rgba(7,27,54,.08)); } /* ネイビー背景では淡いブルーの線を前に出す */ .scaffold-copy.light{ color:#d6e7f5!important; opacity:.30!important; mix-blend-mode:screen; transform:translate(5px,3px); filter:drop-shadow(0 0 2px rgba(180,214,240,.18)); } /* 線そのものも少しだけ太くし、背景としての存在感を上げる */ .scaffold-bg .beam{ stroke-width:2.25!important; } .scaffold-bg .beam.brace{ stroke-width:1.50!important; } .scaffold-bg .joint{ filter:drop-shadow(0 0 1px currentColor); } .scaffold-bg .data{ stroke:#73add8!important; stroke-width:2.25!important; filter:drop-shadow(0 0 4px rgba(100,169,220,.48)); } /* モバイルでも薄くなりすぎない */ @media(max-width:980px){ .scaffold-bg{opacity:.94!important} .scaffold-copy.dark{opacity:.20!important} .scaffold-copy.light{opacity:.25!important} } @media(max-width:720px){ .scaffold-bg{opacity:.86!important} .scaffold-copy.dark{opacity:.18!important} .scaffold-copy.light{opacity:.22!important} .scaffold-bg .beam{stroke-width:1.9!important} .scaffold-bg .beam.brace{stroke-width:1.3!important} } /* ========================================================= PERFORMANCE OPTIMIZATION — scaffold + render budget 初期アニメーションと各セクション固有演出は変更しない。 ========================================================= */ /* 1) 固定SVGを廃止。各セクションの余白だけに、1枚の軽量SVGを1アニメーションで表示 */ .scaffold-bg{display:none!important} .section, .contact{ position:relative; overflow:hidden; isolation:isolate; } .section::before, .contact::before{ content:none!important; } .section::after, .contact::after{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background-image:url("../images/scaffold-light-section.svg"); background-repeat:no-repeat; background-position:center; background-size:100% 100%; opacity:0; clip-path:inset(100% 0 0 0); animation:scaffoldSectionBuild 12.5s cubic-bezier(.45,0,.25,1) infinite; animation-play-state:paused; will-change:clip-path,opacity; } .section.navy::after, .contact::after{ background-image:url("../images/scaffold-navy-section.svg"); } .section.perf-visible::after, .contact.perf-visible::after{ animation-play-state:running; } @keyframes scaffoldSectionBuild{ 0%,7%{clip-path:inset(100% 0 0 0);opacity:0} 15%{opacity:.62} 48%,74%{clip-path:inset(0 0 0 0);opacity:.62} 91%,100%{clip-path:inset(0 0 0 0);opacity:0} } /* 2) コーポレートネイビーを完全に戻す。透明化による色転びを禁止 */ .section{background:#edf4fa!important} .section.alt{background:#e4eef7!important} .section.navy{background:#071b36!important;color:#fff} .contact{background:#071b36!important;color:#fff} .footer{background:#07172b!important} .section>.container, .contact>.container{ position:relative; z-index:3!important; } .hero{z-index:4!important} .footer{z-index:4!important} /* 3) オフスクリーン描画を削減 */ .section, .contact, .footer{ content-visibility:auto; contain-intrinsic-size:auto 760px; } /* 4) 常時動作する補助演出は、見えている時だけ再生 */ .motion-section:not(.perf-visible) .circuit-pulse, .motion-section:not(.perf-visible) .status-dot, .motion-section:not(.perf-visible) .flow-signal{ animation-play-state:paused!important; } .hero:not(.perf-visible)>img{ animation-play-state:paused!important; } /* 5) 高コストなぼかし/フィルターは、見た目をほぼ変えず削減 */ .header, .header.scrolled{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .circuit-pulse{filter:none!important} .service-enter{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* 6) モバイルではさらに描画面積を限定 */ @media(max-width:720px){ .section::after,.contact::after{ background-size:132% 100%; opacity:.82; } @keyframes scaffoldSectionBuild{ 0%,7%{clip-path:inset(100% 0 0 0);opacity:0} 16%{opacity:.46} 48%,74%{clip-path:inset(0 0 0 0);opacity:.46} 91%,100%{clip-path:inset(0 0 0 0);opacity:0} } } /* ========================================================= SOURCE BLOCK: scaffold-contrast-final Cascade order preserved from approved index.html ========================================================= */ .scaffold-copy.dark{opacity:.24!important} .scaffold-copy.light{opacity:.16!important} .beam{filter:drop-shadow(0 0 .25px rgba(7,27,54,.16))} @media(max-width:720px){ .scaffold-copy.dark{opacity:.19!important} .scaffold-copy.light{opacity:.12!important} } /* ========================================================= SOURCE BLOCK: scaffold-balance-center-final Cascade order preserved from approved index.html ========================================================= */ \n/* User-approved intro and section animations are intentionally untouched. */\n.scaffold-bg{opacity:.92!important}\n.scaffold-copy.dark{\n opacity:.18!important;\n filter:none!important;\n}\n.scaffold-copy.light{\n color:#c9dfef!important;\n opacity:.14!important;\n filter:none!important;\n}\n.scaffold-bg .beam{stroke-width:2.05!important}\n.scaffold-bg .beam.brace{stroke-width:1.32!important}\n.scaffold-bg .data{\n stroke:#68a1cc!important;\n stroke-width:2.05!important;\n filter:drop-shadow(0 0 2px rgba(104,161,204,.25))!important;\n}\n/* Center exists across the full canvas, but is slightly quieter than the edges. */\n.scaffold-bg .beam.center{stroke-opacity:.80}\n.scaffold-bg .joint.center{fill-opacity:.80}\n.scaffold-bg .foot.center{fill-opacity:.82;stroke-opacity:.82}\n.scaffold-bg .data.center{stroke-opacity:.88}\n@media(max-width:980px){\n .scaffold-bg{opacity:.86!important}\n .scaffold-copy.dark{opacity:.16!important}\n .scaffold-copy.light{opacity:.125!important}\n}\n@media(max-width:720px){\n .scaffold-bg{opacity:.78!important}\n .scaffold-copy.dark{opacity:.14!important}\n .scaffold-copy.light{opacity:.105!important}\n .scaffold-bg .beam{stroke-width:1.72!important}\n .scaffold-bg .beam.brace{stroke-width:1.15!important}\n}\n /* ========================================================= SOURCE BLOCK: scaffold-safe-lanes-final Cascade order preserved from approved index.html ========================================================= */ /* ========================================================= SCAFFOLD SAFE LANES 足場は組み上がり続けるが、文字・写真・カードの裏には出さない。 DOM数も減らして描画負荷を下げる。 ========================================================= */ :root{ --content-max:1120px; --scaffold-gutter:max(24px,calc((100vw - var(--content-max))/2)); } .scaffold-bg.scaffold-edge-only{ opacity:.90!important; z-index:1!important; contain:paint; } .scaffold-edge-only svg{ width:100%!important; height:100%!important; margin:0!important; animation:drift 22s ease-in-out infinite alternate!important; } .scaffold-edge-only .scaffold-copy.dark{opacity:.175!important;filter:none!important} .scaffold-edge-only .scaffold-copy.light{color:#c8ddec!important;opacity:.125!important;filter:none!important} .scaffold-edge-only .beam{stroke-width:1.9!important} .scaffold-edge-only .beam.standard{stroke-width:2.12!important} .scaffold-edge-only .beam.brace{stroke-width:1.18!important} .scaffold-edge-only .joint{opacity:.72} .scaffold-edge-only .data{ stroke:#6a9fc8!important; stroke-width:1.85!important; filter:none!important; } /* Section backgrounds become solid where content sits, translucent only in page gutters. */ .section, .contact{ background:transparent!important; overflow:hidden; } .section::before, .contact::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; } .section:not(.navy):not(.alt)::before{ background:linear-gradient(90deg, rgba(237,244,250,.54) 0, rgba(237,244,250,.58) var(--scaffold-gutter), rgba(237,244,250,.97) calc(var(--scaffold-gutter) + 34px), rgba(237,244,250,.97) calc(100% - var(--scaffold-gutter) - 34px), rgba(237,244,250,.58) calc(100% - var(--scaffold-gutter)), rgba(237,244,250,.54) 100%); } .section.alt::before{ background:linear-gradient(90deg, rgba(228,238,247,.55) 0, rgba(228,238,247,.60) var(--scaffold-gutter), rgba(228,238,247,.98) calc(var(--scaffold-gutter) + 34px), rgba(228,238,247,.98) calc(100% - var(--scaffold-gutter) - 34px), rgba(228,238,247,.60) calc(100% - var(--scaffold-gutter)), rgba(228,238,247,.55) 100%); } .section.navy::before{ background:linear-gradient(90deg, rgba(7,27,54,.56) 0, rgba(7,27,54,.62) var(--scaffold-gutter), rgba(7,27,54,.985) calc(var(--scaffold-gutter) + 34px), rgba(7,27,54,.985) calc(100% - var(--scaffold-gutter) - 34px), rgba(7,27,54,.62) calc(100% - var(--scaffold-gutter)), rgba(7,27,54,.56) 100%); } .contact::before{ background:linear-gradient(90deg, rgba(7,27,54,.62) 0, rgba(7,27,54,.68) var(--scaffold-gutter), rgba(7,27,54,.99) calc(var(--scaffold-gutter) + 34px), rgba(7,27,54,.99) calc(100% - var(--scaffold-gutter) - 34px), rgba(7,27,54,.68) calc(100% - var(--scaffold-gutter)), rgba(7,27,54,.62) 100%); } .section>.container, .contact>.container{ position:relative; z-index:4; } /* Hero / footer are intentionally opaque; scaffold never appears there. */ .hero{z-index:5!important} .footer{z-index:20!important} @media(max-width:1180px){ :root{--content-max:calc(100vw - 48px)} .scaffold-edge-only .scaffold-copy.dark{opacity:.15!important} .scaffold-edge-only .scaffold-copy.light{opacity:.11!important} } @media(max-width:720px){ :root{--content-max:calc(100vw - 28px)} .scaffold-bg.scaffold-edge-only{opacity:.66!important} .scaffold-edge-only .scaffold-copy.dark{opacity:.12!important} .scaffold-edge-only .scaffold-copy.light{opacity:.085!important} .scaffold-edge-only .beam{stroke-width:1.45!important} .scaffold-edge-only .joint{display:none} .scaffold-edge-only .data{display:none} .section:not(.navy):not(.alt)::before, .section.alt::before, .section.navy::before, .contact::before{ background:var(--section-mobile-bg,transparent); } .section:not(.navy):not(.alt)::before{--section-mobile-bg:rgba(237,244,250,.965)} .section.alt::before{--section-mobile-bg:rgba(228,238,247,.97)} .section.navy::before{--section-mobile-bg:rgba(7,27,54,.985)} .contact::before{--section-mobile-bg:rgba(7,27,54,.99)} } /* ========================================================= SOURCE BLOCK: hit-tech-button-v3 Cascade order preserved from approved index.html ========================================================= */ /* ========================================================= HIT BUTTON INTERACTION V3 Rounded / color-swap interaction. No arrows, no pointer tracking. ========================================================= */ /* 04 = same navy background as 02 */ #services,#contact{background:#071b36!important;color:#fff!important} #services::after,#contact::after{ background-image:url("../images/scaffold-navy-section.svg")!important; background-repeat:no-repeat!important; background-position:center!important; background-size:100% 100%!important; } /* Header: fully opaque. No transparency / blur. */ .header, .header.scrolled{ background:#eff5fa!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .header.scrolled{box-shadow:0 7px 22px rgba(7,27,54,.08)!important} /* Shared CTA base — rounded, calm, high-quality color inversion */ .btn{ position:relative!important; isolation:isolate!important; overflow:hidden!important; min-height:52px!important; padding:12px 25px!important; border-radius:999px!important; font-weight:800!important; letter-spacing:.035em!important; transform:translateZ(0)!important; transition: color .34s cubic-bezier(.22,1,.36,1), background-color .34s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1), box-shadow .34s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1)!important; } .btn::before,.btn::after{content:none!important;display:none!important} /* Navy -> white / white -> navy */ .btn.primary{ color:#fff!important; background:#071b36!important; border:1px solid #071b36!important; box-shadow:0 8px 20px rgba(7,27,54,.13)!important; } .btn.primary:hover,.btn.primary:focus-visible{ color:#071b36!important; background:#fff!important; border-color:#071b36!important; box-shadow:0 10px 24px rgba(7,27,54,.13),inset 0 0 0 1px rgba(7,27,54,.04)!important; transform:translateY(-2px)!important; outline:none!important; } .btn.secondary{ color:#071b36!important; background:#fff!important; border:1px solid #071b36!important; } .btn.secondary:hover,.btn.secondary:focus-visible{ color:#fff!important; background:#071b36!important; border-color:#071b36!important; box-shadow:0 10px 24px rgba(7,27,54,.16)!important; transform:translateY(-2px)!important; outline:none!important; } .btn.light{ color:#071b36!important; background:#fff!important; border:1px solid #fff!important; } .btn.light:hover,.btn.light:focus-visible{ color:#fff!important; background:#071b36!important; border-color:#fff!important; box-shadow:0 10px 24px rgba(0,0,0,.16)!important; transform:translateY(-2px)!important; outline:none!important; } .btn:active{transform:translateY(0) scale(.985)!important;transition-duration:.09s!important} /* Header navigation: same swap idea, smaller radius. */ .nav a{ position:relative!important; overflow:hidden!important; padding:11px 16px!important; border:1px solid transparent!important; border-radius:12px!important; color:#071b36!important; background:#eff5fa!important; box-shadow:none!important; transition: color .30s cubic-bezier(.22,1,.36,1), background-color .30s cubic-bezier(.22,1,.36,1), border-color .30s cubic-bezier(.22,1,.36,1), transform .30s cubic-bezier(.22,1,.36,1)!important; } .nav a::before,.nav a::after{content:none!important;display:none!important} .nav a:hover,.nav a:focus-visible{ color:#eff5fa!important; background:#071b36!important; border-color:#071b36!important; transform:translateY(-1px)!important; outline:none!important; } /* Footer 4x2 buttons: rounded dark tiles -> light tile + navy text */ .footer-links.footer-links--4x2{gap:12px!important} .footer-links.footer-links--4x2>a{ position:relative!important; overflow:hidden!important; width:100%!important; max-width:none!important; min-height:50px!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:11px 16px!important; border:1px solid rgba(255,255,255,.26)!important; border-radius:14px!important; color:#fff!important; background:#07172b!important; font-size:.80rem!important; font-weight:700!important; letter-spacing:.025em!important; box-shadow:none!important; transform:translateZ(0)!important; transition: color .32s cubic-bezier(.22,1,.36,1), background-color .32s cubic-bezier(.22,1,.36,1), border-color .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1)!important; } .footer-links.footer-links--4x2>a::before, .footer-links.footer-links--4x2>a::after{content:none!important;display:none!important} .footer-links.footer-links--4x2>a:hover, .footer-links.footer-links--4x2>a:focus-visible{ color:#07172b!important; background:#fff!important; border-color:#fff!important; box-shadow:0 10px 24px rgba(0,0,0,.14)!important; transform:translateY(-2px)!important; outline:none!important; } .footer-address a{color:inherit!important;transition:color .25s ease!important} .footer-address a:hover{color:#fff!important} @media(max-width:720px){ .btn{width:100%!important} .nav.open{background:#eff5fa!important} .nav.open a{border-color:rgba(7,27,54,.08)!important} .footer-links.footer-links--4x2>a{min-height:48px!important;padding:10px 12px!important} } @media(prefers-reduced-motion:reduce){ .btn,.nav a,.footer-links.footer-links--4x2>a{transition-duration:.01ms!important} } /* ========================================================= SOURCE BLOCK: hit-final-button-media-v4 Cascade order preserved from approved index.html ========================================================= */ /* ========================================================= BUTTON SHAPE V4 参考画像のような「横長・細枠・大きめの丸み」。 色はHITのネイビーに統一し、ホバーで背景色と文字色を反転。 ========================================================= */ .actions{ gap:14px!important; } .btn{ min-width:270px!important; min-height:60px!important; padding:13px 32px!important; border-width:1.5px!important; border-style:solid!important; border-radius:32px!important; font-size:.92rem!important; font-weight:800!important; letter-spacing:.045em!important; line-height:1.2!important; box-shadow:none!important; transform:none!important; transition: color .36s cubic-bezier(.22,1,.36,1), background-color .36s cubic-bezier(.22,1,.36,1), border-color .36s cubic-bezier(.22,1,.36,1)!important; } .btn::before,.btn::after{content:none!important;display:none!important} .btn.primary{ color:#fff!important; background:#071b36!important; border-color:#071b36!important; } .btn.primary:hover,.btn.primary:focus-visible{ color:#071b36!important; background:#fff!important; border-color:#071b36!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn.secondary{ color:#071b36!important; background:transparent!important; border-color:#071b36!important; } .btn.secondary:hover,.btn.secondary:focus-visible{ color:#fff!important; background:#071b36!important; border-color:#071b36!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn.light{ color:#fff!important; background:transparent!important; border-color:rgba(255,255,255,.92)!important; } .btn.light:hover,.btn.light:focus-visible{ color:#071b36!important; background:#fff!important; border-color:#fff!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn:active{transform:none!important} /* Header navigation remains compact; only CTA-style buttons use the larger shape. */ .nav a{ border-radius:13px!important; } /* Footer links: same visual language, slightly smaller for a 4 x 2 grid. */ .footer-links.footer-links--4x2{ gap:13px 16px!important; } .footer-links.footer-links--4x2>a{ min-height:48px!important; padding:10px 14px!important; border:1px solid rgba(255,255,255,.62)!important; border-radius:25px!important; color:#fff!important; background:transparent!important; font-size:.78rem!important; font-weight:700!important; box-shadow:none!important; transform:none!important; transition: color .34s cubic-bezier(.22,1,.36,1), background-color .34s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1)!important; } .footer-links.footer-links--4x2>a:hover, .footer-links.footer-links--4x2>a:focus-visible{ color:#07172b!important; background:#fff!important; border-color:#fff!important; transform:none!important; box-shadow:none!important; outline:none!important; } /* Footer logo: image itself contains white company text / white IT division lettering. No CSS recoloring filter is used. */ .footer-logo{ width:min(330px,100%)!important; max-height:none!important; height:auto!important; object-fit:contain!important; object-position:left center!important; filter:none!important; opacity:1!important; } /* ========================================================= RESPONSIVE MEDIA FIT Source images can have different aspect ratios. The wrapper determines layout size and the image fills it without distortion. ========================================================= */ .photo, .service-photo{ position:relative!important; width:100%!important; height:auto!important; min-height:0!important; overflow:hidden!important; } .feature-mosaic{ aspect-ratio:4 / 3!important; } .service-photo{ aspect-ratio:16 / 8.7!important; margin:38px 0!important; } .other-shutter{ aspect-ratio:16 / 10!important; } .photo>img, .service-photo>img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:var(--media-position,center center)!important; } .service-photo>img{ --media-position:center 52%; } .other-shutter>img{ --media-position:center center; } /* Keep overlay animation elements above the positioned images. */ .feature-mosaic .mosaic-slice, .feature-mosaic .mosaic-corner, .other-shutter .shutter-panel{ z-index:2!important; } /* Large screens: don't let media blocks become excessively tall. */ @media(min-width:1200px){ .service-photo{max-height:540px!important} .feature-mosaic,.other-shutter{max-height:560px!important} } /* Tablet */ @media(max-width:980px){ .feature-mosaic, .other-shutter{ aspect-ratio:16 / 9!important; max-height:520px!important; } .service-photo{ aspect-ratio:16 / 9!important; max-height:520px!important; } } /* Mobile: retain visual crop but keep every image within a predictable frame. */ @media(max-width:720px){ .actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important} .btn{ width:100%!important; min-width:0!important; min-height:56px!important; border-radius:30px!important; padding:12px 20px!important; } .feature-mosaic, .service-photo, .other-shutter{ aspect-ratio:4 / 3!important; max-height:none!important; } .footer-links.footer-links--4x2>a{ min-height:46px!important; border-radius:24px!important; padding:9px 10px!important; } .footer-logo{width:min(310px,92vw)!important} } /* ========================================================= SOURCE BLOCK: hit-contact-tais-button-v5 Cascade order preserved from approved index.html ========================================================= */ /* ========================================================= 04 CONTACT — true 2-column layout ========================================================= */ #contact .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(380px,.82fr)!important; gap:clamp(54px,7vw,88px)!important; align-items:center!important; } #contact .contact-copy{max-width:650px} #contact .contact-side{ position:relative; padding:30px 32px 8px; border-top:1px solid rgba(255,255,255,.46); border-bottom:1px solid rgba(255,255,255,.22); } #contact .contact-side::before{ content:""; position:absolute; top:-1px; left:0; width:92px; height:2px; background:#8eb8dc; } #contact .contact-side-head{ padding:0 0 22px; } #contact .contact-ready{ display:flex; align-items:center; gap:9px; color:#b7cde1; font-size:.70rem; font-weight:800; letter-spacing:.14em; } #contact .contact-ready .status-dot{ position:relative; display:block; width:7px; height:7px; border-radius:50%; background:#8eb8dc; box-shadow:0 0 0 5px rgba(142,184,220,.10); } #contact .contact-side-head>strong{ display:block; margin-top:13px; color:#fff; font-size:1.12rem; letter-spacing:.035em; } #contact .contact-side-head>p{ margin:8px 0 0; color:rgba(255,255,255,.62); font-size:.79rem; line-height:1.75; } #contact .flow--contact{ position:relative; margin-top:0; border-top:1px solid rgba(255,255,255,.20)!important; } #contact .flow--contact .flow-row{ grid-template-columns:54px 1fr!important; padding:20px 0!important; } #contact .flow--contact .flow-row>b{ display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(183,205,225,.46); border-radius:50%; color:#d7e7f5; font-size:.70rem; } #contact .flow--contact .flow-row strong{font-size:.94rem} #contact .flow--contact .flow-row span{margin-top:3px} /* ========================================================= TAIS-inspired CTA treatment TAISEI ICT Solutions uses light "Read more" navigation rather than heavy decorative buttons. HIT keeps the requested rounded form, but uses a restrained horizontal color-swap wipe. No arrow / ripple / pointer-follow effect. ========================================================= */ .btn{ position:relative!important; min-width:300px!important; min-height:60px!important; padding:13px 32px!important; border-radius:31px!important; border-width:1.3px!important; border-style:solid!important; overflow:hidden!important; box-shadow:none!important; transform:none!important; font-size:.91rem!important; font-weight:800!important; letter-spacing:.045em!important; background-size:205% 100%!important; background-position:100% 0!important; transition: background-position .46s cubic-bezier(.22,1,.36,1), color .30s ease, border-color .30s ease!important; } .btn::before,.btn::after{content:none!important;display:none!important} .btn.primary{ color:#fff!important; border-color:#071b36!important; background-image:linear-gradient(90deg,#fff 0 49.5%,#071b36 50.5% 100%)!important; background-color:#071b36!important; } .btn.primary:hover,.btn.primary:focus-visible{ color:#071b36!important; background-position:0 0!important; border-color:#071b36!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn.secondary{ color:#071b36!important; border-color:#071b36!important; background-image:linear-gradient(90deg,#071b36 0 49.5%,rgba(255,255,255,.78) 50.5% 100%)!important; background-color:rgba(255,255,255,.78)!important; } .btn.secondary:hover,.btn.secondary:focus-visible{ color:#fff!important; background-position:0 0!important; border-color:#071b36!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn.light{ color:#fff!important; border-color:rgba(255,255,255,.92)!important; background-image:linear-gradient(90deg,#fff 0 49.5%,rgba(255,255,255,0) 50.5% 100%)!important; background-color:transparent!important; } .btn.light:hover,.btn.light:focus-visible{ color:#071b36!important; background-position:0 0!important; border-color:#fff!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn:active{transform:scale(.992)!important} /* Footer: same horizontal wipe, but compact enough for 4 x 2. */ .footer-links.footer-links--4x2>a{ min-height:48px!important; padding:10px 15px!important; border:1px solid rgba(255,255,255,.54)!important; border-radius:25px!important; color:#fff!important; background-image:linear-gradient(90deg,#fff 0 49.5%,rgba(255,255,255,0) 50.5% 100%)!important; background-color:transparent!important; background-size:205% 100%!important; background-position:100% 0!important; box-shadow:none!important; transform:none!important; transition: background-position .42s cubic-bezier(.22,1,.36,1), color .28s ease, border-color .28s ease!important; } .footer-links.footer-links--4x2>a:hover, .footer-links.footer-links--4x2>a:focus-visible{ color:#07172b!important; background-position:0 0!important; border-color:#fff!important; transform:none!important; box-shadow:none!important; outline:none!important; } /* Header stays opaque. Navigation gets the same restrained fill motion. */ .header,.header.scrolled{ background:#eff5fa!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .nav a{ border-radius:13px!important; background-image:linear-gradient(90deg,#071b36 0 49.5%,#eff5fa 50.5% 100%)!important; background-size:205% 100%!important; background-position:100% 0!important; transition:background-position .38s cubic-bezier(.22,1,.36,1),color .26s ease!important; } .nav a:hover,.nav a:focus-visible{ color:#fff!important; background-position:0 0!important; background-color:transparent!important; transform:none!important; } @media(max-width:980px){ #contact .contact-grid{ grid-template-columns:1fr!important; gap:42px!important; } #contact .contact-side{max-width:720px} } @media(max-width:720px){ .btn{ min-width:0!important; width:100%!important; min-height:56px!important; border-radius:29px!important; padding:12px 20px!important; } #contact .contact-side{ padding:25px 18px 4px; } #contact .flow--contact .flow-row{ grid-template-columns:46px 1fr!important; } .footer-links.footer-links--4x2>a{ min-height:46px!important; padding:9px 10px!important; } } @media(prefers-reduced-motion:reduce){ .btn,.footer-links.footer-links--4x2>a,.nav a{ transition-duration:.01ms!important; } } /* ========================================================= SOURCE BLOCK: hit-unified-footer-button-header-restore-v6 Cascade order preserved from approved index.html ========================================================= */ /* ========================================================= BUTTONS — footer style unified across the whole site Navy + white color pair, same pill shape and same horizontal wipe. ========================================================= */ .btn{ position:relative!important; min-width:300px!important; min-height:48px!important; padding:10px 18px!important; border:1px solid #07172b!important; border-radius:25px!important; color:#fff!important; background-color:#07172b!important; background-image:linear-gradient(90deg,#fff 0 49.5%,#07172b 50.5% 100%)!important; background-size:205% 100%!important; background-position:100% 0!important; box-shadow:none!important; transform:none!important; font-size:.84rem!important; font-weight:700!important; letter-spacing:.035em!important; transition: background-position .42s cubic-bezier(.22,1,.36,1), color .28s ease, border-color .28s ease!important; } .btn::before,.btn::after{content:none!important;display:none!important} .btn.primary, .btn.secondary, .btn.light{ color:#fff!important; background-color:#07172b!important; border-color:#07172b!important; } .btn:hover,.btn:focus-visible, .btn.primary:hover,.btn.primary:focus-visible, .btn.secondary:hover,.btn.secondary:focus-visible, .btn.light:hover,.btn.light:focus-visible{ color:#07172b!important; background-position:0 0!important; border-color:#07172b!important; transform:none!important; box-shadow:none!important; outline:none!important; } #contact .btn{ border-color:rgba(255,255,255,.62)!important; } /* Footer links remain the design master and are vertically balanced */ .footer-main{ align-items:stretch!important; } .footer-links.footer-links--4x2{ align-self:center!important; align-content:center!important; padding-block:18px!important; gap:14px 16px!important; } .footer-links.footer-links--4x2>a{ min-height:48px!important; padding:10px 15px!important; border:1px solid rgba(255,255,255,.54)!important; border-radius:25px!important; color:#fff!important; background-image:linear-gradient(90deg,#fff 0 49.5%,rgba(255,255,255,0) 50.5% 100%)!important; background-color:transparent!important; background-size:205% 100%!important; background-position:100% 0!important; box-shadow:none!important; transform:none!important; transition: background-position .42s cubic-bezier(.22,1,.36,1), color .28s ease, border-color .28s ease!important; } .footer-links.footer-links--4x2>a:hover, .footer-links.footer-links--4x2>a:focus-visible{ color:#07172b!important; background-position:0 0!important; border-color:#fff!important; transform:none!important; box-shadow:none!important; outline:none!important; } /* ========================================================= HEADER — restore the earlier translucent state ========================================================= */ .header{ background:rgba(239,245,250,.93)!important; backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important; border-bottom:1px solid rgba(7,27,54,.08)!important; } .header.scrolled{ background:rgba(239,245,250,.98)!important; backdrop-filter:blur(14px)!important; -webkit-backdrop-filter:blur(14px)!important; box-shadow:0 7px 22px rgba(7,27,54,.08)!important; } /* Header nav returns to the earlier simple navy hover */ .nav a{ color:#071b36!important; background:transparent!important; background-image:none!important; border:0!important; border-radius:8px!important; transition:background .22s ease,color .22s ease!important; } .nav a:hover,.nav a:focus-visible{ color:#fff!important; background:#071b36!important; transform:none!important; outline:none!important; } /* Swapped image crop tuning */ .hero>img{ object-position:center 58%!important; } .feature-mosaic>img{ object-position:center 62%!important; } @media(max-width:980px){ .footer-links.footer-links--4x2{ align-self:start!important; padding-block:4px!important; } } @media(max-width:720px){ .btn{ min-width:0!important; width:100%!important; min-height:46px!important; padding:9px 14px!important; border-radius:24px!important; } .hero>img{object-position:58% 60%!important} .footer-links.footer-links--4x2{padding-block:0!important} } @media(prefers-reduced-motion:reduce){ .btn,.footer-links.footer-links--4x2>a,.nav a{transition-duration:.01ms!important} } /* ========================================================= SOURCE BLOCK: hit-button-restore-three-back-v7 Cascade order preserved from approved index.html ========================================================= */ /* ========================================================= BUTTON RESTORE 「ボタン形状・画像最適化版」の状態へ完全復元 ========================================================= */ .actions{gap:14px!important} .btn{ min-width:270px!important; min-height:60px!important; padding:13px 32px!important; border-width:1.5px!important; border-style:solid!important; border-radius:32px!important; font-size:.92rem!important; font-weight:800!important; letter-spacing:.045em!important; line-height:1.2!important; box-shadow:none!important; transform:none!important; background-image:none!important; background-size:auto!important; background-position:initial!important; transition: color .36s cubic-bezier(.22,1,.36,1), background-color .36s cubic-bezier(.22,1,.36,1), border-color .36s cubic-bezier(.22,1,.36,1)!important; } .btn::before,.btn::after{content:none!important;display:none!important} .btn.primary{ color:#fff!important; background:#071b36!important; border-color:#071b36!important; } .btn.primary:hover,.btn.primary:focus-visible{ color:#071b36!important; background:#fff!important; border-color:#071b36!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn.secondary{ color:#071b36!important; background:transparent!important; border-color:#071b36!important; } .btn.secondary:hover,.btn.secondary:focus-visible{ color:#fff!important; background:#071b36!important; border-color:#071b36!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn.light{ color:#fff!important; background:transparent!important; border-color:rgba(255,255,255,.92)!important; } .btn.light:hover,.btn.light:focus-visible{ color:#071b36!important; background:#fff!important; border-color:#fff!important; transform:none!important; box-shadow:none!important; outline:none!important; } .btn:active{transform:none!important} /* フッターも3版前のボタン状態へ */ .footer-links.footer-links--4x2{ gap:20px 16px!important; /* 上下間隔だけ少し広げる */ padding-block:10px!important; } .footer-links.footer-links--4x2>a{ min-height:48px!important; padding:10px 14px!important; border:1px solid rgba(255,255,255,.62)!important; border-radius:25px!important; color:#fff!important; background:transparent!important; background-image:none!important; background-size:auto!important; background-position:initial!important; font-size:.78rem!important; font-weight:700!important; box-shadow:none!important; transform:none!important; transition: color .34s cubic-bezier(.22,1,.36,1), background-color .34s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1)!important; } .footer-links.footer-links--4x2>a:hover, .footer-links.footer-links--4x2>a:focus-visible{ color:#07172b!important; background:#fff!important; border-color:#fff!important; transform:none!important; box-shadow:none!important; outline:none!important; } /* アップロード画像をそのまま使用。色変換しない */ .footer-logo{ width:min(330px,100%)!important; max-height:none!important; height:auto!important; object-fit:contain!important; object-position:left center!important; filter:none!important; opacity:1!important; } /* Header is intentionally NOT changed here; current restored header state is preserved. */ @media(max-width:720px){ .actions{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; } .btn{ width:100%!important; min-width:0!important; min-height:56px!important; border-radius:30px!important; padding:12px 20px!important; } .footer-links.footer-links--4x2{ gap:16px 12px!important; padding-block:4px!important; } .footer-links.footer-links--4x2>a{ min-height:46px!important; border-radius:24px!important; padding:9px 10px!important; } .footer-logo{width:min(310px,92vw)!important} } @media(prefers-reduced-motion:reduce){ .btn,.footer-links.footer-links--4x2>a{transition-duration:.01ms!important} } /* ========================================================= SOURCE BLOCK: hit-layout-polish-v8 Cascade order preserved from approved index.html ========================================================= */ /* ========================================================= 02 SERVICE — 01/03 left padding unified with 02/04 ========================================================= */ #services .service{ padding-left:40px!important; padding-right:40px!important; } #services .service:nth-child(odd), #services .service:nth-child(even){ padding-left:40px!important; padding-right:40px!important; } /* ========================================================= HEADER NAV — refined tech-style hover Header itself remains in the previously restored state. No shine / ripple; hover only. ========================================================= */ .header .nav{ gap:9px!important; } .header .nav a{ position:relative!important; isolation:isolate!important; overflow:hidden!important; padding:11px 17px!important; border:1px solid transparent!important; border-radius:10px!important; color:#071b36!important; background:transparent!important; box-shadow:none!important; transform:none!important; transition: color .30s cubic-bezier(.22,1,.36,1), border-color .30s ease, transform .30s cubic-bezier(.22,1,.36,1)!important; } .header .nav a::before{ content:""!important; display:block!important; position:absolute!important; z-index:-1!important; inset:0!important; background:#071b36!important; transform:scaleX(0)!important; transform-origin:right center!important; transition:transform .42s cubic-bezier(.22,1,.36,1)!important; } .header .nav a::after{ content:""!important; display:block!important; position:absolute!important; z-index:2!important; left:50%!important; bottom:5px!important; width:0!important; height:2px!important; background:#ffe227!important; transform:translateX(-50%)!important; transition:width .36s .06s cubic-bezier(.22,1,.36,1)!important; } .header .nav a:hover, .header .nav a:focus-visible{ color:#fff!important; border-color:rgba(7,27,54,.22)!important; background:transparent!important; transform:translateY(-1px)!important; outline:none!important; } .header .nav a:hover::before, .header .nav a:focus-visible::before{ transform:scaleX(1)!important; transform-origin:left center!important; } .header .nav a:hover::after, .header .nav a:focus-visible::after{ width:calc(100% - 28px)!important; } /* ========================================================= FOOTER — reduce overall vertical height while retaining the requested breathing room between the 4x2 buttons. ========================================================= */ .footer{ padding:36px 0 16px!important; } .footer-main{ gap:56px!important; align-items:center!important; } .footer-logo{ width:min(300px,100%)!important; } .footer-locations{ gap:10px!important; margin-top:16px!important; } .footer-address{ font-size:.79rem!important; line-height:1.62!important; } .footer-links.footer-links--4x2{ align-self:center!important; align-content:center!important; padding-block:4px!important; gap:16px 18px!important; } .footer-links.footer-links--4x2>a{ min-height:46px!important; padding:9px 12px!important; } .footer-rule{ margin:28px 0 13px!important; } .copyright{ font-size:.72rem!important; line-height:1.4!important; } @media(max-width:1050px){ .footer{ padding-top:32px!important; } .footer-main{ gap:28px!important; align-items:start!important; } .footer-links.footer-links--4x2{ align-self:start!important; } } @media(max-width:720px){ #services .service, #services .service:nth-child(odd), #services .service:nth-child(even){ padding:24px 16px!important; border-right:0!important; } .header .nav.open{ gap:4px!important; } .header .nav.open a{ padding:12px 14px!important; } .footer{ padding:28px 0 14px!important; } .footer-main{ gap:22px!important; } .footer-locations{ margin-top:12px!important; gap:8px!important; } .footer-links.footer-links--4x2{ gap:12px 10px!important; } .footer-links.footer-links--4x2>a{ min-height:44px!important; padding:8px 9px!important; } .footer-rule{ margin:22px 0 11px!important; } } @media(prefers-reduced-motion:reduce){ .header .nav a, .header .nav a::before, .header .nav a::after{ transition-duration:.01ms!important; } } /* ========================================================= SOURCE BLOCK: hit-one-stop-stage-v1 Cascade order preserved from approved index.html ========================================================= */ .one-stop-stage{position:relative;z-index:5;overflow:hidden;padding:112px 0;background:radial-gradient(circle at 50% 48%,rgba(39,101,158,.35),transparent 34%),linear-gradient(135deg,#020b17 0%,#06172f 48%,#0a2b53 100%);isolation:isolate} .one-stop-stage::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;opacity:0;background:linear-gradient(rgba(126,180,224,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(126,180,224,.10) 1px,transparent 1px);background-size:54px 54px;transform:perspective(900px) rotateX(62deg) translateY(24%) scale(1.3)} .one-stop-stage::after{content:"";position:absolute;z-index:0;left:50%;top:50%;width:min(84vw,980px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(130,191,238,.20);box-shadow:0 0 0 46px rgba(74,139,194,.035),0 0 0 96px rgba(74,139,194,.025),0 0 110px rgba(69,142,201,.18);opacity:0;transform:translate(-50%,-50%) scale(.35);pointer-events:none} .one-stop-container{position:relative;z-index:2}.one-stop-visual{position:relative;width:min(100%,1180px);margin:0 auto;perspective:1400px;isolation:isolate} .one-stop-visual::before{content:"";position:absolute;z-index:3;inset:-12px;border-radius:36px;padding:2px;background:conic-gradient(from 210deg,transparent 0 12%,#6db5ef 18%,#ffe227 23%,#fff 27%,transparent 34% 62%,#438bc7 70%,transparent 78%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.84) rotate(-18deg);pointer-events:none} .one-stop-visual::after{content:"";position:absolute;z-index:4;left:5%;right:5%;top:-18%;height:18%;opacity:0;background:linear-gradient(180deg,transparent,rgba(153,213,255,.36),rgba(255,255,255,.94),rgba(153,213,255,.26),transparent);filter:blur(1px);pointer-events:none} .one-stop-visual img{position:relative;z-index:2;display:block;width:100%;height:auto;border-radius:34px;box-shadow:0 34px 90px rgba(0,0,0,.34);opacity:0;transform:perspective(1400px) rotateX(17deg) rotateY(-5deg) translateY(58px) scale(.72);transform-origin:center;clip-path:circle(0% at 50% 50%);will-change:transform,opacity,clip-path} .one-stop-stage.is-active::before{animation:osGrid 1.65s .05s cubic-bezier(.22,1,.36,1) both}.one-stop-stage.is-active::after{animation:osPortal 1.7s .08s cubic-bezier(.22,1,.36,1) both}.one-stop-stage.is-active .one-stop-visual::before{animation:osEdge 1.7s .38s cubic-bezier(.22,1,.36,1) both}.one-stop-stage.is-active .one-stop-visual::after{animation:osScan 1.18s 1.02s cubic-bezier(.2,.72,.24,1) both}.one-stop-stage.is-active .one-stop-visual img{animation:osImage 1.42s .22s cubic-bezier(.16,1,.3,1) both} @keyframes osImage{0%{opacity:0;clip-path:circle(0% at 50% 50%);transform:perspective(1400px) rotateX(17deg) rotateY(-5deg) translateY(58px) scale(.72)}28%{opacity:1}62%{clip-path:circle(74% at 50% 50%);transform:perspective(1400px) rotateX(-2deg) rotateY(1.4deg) translateY(-8px) scale(1.018)}100%{opacity:1;clip-path:circle(100% at 50% 50%);transform:none}} @keyframes osPortal{0%{opacity:0;transform:translate(-50%,-50%) scale(.26)}34%{opacity:.96}74%{opacity:.54;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:.24;transform:translate(-50%,-50%) scale(1)}} @keyframes osGrid{0%{opacity:0;transform:perspective(900px) rotateX(62deg) translateY(38%) scale(1.6)}42%{opacity:.66}100%{opacity:.18;transform:perspective(900px) rotateX(62deg) translateY(24%) scale(1.3)}} @keyframes osEdge{0%{opacity:0;transform:scale(.84) rotate(-18deg)}38%{opacity:1}72%{opacity:.72;transform:scale(1.02) rotate(6deg)}100%{opacity:.32;transform:scale(1) rotate(0)}} @keyframes osScan{0%{opacity:0;top:-18%}18%{opacity:.95}82%{opacity:.58}100%{opacity:0;top:100%}} @media(max-width:980px){.one-stop-stage{padding:88px 0}}@media(max-width:720px){.one-stop-stage{padding:64px 0}.one-stop-visual img{border-radius:20px}.one-stop-visual::before{inset:-7px;border-radius:24px}} @media(prefers-reduced-motion:reduce){.one-stop-stage::before,.one-stop-stage::after,.one-stop-visual::before,.one-stop-visual::after{animation:none!important}.one-stop-visual img{opacity:1!important;clip-path:none!important;transform:none!important;animation:none!important}} /* ========================================================= SOURCE BLOCK: hit-delivery-quality-v1 Cascade order preserved from approved index.html ========================================================= */ /* Accessibility */ .skip-link{position:fixed;z-index:10050;left:18px;top:12px;padding:10px 16px;border-radius:8px;background:#071b36;color:#fff;font-size:.84rem;font-weight:800;transform:translateY(-160%);transition:transform .2s ease;box-shadow:0 10px 30px rgba(0,0,0,.18)} .skip-link:focus{transform:translateY(0);outline:3px solid #ffe227;outline-offset:3px} a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #e6bd20;outline-offset:4px} /* FAQ: deliberately calm; the page already has enough signature animation. */ .faq-section{background:#f5f9fc!important} .faq-grid{display:grid;grid-template-columns:minmax(260px,.74fr) minmax(0,1.26fr);gap:clamp(54px,7vw,92px);align-items:start} .faq-intro{position:sticky;top:126px} .faq-list{border-top:1px solid rgba(7,27,54,.18)} .faq-item{border-bottom:1px solid rgba(7,27,54,.18)} .faq-item summary{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;min-height:76px;padding:18px 4px;cursor:pointer;list-style:none;color:#071b36} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary>span{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(7,27,54,.18);border-radius:50%;font-size:.68rem;font-weight:800;color:#2e6299;letter-spacing:.07em} .faq-item summary>strong{font-size:.95rem;line-height:1.6;letter-spacing:.015em} .faq-item summary::after{content:"+";display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#071b36;color:#fff;font-size:1.05rem;font-weight:400;transition:transform .28s ease,background .28s ease,color .28s ease} .faq-item[open] summary::after{content:"−";background:#e6bd20;color:#071b36;transform:rotate(180deg)} .faq-answer{padding:0 48px 22px 68px} .faq-answer p{margin:0;color:#587087;font-size:.88rem;line-height:1.9} .faq-item[open] .faq-answer{animation:faqAnswerIn .32s cubic-bezier(.22,1,.36,1) both} @keyframes faqAnswerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* Mobile quick CTA: conversion aid, hidden before mobile breakpoint. */ .mobile-quick-cta{display:none} @media(max-width:720px){ .faq-grid{grid-template-columns:1fr;gap:30px} .faq-intro{position:static} .faq-item summary{grid-template-columns:40px 1fr auto;gap:10px;min-height:70px;padding:15px 0} .faq-item summary>span{width:32px;height:32px} .faq-answer{padding:0 42px 18px 42px} .mobile-quick-cta{position:fixed;z-index:60;left:10px;right:10px;bottom:9px;display:grid;grid-template-columns:.92fr 1.08fr;gap:7px;padding:7px;border:1px solid rgba(255,255,255,.26);border-radius:17px;background:rgba(4,18,36,.93);box-shadow:0 14px 38px rgba(3,18,36,.28);backdrop-filter:blur(12px);transition:opacity .25s ease,transform .25s ease} .mobile-quick-cta.is-hidden{opacity:0;transform:translateY(90px);pointer-events:none} .mobile-quick-cta a{min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:.76rem;font-weight:800} .mobile-quick-cta__tel{flex-direction:column;gap:1px;border:1px solid rgba(255,255,255,.28);color:#fff} .mobile-quick-cta__tel span{font-size:.62rem;color:#b7cde1} .mobile-quick-cta__tel strong{font-size:.73rem;letter-spacing:.03em} .mobile-quick-cta__contact{background:#fff;color:#071b36} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} .faq-item[open] .faq-answer{animation:none!important} } /* ========================================================= Inline-style replacements ========================================================= */ .mosaic-slice--0{--slice:0} .mosaic-slice--1{--slice:1} .mosaic-slice--2{--slice:2} .mosaic-slice--3{--slice:3} .mosaic-slice--4{--slice:4} .mosaic-slice--5{--slice:5} .shutter-panel--0{--panel:0} .shutter-panel--1{--panel:1} .shutter-panel--2{--panel:2} .shutter-panel--3{--panel:3} .shutter-panel--4{--panel:4} .shutter-panel--5{--panel:5} .eyebrow--light{color:#b7cde1} /* ========================================================= FINAL POLISH — NAVY CORPORATE / READABILITY / IT HEADER 2026-08 delivery polish ========================================================= */ :root{ --navy:#071b36; --navy-deep:#04152b; --navy-mid:#0c315d; --it-blue:#2d78b5; --it-cyan:#82c6ef; --hit-yellow:#ffe227; --text:#283d50; --muted:#5b7084; --line:rgba(7,27,54,.15); --paper:#f7fafc; } html{ scroll-padding-top:96px; } body{ color:var(--text); font-family:"Noto Sans JP","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; font-size:16px; line-height:1.82; letter-spacing:.018em; font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } p{ line-height:1.88; } .eyebrow{ margin-bottom:12px; font-size:.80rem; line-height:1.5; letter-spacing:.12em; } .title{ max-width:900px; font-size:clamp(2.05rem,3.35vw,2.85rem); line-height:1.30; letter-spacing:-.018em; } .lead{ max-width:760px; margin-top:20px; color:var(--muted); font-size:1rem; line-height:1.92; } .hero h1{ font-size:clamp(2.75rem,5vw,4.45rem); line-height:1.18; letter-spacing:-.035em; } .hero p{ max-width:720px; font-size:1.02rem; line-height:1.92; } .feature-copy p, .other-copy p{ font-size:.98rem; line-height:1.92; } .service h3{ font-size:1.28rem; line-height:1.45; letter-spacing:.005em; } .service p{ font-size:.94rem; line-height:1.86; } .service ul{ font-size:.86rem; line-height:1.75; } .flow-row strong{ font-size:.96rem; line-height:1.55; } .flow-row span{ margin-top:3px; font-size:.86rem; line-height:1.75; } .contact p{ font-size:.98rem; line-height:1.90; } .btn{ font-size:.92rem!important; letter-spacing:.035em!important; } /* FAQ readability */ .faq-section{ background:#f4f8fb!important; } .faq-intro .lead{ max-width:430px; } .faq-list{ border-color:rgba(7,27,54,.20); } .faq-item{ border-color:rgba(7,27,54,.16); } .faq-item summary{ min-height:80px; gap:17px; padding:19px 5px; } .faq-item summary>span{ width:38px; height:38px; color:var(--navy-mid); font-size:.72rem; } .faq-item summary>strong{ font-size:1rem; line-height:1.65; } .faq-answer p{ color:#4d657b; font-size:.94rem; line-height:1.92; } /* ========================================================= HEADER — navy-first digital navigation ========================================================= */ .header{ position:fixed; overflow:visible; background:rgba(247,250,252,.955)!important; border-bottom:1px solid rgba(7,27,54,.12)!important; backdrop-filter:blur(14px)!important; -webkit-backdrop-filter:blur(14px)!important; box-shadow:0 1px 0 rgba(255,255,255,.78)!important; } .header.scrolled{ background:rgba(247,250,252,.985)!important; border-bottom-color:rgba(7,27,54,.16)!important; box-shadow:0 8px 24px rgba(7,27,54,.075)!important; } /* A 1px "data packet" travels through the header rail. */ .header::after{ content:""; position:absolute; z-index:3; left:0; bottom:-1px; width:118px; height:2px; pointer-events:none; background:linear-gradient(90deg,transparent 0%,var(--it-cyan) 28%,#fff 51%,var(--hit-yellow) 72%,transparent 100%); filter:drop-shadow(0 0 4px rgba(71,155,214,.30)); opacity:.72; transform:translateX(-140px); animation:headerDataRail 5.8s cubic-bezier(.45,0,.2,1) infinite; } @keyframes headerDataRail{ 0%,48%{transform:translateX(-140px);opacity:0} 53%{opacity:.78} 78%{opacity:.72} 92%,100%{transform:translateX(calc(100vw + 30px));opacity:0} } .header-inner{ width:min(calc(100% - 32px),1400px)!important; min-height:80px; gap:24px!important; } .brand img{ width:270px; } .header .nav{ gap:6px!important; } .header .nav a{ position:relative!important; isolation:isolate!important; overflow:hidden!important; min-height:44px; display:flex!important; align-items:center; justify-content:center; padding:10px 14px!important; border:1px solid transparent!important; border-radius:9px!important; color:var(--navy)!important; background:transparent!important; font-size:.82rem!important; font-weight:800!important; line-height:1.25!important; letter-spacing:.025em!important; white-space:nowrap; transform:none!important; box-shadow:none!important; transition: color .28s ease, border-color .28s ease, background-color .28s ease, transform .34s cubic-bezier(.22,1,.36,1)!important; } .header .nav a::before{ content:""!important; display:block!important; position:absolute!important; z-index:-1!important; inset:0!important; border-radius:8px!important; background: linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%)!important; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); opacity:0!important; transform:scale(.94)!important; transition: opacity .28s ease, transform .38s cubic-bezier(.22,1,.36,1)!important; } .header .nav a::after{ content:""!important; display:block!important; position:absolute!important; z-index:2!important; left:10px!important; bottom:6px!important; width:5px!important; height:2px!important; border-radius:2px!important; background:var(--hit-yellow)!important; box-shadow:0 0 7px rgba(255,226,39,.75)!important; opacity:0!important; transform:none!important; } .header .nav a:hover, .header .nav a:focus-visible{ color:#fff!important; border-color:rgba(7,27,54,.15)!important; background:transparent!important; transform:translateY(-1px)!important; outline:none!important; } .header .nav a:hover::before, .header .nav a:focus-visible::before{ opacity:1!important; transform:scale(1)!important; } .header .nav a:hover::after, .header .nav a:focus-visible::after{ opacity:1!important; animation:navDataPacket .62s cubic-bezier(.22,1,.36,1) both; } @keyframes navDataPacket{ from{left:10px} to{left:calc(100% - 15px)} } /* Current section: a quiet system-status state rather than a filled button. */ .header .nav a.is-current{ color:var(--navy)!important; border-color:rgba(7,27,54,.13)!important; background:rgba(7,27,54,.045)!important; } .header .nav a.is-current::before{ opacity:0!important; } .header .nav a.is-current::after{ left:auto!important; right:9px!important; bottom:7px!important; width:4px!important; height:4px!important; border-radius:1px!important; background:var(--it-blue)!important; box-shadow:0 0 0 3px rgba(45,120,181,.09),0 0 6px rgba(45,120,181,.38)!important; opacity:1!important; animation:navNodePulse 2s ease-in-out infinite!important; } @keyframes navNodePulse{ 0%,100%{opacity:.48;transform:scale(.78)} 50%{opacity:1;transform:scale(1)} } /* Mobile/tablet menu also uses the same navy system language. */ .menu{ position:relative; overflow:hidden; align-items:center; justify-content:center; min-width:58px; height:42px; padding:0 12px; border:1px solid rgba(7,27,54,.14)!important; border-radius:8px!important; color:#fff!important; background:var(--navy)!important; font-size:.70rem!important; font-weight:800!important; letter-spacing:.10em!important; box-shadow:none!important; } .menu::after{ content:""; position:absolute; left:8px; right:8px; bottom:5px; height:1px; background:linear-gradient(90deg,transparent,var(--it-cyan),var(--hit-yellow),transparent); transform:scaleX(.25); opacity:.55; transition:transform .3s ease,opacity .3s ease; } .menu:hover::after, .menu:focus-visible::after{ transform:scaleX(1); opacity:1; } /* ========================================================= FOOTER — retain compact height, increase only row separation ========================================================= */ .footer-address{ font-size:.82rem!important; line-height:1.68!important; } .footer-links.footer-links--4x2{ column-gap:18px!important; row-gap:24px!important; } .footer-links.footer-links--4x2>a{ font-size:.82rem!important; line-height:1.45!important; } /* Break to the menu earlier now that FAQ is a fifth navigation item. */ @media(max-width:1080px){ .header-inner{ min-height:74px!important; } .brand img{ width:245px!important; } .menu{ display:flex!important; } .header .nav{ display:none!important; } .header .nav.open{ position:fixed!important; top:74px!important; right:14px!important; left:auto!important; width:min(420px,calc(100% - 28px))!important; display:grid!important; grid-template-columns:1fr!important; gap:5px!important; padding:12px!important; border:1px solid rgba(7,27,54,.12)!important; border-radius:12px!important; background:rgba(247,250,252,.985)!important; box-shadow:0 18px 44px rgba(7,27,54,.16)!important; backdrop-filter:blur(16px)!important; -webkit-backdrop-filter:blur(16px)!important; } .header .nav.open a{ min-height:48px!important; justify-content:flex-start!important; padding:12px 15px!important; font-size:.88rem!important; } } @media(max-width:720px){ html{scroll-padding-top:78px} body{ font-size:15.5px; line-height:1.82; } .header-inner{ min-height:68px!important; } .brand img{ width:205px!important; } .header .nav.open{ top:68px!important; right:10px!important; width:calc(100% - 20px)!important; } .hero h1{ font-size:clamp(2.30rem,10vw,2.95rem); line-height:1.19; } .hero p, .feature-copy p, .other-copy p, .contact p{ font-size:.95rem; line-height:1.88; } .title{ font-size:clamp(1.85rem,7.8vw,2.25rem); line-height:1.32; } .lead{ font-size:.95rem; } .service h3{font-size:1.18rem} .service p{font-size:.92rem} .service ul{font-size:.84rem} .faq-item summary>strong{ font-size:.95rem; } .faq-answer p{ font-size:.91rem; } .footer-links.footer-links--4x2{ row-gap:17px!important; column-gap:10px!important; } .footer-links.footer-links--4x2>a{ font-size:.78rem!important; } } @media(prefers-reduced-motion:reduce){ .header::after, .header .nav a::after{ animation:none!important; } } /* ========================================================= HEADER ALTERNATIVE B — DARK DIGITAL CONSOLE Completely different visual language: white logo module + navy command rail + numbered navigation. ========================================================= */ .header.header-console{ --hc-navy:#06182f; --hc-navy2:#0a2b52; --hc-blue:#59a8dd; --hc-cyan:#9edcff; --hc-yellow:#ffe227; --hc-line:rgba(185,221,244,.18); position:fixed!important; top:0!important; left:0!important; right:0!important; z-index:80!important; width:100%!important; height:92px!important; padding:0!important; background:var(--hc-navy)!important; border:0!important; box-shadow:0 8px 30px rgba(4,15,31,.18)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; overflow:visible!important; } .header.header-console.scrolled{ background:var(--hc-navy)!important; box-shadow:0 10px 34px rgba(4,15,31,.24)!important; } .header.header-console::before, .header.header-console::after{ content:none!important; display:none!important; } .header-console__frame{ position:relative; z-index:2; width:min(100%,1540px); height:92px; margin:0 auto; display:grid; grid-template-columns:minmax(320px,410px) 1fr; align-items:stretch; } /* Left logo module deliberately contrasts the dark control bar */ .brand.brand-console{ position:relative; display:grid!important; grid-template-columns:1fr auto; align-items:center; gap:14px; min-width:0; height:92px; margin:0!important; padding:10px 22px 10px 20px!important; color:var(--hc-navy)!important; background:#f7fafc!important; clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%); } .brand-console::after{ content:""; position:absolute; top:16px; right:22px; bottom:16px; width:1px; background:rgba(7,27,54,.14); } .brand-console__logo{ display:flex; align-items:center; min-width:0; } .brand-console__logo img{ width:min(245px,100%)!important; max-height:64px!important; object-fit:contain; object-position:left center; } .brand-console__meta{ position:relative; z-index:2; display:grid; justify-items:end; gap:4px; padding-right:7px; white-space:nowrap; } .brand-console__meta small{ color:#54728e; font:700 6px/1 Arial,sans-serif; letter-spacing:.15em; } .brand-console__meta b{ color:var(--hc-navy); font:800 8px/1 Arial,sans-serif; letter-spacing:.12em; } /* Right side = digital command/navigation rail */ .header .nav.nav-console{ position:relative; display:grid!important; grid-template-columns:repeat(4,minmax(126px,1fr)) minmax(150px,1.12fr); align-items:stretch!important; gap:0!important; height:92px; padding:0 14px 0 8px; background: linear-gradient(90deg,rgba(255,255,255,.015),transparent 22%), linear-gradient(180deg,#071a34 0%,#06182f 100%); } .header .nav.nav-console::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg,transparent 0 24%,rgba(116,181,225,.035) 24% 24.1%,transparent 24.1% 49%,rgba(116,181,225,.035) 49% 49.1%,transparent 49.1% 74%,rgba(116,181,225,.035) 74% 74.1%,transparent 74.1%), linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:auto,100% 23px; } .header .nav.nav-console a{ position:relative!important; isolation:isolate!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; min-width:0; height:92px!important; padding:0 14px!important; border:0!important; border-left:1px solid var(--hc-line)!important; border-radius:0!important; color:#d9eaf6!important; background:transparent!important; box-shadow:none!important; transform:none!important; transition: color .28s ease, background-color .28s ease!important; } .header .nav.nav-console a:last-child{ border-right:1px solid var(--hc-line)!important; } .header .nav.nav-console a em{ position:relative; z-index:3; margin-bottom:7px; color:#6f9cbd; font:700 8px/1 "Courier New",monospace; font-style:normal; letter-spacing:.12em; transition:color .28s ease; } .header .nav.nav-console a span{ position:relative; z-index:3; font-size:.78rem; font-weight:800; line-height:1.3; letter-spacing:.025em; white-space:nowrap; } /* Digital "window" that opens upward on hover */ .header .nav.nav-console a::before{ content:""!important; display:block!important; position:absolute!important; z-index:1!important; inset:auto 0 0 0!important; height:0!important; opacity:1!important; border-radius:0!important; clip-path:none!important; background: linear-gradient(135deg,rgba(26,88,137,.96),rgba(9,48,85,.98))!important; transform:none!important; transition:height .42s cubic-bezier(.22,1,.36,1)!important; } .header .nav.nav-console a::after{ content:""!important; display:block!important; position:absolute!important; z-index:4!important; left:14px!important; right:auto!important; top:auto!important; bottom:14px!important; width:26px!important; height:1px!important; opacity:.30!important; border-radius:0!important; background:var(--hc-blue)!important; box-shadow:none!important; transform:none!important; animation:none!important; transition:width .38s cubic-bezier(.22,1,.36,1),opacity .28s ease!important; } .header .nav.nav-console a:hover, .header .nav.nav-console a:focus-visible{ color:#fff!important; background:transparent!important; transform:none!important; outline:none!important; } .header .nav.nav-console a:hover::before, .header .nav.nav-console a:focus-visible::before{ height:100%!important; } .header .nav.nav-console a:hover::after, .header .nav.nav-console a:focus-visible::after{ width:calc(100% - 28px)!important; opacity:1!important; background:linear-gradient(90deg,var(--hc-cyan),var(--hc-yellow))!important; } .header .nav.nav-console a:hover em, .header .nav.nav-console a:focus-visible em{ color:var(--hc-yellow); } /* Contact becomes a clear endpoint instead of another identical tab */ .header .nav.nav-console a.nav-console__contact{ color:#06182f!important; background:var(--hc-yellow)!important; border-left:0!important; margin:12px 0 12px 10px; height:68px!important; align-self:center; clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%); } .header .nav.nav-console a.nav-console__contact em{ color:#6a6500; } .header .nav.nav-console a.nav-console__contact::before{ background:#fff!important; } .header .nav.nav-console a.nav-console__contact::after{ background:#06182f!important; opacity:.42!important; } .header .nav.nav-console a.nav-console__contact:hover{ color:#06182f!important; } .header .nav.nav-console a.nav-console__contact:hover em{ color:#24568f; } /* Current position: narrow live-status marker */ .header .nav.nav-console a.is-current{ color:#fff!important; background:rgba(71,142,194,.10)!important; } .header .nav.nav-console a.is-current::before{ height:3px!important; top:auto!important; bottom:0!important; background:linear-gradient(90deg,var(--hc-blue),var(--hc-yellow))!important; opacity:1!important; } .header .nav.nav-console a.is-current::after{ left:auto!important; right:12px!important; bottom:14px!important; width:5px!important; height:5px!important; border-radius:50%!important; background:var(--hc-cyan)!important; box-shadow:0 0 0 4px rgba(89,168,221,.09),0 0 10px rgba(89,168,221,.48)!important; opacity:1!important; animation:consolePulse 2.2s ease-in-out infinite!important; } @keyframes consolePulse{ 0%,100%{opacity:.45} 50%{opacity:1} } /* Scanning signal along bottom border */ .header-console__signal{ position:absolute; z-index:5; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; background:rgba(100,169,215,.10); } .header-console__signal span{ display:block; width:180px; height:2px; background:linear-gradient(90deg,transparent,var(--hc-blue),#fff,var(--hc-yellow),transparent); transform:translateX(-200px); animation:consoleSignal 6.4s cubic-bezier(.45,0,.2,1) infinite; } @keyframes consoleSignal{ 0%,55%{transform:translateX(-200px);opacity:0} 60%{opacity:.9} 91%{opacity:.75} 100%{transform:translateX(calc(100vw + 200px));opacity:0} } /* Hamburger becomes a compact console control */ .menu.menu-console{ display:none!important; position:relative; width:62px!important; min-width:62px!important; height:46px!important; padding:0!important; border:1px solid rgba(157,215,250,.32)!important; border-radius:0!important; color:#fff!important; background:#071b36!important; box-shadow:none!important; } .menu-console span{ position:absolute; left:8px; top:8px; font:800 6px/1 Arial,sans-serif; letter-spacing:.12em; } .menu-console i{ position:absolute; right:9px; width:24px; height:1px; background:#9edcff; } .menu-console i:nth-of-type(1){top:20px} .menu-console i:nth-of-type(2){top:28px} /* With this concept, hero sits behind a slightly taller command header. */ .hero{ padding-top:108px!important; } /* Tablet / laptop: switch to command drawer instead of squeezing tabs */ @media(max-width:1240px){ .header.header-console{ height:78px!important; } .header-console__frame{ height:78px; grid-template-columns:1fr auto; padding:0 14px 0 0; } .brand.brand-console{ height:78px; width:min(410px,72vw); padding-block:7px!important; } .brand-console__logo img{ width:min(230px,100%)!important; } .brand-console__meta{ display:none; } .menu.menu-console{ display:block!important; align-self:center; } .header .nav.nav-console{ display:none!important; } .header .nav.nav-console.open{ position:fixed!important; display:grid!important; top:78px!important; right:12px!important; left:auto!important; width:min(430px,calc(100% - 24px))!important; height:auto!important; padding:10px!important; grid-template-columns:1fr!important; gap:0!important; background:#06182f!important; border:1px solid rgba(143,199,236,.22)!important; box-shadow:0 20px 50px rgba(2,11,24,.32)!important; } .header .nav.nav-console.open::before{ display:none; } .header .nav.nav-console.open a, .header .nav.nav-console.open a.nav-console__contact{ display:grid!important; grid-template-columns:36px 1fr!important; align-items:center!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0 15px!important; border:0!important; border-bottom:1px solid rgba(157,215,250,.14)!important; clip-path:none!important; color:#e4f1fa!important; background:transparent!important; } .header .nav.nav-console.open a em{ margin:0!important; color:#6f9cbd; } .header .nav.nav-console.open a span{ font-size:.88rem; } .header .nav.nav-console.open a.nav-console__contact{ margin-top:8px!important; color:#06182f!important; background:var(--hc-yellow)!important; border-bottom:0!important; } .hero{ padding-top:94px!important; } } @media(max-width:720px){ .header.header-console{ height:68px!important; } .header-console__frame{ height:68px; padding-right:10px; } .brand.brand-console{ height:68px; width:min(300px,76vw); padding:6px 16px 6px 12px!important; clip-path:polygon(0 0,calc(100% - 17px) 0,100% 50%,calc(100% - 17px) 100%,0 100%); } .brand-console__logo img{ width:min(202px,100%)!important; max-height:52px!important; } .brand-console::after{display:none} .menu.menu-console{ width:54px!important; min-width:54px!important; height:42px!important; } .header .nav.nav-console.open{ top:68px!important; right:8px!important; width:calc(100% - 16px)!important; } .hero{ padding-top:82px!important; } } @media(prefers-reduced-motion:reduce){ .header-console__signal span, .header .nav.nav-console a.is-current::after{ animation:none!important; } } /* ========================================================= DARK CONSOLE HEADER — LOGO-FOCUSED REVISION - No navigation numbering - No CONSTRUCTION × IT / DIGITAL DIVISION copy - Uploaded HIT + IT division logo used as-is - Logo maximized within the existing left module width ========================================================= */ .header-console__frame{ grid-template-columns:minmax(360px,450px) 1fr!important; } /* The entire left module is now dedicated to the supplied logo. */ .brand.brand-console{ display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:0!important; padding:5px 34px 5px 14px!important; } .brand-console::after{ display:none!important; } .brand-console__meta{ display:none!important; } .brand-console__logo{ display:flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; height:100%!important; min-width:0!important; } .brand-console__logo img{ display:block!important; width:100%!important; max-width:423px!important; height:auto!important; max-height:80px!important; object-fit:contain!important; object-position:left center!important; } /* Navigation: no number column / no reserved em space. */ .header .nav.nav-console a{ justify-content:center!important; padding:0 16px!important; } .header .nav.nav-console a em{ display:none!important; } .header .nav.nav-console a span{ font-size:.80rem!important; } /* Contact CTA remains visually distinct. */ .header .nav.nav-console a.nav-console__contact{ padding-inline:16px!important; } /* Drawer menu: remove the old two-column numbering layout. */ @media(max-width:1240px){ .brand.brand-console{ width:min(450px,78vw)!important; padding:4px 28px 4px 12px!important; } .brand-console__logo img{ width:100%!important; max-width:423px!important; max-height:70px!important; } .header .nav.nav-console.open a, .header .nav.nav-console.open a.nav-console__contact{ display:flex!important; grid-template-columns:none!important; justify-content:flex-start!important; padding:0 16px!important; } } @media(max-width:720px){ .brand.brand-console{ width:min(330px,80vw)!important; padding:4px 20px 4px 9px!important; } .brand-console__logo img{ max-height:58px!important; } .header .nav.nav-console.open a span{ font-size:.86rem!important; } } /* ========================================================= HEADER — supplied transparent white logo + larger nav type ========================================================= */ .header-console__frame{ grid-template-columns:minmax(360px,450px) 1fr!important; } .brand.brand-console{ background: linear-gradient(135deg,#0a2b52 0%,#06182f 72%,#041326 100%)!important; padding:5px 32px 5px 12px!important; box-shadow:inset -1px 0 0 rgba(146,205,242,.16)!important; } .brand.brand-console::before{ content:""!important; position:absolute!important; z-index:3!important; right:20px!important; top:20px!important; bottom:20px!important; width:2px!important; background:linear-gradient(180deg,transparent,#5ca7db,#ffe227,transparent)!important; opacity:.65!important; transform:skewX(-18deg)!important; } .brand-console__logo img{ width:100%!important; max-width:423px!important; max-height:80px!important; object-fit:contain!important; object-position:left center!important; } .header .nav.nav-console a span{ font-size:.90rem!important; letter-spacing:.028em!important; } .header .nav.nav-console a{ padding-inline:15px!important; } @media(max-width:1240px){ .brand.brand-console{ background:linear-gradient(135deg,#0a2b52,#06182f)!important; } .header .nav.nav-console.open a span{ font-size:.94rem!important; } } @media(max-width:720px){ .brand.brand-console::before{right:13px!important} .header .nav.nav-console.open a span{ font-size:.91rem!important; } } /* ========================================================= NUMBERING REDUCTION — use motifs, not serial numbers ========================================================= */ .eyebrow{ position:relative; padding-left:20px; } .eyebrow::before{ content:""; position:absolute; left:0; top:.68em; width:11px; height:2px; background:currentColor; opacity:.72; } .feature{ grid-template-columns:54px 1fr!important; gap:18px!important; } .feature .feature-mark{ display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(7,27,54,.16); border-radius:14px; color:#245f93; background:rgba(52,121,174,.055); } .feature .feature-mark svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .feature>b{ display:none!important; } /* FAQ uses Q rather than Q1/Q2/Q3... */ .faq-item summary>span{ border-radius:10px!important; color:#245f93!important; background:rgba(45,120,181,.055)!important; font-family:Arial,sans-serif; font-size:.78rem!important; letter-spacing:.03em!important; } /* Contact flow keeps sequence visually through a rail and nodes. */ .flow-row{ grid-template-columns:42px 1fr!important; } .flow-node-wrap{ position:relative; display:grid!important; place-items:center; width:42px; min-height:42px; color:inherit!important; font-size:0!important; } .flow-node{ display:block; width:10px; height:10px; border:2px solid #b7cde1; border-radius:50%; background:#071b36; box-shadow:0 0 0 5px rgba(183,205,225,.07); } .flow-row:first-of-type .flow-node{ border-color:#ffe227; box-shadow:0 0 0 5px rgba(255,226,39,.07); } /* ========================================================= SERVICES — visual first, shorter copy, four clear domains ========================================================= */ .services-visual-section{ overflow:hidden; background: radial-gradient(circle at 14% 12%,rgba(53,121,180,.18),transparent 32%), radial-gradient(circle at 88% 82%,rgba(63,142,198,.12),transparent 34%), #071b36!important; } .services-visual-head{ max-width:850px; } .services-visual-section .title{ color:#fff!important; } .services-visual-section .lead{ max-width:780px; color:rgba(228,240,249,.72)!important; } .service-photo--map{ position:relative; overflow:hidden; margin:46px 0 34px!important; min-height:320px; border:1px solid rgba(164,210,241,.17); border-radius:28px!important; background:#06172e; box-shadow:0 28px 68px rgba(1,10,22,.25); } .service-photo--map::before{ content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background: linear-gradient(180deg,transparent 52%,rgba(4,17,34,.82) 100%), linear-gradient(90deg,rgba(7,27,54,.18),transparent 45%); } .service-photo--map img{ display:block; width:100%; height:clamp(320px,35vw,430px)!important; object-fit:cover; object-position:center 52%; opacity:.92; } .service-map{ position:absolute; z-index:4; left:5%; right:5%; bottom:28px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:0; color:#fff; } .service-map::before{ content:""; position:absolute; z-index:-1; left:8%; right:8%; top:8px; height:1px; background:linear-gradient(90deg,rgba(143,204,242,.26),#7fc3ed,#ffe227,rgba(143,204,242,.26)); } .service-map span{ position:relative; display:grid; justify-items:center; gap:10px; font-size:.78rem; font-weight:800; letter-spacing:.07em; text-shadow:0 2px 10px rgba(0,0,0,.4); } .service-map__dot{ display:block; width:17px; height:17px; border:4px solid #0a294d; border-radius:50%; background:#94d3f7; box-shadow:0 0 0 1px rgba(255,255,255,.56),0 0 16px rgba(105,189,239,.45); } .service-map span:last-child .service-map__dot{ background:#ffe227; box-shadow:0 0 0 1px rgba(255,255,255,.62),0 0 18px rgba(255,226,39,.35); } .services-visual-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .service-visual-card{ position:relative; min-height:255px; display:grid; grid-template-columns:86px 1fr; grid-template-rows:auto 1fr auto; column-gap:20px; padding:28px 28px 24px; overflow:hidden; border:1px solid rgba(155,205,238,.16); border-radius:20px; background: linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition: transform .34s cubic-bezier(.22,1,.36,1), border-color .28s ease, background-color .28s ease; } .service-visual-card::after{ content:""; position:absolute; right:-44px; bottom:-58px; width:150px; height:150px; border:1px solid rgba(108,180,226,.08); border-radius:50%; box-shadow:0 0 0 28px rgba(108,180,226,.025),0 0 0 56px rgba(108,180,226,.018); } .service-visual-card:hover{ transform:translateY(-4px); border-color:rgba(140,207,246,.32); background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035)); } .service-visual-icon{ grid-row:1 / span 2; display:grid; place-items:center; width:78px; height:78px; border:1px solid rgba(147,207,243,.22); border-radius:18px; color:#91d2f5; background:rgba(55,131,185,.09); } .service-visual-icon svg{ width:52px; height:52px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .service-visual-icon--field{ color:#ffe227; border-color:rgba(255,226,39,.24); background:rgba(255,226,39,.055); } .service-visual-icon--security{ color:#b9e4fb; } .service-visual-copy{ position:relative; z-index:2; min-width:0; } .service-kicker{ display:block; margin-bottom:6px; color:#76add4; font:700 .67rem/1.3 Arial,sans-serif; letter-spacing:.12em; } .service-visual-icon--field + .service-visual-copy .service-kicker{ color:#d5c63a; } .service-visual-card h3{ margin:0; color:#fff; font-size:1.22rem; line-height:1.45; letter-spacing:.005em; } .service-visual-card p{ max-width:430px; margin:10px 0 0; color:rgba(226,239,248,.70); font-size:.91rem; line-height:1.78; } .service-tags{ position:relative; z-index:2; grid-column:1 / -1; align-self:end; display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; } .service-tags span{ display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border:1px solid rgba(164,211,241,.14); border-radius:999px; color:#cfe6f5; background:rgba(5,24,48,.54); font-size:.72rem; font-weight:700; line-height:1.3; } .service-visual-note{ max-width:760px; margin:28px auto 0; padding-top:20px; border-top:1px solid rgba(166,211,240,.14); color:rgba(221,237,247,.66); text-align:center; font-size:.86rem; line-height:1.8; } /* Old service circuit/cards are no longer used in this section. */ .services-visual-section .service-system, .services-visual-section .services{ display:none!important; } @media(max-width:900px){ .services-visual-grid{ grid-template-columns:1fr; } .service-visual-card{ min-height:0; } } @media(max-width:720px){ .feature{ grid-template-columns:46px 1fr!important; gap:13px!important; } .feature .feature-mark{ width:42px; height:42px; border-radius:12px; } .feature .feature-mark svg{ width:24px; height:24px; } .service-photo--map{ min-height:250px; margin:32px 0 24px!important; border-radius:18px!important; } .service-photo--map img{ height:270px!important; } .service-map{ left:3%; right:3%; bottom:19px; } .service-map span{ gap:7px; font-size:.66rem; letter-spacing:.02em; } .service-map__dot{ width:13px; height:13px; border-width:3px; } .service-visual-card{ grid-template-columns:62px 1fr; gap:14px; padding:21px 18px 19px; border-radius:16px; } .service-visual-icon{ width:58px; height:58px; border-radius:14px; } .service-visual-icon svg{ width:39px; height:39px; } .service-visual-card h3{ font-size:1.08rem; } .service-visual-card p{ font-size:.87rem; line-height:1.72; } .service-tags{ margin-top:17px; } .service-tags span{ font-size:.68rem; } .faq-item summary{ grid-template-columns:40px 1fr auto!important; } } @media(prefers-reduced-motion:reduce){ .service-visual-card{ transition:none!important; } } /* ========================================================= HEADER REVISION — WHITE LOGO MODULE + LARGER NAV ========================================================= */ .header-console__frame{ grid-template-columns:minmax(360px,450px) 1fr!important; } .brand.brand-console{ background:#fff!important; padding:5px 32px 5px 12px!important; box-shadow:inset -1px 0 0 rgba(7,27,54,.10)!important; } .brand.brand-console::before{ display:none!important; } .brand-console__logo img{ width:100%!important; max-width:423px!important; max-height:80px!important; object-fit:contain!important; object-position:left center!important; } .header .nav.nav-console a span{ font-size:.94rem!important; letter-spacing:.025em!important; } @media(max-width:1240px){ .brand.brand-console{ background:#fff!important; } .header .nav.nav-console.open a span{ font-size:.97rem!important; } } @media(max-width:720px){ .header .nav.nav-console.open a span{ font-size:.93rem!important; } } /* ========================================================= NUMBERING BALANCE Numbers only where order/hierarchy is genuinely useful. ========================================================= */ #strengths .feature{ grid-template-columns:52px 1fr!important; gap:16px!important; } #strengths .feature>b{ display:grid!important; place-items:center; width:42px; height:42px; border:1px solid rgba(7,27,54,.17); border-radius:12px; color:#245f93; background:rgba(52,121,174,.05); font-size:.73rem; line-height:1; letter-spacing:.08em; } #strengths .feature-mark{ display:none!important; } #contact .flow-row{ grid-template-columns:42px 1fr!important; } #contact .flow-row>b{ display:block!important; color:#b7cde1!important; font-size:.78rem!important; } #contact .flow-node-wrap{ display:none!important; } /* ========================================================= CONSTRUCTION × IT BRIDGE A direct visual explanation of WHY construction and IT connect. ========================================================= */ .services-bridge-section{ overflow:hidden; background: radial-gradient(circle at 8% 15%,rgba(47,118,174,.20),transparent 29%), radial-gradient(circle at 94% 80%,rgba(64,145,201,.12),transparent 32%), #071b36!important; } .services-bridge-head{ max-width:900px; } .services-bridge-section .title{ color:#fff!important; } .services-bridge-section .lead{ max-width:850px; color:rgba(226,239,248,.72)!important; } .construction-it-bridge{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.78fr) minmax(0,1fr); gap:28px; margin-top:48px; padding:34px; overflow:hidden; border:1px solid rgba(153,205,239,.18); border-radius:30px; background: linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 34px 80px rgba(1,10,22,.20); isolation:isolate; } .construction-it-bridge::before{ content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background: linear-gradient(rgba(133,190,228,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(133,190,228,.035) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 45% 55%,rgba(0,0,0,.35)); } .bridge-column, .bridge-core{ position:relative; z-index:3; } .bridge-column-head{ display:flex; align-items:center; gap:15px; min-height:86px; padding-bottom:18px; border-bottom:1px solid rgba(158,207,238,.14); } .bridge-big-icon{ flex:0 0 70px; display:grid; place-items:center; width:70px; height:70px; border:1px solid rgba(157,210,242,.20); border-radius:20px; background:rgba(59,133,187,.08); color:#a6dcfa; } .bridge-big-icon--construction{ color:#ffe227; border-color:rgba(255,226,39,.23); background:rgba(255,226,39,.055); } .bridge-big-icon svg{ width:50px; height:50px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .bridge-column-head span{ display:block; margin-bottom:5px; color:#76add4; font:700 .66rem/1 Arial,sans-serif; letter-spacing:.13em; } .bridge-column--construction .bridge-column-head span{ color:#d7c83b; } .bridge-column-head h3{ margin:0; color:#fff; font-size:1.12rem; line-height:1.45; } .bridge-issues, .bridge-results{ display:grid; gap:10px; margin-top:18px; } .bridge-issue, .bridge-result{ min-height:86px; border:1px solid rgba(155,206,239,.12); border-radius:15px; background:rgba(3,21,43,.46); } .bridge-issue{ display:grid; grid-template-columns:46px 1fr; align-items:center; gap:12px; padding:13px 14px; } .issue-icon{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px; color:#9bd3f6; background:rgba(87,165,216,.08); } .issue-icon svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .bridge-issue strong, .bridge-result strong{ display:block; color:#eef8ff; font-size:.86rem; line-height:1.45; } .bridge-issue small{ display:block; margin-top:4px; color:rgba(209,230,243,.58); font-size:.69rem; line-height:1.5; } .bridge-result{ padding:14px; } .bridge-result>div{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; } .bridge-result span{ display:inline-flex; min-height:24px; align-items:center; padding:3px 8px; border:1px solid rgba(150,208,243,.14); border-radius:999px; color:#c6e5f7; background:rgba(77,153,205,.07); font-size:.64rem; font-weight:700; } /* Core = the reason construction and IT connect at HIT */ .bridge-core{ align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; padding:30px 18px; text-align:center; border:1px solid rgba(132,197,239,.18); border-radius:22px; background: radial-gradient(circle at 50% 30%,rgba(76,157,213,.17),transparent 38%), linear-gradient(180deg,rgba(9,44,82,.80),rgba(4,24,49,.88)); } .bridge-core__halo{ position:absolute; z-index:-1; top:20px; left:50%; width:150px; height:150px; border:1px solid rgba(112,190,237,.14); border-radius:50%; box-shadow: 0 0 0 22px rgba(80,161,214,.035), 0 0 0 45px rgba(80,161,214,.02); transform:translateX(-50%); } .bridge-core__cross{ display:grid; place-items:center; width:54px; height:54px; margin-bottom:15px; border:1px solid rgba(255,226,39,.42); border-radius:50%; color:#ffe227; background:#071b36; box-shadow:0 0 0 8px rgba(255,226,39,.035); font-size:1.55rem; font-weight:300; } .bridge-core__eyebrow{ color:#79b7df; font:700 .66rem/1 Arial,sans-serif; letter-spacing:.13em; } .bridge-core h3{ margin:9px 0 20px; color:#fff; font-size:1.10rem; line-height:1.58; } .bridge-process{ width:100%; display:grid; gap:8px; margin:0; padding:0; list-style:none; text-align:left; } .bridge-process li{ display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; padding:9px 10px; border:1px solid rgba(139,200,238,.12); border-radius:11px; background:rgba(255,255,255,.035); } .bridge-process b{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#071b36; background:#ffe227; font:800 .70rem/1 Arial,sans-serif; } .bridge-process strong{ display:block; color:#edf8ff; font-size:.77rem; line-height:1.35; } .bridge-process small{ display:block; margin-top:2px; color:rgba(206,230,245,.52); font-size:.62rem; line-height:1.4; } .bridge-core__message{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:19px; color:#a7cee8; font:700 .62rem/1 Arial,sans-serif; letter-spacing:.08em; } .bridge-core__message i{ flex:1; height:1px; background:linear-gradient(90deg,#699dbc,#ffe227,#699dbc); } /* Animated routes from problems to solutions */ .bridge-flow-svg{ position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; } .bridge-flow-line{ fill:none; stroke:#78bde9; stroke-width:1.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.28; } .bridge-data{ fill:#ffe227; filter:drop-shadow(0 0 5px rgba(255,226,39,.7)); opacity:0; } /* Icon drawing before the card content settles */ .bridge-big-icon svg *, .issue-icon svg *, .service-domain-icon svg *{ stroke-dasharray:140; stroke-dashoffset:140; } .services-bridge-section.is-active .bridge-big-icon svg *, .services-bridge-section.is-active .issue-icon svg *, .services-bridge-section.is-active .service-domain-icon svg *{ animation:bridgeIconDraw .95s cubic-bezier(.22,1,.36,1) forwards; } .services-bridge-section.is-active .bridge-issue:nth-child(1) .issue-icon svg *{animation-delay:.22s} .services-bridge-section.is-active .bridge-issue:nth-child(2) .issue-icon svg *{animation-delay:.34s} .services-bridge-section.is-active .bridge-issue:nth-child(3) .issue-icon svg *{animation-delay:.46s} .services-bridge-section.is-active .bridge-issue:nth-child(4) .issue-icon svg *{animation-delay:.58s} @keyframes bridgeIconDraw{ to{stroke-dashoffset:0} } .services-bridge-section.is-active .bridge-flow-line--1{animation:bridgeRoute 1.1s .25s cubic-bezier(.22,1,.36,1) forwards} .services-bridge-section.is-active .bridge-flow-line--2{animation:bridgeRoute 1.1s .39s cubic-bezier(.22,1,.36,1) forwards} .services-bridge-section.is-active .bridge-flow-line--3{animation:bridgeRoute 1.1s .53s cubic-bezier(.22,1,.36,1) forwards} .services-bridge-section.is-active .bridge-flow-line--4{animation:bridgeRoute 1.1s .67s cubic-bezier(.22,1,.36,1) forwards} @keyframes bridgeRoute{ 0%{stroke-dashoffset:1;opacity:.10} 100%{stroke-dashoffset:0;opacity:.44} } .services-bridge-section.is-active .bridge-core__cross{ animation:bridgeCross 1.05s .42s cubic-bezier(.22,1,.36,1) both; } @keyframes bridgeCross{ 0%{opacity:0;transform:scale(.45) rotate(-90deg);box-shadow:0 0 0 0 rgba(255,226,39,0)} 55%{opacity:1;transform:scale(1.12) rotate(8deg);box-shadow:0 0 0 18px rgba(255,226,39,.05)} 100%{opacity:1;transform:scale(1);box-shadow:0 0 0 8px rgba(255,226,39,.035)} } /* Data packets travel left -> right once when the section appears */ .services-bridge-section.is-active .bridge-data--1{animation:bridgePacket1 1.45s .75s ease-in-out both} .services-bridge-section.is-active .bridge-data--2{animation:bridgePacket2 1.45s .92s ease-in-out both} .services-bridge-section.is-active .bridge-data--3{animation:bridgePacket3 1.45s 1.09s ease-in-out both} .services-bridge-section.is-active .bridge-data--4{animation:bridgePacket4 1.45s 1.26s ease-in-out both} @keyframes bridgePacket1{ 0%{opacity:0;offset-distance:0%}15%{opacity:1}85%{opacity:1}100%{opacity:0;offset-distance:100%} } @keyframes bridgePacket2{ 0%{opacity:0;offset-distance:0%}15%{opacity:1}85%{opacity:1}100%{opacity:0;offset-distance:100%} } @keyframes bridgePacket3{ 0%{opacity:0;offset-distance:0%}15%{opacity:1}85%{opacity:1}100%{opacity:0;offset-distance:100%} } @keyframes bridgePacket4{ 0%{opacity:0;offset-distance:0%}15%{opacity:1}85%{opacity:1}100%{opacity:0;offset-distance:100%} } .bridge-data--1{offset-path:path("M330 205 C455 205 460 155 600 155 S745 205 870 205")} .bridge-data--2{offset-path:path("M330 315 C465 315 475 270 600 270 S735 315 870 315")} .bridge-data--3{offset-path:path("M330 425 C465 425 475 390 600 390 S735 425 870 425")} .bridge-data--4{offset-path:path("M330 535 C455 535 470 505 600 505 S745 535 870 535")} /* 4 support domains */ .service-domain-head{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:end; margin:48px 0 20px; } .service-domain-head>span{ grid-row:1 / span 2; align-self:center; padding:7px 9px; border:1px solid rgba(149,205,240,.18); border-radius:8px; color:#8fc4e5; font:700 .62rem/1 Arial,sans-serif; letter-spacing:.10em; } .service-domain-head h3{ margin:0; color:#fff; font-size:1.42rem; line-height:1.4; } .service-domain-head p{ margin:4px 0 0; color:rgba(217,235,246,.58); font-size:.82rem; } .service-domain-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .service-domain-card{ position:relative; min-width:0; min-height:330px; display:flex; flex-direction:column; padding:24px 20px 20px; overflow:hidden; border:1px solid rgba(147,204,240,.15); border-radius:18px; background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.022)); transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease; } .service-domain-card:hover{ transform:translateY(-4px); border-color:rgba(146,211,249,.30); } .service-domain-icon{ display:grid; place-items:center; width:68px; height:68px; margin-bottom:19px; border:1px solid rgba(147,207,243,.20); border-radius:17px; color:#a3d9f7; background:rgba(76,157,210,.07); } .service-domain-card--field .service-domain-icon{ color:#ffe227; border-color:rgba(255,226,39,.22); background:rgba(255,226,39,.05); } .service-domain-icon svg{ width:47px; height:47px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .service-domain-card>div:nth-child(2)>span{ display:block; margin-bottom:5px; color:#73aed6; font-size:.66rem; font-weight:800; letter-spacing:.11em; } .service-domain-card h3{ margin:0; color:#fff; font-size:1.05rem; line-height:1.48; } .service-domain-card p{ margin:9px 0 0; color:rgba(220,237,247,.68); font-size:.82rem; line-height:1.72; } .service-domain-card ul{ display:grid; gap:7px; margin:auto 0 0; padding:18px 0 0; border-top:1px solid rgba(147,204,240,.12); list-style:none; } .service-domain-card li{ position:relative; padding-left:13px; color:#c9e1f0; font-size:.73rem; line-height:1.5; } .service-domain-card li::before{ content:""; position:absolute; left:0; top:.65em; width:5px; height:1px; background:#78b8df; } .service-domain-card--field li::before{ background:#ffe227; } @media(max-width:1080px){ .construction-it-bridge{ grid-template-columns:1fr; gap:20px; } .bridge-core{ order:-1; max-width:680px; width:100%; margin:0 auto; } .bridge-flow-svg{ display:none; } .bridge-column{ max-width:760px; width:100%; margin:0 auto; } .service-domain-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:720px){ .construction-it-bridge{ margin-top:32px; padding:18px; border-radius:20px; } .bridge-column-head{ min-height:0; padding-bottom:14px; } .bridge-big-icon{ flex-basis:58px; width:58px; height:58px; border-radius:15px; } .bridge-big-icon svg{ width:41px; height:41px; } .bridge-column-head h3{ font-size:1rem; } .bridge-issue, .bridge-result{ min-height:0; } .bridge-core{ padding:24px 14px; } .bridge-core h3{ font-size:1rem; } .bridge-process li{ grid-template-columns:31px 1fr; } .service-domain-head{ grid-template-columns:1fr; gap:7px; margin-top:36px; } .service-domain-head>span{ grid-row:auto; justify-self:start; } .service-domain-head h3{ font-size:1.22rem; } .service-domain-grid{ grid-template-columns:1fr; } .service-domain-card{ min-height:0; } } @media(prefers-reduced-motion:reduce){ .bridge-big-icon svg *, .issue-icon svg *, .service-domain-icon svg *{ stroke-dashoffset:0!important; animation:none!important; } .bridge-flow-line{ stroke-dashoffset:0!important; animation:none!important; } .bridge-data{ display:none!important; } .bridge-core__cross, .service-domain-card{ animation:none!important; transition:none!important; } } /* ========================================================= SERVICES FINAL REBUILD — PHOTO FIRST / CLEAR STORY ========================================================= */ .services-story-section{ overflow:hidden; background: radial-gradient(circle at 7% 8%,rgba(59,130,184,.16),transparent 29%), radial-gradient(circle at 95% 92%,rgba(54,136,193,.10),transparent 31%), #071b36!important; } .services-story-head{ max-width:960px; } .services-story-section .title{ color:#fff!important; } .services-story-section .lead{ max-width:900px; color:rgba(226,239,248,.72)!important; } /* ---- Main photo: construction + IT explained visually ---- */ .why-photo{ position:relative; overflow:hidden; min-height:480px; margin:48px 0 24px; border:1px solid rgba(158,208,240,.18); border-radius:28px; background:#04172d; box-shadow:0 30px 78px rgba(0,9,20,.24); } .why-photo>img{ display:block; width:100%; height:clamp(480px,45vw,620px); object-fit:cover; object-position:center; } .why-photo__shade{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg,rgba(3,18,36,.82) 0%,rgba(3,18,36,.12) 34%,rgba(3,18,36,.08) 61%,rgba(3,18,36,.80) 100%), linear-gradient(180deg,rgba(3,18,36,.06),rgba(3,18,36,.12) 56%,rgba(3,18,36,.66) 100%); } .why-photo__side{ position:absolute; z-index:3; top:44px; width:min(300px,28%); color:#fff; } .why-photo__side--field{ left:36px; } .why-photo__side--office{ right:36px; text-align:right; } .why-photo__label{ display:block; margin-bottom:8px; color:#9ecce9; font:700 .64rem/1 Arial,sans-serif; letter-spacing:.13em; } .why-photo__side--field .why-photo__label{ color:#f4dc48; } .why-photo__side strong{ display:block; font-size:1.15rem; line-height:1.45; } .why-photo__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .why-photo__side--office .why-photo__chips{ justify-content:flex-end; } .why-photo__chips span{ display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; border:1px solid rgba(255,255,255,.26); border-radius:999px; color:#fff; background:rgba(2,17,34,.48); backdrop-filter:blur(7px); font-size:.69rem; font-weight:800; } .why-photo__center{ position:absolute; z-index:4; left:50%; bottom:34px; width:min(380px,40%); padding:18px 24px 17px; border:1px solid rgba(185,222,245,.24); border-radius:16px; color:#fff; text-align:center; background:rgba(4,22,43,.80); box-shadow:0 16px 36px rgba(1,10,22,.22); backdrop-filter:blur(12px); transform:translateX(-50%); } .why-photo__small{ display:block; margin-bottom:7px; color:#87c2e8; font:700 .64rem/1 Arial,sans-serif; letter-spacing:.14em; } .why-photo__center b{ display:block; font-size:1.25rem; line-height:1.5; } .why-photo__center i{ display:block; width:48px; height:2px; margin:13px auto 0; background:linear-gradient(90deg,#78bfe9,#ffe227); } .why-photo__data{ position:absolute; z-index:5; inset:0; pointer-events:none; } .data-pill{ position:absolute; left:18%; top:58%; display:inline-flex; align-items:center; justify-content:center; min-width:64px; min-height:24px; padding:3px 8px; border:1px solid rgba(163,216,247,.42); border-radius:999px; color:#e9f7ff; background:rgba(4,31,59,.82); box-shadow:0 0 12px rgba(89,168,221,.18); font:700 .58rem/1 Arial,sans-serif; letter-spacing:.08em; opacity:0; } .data-pill--drawing{top:65%} .data-pill--report{top:72%} /* Meaningful one-time flow: field data travels toward office */ .services-story-section.is-active .data-pill--photo{ animation:dataToOffice 2.2s .55s cubic-bezier(.42,0,.2,1) both; } .services-story-section.is-active .data-pill--drawing{ animation:dataToOffice 2.2s .78s cubic-bezier(.42,0,.2,1) both; } .services-story-section.is-active .data-pill--report{ animation:dataToOffice 2.2s 1.01s cubic-bezier(.42,0,.2,1) both; } @keyframes dataToOffice{ 0%{left:19%;opacity:0;transform:scale(.86)} 12%{opacity:1} 46%{left:46%;opacity:1} 58%{left:53%;opacity:1;box-shadow:0 0 18px rgba(255,226,39,.28)} 88%{opacity:1} 100%{left:78%;opacity:0;transform:scale(.96)} } /* ---- Why logic: three simple statements, not a complicated diagram ---- */ .why-logic{ display:grid; grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr) 66px minmax(0,1fr); align-items:stretch; gap:10px; margin:22px 0 54px; } .why-logic-card{ display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:start; min-height:180px; padding:22px 20px; border:1px solid rgba(153,205,239,.15); border-radius:18px; background:rgba(255,255,255,.035); } .why-logic-card--it{ background:rgba(41,104,153,.10); } .why-logic-card--hit{ border-color:rgba(255,226,39,.18); background:linear-gradient(145deg,rgba(255,226,39,.055),rgba(255,255,255,.035)); } .why-logic-icon{ display:grid; place-items:center; width:54px; height:54px; border:1px solid rgba(146,205,242,.18); border-radius:15px; color:#9ad4f6; background:rgba(77,157,210,.07); } .why-logic-card:first-child .why-logic-icon{ color:#ffe227; border-color:rgba(255,226,39,.22); background:rgba(255,226,39,.05); } .why-logic-icon svg{ width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .why-logic-kicker{ display:block; margin:1px 0 5px; color:#76add4; font-size:.66rem; font-weight:800; letter-spacing:.10em; } .why-logic-card:first-child .why-logic-kicker{ color:#d7c83d; } .why-logic-card h3{ margin:0; color:#fff; font-size:1rem; line-height:1.5; } .why-logic-card p{ margin:9px 0 0; color:rgba(218,235,246,.65); font-size:.79rem; line-height:1.72; } .why-logic-arrow{ display:grid; place-items:center; color:#77b9e0; } .why-logic-arrow svg{ width:56px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; } .services-story-section.is-active .why-logic-arrow svg{ animation:logicArrow 1s 1.05s cubic-bezier(.22,1,.36,1) both; } @keyframes logicArrow{ from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:none} } /* ---- Service details ---- */ .service-detail-head{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:end; margin-bottom:24px; } .service-detail-head>span{ align-self:center; padding:8px 10px; border:1px solid rgba(145,205,241,.18); border-radius:8px; color:#8ec4e5; font:700 .63rem/1 Arial,sans-serif; letter-spacing:.10em; } .service-detail-head h3{ margin:0; color:#fff; font-size:1.55rem; line-height:1.4; } .service-detail-head p{ margin:5px 0 0; color:rgba(218,235,246,.60); font-size:.84rem; } .service-detail-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .service-detail-card{ overflow:hidden; border:1px solid rgba(150,205,240,.15); border-radius:22px; background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.022)); transition:transform .34s cubic-bezier(.22,1,.36,1),border-color .3s ease; } .service-detail-card:hover{ transform:translateY(-4px); border-color:rgba(146,211,249,.31); } .service-detail-photo{ position:relative; overflow:hidden; height:250px; margin:0; background:#04172d; } .service-detail-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(3,18,36,.06),rgba(3,18,36,.08) 50%,rgba(3,18,36,.72) 100%); } .service-detail-photo>img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1); } .service-detail-card:hover .service-detail-photo>img{ transform:scale(1.025); } .service-detail-badge{ position:absolute; z-index:4; left:18px; bottom:17px; display:inline-flex; align-items:center; min-height:31px; padding:5px 11px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:rgba(4,22,43,.70); backdrop-filter:blur(8px); font-size:.70rem; font-weight:800; } .service-anim{ position:absolute; z-index:4; right:15px; top:15px; width:145px; height:84px; padding:7px; border:1px solid rgba(176,220,247,.22); border-radius:13px; color:#b9e5fc; background:rgba(4,22,43,.69); backdrop-filter:blur(8px); } .service-anim svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .service-anim .signal{ stroke:#ffe227; } .service-anim .node{ fill:#ffe227; stroke:none; } .service-anim .shield{ stroke:#a7dffb; } .service-anim .check{ stroke:#ffe227; stroke-width:2.1; } .service-detail-body{ padding:24px 24px 25px; } .service-detail-kicker{ display:block; margin-bottom:7px; color:#78b3da; font:700 .66rem/1 Arial,sans-serif; letter-spacing:.12em; } .service-detail-card:first-child .service-detail-kicker{ color:#d5c63a; } .service-detail-body h3{ margin:0; color:#fff; font-size:1.18rem; line-height:1.48; } .service-detail-body>p{ margin:10px 0 0; color:rgba(221,237,247,.68); font-size:.88rem; line-height:1.78; } .service-use{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; padding-top:17px; border-top:1px solid rgba(150,205,240,.12); } .service-use b{ width:100%; margin-bottom:2px; color:#82b8d9; font-size:.67rem; letter-spacing:.08em; } .service-use span{ display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; border:1px solid rgba(150,206,241,.14); border-radius:999px; color:#d0e6f4; background:rgba(3,21,43,.42); font-size:.70rem; font-weight:700; } /* Animated mini-diagrams: one-time draw, each animation matches the category */ .service-anim svg .draw, .service-anim svg .wifi, .service-anim svg .shield, .service-anim svg .check, .service-anim svg .signal{ stroke-dasharray:180; stroke-dashoffset:180; } .services-story-section.is-active .service-anim svg .draw{ animation:serviceDraw .90s 1.15s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .service-anim svg .signal{ animation:serviceDraw .48s 1.72s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .service-anim--infra svg .wifi{ animation:serviceDraw .85s 1.42s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .service-anim--security svg .shield{ animation:serviceDraw .85s 1.28s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .service-anim--security svg .check{ animation:serviceDraw .55s 1.72s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .service-anim .node{ animation:nodeIn .55s 1.92s cubic-bezier(.22,1,.36,1) both; } @keyframes serviceDraw{ to{stroke-dashoffset:0} } @keyframes nodeIn{ from{opacity:0;transform:scale(.2);transform-origin:center} to{opacity:1;transform:scale(1);transform-origin:center} } /* ---- Explicit HIT scope ---- */ .hit-can-do{ display:grid; grid-template-columns:minmax(260px,.95fr) minmax(0,1.35fr); gap:28px; align-items:center; margin-top:28px; padding:28px; border:1px solid rgba(255,226,39,.17); border-radius:20px; background: linear-gradient(120deg,rgba(255,226,39,.055),rgba(255,255,255,.032)); } .hit-can-do__lead>span{ display:block; margin-bottom:7px; color:#d8c93e; font:700 .64rem/1 Arial,sans-serif; letter-spacing:.12em; } .hit-can-do__lead strong{ display:block; color:#fff; font-size:1.10rem; line-height:1.45; } .hit-can-do__lead p{ margin:8px 0 0; color:rgba(218,235,246,.64); font-size:.81rem; line-height:1.72; } .hit-can-do__steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0; padding:0; list-style:none; } .hit-can-do__steps::before{ content:""; position:absolute; left:8%; right:8%; top:19px; height:1px; background:linear-gradient(90deg,#638dac,#7abce3,#ffe227); } .hit-can-do__steps li{ position:relative; z-index:2; display:grid; justify-items:center; text-align:center; } .hit-can-do__steps b{ display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#071b36; background:#ffe227; box-shadow:0 0 0 5px #071b36; font-size:.72rem; } .hit-can-do__steps span{ display:block; margin-top:11px; color:#fff; font-size:.78rem; font-weight:800; line-height:1.4; } .hit-can-do__steps small{ display:block; margin-top:3px; color:rgba(206,230,244,.50); font-size:.61rem; font-weight:500; } @media(max-width:1050px){ .why-photo__side{ width:32%; } .why-logic{ grid-template-columns:1fr; gap:10px; } .why-logic-arrow{ height:24px; transform:rotate(90deg); } .why-logic-card{ min-height:0; } .hit-can-do{ grid-template-columns:1fr; } } @media(max-width:820px){ .service-detail-grid{ grid-template-columns:1fr; } .service-detail-photo{ height:280px; } } @media(max-width:720px){ .why-photo{ min-height:530px; margin-top:32px; border-radius:20px; } .why-photo>img{ height:530px; object-position:center; } .why-photo__shade{ background:linear-gradient(180deg,rgba(3,18,36,.64) 0%,rgba(3,18,36,.14) 35%,rgba(3,18,36,.18) 57%,rgba(3,18,36,.82) 100%); } .why-photo__side{ top:22px; width:calc(50% - 26px); } .why-photo__side--field{left:18px} .why-photo__side--office{right:18px} .why-photo__side strong{ font-size:.92rem; } .why-photo__chips span{ min-height:24px; font-size:.63rem; } .why-photo__center{ bottom:18px; width:calc(100% - 36px); padding:15px 18px; } .why-photo__center b{ font-size:1.05rem; } .data-pill{ min-width:54px; font-size:.52rem; } .why-logic-card{ grid-template-columns:50px 1fr; padding:18px 16px; } .why-logic-icon{ width:46px;height:46px;border-radius:13px; } .why-logic-icon svg{width:32px;height:32px} .service-detail-head{ grid-template-columns:1fr; gap:8px; } .service-detail-head>span{ justify-self:start; } .service-detail-head h3{ font-size:1.30rem; } .service-detail-photo{ height:230px; } .service-anim{ width:118px; height:70px; right:10px; top:10px; } .service-detail-body{ padding:20px 18px 21px; } .hit-can-do{ padding:22px 16px; } .hit-can-do__steps{ grid-template-columns:repeat(2,1fr); gap:18px 8px; } .hit-can-do__steps::before{ display:none; } } @media(prefers-reduced-motion:reduce){ .data-pill{ display:none!important; } .why-logic-arrow svg{ animation:none!important; } .service-anim svg *{ stroke-dashoffset:0!important; animation:none!important; } .service-detail-card, .service-detail-photo>img{ transition:none!important; } } /* ========================================================= REQUESTED CLEANUP — SERVICES / CONTACT ========================================================= */ /* The first explanatory card diagram, service section heading block, upper-right mini diagrams, and bottom one-contact block were removed from the HTML. Keep the remaining photo + service cards breathing cleanly. */ .services-story-section .why-photo{ margin-bottom:42px!important; } .services-story-section .service-detail-grid{ margin-top:0!important; } /* Contact number circles: force true horizontal + vertical centering. Later legacy overrides had changed these elements back to block. */ #contact .flow--contact .flow-row{ align-items:center!important; } #contact .flow--contact .flow-row>b{ display:grid!important; place-items:center!important; align-self:center!important; width:38px!important; min-width:38px!important; height:38px!important; min-height:38px!important; margin:0!important; padding:0!important; border:1px solid rgba(183,205,225,.46)!important; border-radius:50%!important; color:#d7e7f5!important; font-size:.70rem!important; font-weight:700!important; line-height:1!important; letter-spacing:.03em!important; text-align:center!important; } @media(max-width:720px){ #contact .flow--contact .flow-row{ grid-template-columns:48px 1fr!important; } #contact .flow--contact .flow-row>b{ width:36px!important; min-width:36px!important; height:36px!important; min-height:36px!important; } } /* ========================================================= SERVICES OPENING VISUAL — CONSTRUCTION INFORMATION → HIT → IT RESULT Purpose: explain in one glance WHY construction and IT connect. ========================================================= */ .why-story{ margin:48px 0 42px; } .why-story__stage{ position:relative; min-height:650px; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.62fr) minmax(0,1fr); gap:18px; padding:22px 22px 82px; overflow:hidden; border:1px solid rgba(157,210,242,.18); border-radius:30px; background: radial-gradient(circle at 50% 50%,rgba(55,139,198,.16),transparent 25%), linear-gradient(135deg,#05162c,#071b36 50%,#06172e); box-shadow:0 32px 80px rgba(1,10,22,.25); isolation:isolate; } .why-story__stage::before{ content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.22; background: linear-gradient(rgba(130,188,225,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(130,188,225,.06) 1px,transparent 1px); background-size:36px 36px; } .why-story__scene{ position:relative; z-index:2; min-width:0; min-height:520px; overflow:hidden; border-radius:21px; border:1px solid rgba(172,215,242,.14); background:#04172d; } .why-story__scene>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .why-story__scene--field>img{ object-position:48% center; } .why-story__scene--it>img{ object-position:center; } .why-story__scene-shade{ position:absolute; inset:0; background: linear-gradient(180deg,rgba(3,16,32,.72),rgba(3,16,32,.10) 30%,rgba(3,16,32,.12) 58%,rgba(3,16,32,.76) 100%); } .why-story__scene figcaption{ position:absolute; z-index:5; top:24px; left:24px; right:24px; color:#fff; } .why-story__scene--it figcaption{ text-align:right; } .why-story__scene figcaption>span{ display:block; margin-bottom:7px; color:#9fd2f1; font:700 .62rem/1 Arial,sans-serif; letter-spacing:.14em; } .why-story__scene--field figcaption>span{ color:#f2db45; } .why-story__scene figcaption strong{ display:block; font-size:1.03rem; line-height:1.55; text-shadow:0 2px 12px rgba(0,0,0,.35); } /* Source info chips on field side */ .why-story__source{ position:absolute; z-index:5; left:24px; width:150px; min-height:54px; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:9px; padding:7px 10px; border:1px solid rgba(255,255,255,.22); border-radius:13px; color:#fff; background:rgba(4,22,43,.76); backdrop-filter:blur(8px); box-shadow:0 10px 24px rgba(0,0,0,.16); } .why-story__source--photo{top:150px} .why-story__source--drawing{top:238px} .why-story__source--report{top:326px} .why-story__source--attendance{top:414px} .source-icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:#ffe227; background:rgba(255,226,39,.08); } .source-icon svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .why-story__source b{ font-size:.80rem; letter-spacing:.04em; } /* Results on office side */ .why-story__result{ position:absolute; z-index:5; right:24px; width:210px; min-height:64px; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:9px; padding:8px 10px; border:1px solid rgba(166,216,246,.20); border-radius:13px; color:#fff; background:rgba(4,22,43,.78); backdrop-filter:blur(8px); box-shadow:0 10px 24px rgba(0,0,0,.16); } .why-story__result--share{top:143px} .why-story__result--reduce{top:231px} .why-story__result--store{top:319px} .why-story__result--protect{top:407px} .result-icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:#9edcff; background:rgba(88,171,222,.09); } .why-story__result--protect .result-icon{ color:#ffe227; background:rgba(255,226,39,.07); } .result-icon svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .why-story__result b{ display:block; font-size:.76rem; line-height:1.35; } .why-story__result small{ display:block; margin-top:3px; color:rgba(220,237,247,.62); font-size:.60rem; line-height:1.45; } /* Center HIT converter */ .why-story__hub{ position:relative; z-index:6; align-self:center; min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; text-align:center; border:1px solid rgba(139,205,244,.17); border-radius:22px; background: radial-gradient(circle at 50% 28%,rgba(63,153,212,.16),transparent 34%), rgba(3,20,40,.82); backdrop-filter:blur(8px); } .why-story__hub-kicker{ color:#89c2e6; font:700 .62rem/1 Arial,sans-serif; letter-spacing:.13em; } .why-story__hub-core{ position:relative; width:126px; height:126px; display:grid; place-items:center; margin:20px 0 18px; } .why-story__hub-core>b{ position:relative; z-index:5; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:#071b36; background:#ffe227; box-shadow:0 0 0 7px #071b36,0 0 28px rgba(255,226,39,.14); font:900 .95rem/1 Arial,sans-serif; letter-spacing:.06em; } .hub-ring{ position:absolute; inset:0; border:1px solid rgba(126,196,239,.20); border-radius:50%; } .hub-ring--2{ inset:14px; border-color:rgba(255,226,39,.18); border-style:dashed; } .hub-ring--3{ inset:28px; } .hub-node{ position:absolute; z-index:4; width:6px; height:6px; border-radius:50%; background:#9edcff; box-shadow:0 0 8px rgba(158,220,255,.7); } .hub-node--a{left:1px;top:60px} .hub-node--b{right:17px;top:20px} .hub-node--c{right:2px;bottom:31px;background:#ffe227} .why-story__hub h3{ margin:0; color:#fff; font-size:.96rem; line-height:1.65; } .why-story__hub-steps{ width:100%; display:grid; gap:7px; margin:18px 0 0; padding:0; list-style:none; } .why-story__hub-steps li{ display:grid; grid-template-columns:27px 1fr; align-items:center; gap:8px; padding:7px 8px; border:1px solid rgba(149,205,240,.11); border-radius:9px; text-align:left; background:rgba(255,255,255,.025); } .why-story__hub-steps li>b{ display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#071b36; background:#ffe227; font-size:.64rem; } .why-story__hub-steps li>span{ color:#dfeff9; font-size:.67rem; font-weight:700; } /* Connection routes */ .why-story__routes{ position:absolute; z-index:4; inset:22px 22px 82px; width:calc(100% - 44px); height:calc(100% - 104px); overflow:visible; pointer-events:none; } .route{ fill:none; stroke:#78bde9; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.0; } .route--p1,.route--p2,.route--p3,.route--p4{ stroke:#ffe227; stroke-opacity:.58; } .route--r1,.route--r2,.route--r3,.route--r4{ stroke:#8ed0f6; stroke-opacity:.65; } .why-packet{ fill:#fff; stroke:#ffe227; stroke-width:1; filter:drop-shadow(0 0 6px rgba(255,226,39,.7)); opacity:0; } .why-packet--1{offset-path:path("M250 205 C405 205 430 260 600 325 C745 260 795 205 950 205")} .why-packet--2{offset-path:path("M250 300 C420 300 455 310 600 325 C755 310 800 300 950 300")} .why-packet--3{offset-path:path("M250 395 C415 395 455 345 600 325 C745 345 795 395 950 395")} .why-packet--4{offset-path:path("M250 490 C410 490 445 385 600 325 C750 385 795 490 950 490")} /* Clear conclusion */ .why-story__bottom-message{ position:absolute; z-index:7; left:22px; right:22px; bottom:22px; min-height:48px; display:flex; align-items:center; justify-content:center; gap:14px; padding:11px 18px; border:1px solid rgba(255,255,255,.10); border-radius:13px; color:#dceef8; background:rgba(3,20,40,.82); } .why-story__bottom-message>strong{ color:#ffe227; font-size:.88rem; white-space:nowrap; } .why-story__bottom-message>span{ font-size:.78rem; line-height:1.55; } .why-story__bottom-message>span strong{ color:#fff; } /* ---- One-time sequence animation: source -> HIT -> result ---- */ .why-story .source-icon svg *, .why-story .result-icon svg *{ stroke-dasharray:120; stroke-dashoffset:120; } .services-story-section.is-active .why-story .source-icon svg *, .services-story-section.is-active .why-story .result-icon svg *{ animation:whyIconDraw .75s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .why-story__source--photo .source-icon svg *{animation-delay:.18s} .services-story-section.is-active .why-story__source--drawing .source-icon svg *{animation-delay:.30s} .services-story-section.is-active .why-story__source--report .source-icon svg *{animation-delay:.42s} .services-story-section.is-active .why-story__source--attendance .source-icon svg *{animation-delay:.54s} .services-story-section.is-active .why-story__result--share .result-icon svg *{animation-delay:1.72s} .services-story-section.is-active .why-story__result--reduce .result-icon svg *{animation-delay:1.84s} .services-story-section.is-active .why-story__result--store .result-icon svg *{animation-delay:1.96s} .services-story-section.is-active .why-story__result--protect .result-icon svg *{animation-delay:2.08s} @keyframes whyIconDraw{to{stroke-dashoffset:0}} .services-story-section.is-active .route--p1{animation:whyRoute .75s .38s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .route--p2{animation:whyRoute .75s .50s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .route--p3{animation:whyRoute .75s .62s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .route--p4{animation:whyRoute .75s .74s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .route--r1{animation:whyRoute .75s 1.28s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .route--r2{animation:whyRoute .75s 1.40s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .route--r3{animation:whyRoute .75s 1.52s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .route--r4{animation:whyRoute .75s 1.64s cubic-bezier(.22,1,.36,1) forwards} @keyframes whyRoute{ from{stroke-dashoffset:1;opacity:.05} to{stroke-dashoffset:0;opacity:.56} } .services-story-section.is-active .why-story__hub-core{ animation:whyHubIn .95s .74s cubic-bezier(.16,1,.3,1) both; } @keyframes whyHubIn{ 0%{opacity:0;transform:scale(.45) rotate(-16deg)} 65%{opacity:1;transform:scale(1.08) rotate(4deg)} 100%{opacity:1;transform:scale(1)} } .services-story-section.is-active .hub-ring--1{animation:whyRing 1.8s .92s cubic-bezier(.22,1,.36,1) both} .services-story-section.is-active .hub-ring--2{animation:whyRing 1.8s 1.02s cubic-bezier(.22,1,.36,1) both reverse} .services-story-section.is-active .hub-ring--3{animation:whyRing 1.8s 1.10s cubic-bezier(.22,1,.36,1) both} @keyframes whyRing{ 0%{opacity:0;transform:scale(.55) rotate(-90deg)} 55%{opacity:.9} 100%{opacity:.45;transform:scale(1) rotate(120deg)} } .services-story-section.is-active .why-packet--1{animation:whyPacket 1.60s .82s ease-in-out both} .services-story-section.is-active .why-packet--2{animation:whyPacket 1.60s .98s ease-in-out both} .services-story-section.is-active .why-packet--3{animation:whyPacket 1.60s 1.14s ease-in-out both} .services-story-section.is-active .why-packet--4{animation:whyPacket 1.60s 1.30s ease-in-out both} @keyframes whyPacket{ 0%{offset-distance:0%;opacity:0} 8%{opacity:1} 48%{opacity:1;fill:#fff} 52%{fill:#ffe227;transform:scale(1.35)} 88%{opacity:1} 100%{offset-distance:100%;opacity:0;transform:scale(1)} } @media(max-width:1080px){ .why-story__stage{ grid-template-columns:1fr 220px 1fr; gap:12px; padding-inline:16px; } .why-story__source{ left:14px; width:132px; } .why-story__result{ right:14px; width:178px; } .why-story__routes{ inset-left:16px; inset-right:16px; } } @media(max-width:820px){ .why-story__stage{ min-height:0; grid-template-columns:1fr; gap:16px; padding:16px 16px 76px; } .why-story__scene{ min-height:460px; } .why-story__hub{ min-height:0; padding:24px 18px; } .why-story__routes{ display:none; } .why-story__source{ width:145px; } .why-story__result{ width:190px; } .why-story__bottom-message{ left:16px;right:16px;bottom:16px; } } @media(max-width:560px){ .why-story{ margin-top:32px; } .why-story__stage{ padding:12px 12px 104px; border-radius:20px; } .why-story__scene{ min-height:510px; border-radius:16px; } .why-story__scene figcaption{ top:18px;left:16px;right:16px; } .why-story__scene figcaption strong{ font-size:.94rem; } .why-story__source{ left:14px; width:136px; min-height:50px; grid-template-columns:36px 1fr; } .why-story__source--photo{top:142px} .why-story__source--drawing{top:219px} .why-story__source--report{top:296px} .why-story__source--attendance{top:373px} .source-icon,.result-icon{width:33px;height:33px} .source-icon svg,.result-icon svg{width:23px;height:23px} .why-story__result{ right:14px; width:180px; min-height:58px; grid-template-columns:36px 1fr; } .why-story__result--share{top:137px} .why-story__result--reduce{top:214px} .why-story__result--store{top:291px} .why-story__result--protect{top:368px} .why-story__hub-core{ width:110px;height:110px; } .why-story__bottom-message{ display:grid; gap:4px; text-align:center; } .why-story__bottom-message>strong{ white-space:normal; } } @media(prefers-reduced-motion:reduce){ .why-story .source-icon svg *, .why-story .result-icon svg *{ stroke-dashoffset:0!important; animation:none!important; } .route{ stroke-dashoffset:0!important; opacity:.42!important; animation:none!important; } .why-packet{ display:none!important; } .why-story__hub-core, .hub-ring{ animation:none!important; } } /* ========================================================= SERVICES OPENING — INDUSTRY NEED FIRST ========================================================= */ .industry-need{ margin:48px 0 38px; } .industry-need__photo{ position:relative; min-height:530px; overflow:hidden; border:1px solid rgba(157,210,242,.18); border-radius:28px; background:#04172d; box-shadow:0 30px 78px rgba(0,9,20,.23); } .industry-need__photo>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 46%; } .industry-need__photo-shade{ position:absolute; inset:0; background: linear-gradient(90deg,rgba(3,18,36,.88),rgba(3,18,36,.36) 48%,rgba(3,18,36,.48)), linear-gradient(180deg,rgba(3,18,36,.18),rgba(3,18,36,.72) 100%); } .industry-need__intro{ position:absolute; z-index:4; top:40px; left:42px; width:min(690px,62%); color:#fff; } .industry-need__intro>span{ display:block; margin-bottom:10px; color:#ffe227; font:700 .67rem/1 Arial,sans-serif; letter-spacing:.14em; } .industry-need__intro h3{ margin:0; font-size:clamp(1.55rem,2.7vw,2.25rem); line-height:1.42; letter-spacing:-.015em; } .industry-need__intro p{ max-width:650px; margin:15px 0 0; color:rgba(238,247,253,.80); font-size:.88rem; line-height:1.82; } .industry-pressure{ position:absolute; z-index:5; left:42px; right:42px; bottom:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .industry-pressure__item{ min-height:142px; display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto 1fr; column-gap:12px; align-items:center; padding:18px 18px 16px; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(4,22,43,.72); backdrop-filter:blur(9px); } .industry-pressure__icon{ grid-row:1 / span 2; display:grid; place-items:center; width:50px; height:50px; border-radius:14px; color:#9dd9fb; background:rgba(77,157,210,.09); } .industry-pressure__item--people .industry-pressure__icon{ color:#ffe227; background:rgba(255,226,39,.07); } .industry-pressure__icon svg{ width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .industry-pressure__label{ color:#82b9db; font-size:.66rem; font-weight:800; letter-spacing:.09em; } .industry-pressure__item--people .industry-pressure__label{ color:#d7c83b; } .industry-pressure__item strong{ align-self:start; color:#fff; font-size:.90rem; line-height:1.55; } /* Three industry pressures animate upward, then the HIT bridge activates */ .services-story-section.is-active .industry-pressure__item{ animation:industryPressureIn .75s cubic-bezier(.22,1,.36,1) both; } .services-story-section.is-active .industry-pressure__item:nth-child(1){animation-delay:.15s} .services-story-section.is-active .industry-pressure__item:nth-child(2){animation-delay:.30s} .services-story-section.is-active .industry-pressure__item:nth-child(3){animation-delay:.45s} @keyframes industryPressureIn{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} } .services-story-section.is-active .industry-pressure__icon svg *{ stroke-dasharray:120; stroke-dashoffset:120; animation:industryIconDraw .75s .35s cubic-bezier(.22,1,.36,1) forwards; } @keyframes industryIconDraw{to{stroke-dashoffset:0}} .industry-need__answer{ display:grid; grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr); gap:24px; align-items:center; margin-top:18px; padding:28px; border:1px solid rgba(151,205,240,.15); border-radius:20px; background:rgba(255,255,255,.035); } .industry-answer__left, .industry-answer__right{ min-width:0; } .industry-answer__eyebrow{ display:block; margin-bottom:7px; color:#79b5da; font:700 .64rem/1 Arial,sans-serif; letter-spacing:.13em; } .industry-answer__left .industry-answer__eyebrow{ color:#d6c63b; } .industry-answer__left>strong, .industry-answer__right>strong{ display:block; color:#fff; font-size:1.05rem; line-height:1.55; } .industry-answer__left ul, .industry-answer__right ul{ display:grid; gap:7px; margin:16px 0 0; padding:0; list-style:none; } .industry-answer__left li, .industry-answer__right li{ position:relative; padding-left:15px; color:rgba(219,236,247,.66); font-size:.78rem; line-height:1.55; } .industry-answer__left li::before, .industry-answer__right li::before{ content:""; position:absolute; left:0; top:.72em; width:6px; height:1px; background:#78b9df; } .industry-answer__left li::before{background:#ffe227} .industry-answer__bridge{ text-align:center; } .industry-answer__bridge-label{ display:block; margin-bottom:7px; color:#ffe227; font:800 .70rem/1 Arial,sans-serif; letter-spacing:.12em; } .industry-answer__bridge svg{ display:block; width:100%; height:112px; overflow:visible; } .industry-answer__line{ fill:none; stroke:#8ac9ee; stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; } .industry-answer__line--a{stroke:#ffe227} .industry-answer__core{ fill:#071b36; stroke:#ffe227; stroke-width:2; } .industry-answer__cross{ fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; } .industry-answer__packet{ fill:#fff; stroke:#ffe227; stroke-width:1; opacity:0; filter:drop-shadow(0 0 5px rgba(255,226,39,.7)); } .industry-answer__packet--a{offset-path:path("M10 60H120")} .industry-answer__packet--b{offset-path:path("M120 60H230")} .industry-answer__bridge small{ display:block; color:rgba(210,232,245,.58); font-size:.67rem; line-height:1.55; } .services-story-section.is-active .industry-answer__line--a{ animation:industryLine .7s .75s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .industry-answer__line--b{ animation:industryLine .7s 1.35s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .industry-answer__packet--a{ animation:industryPacket .9s .92s ease-in-out both; } .services-story-section.is-active .industry-answer__packet--b{ animation:industryPacket .9s 1.52s ease-in-out both; } @keyframes industryLine{to{stroke-dashoffset:0}} @keyframes industryPacket{ 0%{offset-distance:0%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{offset-distance:100%;opacity:0} } .industry-need__conclusion{ display:flex; align-items:center; justify-content:center; gap:15px; margin-top:16px; padding:15px 18px; border-left:3px solid #ffe227; color:#d9edf8; background:rgba(255,255,255,.03); } .industry-need__conclusion>b{ color:#ffe227; font-size:.88rem; white-space:nowrap; } .industry-need__conclusion>span{ font-size:.80rem; line-height:1.65; } .industry-need__conclusion>span strong{ color:#fff; } .service-products-label{ display:flex; align-items:center; gap:12px; margin:42px 0 20px; } .service-products-label>span{ padding:7px 9px; border:1px solid rgba(150,205,240,.18); border-radius:8px; color:#82b9da; font:700 .63rem/1 Arial,sans-serif; letter-spacing:.10em; } .service-products-label>strong{ color:#fff; font-size:1.25rem; } /* ========================================================= NETIS promotion block ========================================================= */ .netis-push{ display:grid; grid-template-columns:minmax(220px,.62fr) minmax(0,1.7fr); gap:34px; align-items:center; margin-top:42px; padding:32px; border:1px solid rgba(255,226,39,.20); border-radius:22px; background: linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); } .netis-push__mark{ display:grid; justify-items:center; gap:10px; } .netis-push__mark img{ width:min(100%,360px); height:auto; border-radius:18px; box-shadow:0 18px 44px rgba(0,0,0,.16); } .netis-push__mark small{ max-width:320px; color:rgba(209,231,245,.46); font-size:.58rem; line-height:1.5; text-align:center; } .netis-push__eyebrow{ display:block; margin-bottom:8px; color:#d7c63c; font:700 .65rem/1 Arial,sans-serif; letter-spacing:.12em; } .netis-push__content h3{ margin:0; color:#fff; font-size:1.35rem; line-height:1.45; } .netis-push__content>p{ margin:11px 0 0; color:rgba(220,237,247,.68); font-size:.84rem; line-height:1.78; } .netis-push__reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; } .netis-push__reasons article{ min-width:0; display:grid; grid-template-columns:34px 1fr; gap:9px; padding:13px; border:1px solid rgba(151,206,241,.12); border-radius:13px; background:rgba(3,21,43,.38); } .netis-push__reasons b{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#071b36; background:#ffe227; font-size:.64rem; } .netis-push__reasons strong{ display:block; color:#fff; font-size:.77rem; line-height:1.4; } .netis-push__reasons span{ display:block; margin-top:4px; color:rgba(211,232,245,.55); font-size:.65rem; line-height:1.55; } .netis-push__note{ margin-top:17px!important; padding-top:14px; border-top:1px solid rgba(153,205,239,.12); color:rgba(204,227,242,.50)!important; font-size:.67rem!important; } /* NETIS block animates like a "public-works technology card" coming online */ .services-story-section.is-active .netis-push__mark{ animation:netisMarkIn .8s .25s cubic-bezier(.22,1,.36,1) both; } .services-story-section.is-active .netis-push__reasons article{ animation:netisReasonIn .65s cubic-bezier(.22,1,.36,1) both; } .services-story-section.is-active .netis-push__reasons article:nth-child(1){animation-delay:.42s} .services-story-section.is-active .netis-push__reasons article:nth-child(2){animation-delay:.56s} .services-story-section.is-active .netis-push__reasons article:nth-child(3){animation-delay:.70s} @keyframes netisMarkIn{ from{opacity:0;transform:translateX(-18px) scale(.96)} to{opacity:1;transform:none} } @keyframes netisReasonIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } @media(max-width:980px){ .industry-need__intro{ width:calc(100% - 70px); } .industry-pressure{ grid-template-columns:1fr; left:auto; width:min(390px,45%); } .industry-need__answer{ grid-template-columns:1fr; } .industry-answer__bridge{ max-width:340px; width:100%; margin:auto; } .netis-push{ grid-template-columns:1fr; } .netis-push__mark{ justify-items:start; } .netis-push__reasons{ grid-template-columns:1fr; } } @media(max-width:720px){ .industry-need__photo{ min-height:720px; border-radius:20px; } .industry-need__intro{ top:24px;left:20px;right:20px;width:auto; } .industry-need__intro h3{ font-size:1.55rem; } .industry-pressure{ left:20px;right:20px;bottom:20px;width:auto; grid-template-columns:1fr; } .industry-pressure__item{ min-height:104px; } .industry-need__answer{ padding:20px 17px; } .industry-need__conclusion{ display:grid; gap:5px; text-align:left; } .industry-need__conclusion>b{ white-space:normal; } .service-products-label{ align-items:flex-start; flex-direction:column; } .netis-push{ padding:22px 17px; } } @media(prefers-reduced-motion:reduce){ .industry-pressure__item, .industry-pressure__icon svg *, .industry-answer__line, .industry-answer__packet, .netis-push__mark, .netis-push__reasons article{ animation:none!important; } .industry-pressure__icon svg *, .industry-answer__line{ stroke-dashoffset:0!important; } .industry-answer__packet{ display:none!important; } } /* ========================================================= CONSTRUCTION × IT EXPLANATION — DEEPER, PLAIN-LANGUAGE MAP ========================================================= */ .construction-it-explain{ margin:48px 0 40px; } .construction-it-explain__lead{ max-width:930px; margin-bottom:24px; } .construction-it-explain__eyebrow{ display:block; margin-bottom:9px; color:#ffe227; font:700 .66rem/1 Arial,sans-serif; letter-spacing:.14em; } .construction-it-explain__lead h3{ margin:0; color:#fff; font-size:clamp(1.55rem,2.8vw,2.30rem); line-height:1.42; letter-spacing:-.015em; } .construction-it-explain__lead>p{ max-width:900px; margin:15px 0 0; color:rgba(226,239,248,.72); font-size:.90rem; line-height:1.9; } .construction-it-explain__reasons{ display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; } .construction-it-explain__reasons span{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:6px 11px; border:1px solid rgba(150,205,240,.15); border-radius:999px; color:#cce4f3; background:rgba(255,255,255,.035); font-size:.72rem; font-weight:700; } .construction-it-explain__reasons i{ display:block; width:6px; height:6px; border-radius:50%; background:#ffe227; box-shadow:0 0 0 4px rgba(255,226,39,.05); } .construction-it-map{ position:relative; min-height:700px; display:grid; grid-template-columns:minmax(0,1fr) minmax(245px,.62fr) minmax(0,1fr); gap:18px; padding:20px 20px 84px; overflow:hidden; border:1px solid rgba(156,208,241,.18); border-radius:30px; background: radial-gradient(circle at 50% 48%,rgba(55,139,198,.16),transparent 24%), linear-gradient(135deg,#05162c,#071b36 50%,#06172e); box-shadow:0 30px 80px rgba(1,10,22,.22); isolation:isolate; } .construction-it-map::before{ content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.18; background: linear-gradient(rgba(130,188,225,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(130,188,225,.055) 1px,transparent 1px); background-size:36px 36px; } .construction-it-map__side, .construction-it-map__hub{ position:relative; z-index:3; } .construction-it-map__side{ min-width:0; min-height:570px; overflow:hidden; border:1px solid rgba(171,215,242,.14); border-radius:21px; background:#04172d; } .construction-it-map__side>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .construction-it-map__side--field>img{object-position:center} .construction-it-map__side--office>img{object-position:center} .construction-it-map__shade{ position:absolute; inset:0; background: linear-gradient(180deg,rgba(3,16,32,.72),rgba(3,16,32,.10) 28%,rgba(3,16,32,.14) 55%,rgba(3,16,32,.79) 100%), linear-gradient(90deg,rgba(3,16,32,.24),rgba(3,16,32,.02)); } .construction-it-map__side figcaption{ position:absolute; z-index:5; top:23px; left:23px; right:23px; color:#fff; } .construction-it-map__side--office figcaption{text-align:right} .construction-it-map__side figcaption>span{ display:block; margin-bottom:7px; color:#9fd2f1; font:700 .62rem/1 Arial,sans-serif; letter-spacing:.13em; } .construction-it-map__side--field figcaption>span{color:#f1da45} .construction-it-map__side figcaption>strong{ display:block; font-size:1.02rem; line-height:1.45; } .construction-it-map__side figcaption>small{ display:block; margin-top:6px; color:rgba(235,246,252,.68); font-size:.65rem; line-height:1.45; } .construction-it-map__items{ position:absolute; z-index:5; top:142px; bottom:25px; display:grid; align-content:space-between; gap:9px; } .construction-it-map__items--field{left:21px;right:34%} .construction-it-map__items--office{left:31%;right:21px} .construction-it-map__item{ min-height:68px; display:grid; grid-template-columns:43px 1fr; align-items:center; gap:9px; padding:8px 10px; border:1px solid rgba(255,255,255,.18); border-radius:13px; color:#fff; background:rgba(4,22,43,.79); backdrop-filter:blur(8px); box-shadow:0 10px 26px rgba(0,0,0,.15); } .construction-it-map__items--office .construction-it-map__item{ border-color:rgba(153,211,246,.18); } .map-icon{ display:grid; place-items:center; width:39px; height:39px; border-radius:10px; color:#ffe227; background:rgba(255,226,39,.07); } .construction-it-map__items--office .map-icon{ color:#9edcff; background:rgba(88,171,222,.08); } .construction-it-map__items--office .map-item--4 .map-icon{ color:#ffe227; background:rgba(255,226,39,.06); } .map-icon svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .construction-it-map__item b{ display:block; font-size:.78rem; line-height:1.35; } .construction-it-map__item small{ display:block; margin-top:3px; color:rgba(218,236,247,.58); font-size:.59rem; line-height:1.42; } .construction-it-map__hub{ z-index:6; align-self:center; min-height:470px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px 15px; text-align:center; border:1px solid rgba(139,204,244,.17); border-radius:22px; background: radial-gradient(circle at 50% 28%,rgba(63,153,212,.17),transparent 34%), rgba(3,20,40,.84); backdrop-filter:blur(9px); } .construction-it-map__hub-label{ color:#8dc5e7; font:700 .61rem/1 Arial,sans-serif; letter-spacing:.13em; } .construction-it-map__hub-core{ position:relative; width:126px; height:126px; display:grid; place-items:center; margin:20px 0 18px; } .construction-it-map__hub-core>b{ position:relative; z-index:5; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:#071b36; background:#ffe227; box-shadow:0 0 0 7px #071b36,0 0 28px rgba(255,226,39,.13); font:900 .95rem/1 Arial,sans-serif; letter-spacing:.05em; } .map-hub-ring{ position:absolute; inset:0; border:1px solid rgba(130,199,241,.20); border-radius:50%; } .map-hub-ring--b{ inset:15px; border-color:rgba(255,226,39,.18); border-style:dashed; } .map-hub-node{ position:absolute; z-index:4; width:6px; height:6px; border-radius:50%; background:#9edcff; box-shadow:0 0 8px rgba(158,220,255,.7); } .map-hub-node--1{left:0;top:59px} .map-hub-node--2{right:17px;top:20px} .map-hub-node--3{right:3px;bottom:30px;background:#ffe227} .construction-it-map__hub h4{ margin:0; color:#fff; font-size:.96rem; line-height:1.62; } .construction-it-map__hub ol{ width:100%; display:grid; gap:7px; margin:17px 0 0; padding:0; list-style:none; text-align:left; } .construction-it-map__hub li{ display:grid; grid-template-columns:29px 1fr; align-items:center; gap:8px; padding:8px 8px; border:1px solid rgba(149,205,240,.11); border-radius:9px; background:rgba(255,255,255,.025); } .construction-it-map__hub li>b{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#071b36; background:#ffe227; font-size:.63rem; } .construction-it-map__hub li strong{ display:block; color:#e7f4fb; font-size:.68rem; line-height:1.35; } .construction-it-map__hub li small{ display:block; margin-top:2px; color:rgba(207,230,244,.50); font-size:.58rem; line-height:1.4; } .construction-it-map__routes{ position:absolute; z-index:4; inset:20px 20px 84px; width:calc(100% - 40px); height:calc(100% - 104px); overflow:visible; pointer-events:none; } .map-route{ fill:none; stroke:#8ac9ee; stroke-width:1.35; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; } .map-route--in-1,.map-route--in-2,.map-route--in-3,.map-route--in-4{ stroke:#ffe227; } .map-packet{ fill:#fff; stroke:#ffe227; stroke-width:1; filter:drop-shadow(0 0 6px rgba(255,226,39,.7)); opacity:0; } .map-packet--1{offset-path:path("M260 240 C400 240 450 280 600 345 C750 280 800 240 940 240")} .map-packet--2{offset-path:path("M260 335 C410 335 465 335 600 345 C735 335 790 335 940 335")} .map-packet--3{offset-path:path("M260 430 C405 430 465 390 600 345 C735 390 795 430 940 430")} .map-packet--4{offset-path:path("M260 525 C400 525 455 440 600 345 C745 440 800 525 940 525")} .construction-it-map__summary{ position:absolute; z-index:7; left:20px; right:20px; bottom:20px; min-height:48px; display:flex; align-items:center; justify-content:center; gap:14px; padding:11px 18px; border:1px solid rgba(255,255,255,.10); border-radius:13px; color:#dceef8; background:rgba(3,20,40,.84); } .construction-it-map__summary>strong{ color:#ffe227; font-size:.86rem; white-space:nowrap; } .construction-it-map__summary>span{ font-size:.77rem; line-height:1.55; } .construction-it-map__summary b{color:#fff} /* explanatory animation: field information converges into HIT, then flows out */ .construction-it-map .map-icon svg *{ stroke-dasharray:120; stroke-dashoffset:120; } .services-story-section.is-active .construction-it-map .map-icon svg *{ animation:constructionItIconDraw .70s cubic-bezier(.22,1,.36,1) forwards; } .services-story-section.is-active .construction-it-map__items--field .map-item--1 .map-icon svg *{animation-delay:.18s} .services-story-section.is-active .construction-it-map__items--field .map-item--2 .map-icon svg *{animation-delay:.30s} .services-story-section.is-active .construction-it-map__items--field .map-item--3 .map-icon svg *{animation-delay:.42s} .services-story-section.is-active .construction-it-map__items--field .map-item--4 .map-icon svg *{animation-delay:.54s} .services-story-section.is-active .construction-it-map__items--office .map-item--1 .map-icon svg *{animation-delay:1.65s} .services-story-section.is-active .construction-it-map__items--office .map-item--2 .map-icon svg *{animation-delay:1.77s} .services-story-section.is-active .construction-it-map__items--office .map-item--3 .map-icon svg *{animation-delay:1.89s} .services-story-section.is-active .construction-it-map__items--office .map-item--4 .map-icon svg *{animation-delay:2.01s} @keyframes constructionItIconDraw{to{stroke-dashoffset:0}} .services-story-section.is-active .map-route--in-1{animation:constructionItRoute .72s .35s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .map-route--in-2{animation:constructionItRoute .72s .47s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .map-route--in-3{animation:constructionItRoute .72s .59s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .map-route--in-4{animation:constructionItRoute .72s .71s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .map-route--out-1{animation:constructionItRoute .72s 1.28s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .map-route--out-2{animation:constructionItRoute .72s 1.40s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .map-route--out-3{animation:constructionItRoute .72s 1.52s cubic-bezier(.22,1,.36,1) forwards} .services-story-section.is-active .map-route--out-4{animation:constructionItRoute .72s 1.64s cubic-bezier(.22,1,.36,1) forwards} @keyframes constructionItRoute{from{stroke-dashoffset:1;opacity:.05}to{stroke-dashoffset:0;opacity:.52}} .services-story-section.is-active .construction-it-map__hub-core{ animation:constructionItHubIn .95s .72s cubic-bezier(.16,1,.3,1) both; } @keyframes constructionItHubIn{ 0%{opacity:0;transform:scale(.45) rotate(-16deg)} 65%{opacity:1;transform:scale(1.08) rotate(4deg)} 100%{opacity:1;transform:scale(1)} } .services-story-section.is-active .map-hub-ring--a{animation:constructionItRing 1.7s .90s cubic-bezier(.22,1,.36,1) both} .services-story-section.is-active .map-hub-ring--b{animation:constructionItRing 1.7s 1.02s cubic-bezier(.22,1,.36,1) both reverse} @keyframes constructionItRing{0%{opacity:0;transform:scale(.55) rotate(-90deg)}55%{opacity:.9}100%{opacity:.45;transform:scale(1) rotate(120deg)}} .services-story-section.is-active .map-packet--1{animation:constructionItPacket 1.55s .80s ease-in-out both} .services-story-section.is-active .map-packet--2{animation:constructionItPacket 1.55s .96s ease-in-out both} .services-story-section.is-active .map-packet--3{animation:constructionItPacket 1.55s 1.12s ease-in-out both} .services-story-section.is-active .map-packet--4{animation:constructionItPacket 1.55s 1.28s ease-in-out both} @keyframes constructionItPacket{ 0%{offset-distance:0%;opacity:0} 8%{opacity:1} 49%{opacity:1;fill:#fff} 53%{fill:#ffe227;transform:scale(1.35)} 88%{opacity:1} 100%{offset-distance:100%;opacity:0;transform:scale(1)} } /* ========================================================= FAQ — HORIZONTAL Q / A ROWS ========================================================= */ .faq-section--horizontal{ background:#f4f8fb!important; } .faq-horizontal-head{ max-width:780px; margin-bottom:34px; } .faq-horizontal-list{ border-top:1px solid rgba(7,27,54,.17); } .faq-horizontal-row{ position:relative; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr); min-height:118px; border-bottom:1px solid rgba(7,27,54,.14); background:#fff; overflow:hidden; transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease; } .faq-horizontal-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#071b36; transform:scaleY(0); transform-origin:center; transition:transform .32s cubic-bezier(.22,1,.36,1); } .faq-horizontal-row:hover{ z-index:2; border-color:rgba(7,27,54,.22); box-shadow:0 14px 34px rgba(7,27,54,.07); } .faq-horizontal-row:hover::before{transform:scaleY(1)} .faq-horizontal-q, .faq-horizontal-a{ display:grid; grid-template-columns:52px 1fr; align-items:center; gap:16px; padding:24px 28px; } .faq-horizontal-q{ border-right:1px solid rgba(7,27,54,.10); background:#fff; } .faq-horizontal-a{ background:linear-gradient(90deg,rgba(7,27,54,.025),rgba(45,120,181,.045)); } .faq-letter{ display:grid; place-items:center; width:46px; height:46px; border-radius:13px; font:800 1.02rem/1 Arial,sans-serif; letter-spacing:.02em; } .faq-letter--q{ color:#fff; background:#071b36; box-shadow:0 6px 16px rgba(7,27,54,.13); } .faq-letter--a{ color:#071b36; background:#ffe227; box-shadow:0 6px 16px rgba(255,226,39,.18); } .faq-horizontal-q h3{ margin:0; color:#132e49; font-size:.96rem; line-height:1.65; font-weight:800; } .faq-horizontal-a p{ margin:0; color:#526a80; font-size:.90rem; line-height:1.82; } .faq-horizontal-row:hover .faq-letter--a{ animation:faqAnswerPulse .52s cubic-bezier(.22,1,.36,1) both; } @keyframes faqAnswerPulse{ 0%{transform:scale(.88)} 60%{transform:scale(1.08)} 100%{transform:scale(1)} } @media(max-width:1080px){ .construction-it-map{ grid-template-columns:1fr 220px 1fr; gap:12px; padding-inline:16px; } .construction-it-map__items--field{right:25%} .construction-it-map__items--office{left:24%} .construction-it-map__routes{display:none} } @media(max-width:820px){ .construction-it-map{ min-height:0; grid-template-columns:1fr; gap:16px; padding:16px 16px 78px; } .construction-it-map__side{min-height:540px} .construction-it-map__hub{min-height:0;padding:24px 18px} .construction-it-map__items--field{left:18px;right:30%} .construction-it-map__items--office{left:28%;right:18px} .faq-horizontal-row{grid-template-columns:1fr} .faq-horizontal-q{border-right:0;border-bottom:1px solid rgba(7,27,54,.08)} } @media(max-width:560px){ .construction-it-explain{margin-top:34px} .construction-it-explain__lead h3{font-size:1.52rem} .construction-it-map{padding:12px 12px 104px;border-radius:20px} .construction-it-map__side{min-height:565px;border-radius:16px} .construction-it-map__side figcaption{top:17px;left:15px;right:15px} .construction-it-map__items{top:135px;bottom:18px} .construction-it-map__items--field{left:13px;right:25%} .construction-it-map__items--office{left:20%;right:13px} .construction-it-map__item{min-height:64px;grid-template-columns:37px 1fr;padding:7px 8px} .map-icon{width:34px;height:34px}.map-icon svg{width:23px;height:23px} .construction-it-map__item b{font-size:.72rem}.construction-it-map__item small{font-size:.55rem} .construction-it-map__summary{left:12px;right:12px;bottom:12px;display:grid;gap:4px;text-align:center} .construction-it-map__summary>strong{white-space:normal} .faq-horizontal-head{margin-bottom:24px} .faq-horizontal-q,.faq-horizontal-a{grid-template-columns:44px 1fr;gap:12px;padding:18px 15px} .faq-letter{width:40px;height:40px;border-radius:11px;font-size:.92rem} .faq-horizontal-q h3{font-size:.91rem}.faq-horizontal-a p{font-size:.86rem} } @media(prefers-reduced-motion:reduce){ .construction-it-map .map-icon svg *{stroke-dashoffset:0!important;animation:none!important} .map-route{stroke-dashoffset:0!important;opacity:.40!important;animation:none!important} .map-packet{display:none!important} .construction-it-map__hub-core,.map-hub-ring,.faq-horizontal-row:hover .faq-letter--a{animation:none!important} } /* ========================================================= SERVICES — TASK-FIRST / PHOTO-FIRST REDESIGN "common problems" -> "how we help" -> "specific services" ========================================================= */ .construction-needs{margin:48px 0 42px} .construction-needs__hero{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); overflow:hidden; min-height:430px; border:1px solid rgba(153,205,239,.17); border-radius:26px; background:rgba(255,255,255,.035) } .construction-needs__photo{ position:relative;min-height:430px;margin:0;overflow:hidden;background:#04172d } .construction-needs__photo>img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%; transition:transform 1.1s cubic-bezier(.22,1,.36,1) } .services-story-section.is-active .construction-needs__photo>img{transform:scale(1.025)} .construction-needs__photo-shade{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(3,18,36,.05) 30%,rgba(3,18,36,.70) 100%),linear-gradient(90deg,rgba(3,18,36,.08),transparent 50%) } .construction-needs__photo figcaption{position:absolute;z-index:3;left:28px;bottom:26px;color:#fff} .construction-needs__photo figcaption>span{ display:block;margin-bottom:7px;color:#ffe227;font:700 .66rem/1 Arial,sans-serif;letter-spacing:.13em } .construction-needs__photo figcaption>strong{display:block;font-size:1.45rem;line-height:1.42;text-shadow:0 2px 12px rgba(0,0,0,.32)} .construction-needs__copy{ display:flex;flex-direction:column;justify-content:center;padding:40px 42px; background:radial-gradient(circle at 100% 0,rgba(76,155,209,.10),transparent 36%),rgba(4,22,43,.68) } .construction-needs__eyebrow{display:block;margin-bottom:12px;color:#8cc6e9;font-size:.74rem;font-weight:800;letter-spacing:.06em} .construction-needs__copy h3{margin:0;color:#fff;font-size:clamp(1.35rem,2vw,1.78rem);line-height:1.55} .construction-needs__copy p{margin:15px 0 0;color:rgba(224,239,248,.70);font-size:.86rem;line-height:1.86} .construction-needs__copy p:last-child{color:rgba(238,247,253,.88)} .construction-needs__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px} .construction-need-card{ position:relative;min-height:225px;padding:22px 19px 20px;overflow:hidden; border:1px solid rgba(151,205,240,.14);border-radius:17px;background:rgba(255,255,255,.033); transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .28s ease,background-color .28s ease } .construction-need-card:hover{transform:translateY(-4px);border-color:rgba(145,207,246,.27);background:rgba(255,255,255,.052)} .construction-need-card__icon{ display:grid;place-items:center;width:50px;height:50px;margin-bottom:20px; border:1px solid rgba(151,209,243,.18);border-radius:14px;color:#9bd6f7;background:rgba(72,153,208,.07) } .construction-need-card:first-child .construction-need-card__icon{color:#ffe227;border-color:rgba(255,226,39,.22);background:rgba(255,226,39,.055)} .construction-need-card__icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .construction-need-card__no{position:absolute;top:23px;right:18px;color:rgba(142,196,228,.44);font:700 .66rem/1 Arial,sans-serif;letter-spacing:.10em} .construction-need-card strong{display:block;color:#fff;font-size:.94rem;line-height:1.55} .construction-need-card p{margin:9px 0 0;color:rgba(215,234,246,.58);font-size:.74rem;line-height:1.66} .services-story-section.is-active .construction-need-card{animation:constructionNeedIn .72s cubic-bezier(.22,1,.36,1) both} .services-story-section.is-active .construction-need-card:nth-child(1){animation-delay:.12s} .services-story-section.is-active .construction-need-card:nth-child(2){animation-delay:.24s} .services-story-section.is-active .construction-need-card:nth-child(3){animation-delay:.36s} .services-story-section.is-active .construction-need-card:nth-child(4){animation-delay:.48s} @keyframes constructionNeedIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .construction-need-card__icon svg *{stroke-dasharray:110;stroke-dashoffset:110} .services-story-section.is-active .construction-need-card__icon svg *{animation:constructionNeedDraw .68s .30s cubic-bezier(.22,1,.36,1) forwards} @keyframes constructionNeedDraw{to{stroke-dashoffset:0}} .construction-needs__answer{ display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.55fr);gap:28px;align-items:center; margin-top:18px;padding:28px 30px;border:1px solid rgba(255,226,39,.18);border-radius:18px; background:linear-gradient(120deg,rgba(255,226,39,.05),rgba(255,255,255,.025)) } .construction-needs__answer-copy>span{display:block;margin-bottom:8px;color:#d7c63d;font:700 .65rem/1 Arial,sans-serif;letter-spacing:.12em} .construction-needs__answer-copy>strong{display:block;color:#fff;font-size:1.06rem;line-height:1.55} .construction-needs__answer-copy>p{margin:9px 0 0;color:rgba(215,234,246,.62);font-size:.78rem;line-height:1.72} .construction-needs__flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:0;padding:0;list-style:none} .construction-needs__flow::before{ content:"";position:absolute;left:7%;right:7%;top:18px;height:1px; background:linear-gradient(90deg,#6a98b7,#78bce4,#ffe227); transform:scaleX(0);transform-origin:left center } .services-story-section.is-active .construction-needs__flow::before{animation:constructionFlowLine 1s .65s cubic-bezier(.22,1,.36,1) forwards} @keyframes constructionFlowLine{to{transform:scaleX(1)}} .construction-needs__flow li{position:relative;z-index:2;min-width:0;display:grid;justify-items:center;text-align:center} .construction-needs__flow li>b{ display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.20);border-radius:50%; color:#071b36;background:#ffe227;box-shadow:0 0 0 5px #071b36;font-size:.70rem } .construction-needs__flow li>span{display:block;margin-top:11px} .construction-needs__flow strong{display:block;color:#fff;font-size:.75rem;line-height:1.4} .construction-needs__flow small{display:block;margin-top:3px;color:rgba(209,231,245,.48);font-size:.59rem;line-height:1.45} @media(max-width:1020px){ .construction-needs__hero{grid-template-columns:1fr} .construction-needs__photo{min-height:390px} .construction-needs__copy{padding:30px} .construction-needs__cards{grid-template-columns:repeat(2,1fr)} .construction-needs__answer{grid-template-columns:1fr} } @media(max-width:620px){ .construction-needs{margin-top:32px} .construction-needs__hero{border-radius:19px} .construction-needs__photo{min-height:310px} .construction-needs__photo figcaption{left:18px;bottom:18px} .construction-needs__photo figcaption>strong{font-size:1.18rem} .construction-needs__copy{padding:24px 19px} .construction-needs__copy h3{font-size:1.28rem} .construction-needs__cards{grid-template-columns:1fr} .construction-need-card{min-height:0;padding:18px} .construction-needs__answer{padding:22px 17px} .construction-needs__flow{grid-template-columns:repeat(2,1fr);gap:18px 8px} .construction-needs__flow::before{display:none} } @media(prefers-reduced-motion:reduce){ .construction-needs__photo>img,.construction-need-card{transition:none!important;animation:none!important} .construction-need-card__icon svg *{stroke-dashoffset:0!important;animation:none!important} .construction-needs__flow::before{transform:scaleX(1)!important;animation:none!important} } /* ========================================================= SERVICES — REAL WORK SCENES Abstract problem cards were replaced by concrete before/after scenes. ========================================================= */ .construction-needs__answer{display:none!important} .construction-needs__cards{display:none!important} .work-scenes{margin-top:22px} .work-scenes__lead{ display:grid;grid-template-columns:minmax(250px,.65fr) minmax(0,1.35fr); column-gap:38px;align-items:end;padding:34px 4px 26px } .work-scenes__lead>span{ grid-column:1;grid-row:1;color:#ffe227;font-size:.72rem;font-weight:800;letter-spacing:.08em } .work-scenes__lead h3{ grid-column:1;grid-row:2;margin:8px 0 0;color:#fff;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.48 } .work-scenes__lead p{ grid-column:2;grid-row:1/3;align-self:end;margin:0 0 3px;color:rgba(219,236,247,.67);font-size:.86rem;line-height:1.8 } .work-scene-list{display:grid;gap:14px} .work-scene{ display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr); min-height:300px;overflow:hidden;border:1px solid rgba(153,205,239,.15); border-radius:20px;background:rgba(255,255,255,.03) } .work-scene--reverse{grid-template-columns:minmax(0,1.22fr) minmax(260px,.78fr)} .work-scene--reverse .work-scene__visual{grid-column:2;grid-row:1} .work-scene--reverse .work-scene__story{grid-column:1;grid-row:1} .work-scene__visual{ position:relative;min-height:300px;overflow:hidden;background:#0a2746 } .work-scene__visual>img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; filter:saturate(.86) contrast(1.02) } .work-scene__visual::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(3,17,34,.72) 100%) } .work-scene__visual>span{ position:absolute;z-index:3;left:20px;bottom:18px;color:#fff;font-size:.77rem;font-weight:800 } .work-scene__story{ display:flex;flex-direction:column;justify-content:center;padding:30px 34px } .work-scene__tag{ display:block;margin-bottom:9px;color:#77b9df;font:700 .62rem/1 Arial,sans-serif;letter-spacing:.13em } .work-scene__story h4{ margin:0;color:#fff;font-size:1.08rem;line-height:1.55 } .work-scene__story>p{ margin:15px 0 0;color:rgba(218,236,247,.61);font-size:.76rem;line-height:1.72 } .work-scene__compare{display:grid;gap:7px;margin-top:18px} .work-scene__compare>div{ display:flex;align-items:center;gap:7px;min-height:42px;padding:8px 11px; border:1px solid rgba(157,201,229,.12);border-radius:9px;background:rgba(255,255,255,.025) } .work-scene__compare small{ flex:0 0 58px;color:rgba(194,220,236,.48);font-size:.61rem;font-weight:700 } .work-scene__compare strong{color:rgba(230,241,248,.77);font-size:.68rem;white-space:nowrap} .work-scene__compare i{color:rgba(128,184,219,.38);font-style:normal;font-size:.68rem} .work-scene__compare .is-after{ border-color:rgba(255,226,39,.20);background:rgba(255,226,39,.035) } .work-scene__compare .is-after small{color:#d8c83b} .work-scene__compare .is-after strong{color:#fff} .work-scene__compare .is-after i{color:#ffe227} .work-scene__visual--device,.work-scene__visual--support{ display:grid;place-items:center; background: radial-gradient(circle at 30% 20%,rgba(53,137,194,.20),transparent 35%), linear-gradient(145deg,#071b34,#0a2b4c) } .work-scene__device-ui{ position:relative;z-index:2;width:min(72%,220px);padding:19px;border:1px solid rgba(139,204,243,.23); border-radius:14px;background:rgba(3,17,34,.65);box-shadow:0 18px 40px rgba(0,0,0,.20) } .work-scene__device-ui .ui-head{display:block;margin-bottom:15px;color:#fff;font-size:.75rem;font-weight:800} .work-scene__device-ui b{ display:block;height:8px;margin:9px 0;border-radius:4px;background:rgba(143,201,235,.16) } .work-scene__device-ui b:nth-of-type(2){width:78%} .work-scene__device-ui b:nth-of-type(3){width:60%} .work-scene__device-ui em{ display:block;width:62px;margin:17px 0 0 auto;padding:7px 0;border-radius:7px; color:#06182e;background:#ffe227;text-align:center;font-size:.62rem;font-style:normal;font-weight:900 } .work-scene__support-ui{ position:relative;z-index:2;display:flex;align-items:center;gap:7px;padding:18px 20px; border:1px solid rgba(137,200,239,.20);border-radius:14px;background:rgba(3,17,34,.58) } .work-scene__support-ui strong{color:#dcecf6;font-size:.57rem;letter-spacing:.05em} .work-scene__support-ui .support-line{width:22px;height:1px;background:#ffe227} .work-scene__support-ui .support-dot{width:8px;height:8px;border-radius:50%;background:#75c9f5;box-shadow:0 0 15px rgba(117,201,245,.65)} .work-scenes__bridge{ display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 4px;padding:18px; border-top:1px solid rgba(149,201,232,.13);border-bottom:1px solid rgba(149,201,232,.13) } .work-scenes__bridge span{color:rgba(211,231,243,.58);font-size:.76rem} .work-scenes__bridge strong{color:#ffe227;font-size:.82rem} .services-story-section.is-active .work-scene{ animation:workSceneIn .72s cubic-bezier(.22,1,.36,1) both } .services-story-section.is-active .work-scene:nth-child(1){animation-delay:.08s} .services-story-section.is-active .work-scene:nth-child(2){animation-delay:.17s} .services-story-section.is-active .work-scene:nth-child(3){animation-delay:.26s} .services-story-section.is-active .work-scene:nth-child(4){animation-delay:.35s} @keyframes workSceneIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media(max-width:850px){ .work-scenes__lead{grid-template-columns:1fr} .work-scenes__lead>span,.work-scenes__lead h3,.work-scenes__lead p{grid-column:1;grid-row:auto} .work-scenes__lead p{margin-top:13px} .work-scene,.work-scene--reverse{grid-template-columns:1fr} .work-scene--reverse .work-scene__visual,.work-scene--reverse .work-scene__story{grid-column:1;grid-row:auto} .work-scene__visual{min-height:260px} } @media(max-width:560px){ .work-scene__story{padding:24px 18px} .work-scene__compare>div{flex-wrap:wrap} .work-scene__compare small{flex:0 0 100%} .work-scenes__bridge{display:block;text-align:center} .work-scenes__bridge strong{display:block;margin-top:5px} } @media(prefers-reduced-motion:reduce){.work-scene{animation:none!important}} /* SCENE 03 / 04 image tuning */ .work-scene__visual--estimate>img{ object-position:center 48%!important; } .work-scene__visual--handover>img{ object-position:center 42%!important; } /* ========================================================= SERVICES SCAFFOLD — ASPECT-RATIO PRESERVED 取り扱いサービスは縦長のため、SVGを section 全高へ引き伸ばさない。 同じ足場を上・中央・下に配置し、元の1600:1000比率を保つ。 ========================================================= */ #services::after{ background-image: url("../images/scaffold-navy-section.svg"), url("../images/scaffold-navy-section.svg"), url("../images/scaffold-navy-section.svg")!important; background-repeat:no-repeat,no-repeat,no-repeat!important; background-position: center top, center center, center bottom!important; background-size: 100% auto, 100% auto, 100% auto!important; } /* Long section: do not make the side scaffold look like one endlessly tall structure. */ @media(min-width:721px){ #services::after{ opacity:.72!important; } } @media(max-width:720px){ #services::after{ background-image:url("../images/scaffold-navy-section.svg")!important; background-repeat:no-repeat!important; background-position:center top!important; background-size:135% auto!important; opacity:.42!important; } } /* Generated scene photos: natural photo treatment, no artificial zoom/crop emphasis. */ .work-scene__visual>img{ object-fit:cover!important; object-position:center center!important; filter:saturate(.92) contrast(1.015) brightness(.98)!important; } .work-scene__visual--estimate>img{ object-position:center center!important; } .work-scene__visual--handover>img{ object-position:center center!important; } /* ========================================================= FINAL PASS BASE: シーン画像生成反映・足場比率修正版 1) お問い合わせと同じ足場サイズ/表示方式を全体へ統一 2) AI生成サイトに見えやすい装飾を排除 3) 内容・写真・構成は変更しない ========================================================= */ /* --------------------------------------------------------- SCAFFOLD お問い合わせセクションの既存方式: 1枚 / center / 100% 100% を全 .section / .contact に完全統一する。 --------------------------------------------------------- */ .section::after, .contact::after, #services::after, #strengths::after, #other::after, #faq::after{ content:""!important; position:absolute!important; z-index:1!important; inset:0!important; pointer-events:none!important; background-repeat:no-repeat!important; background-position:center!important; background-size:100% 100%!important; clip-path:inset(100% 0 0 0); opacity:0; animation:scaffoldSectionBuild 12.5s cubic-bezier(.45,0,.25,1) infinite!important; animation-play-state:paused!important; } /* Light sections */ .section::after, #strengths::after, #other::after, #faq::after{ background-image:url("../images/scaffold-light-section.svg")!important; } /* Navy sections = same file/rule as contact */ .section.navy::after, .contact::after, #services::after{ background-image:url("../images/scaffold-navy-section.svg")!important; } /* visible only while section is on screen */ .section.perf-visible::after, .contact.perf-visible::after{ animation-play-state:running!important; } /* Explicitly neutralize the previous Services-only three-image treatment */ #services::after{ background-image:url("../images/scaffold-navy-section.svg")!important; background-repeat:no-repeat!important; background-position:center!important; background-size:100% 100%!important; } /* Same opacity behavior as original contact animation */ @keyframes scaffoldSectionBuild{ 0%,7%{clip-path:inset(100% 0 0 0);opacity:0} 15%{opacity:.62} 48%,74%{clip-path:inset(0 0 0 0);opacity:.62} 91%,100%{clip-path:inset(0 0 0 0);opacity:0} } @media(max-width:720px){ .section::after, .contact::after, #services::after, #strengths::after, #other::after, #faq::after{ background-size:132% 100%!important; } } /* --------------------------------------------------------- COLOR / SURFACES No decorative gradients. Flat corporate surfaces only. --------------------------------------------------------- */ .section, .section.alt{ background:#edf4fa!important; } .section.alt{ background:#e6eef5!important; } .section.navy, #services, .contact, #contact{ background:#071b36!important; } .footer{ background:#07172b!important; } /* Remove gradient backgrounds from common content surfaces */ .feature, .work-scene, .service-detail-card, .netis-push, .faq-row, .contact-side, .construction-needs__hero, .construction-needs__copy, .work-scene__visual--device, .work-scene__visual--support, .service-enter, .service-system, .one-stop-card, .one-stop-panel{ background-image:none!important; } /* Avoid glass UI */ .header, .header.scrolled, .service-enter, .why-photo__center, .service-detail-badge, .work-scene__visual>span, .faq-row, .contact-side{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* --------------------------------------------------------- SHADOW / GLOW Keep only real hierarchy shadows; remove synthetic glow. --------------------------------------------------------- */ .feature, .work-scene, .service-detail-card, .netis-push, .faq-row, .contact-side, .construction-needs__hero, .one-stop-card, .one-stop-panel{ box-shadow:none!important; } .circuit-pulse, .beam, .status-dot, .hub-node, .why-packet, .industry-answer__packet{ filter:none!important; box-shadow:none!important; text-shadow:none!important; } /* --------------------------------------------------------- DECORATIVE ICONS / FUTURISTIC UI Hide ornamental SVG/icon boxes where the text/photo already communicates the meaning. Do not affect logos or real photos. --------------------------------------------------------- */ .work-scene__device-ui, .work-scene__support-ui, .service-anim, .service-detail-icon, .why-logic-icon, .construction-need-card__icon, .industry-pressure__icon, .industry-answer__bridge, .circuit, .circuit-pulse, .status-dot, .contact-ready .status-dot{ display:none!important; } /* If an icon was occupying layout space, let text use it */ .construction-need-card, .why-logic-card{ grid-template-columns:1fr!important; } .feature{ box-shadow:none!important; } /* --------------------------------------------------------- BORDERS / RADIUS Human-made corporate site: restrained radius and clear rules. --------------------------------------------------------- */ .feature, .work-scene, .service-detail-card, .faq-row, .contact-side, .netis-push, .construction-needs__hero, .one-stop-card, .one-stop-panel{ border-radius:8px!important; } .service-detail-badge, .service-use span, .service-tags span, .why-photo__chips span, .contact-ready{ border-radius:3px!important; } .btn{ border-radius:6px!important; box-shadow:none!important; } /* --------------------------------------------------------- HOVER No cards floating/zooming. Only color/border feedback. --------------------------------------------------------- */ .feature:hover, .work-scene:hover, .service-detail-card:hover, .faq-row:hover, .netis-push:hover, .one-stop-card:hover{ transform:none!important; box-shadow:none!important; } .work-scene__visual>img, .service-detail-photo>img, .construction-needs__photo>img, .photo img{ transform:none!important; transition:opacity .25s ease!important; } .work-scene:hover .work-scene__visual>img, .service-detail-card:hover .service-detail-photo>img{ transform:none!important; } /* --------------------------------------------------------- FLAT CONTENT PANELS --------------------------------------------------------- */ .work-scene{ background:rgba(255,255,255,.035)!important; border-color:rgba(185,211,228,.16)!important; } .work-scene__compare>div{ background:rgba(255,255,255,.025)!important; border-radius:4px!important; } .work-scene__compare .is-after{ background:rgba(255,226,39,.035)!important; border-color:rgba(255,226,39,.20)!important; } .service-detail-card{ background:rgba(255,255,255,.035)!important; border-color:rgba(175,207,228,.16)!important; } .service-use span{ background:transparent!important; } .netis-push{ background:rgba(255,255,255,.035)!important; border-color:rgba(186,207,221,.18)!important; } .netis-push__reasons article{ background:rgba(255,255,255,.025)!important; border-radius:5px!important; } .faq-row{ background:#fff!important; border-color:rgba(7,27,54,.14)!important; } .contact-side{ background:rgba(255,255,255,.035)!important; } /* --------------------------------------------------------- TYPOGRAPHY Reduce "designed by prompt" feel: less tracking, normal weights. --------------------------------------------------------- */ body{ letter-spacing:.005em!important; } .title{ letter-spacing:-.018em!important; } .eyebrow, .work-scene__tag, .service-detail-kicker, .netis-push__eyebrow, .contact-ready{ letter-spacing:.045em!important; } .work-scene__story h4, .service-detail-body h3, .netis-push__content h3{ font-weight:700!important; } /* --------------------------------------------------------- PHOTOS Natural color. Avoid generated-image "cinematic" treatment. --------------------------------------------------------- */ .photo img, .work-scene__visual>img, .service-detail-photo>img, .construction-needs__photo>img{ filter:saturate(.92) contrast(1.005) brightness(1)!important; } /* --------------------------------------------------------- BUTTONS Keep current approved interaction concept, remove extra effects. --------------------------------------------------------- */ .btn::before, .btn::after{ filter:none!important; box-shadow:none!important; } .btn:hover{ box-shadow:none!important; transform:none!important; } /* --------------------------------------------------------- HEADER Keep dark-console layout; remove excessive animation/glow. --------------------------------------------------------- */ .header-console__signal{ display:none!important; } .header .nav.nav-console a::after{ box-shadow:none!important; } .header .nav.nav-console a.is-current::after{ box-shadow:none!important; animation:none!important; } /* --------------------------------------------------------- Accessibility / performance --------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .section::after, .contact::after{ animation:none!important; clip-path:none!important; opacity:.32!important; } } /* Requested: remove only the "「困りごと」ではなく、実際の仕事で見てみる。" heading. Keep the previous design otherwise unchanged. */ .work-scenes__lead>span + p, .work-scenes__lead>span ~ p{ margin-top:12px; } /* ========================================================= VERIFIED SCAFFOLD LAYER An explicit DOM layer is used instead of ::after so every content section receives the exact same animation reliably. ========================================================= */ /* Disable legacy pseudo scaffold layers accumulated in earlier revisions. */ .section::after, .contact::after, #services::after, #strengths::after, #one-stop::after, #other::after, #faq::after{ content:none!important; display:none!important; animation:none!important; } /* All target sections create the same positioning context. */ #strengths, #services, #one-stop, #other, #faq, #contact{ position:relative!important; overflow:hidden!important; isolation:isolate!important; } /* One physical scaffold size / same animation / same placement everywhere. */ .section-scaffold{ position:absolute; z-index:1; inset:0; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:100% 100%; opacity:0; clip-path:inset(100% 0 0 0); animation:sectionScaffoldVerifiedBuild 12.5s cubic-bezier(.45,0,.25,1) infinite; will-change:clip-path,opacity; } .section-scaffold--light{ background-image:url("../images/scaffold-light-section.svg"); } .section-scaffold--navy{ background-image:url("../images/scaffold-navy-section.svg"); } /* Keep all real content above the scaffold. */ #strengths>.container, #services>.container, #one-stop>.container, #other>.container, #faq>.container, #contact>.container{ position:relative!important; z-index:3!important; } @keyframes sectionScaffoldVerifiedBuild{ 0%,7%{ clip-path:inset(100% 0 0 0); opacity:0; } 15%{ opacity:.62; } 48%,74%{ clip-path:inset(0 0 0 0); opacity:.62; } 91%,100%{ clip-path:inset(0 0 0 0); opacity:0; } } /* Match the existing contact mobile visual density. */ @media(max-width:720px){ .section-scaffold{ background-size:132% 100%; } } /* Do not remove the scaffold for reduced-motion users; simply show the completed frame without movement. */ @media(prefers-reduced-motion:reduce){ .section-scaffold{ animation:none!important; clip-path:inset(0)!important; opacity:.32!important; } } /* ========================================================= CONTACT-SIZE SCAFFOLD FIX Desktop reference measured from current contact section: 1440px viewport / 605px scaffold height. Long sections must not stretch the scaffold vertically. ========================================================= */ @media(min-width:721px){ .section-scaffold{ inset:auto 0!important; top:50%!important; width:100%!important; height:605px!important; transform:translateY(-50%)!important; background-size:100% 100%!important; } } @media(max-width:720px){ .section-scaffold{ inset:auto 0!important; top:50%!important; width:100%!important; height:430px!important; transform:translateY(-50%)!important; background-size:132% 100%!important; } } /* ========================================================= SCAFFOLD — SAME SCALE, FULL SECTION WIDTH 「お問い合わせ」と同じ足場スケールを保ち、 セクションの横幅いっぱいへ連続表示する。 縦方向へセクション全高まで引き伸ばさない。 ========================================================= */ :root{ --scaffold-unit-w:1440px; --scaffold-unit-h:605px; } @media(min-width:721px){ .section-scaffold{ inset:auto 0!important; top:50%!important; width:100%!important; height:var(--scaffold-unit-h)!important; transform:translateY(-50%)!important; /* Keep one scaffold unit at the same physical scale as Contact. On wider screens, repeat horizontally instead of scaling it up. */ background-size:var(--scaffold-unit-w) var(--scaffold-unit-h)!important; background-repeat:repeat-x!important; background-position:center center!important; } } /* On screens narrower than the reference width, scale the whole unit down proportionally so the scaffold still spans edge-to-edge without distortion. */ @media(min-width:721px) and (max-width:1439px){ .section-scaffold{ height:42.0139vw!important; /* 605 / 1440 */ background-size:100vw 42.0139vw!important; background-repeat:repeat-x!important; } } @media(max-width:720px){ .section-scaffold{ inset:auto 0!important; top:50%!important; width:100%!important; height:302px!important; transform:translateY(-50%)!important; background-size:720px 302px!important; background-repeat:repeat-x!important; background-position:center center!important; } } /* ========================================================= FINAL SCAFFOLD: EXACTLY ONE LEFT + ONE RIGHT Reference = Contact screenshot. Same physical scaffold height on every section. Short sections clip it; scaffold itself never shrinks. ========================================================= */ :root{ --scaffold-fixed-h:640px; } @media(min-width:721px){ .section-scaffold{ inset:auto 0!important; top:50%!important; width:100%!important; height:var(--scaffold-fixed-h)!important; transform:translateY(-50%)!important; /* One complete SVG only: left scaffold + right scaffold. */ background-size:100% 100%!important; background-repeat:no-repeat!important; background-position:center center!important; } } @media(max-width:720px){ .section-scaffold{ inset:auto 0!important; top:50%!important; width:100%!important; height:430px!important; transform:translateY(-50%)!important; background-size:100% 100%!important; background-repeat:no-repeat!important; background-position:center center!important; } } /* ========================================================= FINAL SCAFFOLD — FIT EACH SECTION EXACTLY One complete scaffold SVG per section: - exactly one left scaffold + one right scaffold - full section width - full section height - no repeat - same build animation ========================================================= */ .section-scaffold{ position:absolute!important; inset:0!important; top:0!important; left:0!important; right:0!important; bottom:0!important; width:100%!important; height:100%!important; transform:none!important; background-size:100% 100%!important; background-repeat:no-repeat!important; background-position:center center!important; } /* Keep identical behavior on mobile: one pair, exact section fit. */ @media(max-width:720px){ .section-scaffold{ inset:0!important; width:100%!important; height:100%!important; transform:none!important; background-size:100% 100%!important; background-repeat:no-repeat!important; background-position:center center!important; } } /* ========================================================= SCAFFOLD — FIXED UNIT SCALE / VERTICAL CONNECTION The scaffold itself NEVER stretches or shrinks by section. One 400-source-unit module is always rendered at 242px high, matching the Contact reference spacing (~60.5px per bay). Long sections simply receive more identical modules vertically. ========================================================= */ .section-scaffold{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform:none!important; /* Full-width left/right scaffold geometry, fixed vertical scale. */ background-size:100% 242px!important; background-repeat:repeat-y!important; background-position:center top!important; } .section-scaffold--light{ background-image:url("../images/scaffold-unit-light.svg")!important; } .section-scaffold--navy{ background-image:url("../images/scaffold-unit-navy.svg")!important; } /* Same physical bay size on every desktop section. */ @media(max-width:720px){ .section-scaffold{ /* Mobile keeps a constant, smaller module; still identical across sections. */ background-size:100% 190px!important; background-repeat:repeat-y!important; background-position:center top!important; } } /* ========================================================= SERVICES — COMPACT VERSION ========================================================= */ #services{ padding-top:82px!important; padding-bottom:82px!important; } #services .services-story-head{ margin-bottom:24px!important; } #services .construction-needs{ margin:28px 0 30px!important; } #services .construction-needs__hero{ min-height:340px!important; } #services .construction-needs__photo{ min-height:340px!important; } #services .construction-needs__copy{ padding:28px 30px!important; } #services .construction-needs__copy h3{ font-size:1.28rem!important; } #services .construction-needs__copy p{ margin-top:10px!important; font-size:.78rem!important; line-height:1.72!important; } .services-compact-cases{ margin:20px 0 32px; } .services-compact-cases__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:12px; } .services-compact-cases__head>span{ color:#fff; font-size:1rem; font-weight:700; } .services-compact-cases__head>p{ margin:0; color:rgba(219,235,245,.58); font-size:.72rem; } .services-compact-cases__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .services-compact-cases__grid article{ display:grid; grid-template-columns:140px 1fr; min-height:96px; overflow:hidden; border:1px solid rgba(171,206,229,.15); background:rgba(255,255,255,.028); } .services-compact-cases__grid img{ width:100%; height:100%; min-height:96px; object-fit:cover; } .services-compact-cases__grid article>div{ display:flex; flex-direction:column; justify-content:center; padding:12px 14px; } .services-compact-cases__grid b{ color:#fff; font-size:.82rem; } .services-compact-cases__grid p{ margin:5px 0 0; color:rgba(217,234,244,.58); font-size:.66rem; line-height:1.5; } #services .service-products-label{ margin:28px 0 14px!important; } #services .service-detail-grid{ gap:10px!important; } #services .service-detail-photo{ height:175px!important; } #services .service-detail-body{ padding:17px 18px 18px!important; } #services .service-detail-body h3{ font-size:.98rem!important; } #services .service-detail-body>p{ margin-top:6px!important; font-size:.74rem!important; line-height:1.58!important; } #services .service-use{ margin-top:10px!important; padding-top:9px!important; gap:4px!important; } #services .service-use b, #services .service-use span{ font-size:.62rem!important; } #services .netis-push{ margin-top:26px!important; padding:21px!important; } #services .netis-push__content h3{ font-size:1.06rem!important; } #services .netis-push__content>p{ margin-top:7px!important; font-size:.72rem!important; line-height:1.65!important; } #services .netis-push__reasons{ margin-top:12px!important; } #services .netis-push__reasons article{ padding:9px!important; } #services .netis-push__note{ margin-top:10px!important; padding-top:9px!important; } @media(max-width:820px){ .services-compact-cases__head{ display:block; } .services-compact-cases__head>p{ margin-top:5px; } .services-compact-cases__grid{ grid-template-columns:1fr; } } @media(max-width:520px){ .services-compact-cases__grid article{ grid-template-columns:105px 1fr; } } /* ========================================================= SERVICES — CATEGORY / SYSTEM STRUCTURE Inspired by the information architecture of Hokutsu's solution page, rebuilt with original HIT content. ========================================================= */ #services{ padding-top:82px!important; padding-bottom:82px!important; } #services .services-story-head{ margin-bottom:28px!important; } .solution-overview{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); min-height:250px; overflow:hidden; border:1px solid rgba(168,203,225,.16); background:rgba(255,255,255,.025); } .solution-overview__copy{ display:flex; flex-direction:column; justify-content:center; padding:30px 34px; } .solution-overview__copy>span{ color:#9bc3de; font-size:.69rem; font-weight:700; } .solution-overview__copy h3{ margin:7px 0 0; color:#fff; font-size:1.4rem; line-height:1.5; } .solution-overview__copy p{ margin:10px 0 0; color:rgba(218,235,245,.64); font-size:.77rem; line-height:1.7; } .solution-overview__photo{ margin:0; min-height:250px; } .solution-overview__photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.01); } .solution-categories{ margin-top:18px; border-top:1px solid rgba(169,203,225,.18); } .solution-category{ display:grid; grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr); gap:24px; padding:25px 0; border-bottom:1px solid rgba(169,203,225,.18); } .solution-category__head{ display:grid; grid-template-columns:42px 1fr; gap:13px; align-items:start; } .solution-category__num{ color:#d7c747; font-size:.69rem; font-weight:800; padding-top:3px; } .solution-category__head small{ display:block; color:#85b5d4; font-size:.59rem; font-weight:700; letter-spacing:.04em; } .solution-category__head h3{ margin:5px 0 0; color:#fff; font-size:1.03rem; line-height:1.45; } .solution-category__head p{ margin:7px 0 0; color:rgba(213,232,244,.55); font-size:.69rem; line-height:1.6; } .solution-category__systems{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid rgba(172,204,225,.13); background:rgba(172,204,225,.13); } .solution-category__systems article{ min-height:72px; display:flex; flex-direction:column; justify-content:center; padding:12px 14px; background:#0c2745; transition:background-color .18s ease; } .solution-category__systems article:hover{ background:#123150; } .solution-category__systems b{ color:#fff; font-size:.74rem; line-height:1.4; } .solution-category__systems span{ margin-top:4px; color:rgba(213,232,244,.50); font-size:.61rem; line-height:1.45; } #services .netis-push{ margin-top:28px!important; padding:22px!important; } @media(max-width:900px){ .solution-overview{ grid-template-columns:1fr; } .solution-overview__photo{ min-height:220px; } .solution-category{ grid-template-columns:1fr; gap:16px; } } @media(max-width:620px){ .solution-overview__copy{ padding:24px 18px; } .solution-category__systems{ grid-template-columns:1fr; } .solution-category{ padding:22px 0; } } /* ========================================================= SERVICE CATEGORY PHOTOS ========================================================= */ .solution-category{ grid-template-columns:minmax(235px,.62fr) minmax(190px,.48fr) minmax(0,1.25fr)!important; gap:18px!important; align-items:stretch!important; } .solution-category__photo{ margin:0; min-height:150px; overflow:hidden; border:1px solid rgba(171,204,225,.14); } .solution-category__photo img{ display:block; width:100%; height:100%; min-height:150px; object-fit:cover; filter:saturate(.92) contrast(1.01); } .solution-category__systems{ align-self:stretch; } @media(max-width:1050px){ .solution-category{ grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr)!important; } .solution-category__photo{ grid-column:1; min-height:180px; } .solution-category__systems{ grid-column:2; grid-row:1 / span 2; } } @media(max-width:760px){ .solution-category{ grid-template-columns:1fr!important; } .solution-category__head, .solution-category__photo, .solution-category__systems{ grid-column:1!important; grid-row:auto!important; } } /* ========================================================= ONE STOP SOLUTION Structure inspired by Hokutsu's four-stage presentation, rebuilt with original HIT copy and imagery. ========================================================= */ .one-stop-stage{ position:relative; overflow:hidden; background:#eef3f7; padding:86px 0 92px; } .one-stop-solution{ position:relative; z-index:3; } .one-stop-solution__head{ max-width:800px; margin-bottom:34px; } .one-stop-solution__head .eyebrow{ color:#315f88; } .one-stop-solution__head h2{ margin:10px 0 0; color:#071b36; font-size:clamp(2rem,3vw,2.8rem); line-height:1.38; letter-spacing:-.025em; } .one-stop-solution__head p{ margin:16px 0 0; color:#627587; font-size:.88rem; line-height:1.85; } .one-stop-solution__steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid rgba(7,27,54,.18); border-bottom:1px solid rgba(7,27,54,.18); } .one-stop-step{ position:relative; border-right:1px solid rgba(7,27,54,.16); background:rgba(255,255,255,.40); } .one-stop-step:last-child{ border-right:0; } .one-stop-step:not(:last-child)::after{ content:""; position:absolute; z-index:5; top:calc(38% - 10px); right:-9px; width:18px; height:18px; border-top:2px solid #597b99; border-right:2px solid #597b99; transform:rotate(45deg); } .one-stop-step figure{ position:relative; height:170px; margin:0; overflow:hidden; } .one-stop-step figure::after{ content:""; position:absolute; inset:0; background:rgba(7,27,54,.10); } .one-stop-step figure img{ width:100%; height:100%; object-fit:cover; filter:saturate(.90) contrast(1.01); transition:opacity .22s ease; } .one-stop-step:hover figure img{ opacity:.92; } .one-stop-step__body{ min-height:250px; padding:22px 22px 25px; } .one-stop-step__num{ display:block; color:#315f88; font-family:Georgia,"Times New Roman",serif; font-size:1.65rem; line-height:1; } .one-stop-step h3{ margin:11px 0 0; color:#071b36; font-size:1.02rem; line-height:1.45; } .one-stop-step p{ margin:10px 0 0; color:#607487; font-size:.72rem; line-height:1.72; } .one-stop-step ul{ display:flex; flex-wrap:wrap; gap:5px; margin:16px 0 0; padding:0; list-style:none; } .one-stop-step li{ padding:4px 7px; border:1px solid rgba(7,27,54,.15); color:#31546f; background:#fff; font-size:.62rem; font-weight:700; } /* simple progressive appearance */ .one-stop-stage.is-active .one-stop-step{ animation:oneStopStepIn .65s cubic-bezier(.22,1,.36,1) both; } .one-stop-stage.is-active .one-stop-step:nth-child(1){animation-delay:.08s} .one-stop-stage.is-active .one-stop-step:nth-child(2){animation-delay:.18s} .one-stop-stage.is-active .one-stop-step:nth-child(3){animation-delay:.28s} .one-stop-stage.is-active .one-stop-step:nth-child(4){animation-delay:.38s} @keyframes oneStopStepIn{ from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:none} } @media(max-width:980px){ .one-stop-solution__steps{ grid-template-columns:repeat(2,1fr); } .one-stop-step:nth-child(2){ border-right:0; } .one-stop-step:nth-child(-n+2){ border-bottom:1px solid rgba(7,27,54,.16); } .one-stop-step::after{ display:none; } } @media(max-width:580px){ .one-stop-stage{ padding:68px 0 72px; } .one-stop-solution__steps{ grid-template-columns:1fr; } .one-stop-step{ border-right:0; border-bottom:1px solid rgba(7,27,54,.16); } .one-stop-step:last-child{ border-bottom:0; } .one-stop-step figure{ height:190px; } .one-stop-step__body{ min-height:0; } } /* ========================================================= HOKUTSU-LIKE ONE STOP SOLUTION Reference video layout: sticky circular process on the left, large sequential photography and numbered explanations right. ========================================================= */ .hokutsu-one-stop{ position:relative; overflow:visible; padding:96px 0 110px; background:#fff; color:#0a2039; } .hokutsu-one-stop__layout{ display:grid; grid-template-columns:minmax(360px,.82fr) minmax(0,1.38fr); gap:68px; align-items:start; } .hokutsu-one-stop__sticky{ position:sticky; top:110px; align-self:start; min-height:610px; } .hokutsu-one-stop__intro .eyebrow{ display:none; } .hokutsu-one-stop__intro h2{ margin:0; color:#111; font-size:clamp(2.8rem,4.1vw,4.6rem); font-weight:800; line-height:.95; letter-spacing:-.055em; } .hokutsu-one-stop__intro p{ margin:24px 0 0; max-width:410px; color:#33475a; font-size:.82rem; line-height:1.95; } .one-stop-wheel{ position:relative; width:min(390px,100%); aspect-ratio:1; margin:34px auto 0; } .one-stop-wheel__line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .one-stop-wheel__line circle{ fill:none; stroke:#0b6ba8; stroke-width:2.1; } .one-stop-wheel__line path{ fill:none; stroke:#0b6ba8; stroke-width:2.1; stroke-linecap:round; } .one-stop-wheel__line .wheel-arrow{ fill:#fff; stroke:#0b6ba8; } .one-stop-wheel__center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#0968a6; font-size:2rem; font-weight:800; line-height:.86; letter-spacing:-.05em; } .wheel-node{ position:absolute; width:94px; height:94px; display:grid; place-items:center; border-radius:50%; border:1px solid #e2e8ee; background:#f5f7fa; color:#c4d0da; font-size:.93rem; font-weight:700; transition:background-color .35s ease,color .35s ease,transform .35s ease,border-color .35s ease; } .wheel-node.is-active{ border-color:#0b6ba8; background:#0b6ba8; color:#fff; transform:scale(1.06); } .wheel-node--1{left:50%;top:0;transform:translateX(-50%)} .wheel-node--1.is-active{transform:translateX(-50%) scale(1.06)} .wheel-node--2{right:0;top:50%;transform:translateY(-50%)} .wheel-node--2.is-active{transform:translateY(-50%) scale(1.06)} .wheel-node--3{left:50%;bottom:0;transform:translateX(-50%)} .wheel-node--3.is-active{transform:translateX(-50%) scale(1.06)} .wheel-node--4{left:0;top:50%;transform:translateY(-50%)} .wheel-node--4.is-active{transform:translateY(-50%) scale(1.06)} .hokutsu-one-stop__content{ min-width:0; } .hokutsu-step{ margin:0 0 82px; scroll-margin-top:140px; } .hokutsu-step:last-child{ margin-bottom:0; } .hokutsu-step figure{ height:clamp(320px,36vw,520px); margin:0; overflow:hidden; border-radius:0 0 18px 18px; background:#eef2f5; } .hokutsu-step figure img{ display:block; width:100%; height:100%; object-fit:cover; } .hokutsu-step__caption{ display:grid; grid-template-columns:78px 1fr; gap:16px; padding:17px 4px 0; } .hokutsu-step__number{ color:#0767a5; font-size:3.4rem; font-weight:800; line-height:1; letter-spacing:-.06em; } .hokutsu-step h3{ margin:3px 0 0; color:#0b5f98; font-size:1rem; line-height:1.5; } .hokutsu-step p{ margin:6px 0 0; color:#3f586c; font-size:.73rem; line-height:1.75; } .hokutsu-step__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } .hokutsu-step__tags span{ min-width:92px; padding:5px 13px; border-radius:999px; background:#0870b1; color:#fff; text-align:center; font-size:.61rem; font-weight:700; } @media(max-width:960px){ .hokutsu-one-stop__layout{ grid-template-columns:1fr; gap:42px; } .hokutsu-one-stop__sticky{ position:relative; top:auto; min-height:0; } .one-stop-wheel{ width:min(360px,90vw); } .hokutsu-step figure{ height:min(62vw,480px); } } @media(max-width:600px){ .hokutsu-one-stop{ padding:70px 0 78px; } .hokutsu-one-stop__intro h2{ font-size:2.7rem; } .one-stop-wheel{ width:300px; } .wheel-node{ width:76px; height:76px; font-size:.78rem; } .one-stop-wheel__center{ font-size:1.6rem; } .hokutsu-step{ margin-bottom:58px; } .hokutsu-step figure{ height:62vw; min-height:230px; } .hokutsu-step__caption{ grid-template-columns:58px 1fr; } .hokutsu-step__number{ font-size:2.65rem; } } /* ========================================================= ONE STOP FINAL — JS PINNED LEFT PANEL / TRUE CIRCLE ========================================================= */ #one-stop.hokutsu-one-stop{ position:relative!important; overflow:visible!important; overflow-x:visible!important; overflow-y:visible!important; contain:none!important; content-visibility:visible!important; } #one-stop.hokutsu-one-stop>.hokutsu-one-stop__layout{ overflow:visible!important; contain:none!important; content-visibility:visible!important; } .hokutsu-one-stop__layout{ display:grid!important; grid-template-columns:minmax(360px,.82fr) minmax(0,1.38fr)!important; gap:72px!important; align-items:stretch!important; } .hokutsu-one-stop__sticky{ position:relative!important; align-self:stretch!important; min-width:0!important; min-height:100%!important; overflow:visible!important; } .hokutsu-one-stop__sticky-inner{ position:relative; width:100%; z-index:8; } .hokutsu-one-stop__sticky-inner.is-fixed{ position:fixed!important; top:96px!important; margin:0!important; } .hokutsu-one-stop__sticky-inner.is-bottom{ position:absolute!important; left:0!important; right:0!important; bottom:0!important; top:auto!important; } .hokutsu-one-stop__intro h2{ font-size:clamp(2.45rem,3.25vw,3.7rem)!important; line-height:.94!important; } .hokutsu-one-stop__intro p{ margin-top:16px!important; font-size:.75rem!important; line-height:1.75!important; } /* One square coordinate system = every circle stays perfectly round. */ .one-stop-wheel{ --wheel-size:min(360px,26vw); --node-size:84px; position:relative!important; width:var(--wheel-size)!important; height:var(--wheel-size)!important; aspect-ratio:1/1!important; margin:22px auto 0!important; box-sizing:border-box!important; } .one-stop-wheel__ring{ position:absolute!important; inset:15%!important; border:2px solid #0b6ba8!important; border-radius:50%!important; box-sizing:border-box!important; } .one-stop-wheel__ring::after{ content:""; position:absolute; inset:11px; border:1px solid rgba(11,107,168,.12); border-radius:50%; } .one-stop-wheel__center{ position:absolute!important; left:50%!important; top:50%!important; width:40%!important; aspect-ratio:1/1!important; transform:translate(-50%,-50%)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; border:1px solid rgba(11,107,168,.18)!important; border-radius:50%!important; background:#fff!important; color:#0b6ba8!important; box-sizing:border-box!important; } .one-stop-wheel__center span{font-size:.68rem;font-weight:700} .one-stop-wheel__center strong{margin-top:4px;font-size:1.22rem;font-weight:800} .wheel-node{ position:absolute!important; width:var(--node-size)!important; height:var(--node-size)!important; aspect-ratio:1/1!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; padding:0!important; border:1px solid #d8e1e8!important; border-radius:50%!important; background:#f3f6f8!important; color:#879cab!important; box-sizing:border-box!important; font-family:inherit!important; cursor:pointer!important; } .wheel-node small{font-size:.53rem;font-weight:700;opacity:.65} .wheel-node span{font-size:.83rem;font-weight:700} .wheel-node.is-active{background:#0b6ba8!important;border-color:#0b6ba8!important;color:#fff!important} .wheel-node--1{left:50%!important;top:0!important;transform:translateX(-50%)!important} .wheel-node--2{right:0!important;top:50%!important;transform:translateY(-50%)!important} .wheel-node--3{left:50%!important;bottom:0!important;transform:translateX(-50%)!important} .wheel-node--4{left:0!important;top:50%!important;transform:translateY(-50%)!important} .hokutsu-step{margin-bottom:92px!important} .hokutsu-step:last-child{margin-bottom:0!important} @media(max-width:960px){ #one-stop.hokutsu-one-stop{overflow:hidden!important} .hokutsu-one-stop__layout{grid-template-columns:1fr!important;gap:42px!important;align-items:start!important} .hokutsu-one-stop__sticky{min-height:0!important} .hokutsu-one-stop__sticky-inner, .hokutsu-one-stop__sticky-inner.is-fixed, .hokutsu-one-stop__sticky-inner.is-bottom{ position:relative!important; top:auto!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; } .one-stop-wheel{--wheel-size:min(350px,88vw);--node-size:80px} } @media(max-width:520px){ .one-stop-wheel{--wheel-size:min(300px,88vw);--node-size:68px} } /* ========================================================= SERVICES — HORIZONTAL 4-COLUMN LAYOUT PC: 4 columns Tablet: 2 x 2 Mobile: 1 column ========================================================= */ #services .solution-categories--horizontal{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; margin-top:26px!important; border-top:0!important; } #services .solution-categories--horizontal .solution-category{ display:flex!important; flex-direction:column!important; gap:0!important; padding:0!important; min-width:0!important; border:1px solid rgba(169,203,225,.17)!important; background:rgba(255,255,255,.025)!important; overflow:hidden!important; } #services .solution-categories--horizontal .solution-category__head{ display:block!important; padding:20px 20px 17px!important; min-height:150px!important; border-bottom:1px solid rgba(169,203,225,.13)!important; } #services .solution-categories--horizontal .solution-category__num{ display:block!important; margin-bottom:12px!important; padding:0!important; color:#d7c747!important; font-size:.67rem!important; letter-spacing:.08em!important; } #services .solution-categories--horizontal .solution-category__head small{ font-size:.57rem!important; } #services .solution-categories--horizontal .solution-category__head h3{ margin-top:6px!important; font-size:1rem!important; line-height:1.45!important; } #services .solution-categories--horizontal .solution-category__head p{ margin-top:8px!important; font-size:.66rem!important; line-height:1.6!important; } #services .solution-categories--horizontal .solution-category__photo{ width:100%!important; height:165px!important; min-height:165px!important; margin:0!important; border:0!important; border-bottom:1px solid rgba(169,203,225,.13)!important; } #services .solution-categories--horizontal .solution-category__photo img{ width:100%!important; height:100%!important; min-height:0!important; object-fit:cover!important; } #services .solution-categories--horizontal .solution-category__systems{ display:block!important; width:100%!important; border:0!important; background:transparent!important; } #services .solution-categories--horizontal .solution-category__systems article{ min-height:0!important; padding:11px 15px!important; border-bottom:1px solid rgba(169,203,225,.10)!important; background:transparent!important; } #services .solution-categories--horizontal .solution-category__systems article:last-child{ border-bottom:0!important; } #services .solution-categories--horizontal .solution-category__systems article:hover{ background:rgba(255,255,255,.035)!important; } #services .solution-categories--horizontal .solution-category__systems b{ font-size:.69rem!important; } #services .solution-categories--horizontal .solution-category__systems span{ margin-top:3px!important; font-size:.58rem!important; } /* Keep NETIS clearly separated under the 4 columns */ #services .netis-push{ margin-top:34px!important; } @media(max-width:1100px){ #services .solution-categories--horizontal{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media(max-width:620px){ #services .solution-categories--horizontal{ grid-template-columns:1fr!important; } #services .solution-categories--horizontal .solution-category__head{ min-height:0!important; } #services .solution-categories--horizontal .solution-category__photo{ height:210px!important; } } /* Other business now lives as the final content block before footer */ #other{ margin-top:0!important; } /* ========================================================= PROFESSIONAL ENTRANCE MOTION Quiet, editorial, architectural. No glow / no spin / no artificial blur. ========================================================= */ /* Base entrance */ .pro-enter{ opacity:0; transform:translate3d(0,28px,0); clip-path:inset(0 0 14% 0); transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .88s cubic-bezier(.22,1,.36,1), clip-path .88s cubic-bezier(.22,1,.36,1); transition-delay:var(--pro-delay,0ms); will-change:opacity,transform,clip-path; } .pro-enter.pro-in{ opacity:1; transform:translate3d(0,0,0); clip-path:inset(0 0 0 0); } /* Heading: tighter upward reveal */ .pro-heading{ opacity:0; transform:translate3d(0,22px,0); clip-path:inset(0 0 100% 0); transition: opacity .45s ease, transform .9s cubic-bezier(.22,1,.36,1), clip-path .9s cubic-bezier(.22,1,.36,1); transition-delay:var(--pro-delay,0ms); } .pro-heading.pro-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); } /* Supporting copy arrives after the heading */ .pro-copy{ opacity:0; transform:translate3d(0,16px,0); transition: opacity .7s ease, transform .82s cubic-bezier(.22,1,.36,1); transition-delay:var(--pro-delay,120ms); } .pro-copy.pro-in{ opacity:1; transform:none; } /* Photo reveal: a clean architectural shutter, then a subtle settle */ .pro-photo{ position:relative; overflow:hidden!important; clip-path:inset(0 0 100% 0); transition:clip-path 1s cubic-bezier(.76,0,.24,1); transition-delay:var(--pro-delay,0ms); } .pro-photo.pro-in{ clip-path:inset(0 0 0 0); } .pro-photo img{ transform:scale(1.045); transition:transform 1.25s cubic-bezier(.22,1,.36,1); transition-delay:var(--pro-delay,0ms); } .pro-photo.pro-in img{ transform:scale(1); } /* A single thin line travels across selected blocks; intentionally restrained. */ .pro-line{ position:relative; } .pro-line::after{ content:""; position:absolute; z-index:5; left:0; bottom:-1px; width:100%; height:1px; transform:scaleX(0); transform-origin:left center; background:currentColor; opacity:.25; transition:transform .95s cubic-bezier(.22,1,.36,1); transition-delay:var(--pro-delay,0ms); pointer-events:none; } .pro-line.pro-in::after{ transform:scaleX(1); } /* --------------------------------------------------------- SERVICES: the four columns enter as one composed sequence --------------------------------------------------------- */ #services .solution-category{ opacity:0; transform:translate3d(0,34px,0); transition: opacity .62s ease, transform .9s cubic-bezier(.22,1,.36,1), border-color .25s ease, background-color .25s ease; transition-delay:var(--pro-delay,0ms); } #services .solution-category.pro-in{ opacity:1; transform:none; } #services .solution-category__photo{ clip-path:inset(100% 0 0 0); transition:clip-path .9s cubic-bezier(.76,0,.24,1); transition-delay:calc(var(--pro-delay,0ms) + 90ms); } #services .solution-category.pro-in .solution-category__photo{ clip-path:inset(0 0 0 0); } #services .solution-category__photo img{ transform:scale(1.06); transition:transform 1.2s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--pro-delay,0ms) + 80ms); } #services .solution-category.pro-in .solution-category__photo img{ transform:scale(1); } #services .solution-category__systems article{ opacity:0; transform:translateX(-10px); transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1), background-color .18s ease; } #services .solution-category.pro-in .solution-category__systems article{ opacity:1; transform:none; } #services .solution-category.pro-in .solution-category__systems article:nth-child(1){transition-delay:calc(var(--pro-delay,0ms) + 210ms)} #services .solution-category.pro-in .solution-category__systems article:nth-child(2){transition-delay:calc(var(--pro-delay,0ms) + 270ms)} #services .solution-category.pro-in .solution-category__systems article:nth-child(3){transition-delay:calc(var(--pro-delay,0ms) + 330ms)} #services .solution-category.pro-in .solution-category__systems article:nth-child(4){transition-delay:calc(var(--pro-delay,0ms) + 390ms)} /* NETIS follows after the four columns */ #services .netis-push.pro-enter{ transform:translate3d(0,22px,0); } /* --------------------------------------------------------- ONE STOP: right-side photography unfolds while left stays pinned --------------------------------------------------------- */ .hokutsu-step.pro-enter{ opacity:1; transform:none; clip-path:none; } .hokutsu-step.pro-enter figure{ clip-path:inset(0 100% 0 0); transition:clip-path 1.05s cubic-bezier(.76,0,.24,1); transition-delay:var(--pro-delay,0ms); } .hokutsu-step.pro-in figure{ clip-path:inset(0 0 0 0); } .hokutsu-step.pro-enter figure img{ transform:scale(1.05); transition:transform 1.25s cubic-bezier(.22,1,.36,1); } .hokutsu-step.pro-in figure img{ transform:scale(1); } .hokutsu-step.pro-enter .hokutsu-step__caption{ opacity:0; transform:translate3d(24px,0,0); transition: opacity .65s ease, transform .8s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--pro-delay,0ms) + 160ms); } .hokutsu-step.pro-in .hokutsu-step__caption{ opacity:1; transform:none; } /* --------------------------------------------------------- FAQ: row-by-row, not card-pop --------------------------------------------------------- */ .faq-row.pro-enter{ transform:translate3d(22px,0,0); clip-path:inset(0 0 0 8%); } .faq-row.pro-enter.pro-in{ transform:none; clip-path:inset(0); } /* --------------------------------------------------------- OTHER / CONTACT: quieter finish near the bottom --------------------------------------------------------- */ #other .reveal.pro-enter, #contact .reveal.pro-enter{ transform:translate3d(0,20px,0); } /* Do not stack with legacy .reveal transform once professional motion is assigned */ .reveal.pro-enter, .reveal.pro-heading, .reveal.pro-copy, .reveal.pro-photo{ animation:none!important; } /* Reduced motion */ @media(prefers-reduced-motion:reduce){ .pro-enter, .pro-heading, .pro-copy, .pro-photo, #services .solution-category, #services .solution-category__photo, #services .solution-category__systems article, .hokutsu-step.pro-enter figure, .hokutsu-step.pro-enter .hokutsu-step__caption{ opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; } .pro-line::after{ transform:scaleX(1)!important; transition:none!important; } } /* ========================================================= TITLE VISIBILITY FIX + SOFT FADE ENTRANCE Titles must never remain clipped/hidden. ========================================================= */ /* Cancel the previous mask-style heading reveal. */ .pro-heading{ clip-path:none!important; visibility:visible!important; transform:translate3d(0,18px,0)!important; opacity:0!important; transition: opacity .82s ease, transform .95s cubic-bezier(.22,1,.36,1)!important; transition-delay:var(--pro-delay,0ms)!important; will-change:opacity,transform; } .pro-heading.pro-in{ opacity:1!important; transform:translate3d(0,0,0)!important; clip-path:none!important; } /* Legacy reveal rules must not hide section titles anymore. */ .title.pro-heading, .services-story-head h2.pro-heading, #other .title.pro-heading, #faq .title.pro-heading, #contact .title.pro-heading{ display:block!important; visibility:visible!important; } /* Slightly softer title fade for major section titles. */ #strengths .title.pro-heading, #services .services-story-head h2.pro-heading, #other .title.pro-heading, #faq .title.pro-heading, #contact .title.pro-heading{ transition-duration:.95s,1.05s!important; } /* If motion is explicitly disabled, titles stay visible. */ .no-motion .pro-heading{ opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; } @media(prefers-reduced-motion:reduce){ .pro-heading{ opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; } } /* Prevent old reveal class from overriding our final heading state. */ .reveal.pro-heading.show, .reveal.pro-heading.pro-in{ opacity:1!important; transform:none!important; clip-path:none!important; } /* ========================================================= FIX — 取り扱い分野の写真が表示されない問題 ========================================================= */ /* The photo container itself must never collapse or stay hidden. */ #services .solution-overview__photo{ display:block!important; visibility:visible!important; opacity:1!important; min-height:250px!important; overflow:hidden!important; } /* Base state: visible fallback even if JS/reveal fails. */ #services .solution-overview__photo img{ display:block!important; visibility:visible!important; opacity:1!important; width:100%!important; height:100%!important; min-height:250px!important; object-fit:cover!important; } /* Professional motion only when JS is active. */ html.js-motion #services .solution-overview__photo.pro-photo{ clip-path:inset(0 0 100% 0)!important; } html.js-motion #services .solution-overview__photo.pro-photo.pro-in{ clip-path:inset(0 0 0 0)!important; } /* Make sure old reveal/show styles cannot hide the photo. */ #services .solution-overview__photo.reveal, #services .solution-overview__photo.reveal.show, #services .solution-overview__photo.pro-photo.pro-in{ visibility:visible!important; opacity:1!important; } /* Reduced motion: always show immediately. */ @media(prefers-reduced-motion:reduce){ #services .solution-overview__photo.pro-photo{ clip-path:none!important; } } /* ========================================================= FINAL HARD FIX — 取り扱い分野の写真 この写真だけは clip-path / mask を一切使用しない。 ========================================================= */ #services .solution-overview{ visibility:visible!important; } #services .solution-overview__photo, #services .solution-overview__photo.pro-photo, html.js-motion #services .solution-overview__photo.pro-photo, html.js-motion #services .solution-overview__photo.pro-photo.pro-in{ display:block!important; visibility:visible!important; opacity:1!important; clip-path:none!important; -webkit-clip-path:none!important; mask:none!important; -webkit-mask:none!important; transform:none!important; min-height:250px!important; } #services .solution-overview__photo img, #services .solution-overview__photo.pro-photo img, #services .solution-overview__photo.pro-photo.pro-in img{ display:block!important; visibility:visible!important; opacity:1!important; clip-path:none!important; -webkit-clip-path:none!important; mask:none!important; -webkit-mask:none!important; transform:none!important; width:100%!important; height:100%!important; min-height:250px!important; object-fit:cover!important; } /* フェードだけを使う。写真を隠す仕組みは使わない。 */ #services .solution-overview__photo{ animation:solutionPhotoSoftIn .9s ease both!important; } @keyframes solutionPhotoSoftIn{ from{opacity:.35} to{opacity:1} } /* ========================================================= CTS-INSPIRED HERO / HIT ORIGINAL IMPLEMENTATION ========================================================= */ .hero-cts{ position:relative; min-height:clamp(620px,calc(100vh - 88px),820px); overflow:hidden; background:#071b36; } .hero-cts__visual{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-cts__visual img{width:100%;height:100%;object-fit:cover;object-position:center 55%;transform:scale(1.015);animation:heroCtsSettle 7s cubic-bezier(.22,1,.36,1) both} @keyframes heroCtsSettle{from{transform:scale(1.07)}to{transform:scale(1.015)}} .hero-cts__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,18,36,.67) 0%,rgba(4,18,36,.38) 42%,rgba(4,18,36,.10) 66%,rgba(4,18,36,.08) 100%)} .hero-cts__content{position:relative;z-index:3;min-height:inherit;display:flex;align-items:flex-end;padding-bottom:78px} .hero-cts__copy{max-width:720px;color:#fff} .hero-cts__copy h1{margin:14px 0 0;font-size:clamp(2.8rem,5.1vw,5.7rem);line-height:1.08;letter-spacing:-.055em;color:#fff;text-shadow:0 3px 24px rgba(0,0,0,.24)} .hero-cts__copy p{max-width:660px;margin:22px 0 0;color:rgba(255,255,255,.82);font-size:.93rem;line-height:1.9;text-shadow:0 2px 14px rgba(0,0,0,.28)} .hero-cts__copy .hero-kicker{color:#fff} .hero-cts__rail{position:absolute;z-index:4;right:0;top:0;width:clamp(210px,18vw,330px);height:100%;display:grid;grid-template-rows:repeat(4,1fr);clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);background:#071b36;border-left:1px solid rgba(255,255,255,.24)} .hero-cts__rail-item{position:relative;display:block;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.20);color:#fff;text-decoration:none} .hero-cts__rail-item:last-child{border-bottom:0} .hero-cts__rail-item img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.02);transition:transform .65s cubic-bezier(.22,1,.36,1),filter .35s ease} .hero-cts__rail-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,18,36,.68) 100%);transition:background .3s ease} .hero-cts__rail-item span{position:absolute;z-index:2;left:30px;bottom:14px;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-shadow:0 1px 8px rgba(0,0,0,.45)} .hero-cts__rail-item:hover img{transform:scale(1.045);filter:saturate(1) contrast(1.03)} .hero-cts__rail-item:hover::after{background:linear-gradient(180deg,transparent 30%,rgba(4,18,36,.55) 100%)} .hero-cts__scroll{position:absolute;z-index:5;left:34px;bottom:25px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.65);font-size:.52rem;letter-spacing:.16em;writing-mode:vertical-rl} .hero-cts__scroll i{display:block;width:1px;height:42px;background:rgba(255,255,255,.45);position:relative;overflow:hidden} .hero-cts__scroll i::after{content:"";position:absolute;left:0;top:-15px;width:1px;height:15px;background:#fff;animation:heroScrollLine 1.8s ease-in-out infinite} @keyframes heroScrollLine{0%{transform:translateY(0)}100%{transform:translateY(58px)}} /* ========================================================= BUSINESS SHOWCASE ========================================================= */ .business-section{position:relative;overflow:hidden;padding:110px 0 100px;background:#0757ae!important;color:#fff} .business-wrap{position:relative;z-index:3} .business-head{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(350px,1.2fr);gap:50px;align-items:end;margin-bottom:38px} .business-head__en{display:block;font-size:clamp(4.5rem,9vw,9rem);font-weight:700;letter-spacing:-.065em;line-height:.75;color:#fff} .business-head h2{margin:18px 0 0;color:#fff;font-size:1.35rem;letter-spacing:.02em} .business-head p{max-width:640px;margin:0 0 8px;color:rgba(255,255,255,.78);font-size:.84rem;line-height:1.85} .business-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:18px;border:1px solid rgba(255,255,255,.24);background:rgba(0,37,91,.28)} .business-tab{appearance:none;border:0;border-right:1px solid rgba(255,255,255,.20);background:transparent;color:rgba(255,255,255,.66);min-height:72px;padding:11px 16px;text-align:left;cursor:pointer;transition:background .24s ease,color .24s ease} .business-tab:last-child{border-right:0} .business-tab b{display:block;font-size:.57rem;letter-spacing:.12em;font-weight:700;margin-bottom:7px} .business-tab span{display:block;font-size:.75rem;font-weight:700;line-height:1.35} .business-tab:hover,.business-tab.is-active{background:#fff;color:#074d97} .business-stage{position:relative;min-height:510px;background:#fff;box-shadow:0 18px 60px rgba(0,35,85,.18)} .business-panel{display:grid;grid-template-columns:minmax(420px,.92fr) minmax(0,1.08fr);min-height:510px;background:#fff} .business-panel[hidden]{display:none!important} .business-panel.is-switching-in{animation:businessPanelIn .65s cubic-bezier(.22,1,.36,1) both} @keyframes businessPanelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .business-panel__copy{padding:56px 58px;background:#0a3e91;color:#fff;display:flex;flex-direction:column;justify-content:center} .business-panel__label{font-size:.61rem;letter-spacing:.12em;color:#a9d4ff;font-weight:700} .business-panel h3{margin:12px 0 0;font-size:clamp(1.9rem,3vw,3.1rem);line-height:1.18;letter-spacing:-.04em;color:#fff} .business-panel p{margin:22px 0 0;color:rgba(255,255,255,.78);font-size:.82rem;line-height:1.9;max-width:520px} .business-panel__items{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:28px} .business-panel__items span{display:flex;align-items:center;min-height:52px;padding:10px 13px;border:1px solid rgba(255,255,255,.25);font-size:.68rem;color:#fff;background:rgba(255,255,255,.035)} .business-panel__photo{margin:0;min-height:510px;overflow:hidden;background:#e8eef4} .business-panel__photo img{width:100%;height:100%;object-fit:cover;display:block;animation:businessPhotoIn .8s cubic-bezier(.22,1,.36,1) both} @keyframes businessPhotoIn{from{transform:scale(1.035);opacity:.72}to{transform:scale(1);opacity:1}} .business-section .netis-push{margin-top:34px!important;background:rgba(0,42,104,.48)!important;border-color:rgba(255,255,255,.22)!important} /* ========================================================= CONTACT PHOTO BACKGROUND ========================================================= */ #contact{position:relative;isolation:isolate;overflow:hidden;background:#071b36!important} #contact .section-scaffold{z-index:1!important} #contact>.container{position:relative;z-index:3} @media(max-width:1050px){ .hero-cts__rail{width:220px} .hero-cts__content{padding-right:190px} .business-head{grid-template-columns:1fr;gap:22px} .business-panel{grid-template-columns:1fr} .business-panel__photo{min-height:360px;order:-1} .business-panel__copy{padding:40px} .business-stage{min-height:0} } @media(max-width:760px){ .hero-cts{min-height:740px} .hero-cts__rail{top:auto;bottom:0;width:100%;height:160px;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;clip-path:none} .hero-cts__rail-item{border-right:1px solid rgba(255,255,255,.18);border-bottom:0} .hero-cts__rail-item span{left:8px;bottom:8px;font-size:.48rem;letter-spacing:.05em} .hero-cts__content{align-items:flex-start;padding:130px 18px 210px} .hero-cts__copy h1{font-size:2.7rem} .hero-cts__scroll{display:none} .business-section{padding:82px 0 74px} .business-head__en{font-size:4.5rem} .business-tabs{grid-template-columns:repeat(2,1fr)} .business-tab:nth-child(2){border-right:0} .business-tab:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.20)} .business-panel__copy{padding:30px 20px} .business-panel__items{grid-template-columns:1fr} .business-panel__photo{min-height:260px} } /* ========================================================= SECTION 1 — CTS-LIKE FIRST VIEW REPRODUCTION Layout reference: - huge main image - 4-image vertical rail on the right - diagonal boundary - large English copy bottom-left - two blue shortcut tiles bottom-right ========================================================= */ .hero-cts-exact{ position:relative!important; height:calc(100vh - 88px)!important; min-height:640px!important; max-height:900px!important; overflow:hidden!important; background:#eaf3fb!important; isolation:isolate!important; } .hero-cts-exact__main{ position:absolute; inset:0 19.5% 0 0; z-index:1; overflow:hidden; clip-path:polygon(0 0, 100% 0, 92.5% 100%, 0 100%); } .hero-cts-exact__main-img{ width:100%; height:100%; object-fit:cover; object-position:center 46%; display:block; transform:scale(1.012); animation:ctsHeroSettle 1.45s cubic-bezier(.22,1,.36,1) both; } .hero-cts-exact__blue{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(35,132,207,.08) 0%, rgba(0,92,184,.16) 48%, rgba(0,71,162,.52) 100%), linear-gradient(90deg, rgba(5,71,139,.08), rgba(32,140,220,.12)); pointer-events:none; } .hero-cts-exact__copy{ position:absolute; z-index:3; left:clamp(34px,4.4vw,82px); bottom:clamp(38px,6vh,76px); color:#fff; text-shadow:0 2px 12px rgba(2,41,81,.22); } .hero-cts-exact__copy h1{ margin:0; font-family:Arial,"Helvetica Neue",sans-serif; font-size:clamp(3rem,5.2vw,6.2rem); font-weight:400; line-height:.94; letter-spacing:-.045em; } .hero-cts-exact__copy p{ margin:18px 0 0; font-size:clamp(.78rem,1vw,1rem); font-weight:700; letter-spacing:.025em; } /* Right photographic rail */ .hero-cts-exact__rail{ position:absolute; z-index:4; top:0; right:0; width:27.5%; height:100%; display:grid; grid-template-rows:repeat(4,1fr); overflow:hidden; clip-path:polygon(13.5% 0,100% 0,100% 100%,0 100%); background:#fff; } .hero-cts-exact__rail-item{ position:relative; display:block; min-height:0; overflow:hidden; border-bottom:5px solid rgba(255,255,255,.88); } .hero-cts-exact__rail-item:last-child{ border-bottom:0; } .hero-cts-exact__rail-item img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition:transform .65s cubic-bezier(.22,1,.36,1),filter .4s ease; } .hero-cts-exact__rail-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,100,194,.06),rgba(0,70,145,.02)); transition:background .35s ease; } .hero-cts-exact__rail-item:hover img{ transform:scale(1.045); } .hero-cts-exact__rail-item:hover::after{ background:rgba(0,91,180,.10); } /* CTS-like bottom right shortcut tiles */ .hero-cts-exact__quick{ position:absolute; z-index:8; right:0; bottom:0; display:grid; grid-template-columns:repeat(2,152px); min-height:72px; } .hero-cts-exact__quick-link{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px; background:#086bbd; color:#fff!important; text-decoration:none; font-size:.69rem; font-weight:700; line-height:1.45; border-left:1px solid rgba(255,255,255,.22); transition:background-color .22s ease; } .hero-cts-exact__quick-link:first-child{ background:#0d5fa7; } .hero-cts-exact__quick-link:hover{ background:#064d8c; } .hero-cts-exact__quick-icon{ width:28px; height:28px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.72); border-radius:50%; font-size:.8rem; font-weight:400; } @keyframes ctsHeroSettle{ from{transform:scale(1.055);opacity:.5} to{transform:scale(1.012);opacity:1} } /* Header sits above the hero like the reference. */ .header{ z-index:50!important; } /* Responsive */ @media(max-width:1050px){ .hero-cts-exact{ min-height:650px!important; } .hero-cts-exact__main{ inset-right:22%; } .hero-cts-exact__rail{ width:31%; } .hero-cts-exact__quick{ grid-template-columns:repeat(2,132px); } } @media(max-width:760px){ .hero-cts-exact{ height:auto!important; min-height:720px!important; max-height:none!important; } .hero-cts-exact__main{ inset:0 0 180px 0; clip-path:none; } .hero-cts-exact__rail{ top:auto; bottom:0; width:100%; height:180px; grid-template-columns:repeat(4,1fr); grid-template-rows:1fr; clip-path:none; } .hero-cts-exact__rail-item{ border-right:3px solid rgba(255,255,255,.9); border-bottom:0; } .hero-cts-exact__copy{ left:22px; bottom:215px; } .hero-cts-exact__copy h1{ font-size:3rem; } .hero-cts-exact__quick{ right:0; bottom:180px; grid-template-columns:repeat(2,122px); min-height:58px; } .hero-cts-exact__quick-link{ padding:9px 10px; font-size:.58rem; } .hero-cts-exact__quick-icon{ width:23px; height:23px; } } /* ========================================================= CONTACT — make background photograph even subtler ========================================================= */ /* ========================================================= CTS FV — 8 PHOTO DOWNWARD INFINITE ROLL ========================================================= */ /* Old fixed grid rail is overridden by one continuously moving track. */ .hero-cts-exact__rail.hero-media-roll{ display:block!important; overflow:hidden!important; background:#fff!important; } /* 16 items total (8 + exact duplicate). First 8 occupy 200% of rail height; duplicate follows. We translate from -50% to 0 so the photographs visibly move DOWN. */ .hero-media-roll__track{ position:absolute; left:0; top:0; width:100%; height:400%; display:grid; grid-template-rows:repeat(16, 1fr); will-change:transform; animation:ctsRailDown 34s linear infinite; transform:translate3d(0,-50%,0); } .hero-media-roll__item{ position:relative; display:block; min-height:0; overflow:hidden; border-bottom:4px solid rgba(255,255,255,.92); background:#dbe5ed; } .hero-media-roll__item img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; transform:scale(1.015); transition:transform .6s cubic-bezier(.22,1,.36,1); } .hero-media-roll__item::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(7,74,136,.06),rgba(7,74,136,0)); } .hero-media-roll__item:hover img{ transform:scale(1.055); } /* Pause while the visitor is intentionally interacting with the rail. */ .hero-media-roll:hover .hero-media-roll__track{ animation-play-state:paused; } @keyframes ctsRailDown{ from{transform:translate3d(0,-50%,0)} to{transform:translate3d(0,0,0)} } /* Right-bottom shortcut buttons removed completely. */ .hero-cts-exact__quick{ display:none!important; } @media(max-width:760px){ /* Mobile: preserve the same infinite concept horizontally so image strips remain usable without creating a very tall FV. */ .hero-cts-exact__rail.hero-media-roll{ display:block!important; } .hero-media-roll__track{ width:400%; height:100%; display:grid; grid-template-columns:repeat(16,1fr); grid-template-rows:1fr; animation:ctsRailMobile 34s linear infinite; transform:translate3d(-50%,0,0); } .hero-media-roll__item{ border-right:3px solid rgba(255,255,255,.92); border-bottom:0; } @keyframes ctsRailMobile{ from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} } } @media(prefers-reduced-motion:reduce){ .hero-media-roll__track{ animation:none!important; transform:translate3d(0,-25%,0)!important; } } /* ========================================================= FIRST VIEW — REFERENCE IMAGE STYLE REBUILD Content is preserved; visual treatment follows the supplied image: full-photo hero / deep blue lower overlay / diagonal right rail frame. ========================================================= */ .hero-cts-exact{ position:relative!important; height:calc(100vh - 88px)!important; min-height:700px!important; max-height:980px!important; overflow:hidden!important; background:#0b63b5!important; isolation:isolate!important; } /* Main image dominates almost the entire first view. */ .hero-cts-exact__main{ position:absolute!important; inset:0!important; z-index:1!important; overflow:hidden!important; clip-path:none!important; } .hero-cts-exact__main-img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 44%!important; display:block!important; filter:saturate(.92) contrast(1.02) brightness(1.03)!important; transform:scale(1.015)!important; } /* Reference-like deep blue gradient concentrated at the bottom. */ .hero-cts-exact__blue{ position:absolute!important; inset:0!important; background: linear-gradient(180deg, rgba(27,126,220,.04) 0%, rgba(17,115,209,.05) 28%, rgba(8,102,199,.16) 53%, rgba(0,86,184,.58) 78%, rgba(0,76,171,.94) 100%)!important; pointer-events:none!important; } /* Large white copy bottom-left, matching the supplied visual balance. */ .hero-cts-exact__copy{ position:absolute!important; z-index:6!important; left:clamp(42px,4.2vw,82px)!important; bottom:clamp(48px,7vh,90px)!important; color:#fff!important; text-shadow:none!important; max-width:690px!important; } .hero-cts-exact__copy h1{ margin:0!important; color:#fff!important; font-family:Arial,"Helvetica Neue",sans-serif!important; font-size:clamp(3.6rem,5.9vw,6.8rem)!important; font-weight:300!important; line-height:.96!important; letter-spacing:.005em!important; } .hero-cts-exact__copy p{ margin:24px 0 0!important; color:#fff!important; font-size:clamp(.95rem,1.25vw,1.25rem)!important; font-weight:700!important; line-height:1.5!important; letter-spacing:.02em!important; } /* Angled blue frame behind the rolling photo strip. */ .hero-cts-exact__rail-frame{ position:absolute; z-index:3; top:-2%; right:5.8%; width:26.2%; height:108%; background: linear-gradient(180deg, rgba(137,191,242,.72), rgba(50,145,229,.52) 55%, rgba(0,95,200,.84)); clip-path:polygon(13% 0,100% 0,88% 100%,0 100%); box-shadow:0 0 0 1px rgba(255,255,255,.18) inset; pointer-events:none; } /* The moving photo strip itself is narrower and sits within the angled blue frame. */ .hero-cts-exact__rail.hero-media-roll{ position:absolute!important; z-index:5!important; top:-2%!important; right:8.7%!important; width:20.2%!important; height:108%!important; clip-path:polygon(10% 0,100% 0,87% 100%,0 100%)!important; overflow:hidden!important; background:transparent!important; } /* White separators between rolling images, like the supplied reference. */ .hero-media-roll__item{ border-bottom:8px solid rgba(255,255,255,.96)!important; } .hero-media-roll__item img{ filter:saturate(.96) contrast(1.02) brightness(1.03)!important; } /* Blue structural strip on the extreme right. */ .hero-cts-exact::after{ content:""; position:absolute; z-index:4; top:0; right:0; width:9%; height:100%; background: linear-gradient(180deg, rgba(120,185,242,.16), rgba(36,132,220,.42) 45%, rgba(0,86,184,.88) 100%); clip-path:polygon(32% 0,100% 0,100% 100%,0 100%); pointer-events:none; } /* Soft top-left white wash to keep the photo airy like the reference. */ .hero-cts-exact::before{ content:""; position:absolute; z-index:2; inset:0; background: linear-gradient(180deg,rgba(255,255,255,.22),transparent 33%), linear-gradient(90deg,rgba(255,255,255,.05),transparent 38%); pointer-events:none; } /* Do not show the old quick buttons. */ .hero-cts-exact__quick{ display:none!important; } /* Keep the endless rail interaction understated. */ .hero-media-roll:hover .hero-media-roll__track{ animation-play-state:running!important; } /* On large ultrawide screens, preserve the reference proportions. */ @media(min-width:1700px){ .hero-cts-exact__rail-frame{ right:6.4%; width:24.5%; } .hero-cts-exact__rail.hero-media-roll{ right:9.2%!important; width:18.8%!important; } } /* Tablet */ @media(max-width:1050px){ .hero-cts-exact{ min-height:680px!important; } .hero-cts-exact__rail-frame{ right:4%; width:30%; } .hero-cts-exact__rail.hero-media-roll{ right:7.3%!important; width:23%!important; } .hero-cts-exact::after{ width:10.5%; } .hero-cts-exact__copy{ max-width:560px!important; } } /* Mobile: keep a strong photo-led FV, move the rolling rail to the bottom. */ @media(max-width:760px){ .hero-cts-exact{ height:auto!important; min-height:760px!important; max-height:none!important; } .hero-cts-exact__main{ inset:0 0 170px 0!important; } .hero-cts-exact__main-img{ object-position:center!important; } .hero-cts-exact__copy{ left:22px!important; right:22px!important; bottom:205px!important; } .hero-cts-exact__copy h1{ font-size:3.15rem!important; } .hero-cts-exact__copy p{ margin-top:14px!important; font-size:.82rem!important; } .hero-cts-exact__rail-frame{ display:none!important; } .hero-cts-exact::after{ display:none!important; } .hero-cts-exact__rail.hero-media-roll{ left:0!important; right:0!important; top:auto!important; bottom:0!important; width:100%!important; height:170px!important; clip-path:none!important; } .hero-media-roll__item{ border-bottom:0!important; border-right:4px solid rgba(255,255,255,.96)!important; } } /* ========================================================= FV SLANT ANGLE — EXACTLY UNIFIED Use the SAME absolute slant distance (px), not percentages. This keeps the rail and the blue frame perfectly parallel. ========================================================= */ .hero-cts-exact{ --fv-slant:72px; } /* Outer blue translucent band */ .hero-cts-exact__rail-frame{ clip-path:polygon( var(--fv-slant) 0, 100% 0, calc(100% - var(--fv-slant)) 100%, 0 100% )!important; } /* Inner rolling image strip — identical angle */ .hero-cts-exact__rail.hero-media-roll{ clip-path:polygon( var(--fv-slant) 0, 100% 0, calc(100% - var(--fv-slant)) 100%, 0 100% )!important; } /* Far-right blue structural band uses the same slant logic */ .hero-cts-exact::after{ clip-path:polygon( var(--fv-slant) 0, 100% 0, 100% 100%, 0 100% )!important; } /* Keep frame and photo rail vertically identical so the angle cannot drift at the top/bottom edges. */ .hero-cts-exact__rail-frame, .hero-cts-exact__rail.hero-media-roll{ top:-2%!important; height:108%!important; } /* Fine-tune the horizontal inset only; the angle itself stays identical. */ .hero-cts-exact__rail-frame{ right:5.8%!important; width:26.2%!important; } .hero-cts-exact__rail.hero-media-roll{ right:8.7%!important; width:20.2%!important; } /* Large screens: keep the same 72px slope, only move/size the objects. */ @media(min-width:1700px){ .hero-cts-exact{ --fv-slant:78px; } } /* Tablet: same absolute angle system, scaled slightly down. */ @media(max-width:1050px) and (min-width:761px){ .hero-cts-exact{ --fv-slant:58px; } } /* Mobile has no angled rail. */ @media(max-width:760px){ .hero-cts-exact{ --fv-slant:0px; } } /* ========================================================= HEADER — WHITE ONLY TO THE LEFT OF COMPANY LOGO Navigation area remains navy. ========================================================= */ .header, .header-console, .header-console__frame{ position:relative!important; } /* White strip only from viewport left edge to the beginning of the logo block. The logo block itself already has a white background. */ .header::before{ content:""; position:absolute; z-index:0; top:0; bottom:0; left:0; width:max(0px, calc((100vw - min(100vw, 1560px)) / 2 + 0px)); background:#fff; pointer-events:none; } /* Ensure the logo-side region stays above the white strip, while the navigation retains its existing navy styling. */ .header .brand, .header .brand-console, .header-console__logo, .header-console .brand{ position:relative!important; z-index:2!important; } .header nav, .header .nav, .header-console__nav, .header-console__menu{ position:relative!important; z-index:2!important; } /* Fallback for common desktop layouts where the logo does not begin exactly at the centered container edge: extend white to the actual logo block edge. */ @media(min-width:1100px){ .header::before{ width:calc(max(0px, (100vw - 1560px) / 2) + 178px); } } /* Tablet/mobile: do not create an oversized white strip. */ @media(max-width:1099px){ .header::before{ width:0!important; } } /* ========================================================= HEADER LEFT WHITE — EXACT FIX Goal: viewport left -> company logo block = WHITE navigation area to the right = existing NAVY ========================================================= */ /* Header base stays navy. */ .header{ background:#061d36!important; } /* The logo-side block itself is white, and we extend that same white all the way to the viewport's left edge. */ .header .brand, .header .brand-console, .header-console__logo, .header-console .brand{ position:relative!important; background:#fff!important; z-index:3!important; } /* White extension from logo block to viewport left. The pseudo element is attached to the logo block itself so its endpoint always matches the TRUE logo left edge, not a guessed px value. */ .header .brand::before, .header .brand-console::before, .header-console__logo::before, .header-console .brand::before{ content:""; position:absolute; top:0; bottom:0; right:100%; width:100vw; background:#fff; pointer-events:none; z-index:-1; } /* Cancel the older guessed header-wide strip. */ .header::before{ display:none!important; } /* Navigation stays navy exactly as before. */ .header nav, .header .nav, .header-console__nav, .header-console__menu{ background:#061d36!important; position:relative!important; z-index:4!important; } /* ========================================================= FINAL REFERENCE REBUILD Header + First View only. ========================================================= */ :root{ --hit-header-h:88px; --hit-navy:#061d36; --hit-yellow:#ffe323; --hit-blue:#0b68c7; } /* --------------------------- HEADER --------------------------- */ .header-reference{ position:relative!important; z-index:100!important; display:grid!important; grid-template-columns:minmax(430px, 31.5vw) 1fr!important; width:100%!important; height:var(--hit-header-h)!important; min-height:var(--hit-header-h)!important; background:var(--hit-navy)!important; border:0!important; box-shadow:none!important; overflow:visible!important; } /* WHITE FROM ABSOLUTE LEFT EDGE THROUGH LOGO AREA */ .header-reference__brand-zone{ position:relative!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; width:100%!important; height:100%!important; background:#fff!important; overflow:hidden!important; z-index:2!important; } .header-reference__brand-zone::before, .header-reference__brand-zone::after{ display:none!important; content:none!important; } .header-reference .brand-console{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:min(100%, 500px)!important; height:100%!important; padding:0 28px!important; margin:0!important; background:#fff!important; clip-path:none!important; border:0!important; box-shadow:none!important; transform:none!important; } .header-reference .brand-console::before, .header-reference .brand-console::after{ display:none!important; content:none!important; } .header-reference .brand-console__logo{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:100%!important; } .header-reference .brand-console__logo img{ display:block!important; width:auto!important; max-width:100%!important; height:62px!important; max-height:72%!important; object-fit:contain!important; filter:none!important; transform:none!important; } /* NAVY NAVIGATION ONLY ON RIGHT */ .header-reference__nav{ position:relative!important; z-index:3!important; display:grid!important; grid-template-columns:1fr 1fr 1.16fr 1fr 1.08fr!important; align-items:stretch!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; background:var(--hit-navy)!important; overflow:visible!important; } .header-reference__nav > a{ position:relative!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; min-width:0!important; height:100%!important; padding:0 22px!important; color:#fff!important; background:transparent!important; border-left:1px solid rgba(255,255,255,.08)!important; border-radius:0!important; font-size:clamp(.74rem,.78vw,.93rem)!important; font-weight:700!important; line-height:1.2!important; text-decoration:none!important; white-space:nowrap!important; } .header-reference__nav > a::before{ content:""!important; position:absolute!important; left:22px!important; bottom:14px!important; width:28px!important; height:2px!important; background:#2d5e86!important; opacity:.9!important; transition:width .28s ease, background-color .28s ease!important; } .header-reference__nav > a::after{ display:none!important; } .header-reference__nav > a:hover::before, .header-reference__nav > a.active::before{ width:42px!important; background:#5cb6e7!important; } .header-reference__nav > a.active{ box-shadow:inset 0 -3px 0 #f0d826!important; } .header-reference__nav .nav-console__contact{ align-self:center!important; justify-self:center!important; width:calc(100% - 28px)!important; height:68px!important; margin:0 14px!important; padding:0 20px!important; background:var(--hit-yellow)!important; color:#071b36!important; border:0!important; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)!important; } .header-reference__nav .nav-console__contact::before{ left:20px!important; bottom:15px!important; width:28px!important; background:#7b7b22!important; } .header-reference .menu-console{ display:none!important; } /* hide legacy frame/signal effects */ .header-reference .header-console__frame{ display:contents!important; } .header-reference .header-console__signal{ display:none!important; } .header-reference::before, .header-reference::after{ display:none!important; content:none!important; } /* --------------------------- FIRST VIEW --------------------------- */ .hero-reference{ position:relative!important; width:100%!important; height:calc(100vh - var(--hit-header-h))!important; min-height:680px!important; max-height:930px!important; margin:0!important; padding:0!important; overflow:hidden!important; background:#0b5db6!important; isolation:isolate!important; } .hero-reference__background{ position:absolute!important; inset:0!important; z-index:0!important; overflow:hidden!important; } .hero-reference__background img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 48%!important; transform:scale(1.01)!important; filter:saturate(.95) contrast(1.02) brightness(1.06)!important; } /* Stronger lower blue, light clean upper half */ .hero-reference__overlay{ position:absolute!important; inset:0!important; z-index:1!important; background: linear-gradient(180deg, rgba(55,156,235,.03) 0%, rgba(28,131,223,.03) 30%, rgba(9,102,205,.16) 56%, rgba(2,82,183,.56) 77%, rgba(0,65,157,.96) 100%)!important; pointer-events:none!important; } .hero-reference__copy{ position:absolute!important; z-index:7!important; left:4.8vw!important; bottom:6.7vh!important; color:#fff!important; max-width:720px!important; } .hero-reference__copy h1{ margin:0!important; color:#fff!important; font-family:Arial,"Helvetica Neue",sans-serif!important; font-size:clamp(4rem,6.2vw,7.2rem)!important; font-weight:300!important; line-height:.96!important; letter-spacing:-.035em!important; text-shadow:none!important; } .hero-reference__copy p{ margin:22px 0 0!important; color:#fff!important; font-size:clamp(.95rem,1.15vw,1.2rem)!important; font-weight:600!important; line-height:1.6!important; letter-spacing:.01em!important; } /* Reference uses one consistent slant angle throughout */ .hero-reference{ --hero-slant:64px; } /* Outer blue angled frame */ .hero-reference__rail-frame{ position:absolute!important; z-index:3!important; top:-2%!important; right:6.9%!important; width:25.8%!important; height:106%!important; background:linear-gradient(180deg,rgba(70,159,236,.58),rgba(20,121,219,.68) 48%,rgba(4,81,181,.94))!important; clip-path:polygon( var(--hero-slant) 0, 100% 0, calc(100% - var(--hero-slant)) 100%, 0 100% )!important; pointer-events:none!important; } /* Moving image column */ .hero-reference__rail{ position:absolute!important; z-index:5!important; top:-1%!important; right:9.5%!important; width:19.6%!important; height:102%!important; overflow:hidden!important; background:#fff!important; clip-path:polygon( var(--hero-slant) 0, 100% 0, calc(100% - var(--hero-slant)) 100%, 0 100% )!important; } /* 8 + duplicated 8. Downward, seamless. */ .hero-reference .hero-media-roll__track{ position:absolute!important; inset:0 auto auto 0!important; width:100%!important; height:400%!important; display:grid!important; grid-template-rows:repeat(16,1fr)!important; grid-template-columns:1fr!important; transform:translate3d(0,-50%,0)!important; animation:heroReferenceRollDown 34s linear infinite!important; will-change:transform!important; } .hero-reference .hero-media-roll__item{ position:relative!important; display:block!important; min-height:0!important; overflow:hidden!important; border:0!important; border-bottom:7px solid #fff!important; background:#dbe8f2!important; } .hero-reference .hero-media-roll__item img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; transform:scale(1.015)!important; filter:saturate(.97) contrast(1.02)!important; } .hero-reference .hero-media-roll__item::before, .hero-reference .hero-media-roll__item::after{ display:none!important; content:none!important; } @keyframes heroReferenceRollDown{ from{transform:translate3d(0,-50%,0)} to{transform:translate3d(0,0,0)} } /* Right structural blue band */ .hero-reference__right-band{ position:absolute!important; z-index:2!important; top:-2%!important; right:-1.5%!important; width:12.5%!important; height:106%!important; background:linear-gradient(180deg,rgba(63,150,232,.28),rgba(21,115,211,.58) 50%,rgba(1,70,164,.95))!important; clip-path:polygon( var(--hero-slant) 0, 100% 0, 100% 100%, 0 100% )!important; pointer-events:none!important; } /* No leftover old hero elements */ .hero-reference .hero-cts-exact__quick, .hero-reference::before, .hero-reference::after{ display:none!important; content:none!important; } /* Desktop refinements */ @media(min-width:1700px){ :root{--hit-header-h:88px} .header-reference{ grid-template-columns:minmax(500px,31vw) 1fr!important; } .header-reference .brand-console{ width:min(100%,540px)!important; } .header-reference .brand-console__logo img{ height:64px!important; } .hero-reference{ --hero-slant:72px; } } /* Tablet */ @media(max-width:1100px){ .header-reference{ grid-template-columns:330px 1fr!important; } .header-reference .brand-console{ padding:0 16px!important; } .header-reference .brand-console__logo img{ height:50px!important; } .header-reference__nav > a{ padding:0 12px!important; font-size:.67rem!important; } .header-reference__nav > a::before{ left:12px!important; } .hero-reference{ --hero-slant:52px; } .hero-reference__rail-frame{ right:5%!important; width:29%!important; } .hero-reference__rail{ right:8.2%!important; width:22%!important; } .hero-reference__right-band{ width:13.5%!important; } } /* Mobile */ @media(max-width:760px){ :root{--hit-header-h:70px} .header-reference{ grid-template-columns:1fr 64px!important; height:70px!important; min-height:70px!important; background:#fff!important; } .header-reference__brand-zone{ justify-content:flex-start!important; } .header-reference .brand-console{ justify-content:flex-start!important; width:auto!important; padding:0 14px!important; } .header-reference .brand-console__logo img{ height:44px!important; } .header-reference__nav{ position:fixed!important; top:70px!important; right:0!important; bottom:0!important; left:auto!important; width:min(84vw,360px)!important; height:auto!important; display:flex!important; flex-direction:column!important; padding:22px!important; background:var(--hit-navy)!important; transform:translateX(102%)!important; transition:transform .3s ease!important; } .header-reference__nav.open{ transform:translateX(0)!important; } .header-reference__nav > a{ width:100%!important; height:58px!important; padding:0 14px!important; } .header-reference .menu-console{ display:flex!important; position:relative!important; z-index:10!important; width:64px!important; height:70px!important; background:var(--hit-navy)!important; color:#fff!important; } .hero-reference{ height:calc(100vh - 70px)!important; min-height:700px!important; max-height:none!important; --hero-slant:0px; } .hero-reference__copy{ left:22px!important; right:22px!important; bottom:190px!important; } .hero-reference__copy h1{ font-size:3.2rem!important; } .hero-reference__copy p{ margin-top:14px!important; font-size:.82rem!important; } .hero-reference__rail-frame, .hero-reference__right-band{ display:none!important; } .hero-reference__rail{ left:0!important; right:0!important; top:auto!important; bottom:0!important; width:100%!important; height:160px!important; clip-path:none!important; } .hero-reference .hero-media-roll__track{ width:400%!important; height:100%!important; display:grid!important; grid-template-columns:repeat(16,1fr)!important; grid-template-rows:1fr!important; transform:translate3d(-50%,0,0)!important; animation:heroReferenceRollMobile 34s linear infinite!important; } .hero-reference .hero-media-roll__item{ border-bottom:0!important; border-right:4px solid #fff!important; } } @keyframes heroReferenceRollMobile{ from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} } @media(prefers-reduced-motion:reduce){ .hero-reference .hero-media-roll__track{ animation:none!important; } } /* ========================================================= FINAL VIEWPORT FIT Header is fixed/overlay in the original site. Offset the hero by the exact header height so header + hero = 1 viewport. ========================================================= */ .header-reference{ box-sizing:border-box!important; height:88px!important; min-height:88px!important; } .hero-reference{ margin-top:88px!important; height:calc(100vh - 88px)!important; min-height:680px!important; max-height:none!important; } @media(max-width:760px){ .header-reference{ height:70px!important; min-height:70px!important; } .hero-reference{ margin-top:70px!important; height:calc(100vh - 70px)!important; min-height:700px!important; } } /* ========================================================= RIGHT IMAGE RAIL — 8 UNIQUE + 8 DUPLICATE INFINITE LOOP ========================================================= */ .hero-reference .hero-media-roll__track{ height:400%!important; display:grid!important; grid-template-rows:repeat(16,1fr)!important; transform:translate3d(0,-50%,0)!important; animation:heroReferenceRollDown8 30s linear infinite!important; will-change:transform!important; } .hero-reference .hero-media-roll__item{ min-height:0!important; overflow:hidden!important; border-bottom:6px solid #fff!important; } .hero-reference .hero-media-roll__item img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; } /* Continuous DOWNWARD motion: first 8 images and duplicate 8 images are identical, so -50% -> 0 joins seamlessly. */ @keyframes heroReferenceRollDown8{ from{transform:translate3d(0,-50%,0)} to{transform:translate3d(0,0,0)} } /* Keep moving even on hover for a consistent corporate FV. */ .hero-reference__rail:hover .hero-media-roll__track{ animation-play-state:running!important; } @media(max-width:760px){ .hero-reference .hero-media-roll__track{ width:400%!important; height:100%!important; grid-template-columns:repeat(16,1fr)!important; grid-template-rows:1fr!important; transform:translate3d(-50%,0,0)!important; animation:heroReferenceRollMobile8 30s linear infinite!important; } @keyframes heroReferenceRollMobile8{ from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} } } /* ========================================================= RIGHT RAIL — JS DRIVEN INFINITE LOOP CSS animation is fully disabled to avoid conflicts. ========================================================= */ .hero-reference .hero-media-roll__track{ animation:none!important; transition:none!important; will-change:transform!important; } .hero-reference__rail:hover .hero-media-roll__track{ animation:none!important; } /* ========================================================= RIGHT RAIL FINAL — JS OWNS TRANSFORM ========================================================= */ .hero-reference .hero-media-roll__track{ animation:none!important; transition:none!important; will-change:transform!important; } /* Override all legacy transform declarations without fixing a value. JS writes the actual translate3d value with priority=important. */ .hero-reference__rail .hero-media-roll__track{ transform:none!important; } .hero-reference__rail:hover .hero-media-roll__track{ animation:none!important; } /* ========================================================= CARET + SCAFFOLD FINAL FIX ========================================================= */ /* These sections are display content, not editable UI. Hide browsing caret without disabling normal text selection. */ #services, #services *, #contact, #contact *{ caret-color:transparent!important; } /* Preserve normal caret in any real editable field added later. */ #services input, #services textarea, #services [contenteditable="true"], #contact input, #contact textarea, #contact [contenteditable="true"]{ caret-color:auto!important; } /* Services and Contact use EXACTLY the same scaffold geometry + animation. No section-specific opacity is allowed here. */ #services .section-scaffold, #contact .section-scaffold{ position:absolute!important; z-index:1!important; pointer-events:none!important; animation-name:sectionScaffoldVerifiedBuild!important; animation-duration:12.5s!important; animation-timing-function:cubic-bezier(.45,0,.25,1)!important; animation-iteration-count:infinite!important; background-image:url("../images/scaffold-unit-navy.svg")!important; background-repeat:repeat-y!important; background-position:center top!important; background-size:100% 242px!important; clip-path:inset(100% 0 0 0); will-change:clip-path,opacity; } /* Same physical module on both sections. */ @media(min-width:721px){ #services .section-scaffold, #contact .section-scaffold{ inset:0!important; top:0!important; left:0!important; right:0!important; bottom:0!important; width:100%!important; height:100%!important; transform:none!important; background-size:100% 242px!important; background-repeat:repeat-y!important; background-position:center top!important; } } @media(max-width:720px){ #services .section-scaffold, #contact .section-scaffold{ inset:0!important; width:100%!important; height:100%!important; transform:none!important; background-size:100% 190px!important; background-repeat:repeat-y!important; background-position:center top!important; } } /* ========================================================= NETIS — FACT-BASED PUBLIC WORKS PRESENTATION No pseudo certification badge / no government-looking mark. ========================================================= */ .business-section .netis-push.netis-field, #services .netis-push.netis-field{ display:grid!important; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important; gap:0!important; margin-top:42px!important; padding:0!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.20)!important; border-radius:0!important; background:#082d60!important; box-shadow:none!important; } .netis-field__photo{ position:relative; min-height:430px; margin:0; overflow:hidden; background:#dbe5ed; } .netis-field__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,37,78,.02) 50%,rgba(4,37,78,.58) 100%); pointer-events:none; } .netis-field__photo img{ display:block; width:100%; height:100%; min-height:430px; object-fit:cover; object-position:center; transform:none!important; filter:none!important; } .netis-field__photo figcaption{ position:absolute; z-index:2; left:28px; bottom:24px; color:#fff; font-size:.65rem; font-weight:700; letter-spacing:.11em; } .netis-field__content{ display:flex; flex-direction:column; justify-content:center; padding:42px 44px; color:#fff; } .netis-field__eyebrow{ display:block; margin-bottom:14px; color:#91c9ed; font-size:.62rem; font-weight:700; letter-spacing:.12em; } .netis-field__content h3{ margin:0!important; color:#fff!important; font-size:clamp(1.55rem,2.2vw,2.25rem)!important; line-height:1.3!important; letter-spacing:-.02em!important; } .netis-field__lead{ margin:18px 0 0!important; color:rgba(255,255,255,.84)!important; font-size:.82rem!important; line-height:1.9!important; } .netis-field__facts{ display:grid; grid-template-columns:1fr; gap:0; margin-top:28px; border-top:1px solid rgba(255,255,255,.22); } .netis-field__fact{ display:grid; grid-template-columns:118px 1fr; gap:18px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.18); } .netis-field__fact span{ color:#f2d83d; font-size:.68rem; font-weight:700; line-height:1.6; } .netis-field__fact p{ margin:0!important; color:rgba(255,255,255,.78)!important; font-size:.70rem!important; line-height:1.75!important; } .netis-field__note{ margin:20px 0 0!important; color:rgba(255,255,255,.53)!important; font-size:.59rem!important; line-height:1.7!important; } .netis-field__link{ align-self:flex-start; position:relative; margin-top:22px; padding:0 0 7px; color:#fff!important; font-size:.68rem; font-weight:700; text-decoration:none!important; border-bottom:1px solid rgba(255,255,255,.55); transition:border-color .2s ease,opacity .2s ease; } .netis-field__link:hover{ opacity:.78; border-color:#fff; } /* Remove all legacy fake-mark presentation if old rules remain. */ .netis-field .netis-push__mark, .netis-field .netis-push__reasons, .netis-field .netis-push__content{ display:none!important; } @media(max-width:900px){ .business-section .netis-push.netis-field, #services .netis-push.netis-field{ grid-template-columns:1fr!important; } .netis-field__photo{ min-height:310px; } .netis-field__photo img{ min-height:310px; } .netis-field__content{ padding:30px 26px; } } @media(max-width:560px){ .netis-field__fact{ grid-template-columns:1fr; gap:7px; } } /* ========================================================= NETIS PHOTO — FINAL EMBED / VISUAL POLISH ========================================================= */ .netis-field__photo{ position:relative!important; min-height:460px!important; overflow:hidden!important; background:#d9e4ec!important; } .netis-field__photo img{ display:block!important; width:100%!important; height:100%!important; min-height:460px!important; object-fit:cover!important; object-position:50% 48%!important; transform:scale(1.006)!important; filter:saturate(.94) contrast(1.015) brightness(.985)!important; } /* Slight navy wash so the photo belongs to the overall HIT palette without making it look synthetic or over-edited. */ .netis-field__photo::after{ content:""!important; position:absolute!important; inset:0!important; z-index:1!important; background: linear-gradient(180deg, rgba(4,37,78,.01) 0%, rgba(4,37,78,.03) 58%, rgba(4,37,78,.34) 100%)!important; pointer-events:none!important; } .netis-field__photo figcaption{ z-index:2!important; } /* A restrained blue rule ties photo and copy together. */ .netis-field__photo::before{ content:""!important; position:absolute!important; z-index:2!important; left:0!important; bottom:0!important; width:100%!important; height:3px!important; background:#2b78b9!important; opacity:.9!important; pointer-events:none!important; } @media(max-width:900px){ .netis-field__photo, .netis-field__photo img{ min-height:340px!important; } .netis-field__photo img{ object-position:52% 50%!important; } } @media(max-width:560px){ .netis-field__photo, .netis-field__photo img{ min-height:280px!important; } } /* ========================================================= NETIS — VISUAL HERO REBUILD ========================================================= */ .netis-hero{ margin-top:46px!important; border:1px solid rgba(255,255,255,.18)!important; background:#fff!important; overflow:hidden!important; } .netis-hero__visual{ position:relative; min-height:500px; overflow:hidden; background:#dce8f0; } .netis-hero__visual img{ display:block; width:100%; height:100%; min-height:500px; object-fit:cover; object-position:center 50%; filter:saturate(.96) contrast(1.015) brightness(1.015); } .netis-hero__fade{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 25%, rgba(255,255,255,.62) 38%, rgba(255,255,255,.14) 53%, rgba(255,255,255,0) 72%), linear-gradient(180deg, rgba(2,31,68,.02) 0%, rgba(2,31,68,.03) 65%, rgba(2,31,68,.17) 100%); pointer-events:none; } .netis-hero__copy{ position:absolute; z-index:2; left:clamp(34px,5vw,72px); top:50%; width:min(470px,42%); transform:translateY(-50%); } .netis-hero__eyebrow{ display:block; margin-bottom:18px; color:#1474b8; font-size:.68rem; font-weight:700; letter-spacing:.11em; } .netis-hero__copy h3{ margin:0!important; color:#092c5b!important; font-size:clamp(2.4rem,4.1vw,4.7rem)!important; line-height:1.12!important; letter-spacing:-.045em!important; } .netis-hero__copy p{ margin:28px 0 0!important; color:#23364a!important; font-size:clamp(.86rem,1.03vw,1.06rem)!important; line-height:2!important; font-weight:600!important; } .netis-hero__info{ display:grid; grid-template-columns:1fr 1.45fr 280px; gap:0; align-items:stretch; background:#fff; border-top:1px solid #d8e1e8; } .netis-hero__info-block{ display:grid; grid-template-columns:42px 1fr; gap:18px; padding:30px 32px; border-right:1px solid #d8e1e8; } .netis-hero__info-num{ display:grid; place-items:center; align-self:start; width:36px; height:36px; border:1px solid #c9d7e1; border-radius:50%; color:#0b5f9c; font-size:.63rem; font-weight:700; } .netis-hero__info-block h4{ margin:0 0 10px; color:#0b5f9c; font-size:1rem; line-height:1.4; } .netis-hero__info-block p{ margin:0; color:#24384a; font-size:.72rem; line-height:1.8; } .netis-hero__info-block small{ display:block; margin-top:12px; color:#7a8996; font-size:.56rem; line-height:1.65; } .netis-hero__info-block ul{ margin:0; padding:0; list-style:none; } .netis-hero__info-block li{ position:relative; margin:0 0 9px; padding-left:22px; color:#24384a; font-size:.72rem; line-height:1.7; } .netis-hero__info-block li:last-child{ margin-bottom:0; } .netis-hero__info-block li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:#0b5f9c; } .netis-hero__official{ display:flex; flex-direction:column; justify-content:center; position:relative; padding:28px 32px; background:#072f67; color:#fff!important; text-decoration:none!important; transition:background-color .2s ease; } .netis-hero__official:hover{ background:#052856; } .netis-hero__official span{ font-size:.8rem; font-weight:700; } .netis-hero__official small{ margin-top:6px; color:rgba(255,255,255,.72); font-size:.64rem; } .netis-hero__official b{ position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:1.15rem; font-weight:400; } @media(max-width:980px){ .netis-hero__visual{ min-height:440px; } .netis-hero__visual img{ min-height:440px; } .netis-hero__fade{ background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 32%, rgba(255,255,255,.42) 58%, rgba(255,255,255,0) 82%); } .netis-hero__info{ grid-template-columns:1fr 1fr; } .netis-hero__official{ grid-column:1/3; min-height:92px; } } @media(max-width:680px){ .netis-hero__visual{ min-height:560px; } .netis-hero__visual img{ min-height:560px; object-position:64% 50%; } .netis-hero__fade{ background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.87) 42%, rgba(255,255,255,.25) 68%, rgba(255,255,255,0) 100%); } .netis-hero__copy{ top:40px; left:24px; right:24px; width:auto; transform:none; } .netis-hero__copy h3{ font-size:2.6rem!important; } .netis-hero__info{ grid-template-columns:1fr; } .netis-hero__info-block, .netis-hero__official{ grid-column:auto; border-right:0; border-bottom:1px solid #d8e1e8; } } /* ========================================================= NETIS — RESTORED COMPACT NAVY PANEL ========================================================= */ .netis-retro{ display:grid!important; grid-template-columns:290px minmax(0,1fr)!important; gap:34px!important; align-items:center!important; margin-top:40px!important; padding:22px!important; border:1px solid rgba(126,177,215,.45)!important; border-radius:9px!important; background:rgba(8,54,111,.88)!important; box-shadow:none!important; overflow:hidden!important; } .netis-retro__mark{ align-self:center; } .netis-retro__mark-box{ display:flex; align-items:center; justify-content:center; width:100%; min-height:108px; padding:10px; border-radius:18px; background:#fff; overflow:hidden; } .netis-retro__mark-box img{ display:block!important; width:100%!important; height:auto!important; max-height:112px!important; object-fit:contain!important; filter:none!important; transform:none!important; } .netis-retro__mark > p{ margin:9px 2px 0!important; color:rgba(190,215,233,.62)!important; font-size:.52rem!important; line-height:1.55!important; } .netis-retro__body{ min-width:0; } .netis-retro__eyebrow{ display:block; margin-bottom:6px; color:#f1d828; font-size:.56rem; font-weight:700; letter-spacing:.08em; } .netis-retro__body h3{ margin:0!important; color:#fff!important; font-size:1.08rem!important; line-height:1.45!important; } .netis-retro__lead{ margin:8px 0 0!important; color:rgba(220,234,244,.76)!important; font-size:.62rem!important; line-height:1.75!important; } .netis-retro__points{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:11px; } .netis-retro__points article{ display:grid; grid-template-columns:34px 1fr; gap:10px; min-height:72px; padding:11px 12px; border:1px solid rgba(126,177,215,.28); border-radius:4px; background:rgba(255,255,255,.025); } .netis-retro__points article > span{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f4dc28; color:#122d4d; font-size:.63rem; font-weight:700; } .netis-retro__points h4{ margin:0 0 3px; color:#fff; font-size:.67rem; line-height:1.45; } .netis-retro__points p{ margin:0!important; color:rgba(210,228,241,.66)!important; font-size:.55rem!important; line-height:1.55!important; } .netis-retro__note{ margin:9px 0 0!important; padding-top:8px; border-top:1px solid rgba(126,177,215,.18); color:rgba(201,221,236,.66)!important; font-size:.54rem!important; line-height:1.65!important; } @media(max-width:980px){ .netis-retro{ grid-template-columns:220px minmax(0,1fr)!important; gap:24px!important; } .netis-retro__points{ grid-template-columns:1fr!important; } } @media(max-width:680px){ .netis-retro{ grid-template-columns:1fr!important; padding:18px!important; } .netis-retro__mark{ max-width:300px; } } /* NETIS promotional visual — generated image integration */ .netis-retro{ grid-template-columns:minmax(360px, 43%) minmax(0, 1fr)!important; align-items:stretch!important; } .netis-retro__mark{ display:flex!important; flex-direction:column!important; justify-content:center!important; } .netis-retro__mark-box{ padding:0!important; min-height:0!important; border-radius:8px!important; background:#fff!important; overflow:hidden!important; } .netis-retro__mark-box img{ width:100%!important; height:auto!important; max-height:none!important; aspect-ratio:16/10!important; object-fit:cover!important; object-position:center!important; display:block!important; } @media(max-width:980px){ .netis-retro{ grid-template-columns:1fr!important; } .netis-retro__mark{ max-width:none!important; } .netis-retro__mark-box img{ aspect-ratio:16/9!important; } } /* ========================================================= NETIS SECTION — REMOVE FAINT BACKGROUND IMAGE COMPLETELY ========================================================= */ .netis-retro{ background:#08366f!important; background-image:none!important; box-shadow:none!important; } .netis-retro::before, .netis-retro::after, .netis-retro__body::before, .netis-retro__body::after{ content:none!important; display:none!important; background:none!important; background-image:none!important; } /* Make sure no inherited decorative image is visible inside this block */ .netis-retro, .netis-retro *{ background-image:none; } /* Restore intended local backgrounds after blanket removal */ .netis-retro__mark-box{ background:#fff!important; } .netis-retro__points article{ background:rgba(255,255,255,.025)!important; } /* ========================================================= REMOVE TRANSPARENT BACKGROUND PHOTOS Services + Contact only ========================================================= */ /* 取り扱いサービス */ #services, #services.services-story-section, #services .services-story-bg, #services .services-bg, #services .section-bg, #services .background-photo{ background-image:none!important; } #services::before, #services::after, #services .services-story-bg::before, #services .services-story-bg::after, #services .services-bg::before, #services .services-bg::after{ background-image:none!important; content:none!important; } /* お問い合わせ */ #contact, #contact .contact-photo-bg, #contact .section-bg, #contact .background-photo{ background-image:none!important; } #contact::before, #contact::after, #contact .contact-photo-bg::before, #contact .contact-photo-bg::after{ background-image:none!important; content:none!important; } /* Keep intended base navy colors */ #services{ background-color:#082d60!important; } #contact{ background-color:#071d36!important; } /* Keep scaffold animation untouched */ #services .section-scaffold, #contact .section-scaffold{ display:block!important; } /* ========================================================= FINAL: REMOVE SECTION BACKGROUND PHOTO ELEMENTS ========================================================= */ #services .business-bg, #contact .contact-photo-bg{ display:none!important; visibility:hidden!important; opacity:0!important; background:none!important; background-image:none!important; } /* Keep only the intended solid navy base + scaffold overlay */ #services{ background:#071b36!important; } #contact{ background:#071b36!important; } /* ========================================================= FINAL BACKGROUND LAYER CLEANUP Services / Contact: - no photo background - no pseudo background image - exactly one scaffold layer (.section-scaffold) ========================================================= */ /* Completely remove old pseudo image layers */ #services::before, #services::after, #contact::before, #contact::after{ content:none!important; display:none!important; background:none!important; background-image:none!important; opacity:0!important; animation:none!important; } /* Solid section base only */ #services, #contact{ position:relative!important; isolation:isolate!important; background:#071b36!important; background-color:#071b36!important; background-image:none!important; } /* No generic/legacy photo background children */ #services .business-bg, #services .services-story-bg, #services .services-bg, #services .section-bg, #services .background-photo, #contact .contact-photo-bg, #contact .section-bg, #contact .background-photo{ display:none!important; visibility:hidden!important; opacity:0!important; background:none!important; background-image:none!important; } /* Keep ONE scaffold layer only */ #services > .section-scaffold, #contact > .section-scaffold{ display:block!important; position:absolute!important; inset:0!important; z-index:1!important; width:100%!important; height:100%!important; pointer-events:none!important; background-image:url("../images/scaffold-unit-navy.svg")!important; background-repeat:repeat-y!important; background-position:center top!important; background-size:100% 242px!important; animation:sectionScaffoldVerifiedBuild 12.5s cubic-bezier(.45,0,.25,1) infinite!important; will-change:clip-path,opacity!important; } /* Real content stays above scaffold */ #services > .container, #contact > .container{ position:relative!important; z-index:2!important; } @media(max-width:720px){ #services > .section-scaffold, #contact > .section-scaffold{ background-size:100% 190px!important; } }