slickのスライダーを要素と要素の間に重ねたい

#slickのスライダーを要素と要素の間に重ねたい

slickでスライダーを作っています。
メインビジュアルとグレーの背景の上にスライダーを重ねようとしていますが、うまくいきません。

以下のようなイメージです。

slickの動作自体はうまくいったのですが、
背景画像の上に浮いているように配置することがうまくいきません。

##試したこと

デベロッパーツールを見る限り、
原因はslickのoverflow:hidden にあると推測し、以下の対応を行いました。

positionでスライダーを上に移動
slick-listのoverflow:hiddenをvisibleに変更

overflowを変更すると、背景の上に浮いたように配置はできたのですが、

slick の横幅が4100pxになってしまい、今度は横のレイアウトが崩れ、行き詰まってしまっています。

どなたかご存知の方はコメントいただけると助かります！

##コードです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<meta name="format-detection" content="telephone=no">
7<link rel="stylesheet" href="./css/init.css">
8<link rel="stylesheet" href="./css/pc.css">
9<link rel="stylesheet" href="./slick/slick-theme.css">
10<link rel="stylesheet" href="./slick/slick.css">
11<title>TEST</title>
12
13
14
15
16</head>
17
18
19<body>
20
21
22<!-- header -->
23<header class="header">
24  <div class="pickup">
25    <div class="wrap">
26      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
27    </div><!-- /wrap -->
28  </div><!--/pickup-->
29
30
31    <!--nav-area-->
32    <div class="nav-area">
33      <div class="wrap">
34        <h1 class="logo"><a href="#"><img src="./img/header-logo.png" alt=""></a></h1>
35
36
37        <nav>
38          <ul>
39            <li><a href="#">MENU</a></li>
40            <li><a href="#">MENU</a></li>
41            <li><a href="#">MENU</a></li>
42            <li><a href="#">MENU</a></li>
43            <li><a href="#">MENU</a></li>
44          </ul>
45        </nav>
46
47
48        <div class="lang">
49          
50          <a href="#" class="select">ja</a>
51          <a href="#" class="lang-btn">En</a>
52          <a href="#" class="lang-btn">Sp</a>
53          <a href="#" class="lang-btn">Cn</a>
54  
55        </div>
56        <!--/lang-->
57
58
59      </div><!-- /wrap -->
60    </div><!--/nav-area-->
61
62
63</header><!-- /header -->
64  
65  
66<div id="top">
67  <div class="mv">
68    <h1>テキストテキストテキストテキストテキスト</h1>
69    <p><img src="./img/mv-logo.png" alt=""></p>
70  </div>
71
72
73
74<div class="slide-wrap”>
75    <div class="slider">
76      <div class="slide"><img src="./img/hero-slide01.png" alt=""></div>
77      <div class="slide"><img src="./img/hero-slide02.png" alt=""></div>
78      <div class="slide"><img src="./img/hero-slide03.png" alt=""></div>
79      <div class="slide"><img src="./img/hero-slide04.png" alt=""></div>
80      <div class="slide"><img src="./img/hero-slide05.png" alt=""></div>
81
82    </div><!--/slider-->
83</div><!—-/slide-wrap—>
84
85</div><!--/top-->
86
87
88
89<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
90<script src="./slick/slick.min.js"></script>
91<script>
92window.addEventListener('load', function () {
93  $('.slider').slick({
94    autoplay: true,           //自動再生
95    swipeToSlide: true,       //ドラックorスワイプで1スライド
96    arrows: false,            //左右の矢印ボタン非表示
97    slidesToShow: 4,          //表示するスライド数
98    centerMode: true,         //中心に表示
99    dots: false,              //ドットインジケーターを非表示
100    centerPadding: '8%',      //見切れるスライドの幅
101    autoplaySpeed: 0,         //自動再生のスライド切り替えスピード
102    cssEase: 'linear',        //アニメーションの種類
103    speed: 30000,             //アニメーションの速度
104});
105
106
107});
108</script>
109
110
111<script src="./js/script.js"></script>
112
113
114</body>
115</html>
116

