#visual { position: relative; }
#visual .title-area { position: absolute; top: 0; right: 0; }
#visual .title-area span { display: inline-block; margin-left: 170px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 2rem; }
#visual figure img { width: 100%; height: auto; }
#visual .visual-text { position: absolute; right: 275px; bottom: 50%; margin-bottom: -180px; }
#visual .visual-text p { margin-bottom: 40px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 3.8rem; }
#visual .visual-text span { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 1.8rem; }

#message01,
#message02,
#message03 { z-index: 0; position: relative; padding: 60px 0; overflow: hidden; }
#message02 { background: #eee; }
#message02::before { content: ''; z-index: 1; position: absolute; right: -450px; bottom: -450px; width: 100%; height: 100%; background: #fff; transform: rotate(-35deg); }
#message01 h2,
#message02 h2,
#message03 h2 { z-index: 2; position: relative; margin-bottom: 60px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 3.4rem; color: #cc0001; text-align: center; line-height: 1; }
#message01 div,
#message02 div,
#message03 div { z-index: 2; position: relative; display: flex; justify-content: center; margin: 0 auto; }
#message02 div { flex-direction: row-reverse; }
#message01 p,
#message02 p,
#message03 p { width: 560px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 1.6rem; line-height: 2; }
#message01 p,
#message03 p { margin-right: 30px; padding-left: 30px; }
#message02 p { margin-left: 30px; padding-right: 30px; }
#message01 figure,
#message02 figure,
#message03 figure { width: 580px; }
#message01 figure img,
#message02 figure img,
#message03 figure img { width: 100%; height: auto; }

@media ( max-width: 767px ) {
  #visual .title-area { top: 20px; width: 60%; }
  #visual .title-area span { margin-left: 0; font-size: 1.4rem; }
  #visual .title-area h1 img { width: 100%; height: auto; }
  #visual .visual-text { right: 50%; bottom: 34px; margin-right: -167px; margin-bottom: 0; }
  #visual .visual-text p { margin-bottom: 15px; font-size: 2.6rem;}
  #visual .visual-text span { font-size: 1.6rem; }

  #message01,
  #message02,
  #message03 { padding: 45px 15px; }
  #message02::before { right: -300px; bottom: -670px; }
  #message01 h2,
  #message02 h2,
  #message03 h2 { margin-bottom: 15px; font-size: 2rem; line-height: 2; }
  #message01 div,
  #message02 div,
  #message03 div { flex-direction: column; }
  #message02 div { flex-direction: column-reverse; }
  #message01 p,
  #message02 p,
  #message03 p { font-size: 1.4rem; line-height: 2; }
  #message01 p,
  #message02 p,
  #message03 p,
  #message01 figure,
  #message02 figure,
  #message03 figure { width: 100%; }
  #message01 p,
  #message03 p { margin-bottom: 30px; margin-right: 0; padding-left: 0; }
  #message02 p { margin-top: 30px; margin-left: 0; padding-right: 0; }
}