clip-pathで文字まで切り取られてしまう

Question

こちらのcharityのsectionに背景を設定しており、そちらを円形に切り取ったデザインにしたかったのでclip-pathを使用しました。しかし、そうすると背景をはみ出す文字が一緒に切り取られてしまい、見えなくなってしまいます。文字を切り取らずに表示させることは可能でしょうか？説明不足であれば追記いたします。ご回答よろしくお願いいたします。

<section id="charity">
　　<div class="charity-bg">
       <div class="charity-text">
       　　<h1 class="title">募金</h1>
       　　<div class="charity-discription">
          　　　<span>募金をお願い致します。</span>
           </div>
           <a href="charity.html" class="button-square">募金する</a>
       </div>
    </div>
</section>

#charity {
    background-image: url(../image/top/pc/charity.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 25%;
    -webkit-clip-path: ellipse(80% 100% at 50% 0);
    clip-path: ellipse(80% 40% at 50% 0);
    
    .title {
        font-size: 10vh;
    }
    
    span {
        font-size: 3vh;
    }
    
    a {
        all: initial;
    }
    
    .button-square {
        position: relative;
        display: block;
        width: 18rem;
        padding: 2rem 5%;
        margin: 2rem auto;
        font-size: 1.6rem;
        color: #ffffff;
        border: 1px #ffffff solid;
        background: #04141A;
        transition: .3s;
        text-align: center;
        border-radius: 10px;
        text-decoration: none;
    }
}

.charity-bg {
    background-color: rgb(255 255 255 / 35%);
    height: 100%;
    width:  100%;
}

.charity-text {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}

.charity-discription {
    margin-top: 5vh;
}

Answer 1

section タグに対して clip-path を当てていて、文字を含む要素が section タグの子要素になっているから切り取られてしまっているようです。
clip-path を適用して切り取った背景の要素と、文字の要素を兄弟要素にしましょう。そして position を当てて重ねればうまくいくと思います。