HTML,CSSの背景アニメーションで下に余白ができてしまう

目標制作物
こちら現在作成中の課題なのですが、ファースビューのアニメーションで下のセクションとの間に余白ができてしまいます。

以下今作成しているページです↓
現在の状況
アニメーションを固定幅で遷移させたいのですが、ご教授ください。

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
10    <link rel="stylesheet" href="css/reset.css">
11    <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> -->
12    <link rel="stylesheet" type="text/css" href="css/style.css">
13    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
14    <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的「和」の息づく空間で、至極のひとときをお過ごしください。">
15    <meta name="robots" content="noindex">
16    <link rel="preconnect" href="https://fonts.gstatic.com">
17    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
18    <link rel="icon" type="image/png" href="img/logo01.png" >
19    <title>石井花壇 | 温海温泉旅館【公式サイト】</title>
20  </head>
21  <body>
22    <div class="wrap">
23      <header class="header">
24        <div class="header-inner">
25          <div class="header-logo">
26            <h1><a href="#"><img src="img/top-header-logo.png" alt="石井花壇のロゴとサイト名"></a></h1>
27          </div>
28          <nav>
29            <ul id="page-link" class="header-nav">
30              <li class="header-nav-item"><a href="#">お部屋</a></li> 
31              <li class="header-nav-item"><a href="#">お料理</a></li> 
32              <li class="header-nav-item"><a href="#">温泉</a></li>
33              <li class="header-calender">
34                <a class="header-reservation" href="https://yossense.com/css-before-after/">
35                  <div class="header-reservation-inner">
36                    <img src="img/calender-icon.png" alt="カレンダーのロゴ画像">
37                    <span class="header-calendar-txt"></span>
38                  </div>
39                </a>
40              </li>
41            </ul>
42          </nav>
43        </div>
44      </header>
45      <main>
46        <section class="fv">
47          <div class="fv-ttl-box">
48           <h2 class="fv-ttl">
49              頑張る人の<br>
50              頑張らない時間
51            </h2>
52          </div>
53          <ul class="fv-img">
54            <li class="fv-img-item" style="background-image: url(img/mainbg01.jpg);"></li>
55            <li class="fv-img-item" style="background-image: url(img/mainbg02.jpg);"></li>
56            <li class="fv-img-item" style="background-image: url(img/mainbg03.jpg);"></li>
57          </ul>
58        </section>
59        <section class="main">
60          <div class="main-inner">
61            <h2 class="main-ttl">
62              <span class="main-ttl-shift">源海温泉の<br></span>
63              美しさに癒されて
64            </h2>
65            <p class="main-txt">
66              東北の奥座敷である温海温泉郷<br>
67              開湯は約1300年前とされ、役小角が<br>
68              発見したと伝えられます
69            </p>
70            <p class="main-txt">
71              石井花壇は江戸より続く由緒ある旅館で<br>
72              クラシックな作りの中に大正ロマンあふれる<br>
73              内装を残しております
74            </p>
75            <p class="main-txt">
76              圧倒的癒しの空間で<br>
77              頑張れる現代人に<br>
78              頑張らない圧倒的な非日常をご提供します
79            </p>
80            <p class="main-txt main-name">石井花壇</p>
81          </div>
82        </section>
83      </main>
84    </div>
85
86      
87    <!-- Optional JavaScript -->
88    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
89    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
90    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
91    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.0/swiper-bundle.min.js" integrity="sha512-VfcksjYXPZW36rsAGxeRGdB0Kp/htJF9jY5nlofHtRtswIB+scY9sbCJ5FdpdqceRRkpFfHZ3a9AHuoL4zjG5Q==" crossorigin="anonymous" defter></script>
92    <script src="main.js"></script>
93    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> -->
94  </body>
95</html>

