@charset "UTF-8";
/* ==========================================================================
   AIエージェントLP サンキューページ 専用スタイル
   設置先 : wp-content/themes/ubunbase/assets/css/lp-aiagent-thanks.css
   読込元 : page-thanks-aiagent-lp.php（lp-aiagent.css の後に読み込む）
   方針   : LPのCSS（lp-aiagent.css）を土台にし、差分だけをここに書く。
            LPと同じく #aiagent-lp 配下にスコープし、既存ページへ影響を与えない。
            .is-thanks は body に付くサンキューページの識別子。

   配色 : インク #0F1E33 ／ 本文 #56657A ／ 罫線 #E6EBF2 ／ 面 #F5F7FA
          アクセント #1967D2 ／ 淡色 #E8F1FD ／ CTA #FFC800
   色面 : LPの申込セクションと共通のグラデーションを使う（独自配色を作らない）

   目次 : ①完了メッセージ／②これからの流れ／③ご連絡までの間に／④締め
   ========================================================================== */

/* --- ①完了メッセージ ---------------------------------------------------- */
#aiagent-lp .lp-Thanks {
  background: linear-gradient(89deg, #00E1FF -17.81%, #1967D2 28.23%);
  padding: 96px 0 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#aiagent-lp .lp-Thanks::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 100vw;
  height: 160vh;
  transform-origin: center top;
  transform: rotate(-60deg);
  background: linear-gradient(343deg, #00E1FF 10.82%, #1967D2 106.13%);
  opacity: 0.5;
  z-index: 0;
}
#aiagent-lp .lp-Thanks .lp-inner { position: relative; z-index: 1; }

/* 完了のチェックマーク。演出は控えめに1回だけ */
#aiagent-lp .lp-Thanks-mark {
  width: 78px;
  height: 78px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lpThanksPop 0.5s ease-out both;
}
#aiagent-lp .lp-Thanks-mark .material-symbols-rounded {
  font-size: 44px;
  color: #1967D2;
  font-variation-settings: "opsz" 24, "wght" 600, "FILL" 0, "GRAD" 0;
}
@keyframes lpThanksPop {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #aiagent-lp .lp-Thanks-mark { animation: none; }
}

#aiagent-lp .lp-Thanks-title {
  color: #ffffff;
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: bold;
  line-height: 1.45;
  margin-bottom: 20px;
}
#aiagent-lp .lp-Thanks-lead {
  font-size: 1.125rem !important;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 32px;
}
#aiagent-lp .lp-Thanks-lead b { color: #ffffff; }

/* 連絡方法の注記 */
#aiagent-lp .lp-Thanks-note {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  font-size: 0.9375rem !important;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 18px 22px;
  position: relative;
  padding-left: 54px;
}
#aiagent-lp .lp-Thanks-note .material-symbols-rounded {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 22px;
  color: #ffffff;
}
#aiagent-lp .lp-Thanks-note a {
  color: #ffffff;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
#aiagent-lp .lp-Thanks-note a:hover { border-bottom-color: #00E1FF; color: #00E1FF; }

@media screen and (max-width: 767px) {
  #aiagent-lp .lp-Thanks { padding: 56px 0 52px; }
  #aiagent-lp .lp-Thanks-mark { width: 62px; height: 62px; margin-bottom: 20px; }
  #aiagent-lp .lp-Thanks-mark .material-symbols-rounded { font-size: 34px; }
  #aiagent-lp .lp-Thanks-lead { font-size: 1rem !important; }
  #aiagent-lp .lp-Thanks-note { padding: 16px 18px 16px 48px; }
  #aiagent-lp .lp-Thanks-note .material-symbols-rounded { left: 16px; top: 18px; }
}

/* --- ②これからの流れ ---------------------------------------------------- */
#aiagent-lp .lp-Sec--flow { background: #ffffff; }
#aiagent-lp .lp-Flow {
  max-width: 760px;
  margin: 0 auto;
  counter-reset: none;
}
#aiagent-lp .lp-Flow li {
  display: flex;
  gap: 18px;
  padding-bottom: 28px;
  position: relative;
}
/* ステップ同士をつなぐ縦線。最後の項目には引かない */
#aiagent-lp .lp-Flow li::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: #E6EBF2;
}
#aiagent-lp .lp-Flow li:last-child { padding-bottom: 0; }
#aiagent-lp .lp-Flow li:last-child::before { display: none; }

#aiagent-lp .lp-Flow-no {
  flex: none;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  background: #F5F7FA;
  border: 2px solid #E6EBF2;
  color: #56657A;
  font-size: 1.0625rem;
  font-weight: bold;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
/* 完了済みのステップは数字をチェックに置き換える */
#aiagent-lp .lp-Flow li.is-done .lp-Flow-no {
  background: #1967D2;
  border-color: #1967D2;
  color: transparent;
}
#aiagent-lp .lp-Flow li.is-done .lp-Flow-no::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 8px;
  height: 15px;
  border-right: 2.5px solid #ffffff;
  border-bottom: 2.5px solid #ffffff;
  transform: rotate(45deg);
}
#aiagent-lp .lp-Flow li.is-done::before { background: #1967D2; }
/* 現在地のステップだけ強調する */
#aiagent-lp .lp-Flow li.is-now .lp-Flow-no {
  background: #E8F1FD;
  border-color: #1967D2;
  color: #1967D2;
}

