body {
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.header-section {
  position: relative;
  background: url('img/bg_img.jpg') no-repeat center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0px 0;
}

.header-content {
  position: relative;
  z-index: 2;
}

.header-logo {
  width: 30%;
  display: block;
  margin: 0 auto 50px;
}

.header-text {
  max-width: 80%;
  display: block;
  margin: 0 auto;
}

@media screen and (max-height: 700px) and (min-width: 768px)  {
  .header-logo {
    width: 25%;
  }
  .header-section {
    margin-top: 70px;
  }

  .header-text {
    max-width: 75%;
    margin-bottom: 30px;
  }
}


@media screen and (max-width: 768px) {
  .header-section {
    height: 90vh;
    padding: 50px;
  }
  .header-logo {
    width: 50%;
    margin-bottom: 40px;
  }
  .header-text {
    max-width: 100%;
  }
  }

  
.wave-divider {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}

/*波線区切り
.u-pc {
  display: none;
}

@media screen and (min-width: 768px) {
  .u-pc {
      display: block;
  }

  .u-sp {
      display: none;
  }
}
*/

.content-section {
  max-width: 1000px; 
  margin: 0 auto;
  padding: 50px 0 0 0;
  text-align: center;
}

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-in.visible {
  opacity: 1;
}
/*
img {
  width: 100%;
  height: auto;
}
*/
.title01 {
  width: 480px;
  margin: 0 auto 30px;
}

@media screen and (max-width: 768px) {
  .title01 {
    width: 266px;
    margin-bottom: 20px;
  }
  .content-section {
    padding: 50px 20px 0;
  }
  .sec2017-2018 {
    margin-top: -15px;
  }
  }

.timeline {
  margin-top: -20px;
}

/* 青い背景セクション */
.blue-section-wrapper {
  background-color: #EEF8FF; /* 青い背景を全幅に設定 */
  padding: 50px 0; /* 上下の余白 */
  transform: translateY(-20px);
}

@media screen and (max-width: 768px) {
  .blue-section-wrapper {
    padding: 0; /* 上下の余白 */
    transform: translateY(-10px);
  }
  }

.blue-section {
  max-width: 1000px; /* コンテンツを最大1000pxに制限 */
  margin: 0 auto;    /* セクションを中央揃え */
  text-align: center;
  padding: 30px 20px 20px;
}

.blue-wave-divider {
  margin-top: -60px;
}
@media screen and (max-width: 768px) {
  .blue-wave-divider {
    margin-top: -10px;
  }
  }

.graph {
  max-width: 96%; /* 全体の画像幅を統一 */
  margin: 20px auto;
}

@media screen and (max-width: 768px) {
  .graph {
    max-width: 100%; /* 全体の画像幅を統一 */
  }

  .graph2 {
    margin: 10px auto;
  }
  }

.graph-row {
  display: flex;
  justify-content: space-between; /* 両端に揃える */
}

.graph-row .graph {
  max-width: calc((1000px - 80px) / 2); /* 1000pxの中央揃えで幅を半分に */
}


@media (max-width: 768px) {
  .graph-row {
    flex-direction: column;
  }

 .graph-row .graph {
    max-width: 100%;
  }
}

/* 青から白への波線区切り */
.wave-divider {
  width: 100%; /* 波線を全幅に設定 */
  height: auto;
  display: block;
  transform: translateY(5px);
}

.blue-to-white-divider {
  background-color: #EEF8FF; /* 背景を青に設定 */
  text-align: center;
}

/* VOICEセクション */
.white-section {
  background-color: #FFFFFF; /* 白い背景 */
  padding: 50px 20px;
  text-align: center;
}
@media (max-width: 768px) {
  .white-section {
    background-color: #FFFFFF; /* 白い背景 */
    padding: 20px;
  }
}

.title-image {
  max-width: 80%; /* タイトル画像を中央揃えで適切なサイズに調整 */
  margin: 20px auto;
  display: block;
}

.title02 {
  width: 950px;
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .title02 {
    margin-bottom: 0;
  }
  .title-image {
    max-width: 100%; /* タイトル画像を中央揃えで適切なサイズに調整 */
    margin: 30px auto 10px;
    display: block;
  }

}

.content-image {
  max-width: 80%; /* コンテンツ画像を中央揃えで適切なサイズに調整 */
  margin: 20px auto;
  display: block;
}

/* フェードインアニメーション */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-in.visible {
  opacity: 1;
}

/* メッセージセクション */
.message-section {
  position: relative;
  background-color: #FFFFFF; /* タイトル部分は白背景 */
  padding: 50px 20px 0 20px; /* タイトル部分の上下余白を設定 */
  text-align: center;
}

@media (max-width: 768px) {
  .message-section {
    padding: 0 5px 0; 
  }
}

.message-content {
  max-width: 800px; /* コンテンツの最大幅を制限 */
  margin: 0 auto;
}

/* 背景画像部分 */
.message-background {
  position: relative;
  background: url('img/bg_message.webp') no-repeat center/cover; /* 背景画像を設定 */
  background-color: #FFFFFF; /* 背景色を白に設定（フォールバック用） */
  padding: 20px 20px 50px; /* 背景画像セクションの余白 */
  text-align: center;
}

.message-image {
  max-width: 900px; /* メッセージ画像を中央揃え */
  margin: 20px auto;
  display: block;
}
@media (max-width: 768px) {
  .message-background {
    background: none;
    padding: 0; /* 背景画像セクションの余白 */
  }

  .message-content{
    padding: 0px;
  }

  .message-image {
    max-width: 100%; /* スマートフォンでは幅を全体に広げる */
    margin: 0px auto;
  }
  .title-image03 {
    max-width: 90%;
    display: block;
    margin-bottom: 20px;
  }
}

/* 波線区切り */
.yellow-wave-divider {
  background-color: #FFFFFF; /* 波線上部の白背景 */
  text-align: center;
}

.wave-divider {
  width: 100%;
  height: auto;
  display: block;
}

/* 代表メッセージセクション */
.yellow-section {
  background-color: #FFFDEE; /* 黄色の背景 */
  padding: 0px 30px 100px;
  text-align: center;
  margin-top: -25px;
}

.yellow-content {
  max-width: 1200px; /* 全体の幅を統一 */
  margin: 0 auto; /* セクションを中央揃え */
  text-align: center; /* 中央揃えをデフォルトに設定 */
}

.content-image {
  max-width: 80%; /* 他の画像の幅を統一 */
  margin: 20px auto;
  display: block;
}

.name-image {
  max-width: 20%; /* 名前画像の幅を20%に制限 */
  margin: 20px 0 0 0; /* 他の画像と同じ左揃えの基準を使用 */
  display: block;
  text-align: right;
  position: relative;
  left: calc(80% - 10%); /* 上の画像の右端に揃えるための位置調整 */
}
.title04 {
  width: 661px;
  margin-bottom: 80px;
}
.daihyo03 {
  display: none;
}
@media (max-width: 768px) {
  .daihyo03 {
    display: block;
  }
  .yellow-section {
    padding-top: 30px
  }

  .title04 {
    margin-bottom: 30px;

  }

  .content-image
   {
    max-width: 100%; /* 狭い画面では幅を拡大 */
    margin-bottom: 30px;
  }

  .name-image {
    max-width: 70%; /* 狭い画面では幅を調整 */
    left: calc(50% - 20%); /* 狭い幅での位置調整 */
  }
}