/* トップ専用。ヒーロー（街とピン）・なぜ今・Signalizer（A の図）・AI・数字の帯・事例・姿勢・お知らせ */
.thero{min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:100px 0 120px}
.thero .wrap{width:100%}
.thero .tx{position:relative;z-index:2;max-width:640px}
.thero h1{font-size:clamp(44px,5.6vw,92px);line-height:1.16;letter-spacing:-.02em}
.thero h1 .ph{display:inline-block;white-space:nowrap}
.thero h1 .l2{display:block;font-size:.38em;line-height:1.5;letter-spacing:0;margin-top:20px}
.thero .trust1{margin-top:20px;font-weight:700;font-size:16px;line-height:1.7;border-left:4px solid var(--red);padding-left:14px}
.orb{position:absolute;right:-7vw;top:50%;width:min(52vw,760px);aspect-ratio:1;margin-top:calc(min(52vw,760px)/-2);border-radius:50%;overflow:hidden;background:#eef0f3;box-shadow:0 40px 90px -40px rgba(20,22,26,.45);animation:float 9s ease-in-out infinite;transform:translateY(var(--py,0));pointer-events:none}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.orb svg{width:100%;height:100%}
.orb .blk{fill:#fff}.orb .rd{fill:none;stroke:#d9dce1;stroke-width:14}.orb .rd2{fill:none;stroke:#fff;stroke-width:5;stroke-dasharray:14 14}
.orb .pn{transform-box:fill-box;transform-origin:50% 100%;animation:drop 4.8s var(--ease) infinite;animation-delay:calc(var(--i)*.55s);opacity:0}
@keyframes drop{0%{opacity:0;transform:translateY(-60px) scale(.6)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.orb .ring{fill:none;stroke:var(--red);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:ping 4.8s ease-out infinite;animation-delay:calc(var(--i)*.55s);opacity:0}
@keyframes ping{0%,10%{transform:scale(.3);opacity:0}16%{opacity:.8}60%{transform:scale(2.2);opacity:0}100%{opacity:0}}
.orb .ppl{fill:var(--ink);animation:walkx 14s linear infinite;animation-delay:calc(var(--i)*-1.9s)}.orb .ppl.v{animation-name:walky}
@keyframes walkx{from{transform:translateX(-40px)}to{transform:translateX(660px)}}
@keyframes walky{from{transform:translateY(-40px)}to{transform:translateY(660px)}}
.orb .dash{stroke-dasharray:6 10;animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
/* なぜ今 */
.whys{padding:100px 0 90px;background:var(--soft)}
.ws{margin-top:48px;display:grid;gap:30px}
.wst{position:relative;display:grid;grid-template-columns:96px 1fr;gap:22px;max-width:760px;background:#fff;border-radius:30px;padding:26px 30px;box-shadow:0 24px 40px -30px rgba(0,0,0,.4)}
.wst:nth-child(2){margin-left:clamp(0px,10vw,150px)}.wst:nth-child(3){margin-left:clamp(0px,20vw,300px)}
.wst .ic{width:96px;height:96px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:900;font-size:40px}
.wst h3{font-size:clamp(20px,2.1vw,28px);line-height:1.45}.wst p{margin-top:6px;font-size:15px}
.drift{position:relative;height:150px;margin-top:50px;overflow:hidden;pointer-events:none}
.drift span{position:absolute;padding:7px 18px;border:2px solid var(--ink);background:#fff;border-radius:999px;font-weight:700;font-size:16px;white-space:nowrap;left:calc(var(--x)*1%);top:calc(var(--y)*1%);animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.6s)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
/* Signalizer（A の図：更新を1回、押してみる） */
#sig{padding:130px 0}
#sig .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:60px;align-items:center}
.bl{list-style:none;margin-top:22px}
.bl li{padding:12px 0 12px 30px;border-top:1px solid var(--line);position:relative}
.bl li:before{content:"";position:absolute;left:0;top:24px;width:12px;height:12px;border-radius:50%;background:var(--red)}
#sig .nstat{margin-top:22px}
/* AI */
#ai{background:var(--soft)}
#ai .wrap{padding-top:120px;padding-bottom:120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
/* サービス */
#svc{padding:120px 0 100px}
/* 数字の帯 */
#nums{padding:90px 0 70px;overflow:hidden;background:#fff}
.mq{white-space:nowrap;overflow:hidden;pointer-events:none}
.mq div{display:inline-block;font-family:var(--disp);font-weight:900;font-size:clamp(70px,12vw,200px);line-height:1;color:transparent;-webkit-text-stroke:2px #cfd2d7;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
#nums .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:-6vw}
#nums .nb{background:#fff;border:2px solid var(--ink);border-radius:30px;padding:26px 28px;box-shadow:8px 8px 0 var(--red)}
#nums .nb:nth-child(2){margin-top:36px}
#nums .nb .num{white-space:nowrap;font-size:clamp(52px,6.4vw,100px);line-height:1;color:var(--red)}#nums .nb .num small{font-size:.32em;color:var(--ink);margin-left:4px}
#nums .nb .s{font-size:16px;margin-top:8px;font-weight:700}
#nums .src{padding:30px 28px 0 72px;max-width:1240px;margin:0 auto}
/* 事例 */
#cases{background:var(--soft);overflow:hidden}
#cases .wrap{padding-top:120px;padding-bottom:120px}
.ghost{position:absolute;right:-2vw;top:90px;font-family:var(--disp);font-weight:900;font-size:clamp(90px,15vw,240px);line-height:1;color:transparent;-webkit-text-stroke:2px #d3d6db;white-space:nowrap;pointer-events:none;animation:ghost 26s linear infinite alternate}
@keyframes ghost{from{transform:translateX(0)}to{transform:translateX(-12vw)}}
/* 姿勢 */
#att{height:300vh;background:#fff}
#att .pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
#att .q{font-size:clamp(38px,6vw,98px);line-height:1.22;letter-spacing:-.02em}
#att .q .c{color:#c4c8ce;transition:color .25s}#att .q .c.on{color:var(--ink)}#att .q .c.red.on{color:var(--red)}
#att .lead{margin-top:30px}
.pts{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.pts div{border-top:3px solid var(--ink);padding-top:14px;opacity:.25;transition:opacity .5s var(--ease)}.pts div.on{opacity:1}
.pts b{display:block;font-size:17px}.pts p{font-size:15px;line-height:1.75;margin-top:4px}
.motto{margin-top:26px;font-weight:700;font-size:20px}
/* お知らせ */
#news .wrap{padding-top:110px;padding-bottom:110px}
.nw{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:70px;align-items:start}
.nl{list-style:none}
.nl li{border-bottom:1px solid var(--line);position:relative;overflow:hidden}.nl li:first-child{border-top:3px solid var(--ink)}
.nl li a{display:block;padding:18px 40px 18px 0;font-size:16px;line-height:1.6;transition:transform .35s var(--ease),color .25s}
.nl li a:after{content:"→";position:absolute;right:0;top:18px;opacity:0;transform:translateX(-14px);transition:opacity .3s,transform .35s var(--ease);color:var(--red);font-weight:900}
.nl li a:hover{transform:translateX(10px);color:var(--redd)}.nl li a:hover:after{opacity:1;transform:none}
.nl li span{color:var(--gray);font-size:13px;margin-right:12px}.nl li i{font-style:normal;font-size:12px;border:1px solid var(--gray);color:var(--gray);padding:0 6px;margin-right:8px}
@media(max-width:1024px){
 #sig .wrap,#ai .wrap,.nw{grid-template-columns:minmax(0,1fr);gap:36px}
 #nums .wrap{grid-template-columns:minmax(0,1fr)}#nums .nb:nth-child(2){margin-top:0}
 .orb{position:relative;right:auto;top:auto;margin:40px 0 0;width:min(86vw,520px)}
 .thero{display:block;padding-bottom:90px}
}
@media(max-width:820px){
 .thero{padding-top:84px}.whys{padding:70px 0}#sig{padding:80px 0}#svc{padding:80px 0}
 .wst:nth-child(n){margin-left:0}.wst{grid-template-columns:64px 1fr;padding:20px}.wst .ic{width:64px;height:64px;font-size:28px}
 #ai .wrap,#cases .wrap{padding-top:80px;padding-bottom:80px}
 #att{height:auto}#att .pin{position:static;height:auto;padding:80px 0}#att .q .c{color:var(--ink)}#att .q .c.red{color:var(--red)}.pts div{opacity:1}.pts{grid-template-columns:minmax(0,1fr)}
 #nums .src{padding-left:46px}.ghost{font-size:80px;top:70px}.drift{height:190px}
}