スマホ画面の時だけ文章改行 の効果を適応させないようにしたい。

実現したいこと
スマホ画面の時だけ文章改行 の効果を適応させないようにしたいのですが、上手くいきません。
PC画面では の効果は適応されています。

該当箇所はHTMLのコードの経営理念という文字の下にある文章のところです。

試したこと
ネットで方法を調べて以下のことを試したのですが、300px以上の画面のレスポンシブで何故か適応されません。
 にclasssを付ける。

そして、responsiveのｃｓｓに.br-sp { display:none; }を追加する。

以上のことをしたのですが、300px以上の画面で 改行が適応されてしまいます。
グーグルのディベロッパーツールで確認した画像は以下にあります。

付属画像

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="robots" content="noindex,nofollow">
6	<title></title>
7
8	<meta http-equiv="X-UA-Compatible" content="IE=edge">
9	<meta name="viewport" content="width=device-width, initial-scale=1.0">
10   
11
12	<link rel="stylesheet" href="companyhp3.css">
13    <link rel="stylesheet" href="responsive.css">
14
15	<script src="jquery-3.6.0.min.js"></script>
16    <style type="text/css">
17        /* レスポンシブ対応で右に出る謎の余白を無くす */
18        .wrapper {
19             overflow: hidden;
20         }
21  
22
23</style> 
24
25
26<script>
27		$(function() {
28			const hum = $('#hamburger, .close')
29			const nav = $('.sp-nav')
30			hum.on('click', function(){
31				nav.toggleClass('toggle');
32			});
33		});
34	  </script>
35</head>
36<body>
37 <!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
38<div class="wrapper"> 
39  
40    <section id="about3">
41        <div class="slide-bottom show">経営理念<span></span></div>
42
43        <p class="slide-right show">
44         
45            今は世界中が大変な状況になっていて、ニュースを見る<br class="br-sp"></p>
46       <p class="slide-right show">    
47        まずは、皆さんと一緒に意識を高めて、この難局を乗り越えま <br class="br-sp"></p>
48            <p class="slide-right show">  
49                東京オリンピックを笑顔で迎えられるよう、一日一日努力<br class="br-sp"></p>
50            <p class="slide-right show">  
51                さんも健康には十分ご留意され、お過ごしください <br class="br-sp"></p>
52            <p class="slide-right show">  
53
54                一年後、更（さら）にレベルアップした自分<br class="br-sp"> </p>
55            <p class="slide-right show">  
56                まずは、皆さんと一緒に意識を高めて、この </p>
57       
58
59    </section>  
60
61
62  <script>
63        //フェードイン用のコードです
64        $(function(){
65            $(window).on('load scroll', function() {
66                $(".show").each(function() {
67                    var winScroll = $(window).scrollTop();
68                    var winHeight = $(window).height();
69                    var scrollPos = winScroll + (winHeight * 0.9);
70                    if($(this).offset().top < scrollPos) {
71                        $(this).css({opacity: 1, transform: 'translate(0, 0)'});
72                    }
73                });
74            });
75        });
76        //フェードイン用のコードはここまでです
77    </script>
78</div>
79</body>
80</html>
81
82
83

css
1/* sectionタグのabout３にのみ背景を適応　class idは#で記述すつ */
2  section#about3 {
3    overflow: hidden;
4    text-align: center;
5    padding: 10px 0;
6    background-color: rgb(196, 245, 252);/* sectionタグ内に背景を設定 */
7}
8section#about3 div {
9  color:#6d6d6e;
10  font-size: 39px;
11  font-weight: 600;
12
13  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
14  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
15  text-align: center;
16}
17section#about3 p {
18  color:#7c7878;
19  font-size: 27px;
20  font-weight: 400;
21  vertical-align: -10px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
22  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
23  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
24  text-align: center;/* ブロック要素のみしか本来適応できない */
25  line-height:50px;/* 文字の行間の調節 */
26}
27
28
29
30
31
32
33  /* フェードイン用のCSS */
34/* 下からフェードイン */
35.slide-bottom {
36	opacity: 0;
37	transform: translate(0, 20px);
38	transition: all 1s ease-out;
39 }
40/* 左からフェードイン */
41.slide-left {
42	opacity: 0;
43	transform: translate(-20px, 0);
44	transition: all 1s ease-out;
45 }
46
47/* 右からフェードイン */
48.slide-right {
49	opacity: 0;
50	transform: translate(20px, 0);
51	transition: all 1s ease-out;
52 }
53
54

responsivecss
1/* 画面幅（300px以上の時までの適応）指定 */
2@media screen and (min-width: 300px){
3
4/* sectionタグのabout３にのみ背景を適応　class idは#で記述すつ */
5section#about3 {
6    overflow: hidden;
7    text-align: center;
8    padding: 10px 0;
9    background-color: rgb(196, 245, 252);/* sectionタグ内に背景を設定 */
10}
11section#about3 div {
12  color:#6d6d6e;
13  font-size: 29px;
14  font-weight: 600;
15
16  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
17  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
18  text-align: center;
19}
20section#about3 p {
21  color:#7c7878;
22  font-size: 17px;
23  font-weight: 400;
24  vertical-align: -10px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
25  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
26  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
27  text-align: center;/* ブロック要素のみしか本来適応できない */
28  line-height:50px;/* 文字の行間の調節 */
29  text-align: justify;/* 両端揃え */
30  text-justify: inter-ideograph;/* 両端揃えの種類 *//* 均等振り分け（日本語向き）文字の端を揃える */
31 
32}
33.br-sp { display:none; }
34
35}
36