<section id="section1" class="section-wrapper">
  <div class="bg-image-clip">
    <div class="bg-image-fixed"></div>
  </div>
  <div class="section-body">
    <h2>section 1</h2>
  </div>
</section>

<section id="section2" class="section-wrapper">
  <div class="bg-image-clip">
    <div class="bg-image-fixed"></div>
  </div>
  <div class="section-body">
    <h2>section 2</h2>
  </div>
</section>

<section id="section3" class="section-wrapper">
  <div class="bg-image-clip">
    <div class="bg-image-fixed"></div>
  </div>
  <div class="section-body">
    <h2>section 3</h2>
  </div>
</section>

.section-wrapper {
  position: relative;
  border-radius: 30px 30px 0px 0px;
}

.section-body {
  position: relative;
  padding-top: 80px;
  margin-top: 200px;
  width: 100%;
  height: 300px;
  text-align: center;
}

.bg-image-clip {
  position: absolute;
  top: -200px;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 230px;
  clip-path: inset(0); /* 切り抜き */
  z-index: -1;
}

.bg-image-fixed {
  position: fixed; /* 背景を固定 */
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

#section1 {
  background-color: #ffd3dd;

  .bg-image-fixed {
    background-image: url(https://fastly.picsum.photos/id/196/2048/1536.jpg?hmac=ms1QhP7El_5Dctsq98kJyzsT7-WqnGVNN-pwjAQ98x0);
  }
}

#section2 {
  background-color: #bed1e3;

  .bg-image-fixed {
    background-image: url(https://fastly.picsum.photos/id/185/3995/2662.jpg?hmac=gXqQYKLwRcZNsxrWGW6YosAXEIU6-D7UbytF_ApGmDs);
  }
}

#section3 {
  background-color: #92a1c3;

  .bg-image-fixed {
    background-image: url(https://fastly.picsum.photos/id/184/4288/2848.jpg?hmac=l0fKWzmWf6ISTPMEm1WjRdxn35sg6U3GwZLn5lvKhTI);
  }
}