/* Match the 1440px section frame and 40px gutters used by About, Service,
   Company and the contact layouts, while keeping the background full bleed. */
.chatbot-intro{position:relative;isolation:isolate;background:#f3f1ec;color:var(--ink);min-height:1019px;padding:120px max(40px,calc((100% - 1360px)/2)) 100px}
.chatbot-intro::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:url('assets/service-grain.png') 0 0/300px 300px repeat;opacity:.9}
.chatbot-intro-header{margin-left:-8px}
/* Japanese title: kana from the JP stack, Latin "AI" stays in Teachers; taller
   line box so kana are not cut. */
.chatbot-intro-heading{font:700 clamp(64px,9.72222vw,140px)/1.2 Teachers,var(--font-ja);letter-spacing:-.02em}
.chatbot-intro-kicker{margin:37px 0 0 8px;font:700 20px/1.6 var(--font-ja)}
.chatbot-intro-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:86px;align-items:start}
.chatbot-intro-subheading{font:700 clamp(28px,2.77778vw,40px)/1.5 var(--font-ja)}
.chatbot-intro-body{max-width:640px;margin-top:36px;font:400 16px/2.1 var(--font-ja);color:rgb(0 7 31 / .85);overflow-wrap:anywhere}
.chatbot-intro-body p+p{margin-top:33.6px}
.chatbot-intro-character{position:relative;width:min(100%,538px);aspect-ratio:1;margin-top:-86px;margin-left:71px;max-width:calc(100% - 71px)}
.chatbot-intro-mascot{display:block;width:100%;height:100%;padding:0;border:0;border-radius:24px;background:none;cursor:pointer;touch-action:manipulation}
.chatbot-intro-mascot:focus-visible{outline:2px solid var(--orange);outline-offset:-10px}
.chatbot-intro-mascot[aria-disabled='true']{cursor:default}
.chatbot-intro-character .mascot-figure{width:100%;height:100%}
/* Keep the walking decoder rendered without exposing its packed alpha half. */
.chatbot-intro-character .mascot-video-source{position:absolute;top:50%;left:50%;display:block;width:1px;height:1px;opacity:.001;clip-path:inset(50%);pointer-events:none}
.chatbot-intro-bubble{position:absolute;left:66.36%;top:-2px;display:flex;align-items:center;justify-content:center;width:156px;height:72px;border-radius:8px;background:#fff;color:var(--ink);font:700 15.84px/22.176px var(--font-ja);white-space:nowrap}
.chatbot-intro-bubble img{position:absolute;left:52.43px;top:70.12px;display:block;max-width:none}
@media(min-width:1024px) and (max-width:1250px){
 .chatbot-intro-character{margin-left:20px;max-width:calc(100% - 20px)}
 .chatbot-intro-bubble{left:auto;right:0;transform:scale(.85);transform-origin:top right}
}
@media(max-width:1023px){
 .chatbot-intro{min-height:0;padding-block:88px}
 .chatbot-intro-header{margin-left:0}
 .chatbot-intro-heading{font-size:clamp(62px,9.72222vw,100px)}
 .chatbot-intro-kicker{margin:28px 0 0;font-size:18px;line-height:1.6}
 .chatbot-intro-layout{grid-template-columns:minmax(0,1fr);margin-top:64px}
 .chatbot-intro-body{max-width:none}
 .chatbot-intro-character{margin:42px auto 0;width:440px;max-width:100%}
 .chatbot-intro-bubble{left:auto;right:0}
}
@media(max-width:767px){
 .chatbot-intro{padding-inline:24px}
}
@media(max-width:600px){
 .chatbot-intro{padding-block:72px}
 /* "パーソナルAI" is about 6.2em wide; fit it inside the 24px gutters. */
 .chatbot-intro-heading{font-size:clamp(40px,calc((100vw - 48px)/6.8),84px)}
 .chatbot-intro-kicker{font-size:16px;line-height:1.8;margin-top:24px}
 .chatbot-intro-layout{margin-top:48px}
 /* Size for lines of up to 15 full-width glyphs inside the actual 24px
    gutters with 2px spare, without shrinking either line horizontally. */
 .chatbot-intro-subheading{font-size:clamp(18px,calc((100vw - 50px)/15),28px);line-height:1.6;letter-spacing:0}
 .chatbot-intro-subheading>span{white-space:nowrap}
 .chatbot-intro-body{margin-top:28px;font-size:15px}
 .chatbot-intro-body p+p{margin-top:24px}
 .chatbot-intro-character{width:min(100%,340px)}
 .chatbot-intro-bubble{width:128px;height:58px;font-size:13px;top:8px;right:0}
 .chatbot-intro-bubble img{top:56px;left:40px}
}

.chatbot-greeting{display:grid;place-items:center;min-width:7em}
.chatbot-greeting>span{grid-area:1/1;width:max-content;white-space:nowrap;animation:chatbot-greeting-first 8s steps(6,end) infinite}
.chatbot-greeting>span+span{animation-name:chatbot-greeting-second;animation-timing-function:steps(7,end)}
/* Clip the fixed text one full-width character at a time. Each greeting stays
   readable for over three seconds; neither the text nor the bubble reflows. */
@keyframes chatbot-greeting-first{
 0%{opacity:1;clip-path:inset(0 100% 0 0)}
 10%,49.99%{opacity:1;clip-path:inset(0 0 0 0)}
 50%,100%{opacity:0;clip-path:inset(0 100% 0 0)}
}
@keyframes chatbot-greeting-second{
 0%,49.99%{opacity:0;clip-path:inset(0 100% 0 0)}
 50%{opacity:1;clip-path:inset(0 100% 0 0)}
 61%,99.99%{opacity:1;clip-path:inset(0 0 0 0)}
 100%{opacity:0;clip-path:inset(0 100% 0 0)}
}
html[data-motion-paused='true'] .chatbot-greeting>span{animation:none;opacity:1;clip-path:none}
html[data-motion-paused='true'] .chatbot-greeting>span+span{display:none}
@media(prefers-reduced-motion:reduce){.chatbot-greeting>span{animation:none;opacity:1;clip-path:none}.chatbot-greeting>span+span{display:none}}

/* The approved subtitle breaks only at the existing desktop breakpoint. */
.chatbot-intro-pc-break{display:none}
@media(min-width:1024px){.chatbot-intro-pc-break{display:initial}}