デバイスごとにresponsiveさせたい

前提・実現したいこと

表題の通り、、デバイスごとにレスポンシブさせたいです。

2.display: table;にすると、footerがmainの一部でかぶったりしてしまいます

2枚目のようにしたいです
（display: table;にした形です）

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

エラーメッセージ

試したこと

1body,mainにwidth:100vw,100%を設定しても反応しなかったです。
2bodyにdisplay: table;とwidth: 100%;にするとデバイスごとにレスポンシブ対応できます。

該当のソースコード

HTML
1!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>石井花壇|温海温泉旅館【公式サイト】</title>
8    <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。">
9    <link rel="stylesheet" href="./css/destyle.css">
10    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11    <!--flatpicker-->
12    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
13    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
15    <link rel="stylesheet" href="./css/style.css">  
16</head>
17<body>
18 <section class="fv">
19        <ul id="slide_wrap">
20            <li class="slide_item"><img src="img/mainbg01.jpg" alt="1枚目"></li>
21            <li class="slide_item"><img src="img/mainbg02.jpg" alt="2枚目"></li>
22            <li class="slide_item"><img src="img/mainbg03.jpg" alt="3枚目"></li>
23        </ul>
24        <p class="fv-txt1">頑 張 る 人 の<br class="fv-txt2">頑 張 ら な い 時 間</p><!-- /.fv-txt -->
25    </section><!-- /.fv -->
26
27    <main class="main">
28        <section class="history">
29            <div class="inner hs-theme">
30                <div class="hs-flex">
31                    <h2><span class="class="hs-ttl">温 海 温 泉 の</span> <br class="hs-ttl2"> 美 し さ に 癒 や さ れ て</h2><!-- /.hs-ttl -->
32                    <ul class="hs-list aos-init aos-animate" data-aos="fade-up">
33                        <li class="hs-item">東 北 の 奥 座 敷 で あ る 温 海 温 泉 郷 <br class="middle-line"> 開 湯 は 約 <span class="num">1</span> <span class="num">3</span><span class="num">0</span><span class="num">0</span> 年 前 と さ れ 、 役 小 角が <br> 発 見 し た と 伝 え ら れ ま す</li><!-- /.hs-item -->
34                        <li class="hs-item">石 井 花 壇 は 江 戸 よ り 続 く 由 緒 あ る 旅 館で <br class="middle-line"> ク ラ シ ッ ク な 作 り の 中 に 大 正 ロ マ ン あ ふ れる <br> 内 装 を 残 し て お り ま す</li><!-- /.hs-item -->
35                        <li class="hs-item">圧 倒 的 癒 や し の 空 間 で <br class="middle-line"> 頑 張 る 現 代 人 に <br> 頑 張 ら な い 圧 倒 的 な 非 日 常 を ご 提 供 し ま す</li><!-- /.hs-item -->
36                    </ul><!-- /.hs-list -->
37                </div><!-- /.hs-flex -->
38                <p class="shop-name">石 井 花 壇</p><!-- /.shop-name  -->
39            </div><!-- /.inner -->
40        </section><!-- /.history -->
41</main>
42
43 <script src="js/jquery-3.6.0.min.js"></script>
44    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
45      <!-- 日本語の言語ファイル -->
46      <script>flatpickr("#flatpickr",{locale:"ja"});</script>
47      <script src="js/script.js"></script>
48</body>
49</html>

//※一部のみ載せています

css
1@charset "UTF-8";
2html {
3  font-size: 62.5%;
4}
5
6body {
7  font-size: 1.6rem;
8  color: #000000;
9}
10
11img {
12  width: 100%;
13  height: auto;
14  vertical-align: bottom;
15}
16
17a {
18  text-decoration: none;
19}
20
21li {
22  list-style: none;
23}
24
25@media screen and (min-width: 600px) and (max-width: 1179px) {
26  section {
27    margin-top: 60px;
28  }
29}
30
31@media screen and (max-width: 599px) {
32  section {
33    margin-top: 60px;
34  }
35}
36
37.inner {
38  max-width: 1180px;
39  margin: 0 auto;
40  -webkit-box-sizing: border-box;
41  box-sizing: border-box;
42}
43
44@media screen and (min-width: 600px) and (max-width: 1179px) {
45  .inner {
46    padding: 0 25px;
47  }
48}
49
50@media screen and (max-width: 599px) {
51  .inner {
52    padding: 0 15px;
53  }
54}
55
56.wrapper {
57  width: 100%;
58  margin: 0 auto;
59  -webkit-box-sizing: content-box;
60  box-sizing: content-box;
61}
62
63@media screen and (min-width: 600px) and (max-width: 1179px) {
64  .wrapper {
65    padding: 0px 20px;
66  }
67}
68
69@media screen and (max-width: 599px) {
70  .wrapper {
71    padding: 0 20px;
72  }
73}
74
75.sec-theme {
76  margin: 0 auto;
77}
78
79.sec-theme > img {
80  display: block;
81  width: 3.3%;
82  height: 5.1%;
83  margin: 0 auto;
84  padding-top: 60px;
85  padding-bottom: 20px;
86}
87
88.sec-theme .cmn-ttl {
89  display: block;
90  font-size: 3.6rem;
91  color: #000000;
92  text-align: center;
93  margin: 0 auto;
94}
95
96.cmn-link {
97  background-color: #ffffff;
98  width: 40%;
99  height: calc(54px/545px*100%);
100  border: 1px solid #707070;
101  font-size: 1.6rem;
102  text-align: center;
103}
104
105@media screen and (min-width: 600px) and (max-width: 1179px) {
106  .cmn-link {
107    margin-top: 50px;
108    margin: 0 auto;
109  }
110}
111
112@media screen and (max-width: 599px) {
113  .cmn-link {
114    margin-top: 35px;
115  }
116}

