文字を折り返したいです

前提・実現したいこと

画面の幅に合わせて.flow_list-item-textの文を折り返したいです。

該当のソースコード

html
1<section class="flow">
2    <div class="container">
3      <h2 class="flow_title">ご利用の流れ</h2>
4      <ul class="flow_list">
5        <li class="flow_list-item">
6          <div class="flow_list-item-number-box">
7            <p class="flow_list-item-number">01</p>
8          </div>
9          <div class="flow_list-item-text-box">
10            <h5 class="flow_list-item-title">お問い合わせ</h5>
11            <p class="flow_list-item-text">まずはフォームまたはお電話からお申し込みください。</p>
12          </div>
13        </li>
14        <li class="flow_list-item">
15          <div class="flow_list-item-number-box">
16            <p class="flow_list-item-number">02</p>
17          </div>
18          <div class="flow_list-item-text-box">
19            <h5 class="flow_list-item-title">ヒアリング</h5>
20            <p class="flow_list-item-text">現在の学習状況やTOEFLスコア、目標のスコアをお聞きします。</p>
21          </div>
22        </li>
23        <li class="flow_list-item">
24          <div class="flow_list-item-number-box">
25            <p class="flow_list-item-number">03</p>
26          </div>
27          <div class="flow_list-item-text-box">
28            <h5 class="flow_list-item-title">学習プランのご提供</h5>
29            <p class="flow_list-item-text">目標達成のために最適な学習プランをご提案致します。</p>
30          </div>
31        </li>
32        <li class="flow_list-item">
33          <div class="flow_list-item-number-box">
34            <p class="flow_list-item-number">04</p>
35          </div>
36          <div class="flow_list-item-text-box">
37            <h5 class="flow_list-item-title">ご入会</h5>
38            <p class="flow_list-item-text">お申込み完了後、レッスンがスタートします。</p>
39          </div>
40        </li>
41      </ul>
42    </div>
43  </section>

