:root{--color-white:#fff;--color-black:#000;--color-gray-1:#f8f8f8;--color-gray-2:#e6e6e6;--color-gray-3:#d9d9d9;--color-gray-4:#c2c2c2;--color-gray-5:#969696;--color-gray-6:#727272;--color-gray-7:#4a4a4a;--color-gray-8:#303030;--color-gray-9:#202020;--color-gray-10:#101010;--color-primary-0:#eef7fa;--color-primary-1:#cde5ee;--color-primary-2:#9bcbde;--color-primary-3:#69b1cd;--color-primary-4:#3797bd;--color-primary-5:#057dac;--color-primary-6:#04648a;--color-primary-7:#034b67;--color-primary-8:#023245;--color-primary-9:#011922;--ff-base:"Roboto Mono", "Noto Sans JP", sans-serif;--ff-number:"Roboto Mono", serif;--fz-base:1rem;--fz-sm:calc(var(--fz-base) - .25rem);--fz-md:var(--fz-base);--fz-lg:calc(var(--fz-base) + .5rem);--fz-xl:calc(var(--fz-base) + 1rem);--fz-xxl:calc(var(--fz-base) + 2rem);--fw-base:400;--fw-bold:700;--color-text-title:var(--color-primary-5);--color-input-border:var(--color-gray-4);--color-input-border-focus:var(--color-primary-5);--color-input-outline-focus:var(--color-primary-5);--color-input-bg-focus:var(--color-primary-0);--color-btn-primary:var(--color-primary-5);--color-btn-primary-hover:var(--color-primary-6);--color-btn-clear:var(--color-gray-5);--color-btn-clear-hover:var(--color-gray-6);--color-btn-text:var(--color-white);--color-tbl-border:var(--color-gray-3);--color-tbl-thead:var(--color-primary-1);--color-tbl-tbody-th:var(--color-gray-1);--ff-input:var(--ff-number);--fz-title:var(--fz-xxl);--fz-sub-title:var(--fz-md)}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:url(data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAADwBwCdASpRAFEAPkkkkEYioiGhIdgI8FAJCWkBOgAAFpESFSCcEYHVeuKxXBOEYfymfy1p7w1mmo0ZY9Xu/bjr0pqP1gyQmAAA/vwxvLfqNo+gtH0Fo+gtH8ccrRYqq/qgszb/u4/0BciYYHA+MfumJv9zncd6No+gtH0GbTOLonuM1p0u6wiLTg0SlScgi9dCo/3pqj/iHgjBeatR1CzssyF71CwAAAA=) 0 0/40px;font-family:Roboto Mono,Noto Sans JP,sans-serif}.l-main-container{place-items:center;width:100%;height:100vh;padding:2rem;display:grid}.p-title{font-size:var(--fz-title);font-weight:var(--fw-bold);text-align:center;color:var(--color-text-title);margin-bottom:.3em}.p-sub-title{font-size:var(--fz-sub-title);text-align:center;margin-bottom:2em}.c-tax{width:100%}.c-tax__container{background-color:#fff;border-radius:8px;width:100%;max-width:48rem;margin-inline:auto;padding:2rem;box-shadow:0 0 20px #00000026}.c-tax__item{justify-content:center;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.c-tax__input{border:2px solid var(--color-input-border);text-align:end;width:clamp(10ch,50vw,20ch);font-size:2rem;font-family:var(--ff-input);border-radius:4px;outline:1px solid #0000;padding:.5em;transition:all .3s}.c-tax__input:focus,.c-tax__input:focus-visible{outline:var(--color-input-outline-focus) solid 1px;background:var(--color-input-bg-focus);border-color:var(--color-input-border-focus)}.c-tax__controls{justify-content:center;gap:1rem;margin-bottom:2rem;display:flex}.c-tax__result{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem;display:grid}.c-tbl{border-collapse:collapse;border:1px solid var(--color-tbl-border);width:100%}.c-tbl th,.c-tbl td{border:1px solid var(--color-tbl-border);padding:.5rem}.c-tbl thead th{background:var(--color-tbl-thead)}.c-tbl tbody th{background:var(--color-tbl-tbody-th)}.c-tbl__col-amount{width:65%}.c-tbl__col-tax{width:35%}.c-tbl__cell-amount{text-align:end}.c-tbl__amount{font-size:1.2rem;font-weight:500;font-family:var(--ff-input)}.c-btn{color:var(--color-btn-text);cursor:pointer;border:none;border-radius:.5rem;padding:1rem;font-size:1.2rem;font-weight:700;line-height:1;transition:all .3s}.c-btn__primary{background-color:var(--color-btn-primary)}.c-btn__primary:hover{background-color:var(--color-btn-primary-hover)}.c-btn__clear{background-color:var(--color-btn-clear)}.c-btn__clear:hover{background-color:var(--color-btn-clear-hover)}