カードの左右には影がつくが上下にはなぜかつかない。

Question

実現したいこと

カードの全方向に影をつけたいが、左右はつくが上と下にのみ影がつかない。
カードの高さの指定を除くと下にも影がついたが、高さは維持したい。

指定の条件は
.swiper-slide 　に　
width: 264px;
height: 331px;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
をつけることです。

　

これで見ていただくとわかりやすいかと思います。
saya-hands.conohawing.com/tateshina-goto-farm
ユーザー名、パスともにuser-111です。

前提

該当のソースコード

<section id="product" class="product _cream-bg">
                <div class="product-inner element">
                    <h2 class="section__ttl section__ttl_90">製品一覧</h2><!-- /.section__ttl -->

                    <!-- Slider main container -->
                    <div class="swiper">
                        <!-- Additional required wrapper -->
                        <div class="swiper-wrapper element">
                            <!-- Slides -->
                            <article class="swiper-slide element">
                                <figure><img src="img/brussels-sprouts.jpg" alt=""></figure>
                                <h3 class="swiper-slide__textbox-heading">
                                    標高1,000mオーバーの蓼科高原だからこその、あまあま芽キャベツ!! 1kg</h3>
                                <!-- /.swiper-slide__textbox-heading -->
                                <p class="swiper-slide__textbox-desk">￥ 4,200（税込）</p>
                                <!-- /.swiper-slide__textbox-desk -->

                            </article>
                            <article class="swiper-slide element">
                                <figure><img src="img/strawberries.jpg" alt=""></figure>

                                <h3 class="swiper-slide__textbox-heading">
                                    「あいまりん」「サマープリンセス」「サマーリリカル」「よつぼし」など詰め合わせ10パック</h3>
                                <!-- /.swiper-slide__textbox-heading -->
                                <p class="swiper-slide__textbox-desk">￥ 4,800（税込）</p>
                                <!-- /.swiper-slide__textbox-desk -->

                            </article>
                            <article class="swiper-slide element">
                                <figure><img src="img/grapes.jpg" alt=""></figure>

                                <h3 class="swiper-slide__textbox-heading">
                                    蓼科ごとう農園オリジナル品種の「シャインマスカット」と「ナガノパープル」500g</h3>
                                <!-- /.swiper-slide__textbox-heading -->
                                <p class="swiper-slide__textbox-desk">￥ 7,700（税込）</p>
                                <!-- /.swiper-slide__textbox-desk -->

                            </article>

                        </div>

                    </div><!-- /.swiper -->
                </div><!-- /.product-inner -->
            </section><!-- /.product -->

.product-inner {
    padding-bottom: 90px;
}

.swiper {

    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide {
    &:not(.swiper-slide-visible) {
        .slide {
            pointer-events: none;
            opacity: .3;
        }
    }
}

.swiper-slide {
    width: 264px;
    height: 331px;
    background: #fff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;

    figure {
        img {
            width: 264px;
            height: 166px;
            display: block;
            object-fit: cover;
            width: 100%;
        }
    }

}




.swiper-slide__textbox-heading {
    font-size: 16px;
    font-weight: 700;
    padding: 16px 16px 0 16px;
    line-height: 1.5;
}

.swiper-slide__textbox-desk {
    font-size: 16px;
    font-weight: 400;
    margin-top: auto;
    padding: 0 16px 16px 16px;

}

試したこと

ネットで調べましたが、よくわかりませんでした。
.swiper-slide__textbox-desk に影をつけようとしたけどうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[NKTIDKSG]

overflow: hidden;が原因では？

[spn]

コメントありがとうございます。
overflow: hidden;を消しても変化ないです。

[NKTIDKSG]

本当にすべてのoverflow: hidden;を外しましたか？
こちらもですよ？
.swiper {
overflow: hidden;
}

[spn]

ありがとうございます。
.swiperと.swiper-slideのoverflow: hidden;を消しましたが変化はありませんでした。
検証ツールを見ると、
swiper-bundle.min.cssの中のoverflow: hidden;が邪魔しているようです。こちらを消すと横スクロールが出るので消せない状況です。

Answer 1

swiper-bundle.min.cssの中のoverflow: hidden;が邪魔しているようです。こちらを消すと横スクロールが出るので消せない状況です。

であれば、消すのではなく初期値で上書きしましょう

.swiper {
    overflow: visible;
}

別解

.swiper {
    padding: 6px 0;
}

左右はつくが上と下にのみ影がつかない。

上に影がつかないのはbox-shadowの値の問題です。
こちらを参考に研究してみてください。

Comments

[spn]

ありがとうございます。
影がつきました。4日ほど悩んでいたのでとても嬉しいです。
本当にありがとうございます！！！