scss
1// style.scss
2
3@charset 'utf-8';
4
5/*
6html5doctor.com Reset Stylesheet
7v1.6.1
8Last Updated: 2010-09-17
9Author: Richard Clark - http://richclarkdesign.com
10Twitter: @rich_clark
11*/
12
13html,
14body,
15div,
16span,
17object,
18iframe,
19h1,
20h2,
21h3,
22h4,
23h5,
24h6,
25p,
26blockquote,
27pre,
28abbr,
29address,
30cite,
31code,
32del,
33dfn,
34em,
35img,
36ins,
37kbd,
38q,
39samp,
40small,
41strong,
42sub,
43sup,
44var,
45b,
46i,
47dl,
48dt,
49dd,
50ol,
51ul,
52li,
53fieldset,
54form,
55label,
56legend,
57table,
58caption,
59tbody,
60tfoot,
61thead,
62tr,
63th,
64td,
65article,
66aside,
67canvas,
68details,
69figcaption,
70figure,
71footer,
72header,
73hgroup,
74menu,
75nav,
76section,
77summary,
78time,
79mark,
80audio,
81video {
82  margin: 0;
83  padding: 0;
84  border: 0;
85  outline: 0;
86  font-size: 100%;
87  vertical-align: baseline;
88  background: transparent;
89}
90
91body {
92  line-height: 1;
93}
94
95article,
96aside,
97details,
98figcaption,
99figure,
100footer,
101header,
102hgroup,
103menu,
104nav,
105section {
106  display: block;
107}
108
109nav ul {
110  list-style: none;
111}
112
113blockquote,
114q {
115  quotes: none;
116}
117
118blockquote:before,
119blockquote:after,
120q:before,
121q:after {
122  content: '';
123  content: none;
124}
125
126a {
127  margin: 0;
128  padding: 0;
129  font-size: 100%;
130  vertical-align: baseline;
131  background: transparent;
132}
133
134/* change colours to suit your needs */
135ins {
136  background-color: #ff9;
137  color: #000;
138  text-decoration: none;
139}
140
141/* change colours to suit your needs */
142mark {
143  background-color: #ff9;
144  color: #000;
145  font-style: italic;
146  font-weight: bold;
147}
148
149del {
150  text-decoration: line-through;
151}
152
153abbr[title],
154dfn[title] {
155  border-bottom: 1px dotted;
156  cursor: help;
157}
158
159table {
160  border-collapse: collapse;
161  border-spacing: 0;
162}
163
164/* change border colour to suit your needs */
165hr {
166  display: block;
167  height: 1px;
168  border: 0;
169  border-top: 1px solid #cccccc;
170  margin: 1em 0;
171  padding: 0;
172}
173
174input,
175select {
176  vertical-align: middle;
177}
178
179// reset CSS ここまで
180
181@function vw($width, $px) {
182  @return $px / $width * 100vw;
183}
184
185@function vh($height, $px) {
186  @return $px / $height * 100vh;
187}
188
189$bpc: 1600px; //PC大画面
190$spc: 1280px; // PC通常
191$ipad: 768px; // iPad
192$sp: 375px; // スマホ
193
194@mixin sp {
195  @media screen and (min-width: $sp) {
196    @content;
197  }
198}
199
200@mixin ipad {
201  @media screen and (min-width: $ipad) {
202    @content;
203  }
204}
205
206@mixin spc {
207  @media screen and (min-width: $spc) {
208    @content;
209  }
210}
211
212@mixin bpc {
213  @media screen and (min-width: $bpc) {
214    @content;
215  }
216}
217
218$navyBlue: #1B224C;
219$yellowOrange: #F5A623;
220$thinGray: #D5D5D5;
221$moreThinGray: #F8F8F8;
222$white: #FFFFFF;
223
224html {
225  font-size: 62.5%;
226  /* -> 10px; */
227}
228
229body {
230  font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
231}
232
233h1 {
234  font-size: 4rem;
235  font-weight: bold;
236  line-height: 1.3;
237
238  @include spc {
239    font-size: 4.8rem;
240    line-height: 1.4;
241  }
242}
243
244h2 {
245  font-weight: bold;
246  line-height: 1.4;
247  font-size: 2.1rem;
248
249  @include spc {
250    font-size: 3.6rem;
251  }
252}
253
254h3 {
255  font-size: 3.2rem;
256  font-weight: bold;
257  line-height: 1.7;
258}
259
260h4 {
261  font-weight: bold;
262  line-height: 1.5;
263  font-size: 1.8rem;
264
265  @include spc {
266    font-size: 2.6rem;
267  }
268}
269
270h5 {
271  font-size: 1.8rem;
272  font-weight: 200;
273  line-height: 1.5;
274
275  @include spc {
276    line-height: 1.7;
277  }
278}
279
280p,
281.p {
282  font-size: 1.5rem;
283  font-weight: 200;
284  line-height: 1.5;
285
286  @include spc {
287
288    line-height: 1.7;
289    font-size: 1.6rem;
290  }
291}
292
293small {
294  font-size: 1.2rem;
295  font-weight: 200;
296  line-height: 1.7;
297}
298
299a {
300  text-decoration: none;
301}
302
303ul {
304  list-style: none;
305}
306
307.smallDone {
308  display: block;
309
310  @include spc {
311    display: none;
312  }
313}
314
315.smallNone {
316  display: none;
317
318  @include spc {
319    display: block;
320  }
321}
322
323.container {
324  margin: 0 auto;
325  max-width: 1600px;
326  width: 90%;
327
328  @include ipad {
329    width: vw(1280, 900);
330  }
331}
332

scss
1//flow.scss
2
3@charset "utf-8";
4
5@import 'style.scss';
6
7
8.flow {
9  padding-top: vh(425, 58);
10}
11
12.flow_title {}
13
14.flow_list {}
15
16.flow_list-item {
17  margin-top: .8rem;
18  background-color: $moreThinGray;
19}
20
21.flow_list-item-number-box {
22  display: inline-block;
23  background-color: $yellowOrange;
24  width: 4rem;
25  height: 4rem;
26
27  @include spc {
28    width: 6.4rem;
29    height: 6.4rem;
30  }
31}
32
33.flow_list-item-number {
34  height: 100%;
35  display: flex;
36  justify-content: center;
37  align-items: center;
38  font-weight: bold;
39  line-height: 1.8;
40  font-size: 1.4rem;
41
42  @include spc {
43    font-size: 1.6rem;
44  }
45}
46
47.flow_list-item-text-box {
48  display: inline-block;
49}
50
51.flow_list-item-title {
52  display: inline-block;
53  border-right: 1px solid #C3C3C3;
54  line-height: 2;
55  width: 15rem;
56  padding-left: 1rem;
57  font-weight: bold;
58  font-size: 1.6rem;
59
60  @include spc {
61    font-size: 1.8rem;
62    line-height: 2.2;
63    width: 21.4rem;
64    padding-left: 2.5rem;
65  }
66}
67
68.flow_list-item-text {
69  line-height: 1;
70  display: inline-block;
71  padding-left: 1rem;
72  font-size: 1.4rem;
73
74  @include spc {
75    line-height: 2.2;
76    padding-left: 5.5rem;
77    font-size: 1.6rem;
78  }
79}
80