/* features-hux-17.css — 色帯の上に大きな写真を重ねるセクション。旧 features-th29 の置き換え。
 * 旧版の壊れ方: 写真を色帯から左へはみ出させる作りで、左に 169px 溢れていた。
 * 対策: グリッドで重なりを作る(grid-area を同じにする)。負のマージンで外へ出さない。 */
.features-hux-17 .mx-auto{margin-inline:auto}
.features-hux-17 .max-w-7xl{max-width:80rem}
.features-hux-17 .px-4{padding-inline:1rem}
.features-hux-17 .py-8{padding-block:2rem}

.features-hux-17 .hux17-wrap{display:grid;gap:0}
.features-hux-17 .hux17-band{background:var(--color-surface,var(--color-bg));border-radius:.5rem;padding:1.75rem 1.25rem;order:2}
.features-hux-17 .hux17-media{margin:0;aspect-ratio:16/9;max-height:460px;overflow:hidden;border-radius:.5rem;order:1;margin-bottom:1rem}
.features-hux-17 .hux17-media img{display:block;width:100%;height:100%;object-fit:cover}
.features-hux-17 .hux17-title{margin:0 0 .6em;line-height:1.35;text-wrap:balance}
.features-hux-17 .hux17-text{margin:0 0 1.5rem}
.features-hux-17 .hux17-more{margin:0}
.features-hux-17 .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-17 .hux-btn:hover{opacity:.88}

@media (min-width:1024px){
  .features-hux-17 .px-4{padding-inline:2rem}
  /* ★重なりは grid-area を共有して作る。負のマージンで枠外へ出さない。 */
  .features-hux-17 .hux17-wrap{grid-template-columns:repeat(12,1fr);align-items:center}
  .features-hux-17 .hux17-band{grid-column:1 / 9;grid-row:1;order:0;padding:3rem 2.5rem;min-height:22rem;display:flex;flex-direction:column;justify-content:center}
  .features-hux-17 .hux17-media{grid-column:6 / 13;grid-row:1;order:0;margin-bottom:0;aspect-ratio:4/3;box-shadow:0 10px 40px rgba(0,0,0,.18)}
  .features-hux-17 .hux17-body{max-width:26rem}
}