main .main_visual{}に対して
 
 background-image: url('../images/hm-Content-HomeHero.jpg');
→画像がめちゃめちゃ
→ height: 520px;/*高さ*/
→全体を見せたい
→ background-size: cover;
→画像の中心を中心として画像を拡大縮小させたい
→ background-position: center;
→画像の繰り返しはしたくない
→ background-repeat: no-repeat;
→文字を中心に置きたいですね
→ display:flex;
 align-items: center;
 
 
文字をちょっと位置を修正したい
→main .main_visual div{}に対して
 
 padding-left: 4rem;
 
 
文字を白とか灰色にしたい
→あらかじめそういうクラスを作っておく（他でも使うし）
→
.white{
 color: #fff;
}
.gray{
 color: #555;
}
→それを（逆に）htmlに当てはめてやる
→<h2 class="white">
→<p class="white">
 
あとh2やpの文字サイズや行間をきれいにしたい
→
main .main_visual div h2{
 font-size: 3rem;
 line-height: 1.2;
}
main .main_visual div p{
 line-height: 1.2;
}
  ここまで
 
index.html（変更部分）
 
   <div class="main_visual">
    <div>
      <h2 class="white">
       毎日の食事、<br>
       カラダに優しいものを
      </h2>
 

---

style.css
 
main .main_visual{
 height: 520px;/*高さ*/
 background-image: url('../images/hm-Content-HomeHero.jpg');
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 
 /*上下方向の中心ぞろえ*/
 display:flex;
 align-items: center;
}
main .main_visual div{
 padding-left: 4rem;
}
main .main_visual div h2{
 font-size: 3rem;
 line-height: 1.2;
}
main .main_visual div p{
 line-height: 1.2;
}

.white{
 color: #fff;
}
.gray{
 color: #555;
}