/* features-hux-10.css — 左右に写真、中央にブランドコピーを置く左右対称セクション。
 * 旧 features-th17 の置き換え。
 * 旧版の壊れ方: 負の z-index を持ち、写真の高さが器から取れず不安定だった。
 * 対策: 3カラムグリッドで幅を分配。負の z-index も絶対配置も使わない。
 *   狭い画面では写真1枚+コピーの縦積みにし、2枚目は隠さず下に置く。
 * .lgx は付けない。
 */
.features-hux-10 .mx-auto{margin-inline:auto}
.features-hux-10 .max-w-7xl{max-width:80rem}
.features-hux-10 .px-4{padding-inline:1rem}
.features-hux-10 .py-8{padding-block:2rem}

.features-hux-10 .hux10-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.features-hux-10 .hux10-media{margin:0;aspect-ratio:4/3;max-height:460px;overflow:hidden;border-radius:.5rem}
.features-hux-10 .hux10-media img{display:block;width:100%;height:100%;object-fit:cover}
.features-hux-10 .hux10-body{text-align:center}
.features-hux-10 .hux10-en{margin:0 0 .6em;letter-spacing:.24em;text-transform:uppercase;color:var(--color-primary);font-size:var(--fs-small,.9375rem)}
.features-hux-10 .hux10-title{margin:0 0 .75em;line-height:1.4;text-wrap:balance}
.features-hux-10 .hux10-text{margin:0 0 1.5rem}
.features-hux-10 .hux10-more{margin:0}
.features-hux-10 .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-10 .hux-btn:hover{opacity:.88}

@media (min-width:768px){
  .features-hux-10 .px-4{padding-inline:1.5rem}
  .features-hux-10 .hux10-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;align-items:center}
  /* 768〜1023px: 写真2枚を上下に、コピーは全幅で中央 */
  .features-hux-10 .hux10-body{grid-column:1 / -1;order:-1}
}
@media (min-width:1024px){
  .features-hux-10 .px-4{padding-inline:2rem}
  /* PC: 写真 - コピー - 写真 の左右対称 */
  .features-hux-10 .hux10-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:2.5rem}
  .features-hux-10 .hux10-body{grid-column:auto;order:0}
  .features-hux-10 .hux10-media{aspect-ratio:3/4}
}