buttunクリック時にmodalで表示させたい

前提・実現したいこと

modal表示させたいものをFvの中央に表示させたい

発生している問題・エラーメッセージ

Fvがzoom-in & FadeInしているので、それと同時にmodal表示のものもfadeinしてしまう

試したこと

検索しましたが、現象にヒットしませんでした。
個人的な見解：position fixed;で場所固定し、かつbg-color: #000;でmodal表示時に
fvだけ動かせるようにしているにもかかわらず、なぜ動いてしまうのか、理解ができませんでした。
+@でshow,zoomはfvにしか適用させてないのですが、、疑問です。

該当のソースコード

HTML
1
2<!DOCTYPE html>
3<html lang="jp">
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title></title>
9    <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。">
10    <link rel="stylesheet" href="./css/destyle.css">
11    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
12    <!--flatpicker-->
13    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
15    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
16    <link rel="stylesheet" href="./css/style.css">
17
18</head>
19<body class="drawer drawer-right drawer-open" data-aos-easing="ease" data-aos-duration="2000" data-aos-delay="0">
20    <!-- <div class="nav-wrapper"> -->
21        <header class="header">
22            <div class="header-inner">
23                <div class="header-left">
24                    <h1 class="logo">
25                        <a href="#">
26                            <img class="header-logo" src="/img/top-header-logo.png" alt="">
27                        </a>
28                    </h1>
29
30                    <nav class="nav nav-open drawer-nav">
31                        <ul class="header-list">
32                            <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
33                            <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
34                            <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
35                        </ul><!-- /.header-list -->
36                    </nav><!-- /.nav -->
37
38                </div>
39                <div class="header-right">
40                    <div class="header-link " id="js-modal">
41                        <a class="calender-link js-modal-open" href="#">
42                            <!-- <img src="./img/calender.png" alt="カレンダー"> -->
43                            宿泊予約
44                        </a>
45                    </div><!-- /.header-link -->
46
47                    <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
48                        <span class="line"></span ><span class="line"></span><span class="line"></span>
49                    </button>
50                </div><!-- /.header-right -->
51            </div><!-- /.header-inner -->
52        </header><!-- /.header -->
53
54  <!--modal  -->
55        <div class="modal js-modal">
56            <div class="modal__bg js-modal-close"></div><!-- /.modal__bg -->
57            <div class="js-modal-content">
58                <hr class="bar">
59                <!-- modal-form -->
60                <form class="form" id="js-form" action="x">
61                    <div class="form-inner">
62                        <figure class="form_img" id="js-close-calender">
63                            <!-- <img src="./img/close@2x.png" alt="✖ボタン"> -->
64                        </figure><!-- /#js-close-calender -->
65                        <h2 class="form-ttl">宿泊予約</h2><!-- /.form-ttl --> 
66                        
67                        <ul class="form-list">
68                            <!--1-->
69                            <li class="form-item">
70                                <label for="name">お名前</label>
71                                <input type="text" name="name" class="form_txt" placeholder="例.石井花壇">
72                                </li><!-- /.form-item -->
73                                <!--2-->
74                            <li class="form-item">
75                                <label for="mail">メールアドレス</label>
76                                <input type="text" name="name" class="form_txt" placeholder="例.example@example.com">
77                            </li>
78                                <!--3-->
79                            <li class="form-item">
80                            <p class="form-plan">ご希望プラン(空いているプランのみ表示されます)</p><!-- /.form-plan -->
81                                <select class="select-plan" name="宿泊プラン">
82                                    <optgroup>
83                                        <option class="form_opption" value="hidden selected">プランを選択してください</option>
84                                        <option class="form_opption" value="1">➀【期間限定】海辺の四季旬彩、贅沢美味懐石プラン</option><!-- /.form_opption -->
85                                        <option class="form_opption" value="2">➁平日に優雅に楽しむ、特別宿泊プラン</option><!-- /.form_opption -->
86                                        <option class="form_opption" value="3">➂絶景貸切露天と個室会席を楽しむファミリープラン</option><!-- /.form_opption -->
87                                    </optgroup>
88                                </select><!-- /# -->
89                            </li><!-- /.form-item -->
90                            <!--4-->
91                            <li class="form-item">
92                                <label for="js-flatpickr">日時選択</label></li><!-- /.form-item -->
93                                <input id="js-flatpickr" type="text" name="name" placeholder="日時を選択してください">
94                                </li>
95                        </ul><!-- /.form-list -->
96                    </div><!-- /.form-inner -->
97                </form><!-- /.form -->
98                <div class="form-close">
99                    <a href="#">
100                        送信する
101                    </a>
102                </div><!-- /.form-close -->
103            </div><!-- /.modal-contents -->
104        </div><!-- /.modal -->
105
106 <section class="fv">
107        <ul id="slide_wrap">
108            <li class="slide_item"><img src="img/mainbg01.jpg" alt="1枚目"></li>
109            <li class="slide_item"><img src="img/mainbg02.jpg" alt="2枚目"></li>
110            <li class="slide_item"><img src="img/mainbg03.jpg" alt="3枚目"></li>
111        </ul>
112        <p class="fv-txt1">頑 張 る 人 の<br class="fv-txt2">頑 張 ら な い 時 間</p><!-- /.fv-txt -->
113    </section><!-- /.fv -->
114  <script src="js/jquery-3.6.0.min.js"></script>
115    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
116      <!-- 日本語の言語ファイル -->
117      <script>flatpickr("#flatpickr",{locale:"ja"});</script>
118      <script src="js/script.js"></script>
119</body>
120</html>
121

