ipadで閲覧時、Flexboxで要素が重なるエラーを解消したい

前提・実現したいこと

WordPressでホームページを作成しています。
chrome、edge、firefoxなどの検証ツールでのデバッグでは問題ありませんでしたが
実機で確認を行ったところ、Flexboxを設定した箇所で要素が重なるエラーが生じました。
通常は文字、ロゴ、文字となりますが、文字とロゴが重なってしまいます。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7  <meta name="format-detection" content="telephone=no,address=no,email=no">
8  <meta id="viewport" name="viewport" content="width=device-width">
9  <meta name="description" content="サイトの説明、概要">
10  <link rel="stylesheet" type="text/css" href="css/vendor.css">
11  <link rel="stylesheet" type="text/css" href="css/sanitize.css">
12  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">
13  <link rel="stylesheet" type="text/css" href="css/6-1-3.css">
14  <link rel="stylesheet" type="text/css" href="style.css">
15  <title></title>
16</head>
17
18<body>
19  <header id="header">
20    <div class="header">
21      <div class="full">
22        <div id="slider"></div>
23        <div class="inner">
24          <ul>
25            <li>
26              <ul class="drop-nav">
27                <li>
28                  <div class="header-logo">
29                    <h1><a href="index.html"><img src="img/header_logo.jpg" width="252" height="50" alt=""></a>
30                    </h1>
31                  </div>
32                </li>
33                <li>
34                  <div class="hamburger">
35                    <span></span>
36                    <span></span>
37                    <span></span>
38                  </div>
39                </li>
40              </ul>
41            </li>
42            <li>
43              <nav id="nav">
44                <div class="nav pc-block">
45                  <ul>
46                    <li></li>
47                  </ul>
48                </div>
49              </nav>
50            </li>
51          </ul>
52        </div>
53        <div class="catch-copy">
54          <ul>
55            <li>
56              <h2>より良いサービスと<br>統一的な品質管理</h2>
57            </li>
58            <li>
59              <figure>
60                <img src="img/top_logo.svg" width="196.6401" height="203.3197" alt="">
61              </figure>
62            </li>
63            <li>
64              <h2>生産者と消費者を<br>「安心」で結ぶ懸け橋</h2>
65            </li>
66          </ul>
67        </div>
68      </div>
69    </div>
70  </header>
71
72  <main id="main">
73  </main>
74
75  <footer id="footer">
76  </footer>
77
78  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
79    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
80  <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>
81  <script src="js/vendor.js"></script>
82  <script src="js/script.js"></script>
83  <script src="js/vegas.min.js"></script>
84  <script src="js/6-1-3.js"></script>
85  <script src="js/viewport.js"></script>
86</body>
87
88</html>

css
1/* vender.css */
2
3ol, ul {
4	list-style: none;
5}

css
1/* 6-1-3.css */
2
3@charset "utf-8";
4#slider {
5    width: 100%;
6    height: 100vh;
7}

