/* =========================================================
   SIer出身PM適性診断 — 診断UI（hub-visor型の「側」）
   shindan/ 配下専用。共通CSS（site.css/style.css）には触れない。
   色はSIブランド：ネイビー#1A2B4B × コーラル#ea580c
========================================================= */
.sd-wrap { max-width: 720px; }

@keyframes sdQIn { from { opacity: 0; transform: translateY(20px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes sdAurora { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- 開始カード（一枚完結） ---------- */
.sd-start {
  background: rgba(255,255,255,.9);
  border: 1.5px solid rgba(26,43,75,.09);
  border-radius: 20px;
  padding: 46px 40px 42px;
  text-align: center;
  animation: sdQIn .6s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 20px 48px -30px rgba(26,43,75,.25);
}
.sd-start .sd-kick {
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 9px;
}
.sd-start .sd-kick::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.sd-start h1 { font-size: clamp(24px, 3.4vw, 31px); font-weight: 900; letter-spacing: -0.6px; line-height: 1.5; margin: 14px 0 12px; }
.sd-start .sd-lead { font-size: 13.5px; color: var(--text-sec); line-height: 2.0; max-width: 540px; margin: 0 auto 26px; }
.sd-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.sd-stats div {
  background: rgba(255,255,255,.85); border: 1.5px solid rgba(26,43,75,.09);
  border-radius: 14px; padding: 10px 24px; font-size: 11.5px; color: var(--text-sec); font-weight: 700; min-width: 108px;
}
.sd-stats strong { display: block; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 21px; font-weight: 800; color: var(--primary); line-height: 1.3; }
.sd-startbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 42px; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: .5px;
  background: linear-gradient(120deg, var(--primary), #3e63b0 45%, var(--accent));
  background-size: 200% 200%;
  animation: sdAurora 6s ease infinite;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.sd-startbtn:hover { transform: translateY(-3px) scale(1.02); }
.sd-startbtn:active { transform: translateY(-1px) scale(.99); }
.sd-start .cta-pills { margin-top: 22px; }

/* ---------- 進捗（アニメするグラデ＋n/15ラベル） ---------- */
.sd-progress { margin: 0 0 8px; }
.sd-progress i { background: linear-gradient(90deg, var(--primary), #3e63b0, var(--accent)); background-size: 200% 100%; animation: sdAurora 4s ease infinite; transition: width .5s cubic-bezier(.16,1,.3,1); }
.sd-plabel { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: right; margin: 0 2px 20px; min-height: 1em; }

/* ---------- 設問カード ---------- */
.sd-q { padding: 36px 34px 30px; border: 1.5px solid rgba(26,43,75,.09); animation: sdQIn .55s cubic-bezier(.16,1,.3,1); }
.sd-qnum { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 2.5px; }
.sd-q h2 { font-size: 21px; line-height: 1.55; margin-bottom: 24px; }
.sd-opt {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.92); border-radius: 15px; padding: 15px 18px;
  margin-bottom: 12px;
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), background .3s;
  animation: sdQIn .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: var(--d, 0s); /* JSが選択肢ごとに .05s刻みで設定 */
}
.sd-opt .key {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-grid; place-items: center;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px;
  color: var(--accent); background: rgba(234,88,12,.09);
  transition: background .3s, color .3s;
}
.sd-opt:hover { transform: translateY(-3px) scale(1.008); border-color: rgba(234,88,12,.5); background: #fff; box-shadow: 0 10px 26px rgba(26,43,75,.08), 0 6px 20px rgba(234,88,12,.13); }
.sd-opt:hover .key { background: var(--accent); color: #fff; }
.sd-opt.is-picked { border-color: var(--accent); background: rgba(234,88,12,.06); }
.sd-opt.is-picked .key { background: var(--accent); color: #fff; }
.sd-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 6px 4px; transition: color .3s; }
.sd-back:hover { color: var(--primary); }

/* ---------- 動きを止める（?static=1 / reduced-motion） ---------- */
html.fx-off .sd-start, html.fx-off .sd-q, html.fx-off .sd-opt { animation: none !important; }
html.fx-off .sd-startbtn, html.fx-off .sd-progress i { animation: none !important; }
html.fx-off .sd-opt, html.fx-off .sd-startbtn { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sd-start, .sd-q, .sd-opt, .sd-startbtn, .sd-progress i { animation: none !important; }
}

@media (max-width: 640px) {
  .sd-start { padding: 34px 22px 32px; }
  .sd-q { padding: 28px 20px 24px; }
  .sd-stats div { padding: 9px 16px; min-width: 92px; }
}

/* ---------- お土産PDFカバー（画像非依存の自作表紙） ---------- */
.sd-gift-cover .gc-face {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  width: 138px; min-height: 178px; padding: 20px 16px; border-radius: 6px;
  background: linear-gradient(160deg, #1A2B4B, #0d1730);
  border-bottom: 4px solid var(--gc, #ea580c);
  box-shadow: 6px 10px 24px -12px rgba(26,43,75,.5), 2px 3px 0 -1px #efe9dd, 4px 6px 0 -1px #e6dfcf;
  transform: rotate(-2deg); color: #fff;
}
.sd-gift-cover .gc-face b { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--gc, #fb923c); }
.sd-gift-cover .gc-face .gc-t { font-size: 13.5px; font-weight: 900; line-height: 1.5; }
.sd-gift-cover .gc-face i { font-family: 'Inter', sans-serif; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255,255,255,.55); margin-top: auto; }