/* features-hux-05.css — 写真+特大キャッチの2分割。旧 features-th04 の置き換え。
 * 設計:
 *  - モバイルファースト(既定=縦積み / 768px以上で2カラム)
 *  - 写真は器を aspect-ratio で確定させ object-fit:cover で敷く
 *    (旧 th04 は figure{height:100%} が 0 に潰れて写真が消えていた。器の高さを
 *     行から貰わない作りにして同じ壊れ方を構造的に防ぐ)
 *  - .lgx を付けない = float グリッドを継承しない
 *  - 見出しサイズ/本文サイズ/写真上限/コンテナ幅は _base/hux-bind.css が束縛する
 */
.features-hux-05 .mx-auto { margin-inline: auto; }
.features-hux-05 .max-w-7xl { max-width: 80rem; }
.features-hux-05 .px-4 { padding-inline: 1rem; }
.features-hux-05 .py-8 { padding-block: 2rem; }

.features-hux-05 .hux05-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

/* 写真: 器の高さを比率で確定 + cover。行の高さに依存しない。
   ユーザー指定でさらに縮小(最大幅を絞り中央寄せ、高さも低めに)。 */
.features-hux-05 .hux05-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: none;
  overflow: hidden;
  border-radius: 0.75rem;
}
.features-hux-05 .hux05-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features-hux-05 .hux05-media {
  order: 1;
}

.features-hux-05 .hux05-body {
  order: 2;
  display: flex;
  flex-direction: column;
}

.features-hux-05.hux05-image-left-half .hux05-grid {
  grid-template-columns: 1fr;
}
.features-hux-05.hux05-image-left-half .hux05-media {
  width: 50%;
  margin: 0;
  order: 1;
}
.features-hux-05.hux05-image-left-half .hux05-body {
  order: 2;
}
@media (min-width: 768px) {
  .features-hux-05.hux05-image-left-half .hux05-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .features-hux-05.hux05-image-left-half .hux05-media {
  width: 100%;
  }
}
.features-hux-05.hux05-no-image .hux05-grid {
  grid-template-columns: 1fr;
}
.features-hux-05.hux05-no-image .hux05-body {
  order: 1;
  max-width: 100%;
}

/* section.hux.features-hux-05.hux05-image-left-half (1件限定): 画像を左半分サイズ・テキストを右に配置 */
.features-hux-05.hux05-image-left-half .hux05-grid {
  grid-template-columns: 1fr;
}
.features-hux-05.hux05-image-left-half .hux05-media {
  width: 50%;
  margin: 0;
  order: 1;
}
.features-hux-05.hux05-image-left-half .hux05-body {
  order: 2;
}
@media (min-width: 768px) {
  .features-hux-05.hux05-image-left-half .hux05-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .features-hux-05.hux05-image-left-half .hux05-media {
    width: 100%;
  }
}

.features-hux-05 .hux05-catch { margin: 0 0 0.75em; line-height: 1.35; text-wrap: balance; }
.features-hux-05 .hux05-lead { margin: 0 0 1.75rem; line-height: 1.85; color: var(--color-text-muted); }
.features-hux-05 .hux05-more { margin: 0; }

/* CTA: タッチ端末の最小タップ領域 44px を確保する */
.features-hux-05 .hux05-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85em 2.5em;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}
.features-hux-05 .hux05-btn:hover { opacity: 0.88; transform: translateY(-2px); }

@media (min-width: 768px) {
  .features-hux-05 .px-4 { padding-inline: 1.5rem; }
  .features-hux-05 .hux05-grid { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); gap: 3rem; align-items: center; }
  .features-hux-05 .hux05-media { aspect-ratio: 4 / 3; max-height: 95px; }
}
@media (min-width: 1024px) {
  .features-hux-05 .px-4 { padding-inline: 2rem; }
  .features-hux-05 .hux05-grid { gap: 4.5rem; }
  .features-hux-05 .hux05-media { max-height: 105px; }
}