画像にスポットライト（照明）が当たっているように見えるCSS

<div class="nya-spot_area">
<div class="nya-spot_inner">
<!-- 上からの照明 -->
<div class="nya-spotlight-top">
<img src="./spotlight-top.png" alt="上からの照明">
</div>
<!-- 画像・バナー（中間） -->
<img src="./img_banner.jpg" alt="バナー画像" class="nya-banner_img">
<!-- スポットライト -->
<div class="nya-spotlight-circle">
<img src="./spotlight-circle.png" alt="スポットライト">
</div>
</div>
</div>

.nya-spot_area {
position: relative;
width: 100%;
max-height: 100vh;
overflow: hidden;
text-align: center;
background-color: #000;
}

.nya-spot_area img {
display: block;
max-width: 100%;
height: auto;
}

.nya-spotlight-top {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) scale(0.9);
width: 1070px;
opacity: 0;
z-index: 100;
animation: nya-spotlightFade 3s ease-in-out infinite alternate;
}

.nya-banner_img {
position: relative;
z-index: 50;
top: 20px; /* 画像の位置調整 */
display: block;
margin: 0 auto;
}

.nya-spotlight-circle {
position: absolute;
top: 0px; /* 画像のtopに合わせて調整 */
left: 50%;
transform: translateX(-50%) scale(1.2);
width: 842px;
opacity: 0;
z-index: 10;
animation: nya-spotlight2Fade 3s ease-in-out infinite alternate;
pointer-events: none;
}

@media (max-width: 768px) {
.nya-banner_img {
margin-top: 0;
width: 70%; /* スマホでの表示調整 */
}
.nya-spotlight-top,
.nya-spotlight-circle {
width: 100%;
}
.nya-spotlight-circle {
top: 20px; /* スマホでのずれ調整 */
}
}

@keyframes nya-spotlightFade {
0% {
opacity: 0;
transform: translateX(-50%) scale(0.9);
}
100% {
opacity: 1;
transform: translateX(-50%) scale(1);
}
}

@keyframes nya-spotlight2Fade {
0% {
opacity: 0;
transform: translateX(-50%) scale(1.2);
}
100% {
opacity: 1;
transform: translateX(-50%) scale(1);
}
}