WordPressで特定のCSSを読み込まない

style.cssとstyle2.cssは読み込みますが、style3.cssが崩れます。
PC上で確認すると問題ないのですが、スマホで見ると読み込みません。

わかりにくい質問で申し訳ございませんが、どなたかご教授お願いします。

header.php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Donut's pop</title>
8  <link rel="preconnect" href="https://fonts.googleapis.com">
9  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto:wght@700&display=swap" rel="stylesheet">
11  <?php wp_head(); ?>
12</head>
13
14<body style="background-color:white;">
15<header class="site-header">
16  <a href="#" style="text-decoration:none;" class="logo-link">
17    <img src="<?php echo get_template_directory_uri() ;?>/img/logo.png" alt="ロゴ">
18  </a>
19  <ul class="header-list">
20    <li><a href="#top-section" style="text-decoration:none;" class="header-link">タイトル</a></li>
21    <li><a href="#item-section" style="text-decoration:none;" class="header-link">ITEMS</a></li>
22    <li><a href="#sns-section" style="text-decoration:none;" class="header-link">SNS</a></li>
23    <li><a href="#shop-section" style="text-decoration:none;" class="header-link">SHOP</a></li>
24    <li><a href="#map-section" style="text-decoration:none;" class="header-link">MAP</a></li>
25  </ul>
26</header>

index.php
1<?php get_header(); ?>
2
3<section class="top">
4  <div class="top-img">
5    <img src="<?php echo get_template_directory_uri() ;?>/img/dounuts_logo3.png" alt="ロゴ">
6  </div>
7</section>
8
9<section class="message semicircle">
10  <div class="message-z">
11  <h1>from Donut's Pop</h1>
12  <div class="message-center">
13    <div class="message-p">
14      <p class="messa">文章
15        <br>文章
16      </p>
17      <p class="messa">文章
18        <br>文章</p>
19      <p class="messa">文章
20        <br>文章
21        <br>文章
22        </p>
23      <p class="messa">文章</p>
24    </div><!--message-p-->
25    <div class="message-img">
26     <img src="<?php echo get_template_directory_uri() ;?>/img/logo.png" alt="ロゴ">
27    </div>
28  </div><!--message-center-->
29</div>
30</section>
31
32  <section class="recommend">
33    <h2>ITEMS</h2>
34  <div class="recommend-size">
35    <div class="items"><!--ドーナツ4つ-->
36      <div class="item order"><!--ドーナツと名前-->
37        <img src="<?php echo get_template_directory_uri() ;?>/img/donut1.png"  class="CaramelWalnuts"alt="Caramel Walnuts">
38        <p class="border">Caramel Walnuts</p>
39      </div>
40      <div class="item text mokha-p"><!--ドーナツと名前-->
41        <img src="<?php echo get_template_directory_uri() ;?>/img/donut2.png" class="mokha" alt="mokha">
42        <p class="border">Mokha</p>
43      </div>
44      <div class="item order matcha"><!--ドーナツと名前-->
45        <img src="<?php echo get_template_directory_uri() ;?>/img/donut3.png" class="matcha" alt="matcha">
46        <p class="border">Matcha</p>
47      </div>
48      <div class="item text fragolia-p"><!--ドーナツと名前-->
49        <img src="<?php echo get_template_directory_uri() ;?>/img/donut4.png" class="fragolia" alt="fragolia">
50        <p class="border">Fragolia</p>
51      </div>
52      <p class="more">and more...</p>
53
54    </div>
55  </div><!--recommend-size-->
56</section><!--recommend-->
57
58<section class="sns-wrap">
59  <div class="sns">
60    <h2>INSTAGRAMS & SNS</h2>
61<!-- SnapWidget -->
62<script src="#"></script>
63<!-- SnapWidget -->
64<div class="iframe-wrapper">
65  <iframe src="#" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden;  width:765px; height:765px" width="100%"></iframe>
66</div>
67<div class="icon">
68   <p>follow me!</p>
69   <div class="icon-img">
70     <a href="#"><img src="<?php echo get_template_directory_uri() ;?>/img/insta.png" alt="instagram" class="insta"></a>
71     <a href="#"><img src="<?php echo get_template_directory_uri() ;?>/img/facebook.png" alt="facebook" class="facebook"></a>
72   </div><!--icon-img-->
73</div>
74</div>
75</section>
76
77<section class="shop">
78  <h2>SHOP</h2>
79  <div class="shop-img">
80    <img src="<?php echo get_template_directory_uri() ;?>/img/shop2.png" alt="shop" class="shop2">
81    <img src="<?php echo get_template_directory_uri() ;?>/img/shop.png" alt="shop" class="shop1">
82  </div>
83	<p class="more">文章</p>
84</section>
85<section class="map">
86  <h2>MAP</h2>
87  <div class="map-link">
88    <iframe src="#" 
89      width="100%" 
90      height="450" 
91      style="border:0;" 
92      allowfullscreen="" 
93      loading="lazy">
94   </iframe>
95  </div><!--map-link-->
96</section>
97
98<?php get_footer(); ?>

footer.php
1<footer>
2  <p>Donut's Pop</p>
3</footer>
4<?php wp_footer(); ?>
5
6  </body>
7  </html>

