/* =========================================================
   Rin Blog Apps — sp.css
   ページ2固有:スマホアプリの紹介ブロック
   白いカードに入れず、アイコンを卓の上に直置きして
   接地影で浮かせる(iOSホーム画面風)
   ========================================================= */

.sp-lead {
  margin: 0 0 38px;
  font-size: clamp(13px, 2.8vw, 15px);
  color: var(--ink-soft);
}

/* ---------- ブロックの縦積み(区切りは余白のみ) ---------- */
.showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 72px);
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- ブロック(アイコン左+情報右・枠なし) ---------- */
.sp-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon head"
    "icon desc"
    "icon cta";
  column-gap: clamp(24px, 4vw, 36px);
  row-gap: 4px;
  align-items: start;
}

/* ---------- アイコン(卓に直置き) ----------
   元画像は360×360px。Retina(2x)で粗くならないよう
   表示サイズは最大160px角(=180px制約の範囲内)に抑える */
.sp-icon-wrap {
  grid-area: icon;
  position: relative;
  width: clamp(96px, 18vw, 160px);
}

/* 接地影(アイコン下の楕円)。ホバーで広がって薄くなり離陸感を出す */
.sp-icon-wrap::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -14px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(96, 74, 42, .32), transparent 72%);
  transition: transform .18s ease, opacity .18s ease;
}

.sp-icon {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 22%;            /* iOSアイコンに近い角丸比率 */
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(96, 74, 42, .18), 0 12px 24px -6px rgba(96, 74, 42, .32);
  transition: transform .18s ease, box-shadow .18s ease;
}

.sp-icon img {
  width: 100%;
  height: auto;
}

/* 画像の縁に薄いハイライトを重ねてエッジを立てる */
.sp-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .25);
  pointer-events: none;
}

.sp-icon:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 10px rgba(96, 74, 42, .16), 0 22px 36px -8px rgba(96, 74, 42, .34);
}

.sp-icon-wrap:has(.sp-icon:hover)::after {
  transform: scaleX(1.12);
  opacity: .55;
}

/* 番号プレート(アイコン左上の角) */
.sp-icon-wrap .num-plate {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 2;
}

/* NEWバッジ(アイコン右上の角の赤いステッカー) */
.sp-badge {
  position: absolute;
  top: -10px;
  right: -12px;
  z-index: 2;
  padding: 4px 14px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  border-radius: 8px;
  box-shadow: 0 3px 7px rgba(96, 74, 42, .30);
  transform: rotate(3deg);
}

/* ---------- 見出し・本文(卓の上に直接) ---------- */
.sp-head { grid-area: head; min-width: 0; }

.sp-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.sp-platform {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--desk-line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.sp-name {
  margin: 0;
  font-size: clamp(18px, 3vw, 23px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

.sp-desc {
  grid-area: desc;
  margin: 6px 0 16px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.sp-cta-row {
  grid-area: cta;
  display: flex;
}

/* ---------- アニメーション ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sp-card {
    animation: rise-in .5s ease backwards;
  }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- レスポンシブ ----------
   狭い幅では「アイコン+見出し」を横並びのまま、
   説明文とCTAを全幅に流す */
@media (max-width: 600px) {
  .sp-card {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "icon head"
      "desc desc"
      "cta  cta";
    column-gap: 18px;
  }

  .sp-icon-wrap { width: 96px; align-self: center; }

  .sp-desc { margin-top: 16px; }

  .sp-cta-row .cta-pill {
    flex: 1;
    text-align: center;
  }
}