/* ============================================================
   SAPEET AX Solution — thanks.css
   お問い合わせ完了（サンクス）ページ専用スタイル
   読み込み順: reset.css → style.css → thanks.css
   （カラー・フォント等のトークンは style.css の :root を参照）
   ============================================================ */

/* ---- レイアウト ----
   ヘッダー(fixed)ぶんの上余白を確保しつつ、
   コンテンツが少なくてもフッターが画面下に付くよう
   ビューポート高いっぱいに中央配置する */
.thanks {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px var(--side-pad) 100px;
  background: var(--color-off-white);
}

.thanks__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  max-width: 680px;
  text-align: center;
}

/* ---- チェックアイコン ---- */
.thanks__icon svg {
  display: block;
}
/* チェックマークを描画するように見せる */
.thanks__check {
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  animation: thanksCheckDraw .6s cubic-bezier(.22, 1, .36, 1) .55s forwards;
}
@keyframes thanksCheckDraw {
  to { stroke-dashoffset: 0; }
}

/* ---- テキスト ---- */
.thanks__eng {
  font-family: var(--font-latin);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 35px);
  letter-spacing: .07em;
  line-height: 1;
  background: var(--grad-accent-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.thanks__title {
  font-weight: 500;
  font-size: clamp(19px, 3vw, 24px);
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--color-navy);
}

.thanks__text {
  font-size: 15px;
  line-height: 2;
  color: var(--color-charcoal);
}

.thanks__note {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-mid-gray);
}

.thanks__actions {
  margin-top: 15px;
}

/* ---- ロードイン（style.cssのheroFadeUpと同じトーン） ---- */
@keyframes thanksFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.thanks__icon,
.thanks__eng,
.thanks__title,
.thanks__text,
.thanks__note,
.thanks__actions {
  animation: thanksFadeUp .9s cubic-bezier(.22, 1, .36, 1) both;
}
.thanks__icon    { animation-delay: .10s; }
.thanks__eng     { animation-delay: .25s; }
.thanks__title   { animation-delay: .35s; }
.thanks__text    { animation-delay: .50s; }
.thanks__note    { animation-delay: .60s; }
.thanks__actions { animation-delay: .75s; }

/* prefers-reduced-motion時はreset.cssの一括指定でdurationが実質0になるため、
   チェック描画・フェードインとも即時に最終状態で表示される */

/* ---- 改行制御（PCのみ改行） ---- */
.pc-only { display: block; }

/* ============================================================
   RESPONSIVE（style.cssのブレークポイントに準拠）
   ============================================================ */

@media (max-width: 900px) {
  .thanks {
    padding-top: 130px;
    padding-bottom: 80px;
  }
  .thanks__icon svg {
    width: 60px;
    height: 60px;
  }
  .pc-only { display: none; }
}

@media (max-width: 640px) {
  .thanks__inner { gap: 20px; }
  .thanks__text { font-size: 14px; text-align: left; }
  .thanks__note { text-align: left; }
  /* index.htmlのモバイルCTAと同じ調整 */
  .thanks__actions .btn-cta {
    padding: 12px 32px 16px;
    border: 1px solid #b4c5d7;
  }
}