:root{
  /* メインカラー：ここを変えると全体のピンクが変わります（例：#E3DDF7 ラベンダー / #D6EFE6 ミント / #FBF0C9 レモン） */
  --accent:#FADDE1;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#FFFBF8}

a{color:#3F3B48}
a:hover{color:#A6587A}

@keyframes sway{0%,100%{transform:rotate(-3deg)}
50%{transform:rotate(3deg)}
}

.sway{transform-origin:50% 0;animation:sway 4.5s ease-in-out infinite}

.d1{animation-delay:-0.8s}
.d2{animation-delay:-1.6s}
.d3{animation-delay:-2.4s}
.d4{animation-delay:-3.2s}
.d5{animation-delay:-4s}

@keyframes drop{from{opacity:0;transform:translateY(-60px)}
to{opacity:1;transform:none}
}

.drop{animation:drop 1.2s cubic-bezier(.2,.8,.3,1.2) both}

@keyframes fadeup{from{opacity:0;transform:translateY(24px)}
to{opacity:1;transform:none}
}

.intro{animation:fadeup 1s ease-out .5s both}

@keyframes float{0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}

.float{animation:float 5s ease-in-out infinite}

@keyframes spin{to{transform:rotate(360deg)}
}

.orbit{transform-origin:28px 20px;animation:spin 9s linear infinite}

.deco{position:absolute;pointer-events:none;z-index:0}

@media (max-width:760px){.deco.sm-hide{display:none}
}

@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}
50%{opacity:1;transform:scale(1)}
}

.twinkle{transform-origin:center;transform-box:fill-box;animation:twinkle 2.6s ease-in-out infinite}

html{scroll-behavior:smooth}

@keyframes flicker{0%,100%{transform:scaleY(1)}
50%{transform:scaleY(.7)}
}

.flame{transform-origin:50% 0;transform-box:fill-box;animation:flicker .5s ease-in-out infinite}

.rocket{position:fixed;right:24px;bottom:24px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;padding:10px 0 8px;border-radius:999px;background:#FFFFFF;border:1px solid #3F3B48;text-decoration:none;font-family:'Quicksand',sans-serif;font-size:10px;letter-spacing:.15em;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}

.rocket:hover{transform:translateY(-8px)}

.rocket:focus-visible{outline:2px solid #A6587A;outline-offset:3px}

@keyframes shoot{0%{opacity:0;transform:translate(0,0)}
4%{opacity:1}
14%{opacity:0;transform:translate(420px,180px)}
100%{opacity:0;transform:translate(420px,180px)}
}

.shoot{animation:shoot 9s ease-out infinite}

@keyframes wiggle{0%,100%{transform:rotate(0)}
25%{transform:rotate(-8deg)}
75%{transform:rotate(8deg)}
}

.lift:hover svg{animation:wiggle .6s ease-in-out}

.btn{transition:transform .3s ease,box-shadow .3s ease}

.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 -2px #FADDE1}

.squiggle path{stroke-dasharray:140;stroke-dashoffset:0}

@keyframes draw{from{stroke-dashoffset:140}
to{stroke-dashoffset:0}
}

@keyframes grow{from{transform:scaleX(0)}
to{transform:scaleX(1)}
}

.drawline{transform-origin:left center}

@supports (animation-timeline: view()){
.squiggle path{animation:draw linear both;animation-timeline:view();animation-range:entry 10% cover 35%}

.drawline{animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 40%}

}

.lift{transition:transform .35s ease}
.lift:hover{transform:translateY(-6px)}

@keyframes rise{from{opacity:0;transform:translateY(48px)}
to{opacity:1;transform:none}
}

@supports (animation-timeline: view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
}