Sass
1// ベース色
2$cr-m: #ec635d;
3
4
5
6
7// 背景
8$cr-bg: #fff;
9$cr-bg-gray: #eee;
10$cr-bg-gray-more: #d6d6d6;
11
12
13// テキスト色
14$cr-txt: #000;
15
16
17
18
19
20
21
22
23/*----------------------------------
24  base
25----------------------------------*/
26
27
28
29
30body{
31  color:$cr-txt;
32  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
33  line-height:1.5;
34  min-width: 1400px;
35}
36
37
38.wrap{
39  width: 1400px;
40  margin: 0 auto;
41}
42
43
44
45
46/*----------------------------------
47  header
48----------------------------------*/
49
50
51.test {
52  padding:100px 20px;
53  .text{
54    font-style: 30px;
55    color:#333;
56
57
58  }
59}
60
61
62
63
64.header{
65  position:fixed;
66  width: 100%;
67  z-index:10;
68  
69  .pickup{
70    background-color: $cr-m;
71    p{
72      font-size:12px;
73      padding: 3px 0 4px 15px;
74      color:#fff;
75    }
76  }
77
78
79
80
81  .nav-area{
82    background-color: rgba(#000,.3);
83    height:auto;
84    padding:5px 0;
85    
86    .wrap{
87      display: flex;
88//      justify-content: center;
89
90
91      .logo{
92        margin-left:15px;
93        a{
94        font-size:20px;
95        letter-spacing:0;
96        text-decoration: none;
97                  
98        }
99      }
100      
101      nav{
102        display: flex;
103        align-items:center;
104        margin:0 40px 0 20px;
105  
106        ul{
107          display: flex;
108          align-items:center;
109  
110          li{
111            margin-right:25px;
112  
113            &:last-child{
114              margin-right:0;
115            }
116  
117            a{
118              text-decoration: none;
119              color:#fff;
120              font-size:16px;
121  
122              &:hover{
123                padding-bottom:5px;
124                border-bottom:1px solid #fff;
125              }
126            }
127          }
128        }
129      }
130  
131      .lang{
132        display: flex;
133        align-items:center;
134  
135        .select{
136          display: inline-block;
137          width: 80px;
138          height: 40px;
139          margin-right:8px;
140          border:2px solid #fff;
141          border-radius:20px;
142          text-decoration: none;
143          color:#fff;
144          line-height:2.5;
145          text-align: center;
146          font-size:14px;
147  
148
149
150        }
151        .lang-btn{
152          display: inline-block;
153          height: 40px;
154          width: 40px;
155          border:2px solid #fff;
156          border-radius:50%;
157          text-decoration: none;
158          color:#fff;
159          line-height:2.5;
160          text-align: center;
161          font-size:14px;
162          margin-right:8px;
163  
164          &:last-child{
165            margin-right:0;
166          }
167        }
168      }
169      
170    }
171
172
173  }
174}
175
176
177
178
179
180
181
182
183/*----------------------------------
184  main visual
185----------------------------------*/
186
187
188 #top{
189   width: 100%;
190 .mv{
191   background: url(../img/mv.png) ;
192   background-repeat:no-repeat;
193   background-position: center;
194   background-size:cover;
195   text-align: center;
196   height:600px;
197   width: 100%;
198   padding:10% 0;
199
200
201     h1{
202       margin-bottom:20px;
203       font-size:16px;
204       color:#fff;
205     }
206
207
208   }
209
210
211   .slide-wrap{
212    height:300px;
213    width: 100%;
214    background-color: #fff;
215
216
217    .slider{
218      
219      .slide{
220        position:relative;
221        top:-40px;
222        left:0;
223        z-index:999;
224      }
225    }
226   }
227
228
229
230
231}
232