/* Scene layers: each illustration and weather element has its own movement. */
.rain{position:absolute;inset:-15% 0;z-index:6;opacity:0;transition:opacity 1s;pointer-events:none;overflow:hidden}.rain i{position:absolute;top:-10%;width:1.5px;height:22px;background:linear-gradient(transparent,#dfedfad4);border-radius:50%;animation:rain-fall 1.2s linear infinite;transform:rotate(13deg)}.puddles{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity 1s}.puddles i{position:absolute;width:18%;height:3%;bottom:12%;left:12%;border:1px solid #c0d5d9a0;border-radius:50%;background:#b8d0d126;animation:ripple 3.2s ease-out infinite}.puddles i:nth-child(2){left:65%;bottom:7%;animation-delay:-1.4s}.puddles i:nth-child(3){left:38%;bottom:20%;width:10%;animation-delay:-2.2s}.rainbow{position:absolute;z-index:2;width:100%;height:95%;left:9%;top:2%;border-radius:50%;opacity:0;background:radial-gradient(ellipse at 50% 80%,transparent 0 56%,#afa2d22b 56.2% 57.5%,#95b4d834 57.7% 59%,#abd19b36 59.2% 60.5%,#e8d79144 60.7% 62%,#e9b39944 62.2% 63.5%,transparent 63.7%);transform:translateY(14px);transition:opacity 3s,transform 3s}.wind-leaves{position:absolute;inset:0;z-index:7;opacity:0;pointer-events:none}.wind-leaves i{position:absolute;left:-5%;top:38%;width:17px;height:9px;border-radius:1px 90% 1px 90%;background:#a9b975b0;animation:leaf-travel 8s linear infinite}.wind-leaves i:nth-child(2){top:52%;animation-delay:-3s;width:11px}.wind-leaves i:nth-child(3){top:65%;animation-delay:-6s;background:#cfb98080}.petals{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.8}.petals i{position:absolute;width:8px;height:5px;border-radius:60% 20% 65% 25%;background:#fff5dbdd;animation:petal-drift 13s linear infinite;top:-8%}.fireflies{position:absolute;inset:0;z-index:7;opacity:0;pointer-events:none;transition:opacity 2s}.fireflies i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff3b5;box-shadow:0 0 12px 5px #ffeba169;left:20%;top:48%;animation:firefly 7s ease-in-out infinite}.fireflies i:nth-child(2){left:75%;top:62%;animation-delay:-2s}.fireflies i:nth-child(3){left:62%;top:38%;animation-delay:-4s}.fireflies i:nth-child(4){left:13%;top:73%;animation-delay:-3s}.fireflies i:nth-child(5){left:83%;top:32%;animation-delay:-5s}.sparkles{position:absolute;inset:0;z-index:10;pointer-events:none}.sparkle{position:absolute;color:#fffbd4;text-shadow:0 0 10px #e5c659;font-size:24px;animation:sparkle-pop 1.5s ease-out both}.characters.touched{animation:hello-bounce .85s ease-in-out!important}.book.turning .story-copy{animation:copy-out .18s ease-in both}.book.entering .story-copy{animation:copy-in .6s ease both}.book.entering .picture{animation:picture-in .8s ease both}
.book[data-scene=walk] .characters{animation:walk-bob 2s ease-in-out infinite;width:72%;left:14%;bottom:6%}.book[data-scene=rain] .landscape,.book[data-scene=umbrella] .landscape,.book[data-scene=closer] .landscape,.book[data-scene=listen] .landscape{filter:saturate(.7) brightness(.9)}.book:is([data-scene=rain],[data-scene=umbrella],[data-scene=closer],[data-scene=listen]) .sky-tint{opacity:1}.book:is([data-scene=rain],[data-scene=umbrella],[data-scene=closer],[data-scene=listen]) .rain,.book:is([data-scene=rain],[data-scene=umbrella],[data-scene=closer],[data-scene=listen]) .puddles{opacity:1}.book:is([data-scene=rain],[data-scene=umbrella],[data-scene=closer],[data-scene=listen],[data-scene=flower]) .petals{opacity:0}.book[data-scene=rain] .characters{animation:rain-shiver 4s ease-in-out infinite}.book:is([data-scene=umbrella],[data-scene=closer],[data-scene=listen]) .characters{height:87%;bottom:3%;width:93%;left:3.5%;animation:umbrella-sway 7s ease-in-out infinite}.book[data-scene=closer] .characters{width:103%;left:-1.5%}.book[data-scene=listen] .characters{animation:listen-sway 4s ease-in-out infinite}.book[data-scene=flower] .wind-leaves{opacity:1}.book:is([data-scene=flower],[data-scene=bloom]) .characters{width:91%;left:4.5%;bottom:3%;height:80%}.book[data-scene=flower] .landscape{filter:saturate(.85)}.book[data-scene=bloom] .sun-glow{background:radial-gradient(circle,#fff3ada0,transparent 69%);transform:scale(2)}.book[data-scene=rainbow] .rainbow{opacity:1;transform:translateY(0)}.book[data-scene=rainbow] .characters{width:72%;left:14%;bottom:3%;animation:walk-bob 2.5s ease-in-out infinite}.book[data-scene=evening] .sky-tint{opacity:1;background:linear-gradient(180deg,#c9928044,#f6b87933 55%,#b79e6a30)}.book[data-scene=evening] .landscape{filter:sepia(.15) saturate(.7) brightness(.94)}.book[data-scene=evening] .fireflies{opacity:1}.book[data-scene=evening] .characters{width:69%;left:15.5%;bottom:4%}.book[data-scene=evening] .sun-glow{right:-10%;top:23%;background:radial-gradient(circle,#fff0bcbb,transparent 67%)}
@keyframes landscape-breathe{from{transform:scale(1.05) translateX(-.3%)}to{transform:scale(1.08) translateX(.3%)}}@keyframes sun-breathe{from{opacity:.65}to{opacity:1}}@keyframes cloud-drift{from{transform:translateX(-20%)}to{transform:translateX(320%)}}@keyframes gentle-sway{0%,100%{transform:rotate(-.65deg) translateY(0)}50%{transform:rotate(.65deg) translateY(-4px)}}@keyframes title-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes copy-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}@keyframes copy-out{to{opacity:0;transform:translateX(-9px)}}@keyframes picture-in{from{opacity:.72}to{opacity:1}}@keyframes rain-fall{from{transform:translate(15px,-50px) rotate(13deg)}to{transform:translate(-75px,850px) rotate(13deg)}}@keyframes ripple{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.3);opacity:0}}@keyframes petal-drift{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:.8}100%{transform:translate(95px,800px) rotate(310deg);opacity:0}}@keyframes leaf-travel{0%{transform:translate(0,0) rotate(0);opacity:0}20%{opacity:.8}100%{transform:translate(750px,-30px) rotate(280deg);opacity:0}}@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(13px,-18px);opacity:1}}@keyframes sparkle-pop{0%{opacity:0;transform:translateY(0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translateY(-50px) scale(1.2)}}@keyframes hello-bounce{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(-2deg)}65%{transform:translateY(-4px) rotate(2deg)}}@keyframes walk-bob{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-6px) rotate(.8deg)}}@keyframes umbrella-sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}@keyframes listen-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}@keyframes rain-shiver{0%,30%,100%{transform:rotate(-.5deg)}32%,36%{transform:rotate(.6deg)}34%,38%{transform:rotate(-.6deg)}}

