/* features-hux-12.css — 大きな写真に濃色パネルを重ねて交互に見せるバナー。
 * 旧 features-th12 の置き換え。旧版は rgba(0,0,0,.8) の純黒パネルが重く、
 * min-width:530px が 375px 幅で横に溢れていた。
 * 対策: パネルは黒 55% に抑え、幅は % 指定。重ねるのは 1024px 以上のみ。 */
.features-hux-12 .mx-auto{margin-inline:auto}
.features-hux-12 .max-w-7xl{max-width:80rem}
.features-hux-12 .px-4{padding-inline:1rem}
.features-hux-12 .py-8{padding-block:2rem}

.features-hux-12 .hux12-list{display:grid;gap:2rem}
.features-hux-12 .hux12-item{display:grid;gap:0}
.features-hux-12 .hux12-media{margin:0;aspect-ratio:16/9;max-height:460px;overflow:hidden;border-radius:.5rem .5rem 0 0}
.features-hux-12 .hux12-media img{display:block;width:100%;height:100%;object-fit:cover}
.features-hux-12 .hux12-panel{background:rgba(0,0,0,.55);color:#fff;padding:1.5rem 1.25rem;border-radius:0 0 .5rem .5rem}
.features-hux-12 .hux12-title{margin:0 0 .5em;line-height:1.4;color:#fff}
.features-hux-12 .hux12-text{margin:0 0 1.25rem;color:#fff}
.features-hux-12 .hux12-more{margin:0}
.features-hux-12 .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-12 .hux-btn:hover{opacity:.88}

@media (min-width:768px){ .features-hux-12 .px-4{padding-inline:1.5rem} .features-hux-12 .hux12-list{gap:3rem} }
@media (min-width:1024px){
  .features-hux-12 .px-4{padding-inline:2rem}
  .features-hux-12 .hux12-item{position:relative;display:block;width:fit-content;margin-inline:auto}
  .features-hux-12 .hux12-media{aspect-ratio:21/9;border-radius:.5rem}
  .features-hux-12 .hux12-panel{position:absolute;top:50%;transform:translateY(-50%);left:6%;width:min(40%,440px);border-radius:.5rem;padding:2rem 1.75rem}
  .features-hux-12 .hux12-item:nth-child(even) .hux12-panel{left:auto;right:6%}
}