/* ------------------------------------------------------------------
   thanks.css
   サンクスページ（page-thanks.php / お申し込み完了）専用スタイル。
   front.css / privacy.css と同じデザイントークン（ブルーグラデ・
   550px固定フレーム・Outfit / Noto Sans JP）に揃えた自己完結スタイル。
   Google Fonts は functions.php で全ページ共通に enqueue 済み。
------------------------------------------------------------------ */

/* ── VARIABLES（front.css と共通） ── */
.thanks-wrap{
  --blue:#1e7fff;
  --blue2:#4da8ff;
  --pale:#e8f4ff;
  --navy:#0d2340;
  --text:#1a2840;
  --gray:#6b7280;
  --border:#dce8f8;
  --grad:linear-gradient(135deg,#1e7fff 0%,#4da8ff 100%);
  --shadow:0 20px 60px rgba(30,127,255,.10);
}

*,*::before,*::after{box-sizing:border-box}

/* このCSSは thanks ページ専用に enqueue されるため body を直接指定（privacy/front と同じ作法）。
   privacy/terms と同じ薄ブルーの背景で、中央の白フレームを浮かせる。 */
body{background:#dfe7f0;margin:0;overflow-x:hidden}

/* ── PC背景：550pxカラムの左右余白に背景画像（front / privacy / terms と同じ） ── */
body::before,body::after{
  content:'';position:fixed;top:0;bottom:0;
  width:calc((100% - 550px) / 2);
  background-image:url('../images/26492553_m.jpg');
  background-size:cover;background-repeat:no-repeat;
  z-index:0;pointer-events:none;
}
body::before{left:0;background-position:left center}
body::after{right:0;background-position:right center}

/* ── APP FRAME（privacy/terms の .app と同じ白い550px枠） ── */
.thanks-wrap{
  max-width:550px;width:100%;margin:0 auto;min-height:100vh;
  font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);background:#fff;line-height:1.75;
  box-shadow:0 0 60px rgba(13,35,64,.12);
  position:relative;z-index:1;
  display:flex;flex-direction:column;
}

/* ── HEADER ── */
.thanks-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;background:#fff;
  border-bottom:1px solid rgba(30,127,255,.10);
}
.thanks-head .logo{display:flex;align-items:center;min-width:0}
.thanks-head .logo-img{height:42px;width:auto;display:block}
.thanks-head .h-back{
  font-size:.82rem;color:var(--gray);text-decoration:none;
  white-space:nowrap;flex-shrink:0;transition:color .2s;
}
.thanks-head .h-back:hover{color:var(--blue)}

/* ── MAIN ── */
.thanks-main{
  flex:1;padding:48px 24px 56px;
  display:flex;flex-direction:column;justify-content:center;
}

/* ── CARD ── */
.thanks-card{
  background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%);
  border:1px solid var(--border);border-radius:24px;
  padding:52px 30px;text-align:center;
  box-shadow:var(--shadow);
  animation:thanksRise .6s ease both;
}
@keyframes thanksRise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* アイブロウ（front.css の .sec-eyebrow と同テイスト） */
.thanks-eyebrow{
  display:inline-block;
  background:var(--pale);color:var(--blue);
  font-family:'Outfit',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.18em;
  padding:6px 18px;border-radius:100px;margin-bottom:24px;
}

/* チェックアイコン（青グラデ＋ペールのリング） */
.thanks-ic{
  width:84px;height:84px;margin:0 auto 26px;border-radius:50%;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(30,127,255,.32),0 0 0 10px var(--pale);
  animation:thanksPop .5s .15s ease both;
}
.thanks-ic svg{width:38px;height:38px;display:block}
@keyframes thanksPop{
  from{opacity:0;transform:scale(.6)}
  60%{transform:scale(1.08)}
  to{opacity:1;transform:scale(1)}
}

.thanks-card h1{
  font-size:1.55rem;font-weight:700;color:var(--navy);
  line-height:1.5;letter-spacing:.02em;margin:0 0 16px;
}
.thanks-card p{font-size:.92rem;line-height:1.95;color:var(--gray);margin:0 0 12px}
.thanks-card .lead{color:var(--navy);font-weight:700;font-size:1rem}

/* ── 今後の流れ（3ステップ） ── */
.thanks-flow{
  list-style:none;position:relative;text-align:left;
  margin:36px 0 8px;padding:0 4px;
}
/* ステップをつなぐ縦ライン */
.thanks-flow::before{
  content:'';position:absolute;left:21px;top:26px;bottom:26px;width:2px;
  background:var(--border);border-radius:2px;z-index:0;
}
.tf-step{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:14px;padding:11px 0;
}
.tf-no{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:.95rem;
  background:#fff;color:var(--blue);border:2px solid #cfe4ff;
}
.tf-step.is-done .tf-no{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(30,127,255,.3);
}
.tf-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.tf-body b{font-weight:700;color:var(--navy);font-size:.95rem;line-height:1.4}
.tf-body small{color:var(--gray);font-size:.8rem}

/* ── ボタン ── */
.thanks-btn{
  display:inline-block;margin-top:32px;padding:16px 44px;
  background:var(--grad);color:#fff;
  font-weight:700;font-size:.95rem;letter-spacing:.02em;text-decoration:none;
  border-radius:999px;box-shadow:0 10px 26px rgba(30,127,255,.30);
  transition:transform .15s,box-shadow .15s,filter .2s;
}
.thanks-btn:hover{
  transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 14px 32px rgba(30,127,255,.38);
}

/* ── FOOTER ── */
.thanks-foot{padding:28px 24px 36px;text-align:center}
.thanks-foot .foot-logo-link{display:inline-block;margin-bottom:18px}
.thanks-foot .foot-logo{width:170px;max-width:60%;height:auto;display:block;margin:0 auto}
.thanks-foot .foot-links{
  display:flex;gap:0;justify-content:center;align-items:center;
  flex-wrap:wrap;margin-bottom:14px;
}
.thanks-foot .foot-links a{
  font-size:.8rem;color:var(--gray);text-decoration:none;
  padding:0 16px;transition:color .2s;
}
.thanks-foot .foot-links a + a{border-left:1px solid rgba(13,35,64,.15)}
.thanks-foot .foot-links a:hover{color:var(--blue)}
.thanks-foot .foot-copy{font-size:.72rem;color:rgba(13,35,64,.45)}

/* ── レスポンシブ ── */
@media (max-width:600px){
  .thanks-main{padding:32px 18px 44px}
  .thanks-card{padding:40px 22px}
  .thanks-card h1{font-size:1.35rem}
  .thanks-ic{width:74px;height:74px}
  .thanks-ic svg{width:34px;height:34px}
}

/* アニメーションを好まないユーザーへの配慮 */
@media (prefers-reduced-motion:reduce){
  .thanks-card,.thanks-ic{animation:none}
}