:root{--ink:#1e2b43;--muted:#68768d;--purple:#6655ce;--light:#f7f8fc;--line:#e7eaf2;--green:#16bd71}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--light);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.65}.ambient{position:fixed;pointer-events:none;filter:blur(5px);z-index:-1;border-radius:50%}.ambient-one{width:490px;height:490px;top:-260px;left:-170px;background:radial-gradient(circle,#e7e1ff 0%,transparent 70%)}.ambient-two{width:520px;height:520px;top:180px;right:-310px;background:radial-gradient(circle,#daf8ef 0%,transparent 70%)}.shell{max-width:860px;margin:0 auto;padding:23px 22px 30px}.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.02em;font-size:16px}.brand-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:linear-gradient(135deg,#7467dd,#54c6b5);color:white}.brand-mini{font-size:9px;letter-spacing:.12em;font-weight:700;color:#a0a8bc;margin-left:auto}.hero{text-align:center;padding:19px 0 27px}.hero-copy .eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;color:#6556b8;display:inline-block;background:#eeebff;padding:6px 14px;border-radius:99px}.spark{color:#9880f0}.hero h1{margin:13px auto 9px;font-size:clamp(23px,4.6vw,37px);line-height:1.5;letter-spacing:-.035em;font-weight:850}.hero h1 span{display:block;color:var(--purple)}.hero p{max-width:610px;margin:0 auto;font-size:13px;line-height:1.9;color:var(--muted)}.hero-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:15px}.hero-chips span{background:white;border:1px solid #ecebf5;border-radius:100px;padding:4px 12px;font-size:11px;font-weight:700;color:#687390}.chat-card{background:#fff;border:1px solid #e7eaf2;border-radius:24px;box-shadow:0 16px 55px rgba(55,73,120,.11),0 2px 9px rgba(55,73,120,.035);overflow:hidden}.chat-head{display:flex;align-items:center;gap:11px;padding:16px 22px;border-bottom:1px solid var(--line)}.head-avatar,.msg-avatar{display:grid;place-items:center;flex:none;background:linear-gradient(140deg,#7b6be1,#49b6bc);color:white}.head-avatar{width:41px;height:41px;border-radius:14px;font-size:22px;box-shadow:0 4px 12px #796bd644}.head-details{display:flex;flex-direction:column}.head-details strong{font-size:14px;letter-spacing:.01em}.head-details small{color:#8994a7;font-size:10px}.online-dot{width:7px;height:7px;background:#36c690;border-radius:50%;display:inline-block;margin-right:5px}.head-symbol{margin-left:auto;color:#a2aabd;letter-spacing:3px}.progress-wrap{padding:14px 23px 13px;background:#fff}.progress-label{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;color:#687591}.progress-label b{color:#6655ce}.progress-track{height:5px;background:#f0eff9;border-radius:20px;margin-top:9px;overflow:hidden}.progress-track span{display:block;height:100%;width:33.33%;background:linear-gradient(90deg,#7e70ed,#58c7bd);border-radius:20px;transition:width .55s ease}.conversation{min-height:145px;background:linear-gradient(160deg,#f7f8ff,#f2f9f9);padding:24px 22px 17px;display:flex;flex-direction:column;gap:20px}.message-row{display:flex;gap:9px;align-items:flex-end;animation:msgIn .4s ease both}.msg-avatar{height:35px;width:35px;border-radius:12px;font-size:19px;margin-bottom:3px}.msg-body{max-width:min(78%,510px)}.msg-name{font-size:10px;color:#8391a7;margin:0 0 5px 4px;font-weight:600}.bubble{background:#fff;border-radius:16px 16px 16px 5px;padding:13px 17px;box-shadow:0 3px 11px #4d66830a;font-size:14px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}.bubble-hint{display:block;font-size:11px;margin-top:5px;color:#8a95a7}.message-row.me{justify-content:flex-end}.message-row.me .msg-body{display:flex;flex-direction:column;align-items:flex-end}.me .bubble{color:#fff;background:linear-gradient(120deg,#7769da,#5c58c3);border-radius:16px 16px 5px 16px;box-shadow:0 6px 15px #7469ce2e}.read-label{font-size:10px;color:#9aa6b6;margin-top:4px}.typing-bubble{display:flex;gap:5px;padding:18px 21px}.typing-bubble i{display:block;width:7px;height:7px;border-radius:50%;background:#aaa5e6;animation:dot 1.45s ease-in-out infinite}.typing-bubble i:nth-child(2){animation-delay:.22s}.typing-bubble i:nth-child(3){animation-delay:.44s}.answer-panel{padding:20px 22px 23px;background:white}.answer-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:12px;font-weight:800}.answer-hint{color:#a6aec1;font-size:9px;letter-spacing:.16em}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-button{cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;min-height:63px;padding:12px 15px;border:1px solid #e9e6fb;border-radius:13px;background:#f9f8ff;font-size:13px;font-weight:750;color:#34405a;box-shadow:0 3px 0 #e4e0fa;transition:transform .17s ease,background .17s ease,box-shadow .17s ease}.answer-button:hover{transform:translateY(-2px);background:#eeebff;box-shadow:0 6px 14px #6e61cd22}.answer-button:focus-visible,.line-cta:focus-visible{outline:3px solid #74cfc9;outline-offset:3px}.answer-button:active{transform:translateY(2px);box-shadow:none}.answer-button-enter{opacity:0;transform:translateY(12px) scale(.985);animation:answerIn .42s cubic-bezier(.2,.75,.25,1) forwards}.answer-circle{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:8px;background:white;border:1px solid #dedaf7;color:#9b90dd;font-size:12px}.answer-text{flex:1}.answer-chevron{font-size:24px;font-weight:400;color:#aaa3da}.complete{margin:0;padding:25px 24px 29px;background:white;text-align:center}.complete[hidden],.answer-panel[hidden]{display:none}.complete-mark{margin:0 auto 8px;display:grid;place-items:center;width:49px;height:49px;border-radius:50%;background:#e4fbf1;color:#18bc78;font-size:25px;font-weight:bold}.complete-kicker{font-size:10px;font-weight:800;letter-spacing:.16em;color:#7a69d6}.complete h2{font-size:22px;margin:8px 0}.complete>p{color:#69778d;font-size:13px;max-width:510px;margin:0 auto 18px}.line-cta{display:flex;align-items:center;text-align:left;gap:14px;max-width:560px;margin:18px auto 12px;border-radius:15px;padding:16px 19px;background:linear-gradient(130deg,#18c975,#08a95f);box-shadow:0 6px 0 #088c4e,0 14px 24px #18b86c35;text-decoration:none;color:#fff;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.line-cta:before{content:"";position:absolute;top:-100%;left:-45%;width:40%;height:300%;background:linear-gradient(90deg,transparent,#ffffff4d,transparent);transform:rotate(25deg);animation:shine 4s ease-in-out infinite;pointer-events:none}.line-cta:hover{transform:translateY(-2px);box-shadow:0 8px 0 #088c4e,0 18px 30px #18b86c40}.line-cta:active{transform:translateY(5px);box-shadow:0 1px 0 #088c4e}.line-logo{border:2px solid #ffffffb9;border-radius:11px;padding:6px 9px;font-size:13px;font-weight:900;letter-spacing:-.04em}.cta-text{display:flex;flex-direction:column;flex:1}.cta-text strong{font-size:17px;line-height:1.5}.cta-text small{font-size:10px;opacity:.9}.cta-arrow{font-size:25px}.complete .cta-note{font-size:10px;color:#9aa5b5;margin:11px auto 0}.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:25px 4px 12px;color:#99a4b3;font-size:10px}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer a{color:#7c88a2;text-decoration:none}.footer a:hover{text-decoration:underline}.fade-in{animation:msgIn .35s ease both}.fade-out{opacity:.4;transform:translateY(3px);transition:all .18s}@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes dot{0%,65%,100%{transform:scale(.88);opacity:.38}32%{transform:scale(1);opacity:1}}@keyframes answerIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:620px){.shell{padding:14px 11px 24px}.hero{padding:22px 3px 23px}.hero h1{font-size:clamp(22px,6vw,29px)}.hero p{font-size:12px}.hero-chips span{font-size:10px}.chat-card{border-radius:18px}.chat-head{padding:13px 14px}.progress-wrap{padding:13px 15px}.conversation{padding:20px 12px 18px;gap:18px}.msg-body{max-width:83%}.bubble{padding:12px 13px;font-size:13px}.answer-panel{padding:17px 12px 20px}.answer-grid{grid-template-columns:1fr;gap:10px}.answer-button{min-height:58px}.complete{padding:23px 14px 28px}.complete h2{font-size:20px}.line-cta{gap:10px;padding:15px 12px}.cta-text strong{font-size:15px}.footer{justify-content:center;text-align:center}.brand-mini{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Live text reveal on the opening question */
.type-cursor{display:inline-block;width:2px;height:1.1em;margin-left:2px;background:#7364cd;vertical-align:-.15em;animation:typeBlink .75s steps(1,end) infinite}@keyframes typeBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.type-cursor{animation:none}}

/* Compact top layout and CTA-only completion */
.shell{padding-top:12px}
.complete{padding-top:12px;padding-bottom:22px}
.complete .line-cta{margin-top:8px}
@media(max-width:620px){.shell{padding-top:8px}.complete{padding-top:10px}}

/* Answer tray: unfolds downward with a soft, slightly springy finish. */
.answer-panel{overflow:hidden;transition:height .52s cubic-bezier(.22,.82,.26,1)}
@media(prefers-reduced-motion:reduce){.answer-panel{transition:none}}

/* Typing indicator: understated text instead of three moving squares */
.typing-text-bubble{display:inline-flex;align-items:center;gap:2px;padding:11px 16px;min-height:39px;color:#68768d;font-size:12px;font-weight:600;letter-spacing:.03em}
.typing-ellipsis{display:inline-block;animation:typingEllipsis 1.4s ease-in-out infinite;transform-origin:left center}
@keyframes typingEllipsis{0%,100%{opacity:.4}45%{opacity:1}}
@media(prefers-reduced-motion:reduce){.typing-ellipsis{animation:none;opacity:1}}

/* Final guidance: clearly connect the chat conclusion with the LINE CTA. */
.final-guidance{display:flex;flex-direction:column;gap:10px;border:1px solid #e4e9fa;background:linear-gradient(150deg,#fff 45%,#f6f8ff 100%);}
.final-thanks{font-size:13px;line-height:1.75;color:#59667d;}
.final-emphasis{font-size:15px;line-height:1.85;font-weight:800;color:#3d36a0;padding:9px 11px;border-left:3px solid #7669df;background:#f0efff;border-radius:0 8px 8px 0;}
.final-instruction{font-size:12px;line-height:1.7;font-weight:700;color:#12955b;}
@media(max-width:620px){.final-emphasis{font-size:14px}.final-thanks{font-size:12px}}


/* LINE CTA reworked: isolated animation layers, mobile + desktop Chrome. */
.line-cta{
  animation:none!important;-webkit-animation:none!important;
  transform:none!important;
  overflow:visible;
  display:block;
  padding:0;
  background:none;
  box-shadow:none;
  border-radius:17px;
  margin:18px auto 12px;
  max-width:560px;
  text-decoration:none;
}
.line-cta:before{content:none!important;animation:none!important}
.line-cta:hover,.line-cta:active{transform:none!important;box-shadow:none}
.line-cta-motion{
  display:flex;align-items:center;gap:14px;
  padding:17px 19px;
  color:#fff;
  border-radius:17px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(125deg,#1bd57d,#04a85a);
  box-shadow:0 6px 0 #078649,0 14px 25px rgba(18,177,99,.33);
  transform:scale(1);
  transform-origin:center center;
  -webkit-animation:smartworkCtaBounce 2.35s ease-in-out infinite;
  animation:smartworkCtaBounce 2.35s ease-in-out infinite;
  will-change:transform;
}
.line-cta-shimmer{
  position:absolute;
  inset:-55% auto -55% -65%;
  width:48%;
  z-index:1;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 27%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.12) 73%,transparent 100%);
  transform:translateX(0) rotate(22deg);
  pointer-events:none;
  -webkit-animation:smartworkCtaGlint 2.35s ease-in-out infinite;
  animation:smartworkCtaGlint 2.35s ease-in-out infinite;
  will-change:transform;
}
.line-cta-motion .line-logo,.line-cta-motion .cta-text,.line-cta-motion .cta-arrow{position:relative;z-index:2}
@-webkit-keyframes smartworkCtaBounce{0%,8%,42%,100%{transform:scale(1)}18%{transform:scale(1.06)}29%{transform:scale(1.015)}}
@keyframes smartworkCtaBounce{0%,8%,42%,100%{transform:scale(1)}18%{transform:scale(1.06)}29%{transform:scale(1.015)}}
@-webkit-keyframes smartworkCtaGlint{0%,11%{transform:translateX(0) rotate(22deg);opacity:0}15%{opacity:1}42%{transform:translateX(370%) rotate(22deg);opacity:1}47%,100%{transform:translateX(370%) rotate(22deg);opacity:0}}
@keyframes smartworkCtaGlint{0%,11%{transform:translateX(0) rotate(22deg);opacity:0}15%{opacity:1}42%{transform:translateX(370%) rotate(22deg);opacity:1}47%,100%{transform:translateX(370%) rotate(22deg);opacity:0}}
.line-cta:focus-visible{outline:3px solid #0c9c68;outline-offset:8px}
@media(max-width:620px){.line-cta{margin-left:6px;margin-right:6px}.line-cta-motion{padding:16px 13px;gap:10px}}
/* Accessibility preference: reduce animation while preserving an obvious CTA. */
@media(prefers-reduced-motion:reduce){.line-cta-motion,.line-cta-shimmer{animation:none!important;-webkit-animation:none!important;will-change:auto}.line-cta-shimmer{display:none}}

/* Mobile-friendly cheerful feedback between the answers. */
.encouragement-row{animation:encouragementPop .42s cubic-bezier(.18,.85,.3,1.15) both;}
.encouragement-bubble{display:flex;align-items:center;gap:9px;color:#7450aa;background:linear-gradient(130deg,#fff5fb,#f4efff);border:1px solid #e7d8f7;box-shadow:0 5px 18px rgba(119,91,173,.10);font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-weight:800;letter-spacing:.015em;line-height:1.7;}
.encouragement-text{font-size:14px;}
.encouragement-spark{font-size:20px;color:#df7db5;flex:none;}
@keyframes encouragementPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:620px){.encouragement-text{font-size:13px}.encouragement-bubble{padding:12px}}


/* Female staff avatar (image is selected from config.php) */
.staff-avatar{
  background-color:#fff !important;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  border:1px solid #ece6f8;
  box-shadow:0 4px 12px rgba(121,107,214,.16);
  color:transparent !important;
  overflow:hidden;
}
.head-avatar.staff-avatar{width:41px;height:41px;border-radius:50%;}
.msg-avatar.staff-avatar{width:35px;height:35px;border-radius:50%;margin-bottom:3px;}

/* First-view artwork above the chat, responsive without cropping any text. */
.hero-banner{width:100%;margin:0 auto 14px;overflow:hidden;border-radius:17px;background:#fff;box-shadow:0 8px 28px rgba(68,78,125,.075)}
.hero-banner img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:620px){.hero-banner{border-radius:12px;margin-bottom:10px}}