css
1/* style.css */
2
3@charset "UTF-8";
4.center {
5  text-align: center;
6}
7.right {
8  text-align: right;
9}
10.justify {
11  text-align: justify;
12}
13html {
14  font-size: 62.5%;
15}
16body {
17  font-family: Noto Sans, Noto Sans CJK JP, sans-serif !important;
18  color: #333;
19  background: #fff;
20  font-size: 1.6rem;
21  line-height: 1.8;
22  text-align: justify;
23}
24@media only screen and (max-width: 767px) {
25  body {
26    font-size: 1.3rem;
27  }
28}
29body.is-fixed {
30  overflow: hidden;
31  width: 100%;
32}
33a {
34  text-decoration: none;
35  text-decoration-line: none;
36  outline: none;
37  color: #185096;
38}
39a:hover {
40  text-decoration: none;
41  opacity: 0.8;
42}
43main {
44  overflow: hidden;
45  display: block;
46}
47strong {
48  font-weight: 700;
49}
50div,
51article,
52aside,
53details,
54figcaption,
55figure,
56footer,
57header,
58hgroup,
59menu,
60nav,
61section {
62  box-sizing: border-box;
63}
64img {
65  vertical-align: middle;
66}
67img {
68  max-width: 100%;
69  height: auto;
70}
71.flex-gmap,
72.flex-video {
73  position: relative;
74  padding-bottom: 56.25%;
75  height: 0;
76  overflow: hidden;
77}
78.flex-gmap iframe,
79.flex-gmap object,
80.flex-gmap embed,
81.flex-video iframe,
82.flex-video object,
83.flex-video embed {
84  position: absolute;
85  top: 0;
86  left: 0;
87  width: 100% !important;
88  height: 100% !important;
89}
90header#header .full {
91  position: relative;
92  overflow: hidden;
93}
94header#header .full > .inner {
95  background-color: #fff;
96  position: absolute;
97  top: 0;
98  width: 100%;
99  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
100  transition: all 0.3s;
101}
102@media only screen and (max-width: 767px) {
103  header#header .full > .inner {
104    position: fixed;
105    z-index: 1;
106  }
107}
108header#header .full > .inner > ul {
109  max-width: 1280px;
110  display: flex;
111  align-items: center;
112  justify-content: space-between;
113  margin: auto;
114  min-height: 80px;
115}
116@media only screen and (max-width: 767px) {
117  header#header .full > .inner > ul {
118    width: 100%;
119  }
120}
121@media only screen and (max-width: 767px) {
122  header#header .full > .inner > ul > li > .drop-nav {
123    position: fixed;
124    width: 100%;
125    padding: 0 5%;
126    display: -webkit-box;
127    display: -ms-flexbox;
128    display: flex;
129    align-items: center;
130    justify-content: space-between;
131    transition: 0.3s;
132    top: 0;
133    left: 0;
134    z-index: 200;
135    background-color: #fff;
136    min-height: 80px;
137  }
138}
139@media only screen and (max-width: 767px) {
140  header#header
141    .full
142    > .inner
143    > ul
144    > li
145    > .drop-nav
146    > li
147    > .header-logo
148    > h1
149    > a
150    > img {
151    width: 184px;
152    height: 37px;
153  }
154}
155header#header .full .inner.fixed {
156  position: fixed;
157  z-index: 1;
158  transition: all 1s;
159}
160@media only screen and (max-width: 767px) {
161  header#header .full .inner.fixed > ul {
162    width: 100%;
163    padding: 0 5%;
164  }
165}
166header#header .full .catch-copy {
167  position: absolute;
168  left: 50%;
169  top: 14%;
170  transform: translate(-50%, 0);
171}
172@media only screen and (max-width: 767px) {
173  header#header .full .catch-copy {
174    left: 0;
175    transform: none;
176    width: 100%;
177  }
178}
179header#header .full .catch-copy ul {
180  display: flex;
181  justify-content: space-between;
182  align-items: flex-start;
183  max-width: 660px;
184  width: 100%;
185}
186@media only screen and (max-width: 767px) {
187  header#header .full .catch-copy ul {
188    justify-content: center;
189    flex-direction: column;
190    align-items: center;
191  }
192}
193header#header .full .catch-copy ul li {
194  width: 33.3%;
195}
196@media only screen and (max-width: 767px) {
197  header#header .full .catch-copy ul li {
198    width: 100%;
199    display: contents;
200  }
201}
202header#header .full .catch-copy ul li h2 {
203  color: #fff;
204  writing-mode: vertical-rl;
205  font-size: 4rem;
206  line-height: 2.5;
207  font-family: fot-tsukumin-pr6n, sans-serif;
208  letter-spacing: 0.1em;
209}
210@media only screen and (max-width: 767px) {
211  header#header .full .catch-copy ul li h2 {
212    writing-mode: unset;
213    font-size: 3rem;
214    text-align: center;
215  }
216}
217header#header .full .catch-copy ul li img {
218  padding-top: 80px;
219}
220@media only screen and (max-width: 767px) {
221  header#header .full .catch-copy ul li img {
222    width: 98px;
223    height: 101px;
224    padding: 0;
225  }
226}

scss
1$media-types: (default: 'print, screen and (min-width: 961px)',
2xxs: 'only screen and (max-width: 340px)',
3xs: 'only screen and (max-width: 480px)',
4sm: 'only screen and (max-width: 767px)',
5sm-md: 'only screen and (max-width: 960px)',
6md: 'only screen and (min-width: 768px) and (max-width: 960px)',
7md-lg: 'only screen and (min-width: 768px)',
8lg: 'print, screen and (min-width: 961px)',
9xl: 'print, screen and (min-width: 1367px)',
10retina: 'screen and (-webkit-min-device-pixel-ratio: 2)',
11print: 'print',
12
13sp: 'only screen and (max-width: 767px)',
14pc: 'print, screen and (min-width: 768px)'
15);
16
17$medias: pc,
18sp;

javascript
1$(function () {
2	var ua = navigator.userAgent;
3	if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
4
5		$('head').prepend('<meta name="viewport" content="width=device-width" />');
6	} else {
7
8		$('head').prepend('<meta name="viewport" content="width=1376" />');
9	}
10});

javascript
1/* 6-1-3.js */
2
3var windowwidth =
4  window.innerWidth || document.documentElement.clientWidth || 0;
5if (windowwidth > 768) {
6  var responsiveImage = [
7    { src: "./img/top_img01.jpg" },
8    { src: "./img/top_img02.jpg" },
9    { src: "./img/top_img03.jpg" },
10  ];
11} else {
12  var responsiveImage = [
13    { src: "./img/img_sp_01.jpg" },
14    { src: "./img/img_sp_02.jpg" },
15    { src: "./img/img_sp_03.jpg" },
16  ];
17}
18
19//Vegas全体の設定
20
21$("#slider").vegas({
22  overlay: true, 
23  transition: "blur", 
24  transitionDuration: 2000, 
25  delay: 10000, 
26  animationDuration: 20000, 
27  animation: "kenburns", 
28  slides: responsiveImage, 
29});

試したこと

子要素へ「width: 33.3%;」を追加しました。

補足情報（FW/ツールのバージョンなど）

JavaScriptでタブレット以上はPCと同じように表示されるようにしています。
・背景画像はh:1098px、w:1360pxです。ロゴ画像はh:203px、w:196pxです。
・問題が起きているのはsafariのモバイル用モードです。
・横持ち縦持ち共に同様の現象が起きています。
・OSのバージョンはiPadOS 14.0.81です。

・vendor.cssとsanitize.cssというリセットCSSを使用しています。
・vegasという画像がズームするプログラムを使っています。そのプログラムのCSSは「6-1-3.css」、JavaScriptは「6-1-3.js 」となります。