grid使うと、画像が消え、重ねることができない

前提・実現したいこと

表題の通り、txtとimgを重ね合わせたいです
しかし、一部のliではできても、ほかのliではできません。

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

div toolを使い、原因を調査しました。display: grid;が反応しないことが原因でした。

試したこと

typoチェックしました。(連鎖で作っているため、完成しているliのCSSと比較しました。)

該当のソースコード

HTML
1<!-- 2 -->
2<!DOCTYPE html>
3<html>
4<head>
5	<title></title>
6</head>
7<body>
8	<ul>
9		<li class="room-item"></li>
10	</ul>
11	<div class="room-item-img room-item-right-sec aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"><img alt="お部屋1" src="../Room/img/oheya02.jpg"></div>
12	<div class="room-item-txt room-item-left-sec aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
13		<div class="jp-text">
14			<h2 class="ttl">庭園付き客室</h2><!-- /.ttl -->
15			<p class="desc1">庭園付きの客室になります。<br class="space">
16			お庭を見ながら、ほっとするひとときをお過ごしください。</p>
17			<p class="desc2">＊お庭は複数のお客様と囲む形になります。<br class="space">
18			＊部屋数に限りがあります。<br class="space">
19			＊ご希望の方は「お抹茶/500円」をルームサービスさせていただきます。</p>
20		</div><!-- /.jp-text -->
21	</div><!-- /.room-item-right -->
22	<ul>
23		<!-- /.room-item -->
24		<!-- 3 -->
25		<li class="room-item"></li>
26	</ul>
27	<div class="room-item-img room-item-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"><img alt="お部屋3" src="../Room/img/oheya03.jpg"></div><!-- /.room-item-img -->
28	<div class="room-item-txt room-item-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
29		<div class="jp-text">
30			<h2 class="ttl">一般客室</h2><!-- /.ttl -->
31			<p class="desc1">最もベーシックな客室になります。<br class="sp-space">
32			伝統の中にモダンさを取り入れた<br class="space">
33			内装となっており、とても過ごしやすくしていただけます。</p>
34			<p class="desc2">＊全室お部屋より日本海を望むことができます。</p>
35		</div><!-- /.jp-text -->
36	</div><!-- /.room-item-txt-right -->
37	<ul>
38		<!-- /.room-item -->
39	</ul><!-- /.room-list -->
40	<!-- /.contents-inner -->
41	<!-- /.room-contents -->
42</body>
43</html>

