/* 会社概要専用ヒーロー */
.hero-contact {
     min-height: 400px; /* 最低でもこれだけの高さを確保 */
  height: 80vh;
    background-color: rgb(237, 235, 235); 
  position: relative;
  width: 100%;
  background-image: url('Comunication-yoko.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 0; /* ロゴより低くして背景として表示 */
}
.hero-contact .hero-contact-overlay {
  position: absolute;
    bottom: 0%; /* 下からの位置 */
    left: 15%;
    transform: translateX(-50%);
    width: 80%; /* 横幅を十分に確保 */
    max-width: 1000px; /* 最大幅を指定 */
    text-align: center;
    color: #bbb8b8;
  z-index: 1; /* タイトルを背景より上に表示 */
}

/* タイトル */
.hero-contact-title {
      font-size: 4rem; /* タイトルサイズ */
   margin: 0%;          /* 上下の余白リセット */
    padding: 0;
    line-height: 1.2;   /* タイトル行間 */
}
/* サブタイトル */
.hero-contact-subtitle {
     font-size: 1.5rem; /* サブタイトルサイズ */
    margin-top: 50px; /* 上の余白をリセット */
}
.hero-contact {
    position: relative; /* または absolute/fixed などレイアウトに合わせて */
    z-index: 1; /* 他の要素より前面に */
}

.hero-contact .hero-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2; /* 背景より前 */
    color: white;
}


/* スマホ対応 */
@media (max-width: 768px) {
  .hero-contact {
    height: 50vh; /* 高さを控えめに */
    min-height: 300px; /* 最低高さ */
    background-position: center top; /* 背景画像の重要部分を上に */
  }

  .hero-contact-overlay {
    bottom: 20%; /* 下寄せを少し上に */
    left: 50%;   /* 中央寄せ */
    transform: translateX(-50%);
    width: 90%;  /* 幅を広くして文字が折り返しやすく */
    text-align: center;
    padding: 0 10px; /* 横余白 */
  }

  .hero-contact-title {
    font-size: 2rem; /* タイトルサイズを小さめに */
    margin-left: 20px;
  }

  .hero-contact-subtitle {
    font-size: 1rem; /* サブタイトルも小さく */
    margin-top: 20px;
    margin-left: 20px;
  }

  .hero-contact .hero-text {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    padding: 0 10px;
  }

  /* 左上固定ロゴも少し小さく */
  .fixed-logo {
    top: 10px;
    left: 10px;
    width: 50px; /* 必要に応じて */
  }
  
}