[css]モーダルの中のスクロールが効かない

モーダルコンテンツを表示したいのですが
その中のスクロールがうまく効いてくれません。
どうすればスクロールしてくれるでしょうか？

html
1 <div id="modal03" class="modal js-modal">
2      <div class="modal__bg js-modal-close"></div>
3      <div class="modal__content">
4          <a class="js-modal-close" href=""><img src="<?=$uri;?>/img/guide/close.svg" class="close" alt="clase"></a>
5          <h3 class="titleBorder">MONEY PLAN</h3>
6          <h4>資金計画</h4>
7          <img src="<?=$uri;?>/img/guide/modal-money.jpg" class="modal__content_image" alt="MONEY PLAN 資金計画">
8      </div>
9  </div>

scss
1.modal {
2    display: none;
3    height: 100vh;
4    position: fixed;
5    top: 0;
6    width: 100%;
7    z-index: 2000;
8    .modal__bg {
9        background: rgba(0,0,0,0.6);
10        height: 100vh;
11        position: absolute;
12        width: 100%;
13    }
14    .modal__content {
15        text-align: center;
16        background: #fff;
17        left: 50%;
18        padding: 68px 20px 60px;
19        position: absolute;
20        top: 50%;
21        transform: translate(-50%,-50%);
22        width: calc(100% - 40px);
23        overflow-y: scroll;
24        .close {
25            width: 30px;
26            height: 30px;
27            position: absolute;
28            top: 20px;
29            right: 20px;
30        }
31        h3 {
32            font-size: 20px;
33            font-family: 'EB Garamond', serif;
34            margin: 0 0 16px 0;
35        }
36        h4 {
37            font-size: 12px;
38            font-weight: bold;
39            margin: 0 0 36px 0;
40        }
41        .modal__content_image {
42            width: 100%;
43        }
44    }
45}
46@media screen and (min-width:768px) {
47    .modal {
48        .modal__content {
49            text-align: left;
50            width: calc(100% - 280px);
51            padding: 80px 80px 104px;
52            .close {
53                top: 40px;
54                right: 40px;
55            }
56            h3 {
57                font-size: 26px;
58                margin: 0 0 20px 0;
59            }
60            .titleBorder {
61                display: flex;
62                align-items: center;
63                justify-content: space-between;
64            }
65            .titleBorder:after {
66                border-top: 1px solid;
67                content: "";
68                flex-grow: 1;
69            }
70            .titleBorder:after {
71                margin: 0 0 0 1rem;
72            }
73            h4 {
74                font-size: 13px;
75                margin: 0 0 60px 0;
76            }
77            .modal__content_image {
78                width: 100%;
79                height: 300px;
80                object-fit: cover;
81            }
82        }
83    }
84}
85@media screen and (min-width:1024px) {
86    .modal {
87        .modal__content {
88            width: 1080px;
89        }
90    }
91}

js
1    $('.js-modal-open').each(function(){
2        $(this).on('click',function(){
3            var target = $(this).data('target');
4            var modal = document.getElementById(target);
5            $(modal).fadeIn();
6            return false;
7        });
8    });
9    $('.js-modal-close').on('click',function(){
10        $('.js-modal').fadeOut();
11        return false;
12    });