/* =============================================================================
   画像＋テキストコンポーネント
   Figma: node-id=60:1886 / Image + Text PC
         node-id=129:2795 / Image + Text SP
   ============================================================================= */

/* =============================================================================
   コンテナ（PC: 横並び）
   ============================================================================= */

.image-text {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--margin-16);
  width: 100%;
}

/* =============================================================================
   画像（PC: 左側 50%、16:9）
   ============================================================================= */

.image-text__image {
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* =============================================================================
   テキストブロック（PC: 右側 50%）
   ============================================================================= */

.image-text__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--margin-8);
  padding: 0 var(--margin-8);
}

/* =============================================================================
   タイトル（heading-3 の text-align: center を左寄せに上書き）
   ============================================================================= */

.image-text__body .heading-3 {
  text-align: left;
}

/* =============================================================================
   本文テキスト
   ============================================================================= */

.image-text__text {
  display: flex;
  flex-direction: column;
  gap: var(--margin-8);
  font-size: var(--font-size-18);
}

/* =============================================================================
   SP レスポンシブ（max-width: 1023px）
   ============================================================================= */

@media (max-width: 1023px) {
  /* 縦積みレイアウト（画像上・テキスト下） */
  .image-text {
    flex-direction: column;
  }

  /* 画像をフル幅に */
  .image-text__image {
    flex: none;
    width: 100%;
  }

  /* テキストブロックの横パディングを解除 */
  .image-text__body {
    padding: 0;
  }
}