/**************************/
/* ボタン */
/**************************/

/*----------ボタン共通----------*/

.btn {
    display: inline-block;

    box-sizing: border-box;
    padding: 8px 16px;

    border: 1px solid transparent;
    border-radius: 6px;

    color: #fffaf0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    transition:
            background-color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.1s ease;
}

.btn:hover {
    box-shadow: 0 2px 6px var(--color-shadow);
}

.btn:active {
    transform: translateY(1px);
}

/*----------検索ボタン----------*/
.btn-search {
    background-color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}

.btn-search:hover {
    background-color: #805a24;
}

/*----------登録ボタン----------*/
.btn-create {
    background-color: #56805a;
    border-color: #56805a;
}

.btn-create:hover {
    background-color: #456b49;
}

/*----------編集ボタン----------*/
.btn-edit {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.btn-edit:hover {
    background-color: var(--color-gold-dark);
}

/*----------削除ボタン----------*/
.btn-delete {
    background-color: #a94442;
    border-color: #a94442;
}

.btn-delete:hover {
    background-color: #873735;
}

/*----------戻る・ログアウト・検索条件クリア----------*/
.btn-back,
.btn-logout,
.btn-reset {
    background-color: var(--color-brown-light);
    border-color: var(--color-brown-light);
}

.btn-back:hover,
.btn-logout:hover,
.btn-reset:hover {
    background-color: var(--color-brown);
}


/*----------表示項目ボタン----------*/

.btn-column-settings {
    background-color: rgba(138, 118, 88, 0.75);
    border-color: rgba(138, 118, 88, 0.75);
}

.btn-column-settings:hover {
    background-color: var(--color-brown-light);
    border-color: var(--color-brown-light);
}