画像の上の文字がスマホの時だけ、縦書きになってしまう

前提

現在、html/cssの記述をしているのですが、、一点どうしてもできない部分があり、こちらに投稿しました。

画像の上にテキストを入れて<a>タグで囲っているのですが、PCでは普通に表示されるのですが、スマホにするとなぜか縦文字になってしまいます。choromeの検証で見ても横になっているのですが、実機で確認するとどうしても縦文字に表示されてしまいます。
縦文字になってしますのは、下記の　　service-box-text p　　となります。

html
<a href="consultation.html" class="main-service-box">
<img src="img/consultation-pc.png" class="pc">
<img src="img/consultation-sp.jpg" class="sp">
<div class="service-box-text">
<p href="consultation.html">空き家相談</p>
<div class="service-arrow">→</div>
</div>
</a>

css pc時
.main-service-box{
position: relative;
}
.service-box-text{
position: absolute;
display: flex;
color: #fff;
bottom: 28px;
margin: 0 auto;
width: 100%;
justify-content: space-between;
}
.service-box-text p{
width: 50%;
font-family: "Source Han Sans JP";
font-weight: bold;
font-size: 2.2rem;
padding-left:35px;
text-align: left;
}
.service-box-text .service-arrow{
font-family: "Source Han Sans JP";
font-size: 2.0rem;
font-weight: 500;
width: 50%;
text-align:right;
padding-right:35px;
}

css スマホ
.service-box-text p{
width: 100% !important;
font-size: 2.0rem;
text-align: center;
}

.service-arrow{
display: none;
}

widthをpxなどにしてもだめでした。本当はarrowもpc同様表示させたいのですが、最悪テキストをcenter合わせでもできれば良いかなと思っております。

私自身もあまり経験値が少なく、前任の方から引き継いだのですがここだけできないという形になってしまいます。
お力添えを頂けますと大変ありがたいです。