/* features-hux-07.css — 大きな写真に番号付きパネルを重ねる事業紹介。旧 features-mod-03 の置き換え。
 * 旧版の壊れ方: パネルの器に left:-300% と right:-300% を同時指定し width:auto!important を
 *   足していたため、幅が「包含ブロック幅+600%」に膨張していた(本番の実顧客2サイトで img が
 *   9335px 幅・left -3948px)。加えてセクションに z-index:-1 が付いていた。
 * 対策:
 *  - 重なりは「片側だけ inset を指定し、幅は明示」する。left/right を同時指定しない。
 *  - スマホでは重ねない(縦積み)。小さい画面で写真に文字を重ねると必ず読めなくなる。
 *  - パネルは不透明度の高い面色で可読性を確保する(スクリム任せにしない)。
 * .lgx は付けない。
 */
.features-hux-07 .mx-auto { margin-inline: auto; }
.features-hux-07 .max-w-7xl { max-width: 80rem; }
.features-hux-07 .px-4 { padding-inline: 1rem; }
.features-hux-07 .py-8 { padding-block: 2rem; }

.features-hux-07 .hux07-list { display: grid; gap: 2.5rem; }

/* 既定(スマホ・タブレット): 重ねない。写真の下にパネルを置く。 */
.features-hux-07 .hux07-item { display: grid; gap: 0; }
.features-hux-07 .hux07-media {
  margin: 0;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
}
.features-hux-07 .hux07-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.features-hux-07 .hux07-panel {
  background: var(--color-surface, var(--color-bg));
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 1.5rem 1.25rem;
}
.features-hux-07 .hux07-num {
  margin: 0 0 0.25em; font-weight: 700; line-height: 1;
  color: var(--color-primary); letter-spacing: 0.06em;
}
.features-hux-07 .hux07-title { margin: 0 0 0.6em; line-height: 1.4; }
.features-hux-07 .hux07-text { margin: 0 0 1.25rem; }
.features-hux-07 .hux07-more { margin: 0; }
.features-hux-07 .hux07-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.7em 2.2em; border-radius: 999px;
  background: var(--color-primary); color: var(--color-on-primary);
  text-decoration: none; font-weight: 600;
}
.features-hux-07 .hux07-btn:hover { opacity: 0.88; }

/* PC: ここで初めて重ねる。位置は片側 inset + 明示幅のみで決める。 */
@media (min-width: 1024px) {
  .features-hux-07 .px-4 { padding-inline: 2rem; }
  .features-hux-07 .hux07-list { gap: 4rem; }
  /* ★item を写真幅ぴったりに縮める。item が写真より広いと left/right の % が
     写真の外を指し、パネルが枠外へ出る(1440px で実測)。 */
  .features-hux-07 .hux07-item { position: relative; display: block; width: fit-content; margin-inline: auto; }
  .features-hux-07 .hux07-media { aspect-ratio: 21 / 9; border-radius: 0.5rem; }
  .features-hux-07 .hux07-panel {
    position: absolute;
    top: 50%;
    left: 4%;                 /* ★片側だけ。right は指定しない */
    width: min(42%, 460px);   /* ★幅は明示。auto にしない */
    transform: translateY(-50%);
    border-radius: 0.5rem;
    padding: 2rem 1.75rem;
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
  /* 偶数番目はパネルを右へ。ここでも left だけを付け替える。 */
  .features-hux-07 .hux07-item:nth-child(even) .hux07-panel { left: auto; right: 4%; }
}