/* 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:2.5rem}
.features-hux-12 .hux12-item{display:grid;gap:0;border-radius:var(--radius-card,18px);overflow:hidden;box-shadow:var(--shadow-card,0 12px 30px rgba(15,76,92,0.12))}
.features-hux-12 .hux12-media{margin:0;aspect-ratio:16/9;max-height:460px;overflow:hidden}
.features-hux-12 .hux12-media img{display:block;width:100%;height:100%;object-fit:cover}
.features-hux-12 .hux12-panel{background:var(--color-heading-ink,#0F4C5C);color:#fff;padding:1.75rem 1.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:rgba(255,255,255,.9)}
.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-accent);color:var(--color-on-accent);text-decoration:none;font-weight:600;transition:opacity .3s ease}
.features-hux-12 .hux-btn:hover{opacity:.85}

@media (min-width:768px){
  .features-hux-12 .px-4{padding-inline:1.5rem}
  .features-hux-12 .hux12-list{gap:2.5rem}
  .features-hux-12 .hux12-item{grid-template-columns:1fr 1fr;align-items:stretch}
  .features-hux-12 .hux12-media{aspect-ratio:auto;max-height:none;height:100%}
  .features-hux-12 .hux12-panel{display:flex;flex-direction:column;justify-content:center}
  .features-hux-12 .hux12-item:nth-child(even) .hux12-media{order:2}
  .features-hux-12 .hux12-item:nth-child(even) .hux12-panel{order:1}
}
@media (min-width:1024px){
  .features-hux-12 .px-4{padding-inline:2rem}
  .features-hux-12 .hux12-panel{padding:2.5rem 3rem}
}