/* 07 ポップ — はっきりした色・太い線・ずらした影 */
:root { --bg: #fff6d6; --surface: #ffffff; --ink: #1b1b1b; --muted: #4a4a4a; --line: #1b1b1b; --accent: #2f8f4e; --green: #ff8a3d; --soft: #ffe9a8; --radius: 12px; }
body, h1, h2, .logo-text { font-family: "M PLUS Rounded 1c", sans-serif; }
h1, h2 { font-weight: 900; }
.site-header { background: var(--bg); border-bottom: 3px solid var(--ink); }
.logo-mark { border: 3px solid var(--ink); background: var(--green); color: var(--ink); }
.btn { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: 12px; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-ghost { background: #fff; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.hero h1::after { content: ""; display: block; width: 120px; height: 10px; background: var(--green); margin-top: 10px; border-radius: 6px; }
.hero-art .art, .card .art { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.card:hover .art { box-shadow: 10px 10px 0 var(--accent); }
.features { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.features div + div { border-left: 3px solid var(--ink); }
.badge { background: var(--green); color: var(--ink); border: 2px solid var(--ink); font-weight: 900; }
.chip { border: 2px solid var(--ink); font-weight: 700; }
.chip.on { background: var(--green); color: var(--ink); }
.story { background: var(--accent); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.story .eyebrow { color: #fff6d6; }
.cart-items, .summary, .form { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.qty { border: 2px solid var(--ink); }
@media (max-width: 680px) { .features div + div { border-left: 0; border-top: 3px solid var(--ink); } }