/* ============================================================
   shortform-page.css  —  live-page.css の差分のみ
   ============================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. HERO — メイン画像 + 動画ウィジェット
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-sf-hero-visual {
  display: block;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* スライドラッパー（2640×1600 の2枚切り出し画像） */
.sl-sf-slides-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2640 / 1600;
  overflow: hidden;
}

.sl-sf-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.sl-sf-slide.active {
  opacity: 1;
}

/* 動画ウィジェット（右下オーバーレイ） */
.sl-sf-video-widget {
  position: absolute;
  bottom: 4%;
  right: 2%;
  width: 16%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 5;
}

.sl-sf-video-widget video {
  width: 100%;
  height: auto;
  display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. FEATURES — 2カラム横並びコンテナ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-sf-feat-two-col {
  max-width: var(--pg-max-w);
  margin: 0 auto 20px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 左カード（コンテンツから繋がる）：オレンジ→コーラルグラデーション */
.sl-sf-feat-card--warm {
  background: linear-gradient(135deg, #FF9B5F 0%, #FF6863 100%) !important;
}

/* 左カード（目に見える成果）：ライトピンク */
.sl-sf-feat-card--pink {
  background: #FFF0EE !important;
}

/* 右カード画像：カードのpadding（36px）を無視して全幅に広げる */
.sl-lv-feat-card-img.sl-sf-feat-card-img--right {
  margin-left: -36px;
  margin-right: -36px;
  width: calc(100% + 72px);
  overflow: hidden;
}
.sl-lv-feat-card-img.sl-sf-feat-card-img--right > img {
  width: 100% !important;
  border-radius: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. FEATURES — セクション見出し（2つ目）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-sf-section-head {
  max-width: var(--pg-max-w);
  margin: 120px auto 72px;
  padding: 0 32px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. FEATURES — フルワイドカード（PIP等）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-sf-feat-wide-wrap {
  max-width: var(--pg-max-w);
  margin: 0 auto;
  padding: 0 32px;
}

.sl-sf-feat-wide {
  background: #111;
  border-radius: var(--pg-radius);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  height: 460px;
}

.sl-sf-feat-wide-text {
  flex: 1;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.sl-sf-feat-wide-text .sl-lv-feat-title { color: #fff; }
.sl-sf-feat-wide-text .sl-lv-feat-desc  { color: rgba(255,255,255,0.55); }

/* 2枚のphone画像を横並び・上揃え・高さ個別制御 */
.sl-sf-feat-wide-imgs {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
}
.sl-sf-feat-wide-imgs img {
  width: auto;
  display: block;
  flex-shrink: 0;
}
/* 左：拡大してはみ出す */
.sl-sf-feat-wide-imgs img:first-child {
  height: 128%;
}
/* 右：小さめ・左に少し重なり・下にずらす */
.sl-sf-feat-wide-imgs img:last-child {
  height: 72%;
  margin-left: -24px;
  margin-top: 32px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   テキスト（裸）× 画像カード の横並び
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-sf-feat-split {
  max-width: var(--pg-max-w);
  margin: 0 auto 120px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 64px;
}

.sl-sf-feat-split-text {
  flex: 1;
  min-width: 0;
}
.sl-sf-feat-split-text .sl-lv-feat-title {
  font-size: clamp(20px, 2vw, 28px);
  margin-bottom: 16px;
}

.sl-sf-feat-split-card {
  width: 55%;
  flex-shrink: 0;
  background: var(--pg-gray-bg);
  border-radius: var(--pg-radius);
  overflow: hidden;
}
.sl-sf-feat-split-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右カード（導入コード）：青紫グラデーション */
.sl-sf-feat-card--code {
  background: linear-gradient(135deg, #5b9eff 0%, #8b5cf6 100%) !important;
}
.sl-sf-feat-card--code .sl-lv-feat-title { color: #fff; }
.sl-sf-feat-card--code .sl-lv-feat-desc  { color: rgba(255,255,255,0.85); }

/* コードボックスを画像エリアに収める */
.sl-lv-feat-card-img.sl-sf-feat-card-img--code {
  align-items: flex-end;
  padding-bottom: 0;
}
.sl-lv-feat-card-img.sl-sf-feat-card-img--code .sl-lv-impl-code-box {
  width: 100%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. FEATURES — feat1 バッジ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-sf-feat1-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,0.4);
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. TESTIMONIALS — シンプル画像構成
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-sf-testi-comp {
  /* testi-comp の relative/absolute positioning は live-page.css から継承 */
}

.sl-sf-testi-img {
  position: absolute;
  width: 82%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. CTA — アウトラインボタン（ダーク背景用）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sl-sf-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.sl-btn-outline-dark {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  background: transparent;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.sl-btn-outline-dark:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {

  /* ── Hero text ── */
  /* clamp で画面幅に比例させ、<br> 位置で折れても1行に収まるサイズに */
  .sl-lv-hero .sl-lv-hero-h1 {
    font-size: clamp(28px, 6.5vw, 42px);
  }
  .sl-lv-hero .sl-lv-hero-desc {
    font-size: 14px;
  }
  /* 説明文の強制改行を解除して自然に折り返す */
  .sl-lv-hero .sl-lv-hero-desc br { display: none; }

  /* ── Hero visual ── */
  .sl-sf-video-widget {
    width: 22%;
    bottom: 3%;
    right: 2%;
  }

  /* ── 2-col card grids → 1 column ── */
  .sl-sf-feat-two-col {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }

  /* Negative-margin full-width image: match mobile card padding (28px) */
  .sl-lv-feat-card-img.sl-sf-feat-card-img--right {
    margin-left: -28px;
    margin-right: -28px;
    width: calc(100% + 56px);
  }

  /* ── Section headings ── */
  .sl-sf-section-head {
    margin: 64px auto 40px;
    padding: 0 20px;
  }

  /* ── Wide feature card: stack vertically ── */
  .sl-sf-feat-wide-wrap { padding: 0 20px; }
  .sl-sf-feat-wide {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .sl-sf-feat-wide-text {
    padding: 28px 28px 24px;
  }
  .sl-sf-feat-wide-imgs {
    height: 260px;
    justify-content: center;
  }
  .sl-sf-feat-wide-imgs img:first-child {
    height: 100%;
    margin-left: 0;
  }
  .sl-sf-feat-wide-imgs img:last-child {
    display: none;
  }

  /* ── Split sections: stack vertically ── */
  .sl-sf-feat-split {
    flex-direction: column;
    gap: 24px;
    padding: 0 20px;
    margin-bottom: 48px !important;
  }
  .sl-sf-feat-split-card {
    width: 100%;
  }
  /* Card-first layout: put text above card */
  .sl-sf-feat-split > .sl-sf-feat-split-card:first-child { order: 2; }
  .sl-sf-feat-split > .sl-sf-feat-split-text:last-child   { order: 1; }
}

@media (max-width: 480px) {
  /* より狭い画面でさらに縮小（7.5vw: 375px→28px, 320px→24px） */
  .sl-lv-hero .sl-lv-hero-h1 {
    font-size: clamp(22px, 7.5vw, 32px);
  }

  /* Hide video widget on small phones */
  .sl-sf-video-widget { display: none; }

  .sl-sf-feat-wide-imgs { height: 200px; }

  .sl-sf-section-head { margin-top: 48px; }
}