@charset "UTF-8";
/* =========================================================
   connect-wallet.css — Connect Wallet 専用
   Figma: PC 1996:13609 / TB 1996:13613 / SP 1996:13617
   値は Figma 実値（px ÷ 10 = rem）。トークンは common.css :root
   ========================================================= */

/* ---------- Connect wallet section（PC: row / gap60 / items-center） ---------- */
.connect-wallet {
  display: flex; align-items: center; gap: 6rem;
  background: var(--color-bg);
}
.connect-wallet__media { flex: 1 1 0; min-width: 0; align-self: stretch; position: relative; }
.connect-wallet__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* テキスト＋ボタンのカラム：flex-1 / col / gap40 / py100 / items-start */
.connect-wallet__body {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4rem;
  padding: 10rem 0;
}
.connect-wallet__head { width: 46rem; display: flex; flex-direction: column; gap: 2rem; }
.connect-wallet__title { font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.connect-wallet__lead { font-size: var(--fs-sub); line-height: var(--lh-sub); }

/* Wallet Options：w320 / col / gap20 */
.connect-wallet__options { width: 32rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 2rem; }
.connect-wallet__option {
  display: flex; align-items: center; gap: 2rem;
  width: 100%; height: 7.2rem; padding: 0 1.9rem 0 3.9rem; /* Figma：内側ストローク1px込み */
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-cta); border-radius: var(--radius);
  color: var(--color-text); text-align: left;
  transition: background-color .2s ease;
}
.connect-wallet__option:hover { background: rgba(162, 89, 255, 0.16); }
.connect-wallet__logo { width: 4rem; height: 4rem; flex-shrink: 0; }
.connect-wallet__name {
  flex: 1 1 0; min-width: 0;
  font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-h5);
}

/* ---------- Tablet（834基準）：gap40 / py80 / 見出し325 / ボタン高60・ロゴ32 ---------- */
@media (max-width: 1279.98px) {
  .connect-wallet { gap: 4rem; }
  .connect-wallet__body { padding: 8rem 0; }
  .connect-wallet__head { width: 32.5rem; }
  .connect-wallet__option { height: 6rem; }
  .connect-wallet__logo { width: 3.2rem; height: 3.2rem; }
}

/* ---------- SP（375基準）：画像上232 → 本文315（pt30 / pb40 / gap30 / items-center） ---------- */
@media (max-width: 833.98px) {
  .connect-wallet { flex-direction: column; justify-content: center; gap: 0; }
  .connect-wallet__media { flex: none; align-self: stretch; width: 100%; height: 23.2rem; }
  .connect-wallet__body {
    flex: none; width: var(--content-w);
    align-items: center; gap: 3rem;
    padding: 3rem 0 4rem;
  }
  .connect-wallet__head { width: 100%; }
  /* Figma SP：Wallet Options は w320 のまま 315 枠の中央（左右 2.5px はみ出し） */
}