/* === ZCC 男性向けLP用 カラー上書き ===
 * style.css の後ろに読み込むこと。ローズ系トークンをネイビー系に置換する。 */

:root {
  --rose-50:  #F4F7FB;
  --rose-100: #DCE6F2;
  --rose-200: #B8CCE6;
  --rose-300: #8FAACE;
  --rose-400: #5C82B5;
  --rose-500: #2E5C9A;
  --rose-600: #1E4682;
  --rose-700: #143268;
  --line-soft: #D6E0EE;
  --shadow-soft: 0 10px 40px -10px rgba(46, 92, 154, 0.25);
  --shadow-card: 0 4px 20px -4px rgba(30, 70, 130, 0.18);
}

/* style.css 内のハードコード色を上書き */
html, body { background: var(--rose-50); }
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--rose-100) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, var(--rose-100) 0%, transparent 70%),
    var(--rose-50);
}

.progress-wrap {
  background: rgba(244, 247, 251, 0.85);
  border-bottom-color: rgba(214, 224, 238, 0.6);
}
.progress-bar { background: var(--rose-100); }
.progress-fill {
  background: linear-gradient(90deg, var(--rose-400), var(--rose-600));
}

/* FV (MV画像下のCTAエリア) */
#screen-fv {
  background: linear-gradient(180deg, #DCE6F2 0%, #DCE6F2 60%, #F4F7FB 100%);
}
.mv-cta-area { background: #DCE6F2; }

.mv-cta-btn {
  background: linear-gradient(180deg, #5C82B5 0%, #2E5C9A 50%, #1E4682 100%);
  box-shadow:
    0 10px 28px -8px rgba(30, 70, 130, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(20, 50, 104, 0.3);
  animation: mvCtaPulseMen 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes mvCtaPulseMen {
  0%, 100% {
    box-shadow:
      0 10px 28px -8px rgba(30, 70, 130, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 4px rgba(20, 50, 104, 0.3),
      0 0 0 0 rgba(46, 92, 154, 0.5);
  }
  50% {
    box-shadow:
      0 10px 28px -8px rgba(30, 70, 130, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 4px rgba(20, 50, 104, 0.3),
      0 0 0 14px rgba(46, 92, 154, 0);
  }
}

.mv-cta-badge {
  background: #FFD84C;
  color: #1E4682;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 -2px 4px rgba(196, 168, 0, 0.3);
}

/* 質問選択肢 */
.q-eyebrow { color: var(--rose-600); }
.q-title-accent { color: var(--rose-600); }
.q-option.selected {
  background: linear-gradient(135deg, var(--rose-100) 0%, var(--rose-50) 100%);
  border-color: var(--rose-500);
  color: var(--rose-700);
}
.btn-next.enabled {
  background: linear-gradient(180deg, var(--rose-500) 0%, var(--rose-600) 100%);
  box-shadow: 0 6px 20px -6px rgba(30, 70, 130, 0.5);
}

/* フォーム */
.form-label .required { background: var(--rose-500); }
.form-input:focus, .form-select:focus {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(46, 92, 154, 0.15);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231E4682' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.form-consent { background: rgba(220, 230, 242, 0.5); }
.form-consent a { color: var(--rose-600); }

/* サンクス画面 */
.thanks-icon {
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
}
.thanks-lead-accent { color: var(--rose-600); }
.thanks-card { border-color: var(--rose-100); }