/* features-hux-15.css — 大きな写真の上にコピーパネルを重ねるセクション。旧 features-th16 の置き換え。
 * 旧版の壊れ方: 背景写真が画面外まで溢れ、テキストがはみ出していた。本番でも <img> が0枚だった。
 * 対策: 写真は <img> で置き、器を aspect-ratio で確定。背景画像に頼らない。
 *   重ねるのは 1024px 以上のみ。重ねるときは可読性のためスクリムを敷く。 */
.features-hux-15 .mx-auto{margin-inline:auto}
.features-hux-15 .max-w-7xl{max-width:80rem}
.features-hux-15 .px-4{padding-inline:1rem}
.features-hux-15 .py-8{padding-block:2rem}

.features-hux-15 .hux15-stage{position:relative}
.features-hux-15 .hux15-media{margin:0;aspect-ratio:16/9;max-height:460px;overflow:hidden}
.features-hux-15 .hux15-media img{display:block;width:100%;height:100%;object-fit:cover}
.features-hux-15 .hux15-panel{padding:1.75rem 1.25rem;background:var(--color-surface,var(--color-bg))}
.features-hux-15 .hux15-title{margin:0 0 .6em;line-height:1.35;text-wrap:balance}
.features-hux-15 .hux15-text{margin:0 0 1.5rem}
.features-hux-15 .hux15-more{margin:0}
.features-hux-15 .hux-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.7em 2.2em;border-radius:999px;background:var(--color-primary);color:var(--color-on-primary);text-decoration:none;font-weight:600}
.features-hux-15 .hux-btn:hover{opacity:.88}

@media (min-width:1024px){
  /* ★ここから重ねる。スクリムで可読性を確保し、文字は白で固定する
     (背景が写真なので --color-on-* では可読性を保証できない)。 */
  .features-hux-15 .hux15-media{aspect-ratio:21/9;max-height:560px}
  .features-hux-15 .hux15-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 60%);pointer-events:none}
  .features-hux-15 .hux15-panel{position:absolute;top:50%;left:6%;transform:translateY(-50%);width:min(46%,520px);background:transparent;padding:0;color:#fff}
  .features-hux-15 .hux15-title,.features-hux-15 .hux15-text{color:#fff}
}