画面幅にアジャストするアーチ要素の作り方

<div class="outer">
    <div class="inner">
        <div class="circle"></div>
        <div class="body">aaaa
            
        </div>
    </div>
</div>

.outer{
    width: 100%;
    padding: 95px 0 0 0;
    background-color: gray;
    overflow: hidden;

}
.inner{
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 500px;
    background-color: yellow;
}

.circle{
    position: absolute;
    top: -95px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    width: 10000px;
    height: 10000px;
    background-color: green;
    border-radius: 50%;
    opacity: .5;
}