@charset "UTF-8";
:root { color-scheme: light; --paper:#fbf7ed; --ink:#493529; --teal:#198e94; --coral:#ea6871; }
* { box-sizing: border-box; }
html, body { width:100%; min-height:100%; margin:0; overflow:hidden; background:var(--paper); color:var(--ink); font-family:"Yusei Magic","Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
html { scroll-behavior:smooth; }
body.is-ready { overflow:visible; }
html:has(body.is-ready) { overflow-x:hidden; overflow-y:auto; }
.hero { position:relative; width:100%; height:100vh; height:100svh; overflow:hidden; }
#film { display:block; width:100%; height:100%; }
.skip-animation { position:absolute; z-index:2; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); min-height:44px; padding:10px 16px; border:1px solid #49352930; border-radius:30px; background:#fffdf0ed; color:var(--ink); font:400 13px/1.5 "Yusei Magic","Yu Gothic",Meiryo,sans-serif; cursor:pointer; touch-action:manipulation; }
.skip-animation:hover { background:#fffdf0; }
.skip-animation:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
[hidden] { display:none!important; }
#loading-error { position:absolute; inset:auto 8% 8%; padding:1rem; text-align:center; background:#fff9; font-size:14px; }
a { color:inherit; text-underline-offset:5px; }
a:focus-visible { outline:3px solid var(--teal); outline-offset:6px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.scroll-cue { position:absolute; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:18px; white-space:nowrap; padding:10px 20px; border-radius:30px; background:#fffdf0ed; font-size:12px; letter-spacing:.12em; text-decoration:none; box-shadow:0 2px 12px #49352910; }
.scroll-cue span:last-child { font-size:22px; }
.section-wrap { max-width:1440px; margin:auto; padding:110px 5%; }
h2,h3,p,figure { margin:0; }
h1,h2,h3,.footer-bottom>span { font-family:"Hachi Maru Pop","Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,cursive; font-weight:400; }
.eyebrow,.story-signoff,.activity-number,.scroll-cue { font-family:"Yomogi","Yu Gothic",Meiryo,cursive; font-weight:400; }
.eyebrow { font-size:15px; letter-spacing:.12em; color:var(--teal); margin-bottom:20px; }
.scroll-cue { font-size:15px; letter-spacing:.06em; }
.story-heading { display:grid; grid-template-columns:1fr 1.1fr; gap:7%; align-items:center; margin-bottom:52px; }
.story-heading h2 { position:relative; display:inline-block; font-size:clamp(30px,3.4vw,50px); line-height:1.6; letter-spacing:.06em; }
.paw { color:#d9b485; font-size:20px; margin-left:12px; }
.story-intro>p:first-child { font-size:clamp(18px,1.7vw,24px); font-weight:400; line-height:1.9; }
.story-intro strong { font-weight:400; }
em { font-style:normal; color:var(--coral); }
.detail { margin-top:20px; font-size:14px; line-height:2; }
.comic { display:grid; grid-template-columns:487fr 524fr 468fr 559fr; gap:12px; align-items:start; }
.comic img { display:block; width:100%; height:auto; }
.comic.is-animated figure { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.comic.is-animated figure.is-visible { opacity:1; transform:none; }
@media(min-width:761px) { .comic.is-animated figure:nth-child(2) { transition-delay:.1s; } .comic.is-animated figure:nth-child(3) { transition-delay:.2s; } .comic.is-animated figure:nth-child(4) { transition-delay:.3s; } }
.paw-trail { display:flex; align-items:center; justify-content:center; gap:25px; height:64px; margin:-24px auto 30px; pointer-events:none; }
.paw-trail svg { opacity:.38; transform:translateY(10px) rotate(28deg); }
.paw-trail svg:nth-child(2) { transform:translateY(-8px) rotate(36deg); }
.paw-trail svg:nth-child(3) { transform:translateY(-18px) rotate(28deg); }
@media(prefers-reduced-motion:reduce) { .comic.is-animated figure { opacity:1; transform:none; transition:none; } }
.story-signoff { margin-top:35px; text-align:right; font-size:18px; letter-spacing:.18em; }
.activities { padding-top:30px; padding-bottom:100px; }
.section-heading { text-align:center; margin-bottom:46px; }
.section-heading h2 { font-size:clamp(23px,2.8vw,36px); line-height:1.8; letter-spacing:.04em; }
#activities-title { font-family:"Yusei Magic","Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
.activity-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.activity { overflow:hidden; border-radius:32px; padding:42px 42px 28px; display:flex; flex-direction:column; align-items:start; }
.support { background:#eaf8fb; }
.reading { background:#fff0ed; }
.activity-number { font-size:14px; letter-spacing:.08em; margin-bottom:18px; }
.activity h3 { font-size:clamp(24px,2.4vw,33px); line-height:1.65; margin-bottom:20px; }
.support h3 span { color:var(--teal); }
.reading h3 span { color:#b35c56; }
.activity>p:not(.activity-number) { font-size:15px; line-height:2; max-width:30em; }
.activity>p+p { margin-top:12px; }
.activity-art { display:block; width:100%; height:auto; margin-top:24px; border-radius:20px; }
.book-art { width:75%; max-width:350px; align-self:center; height:auto; }
.reading-art { margin-top:auto; padding-top:24px; }
.support-status { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; width:100%; margin-top:24px; padding:16px; border:1px solid #d4e5e6; border-radius:40px; background:#ffffffa0; font-size:14px; }
.badge { padding:4px 10px; background:#e6efeb; border-radius:20px; font-size:11px; }
.footer { background:#fff; }
.footer-landscape { display:block; width:100%; height:auto; overflow:hidden; }
.footer-content { max-width:1440px; margin:auto; padding:28px 4% 20px; display:grid; grid-template-columns:.9fr 1.6fr; gap:32px; align-items:center; }
.footer-brand { display:block; width:100%; height:auto; overflow:hidden; }
.footer-actions { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.footer-action { display:flex; align-items:center; justify-content:center; gap:12px; min-height:92px; padding:18px 20px; border:0; border-radius:60px; color:#fff; font-family:"Yusei Magic","Yu Gothic",Meiryo,sans-serif; text-align:left; }
.footer-action:disabled { opacity:1; cursor:default; }
.footer-action { transition:transform .24s ease,box-shadow .24s ease,filter .24s ease; }
.footer-action>svg { transition:transform .24s ease; }
@media(hover:hover) and (pointer:fine) {
  .footer-action:hover { transform:translateY(-4px); box-shadow:0 9px 20px #49352924; filter:brightness(1.06); }
  .footer-action:hover>svg { transform:rotate(-6deg) scale(1.06); }
}
.footer-crowdfunding { background:linear-gradient(120deg,#ed5867,#dc4253); }
.footer-instagram { background:linear-gradient(120deg,#7260d6,#ad52b7); }
.footer-action>svg { width:32px; height:32px; flex-shrink:0; }
.footer-action-label { font-size:clamp(15px,1.4vw,20px); line-height:1.5; }
.footer-action-label small { display:block; margin-top:5px; font-size:11px; }
.footer-pending { flex-shrink:0; font-size:11px; border:1px solid #ffffffa0; border-radius:20px; padding:4px 8px; }
.footer-copyright { padding:4px 5% 24px; text-align:right; font-size:11px; }
@media(max-width:1100px) { .footer-content { grid-template-columns:1fr; } .footer-brand { max-width:420px; margin:auto; } }
@media(max-width:760px) {
  .section-wrap { padding:72px 6%; }
  .story-heading { grid-template-columns:1fr; gap:28px; margin-bottom:32px; }
  .story-heading h2 { font-size:32px; }
  .story-intro>p:first-child { font-size:19px; }
  .comic { grid-template-columns:1fr 1fr; gap:18px 12px; }
  .comic figure { align-self:start; }
  .story-signoff { font-size:14px; text-align:center; }
  .activity-grid { grid-template-columns:1fr; gap:24px; }
  .activities { padding-top:0; }
  .activity { padding:30px 26px 24px; }
  .section-heading h2 { font-size:23px; }
  .footer-content { padding:24px 6% 16px; gap:24px; }
}
@media(max-width:480px) {
  .comic { grid-template-columns:1fr; gap:24px; max-width:380px; margin:auto; }
  .section-heading h2 { font-size:21px; }
  .activity h3 { font-size:25px; }
  .activity>p:not(.activity-number) { font-size:14px; }
  .footer-actions { grid-template-columns:1fr; gap:14px; }
  .footer-action { min-height:82px; }
  .footer-action-label { font-size:18px; }
  .footer-copyright { text-align:center; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .footer-action,.footer-action>svg { transition:none; } .footer-action:hover,.footer-action:hover>svg { transform:none; } }

.activity.reading .reading-notice { width:100%; margin-top:24px; padding-top:18px; border-top:1px solid #d9b6af66; font-size:13px; line-height:1.9; color:#80655e; }