/* 生成画像を使うv1.3。文字はHTML、画像には描き足さない。 */
:root{--pink:#ffdce7;--blue:#cceaff;--lemon:#ffec9e}
.feature-area{background:#fff9ec;padding-top:18px}
.hero{grid-template-columns:1fr 1.12fr;gap:24px;padding:26px;background:#fff0ac;border-color:#b39a51;min-height:380px}
.hero.feature-sky{background:#cceaff;border-color:#74a9be}.hero.feature-peach{background:#ffdce7;border-color:#c38d9e}.hero.feature-lemon{background:#e2efb5;border-color:#8f9f64}
.hero .feature-copy{background:#fff!important;padding:26px!important}
.hero h1,.hero h2{font-size:33px;line-height:1.5;text-wrap:balance;overflow-wrap:normal}
.check-title-part{display:inline-block;white-space:nowrap}.hero .check-title-part{display:block}
.hero-art{min-width:0}.page-index .hero-art{animation:cat-arrival 1s cubic-bezier(.22,.8,.32,1) both}.feature-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:20px;transform-origin:50% 85%;animation:raster-breathe 5s ease-in-out infinite}
.hero .check-title-part{animation:headline-rise .8s ease-out both}.hero .check-title-part:nth-child(2){animation-delay:.2s}
.hero .meta{margin-top:18px}.hero .button{margin-top:20px}
.card-illustration{background:#ffecac}.tone-1{background:#cceaff}.tone-2{background:#ffdce7}.tone-3{background:#e7edbc}
.card-illustration .shop-cat{width:100%;height:100%;object-fit:contain;transform:none}
.shop-grid .chip{gap:4px;padding-top:24px}.symptom-image{display:block;width:132px;height:132px;object-fit:contain;margin:auto}
.guide-banner{background:#ffefae}.guide-banner:nth-child(2){background:#cceaff}.guide-banner:nth-child(3){background:#ffdce7}.guide-banner:nth-child(4){background:#e6efb3}
.guide-banner .shop-cat{width:100%;height:150px;object-fit:contain}
.cat-parade{padding:12px 0;background:#fff3ca}.cat-parade .parade-image,.cat-parade .parade-image:nth-child(even){display:block;width:100%;height:auto;max-height:260px;object-fit:contain;margin:0}
.edge-cats .decor-image{width:42px;height:42px;border:0;background:transparent;border-radius:0;object-fit:contain}
img.raster-mascot{object-fit:contain;transform-origin:50% 85%;animation:raster-breathe 4.5s ease-in-out infinite}
.mascot-lost.raster-mascot{animation:raster-look 5s ease-in-out infinite}
.result-mascot .raster-mascot{animation:raster-nod .65s ease-in-out 2}
.walking-cat .raster-mascot{animation:none}.walking-cat{height:82px}
.walking-cat img{position:absolute;inset:0;width:80px;height:82px;object-fit:contain}
.walk-frame-2{visibility:hidden}.walking-cat.is-walking .walk-frame-1{animation:walk-first .3s steps(1,end) infinite}.walking-cat.is-walking .walk-frame-2{animation:walk-second .3s steps(1,end) infinite}
.pastel-parallax .float-decor{position:absolute;width:52px;height:52px;object-fit:contain;animation:pastel-float 7s ease-in-out infinite;background:none;border:0;border-radius:0;opacity:.8}
.pastel-parallax .float-yarn{right:2%;top:7%;width:75px;height:75px}.pastel-parallax .float-paw{left:5%;top:15%}.pastel-parallax .float-leaf{right:4%;bottom:10%;animation-delay:-3s}.pastel-parallax .float-notebook{left:46%;bottom:6%;animation-delay:-2s}
.page-heading h1{text-wrap:balance;overflow-wrap:normal}.page-heading h1 .check-title-part+.check-title-part{margin-left:.1em}
.sheet-page .mascot-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.sheet-page .mascot-gallery img{width:100%;max-width:100%;height:220px;object-fit:contain}
@keyframes raster-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.025,.985)}}
@keyframes raster-look{0%,100%{transform:rotate(-4deg)}45%,65%{transform:rotate(4deg)}}
@keyframes raster-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(6px) scaleY(.96)}}
@keyframes walk-first{0%,100%{visibility:visible}50%{visibility:hidden}}
@keyframes walk-second{0%,100%{visibility:hidden}50%{visibility:visible}}
html[data-safety=true] .raster-mascot,html[data-safety=true] .walking-cat img{animation:none!important;transition:none!important}
html[data-safety=true] .raster-mascot{transform:none!important}
html[data-motion=paused] .walk-frame-2{visibility:hidden!important}html[data-motion=paused] .walk-frame-1{visibility:visible!important}
@media(max-width:850px){.hero{grid-template-columns:1fr 1fr;gap:16px;padding:20px}.hero h1,.hero h2{font-size:27px}.guide-banner .shop-cat{height:130px}.sheet-page .mascot-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.hero{grid-template-columns:1fr;padding:14px;gap:12px}.hero .feature-copy{padding:20px!important}.hero h1,.hero h2{font-size:26px}.hero-art{display:block!important;grid-row:auto}.feature-image{max-height:220px}.hero .meta{font-size:12px}.hero .button{font-size:14px}.symptom-image{width:108px;height:108px}.guide-banner .shop-cat{height:112px}.cat-parade .parade-image{max-height:none;min-height:90px}.page-heading h1{font-size:26px}.page-heading h1 .check-title-part{display:block}.page-heading h1 .check-title-part+.check-title-part{margin-left:0}.sheet-page .mascot-gallery{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.walk-frame-2{visibility:hidden!important}.walk-frame-1{visibility:visible!important}img.raster-mascot,.pastel-parallax .float-decor{animation:none!important;transform:none!important}}

/* v1.5：べた塗り素材の色面と周囲の色を揃える。 */
.hero{background:#f6de82}.hero.feature-sky{background:#bdddea}.hero.feature-peach{background:#f3beaa}.hero.feature-lemon{background:#c9e9d7}
.card-illustration,.tone-0{background:#f6de82}.tone-1{background:#bdddea}.tone-2{background:#f3beaa}.tone-3{background:#c9e9d7}
.guide-banner{background:#f6de82}.guide-banner:nth-child(2){background:#bdddea}.guide-banner:nth-child(3){background:#f3beaa}.guide-banner:nth-child(4){background:#c9e9d7}.cat-parade{background:#fff0cc}