/* 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;
  aspect-ratio: 4 / 3;
  max-height: 460px;
  overflow: hidden;
  border-radius: 0.5rem;
}
.features-hux-05 .hux05-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features-hux-05 .hux05-catch { margin: 0 0 0.75em; line-height: 1.3; text-wrap: balance; }
.features-hux-05 .hux05-lead { margin: 0 0 1.5rem; }
.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;
}
.features-hux-05 .hux05-btn:hover { opacity: 0.88; }

@media (min-width: 768px) {
  .features-hux-05 .px-4 { padding-inline: 1.5rem; }
  .features-hux-05 .hux05-grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 2.5rem; }
}
@media (min-width: 1024px) {
  .features-hux-05 .px-4 { padding-inline: 2rem; }
  .features-hux-05 .hux05-grid { gap: 4rem; }
}