Sass
1@charset "utf-8";
2
3$sp: 767px; // スマホ表示
4$tab: 1024px; //タブレット表示
5
6@mixin sp {
7    @media (max-width: ($sp)) {
8        @content;
9    }
10}
11
12@mixin tab {
13    @media (max-width: ($tab)) {
14        @content;
15    }
16}
17
18// 共通
19
20
21body {
22    font-family: “Times New Roman”, “游明朝”, “Yu Mincho”, “游明朝体”, “YuMincho”, 
23　　　　　　　　　　“ヒラギノ明朝 Pro W3”, “Hiragino Mincho Pro”, “HiraMinProN-W3”, “HGS明朝E”, 
24　　　　　　　　　　“ＭＳ Ｐ明朝”, “MS PMincho”, serif;
25    width: 100%;
26    color: #fff;
27    position: relative;
28}
29
30a {
31    color: #fff;
32    text-decoration: none;
33}
34
35img {
36    height: auto;
37    max-width: 100%;
38}
39
40li {
41    list-style: none;
42}
43
44.wrap {
45    overflow: hidden;
46}
47
48
49
50// ヘッダーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
51
52.header {
53    width: 100%;
54    // background-color: skyblue;
55
56    &-inner {
57        display: flex;
58        align-items: center;
59        height: 100%;
60        margin-left: auto;
61        margin-right: auto;
62        padding: 1.2rem;
63    }
64
65    &-logo {
66        align-items: center;
67        margin-right: 2rem;
68    }
69
70    nav {
71        width: 100%;
72    }
73
74    &-nav {
75        display: flex;
76        align-items: center;
77        width: 100%;
78
79        @include sp {
80            display: none;
81        }
82
83        &-item + &-item{
84            margin-left: 30px;
85        }
86    }
87
88    &-calender {
89        margin-left: auto;
90        width: 160px;
91        max-width: 100%;
92        background-color: #978F10;
93        display: inline-block;
94        border-radius: 3px;
95        cursor: pointer;
96    }
97
98    &-reservation-inner {
99        display: flex;
100        align-items: center;
101        padding: 0.8rem 1.2rem;
102    }
103}
104
105.header-calendar-txt {
106    margin-left: 1rem;
107    display: inline-block;
108    &::before{
109        content:"宿泊予約";
110    }
111}
112
113// ファーストビューーーーーーーーーーーーーーーーーーーーーーーーーーー
114
115
116
117.fv {
118    height:100vh;
119    &-ttl {
120        writing-mode: vertical-rl;
121        font-size: 34px;
122        line-height: 2.0;
123
124        &-box {
125            position: absolute;
126            top: 20%;
127            left: 65%;
128        }
129    }
130
131    &-img {
132        
133     &-item {
134    height: 100vh;
135    z-index: 10;
136    opacity: 0;
137    width: 100%;
138    position: absolute;
139    left: 0;
140    top: 0;
141    z-index: -999;
142    animation: anime 18s 0s infinite;
143    background-position: center;
144    background-repeat: no-repeat;
145    background-size: cover;
146
147    &:nth-of-type(2) {
148        animation-delay: 6s;
149    }
150
151    &:nth-of-type(3) {
152        animation-delay: 12s;
153  }
154
155}
156    }
157    
158}
159// アニメーション速度定義
160@keyframes anime {
161    0% {
162      opacity: 0;
163    }
164  
165    2% {
166      opacity: 1;
167    }
168  
169    33% {
170      opacity: 1;
171    }
172  
173    50% {
174      opacity: 0;
175      transform: scale(1.2);
176      z-index: 9;
177    }
178  
179    100% {
180      opacity: 0;
181    }
182  }
183
184//   メインコンテンツーーーーーーーーーーーーーーーーーーーーーーーーーーーー
185
186.main {
187    background-image: url(../img/bg.jpg);
188    color: #000;
189    width: 100%;
190
191    &-inner {
192        max-width: 1180px;
193        margin-left: auto;
194        margin-right: auto;
195        display: flex;
196        flex-direction: row-reverse;
197        justify-content: space-around;
198        padding-top: 150px;
199        padding-bottom: 100px;
200    }
201
202    &-ttl, &-txt {
203         writing-mode: vertical-rl;
204         letter-spacing: 0.8rem;
205         line-height: 1.8;
206    }
207
208    &-ttl {
209        font-size: 28px;
210
211        &-shift {
212            margin-top: -5.1rem;
213        }
214       
215    }
216
217    &-txt {
218        line-height: 2.1;
219        letter-spacing: 0.6rem;
220    }
221
222    &-name {
223        font-weight: bold;
224        font-size: 22px;
225        text-align: right;
226    }
227}

m.ts10806

2021/05/03 02:06

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 投稿前にプレビューで確認してください。

koki48

2021/05/03 02:14

失礼いたしました。ただいま修正いたしました。

Lhankor_Mhy

2021/05/08 04:44

当方の環境では問題が再現しませんでした。

koki48

2021/05/08 10:14

レスポンシブ等、画面幅を縮めた時です。

Lhankor_Mhy

2021/05/09 11:26

ご提示のコードと「現在の状況」の @keyframes anime が異なるようですが、どちらについて回答をすればいいですか？

Lhankor_Mhy

2021/05/11 06:09

ご返答いただけないようなので、「現在の状況」を基に回答しますね。

行動規範の内容に同意します

回答1件

「現在の状況」の @keyframes をご提示のコードに差し替えればいいかと思います。
ビルドやコンパイルを忘れているのではないですか？

css
1@keyframes anime {
2  0% {
3    opacity: 1;
4    background-size: 100%
5  }
6  2% {
7    opacity: 1;
8  }
9  33% {
10    opacity: 1;
11  }
12  50% {
13    opacity: 0;
14    background-size: 150%
15  }
16  100% {
17    opacity: 0;
18  }
19}

↓

css
1@keyframes anime {
2    0% {
3      opacity: 0;
4    }
5
6    2% {
7      opacity: 1;
8    }
9
10    33% {
11      opacity: 1;
12    }
13
14    50% {
15      opacity: 0;
16      transform: scale(1.2);
17      z-index: 9;
18    }
19
20    100% {
21      opacity: 0;
22    }
23  }