/* 0.7.0: 無料・外部画像/音声なしのステップ式アニメーション教材 */
.story-module{margin:10px 0 27px;border:1px solid #d9d8f8;border-radius:19px;background:linear-gradient(155deg,#f7f5ff,#f3f8ff 65%,#eff9f4);padding:22px;box-shadow:0 14px 28px rgba(72,70,148,.08);overflow:hidden}
.story-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:17px}
.story-kicker{color:#695dc1;font-weight:850;letter-spacing:.09em;font-size:10px}
.story-title{font-size:20px!important;margin:5px 0 5px!important;color:#293353}
.story-intro{font-size:13px;color:#626d82;line-height:1.75;margin:0}
.story-badge{white-space:nowrap;display:inline-block;background:white;color:#6862a4;border:1px solid #e2dff5;border-radius:99px;padding:8px 10px;font-size:10px;font-weight:750}
.story-stage{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(205px,.85fr);border-radius:14px;overflow:hidden;background:#141b35;min-height:335px;box-shadow:0 12px 22px rgba(35,35,85,.14)}
.story-video-frame{min-width:0;position:relative;display:flex;flex-direction:column;background:linear-gradient(145deg,#252b53,#181c38);padding:0 15px 15px}
.story-stream-meta{height:37px;display:flex;align-items:center;gap:10px;color:#d1d4f0;font-size:10px;font-weight:750;flex-shrink:0}
.story-live{display:flex;align-items:center;gap:5px;border-radius:5px;background:#f0e8fb;color:#7a315e;padding:3px 7px;font-size:9px;letter-spacing:.06em}
.story-live i,.story-live-dot{background:#ff6386;border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 0 3px #ff638622}
.story-soundoff{margin-left:auto;opacity:.7;font-weight:500}
.story-game-scene{height:106px;overflow:hidden;position:relative;background:radial-gradient(ellipse at 50% 30%,#445078 0%,#252a4a 40%,#111628 95%);border:1px solid #505778;border-radius:9px;margin-bottom:11px}
.story-corridor{height:100%;position:relative;clip-path:polygon(0 0,100% 0,75% 100%,25% 100%);background:linear-gradient(110deg,#16192e,#49506f 50%,#171a2d)}
.story-door{position:absolute;left:44%;top:11%;height:87%;width:12%;min-width:43px;background:linear-gradient(90deg,#0c1022,#32364f);border:3px solid #72799a;box-shadow:0 0 12px #121429}.story-door::after{content:'';width:5px;height:5px;border-radius:50%;background:#c7bc7b;position:absolute;right:4px;top:55%}.story-door span{position:absolute;left:45%;top:26%;color:#c5cee6;font-size:27px;opacity:.6}
.story-game-hint{position:absolute;right:11px;bottom:7px;background:#10152bb8;color:#dbe2fc;padding:3px 7px;border-radius:5px;font-size:10px}
.story-streamer-row{display:flex;gap:10px;align-items:flex-start;min-height:155px;flex:1}
.story-streamer-avatar{position:relative;flex:0 0 106px;width:106px;height:142px;align-self:end;overflow:hidden;border-radius:16px 16px 5px 5px;background:linear-gradient(145deg,#c1a5f5,#8f83d9)}
.story-streamer-avatar svg{width:100%;height:100%;display:block;transform:translateY(8px);filter:drop-shadow(0 6px 4px #45377b44)}
.story-bubbles{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:3px 0 4px}
.story-talk,.story-thought{position:relative;border-radius:13px 13px 13px 4px;padding:9px 12px;box-shadow:0 5px 12px #1111242b}
.story-talk{background:white;color:#303854}
.story-talk::before{content:'';position:absolute;left:-9px;bottom:10px;border:6px solid transparent;border-right-color:white;border-bottom-color:white}
.story-thought{background:#f0eaff;color:#594687;border:2px dashed #bfa7fb;border-radius:15px}
.story-thought::before,.story-thought::after{content:'';position:absolute;left:-12px;bottom:7px;width:7px;height:7px;border:2px solid #c3adf8;border-radius:50%;background:#e9e0ff}
.story-thought::after{left:-21px;bottom:1px;width:4px;height:4px}
.story-bubble-label{display:block;color:#786d9d;font-size:9px;letter-spacing:.04em;font-weight:850;margin-bottom:3px}
.story-thought .story-bubble-label{color:#7255a8}
.story-talk p,.story-thought p{margin:0;line-height:1.55;font-size:12px;font-weight:650;overflow-wrap:anywhere}
.story-chat-side{background:#f9faff;display:flex;flex-direction:column;min-width:0;border-left:1px solid #c7c9e1;color:#3b435a}
.story-chat-title{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-bottom:1px solid #e1e4f2;color:#485578;font-size:11px;font-weight:850}
.story-chat-messages{padding:9px 12px;flex:1;min-height:100px}
.story-chat-messages p{font-size:10px;color:#47556b;margin:8px 0;line-height:1.6;overflow-wrap:anywhere}
.story-chat-messages p span{display:inline-block;font-weight:850;color:#7769b0;margin-right:5px}
.story-sent-message{background:#fff0c9;border:1px solid #eaca82;border-radius:8px;padding:7px 8px;box-shadow:0 3px 10px #b89a521c}
.story-sent-message span{color:#985c19!important}
.story-viewer-card{border-top:1px solid #e6e7f1;display:flex;align-items:center;gap:7px;padding:8px 11px;background:#f4f3fd}
.story-viewer-avatar{background:#fce7ba;flex:0 0 38px;width:38px;height:38px;overflow:hidden;border-radius:50%}.story-viewer-avatar svg{width:100%;height:100%;display:block}
.story-viewer-fields{min-width:0;display:grid;gap:2px}.story-viewer-name{font-size:11px;font-weight:850}.story-viewer-state{font-size:10px;color:#68738e;line-height:1.4}
.story-input-shell{margin:0 10px 10px;min-height:35px;padding:8px 8px 8px 11px;border:1px solid #d4d8e8;border-radius:9px;display:flex;align-items:center;gap:6px;background:#fff}
.story-input-text{font-size:11px;line-height:1.5;color:#34354d;font-weight:700;max-width:calc(100% - 29px);overflow:hidden;white-space:nowrap;display:inline-block}
.story-input-text.story-placeholder{font-weight:400;color:#9ba1b5}.story-input-send{margin-left:auto;color:#b6b6c5}.story-input-send.story-ready{color:#7660d9}
.story-typing{animation:story-typing 1.7s steps(9,end) both;border-right:2px solid #7c69c7;width:11ch;max-width:100%}
@keyframes story-typing{from{width:0}to{width:11ch}}
.story-playing .story-streamer-avatar svg{animation:story-speaking 1.15s ease-in-out infinite alternate}
.story-playing .story-mouth{transform-box:fill-box;transform-origin:center center;animation:story-mouth .45s ease-in-out infinite alternate}
@keyframes story-speaking{from{transform:translateY(8px) rotate(-1.4deg)}to{transform:translateY(6px) rotate(1.4deg)}}
@keyframes story-mouth{from{transform:scaleY(.85)}to{transform:scaleY(1.45)}}
.story-stage[data-stage="3"] .story-thought,.story-stage[data-stage="4"] .story-thought{animation:story-fade-up .35s ease-out both}
.story-stage[data-stage="3"] .story-sent-message,.story-stage[data-stage="4"] .story-sent-message{animation:story-fade-up .32s ease-out both}
@keyframes story-fade-up{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.story-explainer{display:flex;gap:11px;align-items:flex-start;margin-top:13px;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid #e3e2f2;min-height:73px}
.story-step-tag{flex:0 0 auto;font-size:10px;font-weight:850;color:#5945ad;background:#eae5ff;border-radius:6px;padding:5px 8px;margin-top:2px}
.story-step-caption{font-size:12px;line-height:1.75;color:#505b76;margin:0}
.story-controls{display:grid;gap:11px;margin-top:13px}
.story-progress-info{display:flex;align-items:center;gap:11px}.story-counter{font-size:12px;font-weight:850;color:#5a4bb8;min-width:42px;font-variant-numeric:tabular-nums}
.story-progress-track{height:6px;flex:1;background:#dddff1;border-radius:99px;overflow:hidden}.story-progress-fill{height:100%;background:linear-gradient(90deg,#8d7ae5,#62bcb4);border-radius:99px;transition:width .3s ease}
.story-button-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.story-btn{font-size:12px;font-weight:780;padding:9px 13px;border:1px solid #cac6e6;background:#fff;color:#4e4f85;border-radius:9px;min-height:38px}
.story-btn:hover:not(:disabled){background:#eeedfc}.story-btn:focus-visible{outline:3px solid #08aa91;outline-offset:3px}.story-btn:disabled{opacity:.4}
.story-btn.story-main{background:#6859df;color:#fff;border-color:#6859df;min-width:107px}.story-btn.story-main:hover{background:#5545c3}
.story-disclaimer{font-size:11px!important;line-height:1.75;color:#7b8194;margin:12px 1px 0}
@media(max-width:760px){.story-module{padding:14px}.story-stage{grid-template-columns:minmax(0,1fr)}.story-chat-side{border-left:none;border-top:1px solid #c7c9e1}.story-chat-messages{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;min-height:0;padding:5px 11px}.story-chat-messages p{margin:4px 0}.story-viewer-card{padding:7px 11px}.story-stage{min-height:0}.story-video-frame{padding:0 11px 11px}.story-streamer-avatar{height:128px;flex-basis:95px;width:95px}.story-head{flex-wrap:wrap}.story-badge{margin-top:-2px}.story-game-scene{height:88px}.story-input-shell{margin-bottom:9px}}
@media(max-width:430px){.story-head{display:block}.story-badge{margin-top:10px}.story-title{font-size:17px!important}.story-chat-messages{grid-template-columns:1fr 1fr}.story-streamer-avatar{height:114px;flex:0 0 78px;width:78px}.story-talk p,.story-thought p{font-size:11px}.story-bubbles{gap:6px}.story-bubble-label{font-size:9px}.story-talk,.story-thought{padding:7px 9px}.story-explainer{display:block}.story-step-tag{display:inline-block;margin:0 0 6px}.story-button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.story-btn{padding:9px 6px}.story-video-frame{padding-left:9px;padding-right:9px}.story-game-scene{height:75px}}
@media(prefers-reduced-motion:reduce){.story-typing,.story-sent-message,.story-thought,.story-streamer-avatar svg,.story-mouth{animation:none!important;border-right:0}.story-progress-fill{transition:none}}