body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    height: 100svh;
    background-color: #f0f0f0;
    color: #333;
    header {
        background: #fff;
        display: flex;
        padding: 10px 50px;
        > .logo {
            background: #f5f5f5;
            aspect-ratio: 20 / 17;
            display: flex;
            height: 50px;
            > .logo-text {
                margin: auto;
                color: #777;
                font-size: 8px;
                text-align: center;
            }
        }
        > nav {
            margin: auto 0 auto auto;
            font-size: 0.925em;
            display: flex;
            gap: 15px;
        }
    }
    #breadcrumbs {
        display: flex;
        padding: 10px 50px;
        font-size: 0.8em;
        background: #fff;
        color: #999;
        gap: 5px;
        > a {
            position: relative;
            color: #999;
            margin-right: 10px;
            text-decoration: none;
            &:after {
                content: "";
                position: absolute;
                color: #bbb;
                border: solid 0px #bbb;
                border-width: 1.5px 1.5px 0 0;
                height: 0.4em;
                width: 0.4em;
                top: 50%;
                left: calc(100% + 6px);
                transform: translate(-50%, -50%) rotate(45deg);
            }
        }
        > .now {
            color: #555;
        }
    }
    > .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        margin: auto;
        max-width: 300px;
        > h1 {
            all: unset;
            font-size: 1.5em;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            display: block;
        }
        > #tax-form {
            > .form-group {
                position: relative;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                > label {
                    position: absolute;
                    top: 0px;
                    left: 10px;
                    background-color: #fff;
                    padding: 0 0.4em;
                    font-size: 0.7em;
                    transform: translateY(-50%);
                    display: block;
                    color: #333;
                }
                > input[type="text"],
                > input[type="number"] {
                    all: unset;
                    width: 100%;
                    padding: 9.25px calc(10px + 0.4em);
                    box-sizing: border-box;
                    border: 1px solid #aaa;
                    border-radius: 4px;
                    font-size: 0.9em;
                }
                > button {
                    all: unset;
                    width: 100%;
                    padding: 9.25px 10px;
                    background-color: #089781;
                    color: #fff;
                    font-size: 0.95em;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 4px;
                    transition: background-color 0.1s ease;
                    box-sizing: border-box;
                    &:hover {
                        background-color: #008771;
                    }
                    &:disabled {
                        background-color: #ccc;
                        cursor: not-allowed;
                    }
                }
            }
        }
        > #result {
            position: relative;
            margin-top: 20px;
            padding: 15px 0 0;
            border-top: solid 1px #aaa;
            &:before {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #fff;
                padding: 0 0.4em;
                font-size: 0.75em;
                content: "計算結果";
                display: block;
                color: #333;
            }
            > #summary {
                position: relative;
                margin-bottom: 20px;
                padding: 10px 12.5px;
                background-color: #f9f9f9;
                border: solid 1px #e5e5e5;
                font-size: 0.9em;
                &:before {
                    content: "簡単にまとめると...";
                    top: 0;
                    left: 0;
                    display: block;
                    font-size: 0.75rem;
                    color: #333;
                }
                > .amount {
                    font-size: 1.5rem;
                }
            }
            > table {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.9em;
                > thead {
                    > tr {
                        > th {
                            padding: 10px 12.5px;
                            text-align: left;
                            background-color: #f0f0f0;
                            font-weight: bold;
                            text-align: right;
                            &:first-child {
                                text-align: left;
                            }
                        }
                    }
                }
                > tbody {
                    > tr {
                        &:nth-child(odd) {
                            background-color: #f9f9f9;
                        }
                        &:last-child {
                            border-bottom: none;
                        }
                        > td {
                            padding: 10px 12.5px;
                            text-align: right;
                            &:first-child {
                                text-align: left;
                            }
                        }
                    }
                }
            }
        }
    }
    > #annotation {
        width: 100%;
        padding: 10px;
        background-color: #fff;
        text-align: center;
        font-size: 0.8em;
        color: #666;
        box-sizing: border-box;
    }
}