style3.php
1@media (max-width: 599px){
2  .message h1,.sns h2,.shop h2,.map h2 {
3    font-size: 25px;
4    text-align: center;
5    margin-bottom: 32px;
6    letter-spacing: 3px;
7  }  
8  .message,.recommend,.sns-wrap,.map {
9    margin-top: 56px;
10  }
11  .message,.sns-wrap,.shop,.map {
12    padding-bottom: 40px;
13  }  
14  /*ヘッダー*/
15  header {
16    z-index: 100;
17  }
18  header img {
19    height: 30px;
20    width: auto;
21    margin: 16px;
22  }
23  .header-list li a {
24    font-size: 1.6rem;
25    line-height: 24px;
26  }  
27  /*トップ*/
28  .top-img img {
29    margin: 100px 0;
30  }
31  /*メッセージ*/
32  .messa-main {
33    font-size: 1rem;
34  }
35  .message-center {
36    margin: 0 auto;
37    text-align: center;
38  }
39  .message-img {
40    text-align: center;
41  }
42  .message-img img {
43    width: 50%;
44    margin-top: 48px;
45  }
46  .message-p{
47    padding: 20px 20px;
48    width: 100%;
49    font-size: 0.7rem;
50  }
51  .messa-main {
52    font-size: 1.2rem;
53  }  
54  .message-center {
55    margin: 0 auto;
56    padding: 16px 16px;
57  }
58  .message-center::after {
59    padding: 0px 0px 16px 0;
60    top: 8px;
61    left: -8px;  
62  }
63  .message-center::before {
64    padding: 0px 1px;
65    height: 93%;
66  }
67  /*アイテム*/
68  .semicircle {
69    height: 30vh;
70  }  
71  .semicircle::before {
72    bottom: -344px;
73    width: 240px;
74    height: 160px;
75  }
76  .recommend h2 {
77    margin-top: 160px;
78    padding: 200px 0 16px 0;
79    font-size: 25px;
80    margin-bottom: 0px;
81    letter-spacing: 3px;
82  }
83  .recommend {
84    margin-top: 180px;
85    z-index: 10;
86  }
87  .recommend-size {
88    padding: 16px 0 32px 0;
89  }
90  .item {
91    margin-top: 0px;
92    padding: 0 0 16px 0;
93    width: 45%;
94  }
95  .item img {
96    margin: 16px 0 8px 0;
97    width: 70%;
98  }
99  .dounuts {
100    width: 100%;
101    margin-bottom: 0px;
102    padding: 24px 8px;
103  }
104  .dounuts p {
105    font-size: 10px;
106  }
107  .dounuts h3 {
108    font-size: 18px;
109  }
110  .dounuts h4 {
111    font-size: 15px;
112  }
113  /*sns*/
114  .sns {
115    width: 80%;
116    margin: 0 auto;
117  } 
118  .icon {
119    width: 80%;
120  }
121  .icon-img {
122    width: 25%;
123    margin: 0 auto;
124  }
125  .insta,.facebook {
126    font-size: 30px!important;
127  }
128  .icon p {
129    font-size: 15px;
130  }
131  /*ショップ*/
132  .shop {
133    padding-top: 56px;
134  }  
135  .shop img {
136    width: 90%;
137  }
138  /*sns*/
139  .sns-wrap {
140    margin-top: 56px;
141  }
142 /*マップ*/
143  .map-link {
144    width: 90%;
145  }  
146  .map-link p {
147    font-size: 0.8rem;
148  }  
149}

script.js
1/*スクロールでヘッダーの背景色変更*/
2jQuery(function(){
3  jQuery(window).on('scroll', function () {
4  
5         if (jQuery('header').height() < jQuery(this).scrollTop()) { 
6           jQuery('header').addClass('change-color');
7         }else {
8           jQuery('header').removeClass('change-color'); 
9       } });
10  
11   /*スライドイン*/
12  jQuery(window).on('load scroll',function (){
13    jQuery('.message-center').each(function(){
14      //ターゲットの位置を取得
15      var target = jQuery(this).offset().top;
16      //スクロール量を取得
17      var scroll = jQuery(window).scrollTop();
18      //ウィンドウの高さを取得
19      var height = jQuery(window).height();
20      //ターゲットまでスクロールするとフェードインする
21      if (scroll > target - height){
22      //クラスを付与
23        jQuery(this).addClass('active');
24      }
25    });
26  });
27   
28   jQuery(window).on('load scroll',function (){
29    jQuery('.item').each(function(){
30      //ターゲットの位置を取得
31      var target = jQuery(this).offset().top;
32      //スクロール量を取得
33      var scroll = jQuery(window).scrollTop();
34      //ウィンドウの高さを取得
35      var height = jQuery(window).height();
36      //ターゲットまでスクロールするとフェードインする
37      if (scroll > target - height){
38      //クラスを付与
39        jQuery(this).addClass('active');
40      }
41    });
42  });
43 
44   jQuery(window).on('load scroll',function (){
45    jQuery('.sns').each(function(){
46      //ターゲットの位置を取得
47      var target = jQuery(this).offset().top;
48      //スクロール量を取得
49      var scroll = jQuery(window).scrollTop();
50      //ウィンドウの高さを取得
51      var height = jQuery(window).height();
52      //ターゲットまでスクロールするとフェードインする
53      if (scroll > target - height){
54      //クラスを付与
55        jQuery(this).addClass('active');
56      }
57    });
58  });
59});

functions.php
1<?php
2function my_scripts() {
3  wp_enqueue_style( 'style-name1', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all' );
4  wp_enqueue_style( 'style-name2', get_template_directory_uri() . '/style2.css', array(), '1.0.0', 'all' );
5  wp_enqueue_style( 'style-name3', get_template_directory_uri() . '/style3.css', array(), '1.0.0', 'all' );
6  wp_enqueue_style( 'style-name1', get_template_directory_uri() . '/reset.css', array(), '1.0.0', 'all' );
7  wp_enqueue_script( 'script-name1', get_template_directory_uri() . '/script.js', array('jquery'),'1.0.0', 'true' );
8}
9add_action( 'wp_enqueue_scripts', 'my_scripts' );
10?>