*{box-sizing:border-box}
:root{--orange:#f47a20;--orange2:#ffad66;--ink:#292929}
html,body{margin:0;width:100%;min-height:100%;background:#fff;color:var(--ink)}
body{min-height:100svh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,Arial,sans-serif}
.stage{position:relative;isolation:isolate;min-height:100svh;display:grid;place-items:center;padding:clamp(28px,5vh,64px) clamp(18px,5vw,72px);overflow:hidden;background:linear-gradient(145deg,#fff 0%,#fff 62%,#fffaf5 100%)}
.motion-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.mesh{position:absolute;display:block;border-radius:48% 52% 58% 42%/48% 44% 56% 52%;filter:blur(2px);will-change:transform;border:1px solid rgba(244,122,32,.13)}
.mesh::after{content:"";position:absolute;inset:12%;border-radius:inherit;background:radial-gradient(circle at 35% 35%,rgba(244,122,32,.12),rgba(244,122,32,.035) 48%,transparent 72%)}
.mesh-a{width:min(54vw,760px);aspect-ratio:1;right:-20vw;top:-30vw;animation:meshA 19s ease-in-out infinite alternate}
.mesh-b{width:min(48vw,650px);aspect-ratio:1;left:-22vw;bottom:-28vw;animation:meshB 23s ease-in-out infinite alternate}
.mesh-c{width:min(26vw,380px);aspect-ratio:1;left:62%;top:57%;opacity:.45;animation:meshC 16s ease-in-out infinite alternate}
.orbit{position:absolute;display:block;border-radius:50%;border:1px solid rgba(244,122,32,.14);will-change:transform}
.orbit-a{width:min(45vw,640px);aspect-ratio:1;right:-17vw;top:-23vw;animation:orbitA 28s linear infinite}
.orbit-b{width:min(27vw,390px);aspect-ratio:1;left:-10vw;bottom:-14vw;animation:orbitB 34s linear infinite reverse}

.hero{width:min(1000px,100%);text-align:center;position:relative}
.logo-wrap{display:block;width:clamp(410px,53vw,680px);max-width:92%;margin:0 auto clamp(34px,5vh,52px)}
.logo{display:block;width:100%;height:auto;margin:0 auto}
.headline{margin:0;font-size:clamp(42px,5.5vw,78px);line-height:1.2;letter-spacing:-.045em;font-weight:700;word-break:keep-all}
.reveal-line{display:block;opacity:0;filter:blur(18px);transform:translateY(28px) scale(.985);animation:textReveal 1.15s cubic-bezier(.16,.8,.2,1) forwards}
.line-1{animation-delay:.32s}
.line-2{color:var(--orange);animation-delay:.55s}
.reveal-logo{opacity:0;filter:blur(14px);transform:translateY(18px) scale(.985);animation:logoReveal 1.2s cubic-bezier(.16,.8,.2,1) .08s forwards}
.rule{width:0;height:3px;border-radius:999px;margin:clamp(24px,3.5vh,32px) auto;background:linear-gradient(90deg,var(--orange),var(--orange2));animation:ruleGrow .75s cubic-bezier(.2,.8,.2,1) 1.05s forwards}
.domain{margin:0;color:var(--orange);font-size:clamp(11px,1.1vw,14px);font-weight:700;letter-spacing:.28em;opacity:0;filter:blur(8px);transform:translateY(10px);animation:domainReveal .8s ease 1.25s forwards}

@keyframes logoReveal{to{opacity:1;filter:blur(0);transform:none}}
@keyframes textReveal{to{opacity:1;filter:blur(0);transform:none}}
@keyframes ruleGrow{to{width:64px}}
@keyframes domainReveal{to{opacity:1;filter:blur(0);transform:none}}
@keyframes meshA{to{transform:translate(-8vw,7vh) rotate(17deg) scale(1.09);border-radius:58% 42% 43% 57%/44% 57% 43% 56%}}
@keyframes meshB{to{transform:translate(8vw,-6vh) rotate(-14deg) scale(1.12);border-radius:43% 57% 54% 46%/59% 42% 58% 41%}}
@keyframes meshC{to{transform:translate(-6vw,-7vh) rotate(22deg) scale(1.18)}}
@keyframes orbitA{to{transform:rotate(360deg)}}
@keyframes orbitB{to{transform:rotate(360deg)}}

@media(max-width:900px){
 .stage{padding:40px 26px}
 .logo-wrap{width:min(570px,80vw);margin-bottom:42px}
 .headline{font-size:clamp(42px,7vw,62px)}
 .mesh-a{width:88vw;right:-43vw;top:-31vw}.mesh-b{width:80vw;left:-43vw;bottom:-34vw}
}
@media(max-width:600px){
 .stage{padding:clamp(30px,6vh,54px) 28px}
 .hero{width:100%;max-width:430px}
 .logo-wrap{width:clamp(158px,44vw,195px);max-width:none;margin:0 auto 14px;line-height:0}
 .logo{width:100%;aspect-ratio:1;object-fit:contain}
 .headline{font-size:clamp(30px,8.3vw,40px);line-height:1.38;letter-spacing:-.035em}
 .headline .line-1{white-space:normal;max-width:9.5em;margin-inline:auto}
 .headline .line-2{max-width:8em;margin-inline:auto}
 .rule{height:2px;margin:clamp(22px,3.5vh,28px) auto}
 .domain{font-size:10px;letter-spacing:.17em}
 .mesh-a{width:130vw;right:-72vw;top:-35vw}.mesh-b{width:120vw;left:-70vw;bottom:-40vw}.mesh-c{width:70vw;left:55%;top:60%}
 .orbit-a{width:105vw;right:-60vw;top:-27vw}.orbit-b{width:70vw;left:-38vw;bottom:-22vw}
}
@media(max-width:380px){
 .stage{padding-left:22px;padding-right:22px}
 .hero{max-width:340px}
 .logo-wrap{width:150px;margin-bottom:12px;line-height:0}
 .headline{font-size:clamp(28px,8vw,32px);line-height:1.42}
 .headline .line-1{max-width:9.5em}
 .domain{font-size:9px;letter-spacing:.13em}
}
@media(max-height:650px) and (min-width:601px){
 .logo-wrap{width:min(500px,48vw);margin-bottom:28px}
 .headline{font-size:clamp(36px,5vw,56px)}
 .rule{margin-top:27px}
}
@media(prefers-reduced-motion:reduce){
 .mesh,.orbit,.reveal-line,.reveal-logo,.rule,.domain{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
 .rule{width:64px}
}

.company-summary{
  width:min(720px,92%);
  margin:20px auto 0;
  color:#777;
  font-size:12px;
  line-height:1.8;
  letter-spacing:.02em;
}
.company-summary p{margin:0}
@media(max-width:600px){
  .company-summary{
    width:min(330px,94%);
    margin-top:16px;
    font-size:10px;
    line-height:1.7;
  }
}