/* features-hux-11.css — 主サービスを大きく、他2つを小さく見せる非対称の3カード。
 * 旧 features-th07-bnr の置き換え。旧版は figure の高さが取れず img が 9.59px に圧潰していた。
 * 対策: 器を aspect-ratio で確定。絶対配置と margin:auto による中央寄せを使わない。 */
.features-hux-11 .mx-auto{margin-inline:auto}
.features-hux-11 .max-w-7xl{max-width:80rem}
.features-hux-11 .px-4{padding-inline:1rem}
.features-hux-11 .py-8{padding-block:2rem}

.features-hux-11 .hux11-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.features-hux-11 .hux11-card{display:block;text-decoration:none;color:inherit;border-radius:.5rem;overflow:hidden;background:var(--color-surface,var(--color-bg))}
.features-hux-11 .hux11-media{margin:0;aspect-ratio:16/9;max-height:460px;overflow:hidden}
.features-hux-11 .hux11-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.features-hux-11 .hux11-card:hover .hux11-media img{transform:scale(1.04)}
.features-hux-11 .hux11-cap{padding:1rem 1.1rem 1.25rem}
.features-hux-11 .hux11-title{margin:0 0 .35em;line-height:1.4}
.features-hux-11 .hux11-text{margin:0}
@media (min-width:768px){
  .features-hux-11 .px-4{padding-inline:1.5rem}
  .features-hux-11 .hux11-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
  /* 主サービスだけ2カラムぶん使う=非対称モザイク */
  .features-hux-11 .hux11-lead{grid-column:1 / -1}
  .features-hux-11 .hux11-lead .hux11-media{aspect-ratio:21/9}
}
@media (min-width:1024px){
  .features-hux-11 .px-4{padding-inline:2rem}
  .features-hux-11 .hux11-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
  .features-hux-11 .hux11-lead{grid-column:span 2;grid-row:span 2}
  .features-hux-11 .hux11-lead .hux11-media{aspect-ratio:4/3}
  .features-hux-11 .hux11-card:not(.hux11-lead){grid-column:span 2}
}