*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--yellow:#ffeb3b;--blue:#2196f3;--red:#f44336;--ink:#212121;--font:'Rubik','Noto Sans JP',sans-serif}
body{font-family:var(--font);background:var(--yellow);color:var(--ink)}
img{width:100%;display:block;object-fit:cover;border:3px solid var(--ink)}
a{color:var(--blue)}
.comic-head{text-align:center;padding:2rem 1rem;position:relative}
.burst{position:absolute;top:1rem;left:10%;background:var(--red);color:#fff;padding:.3rem 1rem;font-weight:700;transform:rotate(-12deg);border:3px solid var(--ink);font-size:.9rem}
.comic-head h1{font-size:clamp(1.8rem,5vw,2.8rem);text-shadow:4px 4px 0 var(--blue)}
.comic-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:12px;padding:1rem;max-width:1100px;margin:0 auto 2rem}
.comic-panel{background:#fff;border:4px solid var(--ink);padding:.75rem;position:relative;box-shadow:6px 6px 0 var(--ink)}
.comic-panel h3{font-size:.95rem;margin:.5rem 0}
.comic-panel span{font-weight:700;color:var(--red);font-size:1.1rem}
.comic-panel button{width:100%;margin-top:.5rem;background:var(--blue);color:#fff;border:3px solid var(--ink);padding:.5rem;font-weight:700;cursor:pointer;font-family:inherit}
.bubble{position:absolute;top:-10px;right:10px;background:#fff;border:3px solid var(--ink);border-radius:50%;padding:.4rem .8rem;font-size:.75rem;font-weight:700;z-index:2}
.bubble.sm{font-size:.65rem;padding:.25rem .5rem}
.p1{grid-column:span 2}.p2{grid-column:span 1}.p3{grid-column:span 1}.p4{grid-column:span 2}.p5.wide{grid-column:span 4}
.legal-comic{background:#fff;border-top:4px solid var(--ink);padding:2rem;font-size:.88rem;max-width:800px;margin:0 auto}
.legal-comic h3{margin-top:1rem;color:var(--blue)}
@media(max-width:700px){
  .comic-grid{grid-template-columns:1fr 1fr}
  .p1,.p2,.p3,.p4,.p5.wide{grid-column:span 1}
  .p5.wide{grid-column:span 2}
}