/* =========================================================
   診断サンクス（予約完了）
   page-diagnosis/css/style.css のトークン・コンポーネントを流用し、
   完了画面に必要な分だけを抜粋（診断の「結果カード」と同一トーン）。
   配置先: shisei-karte-lp/page-diagnosis-thankyou/css/style.css
   ========================================================= */

/* ---------- ブランドカラー（診断と同一） ---------- */
:root{
  --main:    #ff6a47;
  --sub:     #ffa700;
  --cream:   #fff1c8;
  --text:    #505050;

  --main-dark: #e85432;
  --line:    #efe6d6;
  --white:   #ffffff;
  --bg:      #fffaf0;
  --radius:  18px;
  --shadow:  0 10px 30px -12px rgba(255,106,71,.28);
  --shadow-sm: 0 4px 14px -8px rgba(80,80,80,.35);
  --maxw:    560px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
  color:var(--text);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--cream) 0%, rgba(255,241,200,0) 60%),
    var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
}

.stage{ width:100%; max-width:var(--maxw); }

/* ---------- ロゴ ---------- */
.site-logo{
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.site-logo img{ height:30px; width:auto; display:block; }

/* ---------- カード ---------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:36px 26px 30px;
}

/* ---------- 完了エンブレム（診断の result-emblem 流用） ---------- */
.result-emblem{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; margin:0 0 18px;
}
.result-emblem.ok{
  background:var(--cream);
  color:var(--main);
  border:1px solid rgba(255,106,71,.18);
  margin:0 auto 24px;
}
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}
.result-icon-material{
  font-size:34px; line-height:1; color:var(--main);
}

/* ---------- テキスト ---------- */
.result-title{
  font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
  font-weight:700; font-size:22px; line-height:1.5;
  color:var(--text); margin:0 0 14px;
  text-align:center;
}
.result-body{ font-size:15px; margin:0 0 26px; }
.result-body p{ margin:0 0 8px; text-align:center; }
.result-body .accent{ color:var(--main); font-weight:700; }

/* ---------- CTA（診断の cta 流用） ---------- */
.cta{
  appearance:none; -webkit-appearance:none; border:none;
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%;
  font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
  font-weight:700; font-size:17px;
  color:#fff;
  background:linear-gradient(135deg, var(--main), var(--sub));
  border-radius:14px;
  padding:18px 20px;
  cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.cta .material-symbols-outlined{ font-size:20px; }
.cta:hover{ transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 16px 34px -12px rgba(255,106,71,.5); }
.cta:active{ transform:translateY(0); }
.cta:focus-visible{ outline:3px solid var(--sub); outline-offset:3px; }

/* ---------- フットノート ---------- */
.foot-note{
  text-align:center; font-size:11.5px; color:#b3a999; margin:18px 2px 0;
}

/* ---------- アニメーション ---------- */
.fade-in{ animation:fadeUp .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:420px){
  .card{ padding:30px 20px 26px; }
  .result-title{ font-size:20px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}