main
1.fv {
2  position: relative;
3  overflow: hidden;
4}
5
6.wrap {
7  padding: 16px;
8}
9
10#slide_wrap {
11  position: relative;
12  overflow: hidden;
13}
14
15#slide_wrap .slide_item {
16  opacity: 0;
17  -webkit-transform: scale(1);
18          transform: scale(1);
19  -webkit-transition: opacity 2s linear, -webkit-transform 7.5s linear;
20  transition: opacity 2s linear, -webkit-transform 7.5s linear;
21  transition: opacity 2s linear, transform 7.5s linear;
22  transition: opacity 2s linear, transform 7.5s linear, -webkit-transform 7.5s linear;
23  position: relative;
24}
25
26#slide_wrap .slide_item:not(:first-child) {
27  position: absolute;
28  top: 0;
29  left: 0;
30}
31
32#slide_wrap .slide_item.show {
33  opacity: 1;
34}
35
36#slide_wrap .slide_item.zoom {
37  -webkit-transform: scale(1.1);
38          transform: scale(1.1);
39}
40
41#slide_wrap .slide_item img {
42  display: block;
43}
44
45.fv-txt1 {
46  display: block;
47  position: absolute;
48  top: 26%;
49  left: 71%;
50  -webkit-writing-mode: vertical-rl;
51      -ms-writing-mode: tb-rl;
52          writing-mode: vertical-rl;
53  font-size: 3.4rem;
54  color: #fff;
55  padding-left: 51px;
56  line-height: 6rem;
57}
58
59.history {
60  background-image: url(../../img/bg-japanese-paper.png);
61  background-position: center;
62  background-repeat: no-repeat;
63  background-size: cover;
64  max-height: 680px;
65}
66
67.history .hs-theme {
68  -webkit-box-pack: justify;
69  -webkit-justify-content: space-between;
70      -ms-flex-pack: justify;
71          justify-content: space-between;
72}
73
74.history .hs-flex {
75  display: -webkit-box;
76  display: -webkit-flex;
77  display: -ms-flexbox;
78  display: flex;
79  -webkit-box-orient: horizontal;
80  -webkit-box-direction: reverse;
81  -webkit-flex-direction: row-reverse;
82      -ms-flex-direction: row-reverse;
83          flex-direction: row-reverse;
84  -webkit-justify-content: space-around;
85      -ms-flex-pack: distribute;
86          justify-content: space-around;
87  -webkit-box-align: center;
88  -webkit-align-items: center;
89      -ms-flex-align: center;
90          align-items: center;
91  margin: 0 auto;
92}
93
94.history .hs-flex h2 {
95  -webkit-writing-mode: vertical-rl;
96      -ms-writing-mode: tb-rl;
97          writing-mode: vertical-rl;
98  font-size: 2.8rem;
99}
100
101@media screen and (max-width: 992px) {
102  .history .hs-flex h2 {
103    padding-top: 60px;
104  }
105}
106
107@media screen and (max-width: 599px) {
108  .history .hs-flex h2 {
109    font-size: 1.6rem;
110  }
111}
112
113.history .hs-flex h2 .hs-ttl {
114  display: block;
115  padding-top: 64px;
116  padding-right: 100px;
117  padding-left: 33px;
118  /*  text-indent: -3.2em;
119                letter-spacing: .5em; */
120  padding-top: -80px;
121}
122
123@media screen and (min-width: 600px) and (max-width: 1179px) {
124  .history .hs-flex h2 .hs-ttl br {
125    line-height: 2.1786;
126    padding-right: 0;
127  }
128}
129
130.history .hs-flex h2 .hs-ttl2 {
131  display: inline-block;
132  padding-top: 100px;
133  padding-right: 33px;
134}
135
136@media screen and (max-width: 992px) {
137  .history .hs-flex h2 .hs-ttl2 {
138    display: none;
139  }
140}
141
142.history .hs-flex .hs-list {
143  display: block;
144  -webkit-box-pack: justify;
145  -webkit-justify-content: space-between;
146      -ms-flex-pack: justify;
147          justify-content: space-between;
148  -webkit-writing-mode: vertical-rl;
149          writing-mode: vertical-rl;
150  -ms-writing-mode: tb-rl;
151}
152
153.history .hs-flex .hs-list .hs-item {
154  display: block;
155  -webkit-writing-mode: vertical-rl;
156      -ms-writing-mode: tb-rl;
157          writing-mode: vertical-rl;
158  line-height: 2.2;
159  -webkit-box-pack: justify;
160  -webkit-justify-content: space-between;
161      -ms-flex-pack: justify;
162          justify-content: space-between;
163  padding-top: 100px;
164  padding-right: 103px;
165  font-size: 1.8rem;
166}
167
168@media screen and (min-width: 600px) and (max-width: 1179px) {
169  .history .hs-flex .hs-list .hs-item {
170    font-size: 1.6rem;
171    padding: 0 40px;
172  }
173}
174
175@media screen and (max-width: 599px) {
176  .history .hs-flex .hs-list .hs-item {
177    font-size: 1.4rem;
178    padding: 30px 20px;
179  }
180}
181
182.history .hs-flex .hs-list .hs-item .middle-line {
183  display: block;
184}
185
186.history .hs-flex .hs-list .hs-item .num {
187  -webkit-writing-mode: vertical-rl;
188      -ms-writing-mode: tb-rl;
189          writing-mode: vertical-rl;
190  text-combine-upright: all;
191}
192
193.history .hs-flex .shop-name {
194  display: block;
195  -webkit-writing-mode: vertical-rl;
196          writing-mode: vertical-rl;
197  -ms-writing-mode: tb-rl;
198  padding-right: 50px;
199  padding-bottom: 0px;
200}
201
202@media screen and (min-width: 600px) and (max-width: 1179px) {
203  .history .hs-flex .shop-name {
204    display: block;
205    -webkit-writing-mode: vertical-rl;
206        -ms-writing-mode: tb-rl;
207            writing-mode: vertical-rl;
208  }
209}