#aiagent-lp .lp-Flow-txt {
  font-size: 1rem;
  line-height: 1.85;
  color: #56657A;
  padding-top: 6px;
}
/* 1つ目の b がステップ名。本文中の b（強調）と区別するため直下の先頭要素に限定する */
#aiagent-lp .lp-Flow-txt > b:first-child {
  display: block;
  font-size: 1.125rem;
  color: #0F1E33;
  margin-bottom: 2px;
}
#aiagent-lp .lp-Flow-txt b { color: #0F1E33; }
/* 見出し横のラベル（完了／1〜2営業日） */
#aiagent-lp .lp-Flow-state {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.4;
  vertical-align: 2px;
  background: #E8F1FD;
  color: #1967D2;
}
#aiagent-lp .lp-Flow li.is-done .lp-Flow-state { background: #1967D2; color: #ffffff; }

@media screen and (max-width: 767px) {
  #aiagent-lp .lp-Flow li { gap: 14px; padding-bottom: 22px; }
  #aiagent-lp .lp-Flow li::before { left: 18px; top: 40px; }
  #aiagent-lp .lp-Flow-no { width: 38px; height: 38px; line-height: 38px; font-size: 0.9375rem; }
  #aiagent-lp .lp-Flow li.is-done .lp-Flow-no::after { left: 12px; top: 10px; width: 7px; height: 13px; }
  #aiagent-lp .lp-Flow-txt { font-size: 0.9375rem; padding-top: 3px; }
  #aiagent-lp .lp-Flow-txt > b:first-child { font-size: 1.0625rem; }
  #aiagent-lp .lp-Flow-state { margin-left: 8px; }
}

/* --- ③ご連絡までの間に -------------------------------------------------- */
#aiagent-lp .lp-Sec--next { background: #F5F7FA; }
#aiagent-lp .lp-Nextcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
#aiagent-lp .lp-Nextcard {
  background: #ffffff;
  border: 1px solid #E6EBF2;
  border-radius: 14px;
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
}
#aiagent-lp .lp-Nextcard-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #E8F1FD;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
#aiagent-lp .lp-Nextcard-icon .material-symbols-rounded { font-size: 28px; color: #1967D2; }
#aiagent-lp .lp-Nextcard-title {
  font-size: 1.1875rem;
  font-weight: bold;
  color: #0F1E33;
  line-height: 1.5;
  margin-bottom: 10px;
}
#aiagent-lp .lp-Nextcard-txt {
  font-size: 0.9375rem !important;
  line-height: 1.8;
  color: #56657A;
  margin-bottom: auto;
}
#aiagent-lp .lp-Nextcard-links { margin-top: 18px; }
#aiagent-lp .lp-Nextcard-links li + li { margin-top: 4px; }
#aiagent-lp .lp-Nextcard-links .lp-Textlink { margin-top: 8px; }

@media screen and (max-width: 1023px) {
  #aiagent-lp .lp-Nextcards { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media screen and (max-width: 767px) {
  #aiagent-lp .lp-Nextcards { gap: 16px; }
  #aiagent-lp .lp-Nextcard { padding: 24px 20px 22px; }
}

/* --- ④締め -------------------------------------------------------------- */
#aiagent-lp .lp-Thanksend {
  background: #ffffff;
  padding: 0 0 88px;
  text-align: center;
}
#aiagent-lp .lp-Thanksend-manifesto {
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #0F1E33;
  margin-top: 32px;
  padding-bottom: 24px;
  margin-bottom: 20px;
  position: relative;
}
#aiagent-lp .lp-Thanksend-manifesto::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 3px;
  margin-left: -20px;
  border-radius: 2px;
  background: #FFC800;
}
#aiagent-lp .lp-Thanksend-txt { font-size: 1.0625rem !important; color: #56657A; }
/* サイト内への戻り導線。横並び、SPでは縦積み */
#aiagent-lp .lp-Thanksend-links {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 12px 32px;
  flex-wrap: wrap;
}
#aiagent-lp .lp-Thanksend-links a {
  font-size: 0.9375rem;
  font-weight: bold;
  color: #1967D2;
  border-bottom: 1px solid rgba(25, 103, 210, 0.35);
  padding-bottom: 3px;
}
#aiagent-lp .lp-Thanksend-links a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}
#aiagent-lp .lp-Thanksend-links a:hover { border-bottom-color: #1967D2; }

@media screen and (max-width: 767px) {
  #aiagent-lp .lp-Thanksend { padding-bottom: 52px; }
}

/* --- SP追従CTAの打ち消し ------------------------------------------------ */
/* サンキューページには申込CTAを置かないため、フッター下部の余白も戻す */
#aiagent-lp.is-thanks .lp-Fixedcta { display: none; }
@media screen and (max-width: 767px) {
  #aiagent-lp.is-thanks .lp-Footer { padding: 32px 0; }
}