/* =====================================================================
   WBSカードローン比較LP — ベース (375px SP基準)
   ===================================================================== */

:root {
  --blue: #2fa356;
  --blue-deep: #1f8a48;
  --blue-ink: #143d24;
  --blue-50: #eef8ee;
  --blue-100: #d3edd6;

  --cta: #e23b3b;
  --cta-deep: #c52727;
  --cta-50: #fdecec;

  --orange: #f5961e;
  --orange-deep: #dd7d09;

  --gold: #ffd23f;
  --gold-deep: #e8b800;
  --gold-1: #c8a43c;

  --cream: #fbf7df;
  --cream-line: #ece3b0;
  --navy: #1c2c4d;

  --ink: #23332a;
  --ink-2: #4f5f55;
  --ink-3: #828f86;
  --line: #d9e6d9;
  --line-2: #e9f1e8;
  --bg: #e9f5e7;
  --bg-band: #e1f0df;
  --white: #ffffff;

  --ok: #2fa356;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(20, 40, 24, .06), 0 1px 3px rgba(20, 40, 24, .08);
  --shadow: 0 4px 14px rgba(20, 40, 24, .10);
  --maxw: 480px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: radial-gradient(120% 50% at 50% 0%, #d6deea 0%, #c2cbd9 55%, #b7c0cf 100%);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(11, 28, 56, .06), 0 12px 50px rgba(11, 28, 56, .20);
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 14px 22px;
  text-decoration: none;
  line-height: 1.2;
  transition: transform .12s ease, box-shadow .12s ease;
  width: 100%;
}

.btn:active { transform: translateY(1px) scale(.997); }

.btn--cta {
  color: #fff;
  background: linear-gradient(180deg, #ef5350, var(--cta));
  box-shadow: 0 6px 16px rgba(226, 59, 59, .36), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn--cta:hover { box-shadow: 0 9px 22px rgba(226, 59, 59, .46); }

.btn--ghost {
  color: var(--blue-deep);
  background: var(--white);
  border: 1.5px solid var(--blue-100);
  box-shadow: var(--shadow-sm);
}

.btn--pulse {
  animation: btnPulse 2.4s ease-in-out infinite;
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(226, 59, 59, .36), inset 0 1px 0 rgba(255, 255, 255, .3); }
  50% { box-shadow: 0 8px 24px rgba(226, 59, 59, .52), inset 0 1px 0 rgba(255, 255, 255, .3); }
}

.btn__arrow { font-size: 16px; }

@media (min-width: 481px) {
  body { padding: 16px 0; }
}