/* Shared visual system: playful, readable and responsive. */
:root{--paper:#fff9ee;--card:#fff;--ink:#29243e;--berry:#e94875;--berry-dark:#c22a56;--muted:#625d70;--line:#ded7e8;--save:#23745e;--radius:24px;--shadow:5px 6px 0 #29243e}
body.pop{background-color:var(--paper);background-image:radial-gradient(#e7dcc7 1px,transparent 1px);background-size:22px 22px;color:var(--ink);padding:0 20px 40px;font-family:"Zen Kaku Gothic New",system-ui,sans-serif;line-height:1.8;margin:0}
.pop *{box-sizing:border-box}
.pop .wrap,.pop .page{max-width:1080px;margin:auto}
.pop a{color:var(--berry-dark)}
.pop .site-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:24px 0;border-bottom:2px solid var(--ink);margin-bottom:40px}
.pop .brand{font-size:19px;font-weight:900;text-decoration:none;color:var(--ink);display:flex;gap:10px;align-items:center}
.pop .brand-mark{background:#ffd766;border:2px solid var(--ink);border-radius:12px;padding:0 9px;transform:rotate(-7deg)}
.pop .nav-links{display:flex;gap:20px;align-items:center;font-size:13px;font-weight:700}.pop .nav-links a{text-decoration:none;color:var(--ink)}
.pop .nav-links a:hover,.pop .nav-links [aria-current=page]{color:var(--berry-dark);text-decoration:underline;text-underline-offset:6px}
.pop .eyebrow{display:inline-block;background:#fff0a3;border:1.5px solid var(--ink);border-radius:99px;padding:4px 14px;color:var(--ink);font-size:12px;font-weight:900;letter-spacing:.06em;margin-bottom:18px}
.pop .eyebrow:before{display:none}
.pop h1{font-size:clamp(31px,5vw,58px);line-height:1.35;letter-spacing:-.04em;font-weight:900;margin:0 0 20px}
.pop .hl{color:var(--berry-dark)}.pop .lead{font-size:16px;color:#575267;max-width:44em}
.pop .hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center;margin:24px 0 64px}
.pop .hero-copy p{margin:0 0 24px}
.pop .cta,.pop .btn-search{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--berry);color:white;text-decoration:none;font-weight:900;font-size:18px;border:2px solid var(--ink);border-radius:15px;box-shadow:4px 5px 0 var(--ink);padding:16px 25px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.pop .cta:hover,.pop .btn-search:hover{background:var(--berry-dark);transform:translateY(-2px)}
.pop .cta:active,.pop .btn-search:active{transform:translate(3px,3px);box-shadow:1px 2px 0 var(--ink)}
.pop .hero-art{min-height:360px;position:relative;background:#bce4d4;border:2px solid var(--ink);border-radius:48% 48% 24px 24px;display:flex;align-items:flex-end;justify-content:center;box-shadow:6px 7px 0 var(--ink);isolation:isolate}
.pop .hero-art img{width:min(85%,330px);height:330px;object-fit:contain;filter:drop-shadow(0 10px 0 #29243e18)}
.pop .speech{position:absolute;top:24px;left:-16px;background:white;border:2px solid var(--ink);border-radius:18px;padding:10px 18px;font-weight:900;transform:rotate(-6deg);z-index:1}
.pop .sticker{position:absolute;right:-13px;bottom:28px;background:#ffdc73;border:2px solid var(--ink);padding:12px 18px;border-radius:14px;transform:rotate(8deg);font-size:14px;font-weight:900}
.pop .section-title{font-size:25px;margin:0 0 20px;font-weight:900}
.pop .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 42px}
.pop .step{padding:24px;border:2px solid var(--ink);border-radius:20px;background:white}
.pop .step:nth-child(2){background:#fce4ed}.pop .step:nth-child(3){background:#e4f0fc}
.pop .step-no{font-size:12px;font-weight:900;background:#ffd766;border:1.5px solid var(--ink);padding:3px 10px;border-radius:8px;display:inline-block;margin-bottom:14px}
.pop .step h3{font-size:18px;margin:0 0 8px}.pop .step p{font-size:14px;color:#575267;margin:0}
.pop .mini-banner{display:flex;align-items:center;gap:24px;background:#eee7ff;border:2px solid var(--ink);border-radius:22px;padding:18px 26px;margin:32px 0}
.pop .mini-banner img{width:100px;height:105px;object-fit:contain}.pop .mini-banner h2{font-size:21px;margin:0 0 5px}.pop .mini-banner p{margin:0;font-size:14px}.pop .mini-banner a{font-weight:900;white-space:nowrap;margin-left:auto}
.pop footer{border-top:1px solid #d5ccbf;margin-top:35px;padding-top:22px;font-size:12px;line-height:1.9;color:#625d70}
.pop footer a{font-size:13px;font-weight:700}.pop .sns{margin:30px 0;border-top:none;padding-top:0}.pop .sns .lead{font-size:13px}
.pop .search-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.pop .search-heading h1{font-size:clamp(28px,4vw,43px);margin-bottom:12px}
.pop .search-heading img{width:150px;height:155px;object-fit:contain;flex:none}
.pop .search-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:26px;align-items:start}
.pop .panel{border:2px solid var(--ink);border-radius:24px;padding:28px;background:white;box-shadow:5px 6px 0 #e1d8c9;margin-bottom:30px;min-width:0}
.pop .field-label{color:var(--ink);font-size:16px;font-weight:900;margin-bottom:12px}
.pop input,.pop select{font:inherit;font-size:16px;border:1.5px solid #c9c1d6;border-radius:12px;padding:12px;background:#fffdf9;color:var(--ink);max-width:100%;min-height:48px}
.pop input:focus,.pop select:focus{outline:3px solid #e9487540;border-color:var(--berry)}
.pop .add-row{display:flex;gap:10px}.pop .add-row input{flex:1;min-width:0}
.pop .btn-add{background:#29243e;border:2px solid #29243e;color:white;min-width:80px;padding:10px 16px;border-radius:12px;font:inherit;font-weight:900;cursor:pointer}
.pop .examples{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.pop .example{font:inherit;font-size:12px;background:#fff3c8;border:1px solid #d9c276;border-radius:99px;padding:5px 11px;cursor:pointer;color:var(--ink)}
.pop .list:empty:after{content:"商品を追加すると、ここにリストができます";display:block;color:#6e6879;font-size:13px;border:1px dashed #ccc0da;padding:20px 12px;border-radius:12px;text-align:center}
.pop .list{margin:20px 0;list-style:none;padding:0;display:grid;gap:8px}
.pop .list li{display:flex;align-items:center;gap:12px;border:1px solid #d8cfdf;background:#f8f4ff;border-radius:12px;padding:10px 14px}
.pop .list .mark{background:#dfd0ff;border-radius:8px;font-size:12px;padding:1px 8px;color:var(--ink)}
.pop .list .name{flex:1;overflow-wrap:anywhere}.pop .rm{min-width:36px;min-height:36px;background:white;border:1px solid #bcb0c9;border-radius:9px;cursor:pointer}
.pop .opts{background:#f7f5fa;border:1px solid #e3dce9;border-radius:14px;padding:14px;margin:18px 0}
.pop summary{cursor:pointer;font-weight:700}.pop .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding-top:18px}.pop .opt-grid .full{grid-column:1/-1}.pop .opt-grid label{display:block;font-size:12px;margin-bottom:5px}.pop .opt-grid input,.pop .opt-grid select{width:100%}
.pop .btn-search{width:100%;font-size:16px;margin-top:5px}.pop .btn-search:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:2px 2px 0 var(--ink)}
.pop .search-aside{background:#fff0b9;border:2px solid var(--ink);border-radius:22px;padding:22px;font-size:13px}
.pop .search-aside h2{font-size:17px;margin:0 0 12px}.pop .search-aside ol{padding-left:22px}.pop .search-aside li{margin:12px 0}.pop .search-aside p{border-top:1px solid #dbc775;padding-top:15px}
.pop #searchSummary{color:var(--muted);font-size:12px;text-align:center;margin:12px 0 0}
.pop #results{margin:20px 0 40px}.pop .shop{border:2px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:4px 5px 0 #e1d8c9;background:#fff}
.pop .shop-top{background:#e9e0fa}.pop .badge{background:#d3f0e1;color:#205c46;border:1px solid #a4cebc}
.pop .state{border-radius:20px;background:white;border:1.5px dashed #c3b4d3;padding:30px}
.pop :focus-visible{outline:3px solid #6952c7;outline-offset:4px}
.pop .kuji-content{max-width:720px;margin:auto;text-align:center}.pop .kuji-cat{width:190px;height:200px;object-fit:contain}
.pop #kuji-btn{background:var(--berry);color:white;border:2px solid var(--ink);border-radius:16px;box-shadow:4px 5px 0 var(--ink);padding:16px 30px;font:inherit;font-weight:900;cursor:pointer}
.pop #result .card{background:white;border:2px solid var(--ink);border-radius:22px;box-shadow:5px 6px 0 #e0d3f0}
@media(max-width:760px){.pop .hero-grid{grid-template-columns:1fr;gap:35px;margin-bottom:44px}.pop .hero-art{min-height:290px;max-width:440px;width:100%;margin:auto}.pop .hero-art img{height:280px}.pop .steps{grid-template-columns:1fr}.pop .step{padding:20px}.pop .search-layout{grid-template-columns:1fr}.pop .search-aside{display:none}.pop .site-nav{margin-bottom:28px;padding:18px 0}.pop .nav-links{gap:14px;font-size:12px}.pop .mini-banner{flex-wrap:wrap;padding:18px;gap:14px}.pop .mini-banner a{margin-left:0}.pop .panel{padding:20px}.pop .search-heading img{width:90px;height:110px}.pop .speech{left:8px;font-size:14px}.pop .sticker{right:0}.pop .search-heading{gap:10px}}
@media(max-width:420px){.pop .brand{font-size:16px}.pop .nav-links{width:100%;justify-content:space-between}.pop .opt-grid{grid-template-columns:1fr}.pop .search-heading img{display:none}.pop .cta{width:100%;font-size:16px}.pop .hero-art{min-height:270px}.pop .hero-art img{height:260px}}
@media(prefers-reduced-motion:reduce){.pop *{animation:none!important;transition:none!important}}

body.pop-kuji{display:block;align-items:initial}.pop-kuji .page{width:100%}.pop .section-title{font-size:clamp(21px,4vw,25px)}.pop-home footer>a{display:block;margin-bottom:6px}