CSS
1
2.room-list {
3  -webkit-box-pack: justify;
4  -webkit-justify-content: space-between;
5      -ms-flex-pack: justify;
6          justify-content: space-between;
7  margin-top: 80px;
8}
9
10@media screen and (min-width: 600px) and (max-width: 1179px) {
11  .room-list {
12    margin: 0px 20px;
13  }
14}
15
16@media screen and (max-width: 599px) {
17  .room-list {
18    display: -webkit-box;
19    display: -webkit-flex;
20    display: -ms-flexbox;
21    display: flex;
22    -webkit-box-orient: vertical;
23    -webkit-box-direction: normal;
24    -webkit-flex-direction: column;
25        -ms-flex-direction: column;
26            flex-direction: column;
27    -webkit-box-align: center;
28    -webkit-align-items: center;
29        -ms-flex-align: center;
30            align-items: center;
31  }
32}
33
34.room-item {
35  width: 100%;
36  display: -ms-grid;
37  display: grid;
38  -ms-grid-rows: 57px 216px 165px;
39  -ms-grid-columns: 367px 158px 655px;
40      grid-template: 57px 216px 165px/ 367px 158px 655px;
41}
42
43.room-item:nth-of-type(2) {
44  margin: 84px auto;
45  display: -ms-grid;
46  display: grid;
47  -ms-grid-rows: 57px 243px 138px;
48  -ms-grid-columns: 654px 159px 430px;
49      grid-template: 57px 243px 138px/ 654px 159px 430px;
50}
51
52@media screen and (min-width: 600px) and (max-width: 1179px) {
53  .room-item:nth-of-type(2) {
54    display: -webkit-box;
55    display: -webkit-flex;
56    display: -ms-flexbox;
57    display: flex;
58    -webkit-box-orient: vertical;
59    -webkit-box-direction: normal;
60    -webkit-flex-direction: column;
61        -ms-flex-direction: column;
62            flex-direction: column;
63  }
64}
65
66@media screen and (max-width: 599px) {
67  .room-item:nth-of-type(2) {
68    display: block;
69    position: relative;
70  }
71}
72
73@media screen and (min-width: 600px) and (max-width: 1179px) {
74  .room-item {
75    display: -webkit-box;
76    display: -webkit-flex;
77    display: -ms-flexbox;
78    display: flex;
79    -webkit-box-orient: vertical;
80    -webkit-box-direction: normal;
81    -webkit-flex-direction: column;
82        -ms-flex-direction: column;
83            flex-direction: column;
84  }
85}
86
87@media screen and (max-width: 599px) {
88  .room-item {
89    display: -ms-grid;
90    display: grid;
91  }
92}
93
94.room-item:nth-of-type(3) {
95  margin-bottom: 150px;
96}
97
98.room-item-right {
99  grid-area: right;
100  -ms-grid-column: 2;
101  -ms-grid-column-span: 3;
102  grid-column: 2 / 5;
103  -ms-grid-row: 2;
104  -ms-grid-row-span: 2;
105  grid-row: 2 / 4;
106  padding-left: 150px;
107  /* 左余白 */
108}
109
110@media screen and (min-width: 600px) and (max-width: 1179px) {
111  .room-item-right {
112    padding-left: 0px;
113    margin: 0 auto;
114    text-align: center;
115    width: 100%;
116  }
117}
118
119@media screen and (max-width: 599px) {
120  .room-item-right {
121    -ms-grid-column: 1;
122    -ms-grid-column-span: 3;
123    grid-column: 1 / 4;
124    -ms-grid-row: 2;
125    -ms-grid-row-span: 2;
126    grid-row: 2 / 4;
127    padding-left: 0px;
128  }
129}
130
131.room-item-right-sec {
132  grid-area: right;
133  -ms-grid-column: 2;
134  -ms-grid-column-span: 3;
135  grid-column: 2 / 5;
136  -ms-grid-row: 1;
137  -ms-grid-row-span: 2;
138  grid-row: 1 / 3;
139  z-index: 9;
140}
141
142@media screen and (max-width: 599px) {
143  .room-item-right-sec {
144    z-index: -4;
145    top: 50%;
146    left: 50%;
147    -webkit-transform: translate(-50%, -50%);
148            transform: translate(-50%, -50%);
149  }
150}
151
152@media screen and (max-width: 599px) {
153  .room-item-right {
154    padding-left: 0px;
155  }
156}
157
158.room-item-left {
159  grid-area: left;
160  -ms-grid-column: 1;
161  -ms-grid-column-span: 2;
162  grid-column: 1 / 3;
163  -ms-grid-row: 1;
164  -ms-grid-row-span: 2;
165  grid-row: 1/3;
166  z-index: 9;
167}
168
169@media screen and (max-width: 599px) {
170  .room-item-left {
171    z-index: -4;
172    top: 50%;
173    left: 50%;
174    -webkit-transform: translate(-50%, -50%);
175            transform: translate(-50%, -50%);
176  }
177}
178
179.room-item-left-sec {
180  grid-area: left;
181  -ms-grid-column: 1;
182  -ms-grid-column-span: 2;
183  grid-column: 1 / 3;
184  -ms-grid-row: 2;
185  -ms-grid-row-span: 2;
186  grid-row: 2 / 4;
187  z-index: -1;
188}
189
190@media screen and (min-width: 600px) and (max-width: 1179px) {
191  .room-item-left-sec {
192    padding-left: 0px;
193    margin: 0 auto;
194    text-align: center;
195    width: 100%;
196  }
197}
198
199@media screen and (max-width: 599px) {
200  .room-item-left-sec {
201    padding-left: 0px;
202  }
203}
204
205.room-item-img {
206  width: 90%;
207  /* 画像サイズ指定 */
208}
209
210@media screen and (min-width: 600px) and (max-width: 1179px) {
211  .room-item-img {
212    width: 100%;
213  }
214}
215
216@media screen and (max-width: 599px) {
217  .room-item-img > img {
218    opacity: .7;
219    display: block;
220    widows: 100vw;
221  }
222}
223
224.room-item-txt {
225  background-image: url(../../../img/bg.png);
226  background-position: center;
227  background-size: cover;
228  z-index: 5;
229  -webkit-box-flex: 1;
230  -webkit-flex: 1;
231      -ms-flex: 1;
232          flex: 1;
233}
234
235@media screen and (max-width: 599px) {
236  .room-item-txt {
237    padding-left: 20px;
238    background-image: none;
239  }
240}
241
242.room-item-txt .jp-text {
243  padding-left: 52px;
244  /*  grid-area: right;
245                grid-column: 3/4;
246                grid-row: 2/3; */
247}
248
249@media screen and (max-width: 599px) {
250  .room-item-txt .jp-text {
251    padding-left: 0px;
252    font-weight: bold;
253  }
254}
255
256.room-item-txt .jp-text .ttl {
257  font-size: 2.4rem;
258  padding-top: 60px;
259}
260
261@media screen and (max-width: 599px) {
262  .room-item-txt .jp-text .ttl {
263    font-size: 2.0rem;
264  }
265}
266
267.room-item-txt .jp-text .desc1, .room-item-txt .jp-text .desc2 {
268  line-height: 1.5;
269  padding-top: 52px;
270  padding-bottom: 52px;
271}
272
273@media screen and (max-width: 599px) {
274  .room-item-txt .jp-text .desc1, .room-item-txt .jp-text .desc2 {
275    line-height: 1.0;
276    font-size: 1.4rem;
277    font-weight: lighter;
278    padding-top: 22px;
279    padding-bottom: 22px;
280  }
281}
282
283.room-item-txt .jp-text .desc1 .sp-space, .room-item-txt .jp-text .desc2 .sp-space {
284  display: none;
285}
286
287@media screen and (min-width: 600px) and (max-width: 1179px) {
288  .room-item-txt .jp-text .desc1 .sp-space, .room-item-txt .jp-text .desc2 .sp-space {
289    display: none;
290  }
291}
292
293@media screen and (max-width: 599px) {
294  .room-item-txt .jp-text .desc1 .sp-space, .room-item-txt .jp-text .desc2 .sp-space {
295    display: block;
296  }
297}
298
299.room-item-txt .jp-text .desc2 > span {
300  white-space: nowrap;
301}
302
303@media screen and (min-width: 600px) and (max-width: 1179px) {
304  .room-item-txt .jp-text .desc2 {
305    padding-bottom: 20px;
306  }
307}