:root{--paper:#fffcf4;--ink:#344235;--muted:#536044;--sage:#405740;--serif:'Yu Mincho','Hiragino Mincho ProN',serif;--sans:'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#eee7d7;color:var(--ink);font-family:var(--sans);font-weight:500}body{overscroll-behavior:none}[hidden]{display:none!important}
button{font:700 16px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1px solid #879579;border-radius:14px;min-width:56px;min-height:56px;padding:10px 14px;cursor:pointer;touch-action:manipulation}button:hover:not(:disabled){background:#e9eedf}button:disabled{color:#59624f;background:#e7e6d8;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #405740;outline-offset:3px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reader{height:100svh;height:100dvh;max-width:1380px;margin:auto;display:grid;grid-template-rows:64px minmax(0,1fr) 56px;gap:12px;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.toolbar,.reader-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.wordmark{display:flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;text-align:left;font-family:var(--serif);font-size:24px}.wordmark>span:first-child{font-size:24px}.wordmark small{display:block;font:600 16px/1.5 var(--sans);margin-top:1px}.reader-footer button{padding-inline:12px;white-space:nowrap;flex-shrink:0}.page-arrow.forward{background:var(--sage);color:var(--paper);border-color:var(--sage)}.page-arrow.forward:hover{background:#304830}.page-navigation{min-width:56px;text-align:center;font-size:16px;font-weight:700}
.book-shell{position:relative;min-height:0;perspective:1800px;isolation:isolate;overflow:hidden;border-radius:14px;box-shadow:0 18px 45px #655e3824,0 4px 0 #d9d2bf,0 7px 0 #fff9ec}
.book{position:relative;display:grid;grid-template-columns:55% 45%;height:100%;min-height:0;background:var(--paper);overflow:hidden;touch-action:pan-y pinch-zoom}
.picture{position:relative;min-height:0;overflow:hidden;background:#dfe6d2;isolation:isolate}.landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:landscape-breathe 22s ease-in-out infinite alternate;z-index:0}.sky-tint{position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(#59749177,#819bba22);transition:opacity 1s}
.sun-glow{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 88% 10%,#fff3bf80,transparent 60%);animation:sun-breathe 8s ease-in-out infinite alternate}.cloud{display:none}
#book .characters,.turn-sheet .characters{position:absolute;z-index:5;left:3%;bottom:4%;width:94%;height:92%;display:flex;align-items:center;justify-content:center;transform-origin:50% 90%}.characters{animation:gentle-sway 7s ease-in-out infinite}.characters img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}.picture-vignette{position:absolute;inset:0;box-shadow:inset 0 0 35px #fcf8ed45;z-index:7;pointer-events:none}
.story-side{display:flex;align-items:center;justify-content:center;min-height:0;padding:24px 28px;position:relative;background:var(--paper);box-shadow:inset 16px 0 20px -24px #615e4555}.story-copy{position:relative;width:100%;text-align:center;z-index:1}.story-line{font:600 20px/1.75 var(--serif);margin:0 0 16px;overflow-wrap:anywhere}.story-line:last-of-type{margin-bottom:0}.phrase{display:inline-block;white-space:nowrap}.cover-title{font:700 42px/1.5 var(--serif);margin:16px 0}.cover-subtitle{font:600 20px/1.6 var(--serif);margin:12px 0}.cover-kicker,.cover-note{font-size:16px;color:var(--muted);line-height:1.6}.cover-note{margin:18px 0 0}.ending-mark{font:700 18px/1.5 var(--serif);margin:18px 0 0}.paper-grain,.page-ornament,.page-fold{display:none}
.rain{z-index:4;transition:none}.rain i{background:linear-gradient(transparent,#ffffffe6 70%,#f3f8ff);width:2.5px;height:30px;border-radius:2px;filter:drop-shadow(0 0 1.5px #4a6a8c99)}.book[data-scene=rain] .rain{opacity:1}
/* The listening illustration owns its one puddle. The rainbow scene uses its painted rainbow. */
.book[data-scene=listen] .puddles,.rainbow{display:none!important}.book:is([data-scene=rain],[data-scene=umbrella],[data-scene=closer],[data-scene=listen]) .sun-glow{display:none}.book[data-scene=rain] .petals{display:none}.puddles{pointer-events:none}
.turn-sheet{position:absolute;inset:0;z-index:20;pointer-events:none;backface-visibility:hidden;box-shadow:5px 0 22px #39422e44}.turn-sheet *{animation:none!important;transition:none!important}.turn-sheet::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#34423533)}
#imageNotice{position:absolute;inset:auto 12px 12px;z-index:12;font-size:18px;line-height:1.5;background:var(--paper);padding:12px;margin:0;text-align:center}
dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:16px;border:1px solid #879579;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 20px 80px #34423544}dialog::backdrop{background:#34423588;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.dialog-head h2{font-size:24px;margin:0}.toolbar-actions,.contents-grid{display:grid;gap:8px}.tool{display:flex;align-items:center;gap:12px;text-align:left;width:100%}.tool span{font-size:16px}.tool[aria-pressed=true]{background:#e4eddb}.tool svg{flex-shrink:0}.chapter-card{text-align:left;line-height:1.5}.chapter-card[aria-current=page]{background:var(--sage);color:var(--paper)}.contents-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.puchi-logo{display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;margin-top:8px;border-radius:12px}.puchi-logo img{width:140px;height:auto}#toast{font-size:18px;line-height:1.65;margin:0}
.motion-paused *,.motion-paused *::before,.motion-paused *::after,.tab-hidden *{animation-play-state:paused!important}.motion-paused .characters{transform:none!important}.motion-paused .rain i{animation:none!important;top:var(--static-top)}.motion-paused .sparkles{display:none}
@media(max-width:700px),(orientation:portrait) and (max-width:1100px){.book{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.story-side{padding:18px 20px;box-shadow:inset 0 12px 20px -24px #615e4566}.story-line{font-size:20px;line-height:1.65;margin-bottom:12px}.cover-title{font-size:32px;margin:8px 0}.cover-note{margin:8px 0}.cover-subtitle{margin:8px 0}.ending-mark{margin:12px 0 0}}
@media(max-height:700px) and (orientation:portrait){.reader{grid-template-rows:56px minmax(0,1fr) 56px;gap:8px}.story-side{padding:12px 16px}.story-line{font-size:18px;line-height:1.6;margin-bottom:10px}.cover-title{font-size:28px}.cover-subtitle{font-size:18px}.cover-note{display:none}.ending-mark{margin-top:8px}.wordmark{font-size:22px}.wordmark>span:first-child{display:none}}
@media(max-height:540px) and (orientation:landscape){.reader{grid-template-rows:56px minmax(0,1fr) 56px;gap:8px;padding-top:max(8px,env(safe-area-inset-top))}.wordmark small{display:none}.book{grid-template-columns:42% 58%;grid-template-rows:1fr}.story-side{padding:8px 14px}.story-line{font-size:18px;line-height:1.55;margin-bottom:8px}.cover-title{font-size:28px;margin:6px 0}.cover-subtitle{font-size:18px;margin:6px 0}.cover-note{display:none}.ending-mark{font-size:18px;margin-top:6px}dialog{width:min(640px,calc(100% - 32px))}.toolbar-actions{grid-template-columns:1fr 1fr}.contents-grid{grid-template-columns:repeat(3,1fr)}.chapter-card{padding:8px}.puchi-logo{margin:8px 0 0}.book[data-scene=evening] .story-line{margin-bottom:6px}}
@media(max-width:700px) and (max-height:360px) and (orientation:landscape){.reader{gap:6px}.book{grid-template-columns:34% 66%}.story-side{padding:6px 10px}.story-line{line-height:1.5;margin-bottom:6px}.story-line br{display:none}.story-line br::after{content:' '}.ending-mark{margin-top:4px}.cover-kicker{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rain i{top:var(--static-top)}.characters{transform:none!important}}
@media(max-height:620px) and (orientation:portrait){#optionsDialog .toolbar-actions{grid-template-columns:1fr 1fr}#optionsDialog .tool{justify-content:center;gap:0;padding:8px}#optionsDialog .tool svg{display:none}#optionsDialog .tool span{text-align:center}}
@media(max-height:540px) and (orientation:landscape){#optionsDialog .toolbar-actions{grid-template-columns:repeat(3,1fr)}#optionsDialog .tool{justify-content:center;gap:0;padding:8px}#optionsDialog .tool svg{display:none}#optionsDialog .puchi-logo{margin:0}}
@media(max-width:700px) and (max-height:360px) and (orientation:landscape){.ending-mark{display:none}}
.puchi-logo{min-width:0}.puchi-logo img{max-width:100%}

/* 雨（2026-10-10）：2層。手前＝白くはっきり　奥＝細くうすい。落ちる距離は絵の高さ（--fall）に合わせる */
.rain i{animation-name:rain-fall2}
.rain i.far{width:1.5px;height:20px;opacity:.55;filter:none;background:linear-gradient(transparent,#ffffffd0)}
@keyframes rain-fall2{from{transform:translate(10px,-40px) rotate(13deg)}to{transform:translate(calc(var(--fall,850px) * -.23),var(--fall,850px)) rotate(13deg)}}

/* 1画面に収める（2026-10-10）：見えている高さ（--app-h・app.js の fitPage）を本の高さに。ページ自体はスクロールさせない */
html,body{height:100%;overflow:hidden}
.reader{height:var(--app-h,100dvh)}
/* ふたりを地面に（2026-10-10）：縦長の枠でも上下の真ん中に浮かせず 枠の下に寄せて足を野原に乗せる */
#book .characters,.turn-sheet .characters{align-items:flex-end}
.characters img{object-position:50% 100%}

/* 2026-10-10：上の帯の「♪ おと」ボタン（パッと見てわかるように）と、下の帯のプチハウスのロゴ（スキル app-puchi-logo） */
.toolbar-end{display:flex;align-items:center;gap:8px;flex-shrink:0}
#bgmButton{display:inline-flex;align-items:center;gap:4px;padding-inline:14px}
#bgmButton span{font-size:20px;line-height:1}
#bgmButton[aria-pressed=true]{background:#e4eddb;border-color:#5f7552}
#bgmButton[aria-pressed=false] span{opacity:.6}
.page-navigation{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0}
.footer-logo{margin:0!important;min-height:32px!important;min-width:0!important;padding:2px 6px;display:inline-flex;align-items:center}
.footer-logo img{height:20px!important;width:auto!important;display:block}
@media(max-width:380px){.toolbar .wordmark{font-size:18px}.toolbar-end{gap:6px}#bgmButton,#settingsButton{padding-inline:10px}}
@media(max-width:480px){.toolbar .wordmark{white-space:nowrap;font-size:20px;min-width:0}.toolbar .wordmark>span:first-child,.toolbar .wordmark small{display:none}}
@media(max-width:340px){.toolbar .wordmark{font-size:17px}}
/* 最初のタップで音楽を始める透明なボタン（画面全体）。オープニング（z-index:1000）の下 */
#tapToStart{position:fixed;inset:0;z-index:900;margin:0;padding:0;border:0;border-radius:0;background:transparent;min-width:0;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(96px + env(safe-area-inset-bottom));cursor:pointer;-webkit-tap-highlight-color:transparent}
#tapToStart span{display:inline-flex;align-items:center;gap:8px;font:700 18px/1.4 var(--sans);color:#fff;background:#3f5a46e6;border-radius:999px;padding:12px 22px;box-shadow:0 8px 24px #2a3a2e44;animation:tap-hint 2.4s ease-in-out infinite}
#tapToStart b{font-size:22px}
@keyframes tap-hint{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#tapToStart:focus-visible span{outline:3px solid #ff9f43;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#tapToStart span{animation:none}}

/* Full scene paintings preserve props and surroundings within each frame. */
.picture{display:flex;align-items:center;justify-content:center}
.picture::before{content:'';position:absolute;inset:-20px;background:var(--scene-image) center/cover;filter:blur(22px);opacity:.5}
.art-frame{position:relative;overflow:hidden;flex:none;isolation:isolate}
#book .characters,.turn-sheet .characters{inset:0;width:100%;height:100%;transform-origin:center;animation:paint-breathe 22s ease-in-out infinite alternate}
.characters img{object-fit:contain;object-position:center}
.sky-tint,.puddles,.picture-vignette,.wind-leaves,.fireflies{display:none!important}
.rain{z-index:6;inset:0}.petals{opacity:.35}.sun-glow{z-index:6;opacity:.45;mix-blend-mode:screen;pointer-events:none}
.book:is([data-scene=flower],[data-scene=bloom]) .sun-glow{background:radial-gradient(ellipse at 75% 10%,#fff3bf33,transparent 60%);transform:none}
.reader{grid-template-rows:64px minmax(0,1fr) 88px}
.footer-logo{min-height:56px!important;min-width:56px!important;padding:4px 8px}
.page-navigation{gap:4px}
.toolbar-end{gap:8px}
.chapter-card{display:flex;align-items:center;gap:10px}
.chapter-card img{width:60px;height:40px;object-fit:cover;border-radius:6px;flex:none}
.chapter-card span{font-size:16px}
.contents-grid{grid-template-columns:1fr}
@keyframes paint-breathe{from{transform:scale(1.005) translateX(-.15%)}to{transform:scale(1.026) translateX(.3%)}}
@media(max-width:480px){#settingsButton,#bgmButton{padding-inline:8px}.toolbar .wordmark{font-size:18px}.toolbar-end{gap:8px}.reader{grid-template-rows:56px minmax(0,1fr) 88px}.story-side{padding:12px}.story-line{font-size:20px;line-height:1.6}}
@media(max-height:670px) and (orientation:portrait){.story-line{font-size:18px}.story-side{padding:10px 8px}.cover-kicker{display:none}.cover-title{font-size:28px}.cover-subtitle{font-size:18px}}
@media(max-height:500px) and (orientation:landscape){.reader{grid-template-rows:56px minmax(0,1fr) 80px;gap:8px}.chapter-card img{display:none}.contents-grid{grid-template-columns:1fr 1fr}.story-line{font-size:18px;line-height:1.6}.story-side{padding:8px}.cover-kicker{display:none}.cover-title{margin:0;font-size:26px}.cover-subtitle{margin:4px 0;font-size:18px}.ending-mark{margin-top:4px}}
.motion-paused .characters{animation:none!important;transform:none!important}
@media(orientation:portrait) and (min-height:701px) and (max-width:1100px){.book{grid-template-rows:minmax(0,1.35fr) minmax(0,1fr)}.story-line{font-size:22px;line-height:1.85}.story-side{padding:20px 12px}}
@media(orientation:portrait) and (min-width:700px){.book{grid-template-rows:minmax(0,1.6fr) minmax(0,1fr)}.story-line{font-size:28px;line-height:1.9}.cover-title{font-size:42px}}

/* 紙をめくる（2026-10-15 水彩版とそろえた）。影はめくるほど濃くなる */
.turn-sheet::after{opacity:0;animation:leaf-shade .85s ease-in forwards!important}
@keyframes leaf-shade{to{opacity:1}}
.turn-sheet.reverse::after{background:linear-gradient(270deg,transparent,#34423533)}