/* --- ヒーローセクション全体 --- */
.introduction {
  position: relative; /* 子要素（スライダーとテキスト）の配置基準 */
  width: 100%;
  height: 60vh; /* ビューポートの高さの60%（お好みで調整） */
  overflow: hidden; /* はみ出した画像を隠す */
  /* ❗ Flexbox関連のプロパティは削除 */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

/* ❗セレクタを修正: .hero-section のみを使用 */
.hero-section {
  position: absolute; /* 親(.introduction)を基準に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* ❗親要素の高さに合わせて100%に設定 */
  z-index: 1; /* テキストより奥に配置 */
  overflow: hidden; 
}

.hero-carousel {
  display: flex;
  width: 100%; /* 画像3枚分 */
  height: 100%;
  transition: transform 10s ease-in-out; 
 /* ❗❗ 修正点：アニメーションを適用する ❗❗ */
  animation: slide 30s infinite; /* アニメーション名 slide、28秒かけて実行、無限に繰り返す */
}

.hero-carousel img {
  width: 100%; /* 画像1枚あたりの幅 */
  height: 100%;
  object-fit: cover;
  flex-shrink: 0; /* 縮小させないようにする */
}

/* --- キャッチコピー部分 --- */
.hero-text {
  position: absolute; /* ❗重ね合わせのために必須 */
  z-index: 2; /* スライダーより手前に配置 */
  
  /* 左右中央・下揃えの指定（これでOK） */
  bottom: 0; 
  left: 50%;
  transform: translateX(-50%);
  
  /* ❗幅を親要素に合わせる（左右中央寄せの基準） */
  width: 90%; 
  color: white;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-text .mincho-catch-line {
  /* ❗画面が大きいときは、自然な改行を優先するため幅は設定しない */
  /* max-width: 17em; を削除 */
  /* display: inline-block; を削除 */
  font-size: 3em;
  margin-bottom: 0.5em;
  width: 100%; /* 親要素の幅を使う */
}

/* ❗強制改行はレスポンシブ対応と矛盾するため、ここでは削除 */
/* .hero-text h1 span {
    display: block; 
} */

.hero-text .mincho-catch-line p {
  font-size: 1.2em;
}

/* --- 画面が小さい時の調整 --- */
@media screen and (max-width: 768px) {
  .introduction {
    /* 画面が小さい時は、高さをビューポートの35%に（例）*/
    height: 35vh; 
    /* または、横幅に合わせて高さを調整したい場合 */
    /* height: 50vw; (横長の画像を想定) */
  }

  .hero-text {
    width: 90%; /* レスポンシブで左右に余白 */
    /* position, bottom, left, transform はデフォルトから継承でOK */
  }

  .hero-text .mincho-catch-line {
    /* ❗画面が小さい時は文字サイズを小さく */
    font-size: 0.8rem; 
    /* width: 100%; はそのまま継承 */
    
    /* max-width: 11em; は、画面幅を最大限使いたいという要望に反するため削除 */
  }
  
 
  .hero-text .mincho-catch-line span {
    display: block;  /* ❗強制改行の解除がされていれば、ここは不要 */
  } 
  
  .hero-text .mincho-catch-line p {
    font-size: 1em;
  }
  .biz-flow-container h3 span{
    display: block;  /* ❗強制改行の解除がされていれば、ここは不要 */
  } 
}

/* --- アニメーションの修正 --- */
@keyframes slide {
  /* 1枚目 (0%移動) */
  0% { transform: translateX(0); }
  100% { transform: translateX(0); }
  
  /* 2枚目 (-25%移動) */
  /*33% { transform: translateX(-33%); }*/ /* ❗修正: -20% -> -25% */
  /*66% { transform: translateX(-33%); }*/ /* ❗修正: -20% -> -25% */
  
  /* 3枚目 (-50%移動) */
  /*66% { transform: translateX(-66%); }*/ /* ❗修正: -40% -> -50% */
  /*100% { transform: translateX(-66%); }*/ /* ❗修正: -40% -> -50% */
  
  /* 4枚目 (-75%移動) */
  /*60% { transform: translateX(-60%); }*/ /* ❗修正: -60% -> -75% */
  /*80% { transform: translateX(-60%); }*/ /* ❗修正: -60% -> -75% */

  /* 4枚目 (-75%移動) */
  /*80% { transform: translateX(-80%); }*/ /* ❗修正: -60% -> -75% */
  /*100% { transform: translateX(-80%); }*/ /* ❗修正: -60% -> -75% */
  
  /* 最後の画像で止まるように、最後の100%は次のスライドに備えて0%に戻す */
  100% { transform: translateX(0%); } 
}



/*--------------------------------------------------------------
# 3つの 約束とただ1つの 誇りを。
--------------------------------------------------------------*/
/* この明朝体フレーズを囲むコンテナのスタイル */
.mincho-catch-phrase {
    text-align: left;
    margin: 2rem 0;
}

/*--------------------------------------------------------------
# hero-text(「技術力」で安心な未来を支え繋げる)
--------------------------------------------------------------*/

/* 明朝体フレーズの各行（<p>タグ）のスタイル */
.hero-text .mincho-catch-line {
    font-family: "Zen Antique Soft", "BIZ UDPMincho", serif;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.05em;
    line-height: 1.0;
    font-size: 3.5rem;
}