*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--orange:#ff9f43;--cream:#fff8f0;--brown:#5d4037;--font:'Nunito','Noto Sans JP',sans-serif}
body{font-family:var(--font);background:var(--cream);color:var(--brown)}
img{width:100%;height:100%;object-fit:cover;display:block}
a{color:var(--orange)}
.paw-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:var(--orange);color:#fff}
.paw-head h1{font-size:1.4rem}
.paw-head nav{display:flex;gap:1rem}
.paw-head nav a{color:#fff;text-decoration:none;font-weight:600}
.paw-collage{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:200px 180px;gap:10px;padding:1rem;max-width:1000px;margin:0 auto}
.col{position:relative;border-radius:24px 24px 24px 4px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 85%,85% 100%,0 100%)}
.col.big{grid-row:span 2}
.col.wide{grid-column:span 2}
.tag{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(93,64,55,.9));color:#fff;padding:1rem}
.tag h3{font-size:.9rem}
.tag span{font-weight:700}
.tag button{margin-top:.4rem;background:var(--orange);border:none;color:#fff;padding:.35rem 1rem;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:600}
.care-note{text-align:center;padding:1.5rem;font-size:.9rem;max-width:600px;margin:0 auto}
.legal-pet{padding:2rem;font-size:.88rem;max-width:700px;margin:2rem auto;background:#fff;border-radius:16px}
.legal-pet h3{color:var(--orange)}
@media(max-width:700px){
  .paw-collage{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .col.big,.col.wide{grid-column:span 2;grid-row:auto;min-height:180px}
}