CSS
1
2.modal {
3  display: none;
4  height: 100%;
5  position: fixed;
6  top: 0;
7  left: 0;
8  width: 100%;
9}
10
11.js-modal {
12  /* display: block;
13    width: calc(550 /1920*100%);
14    height: calc(600/1080*100%);
15    background-color: #fff;
16    position: absolute;
17    top: 50%;
18    left: 50%;
19    margin-right: 20px;
20    border: 1px solid #707070;
21    transform: translate(-50%,-50%);
22    z-index: 100; */
23}
24
25.js-modal .modal__bg {
26  background: rgba(0, 0, 0, 0.6);
27  height: 100%;
28  position: absolute;
29  width: 100%;
30}
31
32.js-modal .js-modal-content {
33  background: #fff;
34  padding: 40px;
35  position: absolute;
36  top: 50%;
37  left: 50%;
38  -webkit-transform: translate(-50%, -50%);
39          transform: translate(-50%, -50%);
40  width: 60%;
41  position: relative;
42}
43
44@media screen and (max-width: 599px) {
45  .js-modal .js-modal-content {
46    width: 95%;
47    padding: 20px;
48  }
49}
50
51@media screen and (min-width: 1180px) {
52  .js-modal .js-modal-content {
53    width: 28%;
54    min-width: 550px;
55    padding: 20px 60px 90px 60px;
56  }
57}
58
59.form {
60  display: none;
61}
62
63.form-ttl {
64  margin: 20px 0 0 0;
65  border: 0;
66  border-top: 1px solid #E7E7E7;
67}
68
69@media screen and (max-width: 1100px) {
70  .form_img {
71    width: 18px;
72    height: 18px;
73  }
74}

FV
1
2.fv {
3  position: relative;
4  overflow: hidden;
5}
6
7.wrap {
8  padding: 16px;
9}
10
11#slide_wrap {
12  position: relative;
13  overflow: hidden;
14}
15
16#slide_wrap .slide_item {
17  opacity: 0;
18  -webkit-transform: scale(1);
19          transform: scale(1);
20  -webkit-transition: opacity 2s linear, -webkit-transform 7.5s linear;
21  transition: opacity 2s linear, -webkit-transform 7.5s linear;
22  transition: opacity 2s linear, transform 7.5s linear;
23  transition: opacity 2s linear, transform 7.5s linear, -webkit-transform 7.5s linear;
24  position: relative;
25}
26
27#slide_wrap .slide_item:not(:first-child) {
28  position: absolute;
29  top: 0;
30  left: 0;
31}
32
33@media screen and (min-width: 600px) and (max-width: 1179px) {
34  #slide_wrap .slide_item:not(:first-child) {
35    position: absolute;
36    top: 0;
37    left: 0;
38  }
39}
40
41#slide_wrap .slide_item.show {
42  opacity: 1;
43}
44
45#slide_wrap .slide_item.zoom {
46  -webkit-transform: scale(1.1);
47          transform: scale(1.1);
48}
49
50#slide_wrap .slide_item img {
51  display: block;
52}
53
54.fv-txt1 {
55  display: block;
56  position: absolute;
57  top: 26%;
58  left: 71%;
59  -webkit-writing-mode: vertical-rl;
60      -ms-writing-mode: tb-rl;
61          writing-mode: vertical-rl;
62  font-size: 3.4rem;
63  color: #fff;
64  padding-left: 51px;
65  line-height: 6rem;
66}

js
1//modal
2$(function () {
3  $('.js-modal-open').on('click', function () {
4   //$(".js-modal").toggleClass('_modal');
5    $('.js-modal').fadeIn();
6    return false;
7  });
8  $('.js-modal-close').on('click', function () {
9    $('.js-modal').fadeOut();
10    return false;
11  });
12});