flexを解除したい

メディアクエリでflexを解除したいのですが、解除する前は一番初めは表示されない。２つ目は画像が潰れている。3つ目は画像が文字側にはみ出して文字を隠してしまう。
試した事　display:blockを適用、変更されず。flex-direction: column適用、変更されず。fiexが解除されず縦並びにできません。ご助言お願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="description" content="#">
6<link href="css/reset.css" rel="stylesheet" type="text/css" madia="screen">
7<link href="css/style.css" rel="stylesheet" type="text/css" madia="screen">
8<link href="css/topindex.css" rel="stylesheet" type="text/css" madia="screen">
9<link rel="shortcut icon" href="/favicon.ico">
10<meta name="viewport" content="width=device-width,initial-scale=1.0">
11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
12<title>****┃******</title>
13</head>
14<body>
15	<div class="wrapper01">
16	<header>
17		<!-- header-->
18		<div class="headline">
19		<a href="./"><img src="images/rogo.svg" alt="コーポレートマーク"></a>
20		<p class="syamei">****</p>
21		</div>
22		<nav class="main-nav">
23		<ul class="nav-list">
24			<li class="top-nav"><a href="./">HOME</a></li>
25			<li class="top-nav"><a href="#">会社概要</a>
26				<ul>
27					<li><a href="#">会社沿革</a></li>
28					<li><a href="#">会社理念</a></li>
29					<li><a href="#">事業案内</a></li>
30				</ul>
31			</li>
32			<li class="top-nav"><a href="#">お問い合わせ</a></li>
33			<li class="top-nav"><a href="#">よくある質問</a></li>
34			<li class="top-nav"><a href="#">採用</a></li>
35		</ul>
36	</nav>
37	</header>
38		<!-- /header -->
39<main>
40
41<div class="topimages">
42<img src="images/#" alt="top画">
43<p>*******</p>
44</div>
45<div class="kategoricontener">
46<div class="kategoriue">
47<h2 class="kate">TOPCS</h2>
48<ul>
49	<li></li>
50	<li></li>
51	<li class="topcs3"><p>*******<br>
52		******<br>
53		*******<br>
54		*********<br>
55		********<br><p></li>
56	<li><br></li>
57	<li class="topcs2"><p>*****<br>*****<br>*****</p></li>
58	<li><br></li>
59	<li class="topcs1"><p>*******<br> ********<br>
60	********<br>
61	*******<br>
62	*****</p></li>
63</ul>
64</div>
65<div class="news">
66	<h2 class="katego">NEWS</h2>
67	<ul>
68		<li></li>
69		<li></li>
70		<li></li>
71		<li></li>
72		<li></li>
73	</ul>
74</div>
75</div>
76<p class="kategori">BUSINESS</p>
77	<div class="company-wrapper">
78<div class="mlc-contener">
79<div class="company">
80	<a href="#"><img class="mati" src="images/city.jpg" alt="街並"></a><h1 class="topsetumei">**********</h1><h2 class="ryakusyou">***********</h2><p class="zigyou">
81********<p>
82</div>
83</div>
84<div class="osc-contener">
85<div class="company">
86<a href="#"><img class="kaisya" src="images/office.jpg" alt="会社"></a><br><h1 class="topsetumei">********</h1><h2 class="ryakusyou">******</h2>
87<p>*********</p>
88</div>
89</div>
90<div class="ifc-contener">
91<div class="company">
92<a href="#"><img class="keitai" src="images/zyouhou.jpg" alt="情報"></a><br><h1 class="topsetumei">********</h1><h2 class="ryakusyou">********</h2><p>**********</p>
93</div>
94</div>
95</div>
96<div class="sitagazou">
97<img class="footerue" src="images/image1.jpg" alt="地平線に見える街並み">
98<p>～***********～</p>
99</div>
100</main>
101	<!--footer-->
102<div class="bottom">
103	<footer>
104				<ul class="footer-nav">
105			<li class="footer-nav1"><a href="#"><span>HOME</span></a></li>
106			<li>
107		<ul class="footer-nav1">
108			<li class="niretu"><a href="#"><span>会社概要</span></a></li>
109			<ll class="niretu"><a href="#">会社沿革</a></ll>
110			<li class="niretu"><a href="#">経営理念</a></li>
111			<li class="niretu"><a href="#">事業案内</a></li>
112		</ul>
113	</li>
114	<li>
115		<ul class="footer-nav2">
116			<li class="niretu"><a href="#">お問い合せ</a></li>
117		</ul>
118	</li>
119	<li>
120		<ul class="footer-nav2">
121			<li class="niretu"><a href="#">よくある質問</a></li>
122		</ul>
123	</li>
124	<li>
125		<ul class="footer-nav2">
126		<li class="niretu"><a href="#">採用</a></li>
127	</ul>
128</li>
129</ul>
130<div class="sitalogo">
131<img  src="images/rogo.svg" alt="コーポレートマーク">
132</div>
133<p class="tyosakuken">&copy;****** All rights reserved</p>
134
135	</footer>
136	</div>
137</div>
138</body>
139</html>

