/* features-hux-16.css — 斜めに切り取った帯状の写真と、その下のコピー。旧 features-th28 の置き換え。
 * 旧版の壊れ方: 全幅の写真を傾ける作りで、左右に 259px / 125px はみ出していた。
 * 対策: 傾きは clip-path で「見た目だけ」斜めにする。要素は矩形のままなので溢れない。
 *   clip-path 非対応環境では単なる矩形の帯になる(壊れない)。 */
.features-hux-16 .mx-auto{margin-inline:auto}
.features-hux-16 .max-w-7xl{max-width:80rem}
.features-hux-16 .px-4{padding-inline:1rem}
.features-hux-16 .py-8{padding-block:2rem}

.features-hux-16 .hux16-band{overflow:hidden}
.features-hux-16 .hux16-media{margin:0;aspect-ratio:16/9;max-height:420px;overflow:hidden}
.features-hux-16 .hux16-media img{display:block;width:100%;height:100%;object-fit:cover}
.features-hux-16 .hux16-body{max-width:44rem}
.features-hux-16 .hux16-title{margin:0 0 .6em;line-height:1.35;text-wrap:balance}
.features-hux-16 .hux16-text{margin:0 0 1.5rem}
.features-hux-16 .hux16-more{margin:0}
.features-hux-16 .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-16 .hux-btn:hover{opacity:.88}

@media (min-width:768px){
  .features-hux-16 .px-4{padding-inline:1.5rem}
  .features-hux-16 .hux16-media{aspect-ratio:21/9}
  /* ★傾きは clip-path で見た目だけ。要素の矩形は変えないので横に溢れない。 */
  .features-hux-16 .hux16-media{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
}
@media (min-width:1024px){
  .features-hux-16 .px-4{padding-inline:2rem}
  .features-hux-16 .hux16-media{aspect-ratio:3/1;max-height:460px}
  .features-hux-16 .hux16-body{margin-top:-2rem}
}