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

/* トップページのみヘッダーロゴテキストを非表示（PC表示時） */
.header-logo-text {
  display: none;
}

/* スマホ表示時は表示 */
@media screen and (max-width: 768px) {
  .header-logo-text {
    display: block;
  }
}

/* メインコンテンツのスタイル */
.main-content-top {
  width: 100%;
}

/* メインの見出し */
.main-heading {
  font-size: 5vw;
  font-weight: 700;
  line-height: 1.2;
  padding: 10vw 0 0 2vw;
}

/* サブ見出し */
.sub-heading {
  font-size: 2vw;
  font-weight: 700;
  padding: 1vw 0 10vw 2vw;
}

/* 画像グループ */
.group {
  width: 100%;
  /* 横幅いっぱいに設定 */
  height: auto;
  /* 高さは自動調整 */
  transform: translateY(1vw);
  bottom: 0;
  /* 下部に固定 */
  left: 0;
  /* 左端に配置 */
  margin: 0;
  /* マージンをリセット */
}

/* 各画像のスタイル */
.group .rectangle-4 {
  width: 4.38%;
  margin: 1vw 0vw 0vw 3vw;
}

.group .rectangle-5 {
  width: 5.69%;
  margin: 1vw 0vw 0vw 3vw;
}

.group .rectangle-6 {
  width: 7.11%;
  margin: 1vw 0vw 0vw 3vw;
}

.group .rectangle-7 {
  width: 9.41%;
  margin: 1vw 0vw 0vw 3vw;
}

.group .rectangle-8 {
  width: 10.83%;
  margin: 1vw 0vw 0vw 3vw;
}

/* HAKOロゴ画像 */
.group .HAKO {
  width: 38%;
  object-fit: contain;
  margin: 1vw 0vw 0vw 3vw;
}

/* レスポンシブ対応 - スマホ用スタイル */
@media screen and (max-width: 768px) {
  .main-heading {
    font-size: 7vw;
    padding: 8vw 0 0 2vw;
  }
  
  .sub-heading {
    font-size: 3vw;
    padding: 1vw 0 8vw 2vw;
  }
}