CSS
1@charset "utf-8";
2.company-wrapper{
3	display: flex;
4	justify-content:space-around;
5}
6.company{
7	margin-right: auto;
8	margin-left: auto;
9}
10.company a{
11	text-decoration: none;
12	display: inline-block;
13	height: 300px;
14	width: auto;
15}
16.company p{
17	margin-top: 10px;
18	text-align: justify;
19	margin-bottom: 50px;
20	width: 350px;
21	line-height: 1.5;
22}
23.zigyou{
24	margin-right: 3px;
25	margin-left: 0;
26}
27.kategoricontener{
28	display: flex;
29}
30.kategoriue ul{
31	list-style-type: none;
32	line-height: 2.0;
33	text-align: left;
34}
35.kategoriue{
36	font-size: 13px;
37	font-weight: bold;
38	text-align: left;
39	margin-top: 15px;
40	margin-bottom: 150px;
41	width: 40%;
42	padding-right: 10%;
43	padding-left: 15px;
44}
45.topsetumei{
46	font-size: 18px;
47	text-align: center;
48	margin-bottom: 5px;
49	line-height:1.2;
50	color: #0000ff;
51	padding-right: 10px;
52}
53.ryakusyou{
54	margin-top: 2px;
55	margin-bottom: 3px;
56	text-align: center;
57	padding-right: 10px;
58}
59.kate{
60	text-align: center;
61	font-size: 25px;
62	padding-bottom:20px;
63}
64.news ul{
65	list-style-type: none;
66	line-height: 1.8;
67}
68.katego{
69	text-align: center;
70	font-size: 25px;
71	padding-bottom:20px;
72}
73.news{
74	font-size: 16px;
75	font-weight: bold;
76	text-align: left;
77	margin-top: 15px;
78	margin-bottom: 50px;
79	width: 40%;
80}
81.mati:hover{
82	opacity: 0.6;
83}
84.kaisya:hover{
85	opacity: 0.6;
86}
87.keitai:hover{
88	opacity: 0.6;
89}
90.zigyoubetu{
91	font-size: 12px;
92}
93.zigyoubetu:hover{
94		opacity: 0.6;
95}
96.mati,.kaisya{
97	height:auto;
98	width:400px;
99	margin-right: 0;
100	margin-bottom: 12px;
101	padding: 0;
102}
103.keitai{
104	height:266px;
105	width:400px;
106	margin-bottom: 12px;
107}
108/* ########### 375px以上～399px以下 ########### */
109@media screen (min-width: 375px) and (max-width: 399px) {
110
111.company-wapper{
112	flex-direction: column;
113	margin:10px;
114	padding-bottom: 20px;
115}
116.company{
117	/*flex-direction: none;*/
118	display: block;
119	padding-bottom: 5px;
120}
121
122.company p{
123	margin-top: 15px;
124	margin-left: 0;
125	text-align: justify;
126	margin-bottom: 5px;
127	line-height: 1.5;
128}
129.company a{
130	display: block;
131	height: 100px;
132	width: auto;
133	margin-top: 10px;
134	margin-bottom: 20px;
135}
136.company img{
137	width: 80%;
138	padding-bottom: 5px;
139}
140.mati,.kaisya{
141	height:123px;
142	width:365px;
143	margin-right: 0;
144	margin-bottom: 10px;
145	padding: 0;
146}
147.keitai{
148	height:auto;
149	width:50px;
150	margin-bottom: 12px;
151}
152.news ul{
153	list-style-type: none;
154	line-height: 1.8;
155}
156.news{
157	font-size: 16px;
158	font-weight: bold;
159	text-align: left;
160	margin-top: 15px;
161	margin-bottom: 50px;
162	width: 48%;
163	margin-right: auto;
164	margin-left:auto;
165}
166.katego{
167	text-align: center;
168	font-size: 25px;
169	padding-bottom:20px;
170}
171.kategoricontener{
172	display: block;
173	margin-right: auto;
174	margin-left:auto;
175}
176.kategoriue{
177	font-size: 20px;
178	font-weight: bold;
179	text-align: left;
180	margin-top: 20px;
181	margin-bottom: 150px;
182	width: auto;
183	margin-right: auto;
184	margin-left:auto;
185}
186.kategoriue ul{
187	list-style-type: none;
188	line-height: 2.0;
189	text-align: left;
190}
191.kategori{
192	display: flex;
193	font-size: 30px;
194	font-weight: bold;
195	color:#0000ff;
196	text-align: center;
197	margin-top: 200px;
198	margin-bottom: 30px;
199}
200}
201/* ########### 400px以上 ########### */
202
203@media screen and (min-width: 400px){
204.company-wapper{
205	display: block;
206	margin:10px;
207	padding-bottom: 20px;
208}
209.company{
210	flex-direction: none;
211	display: block;
212	padding-bottom: 5px;
213}
214
215.company p{
216	margin-top: 15px;
217	margin-left: 7px;
218	text-align: justify;
219	margin-bottom: 5px;
220	line-height: 1.5;
221}
222.company a{
223	display: block;
224	height: 100px;
225	width: auto;
226	margin-top: 10px;
227	margin-bottom: 20px;
228}
229.company img{
230	width: 100%;
231	padding-bottom: 5px;
232}
233.mati,.kaisya{
234	height:123px;
235	width:500px;
236	margin-right: 0;
237	margin-bottom: 10px;
238	padding: 0;
239}
240.keitai{
241	height:auto;
242	width:50px;
243	margin-bottom: 12px;
244}
245.news ul{
246	list-style-type: none;
247	line-height: 1.8;
248}
249.news{
250	font-size: 16px;
251	font-weight: bold;
252	text-align: left;
253	margin-top: 15px;
254	margin-bottom: 50px;
255	width: 48%;
256	margin-right: auto;
257	margin-left:auto;
258}
259.katego{
260	text-align: center;
261	font-size: 25px;
262	padding-bottom:20px;
263}
264.kategoricontener{
265	display: block;
266	margin-right: auto;
267	margin-left:auto;
268}
269.kategoriue{
270	font-size: 20px;
271	font-weight: bold;
272	text-align: left;
273	margin-top: 20px;
274	margin-bottom: 150px;
275	width: auto;
276	margin-right: auto;
277	margin-left:auto;
278}
279.kategoriue ul{
280	list-style-type: none;
281	line-height: 2.0;
282	text-align: left;
283}
284.kategori{
285	display: flex;
286	font-size: 30px;
287	font-weight: bold;
288	color:#0000ff;
289	text-align: center;
290	margin-top: 200px;
291	margin-bottom: 30px;
292}
293}
294/* ########### 401px以上～767px以下 ########### */
295@media (min-width: 401px) and (max-width: 767px) {
296
297}
298/* ########### 768px以上 ########### */
299@media screen and (min-width: 768px) {
300
301}
302/* ########### 1040px以上 ########### */
303@media screen and (min-width: 1040px) {
304body {
305	display: flex;
306	margin-left: auto;
307	margin-right:auto;
308}
309}
310