/* =====================================================================
   UPSTART POKER × GGPoker LP
   画像を縦に並べる構成。本体画像は幅750px基準のため max-width で中央寄せ。
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --lp-width: 750px;   /* 素材の基準幅 */
  --bg: #0a0a0f;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}

.lp {
  max-width: var(--lp-width);
  margin: 0 auto;
  background: var(--bg);
}

/* 画像セクション：隙間なく縦に積む */
.lp-section {
  display: block;
  line-height: 0;          /* 画像下の余白を消す */
}

.lp-section img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================== CTA =========================== */
.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 18px 12px;
  background: var(--bg);
}

.cta-link {
  display: inline-block;
  line-height: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.cta-link:hover { transform: translateY(-2px); }
.cta-link:active { transform: translateY(0); }

.cta-link img {
  display: block;
  width: 100%;
  height: auto;
}

/* FV / submit / bundle：単独の大きめボタン */
.cta--affiliate .cta-link,
.cta--submit .cta-link,
.cta--bundle .cta-link {
  width: 88%;
  max-width: 480px;
}

/* 単品 $50 ×3：価格表(section-12)の3列に合わせ、常に横3列 */
.cta--products {
  flex-wrap: nowrap;
  gap: 2.5%;
  padding-left: 4%;
  padding-right: 4%;
}
.cta--products .cta-link {
  flex: 1 1 0;
  max-width: 31%;
  min-width: 0;
}
.cta--products .cta-link img {
  width: 100%;
}

/* リンク未設定（config が空）の CTA は無効表示 */
.cta-link.is-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}

/* =========================== フォーム =========================== */
/* section-13 の画像にHTML入力欄を重ねる */
.form-section {
  position: relative;
}

.claim-form-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* 入力欄以外はクリックを画像へ通す */
}

.claim-form-overlay input {
  position: absolute;
  left: 18.7%;
  width: 64%;
  height: 3.9%;            /* 画像の入力枠の高さに合わせる */
  min-height: 40px;
  pointer-events: auto;
  background: transparent;
  border: none;            /* 画像側に枠が描かれている */
  color: #fff;
  font-size: 16px;         /* iOS のズーム防止 */
  line-height: 1;
  padding: 0 14px;
  outline: none;
}

.claim-form-overlay input::placeholder {
  color: transparent;      /* 画像のプレースホルダを活かす。入力で隠れる */
}

/* 入力欄の縦位置（750×1334基準） */
.claim-form-overlay input[name="username"] { top: 27.9%; }
.claim-form-overlay input[name="email"]    { top: 37.3%; }

/* =========================== メッセージ =========================== */
.form-message {
  text-align: center;
  padding: 0 16px 24px;
  font-size: 15px;
  min-height: 1.2em;
}
.form-message.is-error   { color: #ff6b6b; }
.form-message.is-success { color: #5ad17a; }

/* =========================== 注意書き =========================== */
.disclaimer {
  padding: 24px 16px 48px;
}
.disclaimer img {
  max-width: 480px;
  margin: 0 auto;
}