:root{--ink:#12211d;--paper:#f4f1e9;--lime:#c8ff3d;--line:#c9cec7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans JP",sans-serif}header{height:68px;display:flex;align-items:center;gap:12px;padding:0 5vw;border-bottom:1px solid var(--line)}header b{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--ink);color:var(--lime)}header span{margin-left:auto;font-size:12px;border:1px solid var(--line);border-radius:99px;padding:7px 11px}main{width:min(1120px,90vw);margin:auto;padding:70px 0}.intro{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:40px;margin-bottom:40px}.intro small{grid-column:1}.intro h1{grid-row:2;margin:5px 0;font-size:clamp(42px,6.5vw,78px);line-height:1.03;letter-spacing:-.055em}.intro em{font-style:normal;color:#51605b}.intro p{grid-column:2;grid-row:2;line-height:1.9}small{letter-spacing:.16em;font-weight:bold;color:#62706a}#drop{min-height:275px;border:2px dashed #88938e;border-radius:24px;background:#ffffff88;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s}#drop.over,#drop:hover{background:#ecffd0;transform:translateY(-2px)}#drop input{display:none}#drop i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:30px;font-style:normal}#drop h2{margin:18px 0 5px}#drop p{margin:0;color:#62706a}.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 0;padding:0;border:0}.modes legend{font-weight:bold;margin-bottom:10px}.modes label{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer}.modes label:has(input:checked){background:#ecffd0;border-color:#34403b}.modes input{accent-color:var(--ink);margin-right:7px}#mode-help{font-size:12px;color:#68736e;margin:10px 4px 0}#error{color:#a32222;text-align:center}#result{margin-top:65px}.result-head{display:flex;align-items:end;justify-content:space-between}.result-head h2{font-size:34px;margin:6px 0}.result-head p{margin:0;color:#62706a;font-size:13px}button{border:0;border-radius:10px;padding:13px 18px;background:var(--ink);color:var(--lime);font-weight:bold;cursor:pointer}#pieces{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}article{position:relative;background:#fff;border:1px solid var(--line);padding:10px;border-radius:15px}article img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#e6e8e2;border-radius:8px}article button{width:100%;margin-top:10px;color:#fff}.num{position:absolute;top:18px;left:18px;background:var(--lime);padding:5px 8px;border-radius:6px;font-size:12px;font-weight:bold}.note,footer{font-size:12px;color:#68736e}.note{margin-top:14px}.how{margin-top:76px;padding-top:48px;border-top:1px solid var(--line)}.how h2{font-size:30px;margin:7px 0 24px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.how-grid article{padding:22px}.how-grid article b{color:#68736e;font-size:12px}.how-grid h3{margin:12px 0 8px;font-size:16px}.how-grid p{margin:0;line-height:1.75;font-size:13px;color:#5f6b66}.how-note{margin:14px 0 0;padding:14px 18px;border-radius:10px;background:#ecffd0;font-size:12px;color:#405048}footer{text-align:center;border-top:1px solid var(--line);padding:24px}@media(max-width:760px){.how-grid{grid-template-columns:1fr}.modes{grid-template-columns:1fr}main{padding-top:44px}.intro{display:block}.intro p{margin-top:22px}#pieces{grid-template-columns:repeat(2,1fr)}article img{height:320px}.result-head{align-items:start;flex-direction:column;gap:18px}#zip{width:100%}}