/* 完了ページ（Figma 02・ノード 3:86）と プライバシーポリシー（Figma 03・ノード 3:103） */

/* ===== 共通ヘッダー ===== */
.sub-header { padding: 16px 20px; }
.sub-header-bar { display: flex; align-items: center; height: 58px; padding: 0 20px; background: var(--orange); }

/* ===== 02 登録完了 ===== */
body.thanks { background: var(--orange); }
.page-orange { background: var(--orange); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
@media (min-width: 482px) { .page-orange { border-color: var(--orange); } }
.done-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 24px 20px; }
.done-card {
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  padding: 28px;
  background: #fff; border: 2px solid var(--navy); border-radius: 28px; box-shadow: 5px 5px 0 var(--navy);
  text-align: center;
}
.check { position: relative; width: 84px; height: 84px; border-radius: 42px; background: var(--mint); border: 2px solid var(--navy); flex: none; }
.check-svg { position: absolute; left: 17px; top: 22px; width: 42px; height: 32px; overflow: visible; }
.done-title { font-weight: 900; font-size: min(22px, calc((100vw - 104px) / 13)); line-height: 1.4; }
.done-msg { color: var(--gray); font-weight: 500; font-size: 15px; line-height: 1.7; }
.done-bubble { padding: 12px 16px; background: var(--peach); border: 2px solid var(--navy); border-radius: 16px; box-shadow: 3px 3px 0 var(--navy); font-weight: 700; font-size: 13px; line-height: 1.5; word-break: auto-phrase; }
/* Figma では吹き出しは1行（カードの内側の余白にはみ出して中央に置かれる）。375px 以上なら1行にしてもカードの枠内に収まる */
@media (min-width: 375px) { .done-bubble { white-space: nowrap; } }
.btn-x, .btn-top { display: flex; justify-content: center; border-radius: 999px; font-weight: 900; text-decoration: none; text-align: center; line-height: 1.5; }
.btn-x { padding: 16px; background: var(--navy); border: 2px solid #fff; color: #fff; font-size: 16px; }
.btn-top { padding: 14px; background: var(--yellow); border: 2px solid var(--navy); box-shadow: 4px 4px 0 var(--navy); color: var(--navy); font-size: 15px; }
.btn-x:active, .btn-top:active { translate: 2px 2px; }
.done-note { color: #fff; font-weight: 400; font-size: 11px; line-height: 1.6; text-align: center; }
.done-note[hidden] { display: none; }

.confetti { position: fixed; top: 0; bottom: 0; left: 50%; width: min(100%, 480px); translate: -50% 0; overflow: hidden; pointer-events: none; z-index: 10; }
.cf { position: absolute; top: -30px; left: var(--l); }
.cf i { display: block; border: 1px solid var(--navy); }

/* ===== 03 プライバシーポリシー ===== */
.pp-body { display: flex; flex-direction: column; gap: 14px; padding: 32px 20px 40px; }
.pp-title { font-weight: 900; font-size: 24px; line-height: 1.35; }
.pp-lead { margin-bottom: 4px; color: var(--gray); font-size: 13px; line-height: 1.7; }
.pp-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; border: 2px solid var(--navy); border-radius: 16px; box-shadow: 2px 2px 0 var(--navy); }
.pp-card { scroll-margin-top: 16px; }
.pp-card:target { box-shadow: 4px 4px 0 var(--orange); }
.pp-card h2 { font-weight: 900; font-size: 15px; line-height: 1.5; }
.pp-card p { color: var(--gray); font-weight: 400; font-size: 13px; line-height: 1.7; }
.pp-footer { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 87px; padding: 20px; background: var(--navy); }
.pp-footer-co { color: #fff; font-size: 12px; line-height: 1.5; }
.pp-footer-copy { color: var(--gray-l); font-size: 10px; line-height: 1.5; }

/* ===== 動き（Figma 02_motion：4.5秒の動きの値） ===== */
@keyframes k-fade { from { opacity: 0; } }
@keyframes k-ty { from { translate: 0 var(--ty, 14px); } }
@keyframes k-s { from { scale: var(--s0, 0); } }
@keyframes k-draw { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 1 1; } }
@keyframes k-cf-fall { to { translate: 0 var(--dy, 800px); } }
@keyframes k-cf-out { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes k-sway { to { translate: var(--sx, 20px) 0; } }
@keyframes k-rot { to { rotate: var(--rr, 360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .done-card { --s0: .5; animation: k-fade .18s linear .09s both, k-s .72s var(--spring) .09s both; }
  .check { --s0: 0; animation: k-s .58s var(--spring) .5s both; }
  .check-svg path { animation: k-fade .01s linear .9s both, k-draw .5s ease-out .9s both; }
  .done-title { animation: k-fade .27s ease-out 1.215s both, k-ty .4s ease-out 1.215s both; }
  .done-msg { animation: k-fade .3s ease-out 1.395s both, k-ty .4s ease-out 1.395s both; }
  .done-bubble { --s0: .6; animation: k-fade .09s linear 1.71s both, k-s .5s var(--spring) 1.71s both; }
  .btn-x { --ty: 30px; animation: k-fade .27s ease-out 2.115s both, k-ty .5s var(--bez) 2.115s both; }
  .btn-top { --ty: 30px; animation: k-fade .3s ease-out 2.295s both, k-ty .5s var(--bez) 2.295s both; }
  .done-note { --ty: 30px; animation: k-fade .27s ease-out 2.52s both, k-ty .5s var(--bez) 2.52s both; }
  .cf { animation: k-cf-fall var(--du) cubic-bezier(.33, .05, .7, 1) var(--d) both, k-cf-out var(--du) linear var(--d) both; }
  .cf i { animation: k-sway .7s ease-in-out var(--d) infinite alternate, k-rot var(--du) linear var(--d) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .confetti { display: none; }
}