tetosept

2021/10/13 13:15

ソースのどこの部分がfooterでどこの部分がmainなのかわからないのでご教示いただけますでしょうか

free_teku

2021/10/13 14:12

footerはなくて、申し訳ないです、今、記述しました。ご回答いただけると幸いです。

free_teku

2021/10/13 14:19

<footer class="footer"> <div class="wrapper"> <nav> <ul class="footer-list"> <li class="footer-item"><a href="#">お部屋</a></li> <li class="footer-item"><a href="#">お料理</a></li> <li class="footer-item"><a href="#">温泉</a></li> </ul> </nav> <div class="footer-logo"> <img src="./img/footer-logo.png" alt="フッターロゴ"> </div> <div class="footer-access"> <p> 〒000-0000</p> <p>山形県鶴岡市xxxxxxxxxx</p> </div> <div class="footer-tel"> <p>TEL.000-0000-0000</p> <p>FAX.00-0000-0000</p> </div> </div> <div class="footer-bg"> Copyright © 石井花壇 All Rights Reserved. </div> </footer>

free_teku

2021/10/13 14:19

```footer .footer { background-image: url(../../img/bg3.png); background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 522px; } nav .footer-list { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin: 0 auto; } nav .footer-list .footer-item { padding-top: 64px; padding-bottom: 95px; } nav .footer-list .footer-item:nth-of-type(2) a { display: block; padding-right: 34px; padding-left: 34px; } .footer-logo { width: calc(245/1920*100%); height: calc(92/522*100%); margin: 0 auto; } .footer-access { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 72px; } .footer-access > p:nth-last-child(1) { padding-left: 21px; } .footer-tel { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 23px; padding-bottom: 61px; } .footer-tel > p:nth-last-child(1) { padding-left: 20px; } .footer-bg { background-color: #000; max-height: calc(60/522*100%); font-size: 1.2rem; color: #fff; text-align: center; } ```

free_teku

2021/10/13 14:20

どちらか片方でも、字数制限により記載ができませんでした。コピペができない状況となり申し訳ないですが何卒よろしくお願いいたします。