.container {

    width: 100%;
    max-width: 700px;

    margin: 0 auto;

    padding:
        var(--space-6)
        var(--space-4);

    display: flex;
    flex-direction: column;
    gap: var(--space-6);

}


#bmi-form {

    display: flex;
    flex-direction: row;

    justify-content: space-evenly;

    gap: var(--space-4);

}


.input-group {

    display: flex;
    flex-direction: column;

    gap: var(--space-2);

    flex: 1;

}


.input-group label,
.input-group input,
button {

    font-size: inherit;

}


button {

    margin: 0;

}


.bmi-value {

    margin: 0;

    text-align: center;

    font-size: var(--font-size-2xl);

    font-weight: bold;

}


.bmi-table {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

}


.bmi-table th,
.bmi-table td {

    padding: var(--space-3);

    border: 1px solid var(--border-color);

    word-break: break-word;

}


.bmi-table th {

    background: var(--bg-secondary);

}


/* スマホ対応 */

@media (max-width: 600px) {

    #bmi-form {

        flex-direction: column;

        align-items: stretch;

    }


    .input-group {

        width: 100%;

    }

}