.waterdot{position:absolute;display:block;pointer-events:none;width:175px;height:175px;background-image:url('assets/waterdots.png');background-size:300% 100%;background-repeat:no-repeat;mix-blend-mode:multiply;z-index:0;opacity:.6}.waterdot.blue{background-position:0 50%}.waterdot.yellow{background-position:50% 50%}.waterdot.purple{background-position:100% 50%}.waterdot.left{left:-78px;top:16%}.waterdot.right{right:-75px;bottom:13%}.decorated{overflow:hidden;isolation:isolate}.decorated>.wrap{position:relative;z-index:1}.hero .waterdot.left{top:9%;width:160px;height:160px}.hero .waterdot.right{bottom:19%;width:185px;height:185px}#services .waterdot.left{top:47%}#services .waterdot.right{bottom:7%}#faq .waterdot.left{top:10%}#area .waterdot{width:235px;height:235px;opacity:.6}#area .waterdot.left{left:3%;top:10%}#area .waterdot.right{right:3%;bottom:9%}#area:after{content:"";position:absolute;right:16%;top:40px;width:55px;height:100px;background:url('assets/stars.svg') center/contain no-repeat;opacity:.85;pointer-events:none}#area .lead{margin-bottom:0}#area{padding-top:105px;padding-bottom:105px}
@media(max-width:700px){.waterdot{width:108px;height:108px;opacity:.45}.waterdot.left{left:-69px}.waterdot.right{right:-69px}.hero .waterdot.left{width:100px;height:100px;left:-67px;top:9%}.hero .waterdot.right{width:110px;height:110px;right:-75px;bottom:29%}#area{padding:72px 0}#area .waterdot{width:120px;height:120px;opacity:.48}#area .waterdot.left{left:-67px;top:8%}#area .waterdot.right{right:-67px;bottom:5%}#area:after{right:9px;top:15px;width:25px;height:55px}#area h2{font-size:28px}#area .lead{font-size:18px}}

/* 白地の画像をセクションの紙色になじませる */
#contact>.wrap{z-index:auto}
/* 広い画面では余白の中に水玉全体を収める */
@media(min-width:1200px){
.waterdot{width:116px;height:116px;opacity:.52}
.waterdot.left{left:max(12px,calc((100% - 1420px)/2));top:18%}
.waterdot.right{right:max(12px,calc((100% - 1420px)/2));bottom:14%}
.hero .waterdot.left{width:108px;height:108px;top:7%}
.hero .waterdot.right{width:120px;height:120px;bottom:22%}
#works .waterdot.left{top:12%}
#services .waterdot.left{top:39%}
#services .waterdot.right{bottom:13%}
#flow .waterdot.left{top:44%}
#faq .waterdot.left{top:17%}
#area .waterdot{width:210px;height:210px;opacity:.56}
#area .waterdot.left{left:max(30px,calc((100% - 1320px)/2));top:12%}
#area .waterdot.right{right:max(30px,calc((100% - 1320px)/2));bottom:11%}
#contact .waterdot.left{top:18%}
#contact .waterdot.right{bottom:17%}
}