#gradeFourStory{position:fixed;inset:0;z-index:280;width:min(100%,520px);margin:auto;display:flex;flex-direction:column;background:#d5b57b;color:white;visibility:hidden;isolation:isolate;font-family:'Zen Maru Gothic',sans-serif;padding-bottom:env(safe-area-inset-bottom,0px)}
#gradeFourStory.ready{visibility:visible}#gradeFourStory:before{content:'';position:fixed;inset:0;background:#174454;z-index:-1}
#gradeFourStory .g4-view{position:relative;flex:1;min-height:0;overflow:hidden;container-type:size}
#gradeFourStory .g4-bg{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 75%}
#gradeFourStory .g4-location{position:absolute;left:14px;top:20px;font-size:13px;text-shadow:0 2px 4px #123;z-index:4}
#gradeFourStory .g4-close{position:absolute;right:66px;top:10px;z-index:6;border:1px solid #fff9;border-radius:24px;background:#23465cdd;color:white;font:inherit;font-size:12px;min-width:62px;min-height:44px;cursor:pointer}
#gradeFourStory .g4-cast{position:absolute;inset:0;--hero:min(26cqw,28cqh)}
#gradeFourStory .g4-cast>img{position:absolute;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 3px 2px #44321855)}
#gradeFourStory .g4-hero{left:20%;bottom:8%;height:var(--hero);z-index:3}
#gradeFourStory .g4-mana{left:50%;bottom:8%;height:calc(var(--hero)*1.5);z-index:3}
#gradeFourStory .g4-easy{left:81%;bottom:8%;height:calc(var(--hero)*1.25);z-index:3;visibility:hidden}
#gradeFourStory[data-easy=true] .g4-easy{visibility:visible}
#gradeFourStory .g4-timetable{position:absolute;left:50%;bottom:48%;transform:translateX(-50%);width:56%;padding:13px;border:5px solid #795237;border-radius:6px;background:#f5dfac;color:#49311b;box-shadow:0 6px 8px #34261855;text-align:center}
#gradeFourStory .g4-timetable b{font-size:14px;display:block}
#gradeFourStory .g4-letters{display:block;font-size:clamp(20px,6cqw,32px);animation:g4Restless .28s infinite alternate}
#gradeFourStory .g4-timetable strong{display:block;font-size:clamp(18px,5.5cqw,28px);color:#006d84;visibility:hidden}
#gradeFourStory[data-easy=true] .g4-timetable strong{visibility:visible}
#gradeFourStory[data-zone='56'] .g4-cast{--hero:min(20cqw,23cqh)}
#gradeFourStory[data-zone='56'] .g4-hero{left:15%;bottom:5%}
#gradeFourStory[data-zone='56'] .g4-mana{left:30%;bottom:5%}
#gradeFourStory[data-zone='56'] .g4-easy{left:62%;bottom:45%;height:calc(var(--hero)*1.25*.85);z-index:1}
#gradeFourStory .g4-kid{position:absolute;bottom:29%;height:min(17cqw,20cqh);transform:translateX(calc(-50% + var(--walk,0cqw)));z-index:2}
#gradeFourStory .g4-kid img{height:100%;width:auto;filter:drop-shadow(0 3px 2px #44321855)}
#gradeFourStory .k0{left:23%}#gradeFourStory .k1{left:36%}#gradeFourStory .k2{left:49%}
#gradeFourStory .g4-kid span{position:absolute;bottom:102%;left:50%;transform:translateX(-50%);background:#fff6c8;color:#47391c;border-radius:20px;padding:2px 8px;font-size:14px;white-space:nowrap;visibility:hidden}
#gradeFourStory[data-line='0'] .g4-kid{visibility:hidden}
#gradeFourStory[data-action=read] .g4-kid span{visibility:visible}
#gradeFourStory .g4-sign{position:absolute;left:75%;bottom:46%;transform:translateX(-50%);width:min(24cqw,26cqh);height:min(26cqw,28cqh);background:linear-gradient(#d5ad70 0 60%,transparent 60%),linear-gradient(90deg,transparent 44%,#926436 44% 56%,transparent 56%);color:#5c3817;text-align:center;padding-top:4px;font-size:12px}
#gradeFourStory .g4-kanji{position:absolute;--friend:0;left:calc(75% - var(--friend)*28%);bottom:calc(53% - var(--friend)*26%);font-size:min(10cqw,11cqh);transform:translateX(-50%);z-index:2;animation:g4Restless .22s infinite alternate;color:#c45927;-webkit-text-stroke:1px #55301b}
#gradeFourStory[data-calm=true] .g4-kanji{animation:none;color:#dfae36}
#gradeFourStory[data-friend=true] .g4-kanji .mouth{border-radius:0 0 80% 80%}
#gradeFourStory .g4-logo{position:absolute;left:11%;top:31%;width:10%;height:auto;filter:drop-shadow(0 2px 2px #372817)}
#gradeFourStory .g4-logo.l1{left:43%;top:27.5%;width:8%}
#gradeFourStory .g4-dialog{position:relative;flex:none;min-height:192px;margin:0 12px 12px;padding:37px 17px 30px;border:1px solid #b8ced4;border-radius:14px;background:#22465d;box-shadow:0 5px 18px #0016;cursor:pointer}
#gradeFourStory .g4-speaker{position:absolute;top:10px;left:17px;font-size:13px;color:#ffe1a2}
#gradeFourStory .g4-next{position:absolute;bottom:8px;right:12px;font-size:12px}
#gradeFourStory[data-busy=true] .g4-next{visibility:hidden}
#gradeFourStory #evBox{position:static;inset:auto!important;transform:none!important;animation:none;opacity:1;width:auto;max-width:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;display:block;text-align:left}
#gradeFourStory #evText{font-size:clamp(16px,4.4vw,20px);line-height:1.6;font-weight:900;color:white;overflow-wrap:anywhere;margin:0}
#gradeFourStory #evNext{display:none}
@keyframes g4Restless{from{translate:-2px 0;rotate:-3deg}to{translate:2px -3px;rotate:3deg}}
@media(max-height:500px){#gradeFourStory{width:min(100%,920px);flex-direction:row}#gradeFourStory .g4-dialog{width:42%;min-height:0;margin:58px 12px 12px 0}#gradeFourStory .g4-close{right:12px}#gradeFourStory .g4-bg{object-position:50% 35%}#gradeFourStory #evText{font-size:16px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){#gradeFourStory *{animation:none!important;transition:none!important}}
@media(max-height:500px){#gradeFourStory .g4-logo{left:14%;top:31%;width:10%}#gradeFourStory .g4-logo.l1{left:44%;top:23%;width:7%}#gradeFourStory .g4-kanji{bottom:calc(58% - var(--friend)*31%)}}