/* ==========================================================================
   トップ「CRM への入口」のカード（.lp-card の変種・front-page*.php でだけ読む）
   --------------------------------------------------------------------------
   2026-09-19 オーナー指示: 画像ではなく LP と同じ動く画面を置き、画面だけ枠からはみ出させる。
   ・はみ出しを見せるためにカードの overflow を切らない。角丸は地（background）が持つので
     切らなくても丸いまま。文字の面の粒（::after）だけ角を合わせる
   ・SP は上へ 28px・左右へ 8px（本文の余白 16px の内側 → 横スクロールを出さない）
   ・PC は上へ 40px・左へ 32px（1280px 幅で画面の端から 20px 残る。48px では 5px まで寄った）
   ・画面の中で拡大する hover（§20 の scale 1.06）は画面が枠の外にあると不自然なので外す
   ========================================================================== */

.lp-card--live {
  --u: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  overflow: visible;
  margin-top: 28px;                         /* はみ出した分、上の節と詰まらないように */
}
.lp-card--live .lp-card__shot {
  aspect-ratio: auto;
  overflow: visible;
  padding: 0 calc(20 * var(--u)) calc(8 * var(--u));
}
.lp-card--live .lp-card__screen {
  position: relative;
  z-index: 2;
  margin: -28px -28px 0;                    /* shot の左右 20 ＋ 8 ぶん外へ */
  border-radius: calc(14 * var(--u));
  box-shadow: 0 22px 48px -14px rgba(0, 20, 26, .5), 0 6px 14px -6px rgba(0, 20, 26, .35);
}
.lp-card--live .lp-card__screen > img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  transform: none !important;
  transition: none;
}
.lp-card--live .lp-card__screen .live-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.lp-card--live .lp-card__screen.is-live > img {
  visibility: hidden;
}
.lp-card--live .lp-card__body::after {
  border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u));
}

@media (min-width: 1024px) {
  .lp-card--live {
    margin-top: 40px;
    align-items: stretch;                   /* 文字の面（粒）をカードの高さいっぱいに。center だと段ができた */
  }
  .lp-card--live .lp-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .lp-card--live .lp-card__logo {
    align-self: flex-start;                 /* flex の既定 stretch で横に伸びた（実測）ので元の大きさに */
  }
  .lp-card--live .lp-card__shot {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    padding: 0 calc(36 * var(--u)) calc(48 * var(--u)) 0;
  }
  .lp-card--live .lp-card__screen {
    width: calc(100% + 32px);
    margin: -40px 0 0 -32px;
  }
  .lp-card--live .lp-card__body::after {
    border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
  }
}