:root{color-scheme:light;--ink:#392e24;--muted:#65503a;--paper:#fffaf0;--green:#385448;--line:#98846b;--bg:#f5eee1}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;font-weight:500}
button{font-family:inherit;font-size:16px;font-weight:700;line-height:1.4;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:16px;min-width:56px;min-height:56px;padding:10px 16px;cursor:pointer;touch-action:manipulation;transition:background .2s,box-shadow .2s}
button:hover:not(:disabled){background:#eee3cf;box-shadow:0 3px 9px #48351b12}
button:focus-visible{outline:3px solid var(--green);outline-offset:3px}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{color:#685744;background:#e8dfcf;border-color:#a4947d;cursor:default}
[hidden]{display:none!important}
.reader{height:100svh;height:100dvh;max-width:1320px;margin:auto;padding:max(12px,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));display:grid;grid-template-rows:64px minmax(0,1fr) 64px;gap:14px}
.reader-header,.reader-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.reader-footer button{white-space:nowrap;padding-inline:12px;flex-shrink:0}
.brand{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:24px;font-weight:700;letter-spacing:.08em}
.volume{font-size:24px}.brand small{display:block;font-family:"Yu Gothic",sans-serif;font-size:16px;letter-spacing:.04em;margin-top:3px}
.book-shell{position:relative;min-height:0;perspective:1800px;isolation:isolate;border-radius:15px;background:var(--paper);box-shadow:0 18px 48px #533b2722,0 4px 0 #e1d3bc,0 7px 0 #faf5e9,0 9px 0 #cdbb9e}
#book,.turn-sheet{height:100%;min-height:0;display:grid;grid-template-columns:57% 43%;background:var(--paper);border-radius:15px;overflow:hidden;touch-action:pan-y pinch-zoom}
.picture{position:relative;min-height:0;overflow:hidden;background:#eddec6;display:grid;place-items:center;isolation:isolate}
.picture::before{content:"";position:absolute;inset:-18px;z-index:-1;background-image:var(--art);background-size:cover;background-position:center;filter:blur(22px);opacity:.34}
.art-frame{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center}
.art-frame img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;display:block;user-select:none}
.picture::after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 32px #6b482710}
.paper{position:relative;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,46px);background:var(--paper);box-shadow:inset 16px 0 24px -27px #392e24}
.chapter{font-size:16px;letter-spacing:.08em;color:var(--muted);margin:0 0 24px}
h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:32px;line-height:1.6;letter-spacing:.08em;white-space:pre-line;margin:0 0 22px}
.story{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;white-space:pre-line;font-size:20px;line-height:1.9;font-weight:600;margin:0;overflow-wrap:anywhere;line-break:strict}
.ornament{margin-top:26px;color:var(--muted);font-size:24px}
.page-position{min-width:56px;text-align:center;font-size:16px;font-weight:700;display:grid;gap:8px}.progress{height:3px;background:#d8cbb4;border-radius:3px;overflow:hidden}.progress i{display:block;width:5%;height:100%;background:var(--green);transition:width .5s}
#next{background:var(--green);color:var(--paper);border-color:var(--green);min-width:112px}#next:hover:not(:disabled){background:#284338}#next:disabled{background:#e8dfcf;color:#685744;border-color:#a4947d}
.atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}.sunbeam{position:absolute;inset:-20%;background:radial-gradient(ellipse at 85% 12%,#ffdd994d,transparent 58%);opacity:0}.stream-light{position:absolute;bottom:12%;left:12%;width:64%;height:18%;border-radius:50%;background:repeating-linear-gradient(174deg,transparent 0 12px,#fff5cb33 13px 14px,transparent 16px 24px);opacity:0;transform:rotate(-8deg)}
.leaf{position:absolute;top:-24px;left:var(--x);width:13px;height:20px;background:#d88f2e;border-radius:2% 72% 12% 72%;box-shadow:inset 1px 0 #76502955;opacity:0;transform:rotate(-25deg)}.leaf::after{content:"";position:absolute;left:48%;top:5%;width:1px;height:110%;background:#88623688;transform:rotate(-17deg)}.leaf:nth-child(2n){background:#b76b32;width:11px;height:16px}.mote{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:50%;background:#fff6ce;opacity:0}
.motion-on [data-scene="leaves"] .leaf,.motion-on [data-scene="wait"] .leaf,.motion-on [data-scene="wind"] .leaf,.motion-on [data-scene="sunset"] .leaf{animation:leaf-drift var(--duration) linear infinite;animation-delay:var(--delay)}
.motion-on [data-scene="wind"] .leaf{animation-name:leaf-gust;animation-duration:5s}
.motion-on [data-scene="stream"] .stream-light{animation:ripple 5s ease-in-out infinite}
.motion-on :is([data-scene="cover"],[data-scene="warm"],[data-scene="thanks"],[data-scene="gold"],[data-scene="gift"],[data-scene="sunset"],[data-scene="ending"]) .sunbeam{animation:sunlight 9s ease-in-out infinite alternate}
.motion-on :is([data-scene="gold"],[data-scene="gift"],[data-scene="ending"]) .mote{animation:mote-drift 7s ease-in-out infinite;animation-delay:var(--delay)}
@keyframes leaf-drift{0%{transform:translate3d(-12px,-20px,0) rotate(-25deg);opacity:0}12%{opacity:.65}80%{opacity:.55}100%{transform:translate3d(80px,560px,0) rotate(190deg);opacity:0}}
@keyframes leaf-gust{0%{transform:translate3d(-160px,60px,0) rotate(-25deg);opacity:0}15%{opacity:.65}80%{opacity:.6}100%{transform:translate3d(570px,320px,0) rotate(260deg);opacity:0}}
@keyframes ripple{0%,100%{opacity:.12;transform:translateX(-6px) rotate(-8deg) scaleX(.95)}50%{opacity:.6;transform:translateX(8px) rotate(-8deg) scaleX(1.03)}}
@keyframes sunlight{from{opacity:.22;transform:translateX(-2%)}to{opacity:.65;transform:translateX(2%)}}
@keyframes mote-drift{0%,100%{opacity:0;transform:translateY(10px)}40%{opacity:.65}80%{opacity:.15;transform:translateY(-30px)}}
.turn-sheet{position:absolute;inset:0;z-index:5;pointer-events:none;backface-visibility:hidden;box-shadow:5px 0 22px #3c291b33;will-change:transform}.turn-sheet *{animation:none!important;transition:none!important}.turn-sheet::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff8e600 40%,#4c321c40);pointer-events:none}.turn-sheet.reverse::after{background:linear-gradient(270deg,#fff8e600 40%,#4c321c40)}
#imageNotice{position:absolute;inset:25% 16px auto;background:var(--paper);padding:16px;font-size:18px;line-height:1.6;text-align:center}
dialog{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);padding:20px;box-shadow:0 24px 80px #392e2433}dialog::backdrop{background:#30231d70;backdrop-filter:blur(4px)}.dialog-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}dialog h2{font-size:24px;margin:0}.option-grid{display:grid;gap:8px}.option-grid button{width:100%;text-align:left}.option-grid button[aria-pressed=true]{background:#e6eddf;border-color:var(--green)}#notice{font-size:18px;line-height:1.6;margin:12px 0 0}#notice:empty{display:none}#chapterList{display:grid;gap:8px}#chapterList button{display:flex;align-items:center;gap:12px;text-align:left;font-size:16px;line-height:1.4}#chapterList button[aria-current=page]{background:var(--green);color:var(--paper)}.chapter-number{font-size:16px;min-width:24px}.contents-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:16px}#range{font-size:16px}
@media(max-width:700px){.reader{gap:10px}#book,.turn-sheet{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.paper{padding:22px 24px 26px;min-height:210px}.chapter{margin:0 0 12px;font-size:16px}h1{font-size:32px;line-height:1.45;margin-bottom:14px}.story{font-size:20px;line-height:1.75}.ornament{display:none}.picture{min-height:0}}
@media(max-height:700px) and (orientation:portrait){.paper{padding:16px 20px 20px;min-height:180px}.chapter{margin-bottom:8px}h1{font-size:24px;margin-bottom:10px}.story{font-size:20px;line-height:1.6}}
@media(max-height:610px) and (orientation:portrait){.reader{gap:8px;grid-template-rows:60px minmax(0,1fr) 56px}.paper{padding:14px 16px 18px;min-height:165px}.story{font-size:18px;line-height:1.65}.chapter{margin-bottom:8px}.brand{letter-spacing:0}dialog{padding:16px}.dialog-heading{margin-bottom:12px}}
@media(orientation:landscape) and (max-height:540px){.reader{grid-template-rows:56px minmax(0,1fr) 56px;gap:8px;padding-top:8px}#book,.turn-sheet{grid-template-columns:48% 52%;grid-template-rows:1fr}.paper{padding:12px 24px;min-height:0}h1{font-size:24px;line-height:1.4;margin-bottom:8px}.chapter{margin-bottom:8px}.ornament{display:none}.story{font-size:18px;line-height:1.65}.brand small{display:none}dialog{width:min(640px,calc(100% - 32px));padding:16px}.option-grid{grid-template-columns:1fr 1fr}#chapterList{grid-template-columns:1fr 1fr 1fr}#chapterList button{padding:8px;gap:8px}.dialog-heading{margin-bottom:12px}.contents-footer{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


.story{white-space:normal}.story-line{display:block}.phrase{display:inline-block;white-space:nowrap}
.book-shell{overflow:hidden}
/* Extra scene layers stay above the illustration and below the text. */
.ripples,.breeze,.warm-halo,.page-spark{position:absolute;inset:0;pointer-events:none;opacity:0}
.ripples i{position:absolute;width:50px;height:16px;border:2px solid #fff7d5aa;border-radius:50%;left:20%;top:68%;opacity:0}.ripples i:nth-child(2){left:55%;top:76%}.ripples i:nth-child(3){left:73%;top:61%}
.breeze i{position:absolute;left:-25%;top:25%;width:70%;height:60px;border-top:2px solid #fff9e799;border-radius:50%;opacity:0}.breeze i:nth-child(2){top:43%;width:55%}
.warm-halo{background:radial-gradient(ellipse at 50% 55%,#ffd77d35,transparent 62%)}
.page-spark i{position:absolute;font-style:normal;font-size:24px;color:#fff2be;text-shadow:0 0 10px #f0bf5e;left:54%;top:37%;opacity:0}.page-spark i:nth-child(2){left:42%;top:48%;font-size:16px}.page-spark i:nth-child(3){left:62%;top:53%;font-size:16px}
.motion-on #book .art-frame{animation:picture-breathe 16s ease-in-out infinite alternate}
.motion-on #book:is([data-scene=care],[data-scene=receive],[data-scene=gift],[data-scene=ending]) .art-frame{animation:picture-close 18s ease-in-out infinite alternate}
.motion-on #book:is([data-scene=leaves],[data-scene=directions],[data-scene=sunset]) .art-frame{animation:picture-walk 16s ease-in-out infinite alternate}
.motion-on #book:is([data-scene=stream]) .ripples{opacity:1}.motion-on #book[data-scene=stream] .ripples i{animation:water-ring 4.8s ease-out infinite}.motion-on #book[data-scene=stream] .ripples i:nth-child(2){animation-delay:-1.6s}.motion-on #book[data-scene=stream] .ripples i:nth-child(3){animation-delay:-3.2s}
.motion-on #book:is([data-scene=wind],[data-scene=leaves],[data-scene=sunset]) .breeze{opacity:1}.motion-on #book:is([data-scene=wind],[data-scene=leaves],[data-scene=sunset]) .breeze i{animation:wind-ribbon 7s ease-in-out infinite}.motion-on #book .breeze i:nth-child(2){animation-delay:-3.5s}
.motion-on #book:is([data-scene=care],[data-scene=warm],[data-scene=thanks],[data-scene=ending]) .warm-halo{animation:kindness-glow 8s ease-in-out infinite alternate}
.motion-on #book:is([data-scene=discover],[data-scene=recognize],[data-scene=gold],[data-scene=gift]) .page-spark{opacity:1}.motion-on #book:is([data-scene=discover],[data-scene=recognize],[data-scene=gold],[data-scene=gift]) .page-spark i{animation:soft-spark 6s ease-in-out infinite}.motion-on #book .page-spark i:nth-child(2){animation-delay:-2s}.motion-on #book .page-spark i:nth-child(3){animation-delay:-4s}
.motion-on #book:is([data-scene=pause],[data-scene=squirrel],[data-scene=directions],[data-scene=search],[data-scene=ask],[data-scene=receive]) .leaf{animation:leaf-drift 14s linear infinite;animation-delay:var(--delay)}
@keyframes picture-breathe{from{transform:scale(1)}to{transform:scale(1.025)}}
@keyframes picture-close{from{transform:scale(1)}to{transform:scale(1.045) translateY(-.3%)}}
@keyframes picture-walk{from{transform:scale(1.025) translateX(-.6%)}to{transform:scale(1.025) translateX(.6%)}}
@keyframes water-ring{0%{transform:scale(.2);opacity:0}20%{opacity:.65}100%{transform:scale(2.5);opacity:0}}
@keyframes wind-ribbon{0%,15%{transform:translateX(-10%);opacity:0}40%{opacity:.55}85%,100%{transform:translateX(185%);opacity:0}}
@keyframes kindness-glow{from{opacity:.12}to{opacity:.65}}
@keyframes soft-spark{0%,25%,100%{opacity:0;transform:scale(.65) rotate(-8deg)}50%{opacity:.65;transform:scale(1) rotate(8deg)}75%{opacity:0;transform:scale(.75) rotate(16deg)}}
.install-copy{font-size:18px;line-height:1.65;white-space:pre-line;margin:12px 0}.install-copy:empty{display:none}#installDialog button:not(.dialog-heading button){width:100%;margin-top:8px}#installDialog{width:min(440px,calc(100% - 32px))}
@media(orientation:landscape) and (max-height:540px){#installDialog{width:min(640px,calc(100% - 32px))}.install-copy{margin:8px 0}}
body:not(.motion-on) .art-frame{transform:none}body.page-hidden *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.art-frame{transform:none!important}}
/* Small landscape phones need room for the complete Japanese sentences. */
@media(orientation:landscape) and (max-width:700px) and (max-height:360px){
 #book,.turn-sheet{grid-template-columns:40% 60%}
 .paper{padding:8px 12px}
 #installDialog[open]{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
 #installDialog .dialog-heading{grid-column:1/-1;margin-bottom:0}
 #installDialog .install-copy{margin:0}
 #installDialog button:not(.dialog-heading button){margin-top:0}
}

/* 2026-10-06 スマホ縦向き：絵は横幅いっぱいの3:2で上下のぼかし帯をなくし、残りを文章に回す */
@media(max-width:700px) and (orientation:portrait){
 .book-shell{container-type:size}
 #book,.turn-sheet{display:flex;flex-direction:column}
 .picture{height:66.667cqw;flex:0 1 auto}
 .picture .art-frame{position:absolute;inset:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
 .picture::before{display:none}
 .art-frame img{object-fit:contain;min-height:0;min-width:0}
 .paper{min-height:0;justify-content:center;flex:1 0 auto}
}
@media(max-width:700px) and (orientation:portrait) and (min-height:701px){
 .paper{padding:18px 24px 20px}
 .story{font-size:21px;line-height:1.85}
 h1{font-size:32px}
}
@media(max-width:700px) and (orientation:portrait) and (min-height:760px){
 .story{font-size:24px;line-height:1.9}
 h1{font-size:36px}
}
@media(max-width:700px) and (orientation:portrait) and (min-height:760px){.ornament{display:block;margin-top:22px;text-align:left}}
/* プチハウスのロゴ（スキル app-puchi-logo）。せってい画面のいちばん下・押すとプチハウスのホームページ */
.dialog-logo{display:flex;justify-content:flex-end;align-items:center;margin-top:4px}
.puchi-logo{display:inline-flex;align-items:center;min-width:56px;min-height:56px;padding:4px 6px;border-radius:10px}
.puchi-logo img{display:block;height:22px;width:auto}
.puchi-logo:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media(orientation:landscape) and (max-height:540px){.dialog-logo{margin-top:0}}
@media(orientation:portrait) and (max-height:620px){
 #options .option-grid{grid-template-columns:1fr 1fr}
 #options .option-grid button{padding:8px;text-align:center}
 .dialog-logo{margin:0;justify-content:center}
 .puchi-logo img{max-width:100%;height:auto;max-height:22px}
}

/* 2026-10-10：1作目と同じ。上の帯の「♪ おと」ボタン・下の帯のプチハウスのロゴ・最初のタップで音楽を始める透明なボタン */
.header-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:#e6eddf;border-color:var(--green)}
#bgmButton[aria-pressed=false] span{opacity:.6}
.page-position{gap:2px!important;justify-items:center}
.footer-logo{min-height:28px;padding:2px 6px;display:inline-flex;align-items:center}
.footer-logo img{height:20px;width:auto;display:block}
@media(max-width:400px){.brand{font-size:20px;white-space:nowrap}.brand small{display:none}#bgmButton,#settings{padding-inline:10px}.header-end{gap:6px}}
@media(max-width:340px){.brand{font-size:17px}}
#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(100px + 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 "Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:#fffaf0;background:#385448e6;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:hover:not(:disabled){background:transparent;box-shadow:none}
@media(prefers-reduced-motion:reduce){#tapToStart span{animation:none}}
@media(max-width:400px){.brand{letter-spacing:0}.brand .volume{font-size:inherit}}
@media(max-width:360px){#bgmButton,#settings{padding-inline:8px}.reader-header{gap:4px}}

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

/* 2026-10-19 高齢の方向け（スキル app-senior-friendly）：下の帯のロゴは絵の大きさ（20px）のまま、押せる枠だけ56pxに。
   上下に-14pxずつはみ出させて、帯の高さ（＝絵本の大きさ）は変えない。上の帯のボタンどうしは8pxあける */
.footer-logo{min-height:56px;margin-block:-14px;position:relative}
@media(max-width:400px){.header-end{gap:8px}}

/* Keep art at constant scale, including page-turn clones. */
.book-shell{perspective:none}
#book .art-frame,.turn-sheet .art-frame{animation:none!important;transform:none!important}
.turn-sheet{transform:none!important;will-change:clip-path}
.picture{background:#fff}.picture::before{display:none}