/* 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; }
  .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%;
    width: min(42%, 460px);
    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);
  }
  .features-hux-07 .hux07-item:nth-child(even) .hux07-panel { left: auto; right: 4%; width: min(42%, 460px); }
}

/* ============================================================
 * hux07-v3 — シンプルで安全なカード型レイアウト。
 * position:absolute や order を使わず、通常のフローだけで組む。
 * 写真は上、テキストは下という縦積みを基本にし、PCでは2カラムの
 * カードグリッドとして並べる(左右非対称にはしない = 崩れの原因を排除)。
 * ============================================================ */
.hux07-v3 .hux07v3-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.hux07v3-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-primary-light);
  border-radius: calc(var(--radius-card) * 3);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.hux07v3-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -14px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.hux07v3-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex: none;
}
.hux07v3-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
  transition: transform 0.6s ease;
}
.hux07v3-card:hover .hux07v3-media img { transform: scale(1.05); }

.hux07v3-num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
  line-height: 1;
}

.hux07v3-body {
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hux07v3-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-heading-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.hux07v3-title {
  font-size: var(--fs-mod-title);
  font-weight: 700;
  color: var(--color-heading-ink);
  line-height: 1.4;
  margin: 0 0 0.75rem;
}
.hux07v3-text {
  color: var(--color-text-muted);
  line-height: 1.85;
  margin: 0 0 1.5rem;
  flex: 1;
}
.hux07v3-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 44px;
  padding: 0.7em 1.75em;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}
.hux07v3-btn svg { width: 1.1em; height: 1.1em; transition: transform 0.3s ease; }
.hux07v3-btn:hover { background: var(--color-primary-dark); color: #fff; opacity: 1; }
.hux07v3-btn:hover svg { transform: translateX(3px); }

@media (min-width: 720px) {
  .hux07v3-list { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}