/* LP-B: プレイヤー向け
   構造・トークンは /static/shared/lp-base.css と共通。
   このファイルには LP-B 固有の上書きだけを置く。 */

/* ── キービジュアル: 背景として敷いてキーメッセージを重ねる ─────
   画像は左側 ~55% が cream の余白、右側 ~45% にボール / シューズ。
   その左余白の上にコピーを載せる構成。
   ============================================================= */
/* main LP と同手法: ヒーローを全幅化し、クリーム抜きの被写体を cover で
   伸ばさず height 基準の自然サイズで右下に置く。上側はマスクでフェードして
   左コピーの可読性を確保。角丸カード・cream グラデ overlay は廃止
   （透明抜きでページ地に直接溶けるため不要）。 */
html { overflow-x: clip; }   /* 全幅 100vw による横スクロール防止 */

.lp-hero.lp-hero {
  position: relative;
  grid-template-columns: 1fr;
  min-height: 440px;
  margin-top: 0;
  padding: 56px 0 64px;
  isolation: isolate;
  align-items: center;
}

/* 被写体: 100vw に逃がして右下アンカー（左はなりゆきで地に溶ける）。 */
.lp-hero .lp-hero__visual {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.lp-hero .lp-hero__visual picture {
  display: block;
  height: 100%;
  text-align: right;            /* inline img を右端あわせ */
}
.lp-hero .lp-hero__visual img {
  display: inline-block;
  height: 100%;
  width: auto;
  max-width: 100vw;
  object-fit: contain;
  object-position: right bottom;
  /* 上側＝被写体上部は見出し付近でフェードアウトさせ可読性を確保。 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40%);
}

.lp-hero .lp-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 56%;
  padding-left: 24px;
}

/* 本文・CTA 注記が被写体に重なる全幅レイアウト時（≥721px）だけ、
   半透明クリーム＋blur の角丸プレートを敷いて可読性を確保
   （main LP / branch ヒーローと同じ処理）。モバイルは図版が下に分離するので不要。 */
@media (min-width: 721px) {
  .lp-hero .lp-hero__sub,
  .lp-hero .lp-cta-note {
    display: inline-block;
    background: color-mix(in srgb, var(--kr-bg) 74%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: var(--kr-radius-sm);
  }
  .lp-hero .lp-hero__sub { padding: 10px 16px; }
  .lp-hero .lp-cta-note { padding: 5px 12px; }
}

/* ── 720px 以下: 全幅重ねをやめ、図版をコピー下の別ブロックに分離。 */
@media (max-width: 720px) {
  .lp-hero.lp-hero {
    min-height: 0;
    padding: 32px 0 40px;
    isolation: auto;
  }
  .lp-hero .lp-hero__visual {
    position: static;
    transform: none;
    left: auto;
    width: auto;
    height: auto;
    z-index: auto;
  }
  .lp-hero .lp-hero__visual picture { text-align: center; }
  .lp-hero .lp-hero__visual img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .lp-hero .lp-hero__copy {
    max-width: none;
    padding-left: 0;
  }
}