:root {
    --color-primary: #00afcc; /* 金春色（ターコイズブルー）*/
    --color-secondary: #6c848d; /* 藍鼠 */
    --color-select: #fcc800; /* 向日葵色 */
    --color-error: #d70035; /* 洋紅色（カーマイン） */
    --color-warning: #ea930a; /* 琥珀色 */
}


h1 {
    color: #222;
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

h2 {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

h3 {
    color: #444;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

h4,
label,
legend {
    color: #555;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

span,
small {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

small {
    font-size: 12px;
    margin: 0;
}

input,
textarea,
select {
    border: 1px solid #ddd;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 400;
}

    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--color-primary);
    }

    input:disabled,
    textarea:disabled,
    select:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

button {
    border: 1px solid #ddd;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

    button:hover:not(:disabled) {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 1px var(--color-primary);
    }

    button:active,
    button.selected {
        background-color: var(--color-primary);
        color: #fff;
    }

    button:disabled {
        opacity: 0.5;
        background-color: #fff;
        color: #888;
        cursor: not-allowed;
    }

    button.primary {
        background-color: var(--color-primary);
        color: #fff;
        font-weight: 500;
    }

    button.secondary {
        background-color: var(--color-secondary);
        color: #fff;
        font-weight: 500;
    }

        button.primary:hover,
        button.secondary:hover {
            opacity: 0.8;
        }

        button.secondary:hover {
            border-color: var(--color-secondary);
            box-shadow: 0 0 0 1px var(--color-secondary);
        }

        button.primary:active,
        button.secondary:active {
            opacity: 1.0;
        }

        button.primary:disabled,
        button.secondary:disabled {
            opacity: 0.2;
        }