@charset "utf-8";
/* ==========================================================
   尊いマネー 診断LP
   デザイン：Figma「修正対応分です」より実装
   色はすべてFigmaの書き出しSVGから抽出した実値
   ========================================================== */

:root{
  /* ---- ブランド ---- */
  --v1:#8B5CF6;            /* 紫（濃）*/
  --v2:#C65FD9;            /* 中間 */
  --v3:#EF56AE;            /* ピンク（濃）※#F064B5 から明度-3%。白文字のコントラストを3.0以上にするため */
  --violet:#B38DFF;
  --pink:#FFB6E6;
  --v-deep:#8B5FD9;
  --ink:#1A1A2E;
  --ink2:#17172A;
  --sub:#6E6A85;
  --sub2:#B8B3CC;
  --lav:#EDE6FF;
  --pink-t:#F07FC8;

  /* ---- グラデーション ---- */
  --g-cta:linear-gradient(100deg,var(--v1) 0%,var(--v2) 50%,var(--v3) 100%);
  --g-band:linear-gradient(96deg,var(--v1) 0%,#F064B5 100%);
  --g-band-strong:linear-gradient(96deg,var(--v1) 0%,var(--v3) 100%);
  --g-fv:linear-gradient(180deg,#FFF0FA 0%,#FCFAFF 100%);
  --g-quiz:linear-gradient(180deg,#FBF8FF 0%,#FFFAFD 50%,#FFFFFF 100%);
  --g-dark:linear-gradient(180deg,#211D3F 0%,#282049 55%,#4B3567 100%);
  --g-night:linear-gradient(160deg,#211D3F 0%,#282049 45%,#4B3567 100%);
  --g-soft:linear-gradient(90deg,#F4EFFF 0%,#FBF7FF 50%,#F8EFFF 100%);
  --g-card:linear-gradient(100deg,var(--violet),var(--pink));

  /* ---- 診断画面の可変寸法（端末の高さで縮む）---- */
  --fv-base:198px;   /* FV帯の基準値 */
  --fv-h:var(--fv-base);
  --band-p:38px;     /* ピンク帯 */
  --band-d:44px;     /* 黒帯 */
  --arrow-h:20px;    /* 矢印 */
  --card-h:82px;     /* 選択カード */
  --reply-h:42px;    /* 心の声 */
  --next-h:62px;     /* 次へボタン */
  --q-gap:16px;      /* 設問内の間隔 */
  --legal-h:30px;    /* 法的リンク行 */
  --pad:16px;

  /* オファー行の文字サイズ（Figmaの実測値）*/
  --o1:22px;    /* 遠征費 */
  --o-s:15px;   /* 年・万円 */
  --o2:37px;    /* 50 */
  --o3:19px;    /* → */
  --o0:48px;    /* 0 */
  --o-i:18px;   /* 円!? */
  --o5:17px;    /* の全手順 */
  --o5-h:18px;

  --radius:16px;
  --shadow-cta:0 8px 16px rgba(155,75,196,.22),0 8px 24px rgba(216,107,239,.22);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--ink);background:#FCFAFF;
  -webkit-font-smoothing:antialiased;text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
[hidden]{display:none !important}

.wrap{max-width:430px;margin:0 auto;position:relative;background:#fff;overflow-x:hidden}

/* ==========================================================
   1. 診断画面（1画面完結）
   ========================================================== */
.quiz-mode .quiz-screen{
  height:100dvh;min-height:100svh;
  display:flex;flex-direction:column;overflow:hidden;
}
.wrap:not(.quiz-mode) .quiz-screen{display:none}

/* ---- FV ---- */
.fv{
  position:relative;flex:0 0 var(--fv-h);height:var(--fv-h);
  background:var(--g-fv);overflow:hidden;
}
.fv-deco{
  position:absolute;inset:0;
  background:url(/assets/fv-deco.webp) 0 -3.3% / 100% auto no-repeat;
  opacity:.5;
}
.fv-illust{
  position:absolute;left:63%;top:14%;width:53%;height:92%;
  z-index:1;pointer-events:none;overflow:hidden;
}
.fv-illust img{width:107.5%;height:auto;margin-left:-13.2%;transition:opacity .28s ease}
.fv-illust.swap img{opacity:0}

.fv-badge{
  position:relative;z-index:2;margin:0;
  display:inline-block;padding:6px 14px 6px 16px;
  background:var(--g-band);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.01em;line-height:1.4;
  border-bottom-right-radius:14px;
}
.fv-logo{
  position:absolute;top:1px;left:52.5%;width:20.5%;max-width:88px;height:auto;z-index:2;
}
.fv-copy{
  position:relative;z-index:3;margin:8px 0 0;padding:0 var(--pad);
  font-weight:900;line-height:1.28;letter-spacing:-.01em;
  /* 面で受けるのではなく、文字の縁だけを白く（デザインに合わせる）*/
  text-shadow:0 0 3px #fff,0 0 6px rgba(255,255,255,.85);
}
.fv-copy .l1{display:block;font-size:clamp(17.5px,5.2vw,20.5px)}
.fv-copy .l2{display:block;font-size:clamp(15px,4.28vw,17.5px);margin-top:2px}
.fv-copy em{font-style:normal;color:var(--v1)}
.fv-copy em.pink{color:var(--pink-t)}

.fv-pill{
  position:relative;z-index:3;margin:7px 0 0 var(--pad);
  display:inline-block;padding:3px 14px;
  background:var(--lav);color:#6B4BA8;
  font-size:12.5px;font-weight:700;border-radius:11px;
  border:1px dashed rgba(139,92,246,.45);
}
.fv-offer{
  position:relative;z-index:3;margin:6px 0 0;padding:0 var(--pad);
  display:flex;align-items:baseline;gap:0;
  font-weight:900;line-height:1;
}
/* デザインと同じ白のベタ板（ぼかしなし）。x15〜206 / 375 の範囲だけを覆う */
.fv-offer::before{
  content:"";position:absolute;z-index:-1;
  left:15px;width:51%;
  top:calc(var(--o0) * .08);height:calc(var(--o0) * .86);
  background:#fff;
}
.fv-offer .o1{
  font-size:var(--o1);color:var(--v1);letter-spacing:-.04em;
  position:relative;top:calc(var(--o0) * -.33);
}
.fv-offer .o2{font-size:var(--o-s);color:var(--ink);letter-spacing:-.02em}
.fv-offer .o2 b{font-family:Poppins,sans-serif;font-size:var(--o2);font-weight:700;letter-spacing:-.02em}
.fv-offer .o3{font-size:var(--o3);color:var(--ink);margin:0 2px}
.fv-offer .o4{
  color:var(--pink-t);display:inline-flex;flex-direction:column;align-items:center;line-height:1;
}
.fv-offer .o4t{display:block;white-space:nowrap}
.fv-offer .o4 b{font-family:Poppins,sans-serif;font-size:var(--o0);font-weight:700;letter-spacing:-.02em}
.fv-offer .o4 i{font-style:normal;font-size:var(--o-i)}
.fv-offer .o5{
  display:block;font-size:var(--o5);color:var(--ink);
  margin-top:3px;white-space:nowrap;line-height:1;height:var(--o5-h);
}

/* ---- ピンク帯 ---- */
.band-pink{
  flex:0 0 var(--band-p);height:var(--band-p);
  margin:0;display:flex;align-items:center;justify-content:center;
  background:var(--g-band);color:#fff;text-align:center;
  font-size:clamp(11.5px,3.35vw,13px);font-weight:700;line-height:1.42;
  letter-spacing:.005em;text-shadow:0 1px 2px rgba(70,15,60,.34);
}

/* ---- 黒帯 ---- */
.band-dark{
  position:relative;flex:0 0 var(--band-d);height:var(--band-d);
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--g-dark);color:#fff;overflow:hidden;
}
.band-dark::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(110% 170% at 50% 125%,rgba(150,90,225,.28),transparent 72%);
  pointer-events:none;
}
.band-dark span{position:relative;z-index:1;font-size:clamp(10.5px,3vw,12px);font-weight:700;line-height:1.34}
.band-dark .bd-sep{width:1px;height:22px;background:rgba(255,255,255,.4);flex:0 0 1px}
.band-dark .bd-r b{font-size:clamp(13px,3.7vw,15px);color:#FFD9F2}
.bd-gift{position:absolute;right:6px;bottom:2px;width:52px;height:auto;z-index:1}

/* ---- 矢印 ---- */
.band-arrow{
  flex:0 0 var(--arrow-h);height:var(--arrow-h);position:relative;background:#FBF8FF;
}
.band-arrow::before{
  content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  border-left:36px solid transparent;border-right:36px solid transparent;
  border-top:calc(var(--arrow-h) + 1px) solid #3A2C5C;
}

/* ---- 設問エリア ---- */
.quiz{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  padding:14px var(--pad) 6px;
  background:var(--g-quiz);
}
.progress{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.back{
  display:inline-flex;align-items:center;gap:3px;
  padding:14px 13px;margin:-14px -5px -14px -9px;min-height:44px;
  color:var(--v-deep);font-size:12px;font-weight:700;
  border-radius:999px;
}
.back span{position:relative;top:.5px}
.back.off{visibility:hidden}
.bars{flex:1;display:flex;gap:6px}
.bars .seg{
  flex:1;height:7px;border-radius:999px;background:#EDE6FF;
  position:relative;overflow:hidden;
}
.bars .seg::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:var(--g-card);transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.bars .seg.on::after{transform:scaleX(1)}
.bars .seg.flash::before{
  content:"";position:absolute;inset:0;z-index:2;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:sweep .55s ease-out;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(200%)}}
.count{font-family:Poppins,sans-serif;font-weight:600;color:var(--sub2);line-height:1;flex:0 0 auto}
.count b{font-size:24px;color:var(--v-deep);font-weight:700}
.count span{font-size:14px}

.step{display:none;flex:1;flex-direction:column;justify-content:space-evenly;gap:var(--q-gap);min-height:0;padding:4px 0 2px;overflow:hidden}
.step.active{display:flex}
.step.slide-out{animation:slideOut .18s ease-in forwards}
.step.slide-in{animation:slideIn .26s ease-out}
.step.slide-in-back{animation:slideInBack .26s ease-out}
@keyframes slideOut{to{opacity:0;transform:translateX(-22px)}}
@keyframes slideIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes slideInBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}

.q-title{
  margin:0;text-align:center;font-weight:900;
  font-size:clamp(17px,4.9vw,20px);line-height:1.45;letter-spacing:-.01em;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:0 1 auto;min-height:0}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{
  position:relative;height:var(--card-h);min-height:52px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:4px 5px;border-radius:21px;background:#fff;
  border:1.5px solid #EDE6FF;
  box-shadow:0 4px 14px rgba(139,92,246,.10);
  font-size:clamp(12px,3.5vw,14.5px);font-weight:700;line-height:1.34;
  color:var(--ink);
  transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease;
  overflow:hidden;
}
.cards.two .card{font-size:clamp(13px,4vw,16px)}
.card::after{  /* リップル */
  content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);
  width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:rgba(139,92,246,.28);transform:scale(0);opacity:0;pointer-events:none;
}
.card.ripple::after{animation:ripple .45s ease-out}
@keyframes ripple{from{transform:scale(0);opacity:.75}to{transform:scale(26);opacity:0}}
.card.on{
  background:var(--g-card);color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(155,95,229,.30);
  text-shadow:0 1px 2px rgba(80,30,110,.30);
}
.card.pop{animation:pop .34s var(--ease-spring)}
@keyframes pop{0%{transform:scale(.96)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.card .chk{
  position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;
  background:#fff;color:var(--v-deep);display:none;
  align-items:center;justify-content:center;font-size:13px;font-weight:900;
  box-shadow:0 2px 6px rgba(90,40,140,.25);
}
.card.on .chk{display:flex;animation:chk .34s var(--ease-spring)}
@keyframes chk{from{transform:scale(0) rotate(-90deg)}to{transform:scale(1) rotate(0)}}

.reply{
  flex:0 1 var(--reply-h);height:var(--reply-h);min-height:22px;
  margin:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(12px,3.5vw,14px);font-weight:700;color:var(--v-deep);
  text-align:center;line-height:1.3;
}
.reply span{
  display:inline-block;padding:8px 18px;border-radius:999px;
  background:#F6F0FF;border:1px solid #E4D8FF;
  animation:replyPop .34s var(--ease-spring);
}
@keyframes replyPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.reply.empty{visibility:hidden}

.next{
  flex:0 0 var(--next-h);height:var(--next-h);min-height:44px;width:100%;
  border-radius:999px;color:#fff;
  font-size:clamp(15px,4.4vw,17px);font-weight:700;letter-spacing:.02em;
  background:var(--g-cta);box-shadow:var(--shadow-cta);
  position:relative;overflow:hidden;
  transition:opacity .2s ease,transform .12s ease;
}
.next::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));
}
.next:disabled{opacity:.42;box-shadow:none;cursor:default}
.next:not(:disabled):active{transform:scale(.985)}

.quiz-legal{
  flex:0 0 var(--legal-h);height:var(--legal-h);margin:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;font-size:10.5px;color:var(--sub);
}
.quiz-legal a{color:var(--sub);text-decoration:underline;padding:15px 8px;margin:-15px 0;position:relative;z-index:2}
.quiz-footer{display:none}
/* 高さに余裕がある端末では、デザイン通りの紫フッターをコンパクトに出す
   （余りの縦スペースをここで吸収し、設問エリアの間延びを防ぐ）*/
@media (min-height:700px){
  .quiz-legal{display:none}
  .quiz-footer{
    display:flex;flex:0 0 auto;align-items:center;gap:14px;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:#8B5FD9;color:rgba(255,255,255,.86);
  }
  .quiz-footer img{width:82px;flex:0 0 82px;margin:0}
  .quiz-footer .qf-txt{flex:1;min-width:0}
  .quiz-footer .ql{margin:0;display:flex;flex-wrap:wrap;gap:0 14px;font-size:11px;line-height:1.4}
  .quiz-footer .ql a{color:#fff;text-decoration:underline;padding:15px 5px;margin:-13px 0;position:relative;z-index:2}
  .quiz-footer .qc{margin:2px 0 0;font-size:10px;color:rgba(255,255,255,.68)}
}
@media (min-height:860px){
  .quiz-footer{padding-top:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .quiz-footer img{width:96px;flex:0 0 96px}
}

/* JSの実測フォールバック：それでも収まらない端末で段階的に詰める */
.quiz-screen.fit1{--fv-h:calc(var(--fv-base) * .88);--q-gap:11px;--reply-h:30px}
.quiz-screen.fit2{--fv-h:calc(var(--fv-base) * .76);--q-gap:9px;--reply-h:26px;--card-h:66px;--next-h:52px;--band-p:32px;--band-d:38px;--arrow-h:12px}
.quiz-screen.fit3{--fv-h:calc(var(--fv-base) * .64);--q-gap:7px;--reply-h:22px;--card-h:58px;--next-h:48px;--band-p:28px;--band-d:34px;--arrow-h:0px;--legal-h:24px}
.quiz-screen.fit3 .band-arrow{display:none}

/* ---- 端末の高さで縮める（1画面完結の担保）---- */
@media (max-height:800px){
  :root{--o1:21px;--o-s:14px;--o2:35px;--o3:18px;--o0:45px;--o-i:17px;--o5:16px;--o5-h:17px;
        --fv-base:192px;--reply-h:36px;--next-h:58px;--q-gap:13px}
}
@media (max-height:720px){
  :root{--o1:19.5px;--o-s:13px;--o2:32px;--o3:17px;--o0:41px;--o-i:15.5px;--o5:15px;--o5-h:16px;
        --fv-base:176px;--band-p:34px;--band-d:40px;--arrow-h:16px;
        --card-h:76px;--reply-h:34px;--next-h:54px;--q-gap:12px;--legal-h:28px}
  .fv-copy{margin-top:5px}
  .fv-copy .l1{font-size:clamp(17px,4.95vw,19.5px)}
  .fv-copy .l2{font-size:clamp(14.5px,4.2vw,16.5px)}
  .fv-pill{margin-top:5px;padding:2px 12px;font-size:11.5px}
  .fv-offer{margin-top:3px}
}
@media (max-height:640px){
  :root{--o1:18px;--o-s:12px;--o2:29px;--o3:15px;--o0:37px;--o-i:14px;--o5:13.5px;--o5-h:15px;
        --fv-base:162px;--band-p:32px;--band-d:36px;--arrow-h:12px;
        --card-h:68px;--reply-h:30px;--next-h:50px;--q-gap:10px;--legal-h:26px}
  .fv-copy{margin-top:4px}
  .fv-copy .l1{font-size:clamp(18px,5.2vw,20px)}
  .fv-copy .l2{font-size:clamp(15px,4.4vw,17px)}
  .fv-pill{margin-top:3px;padding:1px 11px;font-size:11px}
  .fv-offer{margin-top:2px}
  .fv-badge{padding:5px 12px 5px 14px;font-size:13px}
  .quiz{padding-top:10px}
}
@media (max-height:580px){
  :root{--o1:16.5px;--o-s:11px;--o2:26px;--o3:14px;--o0:33px;--o-i:12.5px;--o5:12.5px;--o5-h:14px;
        --fv-base:150px;--band-p:28px;--band-d:32px;--arrow-h:0px;
        --card-h:62px;--reply-h:26px;--next-h:46px;--q-gap:8px;--legal-h:24px}
  .band-arrow{display:none}
  .fv-badge{padding:4px 11px 4px 13px;font-size:12px}
  .fv-copy{margin-top:3px}
  .fv-copy .l1{font-size:17px}
  .fv-copy .l2{font-size:14.5px}
  .fv-pill{margin-top:2px;padding:1px 10px;font-size:10.5px;border-radius:9px}
  .fv-offer{margin-top:1px}
  .bd-gift{width:42px}
  .quiz{padding-top:9px}
}

/* ==========================================================
   2. 診断中
   ========================================================== */
.loading{
  position:fixed;inset:0;z-index:60;background:var(--g-fv);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .2s ease;
}
.load-inner{text-align:center;padding:0 24px}
.load-inner img{width:150px;margin:0 auto 18px;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.65;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}
.load-inner p{margin:0 0 16px;font-size:14px;font-weight:700;color:var(--v-deep)}
.load-bar{width:180px;height:5px;margin:0 auto;border-radius:999px;background:#EDE6FF;overflow:hidden}
.load-bar i{display:block;height:100%;border-radius:999px;background:var(--g-cta);animation:load 1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes load{from{width:0}to{width:100%}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ==========================================================
   3. 回答後ページ（デザイン画像＋透明リンクの重ね）
   画像はFigmaフレーム 375×5166 をセクション単位で書き出したもの。
   重ねる要素の座標は 375幅・各スライス基準の実測値を CSS変数で渡す。
   ========================================================== */
#result{padding-bottom:104px;background:#fff}

.rs{position:relative;display:block;line-height:0}
.rs>img{display:block;width:100%;height:auto}

/* デザイン座標（375幅基準）で重ねる */
.hot,.glow{
  position:absolute;
  left:calc(var(--x) / 375 * 100%);
  width:calc(var(--w) / 375 * 100%);
  top:calc(var(--y) / var(--h) * 100%);
  height:calc(var(--hh) / var(--h) * 100%);
}
.hot{
  display:block;border-radius:999px;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.hot:active{transform:scale(.985)}
/* CTAの光沢だけHTML側で足す（デザインは画像のまま）*/
.hot>i{
  position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:shine 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{0%,72%{left:-40%}92%,100%{left:120%}}
.hot.ft{border-radius:6px}

/* 表記義務の注記（デザイン画像に含まれないためHTMLで重ねる）*/
.ft-note{
  position:absolute;left:0;right:0;
  top:calc(150 / 248 * 100%);
  margin:0;padding:0 20px;text-align:center;line-height:1.75;
  font-size:clamp(9.5px,2.7vw,11px);color:rgba(255,255,255,.78);
}

/* 「80」を光らせる（カウントアップの代わり。画像の上に加算で重ねる）*/
.glow{
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,190,240,.85),rgba(200,120,255,.35),transparent 72%);
  mix-blend-mode:screen;filter:blur(6px);
}
.rs.in .glow{animation:numGlow 1.5s ease-out .15s both}
@keyframes numGlow{0%{opacity:0;transform:scale(.82)}38%{opacity:1;transform:scale(1.06)}100%{opacity:.32;transform:scale(1)}}

/* スクロール連動の出現 */
.reveal{opacity:0;transform:translateY(20px)}
.reveal.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---- 追従CTA ---- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  margin:0 auto;max-width:430px;
  padding:0 0 env(safe-area-inset-bottom);
  background:#FCFAFF;box-shadow:0 -6px 20px rgba(90,40,140,.10);
  transform:translateY(120%);transition:transform .34s cubic-bezier(.2,.8,.3,1);
}
.sticky.show{transform:none}