:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#202128;background:#f3f3f7;line-height:1.7;font-size:16px;font-synthesis:none;--accent:#a6380b;--muted:#555962;--border:#b9bbc6}
*{box-sizing:border-box}body{margin:0}a{color:var(--accent);text-underline-offset:4px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.wrap{max-width:1120px;margin:auto;padding:0 24px}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px;border-bottom:1px solid #dedee5}.header>a:last-child{font-size:.875rem}.brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none;font-size:1.25rem;font-weight:700;color:#202128}.brand svg{width:28px;height:28px;color:var(--accent)}.skip{position:fixed;left:16px;top:-100px;padding:12px;background:#fff;z-index:9}.skip:focus{top:8px}.preview{font-size:.75rem;color:var(--muted);margin:16px 0 0}.intro{padding:32px 0 24px;max-width:800px}.eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:var(--accent);margin:0 0 8px}h1{font-size:2.5rem;line-height:1.4;letter-spacing:.01em;margin:0 0 16px}h2{font-size:1.5rem;line-height:1.5;margin:0 0 16px}h3{font-size:1.125rem;margin:0 0 12px}p{margin:0 0 16px}.intro p:last-child{margin:0;color:var(--muted)}.mobile-break{display:none}.settings{display:flex;gap:24px;align-items:center;margin:0 0 24px}.settings>label{min-width:230px}.settings .hint{margin:0}.hint{font-size:.8125rem;color:var(--muted);line-height:1.7}.items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 24px 24px;min-width:0;margin:0}.item legend{font-size:1.0625rem;font-weight:700;padding:0 8px}.number{background:#202128;color:#fff;border-radius:6px;display:inline-block;padding:2px 8px;font-variant-numeric:tabular-nums;margin-right:8px;font-size:.8125rem}label{display:block;font-size:.875rem;font-weight:600}input,select{display:block;margin-top:8px;width:100%;min-width:0;min-height:48px;padding:10px 12px;border:1px solid #92959f;border-radius:12px;background:#fff;color:#202128;font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums}input::placeholder{color:#6a6e77}input[aria-invalid=true]{border:2px solid #9d210f}.item>label,.quantity-row{margin-bottom:16px}.quantity-row{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px}.quantity-row:has(>label:only-child){grid-template-columns:1fr}.field-error{display:block;color:#9d210f;font-size:.8125rem;margin-top:6px}.actions{display:flex;gap:16px;align-items:center;margin:24px 0 12px}button{cursor:pointer;min-height:48px;border-radius:12px;padding:12px 20px;font-weight:600}.primary{background:var(--accent);color:#fff;border:1px solid var(--accent);display:flex;justify-content:space-between;gap:48px;min-width:250px}.primary:hover{background:#872c08}.secondary{background:#fff;border:1px solid #92959f;color:#202128}.secondary:hover{background:#e9e9f0}button:disabled{color:#666976;background:#e4e4ec;cursor:default}.text-button{padding:8px 4px;background:none;border:0;text-decoration:underline;text-underline-offset:4px;font-size:.875rem;color:var(--accent)}.remove{font-weight:400}.error-summary{background:#fff0eb;border-left:4px solid #9d210f;padding:16px;font-size:.875rem;color:#84210f}.results{margin-top:32px;padding:24px;background:#fff;border:1px solid var(--border);border-radius:12px}.result-note{color:var(--muted);font-size:.875rem}.result-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result-card{padding:20px;border:1px solid var(--border);border-radius:12px;min-width:0;overflow-wrap:anywhere}.result-card.best{border:2px solid var(--accent);background:#fff8f4;padding:19px}.result-title{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}.result-title h3{font-size:1rem}.badge{font-size:.75rem;white-space:nowrap;border:1px solid var(--accent);border-radius:6px;padding:2px 6px;color:var(--accent)}.unit-price{font-variant-numeric:tabular-nums;line-height:1.4;margin:12px 0}.unit-price strong{font-size:2rem;letter-spacing:-.02em}.unit-price span{font-size:.8125rem;color:var(--muted)}.result-card .hint{margin:0}.difference{font-size:.8125rem;margin:12px 0 0}.results>.hint{margin:16px 0 0}.example-action{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:16px 0 32px}.guide{padding:40px 0;border-top:1px solid var(--border);scroll-margin-top:24px}.guide>p{max-width:800px}.formula{font-weight:700;background:#fff;border:1px solid var(--border);padding:16px;border-radius:12px}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:32px 0}.guide-grid article{max-width:600px}.guide-grid p:last-child{margin-bottom:0}dl{max-width:800px}dt{font-weight:700;margin-top:24px}dd{margin:8px 0 0;font-size:.9375rem}.source{margin-top:32px!important;font-size:.8125rem;color:var(--muted)}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:32px;border-top:1px solid var(--border);font-size:.8125rem;color:var(--muted)}.footer p{margin:0}.footer nav{display:flex;gap:24px;flex-wrap:wrap}.prose{max-width:800px;padding:40px 0}.prose h1{font-size:2rem}.prose h2{margin-top:32px}.prose p{line-height:1.9}
@media(max-width:650px){.wrap{padding-left:16px;padding-right:16px}.header{padding-top:16px;padding-bottom:16px}.brand{font-size:1.125rem}.brand svg{width:24px}.header>a:last-child{font-size:.75rem}.intro{padding:24px 0}h1{font-size:1.875rem}.mobile-break{display:block}.desktop-break{display:none}.intro p{font-size:.9375rem}.settings{display:block}.settings>label{margin-bottom:12px;min-width:0}.items,.result-list,.guide-grid{grid-template-columns:1fr}.items{gap:20px}.item{padding:16px 16px 20px}.actions{flex-direction:column;align-items:stretch;gap:12px}.primary{min-width:0}.results{padding:20px 16px}.unit-price strong{font-size:1.75rem}.example-action{gap:8px 16px}.example-action .hint{width:100%}.guide{padding:32px 0}.guide-grid{gap:24px}.footer{align-items:flex-start;flex-direction:column;gap:16px}.footer nav{gap:16px}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .12s}}