@import "https://fonts.googleapis.com/css2?family=Lily+Script+One&family=Noto+Sans+JP:wght@300;400;500&display=swap";
:root{--bg-cream:#fffce5;--teal:#0b7b91;--teal-light:#1a8398}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-cream);min-height:100vh;font-family:Noto Sans JP,sans-serif}svg .shape1,svg .shape2,svg .shape3,svg .geoShape1,svg .geoShape2,svg .geoShape3{transform-origin:50%}#services div a:first-child:hover svg .shape1{animation:3s ease-in-out infinite hoverRotateCW}#services div a:first-child:hover svg .shape2{animation:3.5s ease-in-out infinite hoverRotateCCW}#services div a:first-child:hover svg .shape3{animation:2s ease-in-out infinite hoverPulse}#services div a:nth-child(2):hover svg .shape1{animation:2.5s ease-in-out infinite hoverFloat1}#services div a:nth-child(2):hover svg .shape2{animation:3s ease-in-out infinite hoverFloat2}#services div a:nth-child(2):hover svg .shape3{animation:2.5s ease-in-out infinite hoverPulse}#services div a:nth-child(3):hover svg .shape1{animation:4s ease-in-out infinite hoverRotateCW}#services div a:nth-child(3):hover svg .shape2{animation:3s ease-in-out infinite hoverRotateCCW}#services div a:nth-child(3):hover svg .shape3{animation:2s ease-in-out infinite hoverFloat1}#services div a:nth-child(4):hover svg .shape1{animation:2s ease-in-out infinite hoverBreath}#message svg .geoShape1{animation:12s ease-in-out infinite msgRotateCW}#message svg .geoShape2{animation:15s ease-in-out infinite msgRotateCCW}#message svg .geoShape3{animation:6s ease-in-out infinite msgPulse}@keyframes hoverRotateCW{0%,to{transform:rotate(0)scale(1)}25%{transform:rotate(8deg)scale(1.02)}50%{transform:rotate(0)scale(.98)}75%{transform:rotate(-8deg)scale(1.02)}}@keyframes hoverRotateCCW{0%,to{transform:rotate(0)scale(1)}25%{transform:rotate(-10deg)scale(.98)}50%{transform:rotate(0)scale(1.02)}75%{transform:rotate(10deg)scale(.98)}}@keyframes hoverPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes hoverFloat1{0%,to{transform:translate(0)scale(1)}25%{transform:translate(3px,-3px)scale(1.01)}50%{transform:translate(0)scale(.99)}75%{transform:translate(-3px,3px)scale(1.01)}}@keyframes hoverFloat2{0%,to{transform:translate(0)scale(1)}25%{transform:translate(-4px,2px)scale(.99)}50%{transform:translate(0)scale(1.02)}75%{transform:translate(4px,-2px)scale(.99)}}@keyframes hoverBreath{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes msgRotateCW{0%{transform:rotate(0)scale(1)}25%{transform:rotate(20deg)scale(1.04)}50%{transform:rotate(0)scale(.96)}75%{transform:rotate(-20deg)scale(1.03)}to{transform:rotate(0)scale(1)}}@keyframes msgRotateCCW{0%{transform:rotate(0)scale(1)}25%{transform:rotate(-18deg)scale(.97)}50%{transform:rotate(0)scale(1.04)}75%{transform:rotate(18deg)scale(.97)}to{transform:rotate(0)scale(1)}}@keyframes msgPulse{0%,to{opacity:1;transform:scale(1)}25%{opacity:.85;transform:scale(1.06)}50%{opacity:1;transform:scale(.94)}75%{opacity:.9;transform:scale(1.04)}}