flexアイテムのテキストの表示幅を変えたい

実現したいこと

スマホ表示のときのflexアイテムの画像下のテキストの表示幅を変えて、改行タイミングをPCと同じにしたいです。

前提

スマホの表示だとflexアイテムのテキストの改行タイミングがPCと異なるので、横いっぱいにテキストを表示させたいです。

該当のソースコード

<section id="lineup"> <div class="fadein"> <div class="container"> <div class="tittle"> <h1 class="border">００００</h1> </div> <div class="lineup-menu"> <ul class="filter"> <li class="lineup-tab"> <a class="hot active" data-filter="hot" href="">０００</a> </li> <li class="lineup-tab"><a class="ice" data-filter="ice" href="">０００</a></li> <li class="lineup-tab"><a class="kanmi" data-filter="kanmi" href="">０００</a></li> <li class="lineup-tab"><a class="gifts" data-filter="gifts" href="">０００</a></li> </ul> </div> <div class="lineup-wrapper"> <div class="lineup-product-active" data-category="hot"> <div class="product-box"> <img class="hot1" src="./images/osinagaki/hot1.png"> <div class="product-text"> <h2>０００</h2> <p>００００００００００００００００００<br> ０００００００００００００００００００</p> <span>¥700（税抜）</span> </div> </div> <div class="product-box"> <img class=hot2 src="./images/osinagaki/hot2.png"> <div class="product-text"> <h2>０００００００</h2> <p>００００００００００００００<br> ００００００００００００００００００</p> <span>¥700（税抜）</span> </div> </div> </div> <div class="lineup-product" data-category="ice"> <div class="product-box"> <img class="ice1" src="./images/osinagaki/ice1.png"> <div class="product-text"> <h2>００００００</h2> <p>００００００００００００００００００００<br> ００００００００００００００００</p> <span>¥700（税抜）</span> </div> </div> <div class="product-box"> <img class="ice2" src="./images/osinagaki/ice2.png"> <div class="product-text"> <h2>００００００</h2> <p>０００００００００００<br> ０００００００００００００００００００</p> <span>¥700（税抜）</span> </div> </div> </div> CSS /* お品書き */ .lineup-menu ul { display: flex; flex-wrap: nowrap; justify-content: space-between; } .lineup-menu ul li { width: 25%; text-align: center; } .lineup-menu ul li a { display: block; color: #383838; background-color: #e1f3e8; border: 1px solid #fff; border-bottom: none; border-radius: 5px; padding: 0.5rem 0; } .lineup-menu ul li a:hover { color: #fff; background-color: #628f6d; } .lineup-menu ul li a.active { color: #fff; background-color: #628f6d; } .product-box { display: flex; flex-wrap: nowrap; justify-content: space-around; align-items: center; margin-top: 40px; margin-bottom: 50px; border-radius: 5px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); background-color: #e1f3e8; padding: 50px; } .product-text { flex-basis: 40%; } .product-text h2 { margin-bottom: 30px; } .product-text p { margin-bottom: 30px; } .hot1 { top: 35px; left: 125px; } .hot2 { top: 35px; left: 125px; } .kanmi1 { width: 300px; top: 25px; left: 90px; height: 200px; } .kanmi2 { width: 300px; top: 45px; left: 90px; height: 200px; } .gifts1 { width: 300px; top: 45px; left: 90px; height: 400px; } .gifts2 { width: 300px; top: 45px; left: 90px; height: 200px; } .product-text span { left: 0px } .lineup-product { display: none; } /* スマホ用 */ @media screen and (max-width:768px) { .lineup-menu ul { display: flex; flex-wrap: wrap; } .lineup-menu ul li { flex-basis: 49%; margin-bottom: 20px; } .product-box { display: flex; flex-wrap: wrap; margin-top: 24px; border-radius: 5px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); background-color: #e1f3e8; } .product-text { margin: 24px; flex-basis: 100%; text-align: center; margin-bottom: 16px; background-color: aqua; } .product-text h2 { margin-bottom: 16px; font-size: 16px; } .product-text p { margin-bottom: 16px; font-size: 12px; } .product-text span { font-size: 16px; } ｝