.company-story{--cs-ink:#202124;--cs-header:64px;background:#f7f7f5;color:var(--cs-ink);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;scroll-margin-top:var(--cs-header)}
.company-story *{box-sizing:border-box}
.company-story-stage{position:relative;min-height:calc(100svh - var(--cs-header));padding:44px clamp(16px,4vw,54px);display:grid;place-items:center;overflow:hidden}
.company-story-window{width:min(1160px,100%);height:min(690px,calc(100svh - var(--cs-header) - 90px));min-height:590px;background:#fff;border:1px solid #e1e3e6;border-radius:18px;box-shadow:0 32px 70px -32px #1a24334a,0 2px 6px #1a24330a;overflow:hidden;opacity:0;transform:translateY(22px) scale(.98);transition:opacity .45s cubic-bezier(.2,0,0,1),transform .55s cubic-bezier(.2,0,0,1)}
.company-story.is-window-visible .company-story-window{opacity:1;transform:none}
.company-story-app{height:100%;display:flex;flex-direction:column;background:#fff;position:relative}
.company-story-thread{flex:1;min-height:0;overflow:auto;scrollbar-width:none;padding:28px clamp(20px,4vw,44px) 12px}
.company-story-thread::-webkit-scrollbar{display:none}
.company-story-app .account-user{width:max-content;max-width:82%;margin:0 0 18px auto;padding:10px 16px;background:#f4f4f4;border-radius:20px 20px 4px 20px;font-size:13px;line-height:1.55;opacity:0;transform:translateY(9px);transition:opacity .25s,transform .3s cubic-bezier(.2,0,0,1)}
.company-story-app .account-user.is-visible{opacity:1;transform:none}
.company-story-app .workspace-ai-answer{font-size:13px;font-weight:400;line-height:1.65;margin:0 0 13px;min-height:22px}
.company-story-app .workspace-ai-answer p{margin:0}
.company-story-app .company-ai-loading{height:22px;display:none;align-items:center;gap:4px;margin-bottom:13px}
.company-story-app .company-ai-loading.is-visible{display:flex}
.company-story-app .company-ai-loading i{width:5px;height:5px;border-radius:50%;background:#686e75;animation:company-pulse 900ms infinite alternate}
.company-story-app .company-ai-loading i:nth-child(2){animation-delay:160ms}.company-story-app .company-ai-loading i:nth-child(3){animation-delay:320ms}
.company-story-app .workspace-board{position:relative;background:#fff;border:1px solid #e5e7e9;border-radius:18px;box-shadow:0 7px 20px -8px #18202d26;padding:22px 24px 14px;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,0,0,1)}
.company-story-app .workspace-board.is-visible{opacity:1;transform:none}
.company-board-label{font-size:12px;font-weight:650;color:#727a83;letter-spacing:.03em;border-bottom:1px solid #e9ebee;padding:0 0 12px}.company-board-label span{margin-left:8px}
.company-story-app .wb-stage,.company-board-skeleton{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px 7px;justify-items:center;align-items:start;min-height:177px;padding:17px 0 13px}
.company-story-app .wb-stage{opacity:0;visibility:hidden;transition:opacity .35s}.company-story-app .workspace-board.is-ready .wb-stage{opacity:1;visibility:visible}
.company-board-skeleton{position:absolute;top:48px;left:24px;right:24px;pointer-events:none;opacity:1;transition:opacity .25s}.company-story-app .workspace-board.is-ready .company-board-skeleton{opacity:0;visibility:hidden}
.company-skeleton-person{display:grid;justify-items:center;gap:8px;width:100%;padding:3px 0}.company-skeleton-person i{display:block;width:52px;height:52px;border-radius:50%;background:linear-gradient(110deg,#eef0f2 15%,#f9fafb 45%,#eef0f2 75%);background-size:200% 100%;animation:company-shimmer 1.1s linear infinite}.company-skeleton-person b{display:block;width:62%;height:9px;border-radius:5px;background:#eef0f2}
.company-skeleton-detail{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%;min-height:126px;margin-top:5px;padding:18px;border:1px solid #edf0f2;border-radius:12px;background:#fff}.company-skeleton-detail i,.company-skeleton-detail b,.company-skeleton-detail em{display:block;height:12px;border-radius:6px;background:linear-gradient(110deg,#eef0f2 15%,#f9fafb 45%,#eef0f2 75%);background-size:200% 100%;animation:company-shimmer 1.1s linear infinite}.company-skeleton-detail i{grid-column:1/-1;width:29%}.company-skeleton-detail b{grid-column:1/-1;width:44%;height:8px}.company-skeleton-detail em{height:39px;background:#f2f4f6}
.company-story-app .wb-point{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0;min-height:75px;border:0;background:transparent;padding:2px 0 0;color:#5e6670;cursor:pointer;font:inherit}
.company-story-app .wb-point:focus-visible{outline:2px solid #25272b;outline-offset:2px;border-radius:8px}
.company-story-app .wb-dot{display:grid;place-items:center;position:relative;width:51px;height:51px;border-radius:50%;border:3px double #68737f;background:#f3f7ff;box-shadow:0 1px 4px #20212413;transition:box-shadow .15s,transform .15s}
.company-story-app .wb-dot svg,.company-story .ai-reference-avatar svg,.company-profile-avatar svg{width:80%;height:80%;fill:#929ba5}
.company-story-app .wb-point:hover .wb-dot,.company-story-app .wb-point.is-active .wb-dot{box-shadow:0 0 0 3px #fff,0 0 0 4px #303840;transform:scale(1.05)}
.company-story-app .wb-face-level{position:absolute;top:38px;left:calc(50% + 11px);padding:0 5px;border:1px solid #dce2e7;border-radius:5px;background:#fff;color:#515b66;font:10px/18px ui-monospace,monospace;white-space:nowrap}
.company-story-app .wb-face-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:600;letter-spacing:.01em}
.company-story-app .wb-peek{border:1px solid #e4e6e9;border-radius:13px;padding:14px 16px 10px;box-shadow:0 6px 18px -11px #18202d3a;background:#fff;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.company-story-app .workspace-board.is-ready .wb-peek{opacity:1;transform:none}
.company-story-app .wb-peek strong{display:block;font-size:14px;line-height:1.4}.company-story-app .wb-peek>span{font-size:11px;color:#747b84}
.company-story-app .wb-person-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;padding:9px 11px;background:#f7f8f9;border-radius:8px}
.company-story-app .wb-person-facts small{display:block;font-size:9px;color:#8b929a}.company-story-app .wb-person-facts p{font-size:10px;line-height:1.5;margin:3px 0 0}
.company-story-app .wb-sample-note{display:block;margin-top:5px;text-align:right;font-size:9px;color:#90969d}
.company-story-app .company-scout-request{margin-top:18px}
.company-story-app .account-compose{flex:none;background:#fff;padding:12px clamp(20px,4vw,44px) 16px;border-top:1px solid #f1f2f3}
.company-story .ai-composer{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 38px;align-items:center;gap:8px;min-height:58px;border:1px solid #dedede;border-radius:30px;padding:8px 10px;background:#fff;box-shadow:0 3px 16px #28313b06;color:#20252b;font-size:15px;transition:border-color .16s,box-shadow .16s}
.company-story .ai-plus{display:grid;place-items:center;width:36px;height:36px;font-size:24px;font-weight:300}.company-story .ai-send{display:grid;place-items:center;width:38px;height:38px;background:#090909;color:#fff;border-radius:50%;font-size:23px;line-height:1;transition:transform .18s}
.company-story .ai-composer.is-sending .ai-send{transform:scale(.78)}
.company-story .ai-prompt-line{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip;font-size:15px}.company-story .ai-placeholder{color:#9299a1}.company-story .ai-caret{display:none;width:2px;height:1em;flex:none;background:#20252b;animation:company-caret 1s steps(1) infinite}.company-story .ai-composer.is-typing .ai-placeholder{display:none}.company-story .ai-composer.is-typing .ai-caret{display:block}
.company-story .ai-composer.is-candidate-target{box-shadow:0 0 0 4px #25272b12;border-color:#8b9096}
.company-story .ai-candidate-drop-indicator{position:absolute;z-index:4;inset:0;display:none;align-items:center;justify-content:center;padding:0 16px;border:1px dashed #838991;border-radius:inherit;background:#f7f8f9;color:#4a5057;font:500 13px/1.5 system-ui;white-space:nowrap;pointer-events:none}
.company-story .ai-composer.is-candidate-target .ai-candidate-drop-indicator,.company-story .ai-composer.is-candidate-over .ai-candidate-drop-indicator{display:flex}.company-story .ai-candidate-drop-indicator strong{display:none;font:inherit}.company-story .ai-composer.is-candidate-over .ai-candidate-drop-indicator{background:#25272b;color:#fff;border-color:#25272b}.company-story .ai-composer.is-candidate-over .ai-candidate-drop-indicator>span{display:none}.company-story .ai-composer.is-candidate-over .ai-candidate-drop-indicator strong{display:inline}
.company-story .ai-candidate-reference{display:none;align-items:center;gap:6px;flex:none;max-width:42%;padding:2px 7px 2px 3px;border:1px solid #dde3e8;border-radius:7px;background:#f1f4f6;color:#303b46;font:11px/1.6 system-ui;vertical-align:middle}.company-story .ai-candidate-reference>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.company-story .ai-composer.has-candidate-reference .ai-candidate-reference{display:inline-flex}.company-story .ai-reference-avatar{display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:50%;background:#e9eef2}.company-story .ai-reference-close{color:#65717c;font-size:17px;line-height:1}.company-story .ai-composer.has-candidate-reference .ai-placeholder{display:none}
.company-story .company-story-hero{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(860px,calc(100% - 32px));height:78px;min-height:0;
  padding:var(--hero-pad-y,9px) var(--hero-pad-x,12px);
  display:grid;grid-template-columns:var(--hero-plus,38px) minmax(0,1fr) var(--hero-send,38px);
  align-items:center;gap:var(--hero-gap,8px);background:#fff;border:1px solid #dedede;
  border-radius:39px;box-shadow:0 18px 52px -25px #20212440;pointer-events:none;
}
.company-story .company-story-hero .ai-prompt-line{font-size:var(--hero-font,22px);gap:3px}
.company-story-hero .ai-prompt-line:empty::before{content:'メッセージを入力';color:#9299a1}
.company-story-hero.is-typing .ai-prompt-line::after{content:'';display:block;flex:none;width:1px;height:1em;background:#20252b;animation:company-caret 1s steps(1) infinite}
.company-story .company-story-hero .ai-plus{width:var(--hero-plus,38px);height:var(--hero-plus,38px);font-size:var(--hero-plus-font,26px)}
.company-story .company-story-hero .ai-send{width:var(--hero-send,38px);height:var(--hero-send,38px);font-size:var(--hero-send-font,24px);opacity:.35}
.company-story .company-story-hero.is-ready .ai-send{opacity:1}
.company-story.is-intro-floating .account-compose .ai-composer{visibility:hidden}
.company-demo-cursor{position:absolute;z-index:12;left:0;top:0;width:26px;height:30px;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 2px #0005)}
.company-drag-ghost{position:absolute;z-index:11;left:0;top:0;display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border:1px solid #cdd5db;border-radius:9px;background:#fff;box-shadow:0 10px 25px #1a243342;font-size:11px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none}
.company-profile-sidebar{position:absolute;z-index:10;right:0;top:0;bottom:0;width:min(49%,540px);display:flex;flex-direction:column;background:#f5f7fa;border-left:1px solid #dfe4eb;box-shadow:-15px 0 40px #1c27301f;transform:translateX(102%);visibility:hidden;pointer-events:none;transition:transform .5s cubic-bezier(.2,0,0,1),visibility 0s linear .5s}
.company-profile-sidebar.is-open{transform:none;visibility:visible;pointer-events:auto;transition:transform .5s cubic-bezier(.2,0,0,1)}
.company-profile-toolbar{height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:#fff;border-bottom:1px solid #e5e8ed;color:#7e8792;font-size:11px}.company-profile-toolbar button{width:32px;height:32px;border:0;background:transparent;color:#474e55;font-size:24px;line-height:1;cursor:pointer;border-radius:6px}.company-profile-toolbar button:hover{background:#f1f3f5}.company-profile-toolbar button:focus-visible{outline:2px solid #202124}
.company-profile-scroll{overflow:auto;padding:12px;scrollbar-width:thin}.company-profile-card,.company-resume-card{background:#fff;border:1px solid #e2e6eb;border-radius:15px;padding:17px;margin-bottom:12px}.company-profile-identity{display:flex;align-items:flex-start;gap:12px}.company-profile-avatar{width:49px;height:49px;display:grid;place-items:center;flex:none;border-radius:50%;background:#4b88e6}.company-profile-avatar svg{fill:#fff}.company-profile-identity strong{display:block;font-size:18px;line-height:1.3}.company-profile-identity p{margin:5px 0 0;color:#5f6874;font-size:11px;font-weight:600}.company-profile-identity small{font-size:10px;color:#929aa3}.company-flag{color:#ee3345}
.company-profile-metrics{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e1e6ee;border-radius:11px;overflow:hidden;margin-top:17px}.company-profile-metrics div{padding:10px 11px;min-height:58px}.company-profile-metrics div:nth-child(odd){border-right:1px solid #e1e6ee}.company-profile-metrics div:nth-child(-n+2){border-bottom:1px solid #e1e6ee}.company-profile-metrics small{display:block;color:#8a94a0;font-size:9px;font-weight:650}.company-profile-metrics strong{display:block;margin-top:4px;color:#26313c;font-size:12px}.company-profile-scout{display:block;width:max-content;margin:14px 0 0 auto;padding:10px 15px;background:#171717;color:#fff;border-radius:9px;font-size:12px;font-weight:650}
.company-resume-card>strong{display:block;font-size:15px}.company-resume-card>p{font-size:10px;line-height:1.65;color:#5b6570;margin:7px 0 13px}.company-resume-sheet{min-height:290px;padding:20px 16px;background:#fff;border:12px solid #edf1f4;box-shadow:inset 0 0 0 1px #bfc7d0;color:#48515a}.company-resume-title{text-align:center;font-size:13px;letter-spacing:.25em;margin:0 0 20px}.company-resume-row{display:grid;grid-template-columns:85px 1fr;border-bottom:1px solid #aeb7c0;min-height:27px;align-items:center;font-size:9px}.company-resume-row span{padding-left:4px;color:#79818a}.company-resume-row b{font-weight:500}.company-resume-lines{height:72px;background:repeating-linear-gradient(to bottom,transparent 0 23px,#b8c0c8 24px 25px)}
.company-demo-replay{position:absolute;top:10px;right:clamp(16px,4vw,54px);border:0;background:transparent;color:#828990;font:11px/1.5 system-ui;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s}.company-demo-replay.is-visible{opacity:1;pointer-events:auto}.company-demo-replay:hover{color:#202124}.company-demo-replay:focus-visible{outline:2px solid #202124;outline-offset:3px}
.company-story-anchor{scroll-margin-top:var(--cs-header,64px)}
@keyframes company-pulse{to{opacity:.25;transform:translateY(-3px)}}@keyframes company-shimmer{to{background-position-x:-200%}}@keyframes company-caret{50%{opacity:0}}
@media(max-width:700px){
  .company-demo-replay{top:6px}
}
@media(prefers-reduced-motion:reduce){.company-story *, .company-story *::before,.company-story *::after{animation:none!important;transition:none!important}}
body.company-story-in-view #jc-chat-icon-wrap{visibility:hidden!important;pointer-events:none!important}

/* Scroll chapter layout: concise copy at left, working UI at right. */
.company-story{height:500svh;--company-progress:0}
.company-story-stage{position:sticky;top:var(--cs-header);height:calc(100svh - var(--cs-header));min-height:0;padding:24px clamp(18px,3.5vw,58px)}
.company-story-layout{display:grid;grid-template-columns:minmax(230px,.48fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,70px);width:min(1440px,100%);height:100%;margin:auto}
.company-story-copy{display:grid;align-self:center;max-width:410px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,0,0,1),visibility 0s linear .4s}
.company-story.is-intro-complete .company-story-copy{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .5s cubic-bezier(.2,0,0,1)}
.company-story-copy-main{grid-column:1;grid-row:1}
.company-story-copy h2{text-wrap:balance;margin:0;font-size:clamp(28px,2.7vw,42px);font-weight:750;line-height:1.22;letter-spacing:-.045em;color:#202124}
.company-story-copy p{margin:22px 0 0;font-size:clamp(14px,1.15vw,17px);font-weight:400;line-height:1.9;letter-spacing:.01em;color:#636a72}
.company-story-progress{grid-column:1;grid-row:2;width:100px;height:2px;margin-top:37px;overflow:hidden;background:#d8dcdf}
.company-story-progress span{display:block;width:100%;height:100%;background:#d82736;transform:scaleX(var(--company-progress));transform-origin:left}
.company-story-visual{position:relative;min-width:0;height:min(690px,calc(100svh - var(--cs-header) - 50px));align-self:center}
.company-story-window{position:relative;width:100%;height:100%;min-height:0}
.company-story-thread,.company-profile-scroll{overflow:hidden}
.company-story:not(.is-window-visible) .company-story-window{pointer-events:none}
@media(max-width:900px){
  .company-story-stage{padding:16px 14px}
  .company-story-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:14px;max-width:690px}
  .company-story-copy{max-width:none}
  .company-story-copy h2{font-size:clamp(25px,4vw,32px)}
  .company-story-copy p{margin-top:8px;font-size:12px;line-height:1.6}
  .company-story-progress{width:70px;margin-top:11px}
  .company-story-visual{height:100%;min-height:0}
}
@media(max-width:700px){
  .company-story-stage{min-height:0;padding:11px 10px 13px}
  .company-story-layout{gap:9px}
  .company-story-copy h2{font-size:24px}
  .company-story-copy p{font-size:11px;margin-top:5px}
  .company-story-progress{margin-top:7px}
  .company-story-window{height:100%;min-height:0}
}
@media(max-height:650px) and (min-width:901px){
  .company-story-stage{padding-top:10px;padding-bottom:10px}
  .company-story-visual{height:calc(100svh - var(--cs-header) - 20px)}
}
@media(prefers-reduced-motion:reduce){
  .company-story{height:auto}
  .company-story-stage{position:relative;top:0;min-height:calc(100svh - var(--cs-header))}
}

/* Show the workspace directly, without a device frame. */
.company-story-visual{display:flex;align-items:center;justify-content:center}
.company-workspace-preview{
  position:relative;width:100%;height:auto;
  opacity:var(--workspace-enter,0);transform:translateY(var(--workspace-rise,110px));
}
.company-workspace-display{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  border-radius:12px;background:#fff;
  box-shadow:0 0 0 1px #2021240d,0 12px 30px -20px #18202a26;
}
/* Preserve the demo's desktop layout at every preview size. */
.company-story .company-workspace-preview .company-story-window{position:absolute;inset:0 auto auto 0;width:1000px;height:625px;min-height:0;border:0;border-radius:0;box-shadow:none;opacity:1;transform:scale(var(--workspace-ui-scale,1));transform-origin:top left;transition:none}
@media(min-width:901px){.company-story-layout{grid-template-columns:minmax(230px,.38fr) minmax(0,1fr)}}
@media(max-width:900px){.company-story-layout{grid-template-rows:auto auto;align-content:center;gap:32px}.company-story-visual{height:auto}.company-story-copy{max-width:600px}}

/* Closing scene: the workspace recedes, work requests gather, then the mission is typed. */
.company-story-layout{transform-origin:center}
.company-story.is-finishing .company-story-layout{will-change:transform,opacity,filter;pointer-events:none}
.company-story-voices{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.company-story-voice{
  position:absolute;left:0;top:0;max-width:min(320px,42vw);padding:13px 18px;
  border:1px solid #e8e8e6;border-radius:21px 21px 21px 6px;background:#fff;color:#292c30;
  font-size:clamp(13px,1.2vw,17px);font-weight:500;line-height:1.5;
  box-shadow:0 14px 34px -18px #20212440;opacity:0;transform-origin:center;
}
.company-story-voice.is-accent{background:#ea333d;border-color:#ea333d;color:#fff;border-radius:21px 21px 6px 21px}
.company-story-voice span{display:block}
.company-story.is-finishing .company-story-voice span{animation:company-voice-float 4s ease-in-out infinite}
.company-story-voice:nth-child(3n) span{animation-delay:-1.2s!important}
.company-story-voice:nth-child(3n + 1) span{animation-delay:-2.4s!important}
@keyframes company-voice-float{50%{transform:translateY(-3px)}}
.company-story-finale{position:absolute;inset:0;z-index:7;display:grid;place-items:center;pointer-events:none}
.company-story-final-logo{display:block;width:min(680px,calc(100% - 64px));height:auto;object-fit:contain;opacity:0;transform:translateY(14px) scale(.94)}
@media(max-width:700px){
  .company-story-voice{max-width:calc(100% - 64px);padding:10px 14px;font-size:13px}
  .company-story-voice:nth-child(n+9){display:none}
}