/* Aboutページ固有のスタイル */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* 背景コンテナ - 中央部 */
.background-container-mid {
  position: fixed;
  /* 画面に固定 */
  top: 0%;
  left: 50%;
  /* 中央寄せのために50%に設定 */
  transform: translateX(-50%);
  /* 要素の幅の半分だけ左に戻して中央寄せ */
  width: 94.9%;
  height: 200%;
  z-index: -2;
  /* 一番下のレイヤーに配置 */
}

.bg-mid {
  width: 100%;
  height: 100%;
}

/* Aboutページのコンテンツ */
.about-content {
  width: 90%;
  margin: 0 auto;
  padding: 2vw 0;
  color: #ffffff;
}

/* YouTube動画埋め込み */
.youtube-container {
  width: 50vw; /* 450pxを23.4vwに変更 */
  margin: 0 auto 2.1vw; /* 40pxを2.1vwに変更 */
  border-radius: 0.52vw; /* 10pxを0.52vwに変更 */
  overflow: hidden;
  position: relative;
  text-align: center;
}

.youtube-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.52vw; /* 10pxを0.52vwに変更 */
}

.youtube-caption {
  text-align: center;
  margin-top: 0.52vw; /* 10pxを0.52vwに変更 */
  font-size: 1.2vw;
  color: #ffffff;
}

/* セクションタイトル */
.section-title {
  font-size: 1.8vw;
  font-weight: 800;
  margin: 2.1vw 0 1.05vw; /* 40px 0 20pxを2.1vw 0 1.05vwに変更 */
  text-align: left;
  color: #ffffff;
}

/* サービスエリア */
.service-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw; /* 20pxを1.05vwに変更 */
  margin-top: 1.56vw; /* 30pxを1.56vwに変更 */
  width: 100%;
  /* 幅を100%に設定 */
}

.service-title {
  font-size: 1.5vw;
  font-weight: 800;
 
 }

.service-item {
  width: 14vw; /* 200pxを10.4vwに変更 */
  text-align: center;

}



.service-icon {

  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.52vw; /* 10pxを0.52vwに変更 */
  overflow: hidden;
  padding: 0; /* 0pxを0に変更（単位不要） */
  box-sizing: border-box;
}

.service-icon img {
  max-width: 95%;
  max-height: 95%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: brightness(1.2);
  /* 画像を少し明るく */
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .youtube-container {
    width: 80vw; /* 450pxを23.4vwに変更 */
  }

  .about-content {
    width: 90%;
  }

  .youtube-caption {
    font-size: 2vw;
  }

  .section-title {
    font-size: 3.5vw;
    padding: 5vw 0;
  }

  .service-title {
    font-size: 2.5vw;
    
  }

  .service-area {
    flex-wrap: wrap;
  }

  .service-item {
    flex-basis: calc(48% - 1vw); /* 10pxを0.52vwに変更 */
  }
}